💻 Code Snippets
Practical, copy-paste ready code examples to accelerate your web development journey. Each snippet includes explanations and use cases.
JavaScript Closure
// See ./js/closure-example.js for the full runnable example
function outer() {
let count = 0;
return function() {
count++;
console.log(count);
}
}Closures allow inner functions to access variables from their outer scope, even after the outer function has finished executing. Perfect for counters, event handlers, and data privacy. (Full example in JS folder.)
CSS Flexbox Layout
.container {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}Use Flexbox for responsive layouts. This centers items horizontally and vertically with equal spacing between them.
HTML Semantic Structure
<header>
<h1>Site Title</h1>
</header>
<main>
<section>
<h2>Content</h2>
</section>
</main>
<footer>
<p>Copyright</p>
</footer>Semantic HTML improves accessibility and SEO. Use elements like <header>, <main>, and <footer> to structure your page meaningfully.
JavaScript Async/Await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
} catch (error) {
console.error('Error:', error);
}
}Handle asynchronous operations elegantly with async/await. This makes code more readable compared to promises.