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 Version Control Systems VCS Hosting Fetch API / Ajax (XHR) Responsive Design 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 CSS Architecture Writing CSS BEM Tailwind Svelte Radix UI Solid JS yarn Pick a Framework CSS Preprocessors Package Managers Vite Parce esbuild Webpack Webpack Webpack Qwik 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 React HTML Templates Web Components Custom Elements Shadow DOM Type Checkers 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
