CASES
实战案例
把书本知识敲进真实项目里。这里收录 8 个我亲手做过的中小型项目，从待办清单到命令行工具，覆盖前端、全栈、后端与工具方向，每个案例都附完整步骤、关键代码与踩坑总结，照着做就能写出一个属于自己的作品。
PROJECTS
挑一个能动手的开始
按方向筛选，找到适合自己当前阶段的小项目。每张卡片都点得开，里面有完整的实现思路和可直接复用的代码片段。
前端
待办清单 Web 应用
从零用 HTML/CSS/JS 搭一个能增删改查的待办清单，本地持久化、状态切换、过滤展示，前端入门必做的第一个完整闭环。
入门 · HTML/CSS/JS
查看 →
前端
个人博客静态站
用纯 HTML 与 CSS 搭一个响应式个人博客首页与文章页，断点适配移动端，重点理解 Flexbox 与媒体查询的协作。
入门 · 响应式
查看 →
全栈
天气预报小工具
调用第三方天气 API，用 Fetch 异步获取城市天气并渲染到卡片上。从跨域、错误处理到加载态一次走完。
初级 · Fetch API
查看 →
工具
Markdown 编辑器
用正则把 Markdown 语法实时转成 HTML，左侧输入右侧预览。踩过的最大坑是正则贪婪匹配与转义顺序的处理。
中级 · JS/正则
查看 →
前端
简易计算器
一个支持四则运算、连续输入与小数点的计算器。核心是状态机思路管理运算符、操作数与显示三个状态之间的流转。
入门 · 状态管理
查看 →
前端
图片懒加载组件
用 IntersectionObserver 实现图片进入视口才加载，并支持占位骨架与失败重试。比传统 scroll 监听优雅太多。
中级 · IntersectionObserver
查看 →
全栈
番茄钟计时器
25 分钟专注 + 5 分钟休息的循环。用 setInterval 驱动倒计时，localStorage 持久化今日完成个数与设置。
中级 · 定时器/本地存储
查看 →
后端
命令行待办工具
用 Python 写一个 CLI 待办：argparse 解析参数、JSON 文件持久化任务列表。从 Web 跳到终端，理解程序边界。
中级 · Python/CLI
查看 →