HTML, CSS & JavaScript

1<header>
2  <nav aria-label="Main">
3    <a href="/">Home</a>
4    <a href="/shop" aria-current="page">Shop</a>
5  </nav>
6</header>
7<main>
8  <h1>Running shoes</h1>
9  <img src="/img/shoe.webp" alt="Blue running shoe, side view" width="640" height="480" />
10  <form action="/subscribe" method="post">
11    <label for="email">Email</label>
12    <input id="email" name="email" type="email" autocomplete="email" required />
13    <button type="submit">Subscribe</button>
14  </form>
15</main>

1:root {
2  --space-2: 0.5rem;
3  --space-4: 1rem;
4  --radius: 12px;
5  --color-surface: #ffffff;
6}
7*, *::before, *::after {
8  box-sizing: border-box;
9}
10.card {
11  padding: var(--space-4);
12  border: 1px solid #dddddd;
13  border-radius: var(--radius);
14  background: var(--color-surface);
15}
16 
17.card:focus-visible {
18  outline: 2px solid #4f46e5;
19  outline-offset: 2px;
20}

1/* Flexbox: a toolbar with items on both ends */
2.toolbar {
3  display: flex;
4  align-items: center;
5  justify-content: space-between;
6  gap: 1rem;
7  flex-wrap: wrap;
8}
9 
10/* Grid: responsive cards without media queries */
11.products {
12  display: grid;
13  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
14  gap: 1.5rem;
15}

1<meta name="viewport" content="width=device-width, initial-scale=1" />
2 
3<style>
4  h1 { font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem); }
5 
6  .layout { display: grid; gap: 1rem; }
7  @media (min-width: 768px) {
8    .layout { grid-template-columns: 240px 1fr; }
9  }
10 
11  .card-wrap { container-type: inline-size; }
12  @container (min-width: 420px) {
13    .card { display: flex; gap: 1rem; }
14  }
15</style>
16 
17<img src="/img/hero-800.webp" srcset="/img/hero-400.webp 400w, /img/hero-800.webp 800w, /img/hero-1600.webp 1600w"
18     sizes="(min-width: 768px) 50vw, 100vw" width="800" height="450" alt="Product on a desk" loading="lazy" />

1<ul id="cart">
2  <li>Coffee beans <button data-id="101" class="remove">Remove</button></li>
3  <li>Filter papers <button data-id="102" class="remove">Remove</button></li>
4</ul>
5<p id="status" role="status"></p>
6 
7<script type="module">
8  const cart = document.querySelector("#cart");
9  const status = document.querySelector("#status");
10 
11  // One listener for every current and future button (delegation)
12  cart.addEventListener("click", (event) => {
13    const button = event.target.closest("button.remove");
14    if (!button) return;
15    button.closest("li").remove();
16    status.textContent = `Item ${button.dataset.id} removed`; // safe: no innerHTML
17  });
18</script>

1async function searchProducts(query, signal) {
2  const res = await fetch(
3    `https://api.example.com/products?q=${encodeURIComponent(query)}`,
4    { headers: { Accept: "application/json" }, signal }
5  );
6  if (!res.ok) throw new Error(`Request failed: ${res.status}`);
7  return res.json();
8}
9 
10let controller;
11document.querySelector("#search").addEventListener("input", async (e) => {
12  controller?.abort(); // cancel the previous, now outdated request
13  controller = new AbortController();
14  try {
15    const results = await searchProducts(e.target.value, controller.signal);
16    console.log(results);
17  } catch (err) {
18    if (err.name !== "AbortError") console.error(err);
19  }
20});

1// Layout thrashing: read, write, read, write... forces layout each time
2for (const card of cards) {
3  card.style.height = card.offsetWidth * 0.75 + "px";
4}
5 
6// Better: batch all reads, then all writes
7const widths = cards.map((card) => card.offsetWidth);
8cards.forEach((card, i) => {
9  card.style.height = widths[i] * 0.75 + "px";
10});
11 
12// Best for this case: let CSS do it, no JavaScript at all
13// .card { aspect-ratio: 4 / 3; }
14 
15// Yield to the browser during long work so input stays responsive (INP)
16await new Promise((resolve) => setTimeout(resolve, 0));

1@layer reset, base, components, utilities;
2 
3@layer reset {
4  :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
5}
6@layer components {
7  .card { padding: var(--space-4); border-radius: var(--radius); }
8  .card:has(> img) { padding-top: 0; }               /* parent selector */
9  .field:has(input:user-invalid) { --border: #b91c1c; }
10}
11@layer utilities {
12  .p-0 { padding: 0; } /* wins over .card because of layer order */
13}
14 
15[data-theme="dark"] { --color-surface: #111318; --color-text: #e8e8ea; }
16 
17@media (prefers-reduced-motion: reduce) {
18  *, *::before, *::after { animation-duration: 0.01ms !important; transition: none !important; }
19}

1<button popovertarget="account-menu">Account</button>
2<div id="account-menu" popover>
3  <a href="/orders">Orders</a>
4  <a href="/settings">Settings</a>
5</div>
6 
7<button id="open-delete">Delete address</button>
8<dialog id="confirm-delete" aria-labelledby="confirm-title">
9  <h2 id="confirm-title">Delete this address?</h2>
10  <form method="dialog">
11    <button value="cancel">Cancel</button>
12    <button value="confirm">Delete</button>
13  </form>
14</dialog>
15<script type="module">
16  const dialog = document.querySelector("#confirm-delete");
17  document.querySelector("#open-delete").addEventListener("click", () => dialog.showModal());
18  dialog.addEventListener("close", () => console.log(dialog.returnValue));
19</script>

1# HTTP response header (one line in practice), nonce generated per request
2Content-Security-Policy:
3  default-src 'self';
4  script-src 'self' 'nonce-r4nd0m123' 'strict-dynamic';
5  style-src 'self';
6  img-src 'self' data: https://cdn.example.com;
7  frame-ancestors 'none';
8  base-uri 'self';
9  form-action 'self';
10 
11<!-- Static library from a CDN, verified by hash -->
12<script src="https://cdn.example.com/[email protected]/lib.min.js"
13        integrity="sha384-BASE64_HASH_OF_THE_FILE" crossorigin="anonymous" defer></script>