Disclosure: Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Best Courses Guides

14 Best Free CSS Layout Courses to Take in 2024

Here is a comprehensive guide with the best FREE online courses to learn CSS Layout (Grid, Flexbox, and Positioning).

Are you struggling with centering your elements in your layout? Do the responsive layouts break as soon as you make a small change? Are you still using floats?

If the answer to all of the above questions is a yes, then it is time to upgrade your CSS Skills.

There are a lot of tutorials to get you to understand Flexbox and Grid. In this guide, I will first list Flexbox courses and tutorials since a lot of concepts such as justify-content and align-items also exist in Grid.

Once you are more familiar with Flex, Grid gets easier to understand. Then, after getting through Grid, I will also be listing a few courses here to get you acquainted with using them both together and hope that it will help you make better responsive websites.

Flexbox and Grid can do most of the heavy lifting when you are working on a project but sometimes, you would like certain elements to stick to the top (like a navbar) when you are scrolling the page or you would like to place an element at a specific place. This cannot be effectively accomplished with Flexbox and Grid, and that’s when Positioning comes into play. Therefore, I will be adding some tutorials on positioning elements as well.

I have personally been using Grid more often than Flexbox, since a Grid can provide the same functionality as Flexbox but it also provides more control over the contents.

Here are my top picks. Click on one to skip to the course details:

Course Workload In Brief
1. Flexbox.io (Wes Bos) 2 hours Best course to understand Flexbox with some real life examples
2. Flexbox Froggy (codepip) 1 hour Best Flexbox course available through interactive learning
3. Interactive Guide to Flexbox (Josh w Comeau) 1 hour Best Flexbox course with examples
4. CSS FlexBox (Scrimba) 1 hour Best Flexbox course on YouTube
5. CSS Grid (Wes Bos) 4 hours A comprehensive course on CSS Grids by Wes Bos
6. CSS Grid (FollowAndrew) 1 hour One of the best teaching techniques for CSS Grid
7. CSS Grids (Net Ninja) 2 hours Another great tutorial from Net Ninja
8. Videos on CSS Grid (LayoutLand) 4 hours Some great explanation about units and minmax from this tutorial on grids
9. Creating a robust Grid system using subGrid (Kevin Powell) 1 hour Clarifying the use of subGrids after you have your basics with Grids
10. CSS Grid Tutorial: Responsive Design Examples (Learnwebcode) 2 hours Use Grids to create a responsive design
11. CSS Layout (Adam Argyle) 7 Hours Learn using both Grid and flex with some practical examples
12. CSS Positioning Tutorial – Relative vs. Absolute vs. Fixed vs. Sticky | Crash Course (FollowAndrew) 1 hour One of the most comprehensive tutorials to understand positioning
13. CSS Positioning Tutorials (Net Ninja) 1 Hour Learning positioning with some simple examples.
14. Position absolute and responsive layouts (Kevin Powell) 1 Hour Learning absolute and relative positioning and using some grid
15. Bonus Material (Quick Cheats and other things) NA A collection of resources and tools to help you create your layouts

What is a box model in CSS?

Everything in CSS has a box around it, and understanding these boxes is key to being able to create more complex layouts with CSS, or to align items with other items. (MDN Docs)

The box model consists of several components that work together to create the final layout of an element. These components include:

  • The content: the main content, such as text or an image, that is displayed within the element.
  • The padding: the space between the content and the border, and it affects the overall size of the element by making it larger or smaller.
  • The border: a line that surrounds the element and separates it from other elements on the page.
  • The margin: the space outside the border, between the border of the element and the adjacent elements on the page. The margin affects the spacing of elements on the page by creating space around the element.

Understanding the box model is essential for building effective and well-designed web pages, as it plays a crucial role in determining the layout and spacing of elements on a page. Properly utilizing the box model, along with other CSS layout tools such as Flexbox and Grid, can result in clean and responsive web designs.

Floats are dead. What’s next?

In the early days of web design, the primary layout tool was the “float” property. Floats were originally intended for wrapping text around images, but developers quickly realized that they could also be used for layout. While floats were a huge improvement over previous methods, they had limitations and could be difficult to work with.

Flexbox was introduced as a layout mode in CSS3, offering a more modern and flexible solution. Flexbox made it easier to control the position and size of elements within a container and provided a more intuitive way of arranging items flexibly. It quickly became a popular tool for building responsive and flexible layouts.

Grid was introduced later, in CSS Grid Layout, as an even more powerful layout tool. Grid allowed developers to create complex two-dimensional layouts, making it easier to control the placement of elements in rows and columns. Grid also offered a more structured approach to layout design, which could lead to more efficient and maintainable code.

These more modern layout tools provide greater flexibility, performance, and accessibility, making it easier for developers to create complex and responsive designs for the web.

If you are not sure which layout tool to use, I would recommend this video by Kevin Powell.

A more comprehensive guide can be found in the Flexbox and Grid documentation in MDN Docs. If you would like to learn more about it with videos and interactive material continue reading.

Find your next course.

Best Courses Guides Methodology

I built this ranking following the now tried-and-tested methodology used in previous Best Courses Guides (you can find them all here). It involves a three-step process:

  1. Research: I started by leveraging Class Central’s database with 100K online courses and 200K+ reviews. Then, I made a preliminary selection of 54 courses by rating, reviews, and bookmarks.
  2. Evaluate: I read through reviews on Class Central, Reddit, and course providers to understand what other learners thought about each course and combined it with my own experience as a learner.
  3. Select: Well-made courses were picked if they presented valuable and engaging content and they have to fit in a set of criteria and be ranked accordingly: comprehensive curriculum, affordability, release date, ratings and enrollments.

Course Ranking Statistics

Here are some aggregate stats about the ranking:

  • All of the courses in this ranking require a basic knowledge of HTML/CSS.
  • All the courses listed in this article are free.
  • Most of the courses are suitable for CSS-Animation beginners.

Without further ado, let’s go through the top picks.

1. Flexbox.io (Wes Bos)

My first pick is the Flexbox.io course offered for free by Wes Bos.

The “Flexbox.io” course by Wes Bos is a comprehensive guide to learning CSS Flexbox. The course covers the basics of Flexbox and teaches you how to use this powerful layout tool to build responsive and flexible web designs.

The course is organized into easy-to-follow modules, starting with an introduction to Flexbox and its key concepts. You will learn how to use Flexbox to control the position and size of elements within a container, and how to build responsive designs that adapt to different screen sizes.

What You’ll Learn

The course also covers advanced topics, such as using Flexbox with CSS Grid, creating complex nested layouts, and using Flexbox in conjunction with other layout tools such as media queries.

How You’ll Learn

Throughout the course, you will work through hands-on projects that reinforce your learning and help you apply Flexbox in real-world scenarios. You will learn how to use Flexbox for common layout patterns, such as building navigation menus, creating Grid-based layouts, and aligning elements vertically and horizontally.

Provider Flexbox.io
Instructor Wes Bos
Level Beginner
Workload 2 hours
Certificate None

Fun Facts

2. Flexbox Froggy (codepip)

Flexbox Froggy” by Codepip is a game-based learning platform that teaches the basics of CSS Flexbox in an interactive and fun way.

The course is suitable for beginners and experienced developers alike, and provides a gentle introduction to Flexbox without any prior knowledge required. It is also a great way to brush up on your Flexbox skills if you have used it before but would like to reinforce your understanding.

What You’ll Learn

The course is designed to help you learn the fundamental concepts of Flexbox in a way that is engaging and memorable.

How You’ll Learn

The course consists of a series of challenges that require you to use Flexbox properties to arrange frogs on a lily pad. Each challenge builds on the previous one, introducing new concepts and properties along the way. You will learn how to control the alignment and spacing of elements within a container, as well as how to create responsive designs that adjust to different screen sizes.

Provider Codepip
Level Beginner
Workload 1 hour
Certificate None

Fun Facts

  • Codepip has unlimited Flex exercises on his pro plan. You can find more games here
  • He also has a similar offering for Grids called the Grid garden

3. An interactive Guide to Flexbox (Josh W. Comeau)

The “Interactive Guide to Flexbox” by Josh W. Comeau is a comprehensive, yet accessible, introduction to CSS Flexbox. The guide provides an interactive and visual way of learning Flexbox, helping you to understand the concepts and properties through practical examples.

What You’ll Learn

The guide is organized into sections that cover the different aspects of Flexbox, starting with an overview of its key concepts and properties. You will learn about the different layout modes available in Flexbox, such as row, column, and wrap, and how to control the position and size of elements within a container.

The guide also covers advanced topics, such as using Flexbox for responsive designs, creating Grid-based layouts, and using Flexbox in conjunction with other layout tools such as media queries.

How You’ll Learn

Throughout the guide, you can experiment with the examples provided and see the results of your changes in real-time, making it an ideal resource for learning Flexbox in a hands-on and interactive way.

Instructor(s) Josh W. Comeau
Level Beginner
Workload 1 hour
Certificate None

Fun Facts

  • Josh has a blog where he covers other topics such as animation and Grid here.

4. CSS Flexbox (Scrimba)

The Flexbox tutorial playlist by Scrimba is a comprehensive video series that provides a step-by-step introduction to CSS Flexbox.

What You’ll Learn

The tutorials cover a wide range of topics, from the basics of Flexbox to advanced usage, making it an ideal resource for both beginner and advanced users.

The playlist starts by explaining the key concepts of Flexbox, such as layout modes, flex containers and flex items, and how to use Flexbox to create simple and complex layouts. You will also learn how to control the position and size of elements within a container using Flexbox, and how to create responsive designs using Flexbox.

How You’ll Learn

You can follow along with the playlist but they also have an interactive tutorial on their website.

Channel Scrimba
Provider YouTube
Instructor Per Harald Borgen
Level Intermediate
Workload 1 hour
Views 350k
Likes 10K
Certificate None

Fun Facts

  • This same tutorial was taken by freecodecamp as their Flex tutorial. You can view it here
  • Scrimba also has a Grid tutorial accessible here

5. CSS Grid (Wes Bos)

The playlist to learn CSS Grid by Wes Bos is a comprehensive video series that provides a step-by-step introduction to CSS Grid. The playlist covers a wide range of topics, from the basics of CSS Grid to advanced usage, making it an ideal resource for both beginner and advanced users.

What You’ll Learn

The playlist starts by explaining the key concepts of CSS Grid, such as Grid containers, Grid items, rows and columns, and how to use CSS Grid to create simple and complex layouts. You will also learn how to position elements within a Grid, control the size and spacing of elements, and create responsive designs using CSS Grid.

How You’ll Learn

Throughout the playlist, the instructor uses clear and concise explanations, along with examples and code snippets, to help you understand the concepts and properties involved. The tutorials are designed in a way that allows you to learn at your own pace, and you can easily revisit any topic as needed.

Provider Youtube
Instructor(s) Wes Bos
Level Intermediate
Workload 4 hours
Enrollments 350k
Certificate None

Fun Facts

6. CSS Grid (FollowAndrew)

I am personally a very big fan of Andrew’s teaching style. He starts by making blocks to make sense of the Grid and then puts the required information, which helps in understanding how things are affecting the layout much better.

What You’ll Learn

The course starts by explaining the key concepts of CSS Grid, such as Grid containers, Grid items, rows and columns, and how to use CSS Grid to create simple and complex layouts. You will also learn how to position elements within a Grid, control the size and spacing of elements, and create responsive designs using CSS Grid.

How You’ll Learn

The course provides hands-on learning by looking at the video and working along.

Provider Youtube
Instructor(s) Andrew
Level Beginner
Workload 1 Hour
Certificate None

Fun Facts

7. CSS Grid (Net Ninja)

This is another tutorial from Net Ninja. The tutorial explains grids and then proceeds to explain them towards the end with examples.

What You’ll Learn

NetNinja starts by explaining why a Grid could be a useful tool when making layouts before explaining to you the basics of Grids. You will learn about the use of CSS Grid, columns, rows, grid lines, nested grids, aligning and justifying items, creating a 12-column grid, mosaic layout, grid areas, and responsive grid examples.

How You’ll Learn

The course provides videos with hands-on learning and practice.

Provider Youtube
Instructor Shaun
Channel Net Ninja
Level Beginner
Workload 2 hours
Enrollments 560k
Certificate None

Fun Facts

  • I also recommend looking into this playlist for another responsive layout made using Grids..
  • He also explains flex here.

8. Videos on CSS Grid (Layout Land)

The course gives you an overview of CSS Grid and its capabilities, making it a great starting point for those new to CSS Grid. These tutorials teach you how to use different CSS Grid units for more flexible designs. It also explains how to use white space to enhance the layout design. It also explains how you could use CSS Grid to create visually appealing designs with overlapping elements.

What You’ll Learn

You will learn the basics of CSS Grid and then expand into using flex and grid together to create layouts. It will also teach you the user of gaps, and minmax to create responsive layouts.

How You’ll Learn

You will learn by following along with the video.

Provider YouTube
Instructor(s) Layout Land
Level Intermediate
Workload 3 Hours
Views 60k
Likes 3k
Certificate None

9. Creating a robust Grid system using subGrid (Kevin Powell)

SubGrid is a section in Grid layouts. The Box Model is all about boxes within boxes. SubGrids allow you to nest Grids within Grids.

What You’ll Learn

You will learn the functionality of subGrids by creating a simple responsive layout using Grids and subGrids.

How You’ll Learn

This would be accomplished by working with the video.

Provider Youtube
Instructor(s) Kevin Powell
Level Intermediate
Workload 1 Hour
Enrollments 30k
Certificate None

Fun Facts

10. ​​CSS Grid Tutorial: Responsive Design Examples (learnwebcode)

The course covers various techniques for centering elements within a Grid layout, as well as how to avoid the need for extra wrapper divs.

What You’ll Learn

The course also covers manual placement of elements within a Grid layout, and teaches how to create complex and flexible Grid layouts using Grid areas. Additionally, the course shows how to create responsive Grid layouts without the need for media queries or breakpoints, and explores creative ways to use CSS Grid to create unique and engaging designs.

How You’ll Learn

You will learn by following along with the video.

Provider YouTube
Instructor(s) Learnwebcode
Level Intermediate
Workload 1 Hour
Views 30k
Likes 3k
Certificate None

Additional info

  • You can find the basics covered for flex and Grids here.

11. CSS Layout (Adam Argyle)

Both Grid and Flexbox are supposed to be used together depending on the layout requirements. Here is a video playlist showing how to use them both in projects.

What You’ll Learn

You will learn to use both Flex and Grid and create some layouts. The course includes several hands-on projects such as building a timer app, a responsive dashboard with statistics, a media scroller carousel, and a mini insta-friends list.

How You’ll Learn

You will learn by following the course along with the video on YouTube.

Provider YouTube
Instructor(s) Adam Argyle
Level Intermediate
Workload 7 Hours
Certificate None

12. CSS Positioning Tutorial – Relative vs. Absolute vs. Fixed vs. Sticky | Crash Course (FollowAndrew)

CSS Positioning Tutorial by Andrew is one of the most comprehensive tutorials to understand positioning.

What You’ll Learn

Andrew’s positioning tutorial covers various CSS positioning types and their values, including relative, absolute, fixed, and sticky position. It also explores the concepts of HTML document flow and how the position types affect it, as well as the stacking order of elements using z-index. The course includes live code samples to help users understand and practice the concepts covered in the syllabus.

How You’ll Learn

You will learn by following the course along with the video on YouTube.

Provider Youtube
Instructor(s) Andrew
Level Beginner
Workload 1 Hour
Certificate None

13. CSS Positioning Tutorials (Net Ninja)

This CSS Positioning Tutorial is a comprehensive playlist that covers the various types of CSS positioning.

What You’ll Learn

You will learn about normal document flow, floating elements, clearing floats, floating columns, text columns, relative position, absolute position, fixed position, and Z-index stacking order. The tutorial also covers the box model review and the introduction to CSS positioning. The final part of the tutorial covers clipping content. The course provides live code samples for a better understanding of the concepts discussed.

How You’ll Learn

You will learn by following the course along with the video on YouTube.

Provider Youtube
Instructor Shaun
Channel The Net Ninja
Level Beginner
Workload 2 hours
Enrollments 660k
Certificate None

Fun Facts:

You can also follow along this video tutorial to understand positioning by creating a Mario web page.

14. Position Absolute and relative layouts (Kevin Powell)

Once you have completed the above tutorials and want to simply understand the use of absolute positioning and relative positioning, I’d recommend looking into this video by Kevin Powell. He explains absolute positioning and relative positioning by making a layout by creating a credit card (front and back) and making sure they would be responsive as well.

What You’ll Learn

You will deepen your understanding of absolute and relative positioning with this video with a practical example.

How You’ll Learn

You will learn by following the course along with the video on YouTube.

Provider Youtube
Instructor(s) Kevin Powell
Level Intermediate
Workload 1 Hour
Enrollments 30k
Certificate None

15. Bonus Material (Quick Cheats and other things)

After completing the following material, you might want to get a cheat-sheet for Flex and Grid and this could be found here:

If you have more links that could help, please do not hesitate to mention them in the comments.

Kinjal Vora Profile Image

Kinjal Vora

I love to learn. Currently exploring Full-stack-development and pursuing a second degree in Computer Science.

Comments 0

Leave a reply

Your email address will not be published. All comments go through moderation, so your comment won't display immediately.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Browse our catalog

Discover thousands of free online courses from top universities around the world like MIT, Stanford, and Harvard.

Browse all subjects