Frontend Roadmap¶
- Roadmap: https://roadmap.sh/frontend
1. Internet¶
- 1.1 How does the internet work?
- 1.2 What is HTTP?
- 1.3 What is Domain Name?
- 1.4 What is hosting?
- 1.5 DNS and how it works?
- 1.6 Browsers and how they work?
2. HTML¶
- 2.1 Learn the basics
- 2.2 Writing Semantic HTML
- 2.3 Forms and Validations
- 2.4 Accessibility
- 2.5 SEO Basics
3. CSS¶
- 3.1 Learn the basics
- 3.2 Making Layouts
- 3.3 Responsive Design
4. JavaScript¶
- 4.1 Learn the Basics
- 4.2 Learn DOM Manipulation
- 4.3 Fetch API / Ajax (XHR)
5. Version Control Systems¶
- 5.1 Git
5.2 VCS Hosting¶
- 5.2.1 GitHub
- 5.2.2 GitLab
- 5.2.3 Bitbucket
6. Package Managers¶
- 6.1 npm
- 6.2 pnpm
- 6.3 yarn
7. Pick a Framework¶
- 7.1 React
- 7.2 Vue.js
- 7.3 Angular
- 7.4 Svelte
- 7.5 Solid JS
- 7.6 Qwik
8. Writing CSS¶
- 8.1 Tailwind
8.2 CSS Architecture¶
- 8.2.1 BEM
8.3 CSS Preprocessors¶
- 8.3.1 Sass
- 8.3.2 PostCSS
9. Build Tools¶
9.1 Linters and Formatters¶
- 9.1.1 Prettier
- 9.1.2 ESLint
9.2 Module Bundlers¶
- 9.2.1 Vite
- 9.2.2 esbuild
- 9.2.3 SWC
- 9.2.4 Webpack
- 9.2.5 Rollup
- 9.2.6 Parcel
10. Testing¶
- 10.1 Vitest
- 10.2 Jest
- 10.3 Playwright
- 10.4 Cypress
11. Authentication Strategies¶
- 11.1 JWT, OAuth, SSO, Basic Auth, Session Auth
12. Web Security Basics¶
- 12.1 CORS
- 12.2 HTTPS
- 12.3 Content Security Policy
- 12.4 OWASP Security Risks
13. Web Components¶
- 13.1 HTML Templates
- 13.2 Custom Elements
- 13.3 Shadow DOM
14. Type Checkers¶
- 14.1 TypeScript
15. SSR¶
- 15.1 React
- 15.1.1 Next.js
- 15.1.2 Astro
- 15.1.3 react-router
- 15.2 Angular
- 15.3 Vue.js
- 15.3.1 Nuxt.js
- 15.4 Svelte
- 15.4.1 Svelte Kit
16. GraphQL¶
- 16.1 Apollo
- 16.2 Relay Modern
17. Static Site Generators¶
- 17.1 Next.js
- 17.2 Astro
- 17.3 Vuepress
- 17.4 Eleventy
- 17.5 Nuxt.js
18. Mobile Apps¶
- 18.1 React Native
- 18.2 Flutter
- 18.3 Ionic
19. Desktop Apps¶
- 19.1 Electron
- 19.2 Tauri
- 19.3 Flutter
20. Performance Best Practices¶
20.1 Measure & Improve Performance¶
- 20.1.1 PRPL Pattern
- 20.1.2 RAIL Model
- 20.1.3 Performance Metrics
- 20.1.4 Using Lighthouse
- 20.1.5 Using DevTools
21. PWAs¶
- 21.1 Storage
- 21.2 Web Sockets
- 21.3 Server Sent Events
- 21.4 Service Workers
- 21.5 Location
- 21.6 Notifications
- 21.7 Device Orientation
- 21.8 Payments
- 21.9 Credentials