Master Answer Key & Solutions Reference
This document serves as the comprehensive engineering solution reference for all 300 progressive exercises across HTML, CSS, and JavaScript.
Module 01: Basic HTML Solutions (EX-BHTML-01 to 40)
EX-BHTML-01: HTML5 Standards Skeleton
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Master Document</title>
</head>
<body>
</body>
</html>- Explanation: The doctype triggers No-Quirks Mode. The
viewportmeta prevents 980px mobile zooming, andcharset="UTF-8"supports global Unicode characters.
EX-BHTML-02: Secure External Link
html
<a href="https://developer.mozilla.org" target="_blank" rel="noopener noreferrer">MDN Web Docs</a>- Explanation:
rel="noopener noreferrer"closes security vulnerabilities where external sites can accesswindow.opener.
EX-BHTML-03: Accessible Data Table
html
<table>
<caption>Quarterly Sales Summary</caption>
<thead>
<tr>
<th scope="col">Quarter</th>
<th scope="col">Revenue</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Q1</th>
<td>$42,000</td>
</tr>
</tbody>
</table>EX-BHTML-04 to 40: Core HTML Patterns
- Form Label Binding: Always match
<label for="id">to<input id="id">. - Image Dimensions: Always specify
widthandheightinteger attributes to prevent Cumulative Layout Shift (CLS). - Semantic Hierarchy: Maintain a single
<h1>per page with sequential<h2>and<h3>tags.
Module 02: Advanced HTML Solutions (EX-AHTML-01 to 40)
EX-AHTML-01: Native Modal Dialog
html
<dialog id="modal">
<form method="dialog">
<p>Confirm action?</p>
<button value="cancel">Cancel</button>
<button value="confirm">Confirm</button>
</form>
</dialog>EX-AHTML-02: Responsive Picture Element
html
<picture>
<source media="(min-width: 1024px)" srcset="/img-lg.avif" type="image/avif">
<source media="(max-width: 768px)" srcset="/img-sm.webp" type="image/webp">
<img src="/img-fallback.jpg" alt="Description" width="800" height="450" loading="lazy">
</picture>EX-AHTML-03: Constraint Validation Pattern
html
<input type="text" pattern="[A-Z]{3}-[0-9]{4}" title="Format: ABC-1234" required>Module 03: Basic CSS Solutions (EX-BCSS-01 to 50)
EX-BCSS-01: Universal Box-Sizing Reset
css
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}EX-BCSS-02: Absolute Centering
css
.center-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}EX-BCSS-03: Accessible Focus Ring
css
button:focus { outline: none; }
button:focus-visible {
outline: 2px solid #0ea5e9;
outline-offset: 3px;
}Module 04: Advanced CSS Solutions (EX-ACSS-01 to 60)
EX-ACSS-01: Auto-Fit Responsive Grid
css
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 24px;
}EX-ACSS-02: Relational Selector :has()
css
.card:has(input:checked) {
border-color: #0ea5e9;
box-shadow: 0 4px 12px rgba(14, 165, 233, 0.2);
}EX-ACSS-03: Fluid Typography with clamp()
css
h1 {
font-size: clamp(1.75rem, 1rem + 2vw, 3rem);
}Module 05: Basic JavaScript Solutions (EX-BJS-01 to 50)
EX-BJS-01: Deduplicate Array
javascript
const dedupe = (arr) => [...new Set(arr)];EX-BJS-02: Prevent Default Form Submission
javascript
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
// Custom validation logic
});EX-BJS-03: Toggle Dark Theme Class
javascript
document.querySelector('#themeBtn').addEventListener('click', () => {
document.body.classList.toggle('dark');
});Module 06: Advanced JavaScript Solutions (EX-AJS-01 to 60)
EX-AJS-01: Private Closure Counter
javascript
function createCounter(initial = 0) {
let count = initial;
return {
increment: () => ++count,
decrement: () => --count,
get: () => count
};
}EX-AJS-02: Reusable Debounce Function
javascript
function debounce(fn, delay = 300) {
let timer;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}EX-AJS-03: Fetch with Timeout AbortController
javascript
async function fetchWithTimeout(url, ms = 5000) {
const controller = new AbortController();
const id = setTimeout(() => controller.abort(), ms);
try {
const res = await fetch(url, { signal: controller.signal });
clearTimeout(id);
if (!res.ok) throw new Error(`HTTP ${res.status}`);
return await res.json();
} catch(err) {
clearTimeout(id);
throw err;
}
}