Hands-On Examples

The best way to learn flexbox is to use it to move a bunch of boxes around. So, that’s exactly what we’ll do in the Flexbox chapter, as you can see below. This doesn’t just go for layouts, though—the entire tutorial follows this hands-on philosophy, from Basic Web Pages to Web Typography.

Your browser doesn’t support HTML videos

We meticulously designed our example projects to gently guide you through a new aspect of HTML and CSS while still demonstrating concepts with concrete scenarios.

This means that you’ll rarely read more than a paragraph or two without writing some code and seeing what it does (so you’ll never get bored). In addition, you’ll get a ton of practice working in a text editor and checking your code in a browser, just like real web developers do.