Personal Recommendation / Opinion
For resources and other roadmaps
Alternative Option - Pick this or purple
https://roadmap.sh
Order in roadmap not strict (Learn anytime)
Are you just getting started?
I wouldn't recommend
Front-end
Visit the Beginner Version
How does the internet work?
Internet
What is HTTP?
Learn the basics
What is Domain Name?
Writing Semantic HTML
HTML
What is hosting?
Forms and Validations
DNS and how it works?
Accessibility
Browsers and how they work?
SEO Basics
Git
CSS
Learn the basics
Learn the Basics
Making Layouts
Learn DOM Manipulation
Responsive Design
Fetch API / Ajax (XHR)
Version Control Systems
VCS Hosting
GitHub
JavaScript
GitLab
Bitbucket
We have trimmed down the CSS part for the sake of brevity.
However, I would recommend reading about CSS in JS,
React
CSS Modules, Styled Components, Vanilla Extract, Panda CSS
and look into di!erent frameworks with pre-built components
npm
Vue.js
pnpm
such as MUI, daisyUI, Chakra UI and Mantine.
Angular
yarn
CSS Architecture
Writing CSS
Pick a Framework
BEM
Tailwind
Svelte
Radix UI
Solid JS
esbuild
Webpack
Qwik
Webpack
Webpack
CSS Preprocessors
Package Managers
Vite
Parce
Rollup
Rollu
Shadcn UI
Sass
Module Bundlers
PostCSS
Task Runners
npm scripts
Linters and Formatters
Prettier
Build Tools
Parcel
Parce
ESLint
Authentication Strategies
Testing your Apps
Vitest
JWT, OAuth, SSO, Basic Auth, Session Auth etc
Jest
Web Security Basics
CORS
HTTPS
Playwright
Learn the di!erence between Unit, Integration,
and Functional tests and learn how to write
Content Security Policy
Cypress
them with the tools listed on the right.
OWASP Security Risks
Next.js
HTML Templates
Web Components
Custom Elements
Shadow DOM
Type Checkers
React
Remix
Angular
Universal
Vue.js
Nuxt.js
Svelte
Svelte Kit
TypeScript
Server Side Rendering (SSR)
Storage
PRPL Pattern
Web Sockets
RAIL Model
Server Sent Events
Performance Metrics
Service Workers
Using Lighthouse
Location
Using DevTools
Notifications
Calculating, Measuring
Device Orientation
and improving performance
Payments
Apollo
Relay Modern
Progressive Web Apps
APIs used in PWAs
Static Site Generators
Vuepress
Astro
Jekyll
Eleventy
Hugo
Next.js
Nuxt.js
Remix
Performance Best Practices
Credentials
Learn di!erent Web
GraphQL
Electron
Tauri
Flutter
Bonus Content
Mobile Applications
Desktop Applications
React Native
Flutter
Ionic
NativeScript
Continue Learning with following relevant tracks
TypeScript Roadmap
Node.js Roadmap