Start learning →

‹ Practice problems Hard HTML and CSS

Untangle a messy page

This page shows the mistakes that come up in real projects.

What to build

A cleaned-up version.

Requirements

  • The two id="card" elements use class="card" instead.
  • The label's for matches the input's id, which remains city.
  • The element with data-api-key no longer has that attribute.
  • The message Saved is not shown yet, using the hidden attribute.
  • The class red-big is renamed to warning.

Constraints

No duplicated ids may remain anywhere.

Example

A class is named for its purpose so that it stays true if the design changes.

Why it works

Unique ids keep labels and lookups correct, secrets stay out of the page where anyone can read them, and purposeful class names survive redesigns.

Hints

Hint 1

Two elements share an id. Decide which should be a class.

Hint 2

The price must not be trusted from the page, and a secret should not be there at all.

Hint 3

Text that is not shown yet can use hidden.

Solution

Show one correct solution (try it yourself first)
<div class="card warning">First</div>
<div class="card">Second</div>
<label for="city">City</label>
<input id="city" name="city">
<div id="app">App</div>
<p hidden>Saved</p>

Lesson: Global attributes and custom data →