前端工程实验室
文本章节 + 59 Lab 的系统化学习路径
👤For: 零基础前端学习者 / 想补齐 Web 基础的转行学员 / 需要复盘基础能力的工程师
⏱️4-6 周
📊Beginner
通过结构化文本章节与 66 个交互式实验交替学习，系统掌握 HTML、CSS 与 JavaScript。每个 Lab 以任务驱动方式提供实时预览与自动校验，帮助你在短周期内建立可迁移的前端基础能力。
30-Second Quick Start
先完成一个 15 分钟的布局 Lab，快速体验“边写边验收”的学习方式。
完成一个 Flexbox 卡片布局，并保证移动端可读性。建议从布局类 Lab 入手，先建立页面结构能力，再逐步叠加视觉和交互。
What You Will Learn
In this tutorial, you will learn:
- ✓掌握 HTML 语义化结构和基础可访问性实践
- ✓熟练使用 CSS 布局、视觉样式与响应式方案
- ✓完成常见 JavaScript DOM 交互与事件处理任务
- ✓形成可复用的前端练习与复盘路径
Chapter Overview
Quick preview by section - jump directly to what interests you.
Section
HTML 结构与语义
从页面骨架和语义标签开始，打好可维护、可访问的结构基础。
10 lessonsReading / Visual
- HTML 结构与语义化基础18分钟
- Lab: HTML 语义化基础15-20 min
- Lab: HTML 表单：联系表单20-25 min
- ... 7 more lessons
Section
CSS 样式与布局
掌握盒模型、布局系统和视觉层级，让页面既稳固又有表现力。
19 lessonsReading / Visual
- CSS 布局与视觉表达20分钟
- Lab: Flexbox 布局：三张卡片15-20 min
- Lab: CSS Grid：九宫格画廊10-15 min
- ... 16 more lessons
Section
JavaScript 交互
从 DOM 操作到事件流设计，把静态页面升级为可交互产品。
40 lessonsReading / Visual
- JavaScript 交互与状态22分钟
- Lab: JavaScript 变量与数据类型15-20 min
- Lab: JavaScript let/const 作用域15-20 min
- ... 37 more lessons