All 170 Frontend Tutorials

Most @font-face tutorials cover the basics and say 'add font-display: swap'. That's not wrong, but it's about 20% of what you need to know. This guide covers all 5 font-display values, variable font axes, font-synthesis: none, the Font Loading API, font-variant-numeric, modern system font stacks, the adjusted fallback pattern that eliminates layout shift, unicode-range, FOIT/FOUT/FOFT, preload's LCP trade-off, and whether you should still use local() .

async/await looks simple until it silently breaks — your function returns Promise {pending}, your forEach loop finishes before the data arrives, a 404 sails past your catch block, a search response from 2 seconds ago overwrites the one you wanted, or an error disappears with no trace. This guide shows 12 mistakes with the exact broken output, why it happens, and the precise fix.

Every tutorial explains what semantic HTML is. Almost none explain that <address> wrapping a postal address is wrong, that <cite> must not contain author names, that HTML5's heading outline algorithm was never implemented by a single browser, or how the First Rule of ARIA quietly justifies the entire reason you should be reading this. This is the guide that covers what others miss — including <em> vs <i>, the <details> exclusive-accordion pattern, the SPA multi-<main> trick, <kbd>/<samp>/<var>, <progress> vs <meter>, and <lang> on subtrees.

You know div, .class, and #id. But CSS has dozens of selectors that replace JavaScript event listeners, eliminate helper classes, and handle UI state in pure CSS. This guide covers the underused ones actually worth learning — :has(), :focus-within, :user-valid, :nth-child(of selector), :where()'s zero-specificity trick, the :checked + ~ state machine, :target for routable UI, @scope, :defined, :dir(), and more.

79.4% of websites use ARIA — and those sites have 2× more accessibility errors than sites without it. ARIA is the most powerful accessibility tool in HTML and the most dangerous. This guide shows the patterns that go catastrophically wrong, the role=menu trap, the aria-live timing pitfall, the aria-hidden + focus silent-screen-reader footgun, role=presentation cascading, mobile screen reader divergence, and the DevTools tree-debug workflow nobody documents.

Every AI agent tutorial uses Python, LangChain, or Mastra. This one doesn't. Build a complete ReAct agent from scratch in vanilla JavaScript — the actual while loop, Thought/Action/Observation cycle, memory, guardrails, parallel tool calls, hallucinated-tool-name protection, and a 20-line DIY observability trace, all in a streaming browser UI that shows the agent thinking in real time.

You write a rule that should win. It doesn't. You add !important. Now something else breaks. Specificity fights are the most common source of CSS frustration — and most tutorials only teach half the picture. This guide covers the complete system, including :is(), :where(), @layer, CSS Nesting's hidden specificity trap, and how Tailwind, Vue scoped styles, and CSS Modules each handle specificity differently.

Every AI PDF tutorial uses Python and LangChain. This one doesn't. Learn three pure JavaScript strategies for making AI read PDFs — direct text extraction, GPT-4o Vision for scanned documents, and structured JSON extraction — all in a single browser file. Plus the PDF.js worker gotchas, the API-key-in-the-browser elephant, and a free Tesseract.js OCR fallback nobody documents.

Most datalist tutorials show three lines of HTML and stop. Nobody explains how to detect when a user actually picked from the list, how to show a friendly label while submitting a hidden ID, or which iOS Safari versions silently break the whole feature. This is that tutorial.

Every tutorial shows you required and pattern then stops. Nobody explains why :invalid turns inputs red before the user touches them, how to fix it with :user-invalid, how autofill silently breaks validation, or how to validate all 11 ValidityState conditions. This is that tutorial.

Every Vercel AI SDK tutorial assumes Next.js. This one doesn't. Learn how to use AI SDK Core in a plain Node.js script, build a minimal Express server that streams to vanilla HTML, switch providers with one line, and generate structured JSON with Zod — zero framework required.

You can't write width: 100% - 32px in plain CSS — the browser doesn't know what 100% minus 32 pixels equals until layout time. calc() defers that calculation to the browser, solving it at render time when both values are known. No JavaScript needed.