Advance CSS with Flexbox and CSS Grid
CSS Grid and Flexbox taught properly: columns, rows, alignment, gaps, and a real website layout project.
For years, centering a div was a running joke among developers, because CSS genuinely made it hard. Then Flexbox and Grid arrived and the joke died. Layout is now a solved problem, but only if you actually learn the two systems that solved it.
Grid first, because pages are grids
The course starts with CSS Grid: defining columns, controlling row heights, and placing elements precisely on the grid you made. Then the alignment controls, justifying items horizontally, aligning them vertically, and distributing space with justify-content, plus proper gaps between columns and rows so you can retire your margin hacks.
Then you use it. The Grid project builds a full website layout, and a follow-up lesson shows a Bootstrap-style approach to responsive design, so you see how a utility framework thinks about the same problem you just solved by hand.
Flexbox for everything inside
Flexbox gets the same property-by-property treatment: wrapping, flex-flow, justify and align items, align-content, changing the visual order of items, the flex item properties, and align-self for the one element that needs to break rank. These are the controls you will reach for daily, because almost every component, navbar, card row, or form row is a flex container once you know to see it that way.
Both sections end with a resources lesson, so you leave with the references worth bookmarking instead of hunting for them later.
One honest note: this course assumes your CSS fundamentals are already in place. If the box model or display values still feel shaky, take CSS Basics first; Grid makes far more sense when you know what it replaced. And once your layouts are solid, CSS Animation for Developers teaches you to make them move.
What you'll learn
- ✓ Define grid columns and control the heights of rows
- ✓ Place elements exactly where you want them on a grid
- ✓ Align and justify items and content in both Grid and Flexbox
- ✓ Control gaps between columns and rows without margin hacks
- ✓ Build a full website layout with CSS Grid, including a responsive approach
- ✓ Use flex-wrap, flex-flow, and the flex item properties
- ✓ Reorder items visually and align individual items with align-self
Course Curriculum
4 sections
1
Intro
2
CSS Grids
3
CSS Grids Project
4
Flexbox
Frequently asked questions
Grid or Flexbox: which one should I actually use? +
Is there a project or just theory? +
Do I need JavaScript for this course? +
Is this course included in the Diamond membership? +
More courses you might like
CSS Course: Zero To Pro
The first time CSS breaks your heart is usually the same way. You follow a tutorial, everything looks fine, th...
CSS Animation for Developers
You have seen a site with animations so smooth you opened dev tools to figure out how they did it. Most of the...
SASS Like a Pro Course
At some point every developer searches their stylesheet for a hex code and finds it pasted in forty places. Th...
Learn HTML and CSS by Building a Cool Social Network
You already know this design by heart. You have scrolled it thousands of times: the blue header, the left side...
Responsive HTML Emails Course
The first lesson in this course is called "How to get a 100k Salary with just HTML." I named it that...
How to deploy your site
Building websites is fun — but getting them online is what makes you a real developer. In this mini-course, yo...
