Professional CSS Flexbox

Learn how to build Web and Mobile Application Interfaces for the modern world!
4.6 (43 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
158 students enrolled
$19
$35
46% off
Take This Course
  • Lectures 21
  • Length 43 mins
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 4/2016 English

Course Description

Flexbox Is the way to layout websites and web applications in the modern world.

In this class you will learn about all the features and properties of Flexbox and how to use them! We will take a hands on approach to discovering all the awesome ways to use Flexbox and by the end of the course you will have a professional understanding of Flexbox and how to use it to layout Websites and Web Applications like a modern CSS guru!

Each video includes a link to the lesson's code so you can easily follow and code along without needing anything but a web browser.

To be successful in this class all you need is a basic understanding of CSS and HTML!

The old way of laying out content on the web is on it's last days. Learn how to utilize Flexbox to streamline, simplify, and future-proof your Websites and Mobile Applications!

What are the requirements?

  • You should have a basic understanding of HTML and CSS.

What am I going to get from this course?

  • Gain a complete professional understanding of Flexbox
  • Utilize flexbox to solve common layout problems easily.
  • Create professional user interfaces for web and mobile applications with ease.

What is the target audience?

  • This course is perfect for anyone that wants to learn how to layout web and mobile applications for the modern world.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Setup
00:59

An introduction to JSbin.com the coding environment for this course. We are going to see how we can use JSbin.com to code together and learn Flexbox!

02:24

An introduction to Flexbox with an explanation of Flex Items and Flex Containers. 

Section 2: Flex Containers
02:20

All about the flex-wrap CSS property for Flex Containers.

02:32

All about the justify-content CSS property for Flex Containers.

04:11

All about the flex-direction CSS property for Flex Containers.

03:11

All about the align-items CSS property for Flex Containers.

02:17

All about the align-content CSS property for Flex Containers.

Review and Practice With Games!
Article
Section 3: Flex Items
02:22

All about the order CSS property for Flex Items.

03:03

All about the flex-grow CSS property for Flex Items.

02:05

All about the flex-shrink CSS property for Flex Items.

02:40

All about the flex-basis CSS property for Flex Items.

01:55

All about the align-self CSS property for Flex Items.

Article

Review

In this section we learned all of the CSS properties for Flex Items.

We've seen how we can use:

  • order to change the display order of items
  • flex-grow to specify how our items take up extra main-axis space when available
  • flex-shring to specify how our items shrink when there isn't enough main-axis space
  • flex-basis to specify a dimension tied to the main-axis
  • align-self to align individual items along the cross-axis on their line

Practice

A super fun way to practice what you've learned is with a couple of awesome games that you can play right in your web browser!

Try to finish Flexbox Tower Defense: http://www.flexboxdefense.com/

Try to finish Flexbox Froggie: http://flexboxfroggy.com/

Section 4: Shorthand Properties
Article

An overview of the 2 CSS shorthand properties for Flexbox.

Section 5: Techniques
02:00

How to use Flexbox to easily center content both vertically and horizontally.

03:22

How to use Flexbox to create a responsive Holy-Grayout layout.

01:28

How to use Fexbox to layout responsive forms that look great across devices and screen sizes.

03:05

How to layout flex items that scroll their content individually.

Section 6: Additional Material
Article

All the notes from the class and some great resources for reference and continued practice.

Course Feedback and Comments
Article

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Greg Bararaghimian, Senior Web Developer

I'm a web developer and programming instructor living in New Orleans. I've been programming for 10 years and absolutely love all things web development! I've built responsive web and mobile applications for many companies small and large and love learning and teaching the latest and greatest techniques. I hope you'll join me in learning some awesome new ways to develop for the modern web!

Ready to start learning?
Take This Course