Professional CSS Flexbox
4.6 (135 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.
409 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Professional CSS Flexbox to your Wishlist.

Add to Wishlist

Professional CSS Flexbox

Learn how to build Web and Mobile Application Interfaces for the modern world!
Bestselling
4.6 (135 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.
409 students enrolled
Last updated 4/2016
English
Current price: $10 Original price: $35 Discount: 71% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 40 mins on-demand video
  • 5 Articles
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • 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.
View Curriculum
Requirements
  • You should have a basic understanding of HTML and CSS.
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!

Who 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
+
Setup
2 Lectures 03:23

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!

Preview 00:59

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

Preview 02:24
+
Flex Containers
6 Lectures 14:58

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

Flex Wrap
02:20

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

Justify Content
02:32

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

Preview 04:11

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

Align Items
03:11

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

Align Content
02:17

Review and Practice With Games!
00:27
+
Flex Items
6 Lectures 12:32

All about the order CSS property for Flex Items.

Order
02:22

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

Flex Grow
03:03

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

Flex Shrink
02:05

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

Flex Basis
02:40

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

Align Self
01:55

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/

Review and Practice with Games!
00:27
+
Shorthand Properties
1 Lecture 00:41

An overview of the 2 CSS shorthand properties for Flexbox.

Shorthand Properties - flex and flex-flow.
00:41
+
Techniques
4 Lectures 09:55

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

Perfect Centering
02:00

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

Preview 03:22

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

Responsive Forms
01:28

How to layout flex items that scroll their content individually.

Scroll Items Independently
03:05
+
Additional Material
2 Lectures 01:48

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

Flexbox Quick Reference
01:29

Course Feedback and Comments
00:18
About the Instructor
Greg Bararaghimian
4.6 Average rating
135 Reviews
409 Students
1 Course
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!