HTML Academy · Lesson

Graceful Degradation vs Progressive Enhancement

Compare top-down versus bottom-up enhancement strategies.

Lesson 3 of 413 steps

Graceful Degradation vs Progressive Enhancement is a free HTML Academy lesson on CoddyKit. This is lesson 3 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, and your progress syncs across the web and the CoddyKit app. The HTML Academy course includes 4 lessons in total.

Two Compatibility Philosophies

Both PE and Graceful Degradation (GD) deal with the same problem: different browsers and environments support different features. PE builds up from a baseline; GD strips down from the cutting edge. The choice shapes the entire architecture.

Progressive Enhancement: Build Up

PE starts with the lowest-common-denominator HTML that works everywhere, then adds layers (CSS, JS, advanced features) that enhance the experience on more capable browsers. The baseline experience is the reference point.

Graceful Degradation: Build Down

GD starts with the full modern experience built for current browsers, then adds fallbacks for older ones. The cutting-edge experience is the reference point and older browsers see a stripped-down version.

Outcomes Look Similar

An IE11 user might see the same simplified page under either approach. The difference is in process and code: a PE codebase is one set of HTML with progressive layers; a GD codebase is the modern code plus a series of patches to work around old environments.

PE Tends to Be More Resilient

PE prioritizes the baseline as the source of truth. Network glitches, script failures and unexpected environments still get a working page. GD treats the modern path as the norm, so unexpected failures often surface as broken pages rather than degraded ones.

GD Is Faster to Ship Today

When the target audience is 99% modern browsers, GD lets the team optimize for the common case and add fallbacks reactively. For internal tools or specialized apps with known users, this can be the pragmatic choice — PE's discipline is overhead.

Choose by Audience

Consumer-facing public sites benefit from PE: unknown users on unknown devices, accessibility and SEO matter. Internal dashboards on a known browser fleet can use GD without losing much. There is no one right answer.

Hybrid in Practice

Real projects mix both: server-render the core HTML (PE for the critical path) and ship a heavy JS bundle that enhances it (GD-style fallbacks for older browsers). Recognize each choice consciously rather than defaulting to one strategy unexamined.

Build Tooling Reflects the Choice

PE teams emphasize SSR, semantic markup and resilient endpoints. GD teams emphasize transpilers, polyfills and conditional bundling. Both stacks ship something to old browsers; the philosophical difference is whose baseline drives the architecture.

Communicating the Choice

Document the supported browser matrix and which strategy applies. "We use PE: the site works in any HTML-capable browser with JS disabled" or "We use GD: full experience on Chrome/Firefox/Safari latest two versions, basic read-only fallback in IE11". Both are valid; ambiguity is the enemy.

Cost of Each

PE costs more upfront design but less ongoing maintenance: the baseline rarely breaks. GD costs less upfront but more long-term as polyfills and shims pile up. Choose with the project's expected lifetime in mind.

Knowledge Check

What is the key difference between Progressive Enhancement and Graceful Degradation?

Summary

PE starts with a universal HTML baseline and progressively enhances; GD starts with the modern experience and progressively falls back. PE is more resilient and accessibility-friendly; GD is faster to ship for known modern audiences. Choose consciously by audience and document the supported matrix.

Free to start

Learn HTML with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
40
Lessons
159

Frequently Asked Questions

Is the “Graceful Degradation vs Progressive Enhancement” lesson free?

Yes — any 3 lessons of the HTML Academy learning path, including “Graceful Degradation vs Progressive Enhancement”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The HTML Academy course includes 4 lessons in total.

What will I learn in “Graceful Degradation vs Progressive Enhancement”?

Compare top-down versus bottom-up enhancement strategies. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

How long does the “Graceful Degradation vs Progressive Enhancement” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. The PE Philosophy Start with HTML
  2. Feature Detection vs Browser Sniffing
  3. Graceful Degradation vs Progressive Enhancement
  4. Building a PE Accordion
← Back to HTML Academy