Challenge - Intermediate capstone
Build a homepage combining all intermediate topics.
Intermediate capstone: homepage
A homepage combines every tool of the intermediate level. Custom variables like --brand are defined in :root and called everywhere with var(--brand). Header and footer sit side by side with flex; the main section uses grid-template-areas for named regions.
@media (min-width: 768px) narrows declarations for small screens; transition smooths state changes; transform: scale() grows cards on hover. Seven points bring the whole intermediate level together.
Exercise Build the homepage skeleton
Complete the CSS below. Define --brand: #2563eb inside :root. Make .page a grid with a single-column template of "header" "main" "footer". Place .header and .footer in their regions.
Show example solution
/* root variables */
:root {
--brand: #2563eb;
}
/* page container */
.page {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
}
/* header */
.header {
grid-area: header;
}
/* main */
.main {
grid-area: main;
}
/* footer */
.footer {
grid-area: footer;
}Exercise Add transition and transform to cards
Complete the CSS below. Add transition: transform 0.2s to .card; on .card:hover apply transform: scale(1.05). Inside @media (max-width: 600px) make .page a single column with grid-template-columns: 1fr.
Show example solution
/* card */
.card {
transition: transform 0.2s;
}
/* card hover */
.card:hover {
transform: scale(1.05);
}
/* narrow screen */
@media (max-width: 600px) {
.page {
grid-template-columns: 1fr;
}
}Test yourself
-
Which transform grows a card on hover?
.card:hover { transform: ???; }- translate(10px, 0)
- scale(1.05)
- rotate(45deg)
- skew(10deg)
Show answer
scale(1.05) — Correct. scale(1.05) grows the card by 5%; ideal on hover.
-
Write the custom variable definition
:root { --brand: ____; }Show answer
:root { --brand: #2563eb; } -
Match each tool to its role
- var(--brand)
- Calls the variable
- grid-template-areas
- Names regions
- @media (min-width: 768px)
- Targets wide screens
- transition
- Smooths state changes
- transform: scale()
- Grows the card