🧪 Frontend Lab
交互式前端学习实验室
🌐 Stage 1: HTML 基础
🌐
HTML 语义化基础
入门
🌐
HTML 表单：联系表单
入门
🌐
HTML 表格：数据展示
入门
🌐
HTML 列表：结构化内容
入门
🌐
HTML 媒体：图片与多媒体
入门
🌐
HTML 链接：导航与锚点
入门
🌐
HTML 元信息：SEO 基础
中级
🌐
HTML 可访问性：无障碍网页
中级
🌐
HTML 音视频：原生媒体
中级
🎨 Stage 2: CSS 布局与样式
🎨
Flexbox 布局：三张卡片
入门
🎨
CSS Grid：九宫格画廊
入门
🎨
CSS 盒模型：卡片组件
入门
🎨
CSS 定位：通知徽章
中级
🎨
CSS 动画：加载动画
中级
🎨
CSS 变换与 3D
中级
🎨
CSS 滤镜效果
入门
🎨
CSS 渐变：炫彩 Hero 区域
入门
🎨
CSS 阴影：光影效果
入门
🎨
CSS 背景：多彩背景
中级
🎨
CSS 裁剪：创意形状
高级
🎨
CSS 响应式设计
中级
🎨
CSS 自定义属性
中级
🎨
深色模式实现
中级
🎨
CSS 排版：博客文章
入门
🎨
CSS 按钮：交互样式
入门
🎨
表单样式设计
中级
🎨
CSS 伪元素
中级
⚡ Stage 3: JavaScript 核心
⚡
JavaScript 变量与数据类型
入门
⚡
JavaScript let/const 作用域
入门
⚡
JavaScript 运算符
入门
⚡
JavaScript 条件语句
入门
⚡
JavaScript 循环
入门
⚡
JavaScript 函数
入门
⚡
JavaScript 箭头函数
入门
⚡
JavaScript 默认参数
入门
⚡
JavaScript 模板字符串
入门
⚡
JavaScript 解构赋值
入门
⚡
JavaScript 展开与剩余参数
中级
⚡
JavaScript 对象字面量增强
入门
⚡
JavaScript Class 基础
中级
⚡
JavaScript 迭代器与生成器
中级
⚡
JavaScript 防抖与节流
中级
⚡
JavaScript 模块模式
中级
⚡
JavaScript 发布订阅模式
中级
⚡
JavaScript 状态机模式
中级
⚡
JavaScript 记忆化缓存
中级
⚡
JavaScript 不可变数据更新
入门
⚡
JavaScript ES7 特性
入门
⚡
JavaScript includes 方法
入门
⚡
JavaScript 指数运算符
入门
⚡
JavaScript ES8 对象工具
中级
⚡
JavaScript 字符串补位
入门
⚡
JavaScript Async/Await 模式
中级
⚡
JavaScript 字符串方法
入门
⚡
JavaScript 数组
入门
⚡
JavaScript 对象
入门
⚡
JavaScript 数组高阶方法
入门
⚡
JavaScript Set 与 Map
入门
⚡
JavaScript 实用算法函数
中级
⚡
JavaScript DOM 操作基础
入门
⚡
JavaScript 事件处理
入门
⚡
JavaScript 异步编程
入门
⚡
JavaScript Promise 并发
中级
⚡
JavaScript 异步循环模式
中级
⚡
JavaScript 可选链与空值合并
入门
⚡
JavaScript 错误处理
入门
🔷 Stage 4: TypeScript
🔷
TypeScript 基本类型
入门
🔷
枚举与联合类型
入门
🔷
Interface 接口定义
入门
🔷
声明文件
入门
🔷
类型收窄
中级
🔷
泛型基础
中级
🔷
Utility Types 工具类型
中级
🔷
类型守卫
中级
🔷
模块与类型导出
中级
🔷
类与类型
中级
🔷
异步类型
中级
🔷
严格模式
中级
🔷
映射类型
高级
🔷
条件类型
高级
🔷
TypeScript 综合练习
高级
⚛️ Stage 5: React
⚛️
JSX 基础
入门
📖
什么是 JSX？
●
❓
JSX 语法检测
○
💻
创建 JSX 组件
○
💻
列表渲染
○
⚛️
组件与 Props
入门
⚛️
useState Hook
入门
⚛️
事件处理
入门
⚛️
条件渲染
入门
⚛️
列表与 Key
入门
⚛️
useEffect Hook
中级
⚛️
表单处理
中级
⚛️
状态提升
中级
⚛️
useContext Hook
中级
⚛️
自定义 Hook
高级
⚛️
React 综合练习
高级
Login / Sign Up
☰
1/4
JSX 基础
react · beginner · 15-20 min · Step 1/4
重置进度
← 退出
📖
❓
💻
💻
理解 JSX 语法——用 HTML 的壳写 JavaScript 的魂
我已理解，继续下一步
← ← 上一步
下一步 → →