Discover Classes. Earn Rewards.

Flexbox, Grid, & Bootstrap

Master the art of creating responsive web page layouts with the latest CSS layout technologies. Unlock the power of Flexbox and CSS Grid to easily optimize your designs for any screen size. Plus, learn how to use Bootstrap to code up pages faster and more efficiently.

  • Advanced
  • 18 and older
  • $650
  • 185 Madison Ave, New York, NY & Virtually Online
  • 14 hours over 2 sessions

Start Dates (3)

  • $650
  • Noble Desktop @ 185 Madison Ave 3rd Floor, New York, NY 10016
  • 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 design class:

Create Responsive Web Page Layouts Easier Than Ever Before!

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.

This course has a Prerequisite: Students should feel comfortable coding HTML and CSS equivalent to our Web Development Level 2 class.

Learn more about Flexbox, Grid, & Bootstrap at Noble Desktop.

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

  • Students may cancel up to 14 days before the class/program start date and receive a refund, less the registration fee (10% of the undiscounted course price). 
  • Cancellations within 14 days are not permitted, but students may reschedule up to three business days before the class start date.
  • For cancellations and reschedules, please email us at [email protected]"

Reviews of Classes at Noble Desktop (372)

(4.6-star rating across 372 reviews)
  • Flexbox, Grid, & Bootstrap

    Reviewed by Esther C. on 7/28/2016
    Learned alot
See reviews for other classes at Noble Desktop
loading...
Hide Reviews

Review Summary by CourseHorse

Students who have taken classes at Flexbox, Grid, & Bootstrap have found them to be comprehensive and informative. One student mentioned that the 'Responsive Web Design' course provided them with comprehensive information on designing a responsive site and how to overcome challenges. Another student suggested investing in oneself by taking the Mobile & Responsive Web Design class, stating that it was a great and invaluable experience that helps to stay current with web trends. The instructors at Noble Desktop were praised for being top-notch. Quotes: 1. "Attending the 'Responsive Web Design' course really provided me comprehensive information on how a 'Responsive' site can be designed and what are challenges and how the challenges can be met." 2. "Invest in yourself and take the Mobile & Responsive Web Design class. It's a great and invaluable experience that will keep you current with web trends. The added bonus; instructors at Noble Desktop are always top notch!" 3. "Learned a lot."

Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Similar Classes

Noble Desktop

Noble Desktop is a renowned educational institution that specializes in providing comprehensive training in various creative and technology-related fields. Established in 1990 and headquartered in New York City, Noble Desktop has earned a stellar reputation for its high-quality courses and innovative...

Read more about Noble Desktop

CourseHorse Approved

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

Noble Desktop

Noble Desktop

All classes at this location

We are located in New York City on 34th street and Madison Avenue, a few blocks from Penn Station, Port Authority and Times Square. You may also attend this class live online (virtual training) via Zoom. We will reach out with additional information, including the Zoom info and class files.

Also available virtually online

Reviews of Noble Desktop at coursehorse.com

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