Overview

Create Responsive Webpage Layouts More Easily Than Ever Before

CSS Flexbox and CSS Grid are two powerful ways to lay out content on a webpage. Flexbox and Grid are newer CSS layout technologies aimed at making it easier to create responsive layouts that are optimized for any size screen.
You’ll learn how both techniques are useful, and when to use each. You’ll also learn how to use Bootstrap (which uses Flexbox) to rapidly code up pages without having to write as much CSS.
If you’ve been coding CSS but don’t know Flexbox and Grid yet, it’s time to learn them! They enable you to create layouts that were previously impossible to build, and empower you to build layouts faster and more easily than before.

Syllabus

Section 1

Intro to Flexbox

Display Flex
Alignment & Distribution on Main Axis & Cross Axis
Flex Direction (Row & Column)
How Auto Margins Are Useful

Flexbox: Sizing & Alignment

Controlling Size with Flex-Grow, Flex-Shrink, & Flex-Basis
Aligning All vs. Specific Flex Items
Nesting Flexbox
Flex Shorthand

Flexbox: Vertical Centering on a Full Screen Background

Creating a Full Screen Background
Using Viewport Sizing Units vh & vw
Vertically Aligning Content With Flexbox
Darkening the Background Image Via CSS

Flexbox Wrapping

Flex-Wrap
Sizing Flex Items (Flex-Grow & Flex-Basis)

Section 2

Flexbox: Reordering Content

Changing the Order of Flex Items
Positive vs. Negative Order Values

Flexbox: Creating a Responsive Pricing Grid

Nesting Flexbox
Application of Flexbox Concepts to a Pricing Grid Layout

Bootstrap: Getting Started

Using Bootstrap’s Grid System (Containers, Rows, & Columns)
Creating Columns & Adding Content
Adjusting Column Sizes Across Screen Sizes
Using Some of Bootstrap’s Components & Pre-Made Styles

Bootstrap: More About Grids & Components

Nesting Grids
Adding a Navbar & Other Components
Showing & Hiding Elements at Specific Sizes

Section 3

Bootstrap: Spacing & Adapting Layout Across Screen Sizes

Adding an Email Signup Form
Adjusting Spacing
Changing the Layout Across Screen Sizes

Intro to Grid

Getting Started With Grid (Columns, Rows, & Gaps)
The Explicit vs. Implicit Grid
Firefox DevTools for Grid

Grid: Sizing & Placing Items Within the Grid

Spanning Columns & Rows
Placing & Sizing Using Numbered Grid Lines
Naming Grid Lines

Grid: Minmax, Auto-Fit, & Auto-Fill

Sizing with Minmax
Auto-Fit vs. Auto-Fill
Max-Content & Min-Content

Section 4

Grid: Template Areas

Setting Up Grid Template Areas
Creating Empty Grid Areas
Using Automatically Created Named Lines
Multiple Elements Occupying the Same Grid Area
Viewing Grid Template Area Names In Firefox’s DevTools

Grid: Alignment, Centering, & Reordering Content

Aligning Grid Items
Aligning Within the Grid Container
Aligning Individual Grid Items
Ordering Grid Items

Grid: Laying out an Article

Using Grid to Lay Out an Article
Making Elements Go Full-Width
Adding Elements into the Side Columns

Grid: A Responsive Image Gallery (Masonry Layout)

Creating the Grid Layout
Enlarging Some Photos to Create a Masonry Layout

Taught by

Dan Rodney, Brian McClain, Colin Jaffe, Greyson Frazier, and Chett Tiller

Reviews

4.8 rating at Noble Desktop based on 135 ratings

Start your review of Flexbox, Grid, & Bootstrap