14 Production Cheat Sheets & Quick Lookups
A unified, copyable developer quick-reference library for rapid syntax lookups across modern web development.
Cheat Sheet Directory
- HTML Document & Essential Elements
- HTML Semantic Elements & Landmarks
- HTML Forms & Constraint Validation
- CSS Selectors & Specificity Table
- CSS Box Model & Unit Conversion
- CSS Flexbox Layout Matrix
- CSS Grid 2D Blueprint
- Modern CSS Functions & Layers
- JavaScript Core Syntax & Operators
- JavaScript Array Methods Reference
- JavaScript String & Math Methods
- JavaScript DOM & Event Types
- Async JavaScript & Fetch API
- HTTP Status Codes & REST Conventions
1. HTML Document & Essential Elements
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<!-- Visible content -->
</body>
</html>2. HTML Semantic Elements & Landmarks
<header>: Introductory content or navigational aid for a page or article.<nav>: Section containing major navigation links.<main>: Central content unique to the document (only one per page).<article>: Self-contained, independently distributable composition.<section>: Thematic grouping of content with an explicit heading.<aside>: Tangentially related content, sidebars, or callouts.<footer>: Copyright, author info, back-to-top links.<dialog>: Native modal dialog with.showModal().
3. HTML Forms & Constraint Validation
required: Field must not be empty on submit.type="email"/type="url"/type="number"/type="tel".pattern="[0-9]{5}": Regular expression matching constraint.minlength="8"/maxlength="64".min="1"/max="100"/step="0.01".autocomplete="current-password"/autocomplete="new-password".
4. CSS Selectors & Specificity Table
*: Universal (0-0-0-0)div,p,h1,::before: Elements & Pseudo-elements (0-0-0-1).btn,[type="text"],:hover,:focus: Classes, Attributes & Pseudo-classes (0-0-1-0)#header,#nav: IDs (0-1-0-0)style="...": Inline styles (1-0-0-0):where(): Zero specificity (0-0-0-0):has(),:is(): Specificity of their most specific argument.
5. CSS Box Model & Unit Conversion
- Universal Reset:
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 1rem= 16px (default browser root font size).1em= Current element font size.100vw/100vh= 100% of viewport width / height.100dvh= Dynamic viewport height (adjusts for mobile address bar).
6. CSS Flexbox Layout Matrix
css
.flex-container {
display: flex;
flex-direction: row | column;
justify-content: flex-start | center | flex-end | space-between | space-evenly;
align-items: stretch | center | flex-start | flex-end | baseline;
flex-wrap: nowrap | wrap;
gap: 16px;
}
.flex-item {
flex: 1 1 auto; /* grow shrink basis */
align-self: center;
}7. CSS Grid 2D Blueprint
css
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
grid-template-rows: auto 1fr auto;
gap: 20px;
}
.grid-item-span {
grid-column: span 2;
grid-row: span 2;
}8. Modern CSS Functions & Layers
clamp(1rem, 2.5vw, 2.5rem): Fluid scaling between minimum and maximum bounds.min(500px, 100%)/max(320px, 50vw).calc(100vh - 80px): Dynamic arithmetic calculation.@layer reset, base, components, utilities;: Explicit cascade priority control.@container (min-width: 400px): Responsive container query component adaptations.
9. JavaScript Core Syntax & Operators
- Variables:
const x = 10;(default),let y = 0;(mutable). Nevervar. - Equality: Always
===and!==. Never loose==. - Nullish Coalescing:
val ?? 'fallback'(triggers only on null/undefined). - Optional Chaining:
user?.profile?.address?.zip. - Ternary:
condition ? 'yes' : 'no'.
10. JavaScript Array Methods Reference
arr.map(fn): Transforms each element, returns new array of same length.arr.filter(fn): Returns new array of elements matching predicate condition.arr.reduce((acc, curr) => acc + curr, 0): Accumulates array to single value.arr.find(fn)/arr.findIndex(fn): Returns first matching element or its index.arr.some(fn)/arr.every(fn): Returns boolean if at least one / all match.[...arr].sort((a, b) => a - b): Numeric ascending sort on copy.
11. JavaScript String & Math Methods
str.trim()/str.toLowerCase()/str.toUpperCase().str.includes('sub')/str.startsWith('prefix')/str.endsWith('suffix').str.split(',')/arr.join(' - ').Math.floor(x)/Math.ceil(x)/Math.round(x)/Math.random().parseInt('42', 10)/parseFloat('3.14')/Number.isNaN(val).
12. JavaScript DOM & Event Types
javascript
// Selection
const btn = document.querySelector('.primary-btn');
const items = document.querySelectorAll('.list-item');
// Text & Classes
btn.textContent = 'Updated';
btn.classList.add('active');
btn.classList.toggle('dark');
// Event Listener
btn.addEventListener('click', (e) => {
console.log('Clicked:', e.target);
});13. Async JavaScript & Fetch API
javascript
async function getApiData(url) {
try {
const res = await fetch(url);
if (!res.ok) throw new Error(`HTTP Error: ${res.status}`);
return await res.json();
} catch (err) {
console.error('Fetch Failed:', err.message);
}
}14. HTTP Status Codes & REST Conventions
- 200 OK: Successful request.
- 201 Created: Resource created successfully via POST.
- 204 No Content: Action succeeded with no response body (DELETE).
- 301 Moved Permanently / 304 Not Modified (Browser cache hit).
- 400 Bad Request: Invalid client payload syntax.
- 401 Unauthorized: Authentication token required or invalid.
- 403 Forbidden: Authenticated, but lacking permission.
- 404 Not Found: Endpoint or resource does not exist.
- 500 Internal Server Error: Unhandled exception on backend.