Flexbox, Grid, & Bootstrap | Responsive CSS Layout Training Classes Online

This course includes

12 hours of project-based training from experts
Answers from real instructors
Retake for free within 1 year
Access to class recordings (30 days)
Verified digital certificate of completion

This course is self-paced. For live online or in-person instruction, take 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.

This course has a prerequisite

Students should feel comfortable coding HTML and CSS equivalent to our Web Development Level 2 class.

Tuition

Full Tuition

$650
Due before the class starts

This course includes

12 hours of project-based training from experts
Answers from real instructors
Retake for free within 1 year
Access to class recordings (30 days)
Verified digital certificate of completion

Learning Experience Highlights

Learn from world-class creators

Classes taught by leading photographers, designers, and artists who share real workflows and insights

Several students, sitting at computers, looking at the front of the classroom

Watch anywhere, on your schedule

Stream on-demand video lessons at your own pace. Rewatch anytime, on any device, whenever inspiration strikes

Shabang! I'm really enjoying the class. This course feels like a workshop with step by step demo on every piece of theory and with tons of details."
— Gerald B.

Comprehensive course materials

Downloadable guides & practice files crafted to support your creative journey

Join a global creative community

Connect with thousands of fellow learners and get inspired by creators from around the world

100% Online. Start Anytime

24/7 access to our premium course videos and projects.
Industry experts are assigned as your course instructor. Message your instructor with any questions.
Participate in CreativeLive online discussion forums — share ideas and receive additional support.
Hands-on quizzes and mini projects to test and reinforce concepts.

Earn a Certificate of Completion

Upon completion of this course, you’ll receive an official certificate testifying to your mastery of the curriculum. We’ll send you a link where you can download your certificate, share it online with your friends, post it to your professional network on LinkedIn, and view all your earned certificates. Congratulations on your achievement!

Shareable on

Sample credential for completion of Flexbox, Grid, & Bootstrap (Self-Paced)

Flexbox, Grid, & Bootstrap (Self-Paced) Curriculum

What You'll Learn at a Glance

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

Download Syllabus PDF

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

Installments
	10% non-refundable deposit
$650.00	Total You Pay