Challenge - Beginner capstone
Style a personal homepage combining all beginner topics.
Bring all beginner topics together
A personal homepage uses every beginner topic at once. font-family and color set the typography; background-color the page tone; width, padding and margin the box model; border-radius and box-shadow the card look.
The header gets position: relative as a frame, and a badge inside sits at a corner with position: absolute. Each lesson taught one topic; here you merge them on a single page and close the beginner final.
Exercise Build the homepage skeleton
Add a body selector. Set margin to 0, font-family to sans-serif, color to #1a1a2e, and background to #f8f9fa. Then add a .site-header class selector: padding is 2rem, text-align is center, background is #1a1a2e, and color is #fff.
Show example solution
/* personal homepage skeleton */
body {
margin: 0;
font-family: sans-serif;
color: #1a1a2e;
background: #f8f9fa;
}
.site-header {
padding: 2rem;
text-align: center;
background: #1a1a2e;
color: #fff;
}Bring the components together
Once the skeleton is ready, a profile card and a footer are added. The card caps its width with max-width and centers with margin: 2rem auto. background: #fff and box-shadow separate it from the backdrop; border-radius softens the corners.
The footer rests like a small signature with text-align: center. When typography, box, color and layout work together on one page, the beginner final is complete.
Exercise Add a profile card and a footer
Add a .profile-card class selector. Set max-width to 600px, margin to 2rem auto, padding to 1.5rem, background to #fff, border-radius to 12px, and box-shadow to 0 2px 8px rgba(0, 0, 0, 0.08). Then add a .site-footer class selector: padding is 1rem, text-align is center, and color is #6c757d.
Show example solution
/* profile card and footer */
.profile-card {
max-width: 600px;
margin: 2rem auto;
padding: 1.5rem;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.site-footer {
padding: 1rem;
text-align: center;
color: #6c757d;
}Test yourself
-
Which property rounds the corners of a card?
/* ? */ .card { /* ... */ }- border-width
- box-shadow
- border-radius
- padding
Show answer
border-radius — Correct. border-radius sets how round the corners are.
-
Complete the padding value for the header
.site-header { padding: ____; text-align: center; background: #1a1a2e; color: #fff; }Show answer
.site-header { padding: 2rem; text-align: center; background: #1a1a2e; color: #fff; } -
Match each property to its use
- font-family
- Typeface family choice
- box-sizing
- What width includes
- background-image
- Background image
- position
- Placement context