Discover Classes. Earn Rewards.

Flexbox, Grid, & Bootstrap

Learn the latest CSS layout techniques that will enable you to create responsive webpages and adapt them to different screen sizes at Practical Programming. Master Flexbox and Grid to effortlessly lay out, align, and reorder content on your webpage. Say goodbye to writing excessive CSS code with the help of Bootstrap.

  • Intermediate
  • 18 and older
  • $650
  • Live Online Webinar, New York, NY & Virtually Online
  • 14 hours over 2 sessions

Start Dates (3)

  • $650
  • Live Online Webinar @ Live Online Webinar, New York, NY 10001
  • 14 hours over 2 sessions
20 seats left
Book
Show all 2 sessions
  • Thu, Apr 18 at 10:00am - 5:00pm
  • Fri, Apr 19 at 10:00am - 5:00pm
20 seats left
Book
Show all 2 sessions
  • Thu, Jul 18 at 10:00am - 5:00pm
  • Fri, Jul 19 at 10:00am - 5:00pm
20 seats left
Book
Show all 2 sessions
  • Thu, Oct 31 at 10:00am - 5:00pm
  • Fri, Nov 01 at 10:00am - 5:00pm
Showing 13 of 3

Class Description

Description

What you'll learn in this web development course:

In this class 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

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.

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.

Prerequisite: HTML & CSS coding experience equivalent to our Web Development Level 2 class.


Learn more about Flexbox, Grid, & Bootstrap at Practical Programming.


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

Refund Policy

To reschedule or cancel, email us at [email protected]

All courses include a non-refundable registration fee (10% of the undiscounted course price).

  • Students may cancel up to 11 business days before the class/program start date and receive a refund, less the registration fee.
  • Cancellations within 11 business days are not permitted; however, students may reschedule up to 4 business days before the class start date.

Note: Any refunds must be requested within 180 days from the original payment date; courses rescheduled within 11 business days of the start date are not eligible for refunds.

Reviews of Classes at Practical Programming (378)

Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Similar Classes

Practical Programming

Practical Programming classes and workshops for everyone who wants to learn how to code from scratch or practice Python. You will learn how to start using Python, problem solving with algorithms and make dynamic web applications.

No coding experience needed, anyone who would like to learn how to code...

Read more about Practical Programming

CourseHorse Approved

This school has been carefully vetted by CourseHorse and is a verified NYC educator.

Practical Programming

Practical Programming

All classes at this location

Live Online Webinar

Also available virtually online

Google Map

Give This Course as a Gift Card

  • Thousands of classes
  • No expiration
  • Unique and memorable gifts for any occasion
  • Personalized
  • Explore a passion, gain a new skill, discover a new hobby, engage in a memorable experience
  • Instant delivery
  • Lock in a price with the Inflation Buster Gift Card Price Adjuster™

Buy a Gift Card

Book this Class as a Group Event

Booking this class for a group? Find great private group events

Or see all Coding Group Events

Explore group events and team building activities ranging from cooking, art, escape rooms, trivia, and more.

CourseHorse Gift Cards

  • Creative & unique gift for any occasion
  • Thousands of classes & experiences
  • No expiration date
  • Instant e-delivery (or choose a date)
  • Add a personalized message
  • Lock in a price with the Inflation Buster Gift Card Price Adjuster™
Buy a Gift Card
gift card with the CourseHorse logo gift card with the CourseHorse logo
Loading...