Skip to content
  • Sign In
  • Try Now
View all events
CSS

CSS Layout Fundamentals: From floats to flexbox and CSS grid

Published by O'Reilly Media, Inc.

Beginner content levelBeginner

Until very recently, CSS layout was a series of hacks, which made using it difficult and led to fragile products. However, many current browsers support layout methods that were designed for the type of sites and applications we build on the web today. CSS layouts like flexbox and grid are revolutionizing frontend development, but to use them to their full potential, you need a clear understanding of how layout works.

Join expert Rachel Andrew for an exploration of modern CSS layout methods. In this 90 minute course, Rachel explores the various specifications for layout. You’ll get your hands dirty working with the most current layout approaches, from floats to flexbox to grid, as you learn not just how to use them but also which tool you should use for which task.

What you’ll learn and how you can apply it

By the end of this live, online course, you’ll understand:

  • How various CSS layout methods work
  • Which layout method you should choose and when
  • How to provide good experiences for older browsers when using new layout methods

And you’ll be able to:

  • Write robust CSS for layout using a variety of methods
  • Understand the CSS that is used in the frameworks or existing code you work with
  • Make the right choice in terms of layout methods, based on project requirements and browser support

This live event is for you because...

  • You’re a web designer or developer who has heard about new layout methods like grid and flexbox but don’t know where to get started.
  • You’re a web designer or developer with some CSS experience or have been using CSS frameworks for frontend development and want to better understand how layout works.

Prerequisites

  • A general understanding of HTML and CSS (Be sure you know how to add CSS to a page and apply it to elements.)

Recommended preparation:

Modern Web Development with HTML5 and CSS (video)

CSS Secrets (book)

CSS: The Definitive Guide, 4th Edition (book)

MATERIALS AND DOWNLOADS NEEDED:

  • A laptop or other connected device with an up-to-date copy of Firefox or Chrome installed
  • A free CodePen account (useful but not required)

Schedule

The time frames are only estimates and may vary according to how the class is progressing.

UNDERSTANDING EXISTING LAYOUT (45 MINUTES)

  • Floating
  • Positioning
  • Inline-block
  • Display: Table
  • Why and when do we still use these things?

(break)

NEW LAYOUT (45 MINUTES)

  • Flexbox Basics
  • Grid Basics
  • Browser Support Approaches
  • Recommendations for Further Exploration

Your Instructor

  • Rachel Andrew

    Rachel Andrew is a front- and backend web developer, author, speaker, and the cofounder of the CMS Perch. She is the editor-in-chief of Smashing Magazine, a Google Developer Expert, and an invited expert to the CSS Working Group. Rachel is also a regular contributor to on- and offline publications and the author of 22 books, including The New CSS Layout. She writes about business and technology on her own site, Rachelandrew.co.uk.

    Xlinksearch