YoVDO

CSS Layouts: From Float to Flexbox and Grid

Offered By: LinkedIn Learning

Tags

HTML & CSS Courses Flexbox Courses

Course Description

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

Related Courses

Intro to HTML and CSS
Udacity
Responsive Web Design Fundamentals
Google via Udacity
HTML5 and CSS Fundamentals
World Wide Web Consortium (W3C) via edX
CSS Basics
Microsoft via edX
Advanced CSS Concepts
Microsoft via edX