Flexbox & Grid: CSS Layout Techniques

Flexbox & Grid Classes New York City

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.

Register For a Class

This course is offered at our design school, Noble Desktop. View upcoming dates and register for this course directly on Noble Desktop’s website.

Register at nobledesktop.com pop-out-line
tag-solid $650 clock-solid 12 Hours map-marker-solid 185 Madison Ave, 3rd Floor, NYC
  • video-gallery-solid

    Video Training and Workbook Included

    Students get a workbook and lifetime access to self-paced training videos, a $95 value.

  • display-solid

    Computer Provided

    Modern computer classroom with your choice of Mac or PC to work on.

  • users-solid

    Small In-Person Classes

    Get personalized attention in small groups with an expert instructor in the classroom.

  • redo-line

    Free Retake

    Refresh the course materials within six months for free as long as there's space in the 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

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
help-solid

Frequently Asked Questions

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

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