Flexbox, Grid, & Bootstrap
via Noble Desktop
Affiliated with Course Report
Learn layout tools for responsive webpages in Noble Desktop's Flexbox, Grid, & Bootstrap course. The course brings together CSS layout systems and a component framework, giving you different ways to organize content. You practice choosing structures that accommodate changing screen sizes and the needs of a particular webpage design.
What's included with live classes
- Free course retake within one year to refresh the material and gain practice.
- Course workbook
- Class recordings
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.
Prerequisites
Students should feel comfortable coding HTML and CSS equivalent to our Advanced HTML & CSS class.
Schedule & enrollment
Find dates that fit your schedule, then book on Noble Desktop.
- Live tuition
- $650
- Course length
- 12 hours
All class times are Eastern (ET).
-
Dates
–
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
-
Dates
–
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
-
Dates
–
Class time
Starts at 10am ET
Final session ends at 5pm ET
Attend
In-person or live online
Confirm current dates and availability on Noble Desktop before booking. Enrollment opens in a new tab.
Self-paced tuition & enrollment
Learn through recorded lessons on your own schedule.
- Tuition
- $650
- Course length
- 12 hours
- Format
- Self-paced online
Loading enrollment options…
Prefer to enroll directly? Open the course website.
Curriculum
What you'll 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 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
Self-paced course
Learn through recorded lessons on your own schedule.
View self-paced tuition & enrollmentCSS 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.
Self-paced prerequisites
Students should feel comfortable coding HTML and CSS equivalent to our Advanced HTML & CSS class.
Self-paced curriculum
What you'll learn self-paced
- 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
Self-paced 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
Course Reviews
Is this course right for you?
Choose this course when you can already write HTML and CSS and want more control over responsive layout. Compare the introductory web-development course if you first need a foundation in document structure and CSS styling.