Build modern, accessible, performant user interfaces.
3 topics
The internet is a global network of interconnected computers that communicate using standardized protocols. When you type a URL into your browser, a DNS lookup translates the domain name into an IP address, your browser opens a TCP connection to the server, sends an HTTP request, and receives a response containing HTML, CSS, and JavaScript. Understanding this request-response lifecycle — including how data travels through routers, how DNS resolution works, and what happens at each layer of the TCP/IP stack — is foundational knowledge for every frontend developer.
3 resources
HTTP (HyperText Transfer Protocol) is the foundation of data communication on the web. It defines how messages are formatted and transmitted between clients and servers. You need to understand HTTP methods (GET, POST, PUT, DELETE, PATCH), status codes (200, 301, 404, 500), request and response headers, cookies, caching headers (Cache-Control, ETag), and CORS (Cross-Origin Resource Sharing). HTTPS adds TLS encryption on top of HTTP, ensuring data integrity and confidentiality. Modern browsers now require HTTPS for many APIs like geolocation and service workers.
Modern browsers are incredibly complex pieces of software. When a browser receives an HTML document, it goes through several stages: parsing HTML into a DOM tree, parsing CSS into a CSSOM tree, combining them into a render tree, calculating layout (where each element goes), painting pixels, and compositing layers. Understanding this critical rendering path helps you write performant code. You should know how JavaScript can block parsing, why CSS is render-blocking, how the browser handles reflows and repaints, and how GPU compositing layers work. This knowledge directly impacts Core Web Vitals scores.
4 topics
Semantic HTML means using HTML elements for their intended purpose rather than just for visual presentation. Instead of using <div> for everything, you use elements like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> to give meaning and structure to your content. This improves accessibility (screen readers understand the document outline), SEO (search engines better understand your content), and maintainability (developers can read the intent of your markup). You should understand heading hierarchy (h1-h6), when to use <p> vs <span>, proper list usage, and how to structure a document with semantic landmarks.
2 resources
HTML forms are the primary way users interact with web applications. You should master all input types (text, email, password, number, date, file, checkbox, radio, range, color), understand the <label> element and how to associate it with inputs for accessibility, use <fieldset> and <legend> for grouping, and leverage built-in validation attributes like required, minlength, maxlength, pattern, min, max, and step. HTML5 provides native constraint validation with the Constraint Validation API, letting you show custom error messages without JavaScript. Understanding form submission (action, method, enctype) and the FormData API is essential for handling user input.
Web accessibility means making your websites usable by everyone, including people with visual, auditory, motor, or cognitive disabilities. The Web Content Accessibility Guidelines (WCAG) provide a framework with three conformance levels (A, AA, AAA). Key practices include: proper heading hierarchy, descriptive alt text for images, keyboard navigation support for all interactive elements, sufficient color contrast ratios (at least 4.5:1 for normal text), ARIA attributes (roles, states, properties) when native HTML semantics are insufficient, focus management for modals and dynamic content, and skip navigation links. Screen reader testing with tools like VoiceOver, NVDA, or JAWS should be part of your workflow.
Search Engine Optimization starts with good HTML. Use proper meta tags including <title>, <meta name="description">, canonical URLs, and Open Graph tags for social sharing. Implement structured data (JSON-LD) to help search engines understand your content — this enables rich snippets in search results. Semantic HTML, heading hierarchy, descriptive link text, and proper image alt attributes all contribute to SEO. Ensure your site has a proper sitemap.xml, robots.txt, and uses clean URL structures. Mobile-friendliness and Core Web Vitals (LCP, FID, CLS) are now ranking factors in Google.
5 topics
Every element in CSS is a rectangular box. The CSS Box Model consists of content, padding, border, and margin — and understanding how these interact is fundamental to layout. The display property (block, inline, inline-block, none, flex, grid) controls how an element participates in layout. The position property (static, relative, absolute, fixed, sticky) determines how an element is positioned in the document flow. You should understand how margin collapsing works, the difference between box-sizing: content-box and border-box (and why border-box is preferred), how z-index stacking contexts work, and how overflow controls clipping behavior.
Flexbox is a one-dimensional layout method for arranging items in rows or columns. It excels at distributing space and aligning content. Key properties on the container include display: flex, flex-direction, justify-content (main axis alignment), align-items (cross axis alignment), flex-wrap, and gap. On items, you use flex-grow, flex-shrink, flex-basis (or the shorthand flex), align-self, and order. Flexbox solves classic layout problems like centering elements, creating equal-height columns, building navigation bars, and managing card layouts. Understanding the difference between the main axis and cross axis is key to mastering flexbox.
CSS Grid is a two-dimensional layout system that lets you control both rows and columns simultaneously. It is ideal for page-level layouts and complex component grids. Key concepts include defining tracks with grid-template-columns and grid-template-rows (using units like fr, auto, minmax(), repeat()), placing items with grid-column and grid-row, creating named grid areas with grid-template-areas, and controlling spacing with gap. Grid enables layouts that were previously impossible or required hacks — like overlapping elements, asymmetric grids, and content that adapts to available space. Use Grid for two-dimensional layouts and Flexbox for one-dimensional ones.
Responsive design ensures your website looks and works great on any device, from phones to ultrawide monitors. The mobile-first approach means writing base styles for mobile, then adding complexity with min-width media queries for larger screens. Key techniques include: fluid typography using clamp(), responsive images with srcset and the <picture> element, CSS custom properties for theme tokens, container queries for component-level responsiveness, and logical properties (inline/block) for internationalization. You should understand breakpoint strategies, the viewport meta tag, and how to test across devices. Frameworks like Tailwind CSS provide utility classes (sm:, md:, lg:) that make responsive design much faster.
Tailwind CSS is a utility-first CSS framework that lets you style elements by composing small, single-purpose classes directly in your HTML. Instead of writing custom CSS, you use classes like flex, items-center, gap-4, bg-blue-500, text-white, rounded-lg, and hover:bg-blue-600. Tailwind provides a comprehensive design system out of the box — spacing scale, color palette, typography, shadows, and more — while being fully customizable via tailwind.config. It integrates with PostCSS, supports dark mode, has responsive variants (sm:, md:, lg:), and purges unused styles in production for minimal bundle size. The @apply directive lets you extract reusable component styles when needed.
JavaScript is the programming language of the web. Start with understanding variables (let, const — avoid var), data types (strings, numbers, booleans, null, undefined, symbols, BigInt), operators, control flow (if/else, switch, ternary), and loops (for, while, for...of, for...in). Functions are first-class citizens in JavaScript — learn function declarations, expressions, arrow functions, default parameters, rest parameters, and the spread operator. Understand scope (block, function, global), hoisting behavior, and how closures work. Template literals, destructuring assignment, and optional chaining (?.) are essential modern syntax features you will use daily.
The Document Object Model (DOM) is a tree-like representation of your HTML that JavaScript can interact with. You can query elements using document.querySelector and querySelectorAll, modify content with textContent and innerHTML, change styles and classes, and create or remove elements dynamically. The event system is how your page responds to user interaction — clicks, key presses, form submissions, scroll, and more. Understand event bubbling (events propagate up from target to root), capturing (propagation from root to target), event delegation (attaching a single listener to a parent), and how to use preventDefault() and stopPropagation(). The MutationObserver and IntersectionObserver APIs are powerful tools for advanced DOM interactions.
JavaScript is single-threaded but handles asynchronous operations through an event loop. Promises represent a value that may be available now, in the future, or never. A Promise is either pending, fulfilled, or rejected. The async/await syntax makes asynchronous code read like synchronous code. You should understand: the event loop and microtask queue, creating and chaining Promises, error handling with try/catch and .catch(), Promise.all() for parallel execution, Promise.race() for first-to-resolve, Promise.allSettled() for waiting on all regardless of outcome, and the Fetch API for making HTTP requests. Understanding how JavaScript handles concurrency is crucial for building responsive UIs that fetch data, handle timers, and process user interactions without freezing.
JavaScript modules let you split code into separate files that can import and export functionality. ES Modules (ESM) use import/export syntax and are the standard in modern JavaScript. Bundlers take your module graph and produce optimized bundles for the browser. Vite is the modern standard — it uses native ESM during development for instant hot module replacement (HMR) and Rollup for production builds. Understand how tree-shaking eliminates unused code, code-splitting creates separate chunks for lazy loading, and dynamic imports (import()) let you load modules on demand. Other tools in the ecosystem include esbuild (extremely fast bundler), Webpack (legacy but widely used), and Turbopack (Next.js bundler).
TypeScript is a typed superset of JavaScript that adds static type checking at compile time. It catches bugs before they reach production, provides better editor support (autocomplete, refactoring, inline errors), and serves as living documentation for your codebase. Key concepts include: basic types (string, number, boolean, arrays), interfaces and type aliases for defining object shapes, union and intersection types, generics for reusable typed functions and components, enums, utility types (Partial, Required, Pick, Omit, Record), and type narrowing with type guards. TypeScript is now the industry standard for frontend development — React, Next.js, and most modern libraries are written in or fully support TypeScript.
React is the most widely used JavaScript library for building user interfaces. It uses a component-based architecture where your UI is composed of reusable, self-contained pieces. React uses a virtual DOM for efficient updates and one-way data flow for predictability. Core concepts include: JSX (writing HTML-like syntax in JavaScript), props (passing data to child components), state (component-level reactive data with useState), side effects (useEffect for data fetching, subscriptions, and DOM manipulation), context (sharing state across the component tree without prop drilling), and refs (accessing DOM nodes directly). The React ecosystem is vast — including routing, state management, form handling, and animation libraries.
Next.js is the leading React framework for production applications. It provides server-side rendering (SSR), static site generation (SSG), React Server Components (RSC), API routes, file-based routing, image optimization, and built-in performance optimizations. The App Router (introduced in Next.js 13) uses a layouts-based architecture with nested routes, loading states, error boundaries, and parallel routes. Server Components run on the server and send only HTML to the client, dramatically reducing JavaScript bundle size. You should understand the difference between Server and Client Components, data fetching with fetch in Server Components, route handlers for APIs, middleware, and deployment on Vercel or self-hosted environments.
As your application grows, managing state becomes one of the biggest challenges. Local state (useState) works for component-level data, but shared state needs a strategy. React Context is built-in and works well for rarely-changing data (themes, auth). For complex state, Zustand is the modern favorite — it is simple, performant, and works outside React components. Redux Toolkit (RTK) remains popular in large enterprise apps with its opinionated structure, RTK Query for data fetching, and powerful DevTools. Jotai and Recoil offer atomic state management. The key is choosing the right tool: use local state first, lift state up when needed, add context for cross-cutting concerns, and reach for Zustand/Redux only when complexity demands it.
Forms are one of the most complex parts of frontend development. React Hook Form is the industry standard — it uses uncontrolled components under the hood for performance, provides a simple API (useForm, register, handleSubmit), supports nested fields, dynamic arrays (useFieldArray), and integrates with UI libraries. Zod is a TypeScript-first schema validation library that pairs perfectly with React Hook Form. You define schemas that validate, transform, and type your data simultaneously. Together, they provide end-to-end type safety from form input to API call. Other options include Formik (older but established), Yup (validation library), and server-side validation with the same Zod schemas for full-stack type safety.
Testing ensures your code works correctly and prevents regressions when you make changes. Unit tests verify individual functions and components in isolation using tools like Vitest or Jest. Integration tests verify that multiple units work together — Testing Library lets you test React components the way users interact with them (by text, role, label) rather than implementation details. End-to-end (E2E) tests simulate real user flows across the full application using Playwright or Cypress. A good testing strategy follows the testing pyramid: many fast unit tests, fewer integration tests, and a handful of E2E tests for critical paths. Test-driven development (TDD) means writing tests before implementation, which often leads to better-designed code.
Web performance directly impacts user experience, conversion rates, and SEO rankings. Core Web Vitals measure three key metrics: Largest Contentful Paint (LCP — loading speed), First Input Delay (FID — interactivity), and Cumulative Layout Shift (CLS — visual stability). Optimization techniques include: lazy loading images and components with React.lazy and Suspense, code-splitting to reduce initial bundle size, optimizing images with next/image or modern formats (WebP, AVIF), using proper caching headers, minimizing third-party scripts, deferring non-critical CSS, and leveraging CDNs. Tools like Lighthouse, PageSpeed Insights, and Chrome DevTools Performance tab help identify bottlenecks. React-specific optimizations include memo, useMemo, useCallback, and virtualization for long lists.
Deploying a frontend application means making it available to users on the internet. Vercel is the most popular platform for Next.js apps — it provides instant deploys from Git, preview deployments for every PR, edge functions, and analytics. Netlify is another excellent option with similar features. Cloudflare Pages offers edge-first deployment with Cloudflare Workers integration. For self-hosting, you can deploy to AWS (S3 + CloudFront for static, ECS/EC2 for SSR), or use Docker containers. Your deployment pipeline should include: automatic deploys on push to main, preview deployments for pull requests, environment variables management, build caching, and rollback capability. CDN distribution ensures your assets are served from the closest edge location to your users.