分享两个月自学前端学习路线（附学习教程来源）

前端是干啥的呢？很多人觉得就是写写界面，搭建网页。但是前端也有很多需要探索的，要学的内容不比后端少。很多知识过了一遍脑子过段时间你就忘了，所以需要长期的积累实践以及温故知新。技术在发展，我们也要跟进脚步。话不多说，我来分享一下我的学习路线吧！在跟着视频学习的过程中一定要一起敲代码！不要光看！

1.HTML+CSS（十五天）

HTML是构建网页结构的基础，你点进一个网站的时候，每个板块放在哪里就是由html来实现的。

CSS是设置用来网页样式的，比如字体的大小颜色粗斜体，比如图片的大小，比如背景颜色和边框粗细等等。

这两块是基础中的基础，但是学习的过程非常快乐，你可以感受到搭建一个基础网页的过程，对前端的认识也会更深一层次。

推荐b站学习视频：尚硅谷Web前端零基础入门HTML5+CSS3基础教程

https://www.bilibili.com/video/BV1XJ411X7Ud?spm_id_from=333.999.0.0

李立超老师的课真的太有意思了，要是他出一个前端一条龙我可以听100遍！！

2.JavaScript（十天）

就是我们统称的JS，和Java有一定的区别，但是如果你学过Java有一定基础的话，学习JS会轻松很多。我们用HTML和CSS写出了静态的页面以后，要实现动态的交互就需要用到JS。比如我们在电脑、手机、平板上浏览的所有的网页，以及无数基于HTML5的手机App，交互逻辑都是由JS完成的，所以这个部分很重要，一定要认真学！

推荐b站学习视频：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版

https://www.bilibili.com/video/BV1YW411T7GX?spm_id_from=333.999.0.0

这个JS基础也是超哥的课，我听的意犹未尽，超哥的课一般都非常适合新手，因为他的语言很有趣，不会感觉无聊！但是JS高级没有超哥的课啦QAQ

（这个课程也包括了WebAPI，DOM，BOM啥的一条龙全搞定了，是不是很牛！）

2.5.JS高级（三天---未知）

为啥插一个2.5JS高级呢，因为这一块学习相对有难度，如果是想要速成，这部分可以了解一下就跳过，小编当时学了一半就跳到JQ了，问题也不大，不会脱节。

推荐b站学习视频：尚硅谷JavaScript高级教程(javascript实战进阶)

https://www.bilibili.com/video/BV14s411E7qf?spm_id_from=333.999.0.0

这个老师讲的很细，但是小白不建议看，可以去找别的老师的视频，目前还没有找到内容和讲课方式都非常好的。这个老师讲的课程有些部分小编表示听不懂，可能因为基础不是很好，当时原型部分把我绕晕了QAQ。

3. jQuery（两天）

很多人都说jquery被淘汰了没必要学了，个人认为学无止境，里面有一些框架和方法还是挺有意思的，而且学习也不花太多时间，这个部分浅学一下三个小时就搞定了。如果你是大二大三的同学，时间充裕可以学习，这个和ajax也是有关联的。如果你是大四急着找工作的童鞋，这个部分了解一下就好，先去学下面的内容。

推荐b站学习视频：3小时带你玩转jQuery+Ajax

https://www.bilibili.com/video/BV19L4y1v7Dy?spm_id_from=333.999.0.0

这个小姐姐讲的非常通俗易懂，而且声音很好听！！这个视频关于ajax只有一点点内容，具体ajax还得看别人的视频哦。

4.ES6（一天）

ES全称EcmaScript，是脚本语言的规范。JS是ES的一种体现，学习这个部分就相当于是学习JS的新特征，可以理解为JS的拓展和进阶。所以这个部分也要好好学！跟着老师的思路去敲代码！

推荐b站学习视频：尚硅谷Web前端ES6教程，涵盖ES6-ES11

https://www.bilibili.com/video/BV1uK411H7on?p=9&spm_id_from=333.880.my_history.page.click

我看了好几个讲ES6的合集，这个老师讲的比较全面并且好理解，跟着他敲代码一般就没啥问题啦！

5.VUE（八天）

终于到框架部分啦！如果你学到了这个部分，基本上找工作没啥问题了。现在比较热门的就是VUE框架，如果你有多余的时间，当然也可以去学习其他的框架啦，个人比较建议多去深挖一下VUE！

推荐b站学习视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

https://www.bilibili.com/video/BV1Zy4y1K7SH?spm_id_from=333.999.0.0

这个老师很帅哈哈哈，声音也很好听，语言幽默，讲课生动，入股不亏！

6.可补充学习：移动端+Bootstrap（三天）

b站视频：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前...

https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.999.0.0

从p390课开始是移动端，可以从390看到最后。别看这个课貌似一百多集很长的样子，但是平均每集也就几分钟，很快就看完啦。如果觉得超哥讲的移动端还不够深入，可以在这里补充一下，这里还讲了其他几个知识点都是建议学习的，比如bootstrap。

7.NodeJS（三天）

必须学习！！这个很重要！

推荐b站学习视频：【尚硅谷】最经典Node.JS全套完整版教程(快速入门nodejs)

https://www.bilibili.com/video/BV1bs411E7pD?spm_id_from=333.999.0.0

依旧是超哥主场，我爱啦！！！

8.MongoDB（一天）

身为前端人，少不了会学习到后端技术的，慢慢从mongoDB开始，要搭建前后端的连接啦。

推荐b站学习视频：尚硅谷MongoDB入门基础教程（一天搞定mongodb）

https://www.bilibili.com/video/BV18s411E78K?spm_id_from=333.999.0.0

还是超哥讲滴！一天就可以看完！为超哥哐哐举大旗！！

9.Webpack（三天）

学完这个开始打包快递哈哈哈（推眼镜）

推荐b站学习视频：尚硅谷2022版Webpack5入门到原理（面试开发一条龙）

https://www.bilibili.com/video/BV14T4y1z7sw?spm_id_from=333.999.0.0

10.Ajax（一天）

前后端连接用ajax是很ok滴。

推荐b站学习视频：学ajax看这个就够了_web前端前后端交互_js初学者零基础从入门到精通

https://www.bilibili.com/video/BV1EA411Y7BH?spm_id_from=333.999.0.0

11.MySQL

还有空余时间的同学可以去学习数据库，毕竟不能只立眼于前端，数据库学了就是加薪必备（狗头）

推荐b站学习视频：MySQL数据库教程天花板，mysql安装到mysql高级，强！硬！

https://www.bilibili.com/video/BV1iq4y1u7vj?spm_id_from=333.999.0.0​​​​​​​

学无止境！希望这篇文章对你有帮助！