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

egghead.io

Create a Landing Page with CSS Grid and Flexbox

via egghead.io

Overview

Project code can be found here on Github
You've just spent hours putting together a landing page that looks spectacular on your website.
You open it on mobile or tablet annnnd… your layout collides into a mess
Don't let this be you. Leverage CSS Grid and Flexbox to design beautifully crafted websites for your content on all devices.
Flexbox and Grid are tools used by web developers to ensure their sites display an organized layout that matches precisely how they'd like their content to show. They take different yet equally valuable approaches to content layout that can be tailored to adjust to different screen sizes.
Need a strict structure no matter the device? Grid can help. Is content the main focus of your layout? Flexbox has your back. Want some flexibility inside defined boundaries? Combine 'em for the best of both worlds.
This course takes you through the thinking, testing, and programming process in a step-by-step format to show how these tools are created and implemented.
Check out what you'll be able to successfully accomplish after going through this course:
Create responsive sites by leveraging the structured approach of Grid with gap spacing and boundaries or the adaptive qualities of Flexbox.
Differentiate between when to use Grid, Flexbox, or a combination of both Allow page content to overflow to the next line using Flexbox's wrapping property
Create modifier classes to align content and apply spacing between items
Display visually appealing page content for a wide variety of different devices
Ready to add flexibility and structure to your skills and website? Click the Start Watching button above to save yourself time fixing layout issues.

Syllabus

  • Choose Between Grid or Flexbox for CSS Layout
  • Use CSS Grid to Create Layout Columns
  • Responsively Center an Image and Caption with CSS Grid
  • Use Flexbox to Responsively Layout Variable-Width Content
  • Use CSS Grid auto-fit For Responsive Column Layout

Taught by

Stephanie Eckles

Reviews

3.9 rating at egghead.io based on 34 ratings

Start your review of Create a Landing Page with CSS Grid and Flexbox

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.