← Lessons

quiz vs the machine

Silver1130

Frontend

Progressive Enhancement

Build a working baseline first, then layer on richer features.

4 min read · intro · beat Silver to climb

Start with a baseline

Progressive enhancement is a strategy where you build a functional core with plain HTML first, then add CSS and JavaScript as enhancements. If a layer fails, the page still works.

The layers

  • HTML provides content and working forms and links.
  • CSS adds presentation and layout.
  • JavaScript adds interactivity and convenience.

A form that posts to a server works even before JavaScript loads. Script can then intercept the submit to add inline validation and a smoother flow, but the baseline never depended on it.

Why it matters

  • Slow networks and flaky scripts do not leave users stranded.
  • Older or limited devices still get the content.
  • It tends to improve accessibility, since semantic HTML is the foundation.

This is the opposite of graceful degradation, which starts rich and tries to fall back. Enhancement starts solid and builds up.

Key idea

Build a working HTML baseline first, then layer CSS and JavaScript as enhancements, so the page stays usable even when a layer fails to load.

Check yourself

Answer to earn rating on the learn ladder.

1. What is the baseline layer in progressive enhancement?

2. How does progressive enhancement differ from graceful degradation?