Flexbox is a powerful CSS feature that allows you to create user interfaces that adapt to any screen size. FreeCodeCamp just published a flexbox for beginners course where you’ll learn concepts and code syntax by building your own website navigation bar.
If you’ve ever struggled with CSS to center something or try to get columns to line up nicely, Flexbox makes it dramatically easier. With just a few features, you can create advanced layouts that “flex” to different screen sizes, without having to write a bunch of custom media queries.
Developer and mentor Indra (Kovidhandar) will walk you step-by-step through each Flexbox property. You’ll learn how to align items along the center and cross axes, rearrange elements without changing the HTML, grow and shrink items, and finally understand what FlexGrow, FlexShrunk, and FlexBase really do. He also shows real examples from sites like GitHub and Datadog, then shows how to create their configuration snippets.
The course concludes with two mini-projects: centering the element vertically and horizontally (everything everyone Googles at some point) and creating a clean navigation bar using only flexbox.
If you want to improve your front-end development skills, this course is a good way to spend a few hours on your weekend. (2 hour YouTube course):