Sefism Frontend Development Cheat Sheet

What it is

The Frontend development cheat sheet is the quick-revision companion to Sefism's Frontend development roadmap. It covers the web platform, HTML, CSS, JavaScript, tooling, your framework, TypeScript, testing, performance and shipping, in the order the roadmap teaches them.

Each concept is a compact card: what it is in plain words, why it matters or when to use it, a short code example where code helps, and the one mistake people usually make with it. It is meant for revision, not first learning: you meet each idea properly in the roadmap, then come back here to keep it sharp.

Three editions

The sheet has an edition for each framework the roadmap offers:

• React: React 19 with the Next.js App Router. 83 concepts.
• Vue: Vue 3 with the Composition API and Nuxt. 83 concepts.
• Angular: modern Angular with signals and standalone components. 81 concepts.

Nine chapters are shared by all three; one framework chapter changes with the edition, and so do a few of the tips. Switch editions if you move framework, and the rest of the sheet stays where you left it.

Chapter by chapter

1. How the web works

What happens between typing a URL and seeing a page: from URL to page, DNS, HTTP methods and status codes, HTTPS and TLS, CORS, and the critical rendering path.

2. Semantic HTML and accessibility

Semantic HTML, accessible forms, alt text, keyboard navigation and focus, ARIA, headings and landmarks, and colour contrast: structuring a page so browsers, search engines, keyboards and screen readers all understand it.

3. CSS and responsive layout

The box model, cascade and specificity, Flexbox, CSS Grid, mobile first design, relative units and clamp(), custom properties, and positioning and stacking.

4. JavaScript: the language

let, const and block scope, types, coercion and equality, closures, the this keyword, destructuring, spread and rest, array methods and ES modules.

5. JavaScript in the browser

The DOM, events and delegation, promises, async and await, the event loop, the Fetch API, and cookies and web storage.

6. Git, npm and build tooling

Commits and branches, merge and rebase, pull requests and code review, package.json and npm scripts, lockfiles, semantic versioning, Vite and the browser DevTools.

7. Your framework

• React and Next.js: components and props, useState, derived values, useEffect, lists and keys, forms and actions, context, App Router pages and layouts, server and client components, server actions, and rendering and caching in Next.js.
• Vue and Nuxt: single file components, template directives, ref and reactive, computed and watch, props, emits and v-model, slots, composables, Pinia, Nuxt pages and layouts, useFetch and useAsyncData, and SSR and client only code.
• Angular: standalone components, built in control flow, signals, inputs, outputs and model, change detection and zoneless apps, services and dependency injection, routing and lazy loading, reactive forms, and HttpClient with observables.

8. TypeScript and testing

Types, interfaces and unions, narrowing, generics, strict mode with any and unknown, typing component inputs and events, ESLint and Prettier, what to test at which level, component tests and end to end tests with Playwright.

9. Performance, accessibility and security

Core Web Vitals, image optimisation, web font loading, code splitting and lazy loading, preload, preconnect and prefetch, HTTP caching and CDNs, compression, accessibility audits, cross-site scripting and Content Security Policy.

10. Ship a real product

Environment variables in frontend builds, CI on every pull request, deploy previews, SPA, SSR and static rendering, error tracking and analytics, loading, empty and error states, scoping the core flows, getting feedback from real users and writing up a project.

Each chapter links up to three library resources for depth, such as MDN Web Docs, web.dev, JavaScript.info, the React documentation, the TypeScript Handbook, Playwright and Patterns.dev.

Rules of thumb worth remembering

The sheet closes with short rules, shared ones plus a few per edition, and a glossary of 142 terms. Some of the shared ones:

• Reach for the right HTML element before a div: a real button, a or label solves most accessibility problems for free.
• If a value can be calculated from existing state, calculate it instead of storing it.
• Check response.ok after every fetch, because HTTP errors do not reject the promise.
• Nothing in browser code is secret: API keys, feature flags and validation there can all be read and bypassed.
• Test what the user does, using roles and labels, not how components are wired inside.

Edition tips include pushing 'use client' down to the smallest interactive component in Next.js, preferring computed to watch in Vue, and using track with a stable id in every Angular @for.

How to use it with the roadmap

• After each stage: read the matching chapter and check you could explain every pitfall line. Stage 1 of the roadmap maps to chapters 1 to 3, stage 2 to chapters 4 and 5, and the rest line up one to one.
• Before a technical conversation: the JavaScript, framework and performance chapters are the ones to reread, with ideas you should be able to explain aloud, such as the event loop, closures, rendering and Core Web Vitals.
• While building: keep the framework chapter open. When a bug appears, check its pitfall line first; many common bugs, such as an unnecessary effect or a missing key, are listed there.
• When reviewing your own pull request: the security and shipping chapters work as a short checklist.

How it works on Sefism

Everything here is free to learn from. The public page lists every chapter title, with the first chapters open to read. Keeping the sheet uses credits, and new members get starting credits when they join. Adding the Frontend development roadmap to your dashboard (your first roadmap is free) opens this sheet with it. In the member area you can switch between the React, Vue and Angular editions and search across every concept.

Related on Sefism

• Web development habits that outlast the framework
• What to learn to become a web developer, and in what order
• Should I learn TypeScript or Python first?
• The Full stack development cheat sheet and the UI/UX design cheat sheet for the layers either side of this one

FAQ

Is this enough to learn React (or Vue, or Angular)? No. It is a revision sheet. Learn from the roadmap's stages and its official documentation picks, then use the sheet to remember.

Which React version does it cover? The React edition covers React 19 with the Next.js App Router.

Why is accessibility spread across several chapters? Because it is part of HTML, CSS, testing and auditing rather than a separate topic: chapter 2 covers the markup, and chapter 9 covers audits.