Udemy, Coursera, 2U/edX Face Lawsuits Over Meta Pixel Use

Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

LinkedIn Learning

CSS Layouts: From Float to Flexbox and Grid

via LinkedIn Learning

Go to class Write review

Overview

Floats are fading away fast. Learn how to make the jump from floats to Flexbox and Grid to more efficiently create page layouts with CSS.

Syllabus

Introduction
  • Welcome
  • What you should know
  • Using the exercise files
1. An Overview of Page Layouts
  • Layouts with HTML
  • Layouts with CSS
  • Browser support and CSS standards
2. Float, Display, and Position
  • Inline and block elements
  • The box model properties
  • The display property
  • The box model and layouts
  • The float property
  • Clearing floats
  • Setting up your project
  • Exercise: Build a layout with float
  • Position: Relative and absolute
  • Position: Fixed, sticky, and static
3. Flexbox
  • Getting started with Flexbox
  • Orientation with flex-direction and flex-wrap
  • Flexible sizing
  • Sizing multiple flex items
  • The order property
  • Nesting flex containers
  • Exercise: Build a layout with Flexbox
  • Exercise: Build a layout with Flexbox
4. Grid
  • Grid vs. Flexbox
  • Grid, grid systems, and CSS Grid
  • Create a basic Grid layout
  • Columns, rows, and gutters with Grid
  • Positioning with Grid
  • Exercise: Build a layout with Grid
  • Firefox Grid Inspector
Conclusion
  • Next steps and resources

Taught by

Christina Truong

Reviews

4.8 rating at LinkedIn Learning based on 218 ratings

Start your review of CSS Layouts: From Float to Flexbox and Grid

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.