Finding and Debugging CSS Issues - Techniques and Tools

Overview

Save Big on Coursera Plus. 7,000+ courses at $160 off. Limited Time Only!

Grab it

Learn effective techniques for identifying and resolving CSS issues in this 23-minute video tutorial. Explore essential dev tools basics, discover how to spot and fix typos, invalid properties, and misplaced valid properties. Master the art of debugging responsiveness, overflows, and layout problems using outlines and background colors. Dive into specialized devtools features for grid and flexbox, and leverage Firefox's extra visualizations. Discover helpful browser extensions like VisBug and Polypane to enhance your CSS debugging workflow. Improve your web development skills and create more robust, error-free stylesheets.

Syllabus

- Introduction
- Dev Tools basics
- Typos and invalid properties & values
- Valid properties in places they won’t work
- Responsiveness, overflows, and layout issues
- Finding overflows with outlines
- Using background-color to find overflows
- Devtools features for working with grid and flexbox
- Firefox can extra visualizations that can be useful
- VisBug
- Polypane