2020年全新前端学习路线图，学完你就是大神！

╰+哭是因爲堅強的太久メ 2023-07-24 08:50 36阅读 0赞

黑马程序员web前端中级程序员学习路线图，含配套视频，前端工具，源码等。

黑马程序员学习路线图及能掌握的能力（总，以下会分阶段，加上配套学习视频，小伙伴可继续往下看！）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70][]

学习路线图来源：[https://www.zhihu.com/question/55657832/answer/1142140887][https_www.zhihu.com_question_55657832_answer_1142140887]

![format_png][]

## 第一阶段：HTML5+css ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 1][]

**配套学习视频：**

[前端小白零基础入门HTML5+CSS3][HTML5_CSS3]

配套资料：[https://pan.baidu.com/s/1FruhfE82vUq4S-bK10aMCg][https_pan.baidu.com_s_1FruhfE82vUq4S-bK10aMCg] 提取码：f0mh

## 第二阶段：移动web网页开发 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 2][]

**配套学习视频：**

[2018移动web进阶教程][2018_web]

配套资料：[https://pan.baidu.com/s/153OmyPc4NvwkwD3GVAU80A][https_pan.baidu.com_s_153OmyPc4NvwkwD3GVAU80A] 密码：8iue

## 第三阶段：JavaScript网页编程 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 3][]

**配套学习视频：**

[前端与移动开发基础入门到精通][Link 1]

配套资料：[https://pan.baidu.com/s/1pMPNzFP][https_pan.baidu.com_s_1pMPNzFP] 密码：557z

[javaScript零基础通关必备教程][javaScript]

配套资料：[https://pan.baidu.com/s/1aKjMbjCbJvRbo8WViZvrWg][https_pan.baidu.com_s_1aKjMbjCbJvRbo8WViZvrWg] 提取码：5y59

## 第四阶段：Node.js与Ajax ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 4][]

**配套学习视频：**

[Nodejs教程精讲][Nodejs]

配套资料：[https://pan.baidu.com/s/130lg38s9csix-aDxRth3Zw][https_pan.baidu.com_s_130lg38s9csix-aDxRth3Zw] 密码：clog

[ajax从入门到精通][ajax]

[http://yun.itheima.com/course/334.html?2001stt][http_yun.itheima.com_course_334.html_2001stt]

配套资料：[http://pan.baidu.com/s/1pLoi5DL][http_pan.baidu.com_s_1pLoi5DL] 密码：ncfq

## 第五阶段：vue.js项目实战 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 5][]

**配套学习视频：**

[4小时+5个拣选案例让你快速入门Vue.js][4_5_Vue.js]

配套资料：[https://pan.baidu.com/s/1meI9FV4OcKJWv6M0lk9gqA][https_pan.baidu.com_s_1meI9FV4OcKJWv6M0lk9gqA] 提取码：itzp

[2018年Vue.js深入浅出教程][2018_Vue.js]

配套资料：[https://pan.baidu.com/s/1Uwja4t4ZE7cmm-l0xufkFg][https_pan.baidu.com_s_1Uwja4t4ZE7cmm-l0xufkFg] 密码：8v9c

## 第六阶段：微信小程序 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 6][]

配套学习视频：

[一天教你打造企业级微信小程序][Link 2]

配套资料：[https://pan.baidu.com/s/1ajsJZdV8FqsD4NB5kBJleQ][https_pan.baidu.com_s_1ajsJZdV8FqsD4NB5kBJleQ] 提取码：80fe

[20180316-微信小程序-个人语音接口功能][20180316-_-]

配套资料：[https://pan.baidu.com/s/1wn-RVufQukRHpNOsdWky2A][https_pan.baidu.com_s_1wn-RVufQukRHpNOsdWky2A] 密码：skqr

[分分钟快速入门小程序开发][Link 3]

配套资料：[https://pan.baidu.com/s/1TlykAaVydvxIfTFwrRdGkQ][https_pan.baidu.com_s_1TlykAaVydvxIfTFwrRdGkQ] 提取码：gtsw

[零基础玩转微信小程序][Link 4]

配套资料：[https://pan.baidu.com/s/19MgqC4SLDi5A3A\_W3rOZFA][https_pan.baidu.com_s_19MgqC4SLDi5A3A_W3rOZFA] 提取码：rsvs

[2小时轻松实现人脸识别的小程序][2]

配套资料：[https://pan.baidu.com/s/1F\_1fVXznCO3VcRyxT6vRVQ][https_pan.baidu.com_s_1F_1fVXznCO3VcRyxT6vRVQ] 提取码：5g6p

# 第七阶段：React.js项目实战 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 7][]

**配套学习视频：**

[Reactjs入门教程][Reactjs]

配套资料：[https://pan.baidu.com/s/1SUFekfhK36arNbx41DawRg][https_pan.baidu.com_s_1SUFekfhK36arNbx41DawRg] 密码：4eds

[ReactJs精品教程][ReactJs]

配套资料：[https://pan.baidu.com/s/1-KYZDsqW9nJKGQxX4eeiFQ][https_pan.baidu.com_s_1-KYZDsqW9nJKGQxX4eeiFQ] 密码：ztra

# 第八阶段：框架阶段与原理 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 8][]

## 第九阶段：移动APP开发 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 9][]

## 第十阶段：node.js进阶 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 10][]

## 第十一阶段：可视化游戏 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 11][]

## 第十二段阶段：架构与运维 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 12][]

## 后面阶段有视频会陆续分享的！ ##

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70]: /images/20230528/18960c0afb8d4a98b2e564e50443391d.png
[https_www.zhihu.com_question_55657832_answer_1142140887]: https://www.zhihu.com/question/55657832/answer/1142140887
[format_png]: /images/20230528/08b378913ae740138aa1f8aad668372d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 1]: /images/20230528/2a6e49ca7eba4af59a2f7813d1538fdc.png
[HTML5_CSS3]: http://yun.itheima.com/course/602.html?2001sttyk
[https_pan.baidu.com_s_1FruhfE82vUq4S-bK10aMCg]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1FruhfE82vUq4S-bK10aMCg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 2]: /images/20230528/1f7a00160d9c412988dcc0d3699b49da.png
[2018_web]: http://yun.itheima.com/course/333.html?2001sttyk
[https_pan.baidu.com_s_153OmyPc4NvwkwD3GVAU80A]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/153OmyPc4NvwkwD3GVAU80A
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 3]: /images/20230528/745f0e0eb06141a4a1a9db7e9ffff5e2.png
[Link 1]: http://yun.itheima.com/course/267.html?2001sttyk
[https_pan.baidu.com_s_1pMPNzFP]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1pMPNzFP
[javaScript]: http://yun.itheima.com/course/551.html?2001sttyk
[https_pan.baidu.com_s_1aKjMbjCbJvRbo8WViZvrWg]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1aKjMbjCbJvRbo8WViZvrWg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 4]: /images/20230528/62ff9ae5d09d49229d44ac8b62220b6b.png
[Nodejs]: http://yun.itheima.com/course/334.html?2001sttyk
[https_pan.baidu.com_s_130lg38s9csix-aDxRth3Zw]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/130lg38s9csix-aDxRth3Zw
[ajax]: http://yun.itheima.com/course/253.html?2001sttyk
[http_yun.itheima.com_course_334.html_2001stt]: http://yun.itheima.com/course/334.html?2001stt
[http_pan.baidu.com_s_1pLoi5DL]: http://link.zhihu.com/?target=http%3A//pan.baidu.com/s/1pLoi5DL
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 5]: /images/20230528/18aeb3aedde347cdbad1e00753561e0c.png
[4_5_Vue.js]: http://yun.itheima.com/course/609.html?2001sttyk
[https_pan.baidu.com_s_1meI9FV4OcKJWv6M0lk9gqA]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1meI9FV4OcKJWv6M0lk9gqA
[2018_Vue.js]: http://yun.itheima.com/course/335.html?2001sttyk
[https_pan.baidu.com_s_1Uwja4t4ZE7cmm-l0xufkFg]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1Uwja4t4ZE7cmm-l0xufkFg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 6]: /images/20230528/61f80e6e68e94aed89c0ec8cbb6acee5.png
[Link 2]: http://yun.itheima.com/course/518.html?2001sttyk
[https_pan.baidu.com_s_1ajsJZdV8FqsD4NB5kBJleQ]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1ajsJZdV8FqsD4NB5kBJleQ
[20180316-_-]: http://yun.itheima.com/open/255.html?2001sttyk
[https_pan.baidu.com_s_1wn-RVufQukRHpNOsdWky2A]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1wn-RVufQukRHpNOsdWky2A
[Link 3]: http://yun.itheima.com/open/276.html?2001stt%E2%80%8Byk
[https_pan.baidu.com_s_1TlykAaVydvxIfTFwrRdGkQ]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1TlykAaVydvxIfTFwrRdGkQ
[Link 4]: http://yun.itheima.com/course/589.html?2001sttyk
[https_pan.baidu.com_s_19MgqC4SLDi5A3A_W3rOZFA]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/19MgqC4SLDi5A3A_W3rOZFA
[2]: http://yun.itheima.com/open/479.html?2001sttyk
[https_pan.baidu.com_s_1F_1fVXznCO3VcRyxT6vRVQ]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1F_1fVXznCO3VcRyxT6vRVQ
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 7]: /images/20230528/def85597173340f4bcc416de3ab28fab.png
[Reactjs]: http://yun.itheima.com/open/265.html?2001sttyk
[https_pan.baidu.com_s_1SUFekfhK36arNbx41DawRg]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1SUFekfhK36arNbx41DawRg
[ReactJs]: http://yun.itheima.com/course/364.html?2001sttyk
[https_pan.baidu.com_s_1-KYZDsqW9nJKGQxX4eeiFQ]: http://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1-KYZDsqW9nJKGQxX4eeiFQ
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 8]: /images/20230528/2fd57425098e416d82168c82869072f0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 9]: /images/20230528/80cfd0228fa643da91674ca4cf8ba77d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 10]: /images/20230528/263bd65e249c43b384a7ed6cfae92129.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 11]: /images/20230528/cb8ba8782f9d48f98cc7fc7de7cefad0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMjkzNjU1_size_16_color_FFFFFF_t_70 12]: /images/20230528/edd9756b21b24018b305134e8f6140d0.png