🔅 CSS: Combining Grid and Flexbox

🌐 Author: Emily Kay
🔰 Level: Advanced

⏰ Duration: 3h 50m

🌀 Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.

📗 Topics: CSS Grid Layout, CSS Flexbox

📤 Join @webdev_trainings for more courses

🔸 Full description 🔸

With Grid and Flexbox, CSS is changing dramatically. Whereas in the past, creating complex layouts required all sorts of CSS hacks, JavaScript, or both, now you can use Flexbox and Grid—tools designed specifically for layouts—to create responsive web pages with precise, custom layouts. In this course, Emily Kay covers the basics of Flexbox and Grid separately, from syntaxes to properties to how they work in general. After that, she details instances where you may need to use both to accomplish your layout goals. As Emily shows, when you use Flexbox and Grid together to combine their separate strengths, you can create and display complex web content in a beautiful, user-friendly way.

📦 Exercice Files

🔅 Practice It: CSS Layout

🌐 Author: Julia Dyck
🔰 Level: Intermediate

⏰ Duration: 1h 52m

🌀 Get hands-on practice with some of the most powerful CSS features.

📗 Topics: Cascading Style Sheets

📤 Join @webdev_trainings for more courses

🔸 Full description 🔸

In this course, instructor Julia Dyck shows you how to create responsive web layouts that adapt to any screen size and provide a seamless user experience. Join Julia as she shows you how to design modular layouts using CSS grids and Flexbox, and adapt them to different screen widths using media queries. She provides an introduction to the basics of grid layouts, explains how to make your layouts responsive, and then guides you through the creation of a three-column and a twelve column layout.


This course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With GitHub Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that youll likely encounter in the workplace. Check out the “Using GitHub Codespaces with this course” video to learn how to get started.

🔅 CSS Layouts: From Float to Flexbox and Grid

🌐 Author: Christina Truong
🔰 Level: Intermediate

⏰ Duration: 1h 46m

🌀 Floats are fading away fast. Learn how to make the jump from floats to Flexbox and Grid to more efficiently create page layouts with CSS.

📗 Topics: CSS Grid Layout

📤 Join @webdev_trainings for more courses

🔸 Full description 🔸

For decades, CSS developers fiddled with floats to create flexible layouts that worked across browsers. But their brilliant hack had a lot of downsides. The latest generation of CSS specs offers a better and vastly more intuitive set of tools, but moving from floats to Grid, Flexbox, or both means adjusting how you think. In this course, Christina Truong guides you though this process, from initial concepts to complete conversion, highlighting the different ways to create page layouts with modern CSS. Explore how to work with the display and float properties; use relative, absolute, and fixed positioning for laying out components; create basic Grid and Flexbox layouts; and more.

📦 Exercice Files