Sefism Frontend Development Roadmap

What it is

Sefism's frontend development roadmap is a seven-stage path from "what happens when you type a URL" to a product deployed on your own domain with real users on it. It is about 395 hours of work, with each stage broken into topics in learning order. Every topic has a short explanation, a check question to answer without notes and a prompt you can paste into an AI assistant that quizzes you rather than doing the work for you. Each stage closes with a milestone, Tauseef's practical advice, and a handful of resources labelled by job: learn, practise, reference, go deeper.

By the end you can:

• Build responsive, accessible pages with semantic HTML and modern CSS layout, and use them with only a keyboard.
• Write plain JavaScript that handles the DOM, events, fetch and async code without guesswork.
• Build a typed, component based app in your framework with routing, forms and data from an API.
• Cover key user flows with Vitest and Playwright tests that run on every pull request.
• Deploy an app with good Core Web Vitals on a throttled phone, and fix what real users report.

Choose your framework

The roadmap asks which framework you want to learn, and stage 4 and the projects change to match:

• React with Next.js (the default at /roadmaps/frontend/): most jobs. Components, state, effects and forms, then the App Router, server and client components, and server actions.
• Vue with Nuxt: a gentler learning curve. Single file components, ref and reactive, computed values, composables, Pinia, and Nuxt pages and server rendering.
• Angular: common in enterprise teams. Standalone components, the new control flow, signals, change detection and zoneless apps, dependency injection, reactive forms, and HttpClient with just enough RxJS.

Everything else, from HTML and CSS to shipping, is shared, so you can switch framework later without starting again.

Who it suits, and who should start elsewhere

It is written for beginners and career switchers who want to build the parts of the web people use, and for backend developers filling in the browser side. You do not need prior experience: the first stage starts at DNS and HTTP.

If you have never programmed at all and want a gentler start, the Programming foundations roadmap is shorter. If you want to own the server and database too, look at Full stack development, which reuses this frontend material. If you mainly want to build sites for clients without much code, WordPress and Shopify is quicker to earn from. And if you are more drawn to how interfaces look and work than to code, see UI/UX design.

Time and a weekly plan

The seven stages add up to about 395 hours. The first three (HTML and CSS, JavaScript, Git and tooling, 160 hours together) are foundation stages you can skim if you already know them. The page converts hours to weeks from your chosen pace: about 79 weeks at 5 hours a week, 52 at 8 hours, or 35 at 12 hours.

A student with 12 hours a week: three evenings on topics and one long weekend session building the stage's milestone. That finishes in around eight months, close to a university year, with a deployed product at the end.

Someone working full time with 8 hours a week: two evenings and a weekend morning. Expect about a year. Protect the JavaScript stage: the roadmap's advice is to stay in plain JavaScript until closures, promises and the DOM stop surprising you, because people who jump to a framework early spend years confusing framework problems with JavaScript problems.

Stage by stage

1. How the web works, HTML and CSS (60 hours, foundation)

From URL to page (DNS, TCP, TLS and HTTP), methods, status codes and headers, semantic HTML with headings and landmarks, accessible forms, the box model, cascade and specificity, Flexbox, CSS Grid, mobile first layout, and keyboard and screen reader basics. Milestone: a three page responsive site from a Frontend Mentor design with no CSS framework, then used with only a keyboard, fixing every place where focus gets lost or hidden.

2. JavaScript and the browser (80 hours, foundation)

Values, types and equality, functions and scope, arrays, objects and array methods, closures, this, the DOM and events, promises and async/await, the event loop, fetching data and handling every state, and ES modules. Milestone: a small plain JavaScript app that fetches from a public API, renders, filters and sorts the data, and shows loading, empty and error states.

3. Git, npm and build tooling (20 hours, foundation)

Commits and branches, merging, rebasing and conflicts, pull requests and code review, npm and package.json scripts, semantic versioning and lockfiles, Vite, and the browser DevTools. Milestone: your JavaScript app moved into a Vite project on GitHub with a clean history, lint and build scripts, a pull request and a merge conflict resolved on purpose.

4. Your framework (80 hours)

Titled React and Next.js, Vue and Nuxt, or Angular depending on your choice. In React: components, JSX and props, useState, derived values instead of extra state, lists and keys, forms and actions, effects and when not to use them, the App Router, server and client components, and data fetching with caching. Milestone: rebuild your plain JavaScript app in your framework with sensible components, state in the right place, a detail page per item with its own URL and a working form.

5. TypeScript and testing (50 hours)

Types, interfaces and unions, narrowing and discriminated unions, generics, strict mode and unknown for API data, typing props and events, ESLint and Prettier, what to test at which level, component tests with Vitest and end to end tests with Playwright. Milestone: your app in strict mode with no any, lint and format scripts, and one key user flow covered by a component test and a Playwright test, both run with one npm command.

6. Performance, accessibility and security (45 hours)

Core Web Vitals and how to measure them, images, fonts and compression, code splitting and lazy loading, prefetching and resource hints, HTTP caching and CDNs, accessibility audits and cross site scripting, with Content Security Policy as an optional extra. Milestone: a deployed app with Lighthouse performance and accessibility scores above 90 on a throttled mobile profile, and every keyboard problem fixed and noted.

7. Ship a real product (60 hours)

Scoping to three core flows, choosing how the app renders, loading, empty and error states, environment variables and secrets, CI on every pull request, deploy previews and a custom domain, error tracking and analytics, user feedback and a README that explains your decisions. Milestone: a deployed app on your own domain with at least five real users, CI that blocks broken pull requests, and a README with screenshots and trade-offs. The advice: build for a real person, a shop, a society or a family business, and cut scope until you can finish in six weeks.

Projects that fit

Depending on your framework the roadmap suggests a household meal planner or a collaborative whiteboard with conflict-free sync for React, a bilingual community services directory with right-to-left support for Vue, or clinic appointment booking with a live queue display for Angular. Two fit any framework: a privacy-preserving phishing detection browser extension and web accessibility regression testing in CI.

How it works on Sefism

Everything here is free to learn from. The public page shows all seven stages, with the first two stages open to read. Adding the roadmap to your dashboard uses credits: new members get starting credits and the first roadmap you add is free. Once added, every stage opens, you can track progress topic by topic, the weeks follow your own pace, and the companion cheat sheet opens with it. If a stage has you stuck, ask Tauseef a question, or book a 1:1 session to review your plan or your project.

The companion cheat sheet

The Frontend development cheat sheet follows the roadmap chapter by chapter, from how the web works to shipping, in React, Vue and Angular editions. Use it to revise after each stage and before a technical conversation.

Related on Sefism

• What to learn to become a web developer, and in what order
• How to choose between frontend, backend, mobile, cloud, security, data and AI
• I can follow tutorials but cannot build anything alone
• How to build a developer portfolio as a beginner
• Web development habits that outlast the framework
• Library picks used in the stages: The Odin Project, JavaScript.info, Frontend Mentor, MDN Web Docs and web.dev

What you can do afterwards

Apply for junior frontend roles with a deployed product, real users and tests to point at, contribute to an existing React, Vue or Angular codebase, or move on to Full stack development or Mobile development.

FAQ

How long does it take to become a frontend developer? This roadmap is about 395 hours: roughly eight months at 12 hours a week or a year at 8, ending with a shipped product rather than a certificate.

Should I learn React, Vue or Angular? The roadmap describes React as the choice with most jobs, Vue as the gentlest learning curve and Angular as common in enterprise teams. Check the job listings where you want to work, pick one and finish it.

Do I need TypeScript? Stage 5 teaches it in strict mode because professional frontend codebases share it, after you are comfortable with plain JavaScript.

Can I use AI tools while learning? Yes, carefully. The roadmap suggests using assistants to explain errors and review your diffs, and switching autocomplete off for the JavaScript stage so you type the logic yourself.