Skip to content

Master Frontend

Main Navigation Trang chủ Lộ trình

Stage 0 — Foundation

Stage 1 — Build & Tooling

Stage 2 — Project 1: SaaS Landing

Stage 3 — Project 2: E-Commerce

Stage 4 — Project 3: Admin Dashboard

Stage 5 — Project 4: Social Feed

Stage 6 — Project 5: Design System

Stage 7 — Project 6: Legacy Migration

Stage 8 — Interview Prep

Appearance

Sidebar Navigation

Introduction

Lộ trình

Cách học hiệu quả

Stage 0 — Foundation

Overview

0.1 JS Engine & Runtime

0.1x Scheduler & Browser Task Scheduling

0.2 Browser Rendering Engine

0.3 Browser APIs

0.3x Web Components & Shadow DOM

0.4 JavaScript Core

0.5 TypeScript Advanced

0.6 HTTP & Networking

0.6x API Design & Backend Contract

0.7 Debugging Methodology

Stage 1 — Build & Tooling

Overview

1.1 Build Tool & Bundler

1.2 Package Manager

1.3 Git Teamwork

Stage 2 — Project 1: SaaS Landing + Blog

Overview

2.1 React Core & Framework Evolution

2.2 Next.js App Router

2.3 CSS Modern & Tailwind

2.4 Accessibility Engineering

2.5 Animation

2.6 Mobile Web

2.7 SEO Technical + i18n

2.8 Form Engineering + Server Actions

2.9 Browser Security

2.10 Frontend Security

2.11 Authentication Architecture

2.12 Testing Nền Tảng

2.13 Performance Measurement

2.14 CI/CD

2.15 Deploy & Observability Nền Tảng

Stage 3 — Project 2: E-Commerce Checkout

Overview

3.1 State Management: TanStack Query + Zustand

3.2 State Machine Áp Dụng (XState)

3.3 Form Engineering Nâng Cao

3.4 Payment & Idempotency

3.5 Error Handling & Resilience

3.6 PWA & Offline

3.6x Caching Patterns & Invalidation

3.7 Animation Nâng Cao & Micro-interactions

3.8 Mobile Web Nâng Cao

3.9 Testing Nâng Cao

Stage 4 — Project 3: Admin Dashboard

Overview

4.1 Redux Ecosystem

4.2 Data Visualization

4.3 Virtual Scroll & Web Workers

4.4 Data Layer Nâng Cao

4.5 Monorepo & Component Documentation

4.6 BFF Pattern

4.7 Frontend Architecture

4.8 Enterprise Patterns

4.9 Real-time & SSE

4.10 Observability

4.11 CI/CD Nâng Cao

4.12 Accessibility Sâu

4.13 RADIO Practice #1

Stage 5 — Project 4: Real-time Social Feed

Overview

5.1 WebSockets & Real-time

5.2 Optimistic Update Nâng Cao

5.3 Animation Nâng Cao & Motion

5.4 Mobile Web Real-time

5.5 AI Integration

5.6 File Upload & Web Workers

5.7 Dynamic SEO

5.8 RADIO Practice #2

Stage 6 — Project 5: Design System

Overview

6.1 Design Tokens

6.2 Radix UI & Accessibility Patterns

6.3 Custom Complex Components

6.4 Storybook, Chromatic & Publish

6.5 Micro-frontends

6.6 Dark Mode & Animation Tokens

6.7 Testing

6.8 Documentation & RFC/ADR

6.9 RADIO Practice #3

Stage 7 — Project 6: Legacy Migration

Overview

7.1 Migration Strategy

7.2 Web Components & Interop

7.3 Implement Migration Thực Chiến

7.4 Supply Chain Security

7.5 AI Coding Agent — Verify Workflow

7.6 Production Ops Đầy Đủ

7.7 Judgment & War Stories

7.8 RADIO Practice #4

Stage 8 — Tổng Hợp & Interview Prep

Overview

8.1 Portfolio Site

8.2 RADIO Mock Interview Cường Độ Cao

8.3 Live Coding Practice

8.4 Ôn Tập: Security + Testing + Observability

8.5 Behavioral & Đàm Phán Lương

8.6 Apply & Iterate

On this page

0.3x Web Components & Shadow DOM

TODO

Pager

Previous page0.3 Browser APIs

Next page0.4 JavaScript Core

Không timeline cứng. Chỉ có thứ tự module và Exit Criteria.

Master Frontend — Chương trình đào tạo Frontend Engineering

0.3x Web Components & Shadow DOM ​

0.3x Web Components & Shadow DOM