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 Grid to effortlessly design optimized layouts for any screen size. Accelerate your coding process with Bootstrap, the ultimate tool for rapid webpage development.

  • Level All levels
  • Age 18 and older
  • Price $650
  • Location Interactive Online Classroom
Flexbox, Grid, & Bootstrap

Start Dates (2)

  • $650
  • Interactive Online Classroom
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
Save to WishList Purchase a Gift Card

Class Description

Description

What you'll learn in this web design class:

Create Responsive Webpage 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.

Pre-requisite:

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

Learn more about Flexbox, Grid, & Bootstrap at NYC Career Centers.  


Remote Learning

This course is available for "remote" learning and will be available to anyone with access to an internet device with a microphone (this includes most models of computers, tablets). Classes will take place with a "Live" instructor at the date/times listed below.

Upon registration, the instructor will send along additional information about how to log-on and participate in the class.

Also available in-person in NYC

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 11 business days before the class/program start date and receive a refund, less the registration fee (10% of the undiscounted course price).
  • Cancellations within 11 business days are not permitted, but students may reschedule up to 4 business days before the class start date.

For cancellations and reschedules, please email us at [email protected]

Reviews of Classes at NYC Career Centers (679)

Questions & Answers (0)

Get quick answers from CourseHorse and past students.

Similar Classes

NYC Career Centers

Since 1988, Career Centers has been a leader in software training courses for individuals and businesses, including Microsoft Excel, VBA, PowerPoint, SQL Server, Adobe Photoshop, InDesign, Illustrator, and AutoCAD.

Our courses are instructor-led in small class sizes, located in our state-of-the-art training...

Read more about NYC Career Centers

CourseHorse Approved

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

NYC Career Centers

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

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
  • Choose from thousands of classes & experiences
  • No expiration date
  • Instant e-delivery (or choose a date)
  • Add a personalized message
Buy a Gift Card
gift card with the CourseHorse logo gift card with the CourseHorse logo
Loading...