Frontend Foundations

Lessons in This Module

1. Lesson 1

   What the Frontend Actually Does

   The frontend presents product information and controls while coordinating navigation, local state, validation, accessibility, and communication with backend services. Learn the founder decision, practical evidence, and warning signs that matter.

   Open Lesson

2. Lesson 2

   Pages, Layouts, and Components

   Pages represent routes, layouts provide shared structure, and components package reusable interface content or behaviour. Learn the founder decision, practical evidence, and warning signs that matter.

   Open Lesson

3. Lesson 3

   Client State and Server Data

   Client state records temporary interface conditions, while server data is authoritative product information retrieved from or persisted by a backend. Learn the founder decision, practical evidence, and warning signs that matter.

   Open Lesson

4. Lesson 4

   Static Rendering, Server Rendering, and Client Rendering

   Rendering strategies decide whether page output is prepared ahead of time, produced on the server per request, or assembled in the browser. Learn the founder decision, practical evidence, and warning signs that matter.

   Open Lesson

5. Lesson 5

   Frontend Frameworks and Next.js

   A frontend framework supplies conventions for composing interfaces, data access, routing, rendering, and builds; Next.js is a React framework with server and client capabilities. Learn the founder decision, practical evidence, and warning signs that matter.

   Open Lesson

6. Lesson 6

   Component Libraries and Shadcn UI

   A component library provides reusable interface patterns; shadcn/ui supplies editable component source assembled from accessible primitives rather than a sealed package. Learn the founder decision, practical evidence, and warning signs that matter.

   Open Lesson

7. Lesson 7

   Responsive Frontend Architecture

   Responsive frontend architecture makes layout, content priority, data density, and interaction adapt coherently across devices. Learn the founder decision, practical evidence, and warning signs that matter.

   Open Lesson

8. Lesson 8

   Frontend Performance

   Frontend performance is how quickly useful content appears, becomes interactive, and responds under realistic devices and networks. Learn the founder decision, practical evidence, and warning signs that matter.

   Open Lesson

9. Lesson 9

   Browser Compatibility

   Browser compatibility is the degree to which a product's required features and interactions work across the browsers and devices its audience uses. Learn the founder decision, practical evidence, and warning signs that matter.

   Open Lesson

10. Lesson 10

    Auditing a Vibe-Coded Frontend

    A vibe-coded frontend audit checks generated code for structure, accessibility, state handling, responsiveness, security boundaries, and maintainability. Learn the founder decision, practical evidence, and warning signs that matter.

    Open Lesson