Best Free CSS Courses
Here is a full list of the best FREE online courses for learning CSS Layout (Grid, Flexbox, and Positioning).
Are you having trouble putting things in the middle of your layout? When you make a small change, do the responsive layouts break? Floats? Do you still use them?
If you answered “yes” to all of the above, it’s time to improve your CSS skills.
There are many tutorials that can help you learn about Flexbox and Grid. In this guide, I’ll start with a list of Flexbox courses and tutorials, since Grid has a lot of the same ideas, like justify-content and align-items.
Grid is easier to understand once you know more about Flex. Then, when you’re done with Grid, I’ll list a few courses here that will help you learn how to use both of them together, which I hope will help you make better responsive websites.
Flexbox and Grid can do most of the heavy lifting when you’re working on a project, but sometimes you want certain elements (like a navbar) to stay at the top of the page when you scroll, or you want to put an element in a certain place.
This can’t be done well with Flexbox and Grid, so Positioning is used. So, I’ll also be adding some tutorials on how to place elements.
I’ve been using Grid more than Flexbox because it can do the same things as Flexbox but gives me more control over the content.
| 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 CSS box model?
Everything in CSS has a box around it, and it’s important to understand these boxes if you want to use CSS to make more complicated layouts or align things with other things. (MDN Docs)
The box model is made up of a few parts that all work together to make the layout of an element. Among these parts are:
The content is the main thing that is shown in the element. This could be text or an image.
The padding is the space between the content and the edge of the element. It can make the element bigger or smaller overall.
The border is a line around the element that sets it apart from other things on the page.
The margin is the space between the edge of an element and the edge of the next element on the page. By making space around an element, the margin affects how far apart things are on the page.
It’s important to understand the box model if you want to make effective and well-designed web pages, because it determines how things are laid out and how far apart they are. When you use the box model and other CSS layout tools like Flexbox and Grid in the right way, you can make clean and responsive web designs.
Floats are dead. What comes next?
In the early days of web design, the “float” property was the main way to set up pages. Floats were first made to wrap text around images, but developers soon realized that they could also be used to set up the page. Floats were a big improvement over what had been done before, but they had their limits and could be hard to work with.
Flexbox is a layout mode that was added to CSS3 to make things more modern and flexible. Flexbox made it easier to change the size and position of elements inside a container and made it easier to arrange things in a flexible way. It quickly became a popular tool for making layouts that change and adapt.
Grid was added later as an even more powerful layout tool in CSS Grid Layout. Grid let developers make complicated two-dimensional layouts, which made it easier to control where rows and columns of elements went. Grid also gave a more organized way to design layouts, which could lead to code that was easier to use and maintain.
These newer layout tools are more flexible, faster, and easier to use, which makes it easier for web developers to make designs that are both complex and responsive.
If you don’t know which layout tool to use, this video by Kevin Powell is a good choice.
