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