Scribd
Upload
8 views3 pages

Flexbox and Grid Css Layout Techniques Syllabus

The course 'Flexbox & Grid: CSS Layout Techniques' teaches responsive web layout creation using CSS Flexbox and Grid. It covers various topics, including Flexbox alignment, sizing, reordering content, and Bootstrap grid system, as well as advanced Grid techniques like template areas and masonry layouts. Classes are available in NYC, with more information accessible via email or the provided website link.

Uploaded by

gebelpaciencia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views3 pages

Flexbox and Grid Css Layout Techniques Syllabus

The course 'Flexbox & Grid: CSS Layout Techniques' teaches responsive web layout creation using CSS Flexbox and Grid. It covers various topics, including Flexbox alignment, sizing, reordering content, and Bootstrap grid system, as well as advanced Grid techniques like template areas and masonry layouts. Classes are available in NYC, with more information accessible via email or the provided website link.

Uploaded by

gebelpaciencia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Flexbox & Grid: CSS Layout Techniques

COURSE SYLLABUS

Learn to create responsive web layouts that adjust to different screen sizes using CSS
Flexbox and Grid.

Group classes in NYC and onsite training is available for this course.
For more information, email contact@nyimtraining.com or visit:
https://mimi.training-nyc.com/courses/flexbox-grid-css-layout-techniques

contact@nyimtraining.com • (212) 658-1918

Course 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

Course Syllabus | Flexbox & Grid: CSS Layout Techniques 1


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

Course Syllabus | Flexbox & Grid: CSS Layout Techniques 2


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

Course Syllabus | Flexbox & Grid: CSS Layout Techniques 3

You might also like