Learn CSS Flexbox Practically
3.9 (67 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
15,217 students enrolled

Learn CSS Flexbox Practically

Create a Page with Recipe Cards
3.9 (67 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
15,217 students enrolled
Created by Arthur Tkachenko
Last updated 1/2019
English
English [Auto]
Current price: $20.99 Original price: $29.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1 hour on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • What is flexbox module
  • How to manage items at container level
  • How to manage items at items level
  • How to create basic layouts, using flexboxes
Requirements
  • Students need to know basics of HTML and CSS
Description

This class is about learning how flexboxes work.
Did you hear about them before?

It's a module, that has roots at Mozilla. It's a big timesaver for Frontend developers.
You'll never want to create an HTML page without flexboxes after this course.

We'll learn only basic things. Specification mostly.

All CSS properties related to flexboxes. 
And we'll have a set of easy practical lessons.
For each practice lesson, I advise you to recreate an example from scratch(no copy-paste) by your hands.


Be aware, that this course touching only flexbox basics, so you need to know HTML and CSS. 


TOOLKIT


Github- if you ok to share your code with other - My current pick
Bitbucket - if you want to have a free storage

Google drive or Dropbox - if you just want to save your code at cloud

You can also use Codesandbox or other online editors.
For practice lessons, I'll use CodePen.

But I'm sure - for your project, you'll decide to use a code editor.

Code editors
Sublime - I use it around 6 years. small size and everything important
Atom because it's backed by the GitHub team and it also has a Github sync.

If you want to save your project tasks, you can use Trello

If you want to have some flexbox practice, you can check this game: flexboxfroggy


For flexbox prefixing please google "flexbox prefixes SASS"

Who this course is for:
  • Beginner Frontend developer
Course content
Expand all 21 lectures 01:07:54
+ Introduction, Parent Properties
11 lectures 38:12
Practice lesson. display:flex
01:51
Practice lesson. flex-direction
02:05
Practice lesson. flex-wrap
02:49
Parent properties. justify-content
06:07
Practice lesson. justify-content
03:18
Practice lesson. justify-content
02:46
Practice lesson. justify-content
01:35
Practice lesson. justify-content
03:28
Parent properties. align-content
03:19
+ Properties for children
10 lectures 29:42
Properties for children. order, flex-grow
03:36
Practice lesson. order
03:39
Practice lesson. order
02:25
Practice lesson. flex-grow
02:45
Properties for children. flex-shrink, flex-basis
03:13
Practice lesson. flex-shrink
01:51
Properties for children. flex, align-self
02:50
Practice lesson. Holy Grail layout
03:18
Browsers support
02:37
Flexbox prefixing
03:28
+ Class project
0 lectures 00:00
Your project is to create a page with recipe cards. Nothing complex, but you need to use flexboxes. Don't use CSS grids or Bootstrap.
Create a page with recipe cards
4 questions