← HTML-First Tutorial Native HTML Features →

JS TutorialLesson #170

Progressive Enhancement

Progressive enhancement is a web development strategy where the basic version of a website works first.

Extra features are added later for browsers that support them.

This approach helps websites stay accessible, reliable, and fast.

Start With HTML

The first step is to create a meaningful HTML content.

The page should still work if CSS or JavaScript fails to load.

Example

Example Code

html

Try it Yourself

# Newsletter Signup

   Email:

  **Join

The form above works without JavaScript.

Add CSS for Better Design

After the HTML works, CSS can improve the appearance of the page.

Example

Example Code

html

Try it Yourself

button {

  background-color:#04AA6D;

  color:white;

  padding:10px;

  border:none;

}

Add JavaScript as an Enhancement

JavaScript can improve the user experience, but the page should not depend completely on it.

For example, JavaScript can add instant validation or animations.

Example

Example Code

html

Try it Yourself

const form = document.querySelector("form");

form.addEventListener("submit", function() {

  alert("Form submitted!");

});

The form still works even if this script does not load.

Why Progressive Enhancement Matters

Users browse the web with different devices, browsers, and internet speeds.

Some users may disable JavaScript completely.

Others may use older browsers or assistive technologies.

Progressive enhancement helps ensure that everybody can still access the content.

Tip: Try testing your website with JavaScript disabled.

Graceful Degradation vs Progressive Enhancement

Graceful degradation starts with a complex website and tries to make it work on older browsers.

Progressive enhancement starts simple and adds features step by step.

Progressive Enhancement	Graceful Degradation
Starts simple	Starts advanced
Adds features later	Removes unsupported features
Focuses on accessibility	Focuses on compatibility

Modern HTML Helps

Modern browsers support many features that once required JavaScript.

Examples include:

required form validation
expandable content
loading="lazy" image loading
CSS animations and transitions

This makes progressive enhancement easier than ever.

Interactive Code Examples

JS Example 1

html

Try it Yourself

Interactive runnable JavaScript example from EA Academy.

Live Output Preview:

JS Example 2

html

Try it Yourself

JavaScript syntax and algorithm demonstration.

<style>

button {

  background-color:#04AA6D;

  color:white;

  padding:10px;

  border:none;

}

</style>

JS Example 3

html

Try it Yourself

JavaScript syntax and algorithm demonstration.

<script>

const form = document.querySelector("form");



form.addEventListener("submit", function() {

  alert("Form submitted!");

});

</script>

Previous: HTML-First Tutorial Next: Native HTML Features