CSS Layouts: From Float to Flexbox and Grid
Offered By: LinkedIn Learning
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
- Layouts with HTML
- Layouts with CSS
- Browser support and CSS standards
- 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
- 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
- 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
- Next steps and resources
Taught by
Christina Truong
Related Courses
Intro to HTML and CSSUdacity 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