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

Next lesson: Intermediate section exam

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies