CSS Bootcamp
A CSS bootcamp packs the entire tutorial into a single focused stretch — typically a week of full-time work. By the end you'll have a portfolio site you wrote yourself.
Five-day plan
| Day | Morning | Afternoon |
|---|---|---|
| 1 | Foundations, Syntax, Selectors | Colors, Backgrounds, Borders, Margins, Padding |
| 2 | Box model, Box sizing, Typography | Display, Position, Overflow, Z-index |
| 3 | Flexbox: intro, container, items, responsive | Grid: intro, container, items + small layout exercise |
| 4 | Pseudo-classes, Combinators, Variables, Specificity | Media queries, RWD intro, RWD images |
| 5 | Gradients, Shadows, Transitions, Animations | Capstone: build a single-page portfolio |
What to ship by Friday evening
- A responsive single-page portfolio with: hero, about, three projects, contact form.
- Custom palette using CSS variables.
- One tasteful animation (hover lift or fade-in on scroll).
- Mobile-first, tested at 360px, 768px, 1280px.
- Hosted on GitHub Pages, Netlify, or Vercel.
Tip: Bootcamps work best with social pressure. Pair up with a friend, post daily screenshots, or join an online study group. Public commitment doubles completion rates.
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 Bootcamp</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
The recommended bootcamp length is…
Answer:
days
A working week.
Discussion
Loading…