Front-End Study Workspace

这个工作区按知识点分目录，便于你后续继续加入 CSS、JavaScript、DOM、TypeScript 等内容。

目录规则

• 01-html-structure：HTML 结构
• 02-css-layout：预留给 CSS
• 03-javascript-core：预留给 JavaScript
• 04-dom-events-async：预留给 DOM + 事件 + 异步
• 05-es6-plus：预留给 ES6+（现代 JS）
• 06-typescript：预留给 TypeScript
• 07-vue2：预留给 Vue2

当前可学内容

现在已经为你整理好 01-html-structure，里面包含：

• 讲义
• 分阶段练习
• starter.html 起始代码
• answer.html 参考答案

现在也已经整理好 02-css-layout，里面包含：

• CSS 讲义
• 分阶段案例
• starter.html / starter.css 起始代码
• answer.html / answer.css 参考答案

现在也已经整理好 03-javascript-core，里面包含：

• JavaScript 核心讲义
• 分阶段练习
• starter.js 起始代码
• answer.js 参考答案

现在也已经整理好 04-dom-events-async，里面包含：

• DOM + 事件 + 异步讲义
• 分阶段练习
• starter.html / starter.js 起始代码
• answer.html / answer.js 参考答案

现在也已经整理好 05-es6-plus，里面包含：

• ES6+（现代 JS）讲义
• 分阶段练习
• starter.html / starter.js 起始代码
• answer.html / answer.js 参考答案

现在也已经整理好 06-typescript，里面包含：

• TypeScript（类型系统）讲义
• 分阶段练习
• starter.ts 起始代码
• answer.ts 参考答案
• Vite + TypeScript 学习面板

现在也已经整理好 07-vue2，里面包含：

• Vue2（理解框架思想）讲义
• 分阶段练习
• starter.html / starter.js 起始代码
• answer.html / answer.js 参考答案

前七部分现在都已经补充到“核心主线 + 常见细分知识点”。

使用方式

1. 先阅读 01-html-structure/README.md
2. 再阅读 02-css-layout/README.md
3. 再阅读 03-javascript-core/README.md
4. 再阅读 04-dom-events-async/README.md
5. 再阅读 05-es6-plus/README.md
6. 再阅读 06-typescript/README.md
7. 再阅读 07-vue2/README.md
8. 按顺序完成每个练习目录
9. 先写 starter.html、starter.css、starter.js 或 starter.ts
10. 写完后再对照答案文件
11. 学 06-typescript 时，也可以进入 06-typescript 后执行 npm install 和 npm run dev

如果你后面要继续学其他知识点，我可以按同样结构继续给你补更多工程化目录。