前端工程实验室

文本章节 + 59 Lab 的系统化学习路径

👤适合：零基础前端学习者 / 想补齐 Web 基础的转行学员 / 需要复盘基础能力的工程师

⏱️4-6 周

📊入门

通过结构化文本章节与 66 个交互式实验交替学习，系统掌握 HTML、CSS 与 JavaScript。每个 Lab 以任务驱动方式提供实时预览与自动校验，帮助你在短周期内建立可迁移的前端基础能力。

30秒快速体验

先完成一个 15 分钟的布局 Lab，快速体验“边写边验收”的学习方式。

完成一个 Flexbox 卡片布局，并保证移动端可读性。

建议从布局类 Lab 入手，先建立页面结构能力，再逐步叠加视觉和交互。

在这个教程中，你将学会：

按大章节快速预览，直接跳到你想学的部分。

Section

学习导航

先明确如何学，再进入具体技术模块，避免“做了很多练习但没有迁移能力”。

1 节阅读/图文

Section

HTML 结构与语义

从页面骨架和语义标签开始，打好可维护、可访问的结构基础。

10 节阅读/图文

Section

CSS 样式与布局

掌握盒模型、布局系统和视觉层级，让页面既稳固又有表现力。

19 节阅读/图文

Section

响应式与可访问性

面向真实设备与真实用户，建立多端适配与基础可访问能力。

1 节阅读/图文

Section

JavaScript 交互

从 DOM 操作到事件流设计，把静态页面升级为可交互产品。

40 节阅读/图文

Section

综合项目

把前面的练习组合成可展示作品，形成可复用的个人前端训练闭环。

1 节阅读/图文