Here's my free Flexbox course where you can build projects  interactively
Tags: css, cssgrid, flexbox
Published: 2019-07-16 08:42:13

---
title: Here's my free Flexbox course where you can build projects  interactively
description: After the success of our CSS Grid course I decided to launch one on Flexbox
categories: []
keywords: []
slug: /@perborgen/i-just-launched-a-free-full-length-flexbox-course-where-you-can-build-projects-interactively-1860e3d3c4af
tags: css, css grid, flexbox
canonical_url: https://www.freecodecamp.org/news/i-just-launched-a-free-full-length-flexbox-course-where-you-can-build-projects-interactively-1860e3d3c4af/
published: true
cover_image: https://cdn-images-1.medium.com/max/1200/1*lTZoPTPzuKifD2wr3rUETw.png
---

After the success of the [CSS Grid course I launched](https://medium.freecodecamp.org/heres-my-free-css-grid-course-merry-christmas-3826dd24f098) 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](https://scrimba.com/g/gflexbox?utm_source=dev.to&utm_medium=referral&utm_campaign=gflexbox_tutorial_article).

> Note: I’ve also launched a free [CSS Variables course here.](https://scrimba.com/g/gcssvariables?utm_source=dev.to&utm_medium=referral&utm_campaign=gflexbox_tutorial_article)

### 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

![](https://cdn-images-1.medium.com/max/800/1*rPzIll98F0gHToNeKZE3RQ.png)

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

![](https://cdn-images-1.medium.com/max/800/1*1z53nj8_eUtwkdyr6UEAfg.png)

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

![](https://cdn-images-1.medium.com/max/800/1*oX0mCKg4caqQE7X04CvIiw.png)

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

![](https://cdn-images-1.medium.com/max/800/1*TK1nvZSGCbi3EfQBwMQbgQ.png)

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

![](https://cdn-images-1.medium.com/max/800/1*gnO8ugL8stVg0ytPlTJNEQ.png)

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

![](https://cdn-images-1.medium.com/max/800/1*bpDqaWA3uSwUtdXDKAwg6w.png)

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

![](https://cdn-images-1.medium.com/max/800/1*U9_BLWNTbc91G8zGb9kXFQ.png)

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

![](https://cdn-images-1.medium.com/max/800/1*NVE8i0fzYR_lkztjmhgN5w.png)

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

![](https://cdn-images-1.medium.com/max/800/1*Xbb_jKfJ9rbXTeWqs89MRw.gif)

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

![](https://cdn-images-1.medium.com/max/800/1*hyzXwySi5-ep_j8rfCEi9A.png)

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.

![](https://cdn-images-1.medium.com/max/800/1*CZikqoB4iZIIrV_rAW_qdg.gif)

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:

![](https://cdn-images-1.medium.com/max/800/1*e7EoeCwxU6RCPKsj72KkUg.png)

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](https://medium.com/u/c825b7f99be3) and [Magnus](https://medium.com/u/1a7998d688dd).

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](https://cdn-images-1.medium.com/max/1200/1*4PWxbgV--7ZHlB-YVqavJg.gif)
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](https://twitter.com/perborgen) and I’d be happy to consider it.

Happy coding!

Thanks for reading! My name is Per, I’m the co-founder of [Scrimba](https://scrimba.com?utm_source=dev.to&utm_medium=referral&utm_campaign=gflexbox_tutorial_article), and I love helping people learn new skills. Follow me on [Twitter](https://twitter.com/perborgen) if you’d like to be notified about new articles and resources.