Frontend development cheat sheet (React)

1. 1How the web worksWhat happens between typing a URL and seeing a page: DNS, HTTP, HTTPS and how the browser turns bytes into pixels.7 concepts

   1. 1From URL to pageThe browser resolves the domain to an IP address with DNS, opens a connection (TCP or QUIC), negotiates TLS, sends an HTTP request, then parses the HTML…
   2. 2DNSThe internet's phone book: it turns a name like example.com into an IP address through a chain of resolvers, and caches the answer for the record's TTL (time…
   3. 3HTTP methodsThe verb of a request: GET reads, POST creates or triggers an action, PUT replaces, PATCH partially updates, DELETE removes.
   4. 4HTTP status codesThree digit results of a request: 2xx success (200 OK, 201 Created, 204 No Content), 3xx redirect (301, 304 Not Modified), 4xx client error (400, 401, 403, 404…
   5. 5HTTPS and TLSHTTP over TLS, which encrypts traffic and proves with a certificate that you are talking to the real domain.
   6. 6CORSBrowsers block JavaScript from reading responses from another origin (scheme, host and port) unless that server sends headers such as…
   7. 7Critical rendering pathThe browser builds the DOM from HTML and the CSSOM from CSS, combines them into a render tree, calculates layout (sizes and positions), paints pixels and…

   7 in this chapterOpen this chapter
2. 2Semantic HTML and accessibilityStructure a page with the right elements so browsers, search engines, keyboards and screen readers all understand it.7 concepts

   1. 1Semantic HTMLUsing elements for their meaning: header, nav, main, article, button, a, h1 to h6, ul, table, instead of generic div and span for…
   2. 2Accessible formsEvery input has a visible label tied to it with for and id (or by nesting), the right type and autocomplete, and errors linked with aria-describedby…
   3. 3Alt textThe alt attribute describes what an image communicates.
   4. 4Keyboard navigation and focusEverything interactive must be reachable with Tab in a logical order and show a visible focus style.
   5. 5ARIAAttributes such as role, aria-label, aria-expanded and aria-live that add or override accessibility information where HTML alone cannot express it.
   6. 6Headings and landmarksOne h1 per page and headings in order without skipping levels, plus landmark elements (header, nav, main, footer) that outline the page.
   7. 7Colour contrastWCAG AA asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and interface parts such as input borders and focus rings.

   7 in this chapterOpen this chapter
3. CSS and responsive layoutHow styles are chosen and boxes are sized, then Flexbox, Grid and mobile first layouts that hold up on any screen.8 conceptsOpens with credits
4. JavaScript: the languageThe core every framework builds on: values and types, scope and closures, this, and working with arrays and objects.7 conceptsOpens with credits
5. JavaScript in the browserUsing the language in a page: the DOM, events, asynchronous code, the event loop and talking to APIs with fetch.7 conceptsOpens with credits
6. Git, npm and build toolingVersion control, pull requests, packages and scripts, the Vite dev server and the browser DevTools that every frontend project runs on.8 conceptsOpens with credits
7. React and Next.jsComponents, state, effects and forms in React 19, then the Next.js App Router: file based routes, layouts, server and client components and server actions.11 conceptsOpens with credits
8. TypeScript and testingThe safety net every professional frontend shares: TypeScript in strict mode, linting and formatting, component tests with Vitest and end to end tests with Playwright.9 conceptsOpens with credits
9. Performance, accessibility and securityMaking an app fast and safe on the mid-range phones and patchy connections many users have: Core Web Vitals, loading strategy, caching, audits and browser security.10 conceptsOpens with credits
10. Ship a real productPutting it all together the way a team would: environment config, CI on every pull request, deploy previews, error tracking and learning from real users.9 conceptsOpens with credits
11. 11Glossary, A to ZEvery concept in the sheet and the smaller terms it uses, in one list.206 terms

HTML, CSS, JavaScript and a framework.