Discover Classes. Earn 10% Rewards.

Flexbox, Grid, & Bootstrap

Learn the latest CSS layout techniques that help you create responsive webpages and adapt them to different screen sizes. Build Flexbox and Grid to easily lay out, align, and reorder content on your webpage. Wave farewell to writing excessive CSS code with the help of Bootstrap.

  • Intermediate
  • 18 and older
  • Earn 10% Rewards
  • Price Lock

    Secure your booking now and we'll match any price drop within 48 hours across all booking platforms, ensuring you never miss out on savings!

  • Live Online Webinar
  • 14 hours over 2 sessions

Express Checkout – $650


Proceed to Checkout

No Booking Fees. Lowest Price Guaranteed. Earn 10% Rewards.

Give as a Gift

Start Dates (3) $650/person

Show all 2 sessions
  • Thu, Jan 14 at 10:00am - 5:00pm
  • Fri, Jan 15 at 10:00am - 5:00pm
20 left
Book
Show all 2 sessions
  • Thu, May 20 at 10:00am - 5:00pm
  • Fri, May 21 at 10:00am - 5:00pm
20 left
Book
Show all 2 sessions
  • Thu, Sep 16 at 10:00am - 5:00pm
  • Fri, Sep 17 at 10:00am - 5:00pm
20 left
Book
Showing 1 – 3 of 3

Book a Private 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.

Class Description

Description

Learn to use flexbox and grid for arranging, positioning, and reorganizing webpage elements while adapting them to function properly on different screen sizes.

CSS Flexbox and CSS Grid provide two advanced and effective methods for organizing content layout within webpages. Flexbox and grid represent modern CSS technologies specifically created to facilitate the development of responsive layouts that function optimally across all screen sizes and device types.

You will explore how both of these approaches can deliver value for your projects, and you'll gain clarity on which technique works best for different scenarios and requirements. Additionally, you will develop proficiency with Bootstrap, which is built on Flexbox technology, allowing you to construct pages with speed while minimizing the CSS code that must be written from scratch.

If you have experience writing CSS code but have not yet mastered flexbox and grid, this is an excellent opportunity to learn these invaluable techniques. These modern technologies allow you to build webpage layouts that were previously either impractical or impossible to create, or they enable you to construct the same layouts with substantially greater efficiency and simplicity compared to using older layout methods.

Prerequisite: Students should possess hands-on HTML and CSS coding expertise equivalent to the content covered in our Web Development Level 2 course.

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 (330)

Similar Classes

Practical Programming

Practical Programming offers programming classes and workshops for individuals of all skill levels who are interested in learning Python coding. It is suitable for beginners and those looking to start a career in programming or build dynamic web applications using Python.

View school profile
Practical Programming
Vetted by CourseHorse

A verified NYC educator.

Loading...