Exercises for learning how to use new CSS layout features and techniques.
The results of these exercises ought to work just fine in the latest version of Google Chrome. Special cases are individually marked.
You should already know how CSS works, what floats do, and what classes mean. If you need a refresh, try A Beginner's Guide to HTML and CSS by Shay Howe.
You will find the folders with exercises under the projects/ folder. They are named like 01_flexbox, 02_regions, and so forth. Open them in your code editor of choice.
Each folder contains some HTML files with exercises to learn about a specific feature or use case. In every HTML file there is a <style> tag with CSS and instructions. They're easy to follow. Look for this format:
/* STEP 1 */
/* Set property: value; to learn something new. */
The CSS in the <style> contains the essential bits for learning at each stage. Some demos also have linked stylesheets and scripts. Those files contain supporting code that make the demo look nice. They're out of sight to keep you focused.
A version of the each completed exercise lives one level lower, in the complete/ folder. Peek in there to see the result, if you need to.
- A Complete Guide to Flexbox on css-tricks.com
- Putting Flexbox into Practice by Zoe Gillenwater
- Smores Day demo by Zoe Gillenwater
- Solved by Flexbox use cases by Philip Walton
- “Old” Flexbox and “New” Flexbox on css-tricks.com
- CSS Regions samples on codepen.io
- Learn how to enable CSS Regions in browsers
- Killer Responsive Layouts With CSS Regions
- Orphan Elephants example. Source
- Adaptive UI with CSS Regions
- Responsive menu with CSS Regions
- Creating Non-Rectangular Layouts with CSS Shapes by Sara Soueidan
- CSS Shapes samples on codepen.io
- Learn how to enable CSS Shapes in browsers
- Alice in Wonderland demo. Source. Blog post
- Custom builds of Modernizr see "Non-core detects".