Flexbox, Grid, & Bootstrap

CSS Flexbox and CSS Grid offer modern, flexible approaches to structuring content on a webpage. These newer CSS layout systems are designed to simplify the process of building responsive designs that adapt smoothly to screens of all sizes. You’ll explore how each technique works, what problems they solve, and when it makes sense to use one over the other. The course also covers Bootstrap, a Flexbox-based framework that allows you to create page layouts efficiently with less custom CSS.

What You Will Learn

• CSS Flexbox to lay out and align webpage content
• CSS Grid for an entirely new way to think about laying out entire webpages
• Use Bootstrap (which is made with Flexbox) to build out layouts quickly
• Learn how Flexbox and Grid change the way you approach webpage layout
• Size, position, align, and reorder content using Flexbox and Grid

Course Outline

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