Roadmap · Build products
Frontend development
Opens with creditsFor beginners and career switchers who want to build the parts of the web people use, and for backend developers filling in the browser side. By the end you can ship a typed, tested, accessible and fast app in React, Vue or Angular, deployed with real users on it.
Curated by Tauseef Fayyaz7 stages, 63 topics~18 months at a few hours a weekBy the end, you will be able to
- 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
The path
7 stages, in the order to learn them. Open one to start.
1How the web works, HTML and CSSWhat happens between typing a URL and seeing a page, then the structure and styling of that page: semantic HTML, accessible forms, the box model, Flexbox, Grid and layouts that work on a phone first.9 topics · ~3 months
- 1From URL to page: DNS, TCP, TLS and HTTPWhen you type a web address (a URL), the browser first asks DNS, the internet's phone book, for the server's IP address.
- 2HTTP methods, status codes and headersEvery exchange between browser and server is an HTTP request followed by a response.
- 3Semantic HTML, headings and landmarksSemantic HTML means choosing the element that says what the content is.
- 4Accessible formsForms are where most accessibility failures hurt real people, because a form nobody can fill in is a dead end.
- 5The box model, the cascade and specificityEvery element is a box made of layers: the content, then padding, then a border, then margin outside it.
- 6FlexboxFlexbox lays out the children of a box in one direction, either a row or a column.
- 7CSS GridCSS Grid lays out children in rows and columns at the same time.
- 8Responsive, mobile first layoutResponsive design means one page that works on everything from a 360px wide phone to a wide monitor.
- 9Keyboard and screen reader basicsMany people use the web without a mouse: with a keyboard, a switch device or a screen reader, which reads the page aloud.
9 in this stageOpen this stage2JavaScript and the browserThe language itself, then using it in the browser: the DOM, events, fetch and asynchronous code. This stage decides how comfortable every framework later feels.10 topics · ~4 months
- 1Values, types and equalityJavaScript has a few primitive types: string, number, boolean, null, undefined, bigint and symbol.
- 2Functions and scopeIn JavaScript, functions are values.
- 3Arrays, objects, destructuring and array methodsMost frontend code takes data from an API and turns it into something on screen, and that is array and object work.
- 4ClosuresA closure is a function that remembers the variables from the place it was created, even after the outer function has finished.
- 5How this worksThe keyword this gets its value from how a function is called, not where it is written.
- 6The DOM and eventsThe DOM is the browser's live tree of objects, built from your HTML.
- 7Promises and async/awaitAnything that takes time in the browser, such as a network request or a timer, is asynchronous.
- 8The event loopJavaScript in the browser runs on one main thread, which also draws the page and handles user input.
- 9Fetching data and handling every stateThe Fetch API is the browser's built in way to call a server.
- 10ES modulesModules split code into files that share only what they export.
10 in this stageOpen this stage- Git, npm and build toolingVersion control and pull requests on GitHub, then the tooling every frontend project runs on: npm packages and scripts, a Vite dev server and production build, and the browser DevTools.7 topics · ~4 weeksOpens with credits
- React and Next.jsBuilding interfaces from components: props, state, effects, forms and routing in React, then Next.js for file based routing, server rendering and data fetching.10 topics · ~4 monthsOpens with credits
- TypeScript and testingThe safety net every professional frontend codebase shares: TypeScript in strict mode, ESLint and Prettier for consistency, component tests with Vitest and end to end tests with Playwright.9 topics · ~2 monthsOpens with credits
- Performance, accessibility and securityMaking an app fast and usable for everyone, on the mid-range phones and patchy connections many users have: Core Web Vitals, loading strategy, caching and CDNs, accessibility audits and browser security.9 topics · ~2 monthsOpens with credits
- Ship a real productPut everything together in one product that real people use, built and deployed the way a team would: a clear scope, CI on every change, a live URL, feedback from users and a README that explains your decisions.9 topics · ~3 monthsOpens with credits
5 more stages, 44 more topics, free with an account.
You have seen the open stages of the Frontend development roadmap. Every topic it covers is listed above, and an account opens the rest: what each topic means, a question to check yourself, the courses, the practice and Tauseef's advice for every stage. Early access is open: sign up and your account is active shortly after.
Everything here is free to learn from. A few things, like adding a roadmap, keeping a cheat sheet or asking Tauseef a question, use credits. You get 15 when you join, your first roadmap is free, and if you are learning seriously and run out, you can ask for more. Credits only make sure the platform goes to people who are actually learning.
Related on Sefism
Picked from the other libraries by shared topics.
Best practices
See all- React Best PracticesModern React best practices for 2026: pure components, lean state, fewer effects, React Compiler, form actions, accessibility and testing.
- Modern CSS Best PracticesModern CSS best practices: cascade layers, low specificity, custom properties, Grid and Flexbox layout, responsive design, container queries, :has() and nesting, plus Tailwind CSS v4 tips.
- TypeScript Best PracticesModern TypeScript best practices for 2026: strict settings, TypeScript 7, modeling data with unions, safe narrowing, runtime validation, generics and typed linting.
Checklists
See all- Web Accessibility ChecklistA practical web accessibility checklist built on WCAG 2.2 level AA, with a severity and a concrete way to verify every check.
- Web Performance ChecklistA practical web performance checklist built on Core Web Vitals: LCP, INP and CLS, with a severity and a concrete way to verify every check.
Project structures
See all- React with Vite (TypeScript) project structureFor developers building a single-page React app that talks to a separate backend: an orders dashboard with auth, routing, server data, forms and tests. Product code is grouped by feature under src/features, shared pieces live in components and lib, and src/app wires providers, routes and guards together.
- Next.js (App Router) project structureFor React developers building a real web front end with Next.js: a shop dashboard with public pages, sign-in, orders and products, talking to a separate backend API. The app folder holds routes only, product code lives in feature folders, server-only code sits in src/server, and the browser side gets a proper React setup: providers, TanStack Query, forms with React Hook Form and Zod, and tests from unit to end-to-end.
- Angular project structureFor developers building a structured single-page app with Angular, the framework many enterprise and services companies use. The example is an orders dashboard with a login: standalone components, signals for state, typed forms, lazy-loaded feature routes, and a small core and shared layer around feature folders, grown from the ng new scaffold to a repository a team can run for years.
Career questions
See all- How do I choose between frontend, backend, mobile, cloud, cybersecurity, data and AI without trying them all for years?Do not try to pick the best field; pick the one whose daily problems you can tolerate on a bad day. Run a short, cheap experiment in two or three candidates, compare what you enjoyed doing rather than what sounded exciting, check the local job market, and commit for six to nine months.
- Should I become an AI engineer or stay a full stack developer?For most full stack developers this is not an either/or. AI engineering is largely full stack engineering plus models, evaluation and data. Keep your full stack strength, add AI features to real work, and move titles only when you have shipped AI work you can point to.
- What should I learn to become a web developer, and in what order?Learn the web platform first (HTML, CSS, JavaScript, how HTTP works), then one frontend framework, then a backend with a database, and build a real project at each stage. If you already know WordPress, you are not starting over: your HTML, CSS and PHP experience transfers.
Work with me
Stuck on something specific?
Writing only gets you so far. If you want an answer to your situation rather than the general case, book a session and we will work through it together. Sessions are free for approved Sefism members, and a few slots open each week.
- 1:1 Mentorship
- Fresh Graduate Mentorship
- Career Guidance
Brand deals, promos and partnerships: tauseeffayyaz@gmail.com