illustration for Create a Landing Page with CSS Grid and Flexbox
pro

Create a Landing Page with CSS Grid and Flexbox

20m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
4.2
161
people completed
Published 2 years ago
|
Updated a year ago

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.

Learner Reviews

  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Great course for advanced users. Not so for beginners who do not fully understand the Grid and Flex Models. But it make it challenging enough to make hands dirty by trying to get the same result.

    Andre Roussakoff
    3 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Just wow!! I love the idea of not using much media query. She created the responsive landing page in 20mn. Really recommend this to beginner and experience developers.

    Learner
    6 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    I feel a bit overwhelmed with the given base source codes. I hope the instructor spends minutes explaining what we have at first. Anyway, I learn quite a lot.

    Learner
    6 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Awesome content with strong foundations and various touch-points Stephanie!

    Sri-Ni.
    6 months ago
  • Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    How will you use what you learned from this course?

    This was amazing! Thank you so much. I'm learning CSS and this clarify a lot of things about CSS-Grid concepts and how to properly use it.

    Pat Ugarte
    a year ago

Course Content

20m • 5 lessons

    You might also like these resources:

    illustration for Introduction to Cloudflare Workers
    Kristian Freeman・36m・Course

    Become familiar with the Workers CLI wrangler that we will use to bootstrap our Worker project. From there you'll understand how a Worker receives and returns requests/Responses. We will also build this serverless function locally for development and deploy it to a custom domain.

    illustration for Create an eCommerce Store with Next.js and Stripe Checkout
    Colby Fayock・1h 4m・Course

    This is a practical project based look at building a working e-commerce store using modern tools and APIs. Excellent for a weekend side-project for your developer project portfolio

    illustration for Practical Git for Everyday Professional Use
    Trevor Miller・1h・Course

    git is a critical component in the modern web developers tool box. This course is a solid introduction and goes beyond the basics with some more advanced git commands you are sure to find useful.