Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progressive Enhancement</title>
</head>
<body>
<div class="container">
<h1>📈 Progressive Enhancement</h1>
<p style="text-align: center; color: #6b7280; margin-bottom: 30px;">
Build for everyone, enhance for capable browsers
</p>
<!-- Three Layers -->
<div class="layers">
<div class="layer layer-1">
<h2>Layer 1: HTML (Core Content)</h2>
<p style="color: #6b7280; margin-bottom: 15px;">
Basic semantic HTML - works everywhere, even without CSS or JavaScript
</p>
<div class="example-code">
<article>
<h1>Article Title</h1>
<p>Content that works everywhere</p>
<a href="/read-more">Read More</a>
</article>
</div>
<ul class="benefits">
<li>Accessible to all devices and browsers</li>
<li>Works without CSS or JavaScript</li>
<li>Fast loading, minimal bandwidth</li>
<li>SEO-friendly, crawlable content</li>
</ul>
</div>
<div class="layer layer-2">
<h2>Layer 2: CSS (Presentation)</h2>
<p style="color: #6b7280; margin-bottom: 15px;">
Add styling for visual enhancement - degrades gracefully
</p>
<div class="example-code">
article {
max-width: 800px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
/* Modern CSS features with fallbacks */
@supports (display: grid) {
.layout { display: grid; }
}
</div>
<ul class="benefits">
<li>Beautiful design for modern browsers</li>
<li>Fallbacks for older browsers</li>
<li>Responsive and adaptive</li>
<li>Print styles for offline access</li>
</ul>
</div>
<div class="layer layer-3">
<h2>Layer 3: JavaScript (Behavior)</h2>
<p style="color: #6b7280; margin-bottom: 15px;">
Add interactivity - enhances but not required
</p>
<div class="example-code">
// Feature detection before use
if ('IntersectionObserver' in window) {
// Use Intersection Observer
const observer = new IntersectionObserver(...);
} else {
// Fallback: show all content
showAllContent();
}
</div>
<ul class="benefits">
<li>Rich interactions for capable browsers</li>
<li>Works without JavaScript too</li>
<li>Feature detection, not browser detection</li>
<li>Graceful degradation</li>
</ul>
</div>
</div>
<!-- Good vs Bad -->
<h2 style="color: #8b5cf6; margin-top: 40px; margin-bottom: 20px;">
Progressive vs Non-Progressive
</h2>
<div class="comparison">
<div class="bad-practice">
<h4>❌ Non-Progressive</h4>
<div class="example-code" style="font-size: 0.75rem;">
<!-- Requires JavaScript -->
<div onclick="loadContent()">
Click to load
</div>
<script>
// Nothing works without JS
</script>
</div>
<p style="color: #6b7280; font-size: 0.9rem; margin-top: 10px;">
Breaks completely if JS fails or is disabled
</p>
</div>
<div class="good-practice">
<h4>✅ Progressive</h4>
<div class="example-code" style="font-size: 0.75rem;">
<!-- Works with or without JS -->
<a href="/content">
Load Content
</a>
<script>
// Enhance with AJAX if supported
</script>
</div>
<p style="color: #6b7280; font-size: 0.9rem; margin-top: 10px;">
Works everywhere, enhanced where possible
</p>
</div>
</div>
<div style="background: #f0fdf4; padding: 20px; border-radius: 12px; border-left: 4px solid #10b981; margin-top: 30px;">
<h3 style="color: #065f46; margin-bottom: 10px;">💡 Key Principles</h3>
<ul style="list-style: none; line-height: 2; color: #166534;">
<li>✓ Start with semantic HTML</li>
<li>✓ Add CSS for visual enhancement</li>
<li>✓ Use JavaScript for interactivity</li>
<li>✓ Each layer enhances the previous one</li>
<li>✓ Site works without upper layers</li>
<li>✓ Feature detection over browser detection</li>
</ul>
</div>
</div>
</body>
</html>Loading preview...
Semantic HTML that works everywhere, even in text browsers
Visual styling that degrades gracefully
Interactive features that enhance the experience