CSS Free Section Starter Challenge 20 min

1. The Modern Box Model & Border-Box Reset

Overview: Understand content, padding, border, and margin calculations.

Concept & Syntax Guide

By default, browsers add padding and border to an element's total width. Setting `box-sizing: border-box;` ensures padding stays inside the declared width, preventing layout breakage.

Hands-On Practice Exercise

Style a Polished Feature Card

Add CSS rules to `.feature-card`: set `background-color: #0f172a;`, `color: #ffffff;`, `padding: 24px;`, `border-radius: 12px;`, and `border: 1px solid #334155;`.

Target Output: Instant Source Code

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: Instant Source Code

CSS Code Editor

1
2
3
4
5
6
7
8
9
10

<style>
.feature-card {
  /* Add your CSS properties here */
  
}
</style>
<div class="feature-card">
  <h3>Instant Source Code</h3>
  <p>Clean HTML5, CSS3, and PHP included.</p>
</div>