14 Production Cheat Sheets & Quick Lookups (Hinglish)
Fast development aur revision ke liye HTML, CSS aur JavaScript ke 14 complete production cheat sheets.
Cheat Sheet Directory
- HTML Document & Essential Skeleton
- HTML Semantic Elements & Landmarks
- HTML Forms & Validation Attributes
- CSS Selectors & Specificity Matrix
- CSS Box Model & Units Calculation
- CSS Flexbox Layout Matrix
- CSS Grid 2D Blueprint
- Modern CSS Functions & Layers
- JavaScript Syntax & Operators
- JavaScript Array Methods Reference
- JavaScript String & Math Methods
- JavaScript DOM & Event Handling
- Async JavaScript & Fetch API
- HTTP Status Codes Reference
1. HTML Document & Essential 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 Page</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
</body>
</html>2. HTML Semantic Elements & Landmarks
<header>: Page ya article ka top introductory banner.<nav>: Navigation links ka group.<main>: Page ka main central content (poore page par sirf ek).<article>: Self-contained independent content (post, card).<section>: Thematic chapter ya section heading ke sath.<aside>: Sidebar ya related links.<footer>: Bottom copyright aur links.<dialog>: Native popup modal with.showModal().
3. HTML Forms & Validation Attributes
required: Field khali nahi hona chahiye.pattern="[0-9]{6}": Pincode/regex matching constraint.minlength="8"/maxlength="32".type="email"/type="tel"/type="number".
4. CSS Selectors & Specificity Matrix
*: Universal (0-0-0-0)div,p,h1,::before: Elements (0-0-0-1).btn,[type="text"],:hover: Classes (0-0-1-0)#header,#nav: IDs (0-1-0-0)style="...": Inline styles (1-0-0-0):where(): Specificity hamesha zero (0-0-0-0)
5. CSS Box Model & Units Calculation
- Universal Reset:
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 1rem= 16px (browser root font size).100vw/100vh= Screen ka 100% width aur height.100dvh= Mobile browser address bar ko handle karne wali dynamic height.
6. CSS Flexbox Layout Matrix
css
.flex-container {
display: flex;
flex-direction: row | column;
justify-content: flex-start | center | flex-end | space-between;
align-items: stretch | center | flex-start | flex-end;
gap: 16px;
}
.flex-item {
flex: 1 1 auto;
}7. CSS Grid 2D Blueprint
css
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
}8. Modern CSS Functions & Layers
clamp(1rem, 2.5vw, 2.5rem): Screen ke hisab se fluid typography scaling.@layer reset, base, components, utilities;: Specificity wars ko permanently solve karta hai.@container (min-width: 400px): Parent container ke size ke hisab se responsive changes.
9. JavaScript Syntax & Operators
const x = 10;(default),let y = 0;(changeable).varkabhi use na karein.- Comparision: Hamesha strict
===use karein. - Nullish Coalescing:
val ?? 'default'(sirf null/undefined par trigger hota hai). - Optional Chaining:
user?.profile?.address.
10. JavaScript Array Methods Reference
arr.map(fn): Data transform karke naya array banata hai.arr.filter(fn): Condition match hone wale items ka naya array banata hai.arr.reduce((acc, curr) => acc + curr, 0): Single total value calculate karta hai.arr.find(fn): Pehla matching element dhoondhta hai.[...arr].sort((a, b) => a - b): Ascending number sorting.
11. JavaScript String & Math Methods
str.trim()/str.toLowerCase()/str.toUpperCase().str.includes('search')/str.split(',').Math.floor(x)/Math.ceil(x)/Math.round(x)/Math.random().
12. JavaScript DOM & Event Handling
javascript
const btn = document.querySelector('.btn');
btn.textContent = 'Updated Text';
btn.classList.toggle('active');
btn.addEventListener('click', (e) => {
console.log('Button clicked:', e.target);
});13. Async JavaScript & Fetch API
javascript
async function loadData(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 Reference
- 200 OK: Success.
- 201 Created: POST se naya resource successfully create hua.
- 204 No Content: Action success, koi response body nahi (DELETE).
- 400 Bad Request: Client side validation fail hui.
- 401 Unauthorized: Login / Auth token zaroori hai.
- 403 Forbidden: Permission nahi hai.
- 404 Not Found: Page ya URL server par maujood nahi hai.
- 500 Internal Server Error: Backend server mein crash hua.