Frontend Lộ trình học từ cơ bản đến nâng cao

Personal Recommendation / Opinion

For resources and other roadmaps

Alternative Option - Pick this or purple



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