每天只做一个小动作：理解概念、拆页面、写清楚 AI 任务、改样式、部署、收反馈。
- 学习结果
- 得到一份 30 天学习计划，从完全小白过渡到能和 AI 协作做出一个小产品。
- 时长
- 30 天计划
- 难度
- 零基础
- 核验
- 尚未进入本轮核验
正文
三十天路线围绕一个作品展开。选择十条资料的导航站，限定列表、详情与分类筛选；它能练习HTML、CSS、数据、路由和部署，不需要先做注册收款。每天完成一个可见改动，比只看课程更容易发现自己不懂什么。
第一周建立文件与浏览器的联系。第1至2天观察三个网页的标题和链接；第3至4天写本地HTML并改文字；第5至6天用CSS调宽度和间距；第7天复盘。产物是一页能打开的资料介绍，不要求背完语法。
第二周制作复用卡片。第8至10天加图片与说明；第11至12天做手机单列和桌面多列；第13天处理空列表及长标题；第14天整理公共样式。只借鉴信息组织，不复制商标、付费图片和他人正文。
第三周用数据生成页面。第15至17天统一title、slug、category、url字段；第18至19天按分类筛选；第20天连接列表与详情；第21天检查重复slug和失效链接。第十一条资料应只需新增数据，不用复制整页。
第四周部署并修复反馈。第22至23天构建并确认输出目录；第24天部署；第25至26天请三位读者用手机查资料；第27至28天修复问题；第29天整理来源；第30天写作品说明。真实链接比课程截图更能检验成果。
问题决定补课顺序。数组不懂就补对象与遍历，布局错位就补CSS，线上404就查路由和部署，不必先学微服务。能独立新增资料、定位报错、构建部署才算完成维护循环。三十天不是收入或就业保证，时间不足可按相同周产物延长周期。
学习步骤
- 第 1 周只建立概念：产品结构、网页、数据、域名、部署、AI 协作方式。
- 第 2 周练页面：拆 5 个产品首页，仿写一个静态页面，学会改文字、颜色和布局。
- 第 3 周练数据：用 JSON 或表格维护项目、工具、文章内容，理解列表和详情页。
- 第 4 周练上线：部署、检查移动端、收集反馈、记录问题、让 AI 做一次小改版。
- 每周做一次复盘：我学会了什么、哪里还不懂、下周要做出的具体产物是什么。
场景拆解
三十天上线资料导航
导航站保存十条公开资料的名称、分类、链接与简介，不收集个人数据。每周保留一个可打开的产物，第30天完成一次从修复到部署的维护操作。
- 第7天完成单页，第14天完成卡片及窄屏布局。
- 第21天从数组生成列表和详情，增加第十一条资料。
- 第30天请三位读者查找资料，修复一项问题并记录部署。
完成标准是自己能新增资料并解释页面如何生成，另一台设备能访问最新版本；没有完成的周产物应补齐，不通过换框架掩盖旧问题。
补充材料
思维导图、练习、清单和参考资料可按需展开。
01 思维导图和离线文件
适合读完后下载到自己的知识库里继续整理。
30 天的四个学习阶段
- 第 1 周：产品结构与网页概念
- 第 2 周：拆页面、改文字与布局
- 第 3 周：JSON、列表与详情数据
- 第 4 周：部署、移动端与反馈
每周留下什么学习证据
- 概念阶段：术语表与结构图
- 页面阶段：可预览的静态页面
- 数据阶段：内容数据与列表页
- 上线阶段：部署链接与问题记录
学习进度不等于教程数量
- 看懂教程需要通过独立练习确认
- 一次小改动比同时学习多个框架可检查
- 公开访问与真实反馈属于上线练习
- 周复盘记录已掌握内容与下一项产物
02 实践练习
根据文章内容记录自己的判断与依据。
三十天上线资料导航
将三十天分成单页、卡片、数据、部署四个周产物，按可见操作安排每天任务，并在最后独立完成一次维护循环。
练习场景
导航站保存十条公开资料的名称、分类、链接与简介，不收集个人数据。每周保留一个可打开的产物，第30天完成一次从修复到部署的维护操作。
准备材料
- 安排可持续的每日学习时间。
- 选十条可公开引用的资料。
检查点
- 哪项维护动作仍完全依赖别人，缺的概念是什么？
练习步骤
01 / 排第一周
时间： 20-30 分钟
目标： 将概念绑定可见成果
操作：
- 分配观察、HTML、CSS与复盘任务。
- 每天只保留一个可检查改动。
参考结果： 第3天改标题；第5天限制正文宽度。
预期产出： 七天任务表。
检查： 每天都有页面改动或观察记录。
02 / 完成数据周
时间： 20-30 分钟
目标： 确认数据驱动复用结构
操作：
- 建立统一字段并生成列表。
- 增加第十一条并打开详情。
参考结果： 新增数据后出现卡片与详情链接。
预期产出： 数据和页面记录。
检查： 新增资料不用复制组件。
03 / 交付作品
时间： 20-30 分钟
目标： 确认能够重复维护
操作：
- 在另一台设备完成查找。
- 记录修复、构建、部署全过程。
参考结果： 选择设计分类，打开资料原站。
预期产出： 作品链接与维护步骤。
检查： 能独立重复新增、构建、部署。
完成检查
- 每天都有页面改动或观察记录。
- 新增资料不用复制组件。
- 能独立重复新增、构建、部署。
03 清单、模板和关键词
用于项目记录和自查。
项目记录
30 天计划表：____每日任务：____每周产物：____术语表：____练习页面：____部署链接：____反馈记录：____
周计划表
周次：；产物：；每天可用时间：；具体任务：；需要理解概念：；卡住时复现步骤：；周末演示：。例：第3周只加数据列表和分类筛选，不同时引入账号。任务必须能在文件或页面中观察。
作品维护表
数据文件：；字段：title、slug、category、url；启动命令：；构建命令：；输出目录：；部署链接：；新增资料步骤：；已知问题：；来源许可：；手机检查日期：。独立完成一次修改与部署后填写。
关键概念
- 30 天计划表
- 每日任务
- 每周产物
- 术语表
- 练习页面
- 部署链接
- 反馈记录
容易误判
- 一上来学太多编程语法
- 只收藏内容不形成作品
- 跳过部署和反馈
- 没有把问题记录下来反复问 AI
04 工具和参考资料
本篇涉及的工具和参考链接。
可参考工具
- Notion
- roadmap.sh
- MDN
- Codex
- Cloudflare Pages