Create a Landing Page with CSS Grid and Flexbox

ClockIcon20m
flexboxFlexbox
Stephanie Eckles

Stephanie Eckles

Girl Geek, Web Developer (frontend/JS/React) currently building a design system, publishing a video series for beginner developers, ...

It's tempting to pick up a framework which has preselected flexbox or grid as the layout tool of choice, but it's important to learn when and why to use each method. This leads to slimmer stylesheets which results in better site performance, and less likelihood for "hacks" to make one method do what the other does inherently better.

Throughout this collection, we will be progressively styling a responsive landing page template while building your knowledge on when to select grid or flexbox for any layout scenario. Spoiler alert: sometimes the best solution is using both!

Stephanie Eckles

Stephanie Eckles

Girl Geek, Web Developer (frontend/JS/React) currently building a design system, publishing a video series for beginner developers, ...