Flexbox, Grid, & Bootstrap (Live Online)

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 Start 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