ZYH 开发教程
学习中心/计划与打卡
计划与打卡

24 周 Web 与小程序全栈学习计划

每周明确学习内容、动手任务、重点和验收结果的全栈主计划。

第 1–2 周:工具和 Web 原理#

第 1 周:文件、编辑器、终端和 Git#

  • 学习:路径、文件、浏览器、开发者工具、Git 保存版本;
  • 动手:建立学习仓库,制作一个只有标题和段落的页面;
  • 重点:知道文件保存在哪里;每个功能小步提交;
  • 验收:能从空目录建立 index.html,并完成 5 次有意义提交。

第 2 周:网页如何工作#

  • 学习:URL、DNS、HTTP 请求/响应、前端/后端/数据库区别;
  • 动手:观察 5 个真实网络请求,画出浏览器到服务器流程;
  • 重点:状态码、JSON、前端不能保存后端秘密;
  • 验收:能用生活语言解释一次完整请求。

第 3–6 周:HTML 与 CSS#

第 3 周:HTML 结构#

  • 学习:元素、属性、标题、段落、列表、链接、图片;
  • 动手:个人学习档案;
  • 验收:关闭教程写出完整文档结构。

第 4 周:语义、表格、表单和无障碍#

  • 学习:header/nav/main/section、表单标签、键盘操作;
  • 动手:课程表与留言表单;
  • 验收:不用鼠标可以完成表单,标题层级正确。

第 5 周:CSS 基础#

  • 学习:选择器、盒模型、层叠、字体、颜色、间距;
  • 动手:为学习档案建立统一视觉;
  • 验收:能从开发者工具找到被覆盖的样式。

第 6 周:布局与响应式#

  • 学习:Flex、Grid、媒体查询、移动优先;
  • 动手:手机单栏、平板两栏、桌面三栏;
  • 验收:320–1440px 没有主体横向滚动。

第 7–10 周:JavaScript 与 Web 项目#

第 7 周:JavaScript 语言基础#

  • 学习:变量、类型、数组、对象、条件、循环、函数;
  • 动手:控制台版任务数据;
  • 验收:能把一个需求拆成多个小函数。

第 8 周:DOM、事件和表单#

  • 学习:选择元素、更新内容、事件、客户端校验;
  • 动手:可新增、完成、删除的任务清单;
  • 验收:键盘可操作,无空任务和控制台错误。

第 9 周:异步、fetch 和浏览器存储#

  • 学习:Promise、async/await、请求状态、本地存储;
  • 动手:模拟 API,并保存任务;
  • 验收:加载、成功、空、失败四种界面都存在。

第 10 周:Web 项目验收#

  • 学习:项目结构、测试、性能、发布清单;
  • 动手:完成“学习进度网站”;
  • 验收:搜索、筛选、进度、响应式和键盘测试通过。

第 11–13 周:数据库#

第 11 周:表与基本 SQL#

  • 学习:表、类型、主键、CRUD、过滤、排序、分页;
  • 动手:建立图书借阅数据库;
  • 验收:不用答案完成 10 条单表查询。

第 12 周:关系、约束与 JOIN#

  • 学习:一对多、多对多、外键、连接、聚合;
  • 动手:完成 ER 图和热门/逾期查询;
  • 验收:能解释每个关系和约束。

第 13 周:事务、索引与备份#

  • 学习:ACID、回滚、执行计划、参数化查询、备份恢复;
  • 动手:事务化借书并完成恢复演练;
  • 验收:故意让第二步失败,确认数据全部回滚。

第 14–18 周:Node.js 后端#

第 14 周:Node.js 与原生 HTTP#

  • 学习:npm、模块、环境变量、异步 I/O、请求响应;
  • 动手:编写健康检查和时间接口;
  • 验收:能解释原生服务器收到请求的过程。

第 15 周:Express 与 REST#

  • 学习:路由、中间件、状态码、错误处理、分页;
  • 动手:内存版任务 CRUD;
  • 验收:无效输入、404、500 有统一响应。

第 16 周:后端连接 PostgreSQL#

  • 学习:连接池、参数化查询、迁移、事务;
  • 动手:任务数据持久化;
  • 验收:没有拼接用户输入形成 SQL。

第 17 周:登录、权限与安全#

  • 学习:密码哈希、Session/Token、授权、限流、校验;
  • 动手:注册登录与用户数据隔离;
  • 验收:修改任务 ID 也不能访问他人数据。

第 18 周:测试与 API 项目#

  • 学习:集成测试、日志、请求 ID、优雅关闭;
  • 动手:至少 15 个正常与失败测试;
  • 验收:完成任务管理 API 并通过权限测试。

第 19–21 周:微信小程序#

第 19 周:WXML、WXSS 和生命周期#

  • 学习:项目结构、绑定、列表、事件、Page、组件;
  • 动手:本地任务清单;
  • 验收:开发工具和真机基本流程通过。

第 20 周:网络、登录与后端复用#

  • 学习:wx.request、合法域名、登录 code、缓存;
  • 动手:调用线上任务 API;
  • 验收:断网可重试,账号之间数据隔离。

第 21 周:云开发与发布#

  • 学习:云数据库、存储、云函数、权限、体验版和审核;
  • 动手:书签云开发小项目;任务小程序体验版;
  • 验收:多身份权限测试和发布清单通过。

第 22–24 周:部署与毕业项目#

第 22 周:Linux、Nginx 与 HTTPS#

  • 学习:SSH、进程、服务、防火墙、反向代理、证书;
  • 动手:公网部署 API;
  • 验收:HTTPS 可用,数据库不直接暴露公网。

第 23 周:Docker、日志和备份#

  • 学习:镜像、容器、卷、Compose、日志、健康检查;
  • 动手:容器化应用与数据库;
  • 验收:重建容器数据仍在,并完成恢复演练。

第 24 周:Web + 小程序毕业项目#

  • 动手:内容/任务/预约系统三选一,Web 和小程序共用后端;
  • 验收:功能、权限、移动端、真机、部署、备份全部通过;
  • 输出:架构图、数据模型、API 文档、测试报告、部署和复盘。

每周固定节奏#

日程做什么
第 1 天了解概念,跟做最小例子
第 2 天重做例子并改一个需求
第 3 天练习题或小功能
第 4 天故意制造错误并排查
第 5 天关闭教程独立完成
第 6 天项目整合、测试、写说明
第 7 天休息或 30 分钟复盘

需要暂停并复习的信号#

  • 代码能运行,但说不出每段的作用;
  • 一改需求就只能重新复制教程;
  • 遇到错误只会重装;
  • 同时开始多套课程;
  • 项目没有 README、测试或版本记录。

出现这些情况不是失败。回到上一周,用一个更小的例子独立做出来再继续。

可搜索标题、说明和正文Esc 关闭
从一个简单词开始试试“HTML”“数据库”“登录”或“部署”
在线练习修改代码并查看结果
运行结果