CSS Website
The capstone exercise: build a full small website using nothing but the topics on this site. No frameworks, no templates — pure HTML + CSS.
Suggested structure
- Home — hero, three feature cards, call-to-action.
- About — long-form text in a centred column.
- Work or Projects — responsive card grid.
- Blog — list with excerpts.
- Contact — styled form.
Topics you'll lean on
| Phase | Topics |
|---|---|
| Layout | website-layout, grid, flexbox |
| Type & colour | fonts, variables, colors |
| Components | buttons, forms, navigation-bar |
| Responsive | media-queries, RWD intro |
| Polish | transitions, shadows |
Tip: Build mobile-first. Get the phone layout looking great, then add
min-width media queries to enhance for bigger screens. The reverse is always more work.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS Website</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Mobile-first means starting with which viewport?
Answer:
The smallest screen.
Discussion
Loading…