12 HTML and CSS Practice Exercises

Watching tutorials feels like progress, but the video ends and your fingers have learned nothing. Real progress looks different: a tiny task, your hands on the keyboard, a small victory — repeated twenty times. That is what practice exercises give you, and an online editor removes every excuse between you and the next one.

The twelve exercises below start from your very first heading and end with a complete profile card you would be proud to show someone. None takes more than fifteen minutes. Open the free CodeLive Studio editor in a second tab and type every one by hand — copy-paste teaches your clipboard, not you.

The 20-minute practice rule

Short daily practice beats long weekend marathons, because your brain consolidates the patterns while you sleep. Twenty minutes a day for two weeks will get you through all twelve exercises comfortably, with each one still fresh in your fingers. Set a timer, do one or two exercises, and stop while it still feels fun — that is the whole method.

Type every tag and every property manually, even when autocomplete offers help. The small friction of typing is what builds recall; accepting autocomplete is how you recognize code, and recognizing is not writing. Make mistakes, watch the preview react, fix them — the live preview turns every error into a lesson instead of a roadblock.

HTML exercises 1–4: structure

Exercise 1 — First page. Create a page with one <h1>, one <p> and a link that opens another website. Goal: a valid skeleton with zero warnings in your own mental review.

Exercise 2 — Recipe card. Mark up a recipe with an <h2> title, an ingredients list (<ul>) and numbered steps (<ol>). Lists are everywhere once you start noticing them.

Exercise 3 — Image with meaning. Add a photo with <img> and write a description that genuinely helps a blind user, not 'image of image'. Then break the src on purpose and see what the alt text does when the picture fails to load.

Exercise 4 — Clickable everything. Build a page where a photo, a sentence and a button are each links. Understanding that any content can be wrapped in an <a> unlocks navigation bars later.

<!-- Exercise 2: recipe card skeleton -->
<h2>Three-ingredient pasta</h2>
<ul>
  <li>200g pasta</li>
  <li>2 tomatoes</li>
  <li>Olive oil</li>
</ul>
<ol>
  <li>Boil the pasta.</li>
  <li>Fry the chopped tomatoes.</li>
  <li>Mix and eat.</li>
</ol>

CSS exercises 5–8: style

Exercise 5 — Paint by property. Take your recipe card and change only three things: text color, background color and font size. Tiny scope, instant feedback — the live preview is your canvas.

Exercise 6 — The box model. Give a paragraph a border, padding and margin, then change each one separately and watch which gap moves. Ten minutes here saves you weeks of 'why is there space there?' confusion later.

Exercise 7 — Hover effects. Make every link turn green and grow slightly when hovered using the :hover pseudo-class. Interaction is the cheapest confidence boost in CSS.

Exercise 8 — Center anything. Put a small box exactly in the middle of the screen with Flexbox. This one snippet is used in virtually every real project:

/* Exercise 8: the centering snippet */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}
.box {
  background: #10b981;
  color: white;
  padding: 40px;
  border-radius: 12px;
}

Exercises 9–12: combine both

Exercise 9 — Styled recipe. Revisit exercise 2 and make it beautiful: readable font, generous spacing, a colored title. Same HTML, completely different feel — that is the power you now have.

Exercise 10 — Navigation bar. Build a horizontal menu from an ordinary <ul> using Flexbox: remove bullets, line items up, add padding and hover colors. Every website you admire has this hiding at the top.

Exercise 11 — Responsive card. Create a card that is full-width on phone size and 400px centered on desktop, using one media query. Check it with the editor's device-size switcher — that toggle is the whole lesson.

Exercise 12 — Profile card (final boss). Combine everything: a photo, name, two-sentence bio, three skill tags, and a contact button, all centered in a card with rounded corners and a shadow. Fifteen minutes of focus, and you have built something you could actually put online.

/* Exercise 11 core: one media query, two layouts */
.card {
  width: 100%;
  padding: 20px;
}
@media (min-width: 600px) {
  .card {
    width: 400px;
    margin: 40px auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
  }
}

You are ready for real projects when…

You can build exercise 12 without looking at the solution. You can look at any simple page and name its building blocks — header, list, card, button. You can change a layout in three places without breaking a fourth. Notice that none of these milestones is about memorizing tags; they are about seeing structure, and structure only becomes visible through practice.

When you get there, keep the streak: rebuild your favorite app's login screen, recreate a landing page from a screenshot, start the next exercise the morning after you finish one. And when a snippet refuses to work, that is not failure — that is exercise thirteen, the debugging one. Open the editor and start exercise 1 now; twenty minutes is enough.