Frontend Roadmap

Step by step guide to becoming an Android developer.

Back to home

Legend

Propose
Alternatives
Options

1 Internet

How does the internet work?
What is HTTP?
Browsers and how they work?
DNS and how it works?
What is hosting?

2 HTML, CSS & JavaScript

HTML:
Learn the basics
Writing Semantic HTML
Forms and Validations
Accessibility
CSS:
Learn the basics
Making Layouts
JavaScript:
Learn the basics
Learn DOM Manipulation
Fetch API / Ajax (XHR)

3 VCS & Package Managers

Version Control Systems:
Git
Repo Hosting Services:
GitHub
GitLab
Bitbucket
Package Managers:
npm
pnpm

4 CSS Deep Dive

Writing CSS:
Tailwind
CSS Architecture:
BEM
CSS Preprocessors:
Sass
PostCSS

5 Build Tools

Linters and Formatters:
Prettier
Module Bundlers:
Webpack
Rollup
Parcel
Task Runners / Build Tools:
Vite
esbuild
SWC

6 Pick a Framework

React
Vue.js
Angular
Svelte
Solid JS
Qwik

7 Web Security

HTTPS
Content Security Policy
OWASP Security Risks
Authentication Strategies

8 Testing

Vitest
Playwright
Cypress

9 Type Checkers

Web Components (Optional):
HTML Templates
Custom Elements
Shadow DOM

10 Server Side Rendering (SSR)

Next.js (React)
Nuxt.js (Vue)
SvelteKit (Svelte)
Astro

11 Advanced Topics

GraphQL:
Apollo
Relay Modern
Static Site Generators (SSG):
Eleventy
Mobile & Desktop Apps:
Mobile: React Native / NativeScript
Desktop: Electron / Tauri

12 Performance & APIs

Measure & Improve Performance:
RAIL Model
Performance Metrics
Using Lighthouse / DevTools
Browser APIs:
Storage
Web Sockets
Server Sent Events
Service Workers & PWAs

Visit the following related paths and keep learning.