Cheatsheet HTML, CSS & JavaScript: Referensi Cepat Web Development

Cheatsheet ini adalah referensi cepat dan komprehensif untuk tiga pilar web development: HTML5, CSS3, dan JavaScript (ES6+). Bagian HTML mencakup semantic tags dan elemen penting untuk aksesibilitas dan SEO. Bagian CSS membahas Flexbox, Grid, Variables, dan responsive design. Bagian JavaScript mencakup array methods modern, Fetch API, DOM manipulation, dan async/await. Setiap contoh kode dirancang untuk langsung bisa dipakai di project nyata. Cocok untuk pemula yang baru belajar web development maupun developer berpengalaman yang butuh referensi cepat saat coding.

📋 HTML5 Semantic Tags

Tag	Fungsi	Contoh
`<header>`	Header section	Logo, nav, title
`<nav>`	Navigation	Main menu
`<main>`	Main content	Page body
`<article>`	Standalone content	Blog post, tutorial
`<section>`	Thematic group	Chapter, feature
`<aside>`	Sidebar content	Related links, ads
`<footer>`	Footer section	Copyright, links
`<figure>`	Media container	Image + caption

📦 CSS Flexbox

/* Container */
display: flex;
flex-direction: row | column;
justify-content: flex-start | center | space-between | space-around;
align-items: stretch | center | flex-start | flex-end;
flex-wrap: wrap | nowrap;
gap: 16px;

/* Item */
flex: 1;              /* grow:1, shrink:1, basis:0 */
flex: 0 0 300px;      /* no grow/shrink, fixed 300px */
order: -1;            /* reorder items */
align-self: center;   /* override parent align */

📦 CSS Grid

/* Container */
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
grid-template-areas:
  "header header"
  "sidebar main"
  "footer footer";

/* Item */
grid-column: 1 / 3;   /* span 2 columns */
grid-area: header;     /* use named area */

⚡ JavaScript Array Methods

const arr = [1, 2, 3, 4, 5];

arr.map(x => x * 2)           // [2, 4, 6, 8, 10]
arr.filter(x => x > 3)        // [4, 5]
arr.reduce((a, b) => a + b, 0) // 15
arr.find(x => x > 3)          // 4
arr.findIndex(x => x > 3)     // 3
arr.some(x => x > 4)          // true
arr.every(x => x > 0)         // true
arr.includes(3)               // true
arr.sort((a, b) => b - a)     // Descending
arr.flat()                     // Flatten nested

🔧 Fetch API

// GET
const res = await fetch("https://api.example.com/data");
const data = await res.json();

// POST
const res = await fetch("https://api.example.com/users", {
  method: "POST",
  headers: {"Content-Type": "application/json"},
  body: JSON.stringify({name: "Budi", age: 25})
});

// Error handling
if (!res.ok) throw new Error(`HTTP ${res.status}`);

🎨 CSS Variables

:root {
  --primary: #3ecf8e;
  --bg: #08090a;
  --text: #e4e4e7;
  --radius: 8px;
}
.element {
  color: var(--primary);
  background: var(--bg);
  border-radius: var(--radius, 4px); /* fallback */
}

📱 Responsive Design (Media Queries)

/* Mobile First Approach */
.container {
  padding: 16px;
  font-size: 14px;
}

/* Tablet (768px+) */
@media (min-width: 768px) {
  .container {
    padding: 24px;
    font-size: 16px;
    max-width: 720px;
    margin: 0 auto;
  }
  .sidebar { display: block; width: 250px; }
}

/* Desktop (1024px+) */
@media (min-width: 1024px) {
  .container { max-width: 960px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Print */
@media print {
  .no-print { display: none; }
  body { font-size: 12pt; color: #000; }
}

🎯 JavaScript DOM Manipulation

// Select elements
const el = document.querySelector(".card");
const all = document.querySelectorAll(".card");
const byId = document.getElementById("app");

// Modify content
el.textContent = "Hello World";
el.innerHTML = "<strong>Bold</strong>";
el.setAttribute("data-id", "123");
el.classList.add("active");
el.classList.toggle("hidden");
el.style.color = "red";

// Create & append
const div = document.createElement("div");
div.className = "card";
div.textContent = "New card";
document.body.appendChild(div);

// Event listener
el.addEventListener("click", (e) => {
  e.preventDefault();
  console.log("Clicked!", e.target);
});

// Event delegation (efficient for many items)
document.querySelector(".list").addEventListener("click", (e) => {
  if (e.target.matches(".list-item")) {
    console.log("Item clicked:", e.target.dataset.id);
  }
});

⏳ Async/Await & Error Handling

// Async function
async function fetchUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const user = await res.json();
    return user;
  } catch (err) {
    console.error("Gagal fetch user:", err.message);
    return null;
  }
}

// Parallel requests
async function fetchAll() {
  const [users, posts] = await Promise.all([
    fetch("/api/users").then(r => r.json()),
    fetch("/api/posts").then(r => r.json())
  ]);
  return { users, posts };
}

// Loading state pattern
async function loadData() {
  const btn = document.querySelector("#loadBtn");
  btn.disabled = true;
  btn.textContent = "Loading...";
  try {
    const data = await fetchUser(1);
    renderUser(data);
  } finally {
    btn.disabled = false;
    btn.textContent = "Load";
  }
}

🏗️ HTML Form & Input Types

<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" required placeholder="user@mail.com">

  <label for="pass">Password:</label>
  <input type="password" id="pass" minlength="8" required>

  <label for="date">Tanggal:</label>
  <input type="date" id="date">

  <label for="range">Skor (0-100):</label>
  <input type="range" id="range" min="0" max="100">

  <label for="file">Upload:</label>
  <input type="file" id="file" accept=".pdf,.jpg,.png">

  <select id="role">
    <option value="">Pilih role...</option>
    <option value="admin">Admin</option>
    <option value="user">User</option>
  </select>

  <button type="submit">Kirim</button>
</form>

💡 Tips & Best Practices

📋 Semantic HTML: Selalu gunakan semantic tags (<header>, <nav>, <main>, <article>, <footer>) bukan <div> semata. Ini meningkatkan aksesibilitas untuk screen reader, membantu SEO karena search engine lebih mudah memahami struktur halaman, dan membuat kode lebih mudah dibaca developer lain.

📦 Flexbox vs Grid: Gunakan Flexbox untuk layout satu dimensi (baris ATAU kolom) seperti navbar, card row, atau centering. Gunakan Grid untuk layout dua dimensi (baris DAN kolom) seperti page layout, dashboard, atau image gallery. Keduanya bisa digabung — Grid untuk page structure, Flexbox untuk komponen di dalamnya.

⚡ JavaScript Performance: Hindari manipulasi DOM berulang — batch perubahan sekaligus. Gunakan DocumentFragment untuk menambah banyak elemen. Gunakan requestAnimationFrame() untuk animasi, bukan setInterval(). Debounce event handler yang sering terpicu (scroll, resize, input).

🎨 CSS Specificity: Hindari !important — ini tanda specificity yang buruk. Hindari juga inline style. Gunakan class selector dan BEM naming convention untuk menghindari konflik. Urutan specificity: element < class < ID < inline < !important.

🔒 Security: Jangan gunakan innerHTML untuk menampilkan user input — gunakan textContent untuk mencegah XSS. Selalu validate input di sisi server, bukan hanya client-side. Gunakan Content-Security-Policy header.

📱 Mobile First: Selalu tulis CSS mobile-first: style dasar untuk mobile, lalu override dengan @media (min-width: ...) untuk layar lebih besar. Ini menghasilkan CSS yang lebih ringan dan pengalaman mobile yang lebih baik.

📌 Kapan Menggunakan Fitur Mana?

Kebutuhan	Teknologi	Contoh Kode
Layout satu baris/kolom	Flexbox	`display: flex; gap: 16px;`
Layout 2D (grid halaman)	CSS Grid	`grid-template-columns: repeat(3, 1fr)`
Centering elemen	Flexbox	`display:flex; justify-content:center; align-items:center;`
Ambil data dari API	Fetch + async/await	`const data = await fetch(url).json()`
Manipulasi array data	Array methods	`.filter().map().reduce()`
Ubah tampilan elemen	classList	`el.classList.toggle("active")`
Simpan state/theme	localStorage	`localStorage.setItem("theme", "dark")`
Kirim form tanpa reload	FormData + Fetch	`new FormData(form)` + POST
Animasi performant	CSS transition	`transition: transform 0.3s ease`
Aksesibilitas	ARIA attributes	`aria-label="Tutup menu"`