rou/front-end-example
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
00d3c9e4c6f7e9bb1eef2a0783baed9159230cbf
front-end-example/README.md
charlie f3bdaa4e88 feat: add TypeScript lessons and learning panel 
- Introduced a new script to check TypeScript lesson files for errors.
- Created a main TypeScript file to render lessons and their details.
- Added lesson definitions with starter and answer codes.
- Implemented a user interface for navigating and running lessons.
- Styled the application with CSS for a better user experience.
- Updated README to reflect the new TypeScript section and usage instructions.
2026-03-19 10:06:11 +08:00

2.7 KiB
Raw Blame History

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

当前可学内容

现在已经为你整理好 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 学习面板

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

使用方式

  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. 按顺序完成每个练习目录
  8. 先写 starter.html、starter.css、starter.js 或 starter.ts
  9. 写完后再对照答案文件
  10. 学 06-typescript 时，也可以进入 06-typescript 后执行 npm install 和 npm run dev

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