适合我的前端学习路线（学习前端不迷路）

小伙伴们想学习前端 
    
    
    
，但是却不知如何入手
     


     


     


，上网查前端学习路线 




 




 




 ，第一页往往充斥着各种培训公司的广告 

   

   

   
，又或者是搜前端学习路线图时
     

     

     

，出现大量的路线图导致你还是不能确定适合自己的路线 
    
    
    
。

所以在这里我向大家分享一下我走的前端道路
     


     


     


。

一：大体上学习前端的两种选择

意思就是你是选择自学还是报社会上的培训班学 




 




 




 。为什么要先提这一点呢  




  




  




 ，因为在我看来这也是学习前端的关键一步 

   

   

   
。那我给出我的一些看法建议
     

     

     

。

1：如果你现在是大一 


  


  


  
，大二
     
     
     
，时间充裕   




   




   




 ，并且对学习前端有坚定的信念 



 



 



 
，这里我建议自学               ，如果你所在的专业开设的有前端课程
    




    




    




 ，你要多与课程老师交流















，如果你前端学的差不多了                ，让课程老师注意到你了
     



     



     



 ，那么以后他可能会带你做项目














，甚至把他的一些就业资源推给你  




  




  




 。

2：如果你现在是大三 
    
    
    
，甚至是大三下学期
     


     


     


，你要走前端这条路 


  


  


  
。那肯定最开始是自学
     
     
     
。跟着b站上的视频一步一步的来 




 




 




 ，这时候你要利用好最后的一个寒假和暑假（因为大四上学期就要秋招了）   




   




   




 。如果到大四秋招了 

   

   

   
，你去面试
     

     

     

，如果找到工作了  




  




  




 ，那万事大吉 



 



 



 
。如果没找到工作 


  


  


  
，你可以继续学习到大四上学期的一次招聘
     
     
     
，但是在我看来你也可以选择报培训班               。这就看你的选择了   




   




   




 ，因为一般培训班的收费在一两万左右
    




    




    




 。（我目前是大三 



 



 



 
，正在自学               ，不知道能不能赶上今年秋招）.

3：如果你是大四才开始学习前端
    




    




    




 ，又或者在大四秋招找到的工作不满意















，这个时候就可以选择报培训班















。一般培训班的收费在一两万左右                ，在培训班里
     



     



     



 ，因为它对你的就业有一些保证














，所以在学习的过程中可能会很严格 
    
    
    
，你如果认真学习
     


     


     


，肯定是能够学会的                。并且听说有些培训班如果你最后没找到工作 




 




 




 ，它会退你一些学费 

   

   

   
，而且它应该会有内推的名额
     

     

     

，但肯定是优异者优先  




  




  




 ，而且会给你包装简历等等
     



     



     



 。（我这样说 


  


  


  
，肯定有些小伙伴会心动
     
     
     
，但我可不是打广告的呀   




   




   




 ，毕竟你也是拿钱换来的资源）














。

二：我的前端学习路线（只代表我个人）

这张图想必不少人都见过 



 



 



 
，凭借一图之力劝退的多少前端初学者               ，哈哈 
    
    
    
。其实没那么夸张
    




    




    




 ，实际上到第三个阶段就差不多能找工作了















，但前提是你要对其特别精通                ，最好自己开发的有项目
     


     


     


。

我是在b站学习的尚硅谷的学习视频
     



     



     



 ，它还整理的有学习路线图：2021年度全网最全Web前端学习路线 - 哔哩哔哩专栏 (bilibili.com) 




 




 




 。我不知道其他品牌的教育视频














，但在我看来 
    
    
    
，尚硅谷的学习视频也确实良心 

   

   

   
。（哈哈
     


     


     


，这也不是打广告 




 




 




 ，大家自行选择
     

     

     

。有一个方法 

   

   

   
，那就是在b站搜索相关知识点
     

     

     

，直接跟着播放量高的视频学习）  




  




  




 。

那我也分阶段讲述我的前端学习之路 


  


  


  
。

阶段一：打好基础

html-->css-->js-->js高级-->less-->jQuery-->BootStrap-->AJAX

HTML:超文本标记语言（网页结构）
     
     
     
。学习视频：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

css：层叠样式表（添加样式）   




   




   




 。学习视频：尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

js：让网页相应某种行为（让网页动起来） 



 



 



 
。学习视频：尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

js高级：详细讲述  




  




  




 ，以后用到 


  


  


  
，面试必面               。学习视频：尚硅谷JavaScript高级教程(javascript实战进阶)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

Less: 是一门 CSS 预处理语言.学习视频：尚硅谷前端less教程_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

jQuery:是一个快速    
    
    
、简洁的JavaScript框架
     
     
     
，是继Prototype之后又一个优秀的JavaScript代码库
    




    




    




 。学习视频：尚硅谷jQuery教程(jquery从入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

BootStrap：提供了优雅的HTML和CSS规范















。学习视频：【极客学院】一周学会Bootstrap_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

AJAX:前后端交互                。学习视频：尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax最新版）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

阶段二：学习框架前的铺垫

ES6-->Node.js-->MongoDB-->Webpack-->Git-->TypeScript-->promise-->axios

小伙伴们不要觉得内容多   




   




   




 ，实际上每个知识点的内容都不多 



 



 



 
，平均每个知识点会花费两三天的时间               ，最多的不会超过一周
     



     



     



 。

ES6：一些新语法














。学习视频：尚硅谷Web前端ES6教程
    




    




    




 ，涵盖ES6-ES11_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 
    
    
    
。

Node.js:对一些特殊用例进行优化















，提供替代的API
     


     


     


。学习视频：【尚硅谷】最经典Node.JS全套完整版教程(快速入门nodejs)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili 




 




 




 。

MongoDB:非连接式数据库 

   

   

   
。学习视频：尚硅谷MongoDB基础教程(数据库精讲)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili
     

     

     

。

Webpack：学习框架必不可少的  




  




  




 。学习视频：尚硅谷最新版Webpack5实战教程(从入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

Git：是一个开源的分布式版本控制系统                ，可以有效  


     


     


     、高速地处理从很小到非常大的项目版本管理 


  


  


  
。学习视频：尚硅谷Git教程全套完整版（12h深入掌握git）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

TypeScript：学习过java的人对这应该很熟悉
     
     
     
。学习视频：尚硅谷2021版TypeScript教程（李立超老师TS新课）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

promise：学习框架必不可少的一部分   




   




   




 。学习视频：尚硅谷Web前端Promise教程从入门到精通（2021抢先版）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

axios：学习框架必不可少的一部分 



 



 



 
。学习视频：尚硅谷2021最新版axios入门与源码解析_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili（这个视频有几集会有问题
     



     



     



 ，建议自己找视频学习）

阶段三：重头戏（框架）

React-->Vue-->Vue3-->微信小程序

React：一线城市多用框架               。学习视频：尚硅谷2021版React技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

Vue：热门框架
    




    




    




 。学习视频：尚硅谷Vue核心技术实战教程全套完整版(vue.js初学者快速入门到精通)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

Vue3：新特性















。热门框架                。学习视频：尚硅谷2021最新Vue.JS教程快速入门到项目实战（Vue3/VueJS技术详解）_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

阶段四：实战
     



     



     



 。

实战就是多做项目了














，先是跟着网上的一些项目做 
    
    
    
，多练习














。最后团队完成一个有意义的项目 
    
    
    
。

React实战：尚硅谷React项目教程(react实战全栈谷粒后台)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

vue实战：尚硅谷Vue实战教程(企业级vue项目
     


     


     


，Vue项目硅谷外卖)_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili

阶段四：面试题

这里就让小伙伴们失望了
     


     


     


。我也将要面临找工作了 




 




 




 ，但是在面试题上没什么资源 

   

   

   
，这里就仰仗万能的小伙伴了 




 




 




 。求分享（哈哈）

三：相关技术的官网

html
     

     

     

，css：HTML 系列教程 (w3school.com.cn)

js：JavaScript 教程 | 菜鸟教程 (runoob.com)

less：Less 中文网 (lesscss.cn)

jQuery：Download jQuery | jQuery

BootStrap：Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML


 




 




 



、CSS 和 JavaScript 框架  




  




  




 ，用于开发响应式布局   

   

   

、移动设备优先的 WEB 项目 

   

   

   
。 | Bootstrap 中文网 (bootcss.com)

ES6：ES6 入门教程 - ECMAScript 6入门 (ruanyifeng.com)

Node.js：Node.js (nodejs.org)

MongoDB：MongoDB中文网

Webpack：webpack (docschina.org)

Git：直接搜github

TypeScript：TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)

promise：JavaScript Promise 对象 | 菜鸟教程 (runoob.com)

axios：axios中文网|axios API 中文文档 | axios (axios-js.com)

React：React 官方中文文档 – 用于构建用户界面的 JavaScript 库 (docschina.org)

Vue：Vue.js 教程 | 菜鸟教程 (runoob.com)

还有许多比较实用的网站比如：阿里的矢量图库 


  


  


  
，bootCDN等
     

     

     

。

四：好书推荐

js红皮书和犀牛书  




  




  




 。（如果你不懂什么意思
     
     
     
，直接上淘宝搜就能找到   




   




   




 ，我还没买不知道全名叫什么 



 



 



 
，哈哈） 


  


  


  
。

五：结尾

希望大家多交流学习经验
     
     
     
。目前我还没学完               ，做这个分享也花费不少时间
    




    




    




 ，小伙伴们也不要吝啬一键三连哟   




   




   




 。

如果有小伙伴想要一些资料的相关笔记代码















，也可以评论私聊我 



 



 



 
。