前端开发学习路线（学+测） - 阿里云开发者社区

[{"settings":{},"componentId":39419,"hidden":"false","fullName":"@ali/hmod-wb-zc-dmmod-javastudyline-banner__0-0-15","uuid":"1390158","limitConfig":{},"version":"0.0.1","componentVersionId":300904,"name":"hmod-wb-zc-dmmod-javastudyline-banner__0-0-15"},{"settings":{},"componentId":39420,"hidden":"false","fullName":"@ali/hmod-wb-zc-dmmod-javastudyline-nav__0-0-9","uuid":"1390159","limitConfig":{},"version":"0.0.1","componentVersionId":300903,"name":"hmod-wb-zc-dmmod-javastudyline-nav__0-0-9"},{"settings":{},"componentId":39421,"hidden":"false","fullName":"@ali/hmod-wb-zc-dmmod-javastudyline-line__0-0-40","uuid":"1390160","limitConfig":{},"version":"0.0.1","componentVersionId":300902,"name":"hmod-wb-zc-dmmod-javastudyline-line__0-0-40"},{"settings":{},"componentId":39421,"hidden":"false","fullName":"@ali/hmod-wb-zc-dmmod-javastudyline-line__0-0-40","uuid":"9690417370","limitConfig":{},"version":"0.0.1","componentVersionId":300902,"name":"hmod-wb-zc-dmmod-javastudyline-line__0-0-40"},{"settings":{},"componentId":39421,"hidden":"false","fullName":"@ali/hmod-wb-zc-dmmod-javastudyline-line__0-0-40","uuid":"1390161","limitConfig":{},"version":"0.0.1","componentVersionId":300902,"name":"hmod-wb-zc-dmmod-javastudyline-line__0-0-40"},{"settings":{},"componentId":39421,"hidden":"false","fullName":"@ali/hmod-wb-zc-dmmod-javastudyline-line__0-0-40","uuid":"1390162","limitConfig":{},"version":"0.0.1","componentVersionId":300902,"name":"hmod-wb-zc-dmmod-javastudyline-line__0-0-40"},{"settings":{},"componentId":39421,"hidden":"false","fullName":"@ali/hmod-wb-zc-dmmod-javastudyline-line__0-0-40","uuid":"1390163","limitConfig":{},"version":"0.0.1","componentVersionId":300902,"name":"hmod-wb-zc-dmmod-javastudyline-line__0-0-40"},{"settings":{},"componentId":39421,"hidden":"false","fullName":"@ali/hmod-wb-zc-dmmod-javastudyline-line__0-0-40","uuid":"1390164","limitConfig":{},"version":"0.0.1","componentVersionId":300902,"name":"hmod-wb-zc-dmmod-javastudyline-line__0-0-40"},{"settings":{},"componentId":39422,"hidden":"false","fullName":"@ali/hmod-wb-zc-dmmod-javastudyline-brand__0-0-8","uuid":"1390165","limitConfig":{},"version":"0.0.1","componentVersionId":300905,"name":"hmod-wb-zc-dmmod-javastudyline-brand__0-0-8"},{"settings":{},"componentId":37880,"hidden":"false","fullName":"@ali/hmod-wb-zc-dmmod-tokenactivity-newend__0-0-3","uuid":"1390167","limitConfig":{},"version":"0.0.1","componentVersionId":297073,"name":"hmod-wb-zc-dmmod-tokenactivity-newend__0-0-3"}]

< 全部学习路线 < 全部学习路线

前端开发学习路线

5 大

学习阶段

15 门

免费课程

688 课时

教学视频

3 等级

技能测试

前端开发技能全覆盖 - HTML / CSS / JavaScript / jQuery / Vue / React / Angular / NodeJS

技能测试

HTML+CSS

JavaScript

开发工具

前端框架

移动及服务端开发

{"moduleinfo":{"showTest":true,"btnText":"","list_count":[{"count_phone":3,"count":3}],"courseLink":"https://developer.aliyun.com/course/","ifOpen":"打开","needStudyNum":"","warn":"","ifLogin":"关闭","idName":"part6","examLink":"https://developer.aliyun.com/exam/intro/","success":"","leftText":"","dialogdata_count":[{"count_phone":3,"count":3}],"listName":"前端开发技能测试","btnTextOver":"","modTitle":"技能测试"},"list":[],"dialogdata":[{"pass":"是","btnTextNoUse":"敬请期待","link":"https://developer.aliyun.com/exam/intro/314","btnTextNoPass":"开始自测","testID":"314","text":"基本的计算机知识与操作能力，具备Web基础知识，掌握Web的常见标准、常用浏览器的不同特性，掌握HTML与CSS的入门知识，可进行静态网页的制作与发布。","btnTextPass":"<img src='https://img.alicdn.com/tfs/TB15QbWXAH0gK0jSZFNXXXMqXXa-32-32.png'>已通过考试","title":"前端开发初级测试"},{"pass":"是","btnTextNoUse":"敬请期待","link":"https://developer.aliyun.com/exam/intro/315","btnTextNoPass":"开始自测","testID":"315","text":"掌握HTML5与CSS3的核心技术，掌握前端主流语言和开发框架JavaScript、jQuery和Ajax的基本知识，具备搭建动态交互网页的基本能力，掌握前端开发代码版本控制工具的基础概念和操作。","btnTextPass":"<img src='https://img.alicdn.com/tfs/TB15QbWXAH0gK0jSZFNXXXMqXXa-32-32.png'>已通过考试","title":"前端开发中级测试"},{"pass":"是","btnTextNoUse":"敬请期待","link":"https://developer.aliyun.com/exam/intro/316","btnTextNoPass":"开始自测","testID":"316","text":"掌握企业中如何利用常见工具，进行前端开发软件的版本控制与项目构建和协同。开发方面，熟练掌握Vue.js、React、AngularJS和响应式框架Bootstrap，具备开发高级交互网页的能力，具备基于移动设备的Web前端开发，以及Node.js服务器端开发技能。","btnTextPass":"<img src='https://img.alicdn.com/tfs/TB15QbWXAH0gK0jSZFNXXXMqXXa-32-32.png'>已通过考试","title":"前端开发高级测试"}],"countinfo":{"dialogdata":{"length_pc":0,"length":0},"list":{"length_pc":0,"length":0}}}

{"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"moduleinfo":{"showTest":true,"btnText":"","list_count":[{"count_phone":3,"count":3}],"courseLink":"https://developer.aliyun.com/course/","ifOpen":"打开","needStudyNum":"","warn":"","ifLogin":"关闭","idName":"part6","examLink":"https://developer.aliyun.com/exam/intro/","success":"","leftText":"","dialogdata_count":[{"count_phone":3,"count":3}],"listName":"前端开发技能测试","btnTextOver":"","modTitle":"技能测试"},"list":[],"dialogdata":[{"pass":"是","btnTextNoUse":"敬请期待","link":"https://developer.aliyun.com/exam/intro/314","btnTextNoPass":"开始自测","testID":"314","text":"基本的计算机知识与操作能力，具备Web基础知识，掌握Web的常见标准、常用浏览器的不同特性，掌握HTML与CSS的入门知识，可进行静态网页的制作与发布。","btnTextPass":"<img src='https://img.alicdn.com/tfs/TB15QbWXAH0gK0jSZFNXXXMqXXa-32-32.png'>已通过考试","title":"前端开发初级测试"},{"pass":"是","btnTextNoUse":"敬请期待","link":"https://developer.aliyun.com/exam/intro/315","btnTextNoPass":"开始自测","testID":"315","text":"掌握HTML5与CSS3的核心技术，掌握前端主流语言和开发框架JavaScript、jQuery和Ajax的基本知识，具备搭建动态交互网页的基本能力，掌握前端开发代码版本控制工具的基础概念和操作。","btnTextPass":"<img src='https://img.alicdn.com/tfs/TB15QbWXAH0gK0jSZFNXXXMqXXa-32-32.png'>已通过考试","title":"前端开发中级测试"},{"pass":"是","btnTextNoUse":"敬请期待","link":"https://developer.aliyun.com/exam/intro/316","btnTextNoPass":"开始自测","testID":"316","text":"掌握企业中如何利用常见工具，进行前端开发软件的版本控制与项目构建和协同。开发方面，熟练掌握Vue.js、React、AngularJS和响应式框架Bootstrap，具备开发高级交互网页的能力，具备基于移动设备的Web前端开发，以及Node.js服务器端开发技能。","btnTextPass":"<img src='https://img.alicdn.com/tfs/TB15QbWXAH0gK0jSZFNXXXMqXXa-32-32.png'>已通过考试","title":"前端开发高级测试"}],"countinfo":{"dialogdata":{"length_pc":0,"length":0},"list":{"length_pc":0,"length":0}}}}

技能测试

前端开发技能测试

相关测试

前端开发初级测试

基本的计算机知识与操作能力，具备Web基础知识，掌握Web的常见标准、常用浏览器的不同特性，掌握HTML与CSS的入门知识，可进行静态网页的制作与发布。

开始自测

前端开发中级测试

掌握HTML5与CSS3的核心技术，掌握前端主流语言和开发框架JavaScript、jQuery和Ajax的基本知识，具备搭建动态交互网页的基本能力，掌握前端开发代码版本控制工具的基础概念和操作。

开始自测

前端开发高级测试

掌握企业中如何利用常见工具，进行前端开发软件的版本控制与项目构建和协同。开发方面，熟练掌握Vue.js、React、AngularJS和响应式框架Bootstrap，具备开发高级交互网页的能力，具备基于移动设备的Web前端开发，以及Node.js服务器端开发技能。

开始自测

{"moduleinfo":{"showTest":false,"btnText":"一键加入所有课程","list_count":[{"count_phone":3,"count":3}],"courseLink":"https://developer.aliyun.com/course/","ifOpen":"打开","needStudyNum":"3门课程 | 96课时 | 3套阶段自测考试","warn":"尚未开始学习","ifLogin":"关闭","idName":"part1","examLink":"https://developer.aliyun.com/exam/intro/","success":"已加入本阶段所有免费课程，点击课程卡片可直接学习。","leftText":"学习前要求：基本的计算机操作能力，比如浏览网页、查资料等，以及坚持学习的决心和恒心。 学习后将掌握：可以使用HTML和CSS制作静态网页。","dialogdata_count":[{"count_phone":3,"count":3}],"listName":"阶段 1：HTML+CSS","btnTextOver":"已加入所有免费课程","modTitle":"学习路线"},"list":[{"lessonNum":"32","btnText":"开始学习","link":"https://edu.aliyun.com/course/1742","cardTitle":"HTML 入门与实战","courseID":"1742","status":"免费"},{"lessonNum":"49","btnText":"开始学习","link":"https://edu.aliyun.com/course/1895","cardTitle":"CSS 快速掌握","courseID":"1895","status":"免费"},{"lessonNum":"15","btnText":"开始学习","link":"https://edu.aliyun.com/course/72","cardTitle":"HTML5 新特性学习","courseID":"72","status":"免费"}],"dialogdata":[],"countinfo":{"dialogdata":{"length_pc":0,"length":0},"list":{"length_pc":0,"length":0}}}

{"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"moduleinfo":{"showTest":false,"btnText":"一键加入所有课程","list_count":[{"count_phone":3,"count":3}],"courseLink":"https://developer.aliyun.com/course/","ifOpen":"打开","needStudyNum":"3门课程 | 96课时 | 3套阶段自测考试","warn":"尚未开始学习","ifLogin":"关闭","idName":"part1","examLink":"https://developer.aliyun.com/exam/intro/","success":"已加入本阶段所有免费课程，点击课程卡片可直接学习。","leftText":"学习前要求：基本的计算机操作能力，比如浏览网页、查资料等，以及坚持学习的决心和恒心。 学习后将掌握：可以使用HTML和CSS制作静态网页。","dialogdata_count":[{"count_phone":3,"count":3}],"listName":"阶段 1：HTML+CSS","btnTextOver":"已加入所有免费课程","modTitle":"学习路线"},"list":[{"lessonNum":"32","btnText":"开始学习","link":"https://edu.aliyun.com/course/1742","cardTitle":"HTML 入门与实战","courseID":"1742","status":"免费"},{"lessonNum":"49","btnText":"开始学习","link":"https://edu.aliyun.com/course/1895","cardTitle":"CSS 快速掌握","courseID":"1895","status":"免费"},{"lessonNum":"15","btnText":"开始学习","link":"https://edu.aliyun.com/course/72","cardTitle":"HTML5 新特性学习","courseID":"72","status":"免费"}],"dialogdata":[],"countinfo":{"dialogdata":{"length_pc":0,"length":0},"list":{"length_pc":0,"length":0}}}}

学习路线

阶段 1：HTML+CSS

3门课程 | 96课时 | 3套阶段自测考试

学习前要求：基本的计算机操作能力，比如浏览网页、查资料等，以及坚持学习的决心和恒心。
学习后将掌握：可以使用HTML和CSS制作静态网页。

一键加入所有课程

HTML 入门与实战

免费

32课时

开始学习

CSS 快速掌握

免费

49课时

开始学习

HTML5 新特性学习

免费

15课时

开始学习

{"moduleinfo":{"showTest":false,"btnText":"一键加入所有课程","list_count":[{"count_phone":3,"count":3}],"courseLink":"https://developer.aliyun.com/course/","ifOpen":"打开","needStudyNum":"3门课程 I 147课时 I 阶段自测考试即将上线","warn":"尚未开始学习","ifLogin":"打开","idName":"part2","examLink":"https://developer.aliyun.com/exam/intro/","success":"已加入本阶段所有免费课程，点击课程卡片可直接学习。","leftText":"学习前要求：熟练应用HTML和CSS。 学习后将掌握：前端开发最核心的技能JavaScript，以及jQuery和Ajax。","dialogdata_count":[{"count_phone":3,"count":3}],"listName":"阶段 2：JavaScript","btnTextOver":"已加入所有免费课程"},"list":[{"lessonNum":"52","btnText":"开始学习","link":"https://edu.aliyun.com/course/1724","cardTitle":"JavaScript 入门与实战","courseID":"1724","status":"免费"},{"lessonNum":"43","btnText":"开始学习","link":"https://edu.aliyun.com/course/25","cardTitle":"jQuery 快速入门","courseID":"25","status":"免费"},{"lessonNum":"52","btnText":"开始学习","link":"https://edu.aliyun.com/course/1747","cardTitle":"Ajax 入门与实战","courseID":"1747","status":"免费"}],"dialogdata":[],"countinfo":{"dialogdata":{"length_pc":0,"length":0},"list":{"length_pc":0,"length":0}}}

{"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"moduleinfo":{"showTest":false,"btnText":"一键加入所有课程","list_count":[{"count_phone":3,"count":3}],"courseLink":"https://developer.aliyun.com/course/","ifOpen":"打开","needStudyNum":"3门课程 I 147课时 I 阶段自测考试即将上线","warn":"尚未开始学习","ifLogin":"打开","idName":"part2","examLink":"https://developer.aliyun.com/exam/intro/","success":"已加入本阶段所有免费课程，点击课程卡片可直接学习。","leftText":"学习前要求：熟练应用HTML和CSS。 学习后将掌握：前端开发最核心的技能JavaScript，以及jQuery和Ajax。","dialogdata_count":[{"count_phone":3,"count":3}],"listName":"阶段 2：JavaScript","btnTextOver":"已加入所有免费课程"},"list":[{"lessonNum":"52","btnText":"开始学习","link":"https://edu.aliyun.com/course/1724","cardTitle":"JavaScript 入门与实战","courseID":"1724","status":"免费"},{"lessonNum":"43","btnText":"开始学习","link":"https://edu.aliyun.com/course/25","cardTitle":"jQuery 快速入门","courseID":"25","status":"免费"},{"lessonNum":"52","btnText":"开始学习","link":"https://edu.aliyun.com/course/1747","cardTitle":"Ajax 入门与实战","courseID":"1747","status":"免费"}],"dialogdata":[],"countinfo":{"dialogdata":{"length_pc":0,"length":0},"list":{"length_pc":0,"length":0}}}}

阶段 2：JavaScript

3门课程 I 147课时 I 阶段自测考试即将上线

学习前要求：熟练应用HTML和CSS。
学习后将掌握：前端开发最核心的技能JavaScript，以及jQuery和Ajax。

一键加入所有课程

JavaScript 入门与实战

免费

52课时

开始学习

jQuery 快速入门

免费

43课时

开始学习

Ajax 入门与实战

免费

52课时

开始学习

{"moduleinfo":{"showTest":false,"btnText":"一键加入所有课程","list_count":[{"count_phone":3,"count":3}],"courseLink":"https://developer.aliyun.com/course/","ifOpen":"打开","needStudyNum":"3门课程 I 42课时 I 阶段自测考试即将上线","btnLink":"javascript:void(0)","warn":"尚未开始学习","ifLogin":"打开","idName":"part3","examLink":"https://developer.aliyun.com/exam/intro/","success":"已加入本阶段所有免费课程，点击课程卡片可直接学习。","leftText":"学习前要求：能够熟练应用HTML、CSS、JavaScript开发具有交互效果的网页。 学习后将掌握：前端开发团队协作常用的版本控制工具SVN、Git，以及项目构建工具Webpack的使用方法。","dialogdata_count":[{"count_phone":3,"count":3}],"listName":"阶段 3：开发工具","btnTextOver":"已加入所有免费课程"},"list":[{"lessonNum":"5","btnText":"开始学习","link":"https://edu.aliyun.com/course/83","cardTitle":"1小时掌握版本控制系统 SVN","courseID":"83","status":"免费"},{"lessonNum":"10","btnText":"开始学习","link":"https://edu.aliyun.com/course/489","cardTitle":"Git 快速上手","courseID":"489","status":"免费"},{"lessonNum":"27","btnText":"开始学习","link":"https://edu.aliyun.com/course/1729","cardTitle":"前端自动化构建工具 Webpack","courseID":"1729","status":"免费"}],"dialogdata":[],"countinfo":{"dialogdata":{"length_pc":0,"length":0},"list":{"length_pc":0,"length":0}}}

{"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"moduleinfo":{"showTest":false,"btnText":"一键加入所有课程","list_count":[{"count_phone":3,"count":3}],"courseLink":"https://developer.aliyun.com/course/","ifOpen":"打开","needStudyNum":"3门课程 I 42课时 I 阶段自测考试即将上线","btnLink":"javascript:void(0)","warn":"尚未开始学习","ifLogin":"打开","idName":"part3","examLink":"https://developer.aliyun.com/exam/intro/","success":"已加入本阶段所有免费课程，点击课程卡片可直接学习。","leftText":"学习前要求：能够熟练应用HTML、CSS、JavaScript开发具有交互效果的网页。 学习后将掌握：前端开发团队协作常用的版本控制工具SVN、Git，以及项目构建工具Webpack的使用方法。","dialogdata_count":[{"count_phone":3,"count":3}],"listName":"阶段 3：开发工具","btnTextOver":"已加入所有免费课程"},"list":[{"lessonNum":"5","btnText":"开始学习","link":"https://edu.aliyun.com/course/83","cardTitle":"1小时掌握版本控制系统 SVN","courseID":"83","status":"免费"},{"lessonNum":"10","btnText":"开始学习","link":"https://edu.aliyun.com/course/489","cardTitle":"Git 快速上手","courseID":"489","status":"免费"},{"lessonNum":"27","btnText":"开始学习","link":"https://edu.aliyun.com/course/1729","cardTitle":"前端自动化构建工具 Webpack","courseID":"1729","status":"免费"}],"dialogdata":[],"countinfo":{"dialogdata":{"length_pc":0,"length":0},"list":{"length_pc":0,"length":0}}}}

阶段 3：开发工具

3门课程 I 42课时 I 阶段自测考试即将上线

学习前要求：能够熟练应用HTML、CSS、JavaScript开发具有交互效果的网页。
学习后将掌握：前端开发团队协作常用的版本控制工具SVN、Git，以及项目构建工具Webpack的使用方法。

一键加入所有课程

1小时掌握版本控制系统 SVN

免费

5课时

开始学习

Git 快速上手

免费

10课时

开始学习

前端自动化构建工具 Webpack

免费

27课时

开始学习

{"moduleinfo":{"showTest":false,"btnText":"一键加入所有课程","list_count":[{"count_phone":4,"count":4}],"courseLink":"https://developer.aliyun.com/course/","ifOpen":"打开","needStudyNum":"4门课程 | 199课时 | 3套阶段自测考试","warn":"尚未开始学习","ifLogin":"打开","idName":"part4","examLink":"https://developer.aliyun.com/exam/intro/","success":"已加入本阶段所有免费课程，点击课程卡片可直接学习。","leftText":"学习前要求：能够熟练应用HTML、CSS、JavaScript开发具有交互效果的网页。 学习后将掌握：Vue.js、React、AngularJS三大神器，以及响应式框架Bootstrap，让你的前端开发工作如有神助！","dialogdata_count":[{"count_phone":3,"count":3}],"listName":"阶段 4：前端框架","btnTextOver":"已加入所有免费课程"},"list":[{"lessonNum":"86","btnText":"开始学习","link":"https://edu.aliyun.com/course/1728","cardTitle":"Vue.js 入门与实战","courseID":"1728","status":"免费"},{"lessonNum":"54","btnText":"开始学习","link":"https://edu.aliyun.com/course/1727","cardTitle":"React 入门与实战","courseID":"1727","status":"免费"},{"lessonNum":"25","btnText":"开始学习","link":"https://edu.aliyun.com/course/470","cardTitle":"AngularJS 快速入门","courseID":"470","status":"免费"},{"lessonNum":"34","btnText":"开始学习","link":"https://edu.aliyun.com/course/23","cardTitle":"Bootstrap 快速入门","courseID":"23","status":"免费"}],"dialogdata":[],"countinfo":{"dialogdata":{"length_pc":0,"length":0},"list":{"length_pc":0,"length":0}}}

{"$env":{"JSON":{}},"$page":{"env":"production"},"$context":{"moduleinfo":{"showTest":false,"btnText":"一键加入所有课程","list_count":[{"count_phone":4,"count":4}],"courseLink":"https://developer.aliyun.com/course/","ifOpen":"打开","needStudyNum":"4门课程 | 199课时 | 3套阶段自测考试","warn":"尚未开始学习","ifLogin":"打开","idName":"part4","examLink":"https://developer.aliyun.com/exam/intro/","success":"已加入本阶段所有免费课程，点击课程卡片可直接学习。","leftText":"学习前要求：能够熟练应用HTML、CSS、JavaScript开发具有交互效果的网页。 学习后将掌握：Vue.js、React、AngularJS三大神器，以及响应式框架Bootstrap，让你的前端开发工作如有神助！","dialogdata_count":[{"count_phone":3,"count":3}],"listName":"阶段 4：前端框架","btnTextOver":"已加入所有免费课程"},"list":[{"lessonNum":"86","btnText":"开始学习","link":"https://edu.aliyun.com/course/1728","cardTitle":"Vue.js 入门与实战","courseID":"1728","status":"免费"},{"lessonNum":"54","btnText":"开始学习","link":"https://edu.aliyun.com/course/1727","cardTitle":"React 入门与实战","courseID":"1727","status":"免费"},{"lessonNum":"25","btnText":"开始学习","link":"https://edu.aliyun.com/course/470","cardTitle":"AngularJS 快速入门","courseID":"470","status":"免费"},{"lessonNum":"34","btnText":"开始学习","link":"https://edu.aliyun.com/course/23","cardTitle":"Bootstrap 快速入门","courseID":"23","status":"免费"}],"dialogdata":[],"countinfo":{"dialogdata":{"length_pc":0,"length":0},"list":{"length_pc":0,"length":0}}}}

阶段 4：前端框架

4门课程 | 199课时 | 3套阶段自测考试

学习前要求：能够熟练应用HTML、CSS、JavaScript开发具有交互效果的网页。
学习后将掌握：Vue.js、React、AngularJS三大神器，以及响应式框架Bootstrap，让你的前端开发工作如有神助！

一键加入所有课程

Vue.js 入门与实战

免费

86课时

开始学习

React 入门与实战

免费

54课时

开始学习

AngularJS 快速入门

免费

25课时

开始学习

Bootstrap 快速入门

免费

34课时

开始学习

阶段 5：移动及服务端开发

2门课程 I 204课时 I 阶段自测考试即将上线

学习前要求：PC端的前端开发技能已经炉火纯青。
学习后将掌握：基于移动设备的Web前端开发技能，以及Node.js服务器端开发技能。

一键加入所有课程

移动Web前端开发

免费

115课时

开始学习

Node.js 快速入门与实战

免费

89课时

开始学习

课程合作伙伴