Exercises: Selector & Box Model Practice

Let's think about this for a second

This lesson doesn't teach anything new — it's about hands-on reuse of the selector, color, box model, and flexbox knowledge you picked up in the Basic and Intermediate chapters. Instead of drilling each concept in isolation, you'll combine them and apply them to an actual card layout, so you can test whether "I understand it" really means "I can write it myself." Each task is short and doable within 5-10 minutes. Rather than jumping straight to the solution, we encourage you to open your own code editor and give it a try first.

Exercises

Task 1: Using box-sizing: border-box, build a box for the .card class with padding: 16px, border: 1px solid #ddd, and width: 250px. Task 2: Inside the .card above, use type selectors to set the color and font-size for the h3 title and p description. Task 3: Put 3 .card elements inside a flex container and use display: flex, gap: 16px, and justify-content: center to center them horizontally. Task 4 (optional bonus): Add a box-shadow on .card:hover to create a hover effect.

Build the card layout using box-sizing: border-box
Set text styles using various selectors
Use flexbox to center the cards horizontally

Code Example

css

/* Starter skeleton - fill in the blanks */
* {
  box-sizing: border-box;
}

.card {
  /* Task 1: width, padding, border ထည့်ပါ */
}

.card h3 {
  /* Task 2: title style */
}

.card p {
  /* Task 2: description style */
}

.card-list {
  /* Task 3: display, gap, justify-content ထည့်ပါ */
}

.card:hover {
  /* Task 4 (bonus): box-shadow */
}

/* HTML reference:
<div class="card-list">
  <div class="card"><h3>Title</h3><p>Description text</p></div>
  <div class="card"><h3>Title</h3><p>Description text</p></div>
  <div class="card"><h3>Title</h3><p>Description text</p></div>
</div>
*/

You should see

You should see 3 cards centered horizontally, with padding, border, and gap all matching the design exactly.

Give it 5 minutes

Write Tasks 1-3 yourself in a code editor within 10 minutes and check the result in the browser — try it without peeking at the hints.

A quick word of caution

Check whether each property is actually being applied by cross-checking it against the DevTools Elements panel — make it a habit to always visually confirm your code in the browser after you write it.