Certificate

# Tailwind certificate - outline

## Part 1 - exam (45 min)

Topics:
- Mobile-first responsive design
- Layout: flex + grid + container
- Theming: tokens, dark mode by class
- Variants: hover, focus-visible, group, peer, dark, responsive
- Plugins: forms, typography, aspect-ratio
- Accessibility: focus rings, sr-only, prefers-reduced-motion
- v4 vs v3 differences

Passing mark: 70 percent.

## Part 2 - capstone (take-home, ~8 hours)

Ship a small marketing site:
- Responsive hero, features grid, pricing, FAQ, footer
- Dark mode toggle (class strategy)
- Accessible nav: skip link, keyboard friendly, focus rings
- Animations respect prefers-reduced-motion
- Zero arbitrary values that are reused - promote to a token
- Lighthouse score 95+ across the board
- Deployed to Netlify, Vercel, or Cloudflare Pages

Submit a Git repo + live URL.

## Grading

- Responsiveness + dark mode (30 percent)
- Accessibility (25 percent)
- Code organisation (clsx / cva / sensible components) (20 percent)
- Lighthouse + performance budget (15 percent)
- Visual polish (10 percent)

## Tips

- Use the official Prettier plugin so class order is consistent
- Keep a small Components folder for repeated patterns - do not extract too early
- Lighthouse is non-negotiable in 2026; budgets keep it honest

<!-- /certificate/tailwind -->