Menu
CoddyTech
学习路径

全栈 Web 开发学习路线

按全栈 Web 开发者真正需要的顺序排列的免费课程:用 HTML、CSS 和 JavaScript 搭页面,用 TypeScript 和 React 写界面,用 Next.js 做服务端,用 SQL 管数据,最后用 Linux、Git 和 Docker 把它发布上线。JavaScript 前后端通用,所以你只学一门语言,就能从头用到尾。每节课都在浏览器中运行,每个课程单元结束时都有一张免费证书。

751,712+ 名学习者已报名这些课程

880 节课969 个挑战4,344 道测验题

全栈开发者路径,一步一步来

7 门课程16 个单元880 节课969 个挑战4,344 道测验题

每一步都是 Coddy 上现有的课程。你可以按顺序学,也可以直接跳到你还缺的那一门:无论哪种方式,进度都会按课程分别保存。

  1. 1
    开始这一步开始元素、链接、表单和语义化标记,然后在两个 CSS 单元中学习选择器、盒模型、flexbox、grid、响应式布局和过渡效果。你在这里写的表单,就是之后服务器要读取的那些。开始专属页面
  2. 2
    开始这一步开始用三个单元学习基础、逻辑与控制流、对象与类,然后是 TypeScript:类型、接口、泛型,以及如何读懂编译器的报错。这是你在浏览器和服务器上都要写的语言,所以它占的时间比其他任何一步都多。开始专属页面
  3. 3
  4. 4
    开始这一步开始组件、JSX、props、state、事件、列表和受控表单,最后一步一步做出一张小小的社交卡片。React 是界面层,下一步会把它放到服务器上运行。开始专属页面
  5. 5
    开始这一步开始路由和布局、服务端组件与客户端组件、在服务器上获取数据、用路由处理器编写自己的 API 接口、用服务端操作处理表单、加载与错误状态,最后是一个分九步完成的餐厅应用,包含购物车、筛选、评价和实时搜索。你会在这里写后端。开始专属页面
  6. 6
  7. 7
  8. 8
    开始这一步开始镜像、容器、Dockerfile、卷和网络。容器把你的应用和它运行所需的一切打包在一起,如今大多数 Web 应用都是这样发布到服务器上的。开始专属页面
你将获得
学编程所需的一切

在实践中学习

编写真实代码、查询数据库、搭建网站、掌握 AI 提示词。我们的互动课程涵盖现代开发者需要的每一项技能。

playground.js
代码编辑器
1const greeting = "Hello, Coddy!"
2function sayHi(name) {
3    return greeting + " " + name
4}
5
bottombar Collapse icon
测试 #1test Case Success icon
测试 #2test Case Success icon
测试 #3test Case Failure icon
输入
"Alex"
输出
"Hello, Coddy! Alex"

打造你的连胜

坚持下去,看着自己不断进步!记录每天的编程习惯,用冻结天数保护连胜,每天打卡都能赢取奖励。

12 天连胜

明天再来,保持你的连胜!

fire Filled icon
left icon

January 2026

right icon

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

21

22

23

24

25

26

27

28

29

30

product Double Or Nothing icon

加倍或归零

第 5 天,共 7 天

fire Freeze icon

连胜冻结

2 left

随时随地写代码

随时随地继续你的编程学习旅程!无需配置,无需下载:打开就能写代码。支持 iOS、Android 和 Web,评分高达 4.9 星。

Python
7连胜
250分数
5能量
变量
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Right Done icon
journey Hex Done Base iconjourney Hex Done Shadow iconjourney Hex Done Top iconjourney Lesson Done icon
journey Path Left Done icon
journey Hex Active Base iconjourney Hex Active Shadow iconjourney Hex Active Top iconjourney Lesson Theory Challenge icon
继续
journey Path Right icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson Theory Challenge icon
journey Path Left icon
journey Hex Locked Base iconjourney Hex Locked Shadow iconjourney Hex Locked Top iconjourney Lesson All icon
学习旅程
目标
排行榜
个人主页
4.9
星星星星星
评分

你并不孤单

在全球排行榜上一较高下,邀请好友赢取奖励,为彼此的成就喝彩。和好友一起编程更有趣!

挑战者联赛
挑战者联赛前 7 名晋级
leaderboard First icon1
avatar 1 icon
fire Filled icon
Alex7+ Days
2840
leaderboard Second icon2
avatar 2 icon
fire Filled icon
Jordan7+ Days
2650
leaderboard Third icon3
avatar 3 icon
fire Filled icon
Sam7+ Days
2420
4
avatar 4 icon
Casey
2180
5
avatar placeholder icon
fire Filled icon
Morgan7+ Days
1950
leaderboard Arrow Up icon晋级区leaderboard Arrow Up icon

多种学习方式

阅读、收听、自我测验、问 AI,或者查阅学过的任何内容。每节课都配合你的节奏。

变量入门
音频

变量是一个有名字的容器,用来存储值,方便你在程序后面引用。

在 Python 中,创建变量只需写下名字、一个等号,再写上要存储的值。

值可以随时间变化。给这个名字重新赋值,它就会指向新的值。

1xSarah

获得证书

每完成一门课程都能获得证书。把证书添加到你的 LinkedIn 个人资料和简历中,向雇主展示你的编程能力。

Coddy结业证书
兹证明张三已成功完成
python iconPython 基础
已验证
日期2026年1月
LinkedIn添加到 LinkedIn

为什么在 Coddy 学全栈开发

  • 前后端用同一门语言。这条路径先教你在浏览器里写 JavaScript 和 TypeScript,再通过 Next.js 的路由处理器和服务端操作把同一门语言用到服务器上。所以学后端时你面对的是新概念,而不是又一门要从零学起的语言。
  • 什么都不用安装。HTML 和 CSS 在代码旁实时渲染,SQL 在真实的表上运行,Linux、Git 和 Docker 部分会在浏览器中给你一个真正的终端。即使你的电脑从没装过任何开发工具,也能学完整个技术栈。
  • 能读懂你代码的 AI 提示。组件渲染不出来、查询返回了错误的行,或者命令执行失败时,Bugsy 会看你写的代码,引导你找到修复方法,而不是直接把答案给你。
  • 顺序才是关键。大多数全栈课程第二周就急着上框架;这条路径先用三个单元讲 JavaScript,再用第四个单元讲浏览器,之后才引入 React。因为只有掌握了底层语言,框架代码才读得懂。

关于成为全栈开发者的常见问题

全栈开发者是什么?

能同时构建 Web 应用两部分的开发者:一是在浏览器中运行的前端(HTML、CSS、JavaScript 以及 React 这样的框架),二是在服务器上运行的后端(处理请求、业务逻辑和数据库)。实际上,大多数全栈开发者会更擅长其中一边,但他们能独立交付一个功能,从数据库表一直做到使用它的按钮,不需要交给别人。

怎样成为一名 Web 开发者?

把 HTML、CSS 和 JavaScript 学到能从空白文件写出一个页面的程度,再加一个框架(React),然后了解服务器如何响应请求、数据如何存储(在这条路径里是 Next.js 和 SQL),学会 Git,并做一些能放到网上、也能讲清楚的项目。雇主看的是你能拿出什么,所以项目比任何证书都重要。这条路径就是按这个顺序安排的,而且免费。

应该先学前端还是后端?

先学前端。你写的每一行代码都能在屏幕上看到效果,错误一目了然,也更容易保持动力。等你亲手做出了调用后端的页面,再去理解后端就容易多了。所以这条路径的前四步都在浏览器里,之后才转向服务器和数据库。

为什么这条路径的服务端用 JavaScript,而不是 Python?

因为 JavaScript 是唯一能在浏览器中运行的语言,服务端也用它,整个技术栈就只需要一门语言。基于 React 的 Next.js 能让同一套代码在服务器上渲染页面、响应 API 请求、处理表单提交。如果你更想用 Python 写后端,Coddy 上的后端开发者路径教的就是 Python 路线。

成为全栈开发者需要上培训班吗?

不需要。培训班提供的是课程表、同学和职业辅导,并为此收费;技能本身和这条路径教的完全一样,免费资料也讲得很好。培训班无法替你省掉的是练习:数百道小练习加上几个真实项目。如果你能在没有老师督促的情况下坚持每天学一小时,免费路径一样能带你走到同样的位置。

成为全栈开发者需要多长时间?

每天学一小时,大约九到十二个月可以达到初级水平。在这条路径上,HTML 和 CSS 合计需要六到八周,JavaScript 和浏览器两到三个月,TypeScript 和 React 约六周,Next.js 一个月,SQL 三到四周,Linux、Git 和 Docker 再要一个月。在后面几步同时做一个自己的项目,才能把这些时间变成作品集。

这条路径涵盖 Node.js、Express、身份验证或部署吗?

这条路径不涵盖,它把 Next.js 作为服务端:路由处理器和服务端操作都运行在 Node.js 上。单独的 Node.js、Express、MongoDB,以及用会话和令牌实现的登录,在 Node.js 课程中讲授,MERN 技术栈路径 走的就是这条后端路线。两条路径目前都还不涵盖部署到托管平台。

这门全栈课程免费吗?有证书吗?

免费。路径中的每门课程都免费,包括课程内容、浏览器中的编辑器和终端、AI 提示以及证书。每个课程单元结束时都有一张免费证书,有自己的验证网址,可以添加到 LinkedIn 或简历中。完成所有步骤后,你还会获得一张整条路径的证书,上面列出背后的每门课程。

完成全栈开发者路径能获得证书吗?

能。完成每一步,你就能获得整条全栈开发者路径的一张免费证书。证书会列出你沿途完成的每门课程,并链接到每门课程各自的证书,任何人都能核实上面列出的每项技能。你可以把它添加到 LinkedIn 个人资料。这是 Coddy 颁发的结业证书,不是经过认证的学历资格。

其他学习路径

同样的课程,按不同职业方向编排。进度会保留:在一条路径上完成的课程,在所有包含它的路径上都算完成。

全部学习路径
Coddy 编程语言插图

免费开始全栈开发者路径

开始学习