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

YouTube

Understanding Modern CSS Layouts with Firefox DevTools

Mozilla Hacks via YouTube

Overview

Explore modern CSS layouts using Firefox DevTools in this 32-minute conference talk from the Mozilla Developer Roadshow EU. Dive into Flexbox and Grid properties, learning how to leverage Firefox's powerful debugging features to better understand browser interpretation of CSS values. Discover techniques for working with flex containers, box alignment, and grid templates. Master manual placement, grid inspection, and size manipulation while preventing data loss. Gain insights into the repeat function and grid animation. Led by Hui Jing Chen, a passionate CSS expert from Singapore, this talk offers valuable knowledge for both designers and developers looking to enhance their layout skills.

Syllabus

Introduction
Flexbox
Flex containers
Box alignment
Flex items
Alignment
Grid
Manual placement
Grid templates
Grid inspector
Changing grid size
Preventing data loss
Repeat function
Grid animation

Taught by

Mozilla Hacks

Reviews

Start your review of Understanding Modern CSS Layouts with Firefox DevTools

Never Stop Learning.

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

Someone learning on their laptop while sitting on the floor.