Overview
-
Learn to use Flexbox and CSS Grid separately and in combination to create better webpages.
Syllabus
-
Introduction
- Custom web layouts with Grid and Flexbox
- Using the exercise files
- What you should know
- Using development tools
- What is Flexbox?
- Flexbox syntax
- Flexbox container properties
- Flexbox item properties
- Using Flexbox: Challenge
- Using Flexbox: Solution
- What is Grid?
- Grid syntax
- How does Grid work?
- Grid container properties
- Grid item properties
- Functions and keywords
- Using Grid: Challenge
- Using Grid: Solution
- 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
- 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
- Overview of project
- Form for mobile
- Form for desktops
- Compatibility and resources
- Feature queries
- Next steps
