# Debugging and Performance

Find and fix layout problems fast with the developer tools, recognize the bugs everyone meets, check whether a feature works in the browsers your readers use, and keep your CSS from slowing the page down.

Updated: November 10, 2026

## [Debugging Layouts](https://www.ask-codey.com/courses/css-in-depth/topics/css-debugging-layouts)

1. [Debugging Layouts with Developer Tools](https://www.ask-codey.com/lessons/css-debugging-with-devtools) (Journeyman): A seven-step routine for "why does it look like that?", using the Computed pane, the box model diagram, the flex and grid overlays, switching rules off, forcing :hover and :focus, and the outline trick.
2. [Common Layout Bugs and How to Fix Them](https://www.ask-codey.com/lessons/css-common-layout-bugs) (Journeyman): The seven layout bugs almost everyone meets, from a page that scrolls sideways to a z-index that won't work, each with its symptom, its cause and the fix that removes the cause instead of hiding it.

## [Fast and Reliable CSS](https://www.ask-codey.com/courses/css-in-depth/topics/css-fast-and-reliable-css)

1. [Will It Work Everywhere? Browser Support and @supports](https://www.ask-codey.com/lessons/css-browser-support) (Journeyman): Check whether a CSS feature works in your readers' browsers with Baseline and caniuse.com, then use it safely with fallbacks the cascade gives you for free, @supports, and progressive enhancement.
2. [CSS Performance: What Slows a Page, and Critical CSS](https://www.ask-codey.com/lessons/css-performance) (Freelancer): See why a stylesheet holds up the first paint, find unused CSS with the Coverage panel, animate transform instead of layout, skip off-screen work with content-visibility, inline the critical CSS, and measure the result with Lighthouse.

## [Exercise: Fix the Broken Recipe Blog](https://www.ask-codey.com/courses/css-in-depth/topics/exercise-css-fix-the-broken-layout)

1. [Exercise: Fix the Broken Recipe Blog](https://www.ask-codey.com/lessons/exercise-css-fix-the-broken-layout) (Freelancer): Find and fix five layout bugs on a recipe blog's home page with the developer tools, write down the cause of each, and let the checks confirm every fix.

Source: https://www.ask-codey.com/courses/css-in-depth/chapters/css-debugging-and-performance