阶段一：前端入门
阶段说明
- 学习周期：8 周
- 建议投入：每天 2-3 小时，每周学习 6 天，复盘和休息 1 天
- 前置要求：掌握基本的计算机操作，具备 C 语言和数据结构基础
- 阶段目标：掌握 HTML、CSS 和原生 JavaScript，能够独立完成静态页面和基础交互项目
主要学习资料
HTML 和 CSS 统一参考黑马程序员的《前端 Web 开发 HTML5+CSS3+移动 Web 视频教程》。课程共 200 节，前四周按视频分 P 顺序学习。
视频仅用于学习知识点和页面实现思路，不要求下载课程源码、切图或其他配套素材，也不要求完成视频中的案例项目。HTML/CSS 实践统一使用提供的官网蓝湖设计图及其可导出资源；蓝湖中没有对应效果的知识点，可以使用纯色块和自编文字完成最小练习。
JavaScript 参考视频待定。确定课程后，再把第 6-8 周的知识点映射到具体视频章节。
阶段成果
完成本阶段后，应能够：
- 使用语义化 HTML 搭建结构清晰的网页
- 使用 CSS 完成 PC 端、移动端和响应式布局
- 根据蓝湖设计图独立还原纯静态官网
- 使用 JavaScript 处理数据并实现基础业务逻辑
- 使用 DOM 和事件完成网页交互
- 使用浏览器开发者工具定位常见问题
- 使用 Git 和 GitHub 管理并提交 2048 游戏项目
周计划
| 周次 | 学习主题 | 视频范围 | 本周成果 | 详细计划 |
|---|---|---|---|---|
| 第 1 周 | HTML 与 CSS 入门 | P1-P42 | 完成基础内容页面 | 查看计划 |
| 第 2 周 | CSS 盒模型与布局 | P43-P80 | 完成蓝湖官网的基础组件和局部布局 | 查看计划 |
| 第 3 周 | PC 端网页综合布局 | P81-P130 | 完成蓝湖官网 PC 端主体 | 查看计划 |
| 第 4 周 | CSS3、移动端与响应式 | P131-P200 | 使用蓝湖官网内容完成高级样式与适配练习 | 查看计划 |
| 第 5 周 | 官网蓝湖设计图还原 | 独立项目 | 完成纯静态官网校对与验收 | 查看计划 |
| 第 6 周 | JavaScript 基础 | 参考视频待定 | 完成基础可玩控制台版 2048 | 查看计划 |
| 第 7 周 | DOM、Git 与 2048 网页化 | 参考视频待定 | 接入 DOM，并补充计分与重开 | 查看计划 |
| 第 8 周 | 2048 蓝湖设计图还原与验收 | 2048 蓝湖设计图 | 根据蓝湖设计图完善项目并验收 | 查看计划 |
阶段验收
项目一：官网蓝湖设计图还原
- 根据提供的蓝湖设计图，使用 HTML 和 CSS 完成页面还原
- 不使用前端框架或 UI 组件库
- 本项目不要求使用 Git 或提交至 GitHub
- 详细要求与验收标准见第 5 周计划
项目二：2048 游戏
- 使用 HTML、CSS 和原生 JavaScript 实现完整的 2048 游戏
- 根据提供的 2048 蓝湖设计图完成游戏界面还原
- 使用 Git 管理开发过程，并将项目提交至 GitHub
- 仓库必须包含项目说明文档
- 详细要求与验收标准见第 8 周计划
阶段完成清单
- 完成 HTML/CSS 课程 P1-P200 及对应练习
- 完成纯静态官网并通过验收
- 完成 JavaScript 基础练习
- 掌握 DOM 操作和常用事件处理
- 完成 2048 游戏全部功能和规则测试
- 2048 项目具有清晰、连续的 Git 提交记录
- 2048 项目已推送至 GitHub，并包含完整 README
- 能够独立讲解两个项目的结构和核心实现
附录：知识点参考
以下知识树仅用于查阅和复习，不属于周计划任务，也不纳入阶段验收：