Frontend Development

The Frontend Development roadmap, topic by topic

Every topic on the map in reading order, with what to learn and the resources we recommend. Main topics are open; open any subtopic to read it. Select a topic name to open it in the topic panel, where you can track your progress.

1. 1. Know the job before the tools

   The Frontend Development job in 2026

   2026

   Frontend is the most visible job in software and in 2026 the one most changed by AI tools: the browser still runs JavaScript, HTML and CSS, but a working first version of most interfaces is now generated and the engineer's job is to specify, review, finish and make it accessible, fast and correct. The four nodes here answer the three questions every learner asks - which skills, which role, what companies expect - and the one they mean: what gets you hired. Figures come from the Stack Overflow 2025 survey, GitHub's Octoverse 2025, the Microsoft and LinkedIn Work Trend Index and the World Economic Forum's Future of Jobs 2025, each named where used.

   • CertificationOneRoadmap: Frontend certification
   • Job simulationOneRoadmap: Frontend Engineer job simulation
   • RoadmapOneRoadmap: JavaScript roadmap
   • ArticleStack Overflow: 2025 Developer Survey
   • ArticleGitHub: Octoverse 2025
   • ArticleWorld Economic Forum: The Future of Jobs Report 2025

   Which skills to learn

   The frontend stack has settled: HTML and CSS that work for screen readers and search engines, JavaScript understood rather than memorised, TypeScript on top because that is what teams and AI tools now write, and React with a meta-framework such as Next.js. The Stack Overflow 2025 survey has JavaScript used by 66 percent of developers and HTML and CSS by 62 percent, the largest shares of any technology for the thirteenth year; GitHub's Octoverse 2025 reports TypeScript overtaking Python and JavaScript as the most used language on GitHub in August 2025. The three sub-nodes order them.

   • ArticleStack Overflow: 2025 Developer Survey
   • ArticleGitHub: Octoverse 2025

   HTML, CSS, JS, then TS

   Learn the platform before any framework: semantic HTML, CSS layout with flexbox and grid, responsive design, and JavaScript as a language - values, functions, closures, the DOM, the event loop and async. Then TypeScript, because the Octoverse 2025 report shows it became the most used language on GitHub in 2025 with over a million new contributors, driven by AI tools that emit typed code by default. The Stack Overflow 2025 survey still puts JavaScript at 66 percent and HTML and CSS at 62 percent of all developers, so the fundamentals are not optional even when a tool writes the first draft. Interviews probe exactly these: coercion, this, closures, specificity, accessibility.

   • RoadmapOneRoadmap: TypeScript roadmap
   • ArticleGitHub: Octoverse 2025
   • ArticleStack Overflow: 2025 Developer Survey

   React and Next.js

   React remains the default: the Stack Overflow 2025 survey has React use rising from 39 to 44 percent of developers, the State of React 2025 survey found React 19 at 48 percent daily use within months of release, and the State of JavaScript 2025 survey reports React used by about 84 percent of JavaScript developers. Learn hooks, state, data fetching and rendering properly, then Next.js as the meta-framework most job descriptions and AI builders assume. Vue, Svelte and Angular are worth reading, not worth learning first unless a target employer uses them.

   • RoadmapOneRoadmap: React roadmap
   • ArticleStack Overflow: 2025 Developer Survey
   • ArticleState of React 2025
   • ArticleState of JavaScript 2025

   AI-assisted UI work

   AI

   In 2026 the first draft of most interfaces is generated - by v0, Lovable, Bolt, Cursor or Claude Code - and the frontend engineer's value is what happens next: specifying the component precisely, reviewing the generated code for accessibility, performance and state bugs, and owning the result. GitHub reports that 80 percent of new developers on the platform use Copilot in their first week; the Stack Overflow 2025 survey finds 80 percent of developers using AI tools but 46 percent distrusting their accuracy. The hire is the person who gets the speed without the debt: generate, then check contrast, keyboard navigation, bundle size and the diff, line by line.

   • RoadmapOneRoadmap: Vibe Coding roadmap
   • ArticleGitHub: Octoverse 2025
   • ArticleStack Overflow: 2025 Developer Survey

   Which role to prepare for

   The titles are frontend developer, UI engineer, web developer and - increasingly - full stack developer with a frontend lean, since a frontend engineer who can deploy a Next.js app with a database is a full stack developer for most small companies. The sub-nodes separate the pure frontend path from the full stack one, the fresher route from the switcher's, and where the demand actually sits by sector and city.

   • RoadmapOneRoadmap: Full Stack roadmap

   Frontend vs full stack

   A frontend developer owns the interface: components, state, accessibility, performance and the design system. A full stack developer owns the interface and the server behind it. In small companies and startups the second title is more common and pays for breadth; in product companies with large design systems the first title is a deep specialism with its own ladder. The Stack Overflow 2025 survey's most common developer type is full stack, which is why this roadmap's related Full Stack path exists. Choose by the companies you want: startups and agencies want full stack; product and platform teams want specialists.

   • RoadmapOneRoadmap: Full Stack roadmap
   • ArticleStack Overflow: 2025 Developer Survey

   Fresher vs switcher

   A fresher's advantage is a portfolio built on the modern stack from day one and no legacy habits; the disadvantage is that junior hiring lags, which HackerRank's 2025 report found hit early-career developers hardest, with 74 percent of developers saying landing a job is a struggle. A switcher from design, QA, marketing or a non-tech job brings domain knowledge and should build projects in that domain. On the map, freshers get the foundations filled and the later stages outlined; experienced learners the reverse. Both need the same proof: deployed work and an explanation of it.

   • ArticleHackerRank: 2025 Developer Skills Report

   Sectors, cities and pay

   Demand is broadest in product companies, e-commerce, fintech and the global capability centres that now do real product work from India; Nasscom's 2026 strategic review puts the Indian tech industry at about 315 billion dollars in revenue with 59.5 lakh direct employees, and Naukri's JobSpeak reported IT hiring back in positive territory in early 2026 with fresher hiring up 17 percent year on year. Bengaluru, Hyderabad, Pune and Gurugram carry most of the frontend roles; remote roles for foreign companies pay more and ask for stronger English and TypeScript. Pay rises fastest with proof of shipping real products, not with years alone.

   • ArticleNasscom: Strategic Review 2026 press release
   • ArticleNaukri JobSpeak

   What companies expect

   Companies expect a frontend engineer to ship a working, accessible, measured interface from a design and a vague ticket, with AI tools used well and reviewed. HackerRank's 2025 Developer Skills Report found 66 percent of developers prefer practical assessments that mirror the job over abstract puzzles, and that is what frontend hiring has become: build this, explain this, fix this. The sub-nodes cover the bar, the interview and the proof a hiring team actually checks.

   • ArticleHackerRank: 2025 Developer Skills Report

   The hiring bar

   The bar for a 2026 frontend hire is a working, deployed interface built from a design or a ticket: responsive, accessible to a screen reader and keyboard, measured for performance, typed, tested where it matters and reviewed when generated. The Microsoft and LinkedIn Work Trend Index found 66 percent of leaders would not hire someone without AI skills and 71 percent would prefer a less experienced candidate who has them, so using the tools well is part of the bar, and being able to explain a generated component is what separates a hire from a demo.

   • ArticleMicrosoft and LinkedIn: 2024 Work Trend Index

   What interviews test

   Expect a practical build - a component or a small page from a spec, often with an AI tool allowed - plus questions on JavaScript fundamentals, React rendering and state, CSS layout, accessibility and performance, and a walk through one of your projects. HackerRank's 2025 report says real-world coding assessments have become the standard and 66 percent of developers prefer them; abstract algorithm rounds still appear at large product companies, so keep arrays, strings and maps sharp. The strongest signal in the interview is explaining a trade-off you actually made.

   • ArticleHackerRank: 2025 Developer Skills Report

   Proof they verify

   Hiring teams verify three things: a live URL they can open, a repository they can read and a credential they can check. A deployed project with real data beats a template clone; a readable commit history beats a single upload; a scored certification with a public verification link beats a course completion badge. OneRoadmap's Frontend certification is free, timed and verifiable, and the roadmap's Career stage names the external credentials that carry weight.

   • CertificationOneRoadmap: Frontend certification

   What gets you hired

   What gets a frontend candidate hired in 2026 is evidence that they can ship: a deployed project with real users or real data, a repository a reviewer can read, a score on a certification they can verify, and a clear account of how AI tools were used and checked. The sub-nodes give the ninety-day plan, the projects that get read and the proof that counts.

   • CertificationOneRoadmap: Frontend certification

   A 90-day plan

   Month one: HTML, CSS and JavaScript fundamentals with one deployed static project. Month two: TypeScript and React with a data-fetching app on Next.js, deployed on Vercel, built with an AI tool and reviewed by you. Month three: an accessibility and performance pass on both, a written explanation of what the tools generated and what you changed, the Frontend certification, and twenty applications a week with the projects linked. Freshers add the DSA basics for product-company screens; switchers add a project in their previous domain.

   • RoadmapOneRoadmap: React roadmap

   Projects that get read

   Projects that get read solve a real problem with real data: a dashboard on a public API with filtering, pagination and error states; a form-heavy app with validation and accessibility done properly; a component library with documentation and tests. Each needs a live link, a readme that states the decisions, and a short note on what AI generated and what you fixed. The World Economic Forum's Future of Jobs 2025 report lists software and application developers among the fastest-growing roles while 39 percent of skills change by 2030 - a project that shows you learned the new tooling is itself the evidence.

   • ArticleWorld Economic Forum: The Future of Jobs Report 2025

   Certification and proof

   Proof is what a recruiter can verify in a click: OneRoadmap's free Frontend certification with its public link, a GitHub profile with real commits, a deployed project and, for the AI part, a short write-up of your tool workflow. Octoverse 2025 counts more than 180 million developers on GitHub with India the largest source of new ones, so a profile without proof disappears; one with a verified score, a live project and a clear readme is read.

   • CertificationOneRoadmap: Frontend certification
   • Job simulationOneRoadmap: Frontend Engineer job simulation
   • ArticleGitHub: Octoverse 2025

2. 2. Understand the platform before writing for it.

   How the Web Works

   Understand the platform before writing for it.

   Time: about 1 week. Topics: Internet fundamentals · HTTP & HTTPS · Browsers & rendering · Dev tools.

   Internet fundamentals

   Optional on the Experienced track

   What happens when you type a URL: DNS resolution, TCP/IP at concept level, and the client-server model every website is built on.

   • ArticleMDN: How the web works

   HTTP & HTTPS

   Optional on the Experienced track

   Requests, responses, methods, status codes and headers - the protocol your apps speak all day; TLS as the lock on the conversation.

   • OfficialMDN: HTTP overview

   Browsers & rendering

   Optional on the Experienced track

   Parsing, the render tree, reflow and paint - the mental model behind every performance conversation you'll ever have.

   • Articleweb.dev: How browsers work

   Dev tools

   Optional on the Experienced track

   Elements, Console and Network panels - inspecting, debugging and profiling pages is a daily skill, not an advanced one.

   • OfficialChrome DevTools docs

3. 3. Structure content the way browsers, screen readers and Google expect.

   HTML

   Structure content the way browsers, screen readers and Google expect.

   Time: about 1-2 weeks. Topics: Document structure & semantics · Forms & validation · Media & links · SEO fundamentals.

   Document structure & semantics

   Optional on the Experienced track

   Headings, sections, nav, article and friends - semantic elements give meaning to markup and free accessibility for free.

   • OfficialMDN: HTML basics

   Forms & validation

   Optional on the Experienced track

   Inputs, labels, fieldsets and built-in validation - forms are where users actually interact, and where sloppy HTML hurts most.

   • OfficialMDN: Web forms

   Media & links

   Optional on the Experienced track

   Responsive images (srcset), audio/video and anchor semantics - serving the right asset to the right device.

   SEO fundamentals

   Optional on the Experienced track

   Titles, meta descriptions, canonical URLs and structured content - how markup choices decide what search engines see.

   • ArticleGoogle Search Central: SEO starter guide

4. 4. Build any layout from a picture, no copy-paste.

   CSS

   Build any layout from a picture, no copy-paste.

   Time: about 3-4 weeks. Topics: Cascade, specificity & box model · Flexbox · Grid · Responsive design · Positioning, stacking & overflow · Transitions & animations.

   Build: Pixel-accurate landing page. Rebuild a real product's landing page responsively from a screenshot - no frameworks, no libraries.

   Cascade, specificity & box model

   How conflicting rules resolve and how every element is a box - the two mental models that turn CSS debugging from luck into logic.

   • OfficialMDN: CSS first steps

   Flexbox

   Main axis, cross axis, grow/shrink and alignment - the one-dimensional layout tool you'll reach for daily.

   • ArticleCSS-Tricks: Flexbox guide

   Grid

   Tracks, areas and auto-placement - entire page scaffolds in a few declarative lines.

   • ArticleCSS-Tricks: Grid guide

   Responsive design

   Mobile-first media queries, fluid units and container-aware thinking - one codebase, every screen.

   • Articleweb.dev: Responsive design

   Positioning, stacking & overflow

   relative/absolute/fixed/sticky, z-index stacking contexts and scroll containers - where most 'CSS is broken' bugs actually live.

   Transitions & animations

   Micro-interactions with transitions and keyframes, GPU-friendly properties, and respecting prefers-reduced-motion.

   • OfficialMDN: Using CSS animations

5. 5. Write JS you can explain in an interview, not just run.

   JavaScript

   Write JS you can explain in an interview, not just run.

   Time: about 4-5 weeks. Topics: Syntax & types · Functions, scope & closures · Objects, prototypes & this · DOM manipulation & events · The event loop & async · fetch & APIs · ES modules.

   Build: API-driven app, vanilla JS. Build a searchable, paginated UI over a public API with loading, empty and error states.

   Syntax & types

   Values, coercion rules and equality - the quirks interviewers probe because frameworks hide them.

   • Coursejavascript.info

   Functions, scope & closures

   First-class functions, lexical scope and closures - the heart of the language and of every callback you'll write.

   • OfficialMDN: Closures

   Objects, prototypes & this

   Property lookup, prototype chains and the four rules of this - what class syntax sugars over.

   DOM manipulation & events

   Selecting, mutating and delegating events efficiently - what jQuery did, and what React abstracts.

   • OfficialMDN: DOM introduction

   The event loop & async

   Call stack, task queues, promises and async/await - handling time and failure without pyramid code.

   • OfficialMDN: Asynchronous JavaScript

   fetch & APIs

   Requests with loading, error and empty states; JSON handling and pagination - 80% of real frontend async work.

   • OfficialMDN: Fetch API

   ES modules

   import/export, module scope and how bundlers stitch files into an app.

6. 6. Work the way teams actually ship.

   Git & Collaboration

   Work the way teams actually ship.

   Time: about 1-2 weeks. Topics: Git fundamentals · Branches & merging · GitHub workflow.

   Git fundamentals

   init, add, commit, log and diff - version control as a save system you can trust.

   • OfficialPro Git book (free)

   Branches & merging

   Feature branches, merge vs rebase at concept level, and resolving conflicts without fear.

   GitHub workflow

   Forks, pull requests, code review etiquette and protected branches - how frontend work gets reviewed and merged.

   • OfficialGitHub: Hello World guide

7. 7. Navigate the modern JS toolchain calmly.

   Tooling & Ecosystem

   Navigate the modern JS toolchain calmly.

   Time: about 1-2 weeks. Topics: npm & package.json · Bundlers & dev servers · Linting & formatting.

   npm & package.json

   Dependencies, scripts, semver and lockfiles - the contract every JS project is built on.

   • Officialnpm docs

   Bundlers & dev servers

   What Vite/webpack actually do: transform, bundle, serve and hot-reload - so build errors stop being magic.

   • OfficialVite guide

   Linting & formatting

   ESLint and Prettier as automated code review - catching bugs and ending style debates before they start.

8. 8. Ship features in the stack most teams hire for.

   React + TypeScript

   Ship features in the stack most teams hire for.

   Time: about 4-6 weeks. Topics: Components & props · State & effects · Hooks in depth · Routing · Server state & data fetching · TypeScript in React.

   Build: CRUD app with auth. A multi-page React + TypeScript app with login, list/detail views and optimistic updates.

   Components & props

   Thinking in components: composition, controlled inputs and lifting state to where it belongs.

   • Officialreact.dev: Learn React

   State & effects

   useState and useEffect without foot-guns: dependency arrays, cleanup, and why most effects shouldn't exist.

   • Articlereact.dev: You might not need an effect

   Hooks in depth

   useContext, useRef, useMemo/useCallback and custom hooks - sharing logic without prop drilling or re-render storms.

   Routing

   Client-side routes, params and nested layouts with React Router or a framework like Next.js.

   • OfficialReact Router docs

   Server state & data fetching

   Caching, invalidation and optimistic updates - the React Query mindset that replaces useEffect-fetch spaghetti.

   • OfficialTanStack Query docs

   TypeScript in React

   Typing props, state, events and children - the default expectation in professional codebases.

   • ArticleReact TypeScript Cheatsheet

9. 9. The habits that make seniors trust your PRs.

   Quality: Testing, Performance, A11y

   The habits that make seniors trust your PRs.

   Time: about 3-4 weeks. Topics: Accessibility · Core Web Vitals · Component testing · End-to-end testing · Web security for frontend.

   Accessibility

   Keyboard navigation, labels, contrast, focus management and ARIA-when-needed - legally and ethically non-optional.

   • ArticleW3C WAI: Accessibility fundamentals

   Core Web Vitals

   LCP, CLS and INP: what they measure, how to profile them, and the fixes (lazy loading, image sizing, code-splitting) that move them.

   • Articleweb.dev: Core Web Vitals

   Component testing

   Testing Library + Vitest/Jest: test behaviour users see, not implementation details.

   • OfficialTesting Library docs

   End-to-end testing

   One Playwright/Cypress happy path per critical flow - the safety net that lets you refactor on Friday.

   • OfficialPlaywright docs

   Web security for frontend

   XSS, CSRF, CORS and Content Security Policy - the attacks that arrive through the browser and how to close the door.

   • ArticleOWASP: XSS prevention

10. 10. Capabilities beyond components.

    The Wider Platform

    Capabilities beyond components.

    Time: about 2 weeks. Topics: Browser Web APIs · PWAs & service workers · Web components · Auth strategies & GraphQL.

    Browser Web APIs

    Intersection Observer, Clipboard, Geolocation, Notifications and friends - platform features that replace dependencies.

    • OfficialMDN: Web APIs

    PWAs & service workers

    Offline caching, install prompts and background sync - web apps that behave like native ones.

    • Courseweb.dev: Learn PWA

    Web components

    Custom elements, shadow DOM and templates - framework-agnostic components at platform level.

    • OfficialMDN: Web components

    Auth strategies & GraphQL

    Sessions, JWT and OAuth flows from the client side; GraphQL queries and when it beats REST.

    • OfficialGraphQL: Learn

11. 11. Navigate the landscape beyond one framework.

    Modern Ecosystem

    Navigate the landscape beyond one framework.

    Time: about 2 weeks. Topics: CSS frameworks & design systems · SSR, SSG & meta-frameworks · The framework landscape · AI-assisted development.

    CSS frameworks & design systems

    Optional on the Fresher track

    Tailwind's utility model, component libraries and design tokens - consistency at team scale.

    • OfficialTailwind docs

    SSR, SSG & meta-frameworks

    Optional on the Fresher track

    Next.js and Astro: server rendering, static generation and when an SPA is the wrong default.

    • OfficialNext.js docs
    • OfficialAstro docs

    The framework landscape

    Optional on the Fresher track

    Vue, Svelte, Angular and Solid at awareness level - transferable concepts, honest trade-offs, calmer job hunting.

    AI-assisted development

    Optional on the Fresher track

    AI code editors, completion tools and agentic CLIs - shipping faster while still owning every line you merge.

    • OfficialClaude Code docs

12. 12. Deployed work and verified proof.

    Ship & Career

    Deployed work and verified proof.

    Time: about 2 weeks. Topics: Deployment · Portfolio · Prove it.

    Deployment

    Static hosting and CDNs (Vercel/Netlify/Cloudflare Pages), environment variables, preview deploys and custom domains.

    • OfficialVercel docs

    Portfolio

    Two or three polished, deployed projects with READMEs and Lighthouse scores beat twenty half-finished repos.

    Prove it

    Take the OneRoadmap Frontend certification - verified, recruiter-checkable proof behind the portfolio.

    • CourseOneRoadmap: Frontend certification