CSS Flexbox and CSS Grid are two powerful ways to layout content in 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.
In this book you’ll learn how to use flexbox and grid to layout, align, and reorder webpage content, as well as make it adapt to different size screens. 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 either impossible to build previously, or they empower you to build layouts more faster and more easily than before.
Includes Downloadable Class Files (works on Mac & PC)
ISBN: 978-1-941333-55-6
Setup & Introduction
Downloading the Class Files
Before You Begin
- Choosing a code editor
- Web browsers
- Recommended software
- Installing packages into Sublime Text
Section 1
Setting Up: Do This Before Other Exercises!
- Setting up your class files
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
Bonus Material
Grid: Vertical Centering on a Full Screen Background
- Vertically Aligning Content With Grid
Reference Material
Links to Reference Websites
Why Our Books Are Unique
Our books are packed with step-by-step exercises that walk you through projects. You’ll learn by doing exercises, not reading long explanations. The goal is to give you hands-on practice with the program, getting you started quickly with the things that are most important for real life work.
