⛰ Phase 1 — Foundations · Week 2

Making Things Look Good with CSS

⏱ ~3 hours 📚 4 lessons 🛠 VS Code · Claude AI · GitHub · Google Fonts

Transform your plain HTML into something you'd actually show someone. This week is all about colors, fonts, layout — and building the habit of committing every improvement to GitHub.

Lesson 1 of 4

🎨 What CSS Does

CSS (Cascading Style Sheets) is what makes HTML look good. One CSS file controls the entire visual appearance of your site — colors, fonts, spacing, layout. Change one line and the whole site updates.

🏔 WV Real-World Example — Small Business

That Charleston restaurant with the beautiful website? Their HTML is the menu items and headings. Their CSS is the dark wood aesthetic, the gold text, the clean layout. Same structure — completely different look. You'll be able to do this by end of week.

style.css
h1 {
  color: #c9a84c;       /* gold */
  font-size: 48px;
  font-family: Georgia, serif;
}
p {
  color: #555;
  line-height: 1.7;
  max-width: 600px;
}
🤖
Claude tip

Don't know the CSS property for what you want? Describe it: "How do I make text bigger and add space underneath?" Claude will tell you font-size and margin-bottom. You learn the vocabulary by doing.

Lesson 2 of 4

🎨 Colors, Fonts & Spacing

🎨

Colors

Use hex codes like #c9a84c or names like steelblue. Go to coolors.co to generate palettes — lock a WV gold and hit spacebar for matching colors. Paste the hex codes directly into your Claude prompt.

✍️

Fonts

Go to fonts.google.com → pick a font → copy the <link> tag → paste into your HTML <head>. Then use it in CSS: font-family: 'Playfair Display', serif;. Free, loads fast.

📐

Spacing

margin = space outside. padding = space inside. margin: 0 auto centers a block. Ask Claude anytime you're not sure.

Style my HTML page with: - Font: use 'Lora' from Google Fonts for headings - Colors: #060810 background, #e8ecf4 text, #c9a84c gold accent, #2563a8 blue accent - Centered layout, max-width 700px, generous padding - Smooth hover effects on links Write the full CSS file and the link tag for my HTML head.

Lesson 3 of 4

📐 Layout with Flexbox

Flexbox is how you put things side by side — nav links in a row, cards next to each other, content centered. One property changes everything.

style.css
.nav {
  display: flex;           /* puts children side by side */
  gap: 24px;             /* space between items */
  justify-content: center; /* center horizontally */
}
🏔 WV Real-World Example — Job Seeker

Flexbox is one of the top CSS concepts asked about in junior developer interviews. Learning it now — even imperfectly — puts you ahead of people who've been 'thinking about coding' for years.

Lesson 4 of 4

✨ Hover Effects

Small interactions make a page feel alive. CSS handles these with almost no code.

style.css
.button {
  background: #c9a84c;
  transition: all 0.2s ease;
}
.button:hover {
  background: #7a5e22;
  transform: translateY(-2px);
}
🏗 Week 2 Project

Style Your About Me Page — Then Commit It

Build This

Transform Week 1's HTML into something beautiful

  • Pick a color palette from coolors.co
  • Add a Google Font for headings
  • Center the content with a max-width
  • Add hover effects on your links
  • Commit to GitHub: "Add Week 2 CSS styling"

Week 2 Done!

Mark it complete and keep your momentum going.

← Week 1Week 3 →