# Web Development Fundamentals

<Avatar name="Jane Smith" subtitle="Instructor · Front-end Developer" />

<Columns>
<Stat label="Overall progress" value="58%" change="7 of 12 lessons done" icon="chart-line" />
<Stat label="Learner rating" value="4.8 / 5" change="2,340 ratings" icon="star" />
</Columns>

<Card title="Course progress">
<Progress value="58" max="100" label="58% complete" tone="info" />
</Card>

<Card title="Modules" subtitle="Four modules, 12 lessons total">
<Steps>
<Step title="Module 1 · Getting Started" status="done" subtitle="2/2 lessons · Completed" />
<Step title="Module 2 · HTML Fundamentals" status="done" subtitle="3/3 lessons · Completed" />
<Step title="Module 3 · CSS Styling" status="current" subtitle="2/4 lessons · In progress" />
<Step title="Module 4 · JavaScript Basics" status="todo" subtitle="0/3 lessons · Not started" />
</Steps>
</Card>

<Card title="Next lesson" subtitle="Resume where you left off">
<Callout tone="info" title="CSS Flexbox Layout">
Module 3 · Lesson 3 of 4 · 12 minutes · In progress
</Callout>
<Button href="#" icon="arrow-right">Continue learning</Button>
</Card>