CSS can be a pain. In today's lesson, we will talk about two tools -- Flexbox and Sass -- that will make the styling process a little less stressful.
This lesson is broken down into two parts:
- Give an example of a problem solved by Flexbox.
- Given a desktop-first webpage, make it look presentable on mobile devices (and vice-versa) with as little CSS as possible.
- Contrast flex containers and flex items.
- Draw a diagram that includes: flex container, flex item, main and cross-axes, starts and ends for all axes, and main and cross-sizes.
- Contrast
align-itemsandalign-self. - Explain what is meant by the "Holy Grail Layout".
- Be able to explain what Sass is and why it's used.
- Use variables to make code more flexible.
- Understand how to use nesting to help DRY up selectors and properties.
- Differentiate between
@extend,@import,@mixin&@includeand@function.