Master Answer Key & Solutions Reference (Hinglish)
Ye document sabhi 300 progressive exercises ke verified code solutions aur technical logic explanations ka complete master reference hai.
Module 01: Basic HTML Solutions (EX-BHTML-01 se 40)
EX-BHTML-01: HTML5 Standards Skeleton
html
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mera Webpage</title>
</head>
<body>
</body>
</html>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"lagane se naya pagewindow.openeraccess nahi kar pata, jisse site safe rehti hai.
EX-BHTML-03: Accessible Data Table
html
<table>
<caption>Quarterly Sales Report</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>Module 02: Advanced HTML Solutions (EX-AHTML-01 se 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>Module 03: Basic CSS Solutions (EX-BCSS-01 se 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%);
}Module 04: Advanced CSS Solutions (EX-ACSS-01 se 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);
}Module 05: Basic JavaScript Solutions (EX-BJS-01 se 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();
});Module 06: Advanced JavaScript Solutions (EX-AJS-01 se 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
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;
}
}