前端学习之路 (入门到超级精通)

前言

注: 很多同学在大学里面学过html+css+JavaScript, 但是, 你们一定要注意, 很多大学教的知识都是不完整的 !!! 所以不要以为你们大学里面学过了就算懂这部分知识了, 没那么简单. 比如 网络请求你们学校教过吗? 所以, 还请以b站排名靠前的教学视频为主

1. 学习思想

   该文章讲述的内容适用于于想就业前端同时想自学的同学,如果你想就业前端,你就得把前端看成你人生中最重要的一本技能书.

   你学其他的可以,但你一定要把前端这么技术打造成你最会的技术,这样学习才能事半功倍. 否则,等你的技能书越来越多,但它们如果没有主次之分的话,你就会变得很迷茫,甚至变成杂而不精,什么都做不好.

2. 文章目的

   学好前端,不仅需要你的努力,还要有对的道路. 有同学会说b站自学不就好了. 确实,b站的前端教学视频是挺系统的,但它还不够系统,你往往学完这一大块之后就不知道下一大块是什么. 比如, b站很多教学视频都只到前端基础,而基础以后就断片了. 如果你是基础学完并精通,那么月薪也不到五千而已. 你甘心就这么点月薪?

   我写这篇文章就是为了避免那些自学的同学目光止于此. 我会在文章中详细说明 精通前端基础 , 精通前端框架 , 步入前端架构师 的区别.

如果你急着学习,可以直接看后最后两节: ‘学习之路’ 和 ‘b站的推荐教学视频’ , 当然,我还是建议你看完整篇文章,这样你就会对前端这个行业有大概的了解

网站类型选择

学前端最好精通某一类网站

网站有 电商网站 , 音乐网站 , 博客网站 , vblog网站 等等

这么多类型, 最好精通一种,这里的精通是指做过很多次该类网站,滚瓜烂熟的那种. 当然,其他类型的网站也得会做.

这样的话以后直接进入这类公司工作会很舒服,别人也会跟想要你

博客网站: 不是很注重前端,而是注重后端,估计工资不会太高,所以不建议

音乐网站,vblog网站: 多媒体的知识要比较熟悉,这些网站比较注重前端,所以工资应该会比博客网站高上一些

精通前端基础 (月薪三四千)

精通 html + css + js , 学会jQuery

至少独自开发完整的网站五次吧,不然估计也不太精通

html

html标签就不说了,太简单了,自己b站搜着学.

css

css一定要熟,保证看到其他网站大部分的样式都能反应出它是怎么实现的.

很多人被css搞得头皮发麻,因为css知识点太多了, 而且太难记了

我只能说,css最重要的知识看教学还行,但css要学的好还得自己多看别人的视频,博客. 遇到不会的,多上网查

然后,要掌握css就得多实践, 因为css就是那种------表面上你会,实际上你不知道怎么把你会的知识结合起来,做出你想要的东西,或者你不知道什么时候用那种方法去实现更好. 很多小白都是这么想的…

然后,b站上很多做css的大佬,你可以多看看它们的视频,比如 ‘纯css做太极图片’ , ‘纯css做登录页面’ , ‘华丽的3D魔方’ 这样的视频,看了之后觉得不错就跟着做,确保这些好看的,华丽的东西你也会做.

js

js可以说是前端中最重要的, 没有js,交互时的动画就很难做(css3可以做出大部分), 没有js,就不能从服务器获取数据…

而且,js的学习时间绝对远超html+css的学习时间

js有几大块内容需要掌握:
1. 首先,语法肯定得会的,特别是弱类型语法
2. DOM操作
3. BOM操作
4. 定时器
5. 网络请求
6. canvas (不常用,但一定得会,面试也需要)
7. js内置对象常用方法
8. js基本特效
9. js高级特征
10. …

js高级特征:
1. 正则表达式
2. 闭包
3. this绑定
4. var和let
5. …

js基本特效:
1. 轮播图
2. 瀑布流布局
3. 手风琴菜单
4. 滚动事件
5. 懒加载
6. 滚差视图
7. 响应式布局
8. 底部导航栏
9. …

上面的看不懂不要紧,b站自己搜js基础来学,排名靠前的就行了,然后遇到不会的就百度,这样也勉强算会用js

另外,如果觉得自己js玩得很六的同学,我推荐一本书给你们------《你不知道的 JavaScript》, 要是学通了,你就放心跟别人吹牛逼说 ‘你精通了JavaScript’ 吧

jQuery

jQuery其实弊端很大,很多公司都不会用它,但你必须了解它,原因一是面试需要,原因二是有些公司内会让你学公司自己的框架,其实有些部分就很想jQuery

jQuery的特别之处就在于链式编程,这个很香,有多香你学了就知道了

精通前端框架 (月薪一万左右)

如果你连前端基础都不精通,完整的网站都不能熟练的做出来,那就别看这一部分了,因为看了也是白看,这里不适合你

你用原生(纯html+css+js)开发网站时,应该会发现代码特别乱,dom操作,业务逻辑完全混在一块,你做完后想改就很难再改了.

所以就有了框架这种东西,前面说的精通基础前端月薪三四千其实只是理想状态,因为现实中的web公司基本上都是用框架的. 也就是说,你不会框架,就找不到工作.

何为框架:

其实何为框架这个问题很难向小白解释,干脆就来说说框架有什么好处.

• 好处一: 模块化设计,不想原生那样代码写在一块,很难看,也很难维护. 用熟了框架你会发现一切都是那么清晰明亮,如果你想改代码,你完全就知道你要改的代码在哪. 相反用原生写web,代码多起来的话,你找得到吗?

• 好处二: 框架内帮你封装了很多麻烦的东西,很多你在原生里面觉得很麻烦的地方,在框架内你基本都能找到对应的功能. 寥寥几行代码,就可以实现你以前很难实现的东西.

在用框架以前,你必须会

1. Node.js
2. babel 模块
3. import + export
4. npm 和 yarn
5. webpack (掌握程度: 看得懂,不要求会做)

为什么要会? 因为它们是开发环境,是语法…

详细的b站自己搜视频看,什么千锋教育,达内…看排名靠前的就行了

主流框架

主流的框架有以下三种: vue , react , angular

其中初学者学vue就好了,因为vue是三大框架中最简单的,而且热度与react不相上下

vue用熟之后,你最好看看vue主要功能的源码,因为面试需要,而且这样能促进你对框架的了解

vue精通后,你就要学react了,原因也很简单,面试需要,而且市场上vue和react各占一半,你身为一个前端工程师,不会react也说不过去吧,而且学了,工资会更高

为什么我一直不提angular呢,不是因为它不好,而是因为它太难了,国内掌握angular的人特别少,导致angular在国内并不火, 所以你不必学. 当然,angular里面有很多精辟的东西,有空的话,还是了解了解比较好

vue,react什么的,自己b站搜视频看,排行靠前的就行了

架构师 (月薪三万到五万)

大部分人都止步于普通的前端工程师,架构师少之又少,难之又难,所以我不详细介绍架构师的学习路径,因为我也知道哈哈哈

什么是架构师: 简单来说就是帮公司写框架的,写开发工具的. 目的是为了让开发更高效,同时也解决一些开发中很难解决的bug…

有人会问,市场上那么多框架,开发工具,为什么还要自己写…

我只想说,其实我也不清楚,可能是因为市场上的那些框架,开发工具功能太泛,不够具体吧…所以才要请专门的架构师来做功能更具体,开发更简单的工具吧…

如何成为架构师: 成为架构师就很难咯…首先,你要有常读源码的习惯,vue源码,react源码,甚至jQuery源码等等,都要读. 因为只有常读源码的习惯,才能让你有能力写出优秀的框架.

一般来说,工作很多年,积累很多源码的人才能成为架构师

太难了… …

学习之路

1. html + css + JavaScript
2. Node.js
3. npm
4. webpack
5. vue
6. react
7. 架构师

b站的推荐教学视频

以下视频我只看过一小部分,但我觉得它们的视频目录还不错,就推荐给你们

1. html+css超级详细 https://www.bilibili.com/video/BV14J4114768

2. js+jQuery (从第31集看到143集) https://www.bilibili.com/video/BV1Bb411v7w8?p=31

3. Node.js+npm+babel+import+export (内容很少,自己百度看博客或官网)

4. webpack (掌握程度: 看得懂,不要求会做) https://www.bilibili.com/video/BV1e7411j7T5

5. vue https://www.bilibili.com/video/BV1m741137Q5

6. git https://www.liaoxuefeng.com/wiki/896043488029600#0

7. react (其实react我也还没学,链接放在这里是为了凑数) https://www.bilibili.com/video/BV1eE411W7WT