Flexbox & Grid Courses NYC: Master Webpage Layout Techniques & Responsive Web Design

CSS Flexbox and CSS Grid are two powerful ways to lay out content on a webpage. Flexbox and Grid are newer CSS layout technologies that make it easier to create responsive layouts, which adapt to any screen size.

Design Responsive Webpages

Optimize your websites for mobile, tablet, and desktop using CSS Flexbox and Grid.

In this class, you’ll learn how to use Flexbox and Grid to lay out and align webpage content, making it adapt to different screen sizes. Learn when to use one technique over the other, and how to get the most out of each one.

Prerequisites: HTML and CSS experience equivalent to our Web Development Level 2 class.

What You'll Learn

CSS Flexbox for laying out and aligning webpage content
CSS Grid for an entirely new way to think about laying out entire webpages
Learn how to use and skin Bootstrap (which uses Flexbox) to build out layouts quickly

Take this class as part of a certificate program and save:

Full-Stack Web Development Certificate Sign up

Learn the Skills Guarantee™

Hands-on Training in small groups

Work on projects proven to boost retention

Workbook Included

Students get a custom workbook with step-by-step instructions.

Learn from industry experts with teaching experience

Experienced educators who are driven to help you succeed

Retake the course for free within one year

Refresh the course materials and gain additional practice

Setup Assistance Provided

Prior to the course, we will help you get set up properly with the software you need.

Learn the concepts and skills covered in this course or your tuition is on us. See details and terms & conditions.

Full Course Syllabus

Download PDF Outline

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

This Course is Available Live Online

You can attend this training live online at the scheduled time the course is offered (New York, Eastern Time) through screen-sharing software Zoom (free for you).
Our live online training is interactive and hands-on, just like our in-person classes. There are no extra fees and we'll work with you to ensure your setup is perfect.

Classes are activity-based and taught by a live instructor.

You can hear the instruction, ask questions, and share your screen—all in real-time.

Retake the course for free (in-person or live online) within one year.

See What Students Are Saying About Live Online

“Overall experience on Zoom was maybe even better than in IRL classroom because the instruction takes place right on your own screen, with less distraction. Great overall experience.”
“Given the fact that we had to do this entire class remotely due to Covid-19, I didn’t have very high expectations it would run so smoothly. However, I don’t think it could’ve gone any better. Not only do I feel very comfortable with the program now, but I’m actually excited to use it!”
“This was the first online class I’ve taken with ND and it was a great experience. Looking forward to the other classes I’ve signed up for!”

Frequently Asked Questions

Does this course require any prior knowledge or experience?

Students must be comfortable using a computer. No other prior knowledge is required.

Do I need to bring a computer?

No. We provide a computer with the necessary software for each attendee. Choose a Mac or a PC during the checkout process.

Are discounts available for this course?

No. This course is not eligible for any discounts.

We offer discounts for packages of classes, including our Excel Bootcamp, SQL Bootcamp, Data Analytics, and PowerPoint Bootcamp.

We also provide discounts for ten or more classes purchased together. Please reach out for more information on our voucher programs.

You may be interested in these similar discounted packages:

Full-Stack Web Development Certificate

Does this course come with a book?

Yes. This course includes a complimentary book or manual at no additional cost.

What if I need to retake this course? May I retake it for free?

Yes. You may retake this course for free once within six months, provided that the class is running with an available seat. For more information, visit our policies page.

Can I take this course online (remote learning)?

You may attend this training virtually (online) at the scheduled time the course is offered (New York, Eastern Time).

How does attending “live online” work?

Students can attend this training remotely through screen sharing software (we use Zoom).
Participants can hear the instruction, ask questions, and even share their screen with the instructor.
For audio you can use your computer’s microphone/speakers or call a phone number that we’ll provide.
Classes are activity-based and taught by a live instructor, so we strongly encourage students who are local to the area to attend in person!

What if I don’t have the software on my computer?

Upon registration, please email contact@nyimtraining.com and we will help you get set up with the software or anything else needed for an optimal training experience.

Corporate & Onsite Flexbox & Grid Training

For over two decades, NYIM Training has created and delivered the highest-rated corporate training programs in New York. We have extensive experience developing curriculum for a variety of training sessions, both onsite and in our Midtown offices. Our program can be completely customized to suit your training needs.