🛠️ Weekend Project: CSS Preprocessors & Frameworks

The Brief & Scope

Build a 3-to-5 page marketing site for a small fictional business of your choosing — a café, a photography studio, a climbing gym, a tiny SaaS product. The exact subject does not matter. What matters is that you exercise the module's skills end to end: a preprocessor, a customized framework, real interactivity, a working form, and a shipped build.

Minimum requirements (all of these)

• 3–5 pages that share a header, footer, and navigation (e.g. Home, About, Services/Menu, Contact)
• A CSS preprocessor — Sass/SCSS recommended — with at least variables, nesting, and one mixin or partial split
• A CSS framework — Tailwind CSS or Bootstrap — customized via its config/variables, not just used stock
• Three interactive components: e.g. a responsive nav with a mobile menu, an accordion/tabs, and a modal or carousel
• One accessible contact form with client-side validation and clear error messaging
• A production build that purges unused CSS and minifies output, deployed to a live URL

Pick two stretch goals (optional but encouraged)

• Dark/light theme toggle that remembers the user's choice
• A small tasteful animation on scroll or hover (respecting prefers-reduced-motion)
• A lightbox image gallery
• Full keyboard navigation + a Lighthouse Accessibility score of 95+

The Milestone Map

Rather than a vague "build a website," this project is broken into five milestones. Each one ends with something you can look at and verify. Finish them in order — every milestone assumes the previous one works.

Milestone 0 — Scaffold the Build

Goal: a running dev server that compiles your styles, with the framework installed and one page rendering. Do not write real content yet — you are proving the pipeline works.

Option A — Tailwind CSS + Vite (recommended for utility-first)

# Create the project
npm create vite@latest my-weekend-site -- --template vanilla
cd my-weekend-site
npm install

# Add Tailwind (v4 uses the Vite plugin — no config file needed to start)
npm install tailwindcss @tailwindcss/vite

Wire the plugin into Vite and pull Tailwind into your stylesheet:

// vite.config.js
import { defineConfig } from 'vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

/* src/style.css */
@import "tailwindcss";

/* Customize with design tokens — this is your framework customization */
@theme {
  --color-brand: #5c6ac4;
  --color-brand-dark: #4c58a8;
  --font-display: "Playfair Display", serif;
}

Option B — Bootstrap + Sass + Vite (recommended for component-first)

npm create vite@latest my-weekend-site -- --template vanilla
cd my-weekend-site
npm install
npm install bootstrap @popperjs/core sass

Create a Sass entry point that overrides Bootstrap's variables before importing it — this is the correct, maintainable way to customize Bootstrap:

// src/scss/main.scss

// 1. Bootstrap functions first, so color helpers are available
@import "bootstrap/scss/functions";

// 2. YOUR overrides (this is the customization layer)
$primary:   #5c6ac4;
$success:   #47d185;
$border-radius: 0.5rem;
$font-family-base: "Montserrat", sans-serif;
$headings-font-family: "Playfair Display", serif;

// 3. The rest of Bootstrap, which now picks up your values
@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/bootstrap";

// 4. Your own partials, layered on top
@import "components/buttons";
@import "layout/header";

// src/main.js — import your styles and Bootstrap's JS bundle
import './scss/main.scss';
import * as bootstrap from 'bootstrap';

⚠️ Common M0 trap: customizing by writing override CSS after the framework (.btn-primary { background: … !important; }). That fights the framework and multiplies your CSS. Always customize through the token layer — Bootstrap variables or Tailwind's @theme/config — before the framework generates its classes.

Milestone 1 — Tokens & Layout

Goal: a consistent visual system and a shared page shell (header + nav + footer) that every page reuses.

Define your design tokens once

Before styling anything specific, decide your palette, type scale, and spacing — and encode them as tokens. Everything else references these, so a single change ripples everywhere. That is exactly what preprocessor variables and framework theme config are for.

// src/scss/abstracts/_tokens.scss  (Sass)
$brand:        #5c6ac4;
$brand-ink:    #1f2540;
$surface:      #ffffff;
$radius:       0.5rem;
$space-1:      0.5rem;
$space-2:      1rem;
$space-3:      2rem;

// A reusable mixin keeps focus styles consistent & accessible
@mixin focus-ring {
  outline: 2px solid $brand;
  outline-offset: 2px;
}

Build the shared shell

Every page repeats the same header, nav, and footer. Structure it once as a set of partials/components so the three-to-five pages stay identical where they should be. A quick component map keeps you honest about what you're building:

Milestone 2 — Interactive Components

Goal: three working, accessible interactive components. Build them one at a time, and test each on a phone-sized viewport before moving on.

Component 1 — Responsive nav with a mobile menu

A hamburger toggle that reveals the nav on small screens. Keep it accessible: the button needs an aria-expanded state and the toggle must be keyboard-operable.

const toggle = document.querySelector('.nav-toggle');
const menu = document.querySelector('#nav-menu');

toggle.addEventListener('click', () => {
  const isOpen = toggle.getAttribute('aria-expanded') === 'true';
  toggle.setAttribute('aria-expanded', String(!isOpen));
  menu.classList.toggle('is-open');
});

Component 2 — Accordion (or tabs)

Great for an FAQ or a menu. The native <details> element gives you an accessible, keyboard-friendly accordion with zero JavaScript — reach for it before writing your own:

<details class="faq">
  <summary>Do you take walk-ins?</summary>
  <p>Yes — walk-ins are welcome, but reservations are recommended on weekends.</p>
</details>

Component 3 — Modal dialog

Use the native <dialog> element — it handles focus trapping, Esc to close, and the backdrop for you, which is a lot of accessibility work you'd otherwise hand-roll:

<button id="open-signup">Join the waitlist</button>

<dialog id="signup">
  <form method="dialog">
    <h2>Join the waitlist</h2>
    <p>We'll email you when a table opens up.</p>
    <button value="close">Close</button>
  </form>
</dialog>

const dialog = document.querySelector('#signup');
document.querySelector('#open-signup')
  .addEventListener('click', () => dialog.showModal());

Milestone 3 — The Form

Goal: one accessible contact form with real validation and clear, specific error messages. Lean on the browser's built-in constraint validation before adding custom JavaScript.

<form id="contact" novalidate>
  <div class="field">
    <label for="name">Full name</label>
    <input id="name" name="name" type="text" required autocomplete="name">
    <p class="error" data-for="name" role="alert"></p>
  </div>

  <div class="field">
    <label for="email">Email</label>
    <input id="email" name="email" type="email" required autocomplete="email">
    <p class="error" data-for="email" role="alert"></p>
  </div>

  <div class="field">
    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>
    <p class="error" data-for="message" role="alert"></p>
  </div>

  <button type="submit">Send message</button>
</form>

The novalidate attribute turns off the browser's default popups so you can render your own consistent messages, while still using the constraint API to decide validity:

const form = document.querySelector('#contact');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  let firstInvalid = null;

  for (const field of form.querySelectorAll('input, textarea')) {
    const error = form.querySelector(`.error[data-for="${field.name}"]`);
    if (!field.checkValidity()) {
      error.textContent = field.validationMessage;
      field.setAttribute('aria-invalid', 'true');
      firstInvalid ??= field;
    } else {
      error.textContent = '';
      field.removeAttribute('aria-invalid');
    }
  }

  if (firstInvalid) {
    firstInvalid.focus(); // move focus to the first problem
  } else {
    // All good — here you'd POST to your backend / form service
    form.reset();
    alert('Thanks! Your message has been sent.');
  }
});

Milestone 4 — Optimize & Ship

Goal: a production build with unused CSS purged and assets minified, deployed to a public URL. A framework's full stylesheet is large; the whole point of a modern build is to ship only what you actually use.

Build for production

# Vite produces an optimized, minified build in dist/
npm run build

# Preview the production build locally before deploying
npm run preview

Deploy

Netlify, Vercel, GitHub Pages, or Cloudflare Pages all host a static dist/ folder for free. The fastest path with Netlify:

# One-time
npm install -g netlify-cli

# From the project root, after npm run build
netlify deploy --prod --dir=dist

Then run Lighthouse (in Chrome DevTools) against the live URL and note your four scores. You'll reference them in your write-up.

Definition-of-Done Checklist

"Done" is not a feeling — it's a list. Walk through this before you consider the project complete. If every box is checked, you're finished; if not, you know exactly what's left.

What Good Looks Like

Meeting the checklist gets you a passing project. This section describes the difference between "it works" and "this is genuinely good" — the bar to aim for, and the mistakes that quietly drag a project down.

Summary & Quiz

📚 Further Reading

• Tailwind CSS — Theme configuration
• Bootstrap — Customizing with Sass
• MDN — The <dialog> element
• MDN — Client-side form validation
• web.dev — Measure with Lighthouse

🚀 What's Next?

You've closed out the CSS half of the course with a shipped project. Next, Module 8 pivots to the language that makes pages come alive — we start with the history and evolution of JavaScript, so you understand why the language looks the way it does before you dive into its syntax.