Exercise: Fix the Broken Recipe Blog

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.

Freelancer · CSS · Web Development · Updated October 30, 2026

Weekend Kitchen is a recipe blog for slow weekend cooking: shakshuka on Sunday morning, pancakes on Saturday, a pan of crispy gnocchi for dinner. Its new home page looks right on the designer's big screen, and the readers' messages tell another story: the page slides sideways on phones, the food photos hang out of their cards, the Save buttons are out of reach, the header won't stay put, and the Recipes menu hides behind the featured recipe. The stylesheet is handed over, five bugs and all. Your job is to find each cause with the developer tools, fix it with as small a change as you can, and leave a note for the next person who reads the stylesheet. Checks confirm each fix as you go.

This is the kind of job you'll be handed on a team: someone else's page, a list of complaints, and no idea yet which line is to blame.

Before you start

You need VS Code with Live Server, a current Chrome, Edge or Firefox, and Node.js to run the checks. Setup: VS Code, a Browser and Node.js installs all of them.

Get the exercise code

In the Exercise box beside the lesson, choose Get the starter on GitHub to open its GitHub repository. Click Code, then Download ZIP, and unzip it into your css-in-depth folder.

The folder holds:

index.html: the home page, ready and not to be changed. Every bug is in the stylesheet.
styles.css: the whole stylesheet, with the five bugs in it.
images/: drawings of the three dishes, each 800 by 600 pixels.
page.test.js and package.json: the checks. You don't need to change these.

Open the folder in VS Code, right-click index.html and choose Open with Live Server. Open the developer tools and turn on the device toolbar, so you can switch between a phone's width and a wide screen.

What to do

The README lists the five bugs as the readers described them:

The page slides sideways on a phone, and the newsletter box runs off the right edge.
The food photos hang out of their cards.
The Save button on each card is pushed out past the card's edge.
The header scrolls away instead of sticking to the top.
The Recipes menu opens behind the featured recipe.

For each one, find the cause with the routine from Debugging Layouts with Developer Tools, fix it in styles.css, and write a comment right above the fix that starts with Bug and its number, then says the cause in your own words. The stylesheet's opening comment shows the format with a made-up example:

/* Bug 0: the heading had no color, so it inherited gray from the body. */

Fix the cause, not the symptom: a rule that hides a scroll, or a bigger z-index, doesn't count.

Check your work

In VS Code, open a terminal (Terminal > New Terminal). Run npm install once, then run the checks as often as you like:

npm install
npm test

At first, six of the seven checks fail. That's expected: only the first one passes, because the page and its link to styles.css are already in place. Each fix turns its check green, and the last check looks for your five comments. A failing check's message says which element it looked at and the values it found, for example On Slow Sunday Shakshuka, .recipe-card__meta is a flex item with min-width: auto, so it won't shrink below its one long line of tags.

The checks read the values the browser works out for each element, but they can't see the page. The README's checklist covers that part: go through it at a phone's width and a wide one.

Hints

Start with the developer tools, not the stylesheet. Inspect the thing that looks wrong, then read its values in the Computed pane. The rule to change is usually one the Computed pane points you to.
Bugs can hide each other. One of the five was "fixed" by a rule that caused another one. After each fix, look at the whole page again.
Something wider than the screen? The outline trick shows every box's edge. Common Layout Bugs and How to Fix Them has a section on the sideways scroll.
A sticky header that won't stick has one of three causes, and only one of them is in the header's own rule. Check the elements around it.
A z-index of 999 that still loses is competing in the wrong place. Which stacking context is the menu in, and how does that one compare with the featured recipe? Stacking: z-index and What Sits on Top explains the folders.

When you're done

Every check is green, and the end of the test run says:

ℹ tests 7
ℹ suites 0
ℹ pass 7
ℹ fail 0

On the page, at a phone's width and a wide one: nothing scrolls sideways, every photo fills its card, the Save buttons sit inside their cards with the tags cut off by "...", the header stays at the top as you scroll, and the Recipes menu opens in front of everything. Now read your five comments. Would a teammate who has never seen this page understand why each fix is there?

So what

Fixing a page you didn't write is most of the CSS work on a real team. You found five bugs from their symptoms, fixed each at its cause, and left a note for the next person: that's the skill that makes you the one people ask when a page looks wrong.

Where to go next

That's the course. You started with one rule that changed a coffee shop's background color, and now you can lay out any page, make it work from a phone to a wide screen, give it a theme with light and dark modes, organize a stylesheet a team can share, and find out why a page looks wrong.

The Module 6 project, The Makeover: Rescue the Riverside Music Hall's Website, puts this module to work: a concert venue's site handed over with inline styles, !important everywhere and two layout bugs, which you rebuild on tokens, BEM and layers, then give a new summer look by changing the tokens alone. The before-and-after screenshots are yours to show.

Then the final capstone: A Complete Site for a Small Business. Three to five pages for a business you choose, or for Sunrise Bakery from the course's content pack, designed and built by you from an empty folder: your own HTML, a theme with light and dark modes, a layout that works on any screen, text that passes contrast, motion that respects reduced-motion settings, and a stylesheet organized with layers and BEM, online at a link you can send to anyone. It's the kind of site small businesses pay for, and it's the piece of work that shows what you can do.

After that, two directions, if you want to keep going. Neither is needed for anything in this course:

JavaScript in Depth: make your pages respond to people. A menu that opens on a tap, a recipe that scales its ingredients for six people, a form that checks itself, a game that keeps score.
Design for Developers: go further with design. Layout grids, type pairing, color systems and the habits that make a page look designed, not only styled.