Course Overview

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

Course Circullum

Introduction

Custom web layouts with Grid and Flexbox
Using the exercise files
What you should know
Using development tools

1. What Is Flex?

What is Flexbox?
Flexbox syntax
Flexbox container properties
Flexbox item properties
Using Flexbox: Challenge
Using Flexbox: Solution

2. What is Grid?

What is Grid?
Grid syntax
How does Grid work?
Grid container properties
Grid item properties
Functions and keywords
Using Grid: Challenge
Using Grid: Solution

3. Combining Technologies

Grid vs. Flexbox
Combining Flexbox and Grid
Analyzing a layout
Choosing the right solution for the job
Using Grid and Flexbox: Challenge
Using Grid and Flexbox: Solution

4. Build a Webpage Using Flexbox and Grid

Overview of the project
Webpage header with hero section
Create a hamburger menu for mobile
Create a horizontal menu for desktops
Web cards, part 1
Web cards, part 2
CTA summaries
Team section for mobile
Team section for desktops
Problem section
Media objects for mobile
Media objects for desktop
Picture gallery
Footer for large screen
Footer for extra large screens

5. Build a Form Using Flexbox and Grid

Overview of project
Form for mobile
Form for desktops

6. Support

Compatibility and resources
Feature queries

Conclusion

Next steps

Emily Kay

out of 5.0

5 Star 85%

4 Star 75%

3 Star 53%

1 Star 20%

Item Reviews - 3

Submit Reviews

5 stars 4 stars 3 stars 2 stars 1 star

Name

Review

Free Trial Available

Enroll Now

This Course Include: