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.

All levels
18 and older
$650
Earn 6,500 reward points
Price Lock Guarantee
Interactive Online Classroom
14 hours over 2 sessions

Start Dates (2)

$650
14 hours over 2 sessions

Thu, Jul 18th, 10am–5pm EDT

20 seats left

Book

Show all 2 sessions

Thu, Jul 18 at 10:00am - 5:00pm
Fri, Jul 19 at 10:00am - 5:00pm

Thu, Oct 31st, 10am–5pm EDT

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 1 – 2 of 2

Save to WishList Give as a Gift

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

(4.5-star rating across 680 reviews)

See reviews for other classes at NYC Career Centers

Hide Reviews

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

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.