Frontend Developer Roadmap
This Frontend Developer Roadmap is a free, full-text syllabus of 120 lessons in 37 stages, starting with Internet and ending with Mobile Apps. It suits anyone working towards a Frontend role, from a first-year student to a working developer changing tracks. There is no fixed length: every lesson is open from the start, so you go at your own pace and skip what you already know.
Last updated
Reading is open to everyone. Sign in to join this roadmap and track what you finish.
Continue learning
1. InternetInternet
0%Internet
7 topics · 6 sub-topics · 0 completed
The diagram draws the same 120 lessons as a map, with lines showing the order. It needs JavaScript; the full syllabus below lists every lesson as text.
Full syllabus: every lesson in the Frontend roadmap
37 stages and 120 lessons, in the order the roadmap suggests. Every lesson is free to read and open from the start.
Stage 1: Internet
Internet
The Internet is a global network of interconnected computers using TCP/IP protocols, connecting billions of devices worldwide. Revolutionized communication, commerce, education, and entertainment. Enables web browsing, streaming, and diverse applications while presenting privacy and security challenges.
How does the internet work?
The internet is a global network connecting computers and devices for information sharing. Enables browsing, email, streaming, and communication through interconnected systems. Acts as worldwide infrastructure facilitating access to online resources and services.
What is HTTP?
HTTP (Hypertext Transfer Protocol) enables browser-server communication through requests and responses. Stateless protocol using methods like GET and POST. HTTPS provides encrypted security. Newer versions (HTTP/2, HTTP/3) offer improved performance. Fundamental for web development understanding.
What is Domain Name?
Domain names are human-friendly web addresses (e.g., google.com) substituting numerical IP addresses. Comprise second-level ("google") and top-level (".com") domains. Registered through registrars, essential for branding and online presence. DNS translates names to IP addresses for accessibility.
What is hosting?
Web hosting stores website files on servers, making sites accessible online. Types include shared (multiple sites per server) and dedicated (exclusive server) hosting. Providers offer additional services like email, domains, and security certificates. Critical for website performance and accessibility.
DNS and how it works?
DNS (Domain Name System) translates human-readable domain names into IP addresses through a global, decentralized server network. Enables easy internet navigation by converting names like www.example.com to numeric addresses browsers can connect to.
Browsers and how they work?
Web browsers request and display websites by interpreting HTML, CSS, and JavaScript. Use rendering engines (Blink, Gecko) for display and JavaScript engines (V8) for code execution. Handle security, bookmarks, history, and user interactions for web navigation.
Stage 2: HTML
HTML
HTML (Hypertext Markup Language) is the standard for creating web pages, structuring content with elements and attributes. Browsers interpret HTML tags to render pages. HTML5, the current standard, adds semantic elements, multimedia support, and form controls. It works with CSS for styling and JavaScript for…
Stage 3: CSS
CSS
CSS (Cascading Style Sheets) styles HTML documents, controlling layout, colors, and fonts. Separates design from content using selectors to target elements. Features responsive design with media queries, cascade rules, inheritance, and specificity. Modern CSS includes Flexbox, Grid, animations, and transitions.
Stage 4: JavaScript
JavaScript
JavaScript is a versatile programming language that makes websites interactive. Runs in browsers, servers (Node.js), and desktop applications. Features dynamic typing, event-driven programming, and constant evolution. Essential for modern web development across frontend and backend.
Stage 5: Version Control
Version Control
Version Control Systems (VCS) like Git track code changes and enable developer collaboration through modification history. Features include branching, merging, reverting, remote repositories, pull requests, and code reviews. Essential for modern software development productivity, quality, and teamwork.
Git
Git is a distributed version control system tracking code changes and enabling collaborative development. Features branching, merging, and complete project history. Allows offline work with local repositories. Fast, flexible, and the most popular VCS for software projects.
GitLab
GitLab is a comprehensive DevOps platform offering integrated development tools including Git hosting, CI/CD, issue tracking, and deployment. Available as cloud service or self-hosted solution. Popular with enterprises seeking unified development workflows and built-in automation capabilities.
GitHub
GitHub is the leading Git repository hosting platform for open-source and private projects. Owned by Microsoft since 2018, it's essential for modern software development, project showcasing, and open-source contributions. Central hub for developer collaboration and code sharing.
npm
npm (Node Package Manager) is the primary JavaScript package manager for finding, sharing, and managing code dependencies. Uses package.json to track project requirements and enables consistent builds across environments. Remains the most popular choice despite alternatives like Yarn and pnpm.
yarn
Yarn is Facebook's JavaScript package manager offering fast, reliable, secure alternative to npm. Features lockfile consistency, parallel installations, offline mode, and checksum verification. Yarn Berry with Plug'n'Play improves performance for large projects.
pnpm
pnpm (performant npm) is a fast, disk-efficient JavaScript package manager using global storage with symlinks. Saves disk space, ensures strict package.json compliance, supports monorepos, and provides better security through dependency isolation. Growing popularity for speed and efficiency.
Bun
Bun is a JavaScript runtime, bundler, transpiler, and package manager, all-in-one. It's designed to be a faster, more efficient alternative to Node.js and npm, aiming to improve performance and developer experience through its speed and comprehensive toolset. Bun uses JavaScriptCore, Apple's JavaScript engine,…
Stage 6: VCS Hosting
VCS Hosting
Repository hosting services (GitHub, GitLab, Bitbucket) provide platforms for storing, managing, and collaborating on software projects using Git version control. Facilitate teamwork, code sharing, project tracking, and distributed software development workflows.
Stage 7: Package Managers
Package Managers
Package managers automate software package installation, updates, and dependency management. Examples include npm (JavaScript), pip (Python), and yarn. Enable code sharing, reuse, and consistent project setups. Essential for modern development workflows and team collaboration.
Stage 8: CSS Frameworks
CSS Frameworks
Modern CSS creates responsive designs using media queries, flexible typography, CSS-in-JS, and frameworks like Tailwind. Features CSS Logical Properties for internationalization and CSS Houdini for custom styling. Goals: performance, maintainability, and accessible designs across all devices.
Tailwind
Tailwind CSS is a utility-first CSS framework providing small, composable classes for rapid custom design development. Features mobile-first approach, automatic unused style removal (purging), and flexible customization. Enables quick responsive design prototyping without writing custom CSS.
Stage 9: Learn a Framework
Learn a Framework
Web frameworks are development toolkits providing libraries, structure, rules, and tools for building applications. Different frameworks offer varying features based on project needs. Popular examples include React, Angular, and Vue, each with unique strengths and capabilities.
React
React is a JavaScript tool from Facebook for building UIs, especially for single-page apps. It lets you create reusable UI parts that update when data changes. React uses a virtual DOM for speed and has a one-way data flow. This component style makes code neat and reusable. React also works with tools like Redux…
Vue.js
Vue.js is a JavaScript framework for building website interfaces. It's easy to start with and can be added to projects bit by bit. Vue uses templates and a virtual DOM (a lightweight copy of the real page) to show things on screen efficiently. It has a system of reusable components, making code organized. While Vue…
Angular
Angular is Google's TypeScript framework for building single-page applications (SPAs). Features reusable components, two-way data binding, dependency injection, and robust template system. Includes testing tools, routing, and state management. Ideal for large, complex enterprise applications.
Svelte
Svelte is a JavaScript tool for building UIs. Unlike others, Svelte does its main work during build time, not in the browser. It turns your code into small, fast, plain JavaScript. Svelte uses components and has a simple syntax, so you write less code. It includes features for managing data, styling, and…
Solid JS
SolidJS is a JavaScript tool for building website interfaces that is known for being very fast and efficient. It updates only the parts of the page that change, which makes it perform well. SolidJS doesn't use a virtual DOM; instead, it directly changes the real DOM. Its syntax is like React, so many developers…
Stage 10: Learn the Basics
Learn the Basics
Generative AI uses algorithms to create new content, like code or designs, based on the data it's trained on. This means it can help frontend developers by automatically generating things like UI elements, suggesting code snippets, or even creating entire webpage layouts based on specific requirements and examples.…
How LLMs work
LLMs, or Large Language Models, are advanced AI models trained on vast datasets to understand and generate human-like text. They can perform a wide range of natural language processing tasks, such as text generation, translation, summarization, and question answering. LLMs function as sophisticated prediction…
AI vs Traditional Coding
Traditional software development relies on developers explicitly writing code to instruct computers on how to perform tasks. This involves defining every step and logic manually. AI-assisted coding, however, leverages machine learning models trained on vast amounts of code to automate parts of the development…
Applications
AI is increasingly being used to automate tasks, improve user interfaces, and enhance the overall development process in frontend. It can help with code generation, intelligent suggestions, automated testing, and creating personalized user experiences through features like dynamic content and adaptive layouts. This…
Stage 11: AI Assisted Coding
AI Assisted Coding
AI-assisted coding involves using artificial intelligence tools to help developers write code more efficiently and effectively. These tools can provide real-time suggestions, automate repetitive tasks, identify potential errors, and even generate code snippets based on natural language descriptions, ultimately…
Claude Code
Claude Code is a family of large language models designed for code generation and understanding. It excels at tasks like code completion, bug finding, documentation, and even translating code between different programming languages. Essentially, it's a tool that helps developers write, understand, and maintain code…
Cursor
Cursor is an AI-powered code editor designed to enhance developer productivity. It leverages large language models to offer features like code completion, generation, and refactoring suggestions. By understanding code context, Cursor aims to automate repetitive tasks and provide intelligent assistance throughout…
Copilot
GitHub Copilot is an AI-powered code-completion tool that helps developers write code faster and with fewer errors. It uses a combination of machine learning algorithms and access to GitHub's vast repository of open-source code to provide context-aware suggestions for coding tasks. Copilot can generate entire…
Antigravity
Antigravity is an AI-powered code completion tool designed to enhance developer productivity. Created by Google, it learns from your coding style and project context to provide intelligent suggestions, autocompletions, and code generation snippets directly within your integrated development environment (IDE). This…
Stage 12: Prompting Techniques
Prompting Techniques
Prompt engineering is the process of crafting effective inputs (prompts) to guide AI models to generate desired outputs. It involves strategically designing prompts to optimize the model’s performance by providing clear instructions, context, and examples. Effective prompt engineering can improve the quality,…
Stage 13: Agents
Agents
AI agents are autonomous programs designed to help developers write code more efficiently. These agents can automate repetitive tasks, suggest code completions, identify errors, and even generate entire code blocks based on natural language descriptions or existing code patterns. They leverage machine learning…
Stage 14: MCP
MCP
Model Context Protocol (MCP) is a rulebook that tells an AI agent how to pack background information before it sends a prompt to a language model. It lists what pieces go into the prompt—things like the system role, the user’s request, past memory, tool calls, or code snippets—and fixes their order. Clear tags mark…
Stage 15: Skills
Skills
AI coding assistants can leverage "skills" – pre-defined functions or tools exposed to the AI that allow it to perform specific actions. Instead of relying solely on their internal knowledge and large language models, these assistants can call upon these skills (like running tests, deploying code, or querying…
Code Reviews
AI-powered code reviews leverage machine learning models to analyze source code and identify potential issues, such as bugs, security vulnerabilities, code style violations, and performance bottlenecks. These tools can automate parts of the code review process, freeing up developers to focus on more complex…
Refactoring
Refactoring, in the context of software development, is the process of restructuring existing computer code—changing its internal structure—without changing its external behavior. AI tools can assist in this process by analyzing code for potential improvements in readability, performance, and maintainability. They…
Docs Generation
AI-powered documentation generation leverages machine learning models to automatically create and maintain software documentation. These tools can analyze code, comments, and other project artifacts to produce API references, tutorials, and other types of documentation, reducing the manual effort required and…
Stage 16: Implementing AI
Implementing AI
Implementing AI in frontend development involves integrating artificial intelligence capabilities directly into user interfaces and workflows. This can range from simple tasks like intelligent form validation to complex features such as personalized content recommendations or AI-powered chatbots. Several major…
Gemini
Gemini is a family of multimodal large language models (LLMs) developed by Google. These models are designed to handle and understand different types of data, including text, code, images, audio, and video. They are used to build AI-powered features by providing capabilities such as natural language understanding,…
OpenAI
OpenAI provides a suite of artificial intelligence models and tools accessible through an API. These models can perform tasks like generating text, translating languages, writing different kinds of creative content, and answering your questions in an informative way. Developers can integrate these powerful AI…
Anthropic
Anthropic is an AI safety and research company focused on developing reliable, interpretable, and steerable AI systems. They create AI models, like Claude, that are designed to be helpful, harmless, and honest, prioritizing safety through techniques like Constitutional AI, where the AI is guided by a set of…
Stage 17: Auth Strategies
Auth Strategies
Authentication strategies verify a user's identity to grant access. Common methods include Basic Auth (username/password), Session-based (server remembers login), Token-based (like JWT, a secure digital key), OAuth (for third-party access like "Login with Google"), and SSO (Single Sign-On, one login for many apps).…
Stage 18: Module Bundlers
Module Bundlers
Module bundlers combine multiple JavaScript files into optimized bundles for browsers. Handle dependencies, code transformation, and splitting for performance. Examples: Webpack, Rollup, Parcel. Enable modern JavaScript features, improve load times, and streamline development workflows.
Vite
Vite is a modern build tool using native ES modules for instant server starts and fast Hot Module Replacement. Supports Vue, React, Svelte with Rollup for production builds. Features CSS pre-processors and TypeScript integration. Enhances developer experience with faster development cycles.
SWC
SWC (Speedy Web Compiler) is a Rust-based JavaScript/TypeScript compiler and bundler, much faster than Babel. Supports modern JavaScript features, JSX, and TypeScript compilation. Popular for large projects and as performance foundation for other build tools.
esbuild
esbuild is an extremely fast JavaScript bundler and minifier written in Go. Handles modern JavaScript, TypeScript, and JSX with near-instant bundling. Simple API with excellent performance for development and as foundation for other tools. Trades some advanced features for speed.
Rollup
Rollup is a JavaScript bundler creating efficient bundles from ES modules. Excels at tree-shaking to remove unused code and supports multiple output formats. Produces smaller bundles than alternatives, ideal for libraries and modern JavaScript projects requiring optimization.
Rolldown
Rolldown is a fast JavaScript bundler written in Rust, designed to be a drop-in replacement for Rollup. It takes your JavaScript and related assets (like CSS and images) and packages them into optimized bundles that can be efficiently loaded in a web browser. Rolldown aims to improve build performance and provide a…
Parcel
Parcel is a zero-configuration web app bundler handling JavaScript, CSS, HTML automatically. Features dependency resolution, code transformation, optimization, live reloading, code splitting, and tree-shaking by default. Known for simplicity and speed, ideal for rapid prototyping.
Stage 19: Linters & Formatters
Linters & Formatters
Linters and formatters improve code quality by finding errors, bugs, and style issues (linters) and automatically fixing formatting like indentation and spacing (formatters). Ensure consistency, readability, and early error detection. Examples: ESLint, Prettier.
Biome
Biome is a high-performance tool for web projects, designed to format and lint code. It aims to replace a suite of existing tools like Prettier, ESLint, and others, offering a unified solution for code quality and consistency. Biome supports languages like JavaScript, TypeScript, JSX, and JSON, helping developers…
Prettier
Prettier automatically formats code for consistency across JavaScript, TypeScript, CSS, and other languages. Enforces opinionated style rules, eliminating style debates and saving time. Integrates with editors and pre-commit hooks. Popular for maintaining uniform code appearance across teams.
ESLint
ESLint is a JavaScript linter checking code for problems, maintains consistent style, and finds errors. Highly configurable with custom or preset rules. Supports modern JavaScript, JSX, and TypeScript. Integrates with editors and builds tools, offering automatic fixing for team consistency.
Stage 20: Testing
Testing
Testing verifies software functionality and quality through unit, integration, functional, UI/UX, performance, security, accessibility, and compatibility testing. Modern approaches use automated tools, CI/CD pipelines, TDD, and BDD methodologies. Early bug detection improves application reliability.
Vitest
Vitest is a fast JavaScript/TypeScript testing framework optimized for Vite with Jest-compatible API. Features live test updates, snapshot testing, mocking, code coverage, parallel execution, and watch mode. Designed for Vite projects but works with any JavaScript project.
Playwright
Playwright is Microsoft's cross-browser automation testing framework supporting Chromium, Firefox, WebKit across platforms. Works with JavaScript, TypeScript, Python, .NET. Features auto-waiting, network control, mobile simulation. Excellent for modern web app testing with debugging tools.
Cypress
Cypress is a JavaScript end-to-end testing framework running tests directly in browsers. Built on Mocha with excellent asynchronous testing support. Features time-travel debugging, automatic waiting, and real-time reloading. Supports BDD/TDD approaches for comprehensive web application testing.
Jest
Jest is Facebook's JavaScript testing framework for unit testing with auto mocking, code coverage, and snapshot testing. Works with React, Angular, Vue. Features parallel test execution, watch mode, and built-in assertion library. Top choice for JavaScript developers.
Stage 21: Web APIs
Web APIs
Web APIs are interfaces provided by web browsers that allow JavaScript code to interact with the browser environment and the wider web. These APIs provide access to functionalities like manipulating the Document Object Model (DOM), handling user input, making network requests, managing browser history, and…
Stage 22: Web Security
Web Security
Web security protects websites from cyber threats through HTTPS/TLS, XSS/SQL injection/CSRF prevention, CSP, secure authentication, input validation, and regular updates. Involves understanding OWASP Top Ten vulnerabilities, access controls, secure coding practices, and threat awareness for comprehensive protection.
CORS
CORS (Cross-Origin Resource Sharing) controls web page access to resources from different domains through HTTP headers. Servers specify allowed origins while browsers send preflight requests for permission. Prevents unauthorized access while enabling legitimate cross-origin requests for modern multi-domain…
HTTPS
HTTPS (Hypertext Transfer Protocol Secure) is HTTP's encrypted version, securing data transmission between browsers and websites. Essential for protecting sensitive information like banking and email. Ensures privacy and security through data encryption for online communications.
CSP
Content Security Policy (CSP) prevents XSS and clickjacking attacks by specifying trusted content sources through HTTP headers. Website creators define safe sources for scripts, styles, images, and other resources. Limits malicious code execution and provides violation reporting for security monitoring.
OWASP Risks
OWASP (Open Web Application Security Project) identifies top web application security risks including injection attacks, broken authentication, data exposure, and vulnerable dependencies. Provides guidance on secure coding practices, regular security testing, and comprehensive protection strategies for web…
Stage 23: React
React
React is Facebook's JavaScript library for building user interfaces with reusable components. Uses virtual DOM for performance and one-way data flow. Features component-based architecture, works with Redux for state management and React Native for mobile. Popular for its clarity, speed, and ecosystem.
Stage 24: Vue.js
Vue.js
Vue.js is a progressive JavaScript framework for building user interfaces. Features template syntax, virtual DOM, and component-based architecture. Easy to learn and incrementally adoptable. Works well with ecosystem tools for routing and state management. Known for flexibility, performance, and gentle learning curve.
Angular
Angular is a popular tool from Google for building websites and web apps. It uses TypeScript (a type of JavaScript) to create large, efficient single-page applications (SPAs), where content loads in one go without needing to reload the whole page. Angular builds UIs with reusable components, like building blocks.…
Stage 25: SSR
SSR
Server-side rendering (SSR) generates complete HTML on the server before sending to browsers. Improves initial load times, SEO, and performance on slow devices. Frameworks: Next.js (React), Nuxt.js (Vue). Increases server load but enhances user experience.
Nuxt.js
Nuxt.js is a Vue.js framework providing structure, automatic routing, and server-side rendering. Supports static site generation, code splitting, and data fetching. Offers flexible rendering options with focus on developer experience and performance. Popular for SEO-friendly Vue applications with plugin ecosystem.
Stage 26: SvelteKit
SvelteKit
SvelteKit is a full-stack framework for building websites and applications with Svelte. Features file-based routing, code splitting, server-side rendering, and static site generation. Designed for simplicity and performance with excellent developer experience and easy deployment options.
GitHub Pages
GitHub Pages is a free static site hosting service that takes HTML, CSS, and JavaScript files directly from a GitHub repository and publishes them as a website. It's ideal for hosting project documentation, portfolios, blogs, and other static websites. Pages supports custom domains, HTTPS, and Jekyll for automatic…
Vercel
Vercel is a platform designed for deploying and hosting web applications, particularly those built with modern frontend frameworks and static site generators. It provides features like automatic deployments from Git repositories, serverless functions, and a global content delivery network (CDN) to ensure fast and…
Netlify
Netlify is a web development platform that simplifies building, deploying, and hosting websites and web applications. It automates the process of deploying static sites and single-page applications by directly connecting to your Git repository. When changes are pushed to the repository, Netlify automatically builds…
Cloudflare
Cloudflare is a service that sits between your website and its visitors, acting as a reverse proxy. It provides a range of features including a content delivery network (CDN) to speed up website loading times by caching content closer to users, DDoS protection to safeguard against malicious attacks, and SSL/TLS…
Railway
Railway is a cloud platform that simplifies deploying web applications and services. It allows developers to deploy directly from their Git repositories, automatically handling infrastructure concerns like server provisioning, networking, and scaling. It supports various languages and frameworks, making it a…
Render
Render is a unified cloud platform that simplifies the process of deploying and hosting web applications, static websites, and backend services. It automates infrastructure management, allowing developers to focus on writing code rather than configuring servers. Render supports various programming languages and…
Next.js
Next.js is a React framework supporting server-side rendering and static site generation. Features automatic code splitting, file-based routing, CSS support, API routes, and optimized performance. Includes live updates, smart preloading, and easy deployment. Ideal for SEO-friendly applications.
Tanstack Start
Tanstack Start is a full-stack framework built on React that simplifies the process of creating web applications with server-side rendering (SSR). It provides tools and conventions for routing, data fetching, and deployment, allowing developers to focus on building features rather than configuring infrastructure.…
Astro
Astro is a static site generator supporting multiple frameworks (React, Vue, Svelte) with partial hydration. Renders components to static HTML, sending JavaScript only when needed. Features file-based routing and markdown support. Ideal for blogs, documentation, and marketing sites.
react-router
React Router enables client-side routing in React applications, creating single-page apps with multiple views. Handles URL management, provides route definition components, and supports lazy loading and route guards. The standard navigation solution for React applications.
Stage 27: Deployment
Deployment
Deployment is the process of making a website or web application available for users to access on the internet. It involves taking the code, assets (like images and fonts), and configuration files and placing them on a server or hosting platform. This process often includes steps like bundling the code, optimizing…
Svelte
Svelte is a compile-time JavaScript framework building UIs with minimal runtime overhead. Compiles components to optimized vanilla JavaScript without virtual DOM. Features simple syntax, built-in state management, styling, and animations. Known for small bundle sizes and fast performance.
Stage 28: Type Checkers
Type Checkers
Type checkers are tools that analyze code to verify that the types of values used in a program are consistent with their declared or inferred types. They help catch type-related errors during development, before the code is run, by identifying mismatches between expected and actual data types. This process ensures…
Stage 29: SSG
SSG
Static Site Generators (SSGs) build websites as pre-generated HTML files from content and templates. Make sites fast, secure, and easy to host. Examples: Jekyll, Hugo, Eleventy. Ideal for blogs, documentation, and content-focused sites with excellent performance.
Astro
Astro is a static site generator supporting multiple frameworks (React, Vue, Svelte) with partial hydration. Renders components to static HTML, sending JavaScript only when needed. Features file-based routing and markdown support. Ideal for blogs, documentation, and marketing sites.
Next.js
Next.js is a React framework supporting server-side rendering and static site generation. Features automatic code splitting, file-based routing, CSS support, API routes, and optimized performance. Includes live updates, smart preloading, and easy deployment. Ideal for SEO-friendly applications.
Vuepress
VuePress is a Vue.js-powered static site generator optimized for documentation. Creates fast, SEO-friendly sites with Vue-based theming, syntax highlighting, and Markdown support with Vue components. Features built-in search, responsive layouts, and plugin/theme customization. Ideal for documentation and simple…
Eleventy
Eleventy (11ty) is a flexible static site generator supporting multiple template languages (HTML, Markdown, JavaScript). Creates pages from data sources, adds no client-side JavaScript for fast loading. Highly customizable with useful plugins for navigation and image processing.
Nuxt.js
Nuxt.js is a Vue.js framework providing structure, automatic routing, and server-side rendering. Supports static site generation, code splitting, and data fetching. Offers flexible rendering options with focus on developer experience and performance. Popular for SEO-friendly Vue applications with plugin ecosystem.
Stage 30: Design Systems
Design Systems
A design system is a structured collection of reusable components, guidelines, standards, and best practices that ensure consistency across an application's visual design and user experience. It typically includes typography, colors, spacing, icons, UI components, interaction patterns, and documentation on how to…
Stage 31: Performance
Performance
Performance, in the context of web development, refers to how quickly and efficiently a website or web application loads and responds to user interactions. It encompasses various aspects like loading times, rendering speed, and overall responsiveness. Optimizing performance ensures a smooth and enjoyable user…
Lighthouse
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. Lighthouse provides reports with actionable insights to help developers…
DevTools Usage
DevTools are a set of web developer tools built directly into web browsers. They allow you to inspect and debug HTML, CSS, and JavaScript, monitor network activity, analyze performance bottlenecks, and more. By using DevTools, frontend developers can understand how their code is executed in the browser and identify…
Service Workers
Service Workers are JavaScript files that act as proxy servers between web browsers and web servers. They can intercept network requests, cache resources, and deliver push notifications, even when the user is offline. This allows for improved performance and offline capabilities for web applications.
Cache-Control
Cache-Control is an HTTP header used to specify caching directives in HTTP requests and responses. These directives control how browsers and other intermediaries (like CDNs) should cache content. By setting appropriate Cache-Control headers, developers can influence whether a resource is stored, for how long, and…
Streamed Responses
Streamed responses involve sending data from a server to a client in chunks, rather than waiting for the entire response to be ready before sending anything. This allows the browser to start processing and rendering content sooner, improving perceived performance and user experience, especially for large datasets…
Stage 32: Web Components
Web Components
Web Components create reusable HTML elements using Custom Elements, Shadow DOM, and HTML Templates. Work across browsers and frameworks with encapsulated styles and structure. Enable modular, shareable code with reduced style conflicts. Standard for building interoperable web parts.
Stage 33: GraphQL
GraphQL
GraphQL is Facebook's query language for APIs allowing clients to request exactly the data needed. Reduces over-fetching and under-fetching compared to REST. Ideal for mobile applications, complex APIs, and rapidly changing requirements with strong typing.
Apollo
Apollo GraphQL is a comprehensive platform for GraphQL applications. Apollo Client handles caching, data fetching, and state management. Apollo Server builds GraphQL APIs. Includes tools for schema management, performance monitoring, and developer tooling for faster, scalable apps.
Relay Modern
Relay is Facebook's JavaScript library for data-heavy React applications using GraphQL. Co-locates data requirements with components, enabling efficient fetching and updates. Handles caching, real-time updates, and optimistic UI changes. Ideal for complex applications requiring sophisticated data management.
Stage 34: Accessibility
Accessibility
Website accessibility ensures sites are usable by everyone, including people with disabilities. Involves alt text for images, keyboard navigation, color contrast, and captions. Benefits all users, supports legal compliance, and expands audience reach.
Stage 35: PWAs
PWAs
Progressive Web Apps (PWAs) are web applications behaving like native apps using HTML, CSS, JavaScript. Feature offline functionality, push notifications, home screen installation, and service workers for caching. Cross-platform, discoverable, and cost-effective alternative to native apps.
Stage 36: Desktop Apps
Desktop Apps
JavaScript builds desktop apps using Electron, NW.js, or Tauri for cross-platform development (Windows, Mac, Linux). Electron powers VS Code and Discord. Provides file system access and native integration. Trade-offs: faster development vs. performance and resource usage compared to native apps.
HTML Templates
The <template HTML element holds hidden content for later use by JavaScript. Acts as a reusable blueprint for creating dynamic page elements. Enables efficient content templating and component-based development patterns in web applications.
Custom Elements
Custom Elements enable creating your own HTML tags as part of Web Components. Build reusable webpage components with custom behavior instead of nested standard HTML. Keeps HTML cleaner and components more manageable with encapsulated functionality.
Shadow DOM
Shadow DOM creates private, encapsulated DOM trees inside elements, isolating HTML, CSS, and JavaScript from the main page. Prevents style and script conflicts, enabling cleaner, reusable components. Essential for web components requiring self-contained functionality.
Electron
Electron builds cross-platform desktop apps using web technologies (HTML, CSS, JavaScript) with Chromium and Node.js. Provides native OS access and powers apps like VS Code. Enables rapid development but can be resource-intensive. Popular choice for web developers.
Tauri
Tauri builds small, secure desktop apps using web technologies with Rust backend. Uses system webview instead of bundled browser, resulting in smaller apps. Features strong security and JavaScript framework compatibility. Focuses on performance and minimal resource usage compared to Electron.
Flutter
Flutter is Google's cross-platform framework building apps for iOS, Android, web, desktop from single Dart codebase. Features rich widget library, hot reload, and custom rendering engine for consistent UI. Popular for mobile development, expanding to web and desktop platforms.
Stage 37: Mobile Apps
Mobile Apps
Mobile applications are software programs designed to run specifically on smartphones, tablets, and other portable handheld devices. They are typically accessed through dedicated app stores and are developed to leverage device-specific features like GPS, cameras, and push notifications to provide an optimized user…
React Native
React Native enables building native mobile apps for iOS and Android using JavaScript and React. Compiles to native components for authentic look and performance. Features code sharing, hot reloading, and device API access. Ideal for React developers transitioning to mobile development.
Flutter
Flutter is Google's cross-platform framework building apps for iOS, Android, web, desktop from single Dart codebase. Features rich widget library, hot reload, and custom rendering engine for consistent UI. Popular for mobile development, expanding to web and desktop platforms.
Ionic
Ionic is an open-source mobile toolkit that allows developers to build high-quality cross-platform applications for iOS, Android, and the web using a single codebase. It leverages web technologies like HTML, CSS, and JavaScript, and integrates seamlessly with popular frameworks such as Angular, React, and Vue. By…
Questions about the Frontend Developer Roadmap
Is the Frontend Developer Roadmap free?
Yes. All 120 lessons in this roadmap are free to read on Bibha AI Learning Labs, with no account and no payment. Signing in is optional: it lets you mark lessons as done and keep your progress, and it opens the AI tutor, which runs on your own API key.
How long does the Frontend Developer Roadmap take?
There is no fixed duration. It has 120 lessons in 37 stages, and the time it takes depends on how many hours you give it each week. Nothing is locked, so you can skip what you already know, and your progress is saved once you sign in.
Where should I start the Frontend Developer Roadmap?
Start with stage 1, Internet, and work down in order. The stages are numbered in the order the roadmap suggests, but every lesson is open, so if you already know Internet you can go straight to HTML or anything after it. Each lesson links to free resources for going deeper.
Can I learn Frontend in Hindi?
The lessons are written in English. Once you sign in, you can ask the AI tutor on any lesson to explain it in Hindi or Hinglish. It answers from that lesson’s own text, so the explanation stays on the syllabus. The tutor runs on your own Google, OpenAI or Anthropic key.