Sprint 2 kickoff

Sprint 2 goal: a styled site. By the end of today, your pages have a consistent colour palette, readable typography, and a responsive layout. The primary content section should be fully styled.

Start with CSS variables

Before writing any component styles, define your colour palette and fonts as CSS custom properties at the top of style.css:

:root {
  --color-primary: #2563eb;
  --color-bg: #f8fafc;
  --color-text: #1e293b;
  --font-heading: 'Your Font', sans-serif;
  --font-body: 'Your Font', sans-serif;
}

One change to --color-primary updates every element that uses it. This is the right foundation for prompt-driven iteration: change the variable, not twelve separate rules.

Try this prompt to generate a starting :root block:

Generate a :root block with CSS custom properties for a website called [name]
with a [adjective] feel. Include: primary colour, secondary colour, background
colour, text colour, accent colour, heading font (Google Font), body font
(Google Font). Output ONLY the CSS :root block. No explanation.

Sprint 2 done conditions

• CSS variables defined for colours and fonts
• Typography applied to headings and body text
• Primary content section styled and readable
• Layout works on both a laptop and a phone screen (resize the browser window to check)