PHASE 0101—03
浏览器与界面基础
理解网络、语义 HTML、现代 CSS 和响应式视觉系统。
Native Web Engineering
从浏览器原理到生产级前端
不从框架脚手架开始，而是先看懂浏览器、HTML、CSS 与 JavaScript，再用 TypeScript、性能、工程化和测试把作品推到生产级。每一课都围绕同一个真实项目迭代，让零基础学习者真正建立可迁移的工程能力。
MODULES10
EST. TIME约 126 小时
FOR适合零基础学习者、只会照着框架教程写页面的初级开发者，以及希望系统补齐 Web 平台知识的工程师。
OUTCOME完成后，你将能独立设计、开发、调试并交付一个响应式、无障碍、高性能、严格类型且有完整自动化测试的前端应用。
/ LEARNING MAP
先看全局，
再走每一步。
路线被拆成四个能力阶段。每个阶段都有明确的通关证据，不靠“学完视频”判断进度。
PHASE 0204—06
语言与平台能力
深入 JavaScript、Web API、浏览器安全和 TypeScript 类型设计。
PHASE 0307—08
质量与体验
把 WCAG、Core Web Vitals、性能预算和包容性设计变成验收标准。
PHASE 0409—10
工程化与交付
掌握构建、架构、测试、调试、CI/CD 和跨浏览器质量门禁。
/ CURRICULUM
从原理到生产，
一步一步往前走。
每个模块包含白话解释、最小实验、常见错误、实战任务与官方资料。建议按顺序推进，并在完成项目后再进入下一阶段。
10 / 10
01
Web 如何工作：从 URL 到屏幕像素
先不急着背标签。你会亲手观察一次页面请求经历 DNS、HTTPS、HTTP、解析和渲染的全过程，并学会用开发者工具回答“页面为什么没出来、为什么这么慢”。
URL、DNS、TCP、TLS 与 HTTP/HTTPS 的职责边界请求方法、状态码、Content-Type、缓存与压缩HTML 解析、DOM、CSSOM、渲染树、布局、绘制与合成文件系统、终端、编辑器、浏览器开发者工具
开始学习↗
02
语义化 HTML：让内容天然可用
HTML 的价值不是“把字放上去”，而是告诉浏览器这段内容是什么。你会用原生元素构建清晰的信息结构、响应式媒体和无需重复造轮子的可靠表单。
doctype、语言、字符集、viewport 与文档元数据标题层级、main/header/nav/footer/article/section 等语义元素链接、按钮、列表、引用、代码与数据表格img、picture、srcset、sizes、audio、video 与 track
开始学习↗
03
现代 CSS：从盒模型到视觉系统
从级联和盒模型出发，逐步构建响应式布局、设计令牌和动态效果。重点不是记属性，而是学会让一套样式在不同内容、容器、设备和用户偏好下都稳定工作。
选择器、级联、继承、优先级与 Cascade Layers盒模型、格式化上下文、定位与层叠上下文颜色、排版、相对单位、函数与自定义属性Flexbox、Grid、Subgrid 与内容驱动的响应式布局
开始学习↗
04
JavaScript：语言核心与异步运行时
用可观察的小实验理解类型、作用域、闭包、原型和事件循环，再把这些知识装进一个真正有状态的应用。你会知道代码为什么工作，也知道它为什么会在边界条件下失败。
原始值、对象、引用、类型转换与严格相等函数、词法作用域、闭包、this 与执行上下文原型链、类、组合、Map、Set 与常用数组方法不可变更新、状态机思维与错误边界
开始学习↗
05
DOM 与 Web API：连接页面、网络和设备
JavaScript 是语言，DOM 和 Web API 才是它在浏览器中的工具箱。本课用数据仪表盘串起事件、网络、存储、后台线程、离线缓存和安全边界。
DOM 查询、创建、更新、事件传播与事件委托FormData、URL、History、Clipboard 与常用 ObserverFetch、Request、Response、AbortController 与 StreamsWeb Storage、IndexedDB 与存储配额
开始学习↗
06
TypeScript：让大型代码保持可预测
TypeScript 不是给 JavaScript 换一种语法，而是把业务规则变成编译器能检查的契约。你会从类型推断走到判别联合、泛型、类型体操边界和运行时校验。
类型推断、基本类型、对象类型和函数类型联合类型、交叉类型、字面量类型与控制流收窄判别联合、穷尽检查与不可能状态泛型、约束、keyof、映射类型与条件类型
开始学习↗
07
可访问性：为真实世界中的每个人设计
以 WCAG 2.2 AA 为基线，把语义、键盘、焦点、颜色、动态内容和多种输入方式纳入日常开发。自动扫描只是起点，最终还要像真实用户一样操作和验证。
可感知、可操作、可理解、稳健四项原则语义 HTML、无障碍树、名称与描述原生控件优先、ARIA 角色/状态/属性的边界键盘顺序、焦点管理、跳转链接和焦点可见性
开始学习↗
08
Web 性能：把速度变成可度量的体验
性能优化不是压缩几个文件，而是围绕加载速度、响应性和视觉稳定性建立假设、测量、改造和回归防护。你会同时理解实验室数据与真实用户数据。
DOM/CSSOM、关键渲染路径与资源优先级Core Web Vitals：LCP、INP、CLSDevTools、Lighthouse、Performance API 与真实用户监控响应式图片、现代格式、字体加载与 fetchpriority
开始学习↗
09
前端工程化：从本地代码到可靠交付
工程化的目的不是堆工具，而是让开发、检查、构建和发布过程可复现。你会围绕一个 TypeScript 组件包搭建依赖、规范、构建、版本和持续集成流程。
Node、npm、package.json、依赖类型和锁文件SemVer、升级策略与前端供应链基础ESM、开发服务器、HMR、打包与生产构建Vite、环境变量、资源处理、浏览器目标与 polyfill
开始学习↗
10
测试与毕业项目：建立上线信心
最后把所有能力汇入企业 AI 知识工作台。测试不追求一个漂亮覆盖率数字，而是根据风险选择单元、浏览器组件、端到端、无障碍与性能检查。
测试范围、风险矩阵和单元/集成/端到端分层纯函数、边界值、属性测试思想与测试替身Vitest、Browser Mode、fixture、mock 与 fake timerTesting Library 的用户视角查询和断言
开始学习↗
/ TOOLKIT
该学什么工具，
什么时候用。
工具不是收藏清单。先理解它解决的边界，再通过官方文档和项目任务形成自己的选择标准。
01 / DEBUG
Browser DevTools
调试 DOM、网络、性能、内存和无障碍树。
↗02 / REFERENCEMDN
Web 标准、兼容性和示例的首选知识入口。
↗03 / STANDARDHTML Standard
语义、表单、交互元素和浏览器行为的规范来源。
↗04 / DESIGN SYSTEMCSS
布局、容器查询、级联层、动画与视觉系统。
↗05 / LANGUAGEJavaScript
语言核心、事件循环、模块和异步编程。
↗06 / TYPE SYSTEMTypeScript
为大型代码库和 API 边界建立可验证契约。
↗07 / PLATFORMWeb APIs
网络、存储、Worker、Observer 和离线能力。
↗08 / ACCESSIBILITYWCAG / APG
可访问性成功标准和复杂组件交互模式。
↗09 / QUALITYLighthouse
性能、SEO、最佳实践和无障碍的自动审计。
↗10 / TOOLINGVite
现代开发服务器、生产构建和插件系统。
↗11 / TESTVitest
快速单元测试、覆盖率和浏览器模式。
↗12 / E2EPlaywright
跨浏览器端到端测试、Trace 和网络模拟。
↗/ PORTFOLIO
四个项目，
串起整条路线。
每个项目都要提交代码、决策记录、测试证据与复盘。越到后期，评价标准越接近真实生产环境。
语义化企业官网
无 JavaScript 也能阅读、导航和提交表单的响应式站点。
HTMLCSSA11y
离线数据工作台
Fetch、Worker、IndexedDB、Service Worker 和状态恢复。
Web APISecurityOffline
TypeScript 组件系统
设计令牌、类型安全 API、可访问组件、文档与版本发布。
TypeScriptArchitectureTesting
企业 AI 知识工作台
满足性能预算、WCAG、离线、跨浏览器测试和 CI 门禁。
PerformanceE2ECI/CD
/ CAPSTONE PROJECT
毕业项目
企业 AI 知识工作台：支持搜索、离线访问、主题切换、键盘操作和跨浏览器测试，并以性能预算、WCAG 2.2 AA 审计和持续集成作为上线门槛。
FINAL / BUILD前端基础知识库
可运行产品
测试与质量报告
架构决策与复盘
云端部署与演示
/ OFFICIAL LIBRARY
资料不求多，
先读一手来源。
这里优先收录规范、官方教程和维护者文档。课程负责讲人话，资料库负责让你继续深挖和核对版本。
01
CURRICULUM · 全阶段MDN Curriculum
由 Web 标准出发的前端核心能力地图。
↗02STANDARD · 进阶—高级HTML Living Standard
浏览器实现 HTML 的持续更新规范。
↗03COURSE · 入门—进阶CSS Learn
从盒模型、布局到层叠、动画和响应式设计。
↗04REFERENCE · 入门—高级JavaScript Guide
语言结构、对象模型、迭代、异步和模块。
↗05STANDARD · 高级ECMAScript 2026
JavaScript 语言的规范级定义与算法。
↗06HANDBOOK · 进阶TypeScript Handbook
从 JavaScript 类型化到泛型与高级类型设计。
↗07STANDARD · 进阶—高级WCAG 2.2
感知、操作、理解和健壮性的 AA 质量基线。
↗08PATTERN · 进阶—高级ARIA APG
Tabs、Dialog、Menu 等复杂组件的键盘与语义模式。
↗09COURSE · 高级Web Performance
关键渲染路径、资源加载、运行时性能和测量方法。
↗10METRICS · 高级Core Web Vitals
LCP、INP、CLS 的测量、阈值和真实用户数据。
↗11SECURITY · 高级Web Security
同源策略、CSP、XSS、权限与隐私边界。
↗12COMPATIBILITY · 全阶段Baseline
判断 Web 能力是否可在主流浏览器稳定使用。
↗/ FAQ
开始之前，
先把疑问说清楚。
01要先学框架还是 JavaScript？＋
先用原生 JavaScript 完成至少一个中型交互项目，再进入框架。这样遇到状态、事件、异步和性能问题时，你知道问题来自浏览器、语言还是框架。
02CSS 需要学到什么程度？＋
至少能独立完成响应式布局、设计令牌、组件状态、容器查询、动画降级和可访问主题。高级前端不应把所有视觉问题都交给 UI 库。
03TypeScript 能替代 JavaScript 基础吗？＋
不能。TypeScript 在 JavaScript 之上提供静态检查；运行时、闭包、原型、事件循环和异步行为仍然由 JavaScript 决定。
04怎样判断一个 Web API 能否上线？＋
先查 Baseline 和兼容性表，再做 feature detection、渐进增强和 fallback。实验性能力必须单独标识，不能只因为本机浏览器可用就默认上线。
05性能优化从哪里开始？＋
从真实数据和瓶颈开始：先测 LCP、INP、CLS 和资源瀑布，再针对图片、字体、长任务、布局抖动或缓存做最小改动，最后复测。
06作品集怎样体现高级能力？＋
不只展示页面截图，还要展示需求约束、架构决策、性能数据、无障碍证据、测试策略、事故或失败复盘，以及你为什么没有选择另一种方案。
继续探索其他知识库