02. Frontend
Everything the user sees and clicks. The browser side of a web app. From the raw building blocks (HTML, CSS, JS) up through modern frameworks (React, Next.js) and styling systems (Tailwind, shadcn/ui).
Entries
| # | Entry | Status | One-line description |
|---|---|---|---|
| 1 | HTML | 🟩 COMPLETE | The language web pages are written in — structure and content |
| 2 | CSS | 🟩 COMPLETE | The language that styles HTML — colors, layout, fonts |
| 3 | JavaScript | 🟩 COMPLETE | The language that makes web pages interactive |
| 4 | TypeScript | 🟩 COMPLETE | JavaScript with types — fewer bugs, better autocomplete |
| 5 | The DOM | 🟩 COMPLETE | The live tree of elements that JavaScript can read and change |
| 6 | React | 🟩 COMPLETE | A library for building UIs out of reusable components |
| 7 | Next.js | 🟩 COMPLETE 🟦 LIVING | The most popular React framework — routing, server rendering, full stack |
| 8 | Tailwind CSS | 🟩 COMPLETE | Utility-first CSS — style with classes like flex p-4 bg-blue-500 |
| 9 | ui | 🟩 COMPLETE | Copy-paste React components built on Tailwind — beautiful by default |
| 10 | Responsive design | 🟩 COMPLETE | Making sites look right on phones, tablets, and desktops |
| 11 | Accessibility (a11y) | 🟩 COMPLETE | Building sites that work for everyone, including assistive tech |
| 12 | Dark mode | 🟩 COMPLETE | How light/dark themes are implemented in modern web apps |
| 13 | Progressive Web Apps (PWAs) | 🟩 COMPLETE | Web apps that install like native apps and work offline |
| 14 | Forms & validation | 🟩 COMPLETE | Capturing user input safely — client-side vs server-side validation |
| 15 | SPA vs MPA vs SSR vs SSG | 🟩 COMPLETE | The acronym soup of how pages are rendered, untangled |
Suggested reading order
For someone brand new: 1 → 2 → 3 is the classic foundation. Then 5 (DOM) → 6 (React) → 7 (Next.js). Styling can come at any point — 8 (Tailwind) → 9 (shadcn) is the modern fast path. Cross-cutting concerns (10–15) you grab as you need them.
See also
- 03. Backend — what your frontend talks to
- 14. Design & UX — the human side
- 11. AI-assisted development — how to build frontends faster with Claude