For resources and other roadmaps

https://roadmap.sh
Are you just getting started?

Front-end Visit the Beginner Version

Internet
How does the internet work?

What is HTTP?

Learn the basics Writing What is Domain Name? What

Semantic HTML Forms is hosting?

HTML and Validations DNS and how it works?

Accessibility Browsers and how they work?

SEO Basics

Git

CSS Learn the basics Learn the Basics Learn

Version Control Systems VCS

Making Layouts DOM Manipulation

Hosting

Responsive Design Fetch API / Ajax (XHR)

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 npm
look into di!erent frameworks with pre-built components such as Vue.js
pnpm
MUI, daisyUI, Chakra UI and Mantine.
Angular
yarn

CSS Architecture
Writing CSS Pick a Framework Package Managers

BEM
Tailwind Svelte
Vite
Par

Radix UI Solid JS esbuild

Webpa

CSS Preprocessors Qwik Webpack

Webpa

Shadcn UI Rollup
Ro

Sass Module Bundlers Parcel

Par

PostCSS
Task Runners npm scripts

Build Tools
Linters and Formatters Prettier

ESLint

Authentication Strategies
Testing your Apps Vitest
JWT, OAuth, SSO, Basic Auth, Session Auth etc

Jest

Web Security Basics Playwright

CORS HTTPS Learn the di!erence between Unit, Integration, and
Functional tests and learn how to write Cypress
Content Security Policy them with the tools listed on the right.

OWASP Security Risks

Next.js
React Remix
HTML Templates
Angular Universal
Web Components Custom Elements
Vue.js Nuxt.js
Shadow DOM
Svelte Svelte Kit
Type Checkers TypeScript

Server Side Rendering (SSR)

Apollo
Storage PRPL Pattern GraphQL
Web Sockets Relay Modern
RAIL Model
Server Sent Events
Using Lighthouse
Performance Metrics
Service Workers
Location Using DevTools Progressive Web Apps Static Site Generators
Notifications Calculating, Measuring
and improving performance
Device Orientation
Vuepress Astro
Payments
Performance Best Practices
Credentials Jekyll Eleventy

Learn di!erent Web Hugo Next.js

Electron
APIs used in PWAs
Nuxt.js Remix
Tauri

Flutter

Mobile Applications
Bonus Content Desktop Applications

React Native

Flutter

Ionic

NativeScript
Continue Learning with following relevant tracks

TypeScript Roadmap Node.js Roadmap