# Learning to Build Web Apps with React

<Card title="Course overview" subtitle="Instructor: Sarah Chen">
<Columns>
<Stat label="Overall progress" value="68%" icon="chart-line" tone="info" />
<Stat label="Average rating" value="4.7/5" icon="star" tone="success" />
</Columns>

<Progress value="68" max="100" label="Course completion" tone="info" />

<Callout tone="success" title="Next up">
Continue with **Module 4: Components & Props** — you're 2 lessons away from finishing this module.
</Callout>
</Card>

<Card title="Your modules">
<Columns>
<Card title="Module 1: React Basics">
<Badge tone="success">Completed</Badge>
<Progress value="100" max="100" label="Module progress" tone="success" />
<KeyValue title="Module details">
| Detail | Value |
|---|---|
| Lessons | 5 of 5 done |
| Quiz score | 92% |
| Status | <Badge tone="success">Done</Badge> |
</KeyValue>
</Card>

<Card title="Module 2: JSX & Styling">
<Badge tone="success">Completed</Badge>
<Progress value="100" max="100" label="Module progress" tone="success" />
<KeyValue title="Module details">
| Detail | Value |
|---|---|
| Lessons | 4 of 4 done |
| Quiz score | 88% |
| Status | <Badge tone="success">Done</Badge> |
</KeyValue>
</Card>

<Card title="Module 3: State & Events">
<Badge tone="success">Completed</Badge>
<Progress value="100" max="100" label="Module progress" tone="success" />
<KeyValue title="Module details">
| Detail | Value |
|---|---|
| Lessons | 6 of 6 done |
| Quiz score | 91% |
| Status | <Badge tone="success">Done</Badge> |
</KeyValue>
</Card>

<Card title="Module 4: Components & Props">
<Badge tone="info">In progress</Badge>
<Progress value="60" max="100" label="Module progress" tone="info" />
<KeyValue title="Module details">
| Detail | Value |
|---|---|
| Lessons | 3 of 5 done |
| Quiz score | — |
| Status | <Badge tone="info">Next up</Badge> |
</KeyValue>
</Card>

<Card title="Module 5: Hooks & Effects">
<Badge tone="neutral">Not started</Badge>
<Progress value="0" max="100" label="Module progress" tone="neutral" />
<KeyValue title="Module details">
| Detail | Value |
|---|---|
| Lessons | 0 of 7 done |
| Quiz score | — |
| Status | <Badge tone="neutral">Locked</Badge> |
</KeyValue>
</Card>

<Card title="Module 6: Final Project">
<Badge tone="neutral">Not started</Badge>
<Progress value="0" max="100" label="Module progress" tone="neutral" />
<KeyValue title="Module details">
| Detail | Value |
|---|---|
| Lessons | 0 of 3 done |
| Quiz score | — |
| Status | <Badge tone="neutral">Locked</Badge> |
</KeyValue>
</Card>
</Columns>
</Card>

<Card title="Continue learning">
<Callout tone="info" title="Next lesson">
**Lesson 4.4: Passing Props to Components** — 12 min read + 2 practice exercises
</Callout>
<Button variant="primary" size="large">Resume lesson</Button>
<Button variant="secondary">View all lessons in Module 4</Button>
</Card>

<Card title="Ratings breakdown">
<Columns>
<Rating value="4.7" max="5" count="214" />
<Stat label="Would recommend" value="96%" tone="success" />
</Columns>
<KeyValue title="Distribution">
| Stars | Share |
|---|---|
| 5★ | 78% |
| 4★ | 15% |
| 3★ | 5% |
| 2★ | 1% |
| 1★ | 1% |
</KeyValue>
</Card>

<Card title="Up next after this module">
<Columns>
<Card title="Module 5: Hooks & Effects">
Unlock after finishing Module 4 — covers useState, useEffect, and custom hooks.
<Button variant="secondary">Preview Module 5</Button>
</Card>
<Card title="Module 6: Final Project">
Build and deploy a complete React app to earn your certificate.
<Button variant="secondary">See project brief</Button>
</Card>
</Columns>
</Card>

<FollowUps>
- What are the prerequisites for Module 5?
- Can I retake the Module 4 quiz?
- Show me my quiz scores across modules
- How long until I finish the whole course?
</FollowUps>