JS Website
The capstone: build a small interactive website using nothing but vanilla JavaScript, HTML, and CSS. No frameworks.
Suggested structure
- Home — hero, three feature tiles, sticky navbar.
- Search — debounced input that filters a list of items in real time.
- Detail — clickable card opens a modal (
<dialog>) with full info. - Cart / state — items persist across reloads via localStorage.
- Checkout — form with native validation + fetch POST.
What you'll exercise
| Phase | Topics |
|---|---|
| Architecture | Modules, closures, naming. |
| UI | DOM, events, delegation. |
| State | Web Storage, immutable updates via spread. |
| Networking | fetch, async/await, error handling. |
| Quality | best practices, style guide. |
Deploy checklist
- Mobile-first responsive layout (test at 320px).
- Loads under 200KB compressed.
- Works without JavaScript for read-only navigation (progressive enhancement).
- Keyboard-only navigation works end-to-end.
- Hosted on GitHub Pages, Netlify, or Vercel.
- Lighthouse scores ≥ 90 in all four categories.
Tip: Build the smallest end-to-end "vertical slice" first — one page, one button, one fetch. Then iterate. Building everything horizontally (all the CSS, then all the JS, then all the data) is the surest way to never ship.
Example
Example
<!DOCTYPE html>
<html>
<body>
<p id="out"></p>
<script>
document.getElementById("out").textContent = "Hello from JS Website!";
</script>
</body>
</html>
Try it Yourself »
Exercise
The capstone uses no…
Answer: no
Vanilla means no…?
Discussion
Loading…