Front-End Development Roadmap: Learn HTML, CSS, JavaScript

Continue Learning with following relevant tracks
Front-end
Internet
How does the internet work?
What is HTTP?
What is Domain Name?
What is hosting?
DNS and how it works?
Browsers and how they work?
HTML
Learn the basics
Writing Semantic HTML
Forms and Validations
Accessibility
SEO Basics
CSS
Learn the basics
Making Layouts
Responsive Design
JavaScript
Fetch API / Ajax (XHR)
Learn DOM Manipulation
Learn the Basics
VCS Hosting
Version Control Systems
Git
Package Managers
GitHub
GitLab
Bitbucket
yarn
pnpm
npm
Pick a Framework
Angular
Vue.js
React
Svelte
Solid JS
Qwik
Writing CSSTailwind
CSS Architecture CSS PreprocessorsBEM
Sass PostCSS
Build Tools
Linters and Formatters
Module Bundlers
Parcel
Rollup
Webpack
esbuild
Vite
Prettier ESLint
Testing
Vitest Jest
Playwright
Cypress
Authentication Strategies
Web Security Basics
CORS HTTPS
Content Security Policy
OWASP Security Risks
Web Components Type Checkers
Custom Elements
HTML Templates
Shadow DOM
TypeScript
SSR
Svelte
Vue.js
Angular
React
react-router
Next.js
Nuxt.js
Svelte Kit
GraphQL
Apollo
Relay Modern
Static Site Generators
Vuepress
Nuxt.js
Astro
Eleventy
Next.js
PWAs Mobile Apps
React Native
Flutter
Ionic
Desktop Apps
TypeScript Nodejs
Electron
Tauri
Flutter
PRPL Pattern
RAIL Model
Performance Metrics
Using Lighthouse
Using DevTools
Performance Best Practices
Storage
Web Sockets
Server Sent Events
Service Workers
Location
Notifications
Device Orientation
Payments
Credentials
We’ve trimmed down the CSS part for the
sake of brevity. You should read about
CSS-in-JS, CSS Modules and Styled
Components. Also worth looking at are
Panda CSS, Shadcn UI, Mantine and more.
SWC
JWT, OAuth, SSO, Basic Auth, Session Auth
Personal Recommendation / Opinion
Alternative Option / Pick this or purple
Order not strict / Learn anytime
Find the detailed version of this roadmap
along with other similar roadmaps
roadmap.sh
Astro
Browser APIs
Measure & Improve Perf.
Fullstack
Visit Beginner Friendly Version