CSS capstone project

Guest work stays on this device. Sign in for account saving; guest work is not automatically copied to your account.

Build a responsive community workshop page

Create navigation, three course cards, a schedule and a labeled registration form. Keep HTML and CSS together in this portable file. Plan first, build, test, then record evidence for each criterion. This workspace saves your work; it does not automatically certify the design.

Your layout plan

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Community workshop</title>
<style>
/* Build a responsive workshop page. Add tokens, Grid, Flexbox and focus styles. */
body { font-family: system-ui; }
</style>
</head>
<body>
<main><h1>Community workshop</h1>
<!-- Add navigation, three course cards, a schedule and a labeled registration form. -->
</main>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Community workshop</title>
<style>
/* Build a responsive workshop page. Add tokens, Grid, Flexbox and focus styles. */
body { font-family: system-ui; }
</style>
</head>
<body>
<main><h1>Community workshop</h1>
<!-- Add navigation, three course cards, a schedule and a labeled registration form. -->
</main>
</body>
</html>

Result

Practice here: edit your HTML or CSS and compare the result. Live preview updates after a short pause. Scripts, form submissions, and external resources are blocked. Wide previews scroll inside this panel. Running code does not grade or save it; use the separate learning and save controls.

Run capstone in new window

Self-review evidence

Readable semantic page with one main landmark and a clear heading hierarchy.Responsive Grid catalog plus a wrapping Flexbox navigation.No horizontal page overflow at 320px or 200% zoom.Visible keyboard focus and a reduced-motion alternative.Explain the cascade and box-sizing decisions in your stylesheet.

Loading saved work…

Review final assessment