Web 开发

时长

28–38 周

先修

计算机科学基础

可从事

前端开发, 后端开发, 全栈开发

适合想做出别人马上就能在浏览器里使用的东西的人。

1. 阶段 1: HTML、CSS 和 Web 的工作原理 ， 4–6 周

   学习内容

   • 语义化 HTML
   • 无障碍
   • 用 Flexbox 和 Grid 做 CSS 布局
   • 响应式设计
   • 浏览器开发者工具

   免费资源

   • Learn web development 课程， MDN (Mozilla)
   • Learn HTML, CSS and Accessibility 课程， web.dev (Google Chrome team)

   动手做: 一个在手机上也好用、并能通过无障碍检查的个人主页。

   进入下一阶段的标准: 你能从零复刻一个你喜欢的网站的布局。

2. 阶段 2: 深入 JavaScript ， 6–8 周

   学习内容

   • DOM 和事件
   • 函数、闭包和对象
   • Promise 和 async/await
   • 从 API 获取数据
   • 模块

   免费资源

   • The Modern JavaScript Tutorial 书， javascript.info
   • The Odin Project 课程， The Odin Project (open source)

   动手做: 一个使用公开 API 的应用，例如天气查询或图书搜索。

   进入下一阶段的标准: 你能不用框架做出一个交互式页面。

3. 阶段 3: 前端框架和 TypeScript ， 6–8 周

   学习内容

   • 组件和状态
   • 表单和校验
   • 路由
   • TypeScript 类型
   • 组件测试

   免费资源

   • Learn React 文档， React team
   • The TypeScript Handbook 文档， Microsoft
   • Full Stack Open 课程， University of Helsinki

   动手做: 一个多页面应用，包含表单、保存的状态和一些测试。

   进入下一阶段的标准: 你能解释组件在什么时候、为什么会重新渲染。

4. 阶段 4: 后端和数据库 ， 8–10 周

   学习内容

   • 深入理解 HTTP
   • 构建 REST API
   • 登录、会话和令牌
   • PostgreSQL
   • 自动化测试

   免费资源

   • Learn Node.js 文档， OpenJS Foundation
   • HTTP 文档， MDN (Mozilla)
   • PostgreSQL Tutorial 文档， PostgreSQL Global Development Group

   动手做: 一个带用户账户和数据库、写好测试并被你的前端使用的 API。

   进入下一阶段的标准: 你能设计 API、安全地存储数据并为它写测试。

5. 阶段 5: 安全地上线 ， 4–6 周

   学习内容

   • 部署应用
   • 环境变量和密钥
   • HTTPS
   • 持续集成
   • OWASP Top 10

   免费资源

   • OWASP Top 10 文档， OWASP Foundation
   • OWASP Cheat Sheet Series 文档， OWASP Foundation
   • GitHub Actions documentation 文档， GitHub

   动手做: 部署你的完整应用，每次推送都自动运行测试，并对照 OWASP Top 10 检查。

   进入下一阶段的标准: 陌生人在使用你的应用，而且它出问题时你会知道。

返回所有路线