After the success of the CSS Grid course I launched I decided to launch a second free course.
This time you can learn Flexbox, which is a must-have skill for front-end developers.
In this article, I’ll explain how the Flexbox course is laid out so that you can decide whether it’s a good fit for you.
If you want to jump straight into the course immediately, you can just go there directly and get started.
Note: I’ve also launched a free CSS Variables course here.
What my Flexbox course covers
The course consists of twelve interactive screencasts, which take you from beginner to advanced. It’s focused on giving you relevant skills as early as possible, meaning that I’ve prioritized the properties based on how useful I think they are in a real-world setting.
So if you only work through the five first, you’ll still learn new concepts you can start using in your projects. This said, I still recommend working through the whole thing.
Throughout the course, you’ll be building and experimenting with a navbar, since this is a very typical use case for Flexbox.
Let’s have a look at each of the screencasts:
Lesson #1: Your first Flexbox
You’ll start off by creating a simple layout. This will teach you the concept of a flex container and flex items, the two core ingredients of a Flexbox layout.
Lesson #2: Main axis and cross axis
In the second screencast, I explain a core concept of Flexbox that’s critical to understand early on: axes. A Flexbox layout has two axes: the main axis and the cross axis. By default, the main axis is horizontal and the cross axis vertical, but they can also flip roles.
Lesson #3: How to justify content
The justify-content property controls the content along the main axis. Throughout the course, your main axis will be mostly horizontal, as opposed to vertical. I’ve chosen to do it this way as I’ve found horizontal Flexbox layouts to be more common than vertical ones in real life.
Lesson #4: How to position single items
In this lesson, you’ll learn how to position single items using the good old technique of setting the margin to auto.
Lesson #5: The flex property
The flex property allows you to give your items responsive widths. It’s actually a shorthand for three other properties: flex-grow, flex-shrink and flex-basis. But we’ll save those for the end of the course, as they’re more advanced.
Lesson #6: How to align items
The align-items property controls the items along the cross axis, which in our case is vertical. In the image above, we’ve centred the items along this axis.
Lesson #7: Flex direction column
Setting the flex-direction to the column will flip the main axis and cross axis, so that the items are laid our downwards as opposed to sideways.
Lesson #8: Wrapping
By default, Flexbox won’t allow you to wrap your items, meaning they’ll stay on a single line or a row. If you set flex-wrap to wrap you’ll be able to, though. I’ll show how this would play out.
Lesson #9: Flex grow, shrink, and basis
Flex grow, shrink, and basis are a bit complex to understand, so this is the longest screencast in the course. In short, flex-basis sets the base width of the item, flex-grow controls how it’ll grow above it’s basis width, and flex-shrink controls how it’ll shrink when the item is narrower than its base width.
Lesson #10: Order
We’ll end the course with a lecture on the order property. This will introduce you to source order independence, which allows you to set the order of the items independently of how they’re laid out in the HTML.
Bonus section
In the bonus section, you’ll create two real-world layouts from beginning to end.
In the first one, you’ll take everything you’ve learned through the course and use it to create a navbar which adapts itself to various screen sizes.
In the second bonus lecture, you’ll experiment with creating an image grid with Flexbox. If you’ve taken my CSS Grid course, you’ll recognize the setup from there:
And that’s all.
The Scrimba format
Let’s also finally look at the technology behind the course. It’s built using Scrimba, an interactive coding screencast tool which has been built by my two awesome co-founders Sindre and Magnus.
Scrimba screencasts look like normal videos, but they’re fully interactive. You can edit the code inside the casts.
Here’s a gif which explains the concept:
Pause the screencast → Edit the code → Run it! → See your changes
This is great for when you feel you need to experiment with the code in order to properly understand it, or when you simply want to copy a piece of the code.
Also, because Scrimba screencasts happen in a code editor, they only take up about 1% of the bandwidth that a normal video would. This means Scrimba screencasts are much easier to stream — even when your internet connection is slow.
I hope you enjoy the course. If you have any feedback or requests for more screencasts to add, feel free to let me know on Twitter and I’d be happy to consider it.
Happy coding!
Thanks for reading! My name is Per, I’m the co-founder of Scrimba, and I love helping people learn new skills. Follow me on Twitter if you’d like to be notified about new articles and resources.
Top comments (0)