Frontend Development
Master HTML, CSS, JavaScript, TypeScript, React, and modern frontend engineering. 14 phases from web foundations to interview preparation.
Your Progress
Complete all 14 phases to master this track
Master frontend development — 14 phases from HTML/CSS/JavaScript fundamentals to React, TypeScript, testing, and performance optimization.
Phase 1: Web Foundations
Understand the fundamentals of how the web works: client-server model, HTTP, browsers, and networking basics.
How the Web Works
Understand the client-server model, DNS, HTTP, and how browsers render pages.
Internet Basics
Learn how computers communicate over networks using packets, protocols, and IP addresses.
Browser Basics
Understand how browsers parse HTML, CSS, and JavaScript to render web pages.
HTTP
Master the HyperText Transfer Protocol: methods, headers, status codes, and request lifecycle.
HTTPS
Understand TLS/SSL, certificates, encryption, and why HTTPS is essential for security.
DNS
Learn how domain names are resolved to IP addresses through DNS hierarchy.
URLs
Understand URL structure: protocol, domain, path, query parameters, and fragments.
Request / Response
Master the HTTP request-response cycle including methods, headers, and body formats.
HTTP Methods
Compare GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS methods.
HTTP Status Codes
Know 2xx, 3xx, 4xx, and 5xx status codes and when to use each.
HTTP Headers
Master request and response headers for caching, content type, CORS, and security.
Cookies
Understand how cookies work, their properties, and security considerations.
Sessions
Learn session management, server-side sessions, and session-based authentication.
Local Storage
Use localStorage for client-side data persistence with key-value pairs.
Session Storage
Compare sessionStorage with localStorage and understand their different lifecycles.
CORS
Master Cross-Origin Resource Sharing: preflight requests, headers, and security implications.
Phase 2: HTML
Master HTML fundamentals, semantic elements, forms, accessibility, and SEO best practices.
HTML Fundamentals
Master HTML elements, attributes, nesting, and document structure.
Semantic HTML
Use semantic elements like header, nav, main, article, section for meaningful markup.
HTML Forms
Build forms with input types, validation attributes, and form submission handling.
Input Types
Master all HTML input types: text, email, password, number, date, file, and more.
Form Validation
Use built-in HTML5 validation with patterns, required fields, and custom constraints.
HTML Tables
Create accessible tables with thead, tbody, caption, and proper scope attributes.
Links and Navigation
Master anchor elements, relative vs absolute URLs, and navigation patterns.
Images
Use img, picture, and figure elements with srcset for responsive images.
Audio and Video
Embed media with audio and video elements, including accessibility considerations.
HTML Accessibility
Build accessible HTML with ARIA roles, alt text, and semantic structure.
SEO Fundamentals
Optimize HTML for search engines with meta tags, headings, and structured data.
DOM Structure
Understand how HTML becomes the Document Object Model in the browser.
Phase 3: CSS
Master CSS fundamentals, layout systems, responsive design, animations, and architecture patterns.
CSS Fundamentals
Master CSS syntax, selectors, properties, and the cascade.
CSS Selectors
Use element, class, ID, attribute, pseudo-class, and pseudo-element selectors.
Box Model
Understand margin, padding, border, content, and box-sizing: border-box.
Display Property
Compare block, inline, inline-block, none, flex, and grid display values.
CSS Positioning
Master static, relative, absolute, fixed, and sticky positioning.
Flexbox
Build one-dimensional layouts with flex containers, items, and alignment properties.
CSS Grid
Create two-dimensional layouts with grid template areas, columns, rows, and gaps.
Responsive Design
Build layouts that adapt to any screen size using modern CSS techniques.
Media Queries
Apply styles based on device characteristics like width, height, and orientation.
CSS Units
Compare px, em, rem, vw, vh, %, and other units for different use cases.
CSS Typography
Master font properties, line height, letter spacing, and web font loading.
CSS Colors
Use hex, RGB, HSL, opacity, and CSS custom properties for color management.
CSS Transitions
Animate property changes with transition timing, duration, and delay.
CSS Animations
Create keyframe animations with @keyframes, animation properties, and performance tips.
CSS Architecture
Organize CSS with BEM, CSS modules, and scalable architecture patterns.
Common CSS Interview Questions
Practice CSS layout challenges, centering techniques, and optimization questions.
Phase 4: JavaScript Fundamentals
Master JavaScript basics: variables, data types, operators, control flow, functions, and modules.
JavaScript Basics
Master variables, operators, control flow, and basic syntax.
Variables
Compare var, let, and const declarations, scoping rules, and best practices.
Data Types
Understand primitives (string, number, boolean, null, undefined, symbol, bigint) and objects.
Type Coercion
Understand implicit and explicit type conversion and comparison operators.
Operators
Master arithmetic, comparison, logical, bitwise, and nullish operators.
Conditions
Use if/else, switch, ternary, and short-circuit evaluation effectively.
Loops
Master for, while, do-while, for...of, for...in, and break/continue.
Functions
Define functions, understand scope, closures, and first-class functions.
Arrow Functions
Use concise arrow function syntax and understand lexical this binding.
Scope
Understand global, function, and block scope with lexical scoping rules.
Hoisting
Learn how variable and function declarations are hoisted to the top of their scope.
Closures
Master closures for data privacy, function factories, and memory management.
this Keyword
Understand how this binding works in different execution contexts.
Objects
Create objects, work with properties, methods, and object manipulation.
Arrays
Master array methods: push, pop, map, filter, reduce, find, and more.
Destructuring
Extract values from arrays and objects with destructuring assignment syntax.
Spread and Rest
Use spread operator for copying/expanding and rest for parameter gathering.
JavaScript Modules
Export and import code with ES modules for modular architecture.
Phase 5: Advanced JavaScript
Master the event loop, promises, async/await, prototypes, and memory management in JavaScript.
Execution Context
Understand how JavaScript creates and manages execution contexts.
Call Stack
Learn how the call stack manages function execution order.
Event Loop
Master the event loop: call stack, web APIs, callback queue, and microtask queue.
Microtasks
Understand Promise callbacks and microtask queue priority over macrotasks.
Macrotasks
Learn setTimeout, setInterval, and how macrotasks are scheduled.
Promises
Create and chain Promises, handle errors, and use Promise.all/race/allSettled.
Async / Await
Write asynchronous code with async/await syntax and error handling.
Fetch API
Make HTTP requests with fetch, handle responses, and work with JSON data.
Error Handling
Use try/catch/finally, custom errors, and error propagation strategies.
Debouncing
Implement debounce to limit function execution frequency during rapid events.
Throttling
Implement throttle to ensure function runs at most once per time interval.
Event Bubbling
Understand how events propagate from target to root in the DOM.
Event Capturing
Learn the capture phase of event propagation and when to use it.
Event Delegation
Use event bubbling to handle events efficiently on parent elements.
Prototype
Understand prototype-based inheritance and the prototype chain.
Prototype Chain
Learn how property lookup works through the prototype chain.
JavaScript Classes
Use ES6 class syntax for object-oriented programming patterns.
Garbage Collection
Understand how JavaScript manages memory with mark-and-sweep GC.
Memory Management
Prevent memory leaks by understanding references, closures, and event cleanup.
Phase 6: DOM
Master DOM manipulation, event handling, form handling, and browser rendering optimization.
DOM
Understand the Document Object Model as the browser's representation of HTML.
Selecting Elements
Use querySelector, querySelectorAll, getElementById, and other selectors.
Creating Elements
Dynamically create DOM elements with createElement and insertAdjacentHTML.
Updating Elements
Modify element content, attributes, styles, and classes dynamically.
Event Listeners
Attach and remove event listeners with addEventListener and removeEventListener.
DOM Event Delegation
Apply event delegation patterns for efficient event handling on dynamic content.
Form Handling
Intercept form submissions, validate inputs, and manage form state with JavaScript.
DOM Performance
Optimize DOM operations: batch updates, document fragments, and virtual scrolling.
Browser Rendering
Understand the rendering pipeline: parse, render tree, layout, paint, composite.
Reflow
Learn what triggers reflow and how to minimize layout thrashing.
Repaint
Understand repaint cycles and optimize for smooth visual updates.
Phase 7: TypeScript
Master TypeScript fundamentals, type system, generics, and integration with React.
TypeScript Fundamentals
Set up TypeScript, understand type annotations, and compile to JavaScript.
Types
Master TypeScript's type system: primitives, arrays, tuples, and special types.
Interfaces
Define object shapes with interfaces, optional properties, and extending interfaces.
Type Aliases
Create reusable type names with the type keyword for complex types.
Union Types
Combine multiple types with union (|) and narrow with type guards.
Intersection Types
Combine types with intersection (&) to create composite types.
Generics
Write reusable, type-safe code with generic functions, classes, and constraints.
Enums
Define enumerated constants with numeric and string enum patterns.
Type Narrowing
Use type guards, typeof, instanceof, and discriminated unions for safe narrowing.
Utility Types
Use Partial, Required, Pick, Omit, Record, and other built-in utility types.
Function Types
Type function parameters, return values, callbacks, and overloads.
TypeScript with React
Type React components, props, hooks, and event handlers with TypeScript.
Phase 8: React
Master React components, hooks, state management, rendering optimization, and performance patterns.
Why React
Understand React's component model, declarative UI, and virtual DOM benefits.
Components
Create functional and class components with proper structure and composition.
JSX
Write JSX syntax, embed expressions, and understand JSX compilation.
Props
Pass data between components with props, default values, and prop types.
State
Manage component state with useState, understand state updates, and immutability.
React Events
Handle user events in React with synthetic events and event handler patterns.
Conditional Rendering
Render different UI based on conditions with &&, ternary, and early returns.
Rendering Lists
Render arrays of data with map and handle dynamic lists efficiently.
Keys
Use keys correctly for list rendering and understand reconciliation.
React Forms
Build controlled and uncontrolled forms with proper state management.
Controlled Components
Manage form inputs with React state for full control over form data.
useState
Master the useState hook for local component state management.
useEffect
Handle side effects with useEffect, dependencies, and cleanup functions.
useRef
Use useRef for DOM references, mutable values, and avoiding re-renders.
useMemo
Optimize expensive computations with useMemo for performance.
useCallback
Stabilize function references with useCallback for child component optimization.
Custom Hooks
Extract reusable logic into custom hooks for cleaner component code.
Context API
Share state across components without prop drilling using React Context.
Component Composition
Design flexible UIs with composition patterns, render props, and children.
React Lifecycle
Understand mounting, updating, and unmounting phases in functional components.
React Rendering
Master the rendering process: state changes, reconciliation, and batching.
React Performance
Optimize React apps with memo, lazy loading, code splitting, and profiling.
Phase 9: Frontend Architecture
Design scalable frontend architectures with state management, API layers, authentication, and real-time updates.
Component Architecture
Design scalable component hierarchies with clear responsibilities.
State Management
Compare local state, context, Redux, and other state management solutions.
Server State vs Client State
Understand the difference and use appropriate tools for each.
API Layer
Design clean API abstraction layers for data fetching and mutation.
Authentication
Implement JWT, OAuth, and session-based authentication in SPAs.
Authorization
Control access with role-based and permission-based authorization patterns.
Error Handling Architecture
Design global error boundaries and error recovery strategies.
Loading States
Implement skeleton screens, spinners, and optimistic UI patterns.
Pagination
Build offset and cursor-based pagination with proper state management.
Infinite Scroll
Implement infinite scrolling with intersection observers and virtual lists.
Search
Build search interfaces with debouncing, indexing, and result ranking.
Filtering
Implement client-side and server-side filtering with URL state synchronization.
Sorting
Build sortable tables and lists with multi-column sort support.
Optimistic Updates
Update UI immediately before server confirmation for better UX.
Client-Side Caching
Cache API responses with stale-while-revalidate and cache invalidation.
Form Architecture
Design scalable forms with validation, state management, and submission handling.
File Uploads
Handle file uploads with drag-and-drop, progress tracking, and preview.
Real-time Updates
Implement WebSockets, SSE, and polling for live data updates.
Phase 10: Web Performance
Optimize web applications for speed: Core Web Vitals, code splitting, caching, and rendering strategies.
Core Web Vitals
Measure LCP, INP, CLS, and understand Google's performance metrics.
Largest Contentful Paint
Optimize LCP by improving server response, resource loading, and rendering.
Interaction to Next Paint
Minimize INP by optimizing event handlers and main thread work.
Cumulative Layout Shift
Prevent CLS with dimension attributes, font loading, and dynamic content.
Code Splitting
Split bundles with dynamic imports for faster initial page loads.
Lazy Loading
Defer non-critical resources with lazy loading for images, components, and routes.
Image Optimization
Optimize images with modern formats, responsive sizing, and CDN delivery.
Font Optimization
Load web fonts efficiently with font-display, subsetting, and preload.
Browser Caching
Leverage HTTP caching headers, service workers, and cache strategies.
CDN
Use Content Delivery Networks to serve static assets from edge locations.
Compression
Enable Gzip and Brotli compression for reduced transfer sizes.
Bundle Optimization
Minimize bundle size with tree shaking, dead code elimination, and analysis.
Rendering Strategies
Compare CSR, SSR, SSG, and ISR for different use cases.
Server-Side Rendering
Implement SSR for improved initial load time and SEO.
Client-Side Rendering
Understand CSR tradeoffs: faster interactivity but slower initial load.
Static Site Generation
Pre-render pages at build time for maximum performance.
Hydration
Understand how SSR content becomes interactive with client-side hydration.
Phase 11: Accessibility
Build accessible web applications that work for all users, including those using assistive technologies.
Semantic HTML for Accessibility
Use semantic elements to convey meaning to assistive technologies.
Keyboard Navigation
Ensure all interactive elements are accessible via keyboard.
Focus Management
Manage focus for modals, route changes, and dynamic content.
ARIA
Use ARIA roles, states, and properties to enhance accessibility.
Screen Readers
Build content that works with screen readers and assistive technology.
Color Contrast
Ensure sufficient contrast ratios for text and interactive elements.
Reduced Motion
Respect prefers-reduced-motion for users with vestibular disorders.
Accessible Forms
Build forms with proper labels, error messages, and ARIA attributes.
Accessibility Testing
Test accessibility with automated tools, manual testing, and screen readers.
Phase 12: Testing
Master frontend testing: unit tests, integration tests, component tests, and end-to-end testing.
Unit Testing
Write unit tests for JavaScript functions and utilities.
Integration Testing
Test component interactions and API integrations.
Component Testing
Test React components with React Testing Library.
End-to-End Testing
Write E2E tests with Playwright or Cypress for full user flows.
Test Strategy
Design a testing pyramid with unit, integration, and E2E tests.
Mocking
Mock APIs, modules, and browser APIs for isolated testing.
Testing Async Code
Test asynchronous operations with proper assertions and timeouts.
Frontend Testing Questions
Practice common frontend testing interview questions and patterns.
Phase 13: Frontend Security
Understand and prevent common web security vulnerabilities: XSS, CSRF, clickjacking, and more.
XSS
Understand Cross-Site Scripting attacks and prevention strategies.
CSRF
Prevent Cross-Site Request Forgery with tokens and SameSite cookies.
Clickjacking
Protect against clickjacking with X-Frame-Options and CSP.
Content Security Policy
Implement CSP headers to prevent code injection attacks.
Secure Cookies
Configure cookies with Secure, HttpOnly, SameSite, and Path attributes.
Token Storage
Store JWT tokens securely: httpOnly cookies vs memory storage.
Input Sanitization
Validate and sanitize user input to prevent injection attacks.
Authentication Security
Implement secure authentication with password hashing and MFA.
Frontend Security Questions
Practice common frontend security interview questions.
Phase 14: Frontend Interview Preparation
Synthesize frontend knowledge through practice exercises and mock interviews.