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

Description

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 pickBitbucket - 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 editorsSublime - I use it around 6 years. small size and everything importantAtom 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"

• Beginner Frontend developer

Course content

• Introduction, Parent Properties
  • Intro to flexboxes. Flexbox Axis
  • Parent Properties. display, flex-direction, flex-wrap, flex-flow
  • Practice lesson. display:flex
  • Practice lesson. flex-direction
  • Practice lesson. flex-wrap
  • Parent properties. justify-content
  • Practice lesson. justify-content
  • Practice lesson. justify-content
  • Practice lesson. justify-content
  • Practice lesson. justify-content
  • Parent properties. align-content
• Properties for children
  • Properties for children. order, flex-grow
  • Practice lesson. order
  • Practice lesson. order
  • Practice lesson. flex-grow
  • Properties for children. flex-shrink, flex-basis
  • Practice lesson. flex-shrink
  • Properties for children. flex, align-self
  • Practice lesson. Holy Grail layout
  • Browsers support
  • Flexbox prefixing
• Class project
  • Create a page with recipe cards