想成为一名前端工程师，却不知道如何入坑？这是一篇零基础入坑指南，也许可以帮助到你。

我要学什么

想要知道学什么，看招聘需求是最快的，这是腾讯3-5年经验的社招需求

这是cvte的实习需求

总结一下，如果你想找到一个相对较好的前端岗位，那么你需要学习

  • 前端三剑客的主流版本：HTML5 / CSS3 / ES6
  • 三大主流框架中的任意一个：Vue，react， Angular
  • 打包工具：webpack
  • 移动端 / 微信小程序
  • 一门后端语言：JAVA / NodeJS / PHP

而你如果只是想要找一个普通的前端岗位，那你只要学完 HTML5 / CSS3 / ES6 外加vue或者react任意一个框架就行了，推荐vue，因为中小型公司用着多，而且容易上手。

当然，在学习的过程中，你会接触到UI库，比如elementUI，iview，或者css预处理语言，比如less，sass，还有用起来比较简单的框架，比如bootshrap，JQuery这些学习成本较低，看看文档就会，不作为这里讨论的重点。

PS：我下文说的学习时长预估为xx天，一天以12-15个小时计算

入门先避坑

如果你是一个新手，什么都不懂，那我要先给你两个忠告。

第一个是尽量少用CSDN，除非是bug一类的问题，否则最好去看CSDN，如果你是为了弄懂某个知识点去看CSDN，95%的可能性会因为里面的低质量内容越看越蒙，还有3%的可能性会看到错误的知识。具体我就不多说，可以看看这个知乎帖子对CSDN的普遍评价： 如何看待CSDN

第二个是https://www.w3school.com.cn/ 这个所谓的w3school教程其实有很多毛病，专业性不好，而且还有不少错误的内容，为什么呢，因为这个教程是个人的，并非正规的w3c组织 ，如果你去查查域名所有者就知道了，这是个个人网站，我也不懂法律，也不知道算不算侵权，但是能不看就不看就是了。

有错的地方比如说vertical-align

然而这些属性真正的含义是

虽然你可能看不太懂，但是你应该可以看出来差的有点远，所以尽量不要去看，不然被坑了都不知道。

前端入门篇

在入门阶段，你需要学习HTML，CSS，JavaScript三门语言，这是前端的基础，会直接决定你对前端的理解能力，对框架的理解和运用能力，所以最好打好基础，这样才能走的更远。

这部分我推荐的学习时间是，HTML + CSS 10天，JavaScript 10天。

推荐的学习方式是，先看视频，不懂的看书查文档解决。

HTML + CSS2.0

这部分我推荐是看视频自学，看书可以作为辅助

视频推荐

  1. HTML+CSS入门教程
  2. 全面的HTML+CSS入门教程

这里我有两个课程推荐，第一个课程比较幽默风趣，但是知识点比较少，内容也不够深入，第二个讲课没有这么有趣， 但是我基本可以确定，这是全网你能找到的最权威，最全面深入的HTML+CSS系列课程，甚至适用于已经工作1-3年的前端工程师，这两个教程怎么用呢？两个方法

  1. 先去看第一个，然后哪里懵逼就看第二个对应的部分
  2. 直接看第二个

只要你能看完第二个并且理解个七七八八，你的CSS基础会比大多数人好，你在之后的网站布局阶段也会比较得心应手。

网站推荐

  1. css参考手册
  2. w3c规范
  3. css3速查总表

书籍推荐

  1. 《css权威指南》 第四版 CSS从入门到自闭，一本书搞定，全面深入有插图
  2. 《Head first HTML和CSS》第二版 简单易懂，幽默风趣的入门书籍

JavaScript(ES5部分)

JavaScript是前端中比较难的部分，所有的框架都离不开JavaScript，可以说如果你不学JavaScript，就算学了框架，也只是api工程师。

这部分我推荐先看一遍视频，然后用《JavaScript高级程序设计》这本书补充知识点

视频推荐

  1. JavaScript权威解读

嗯，虽然他上面写着2020，但是应该是17, 18的视频了，但是现在来看依旧非常不错，看完后你会对JavaScript有一个初步的了解，也有了一个不错的基础。

网站推荐

  1. MDN官方文档

书籍推荐

  1. 《JavaScript高级程序设计》

前端提高篇

前端进阶，你需要学习的有HTML5 / CSS3 / ES6

到这个阶段了，你要有心理准备，视频教程会越来越少，文字教程越来越多，因为前一个阶段，培训班都会放出免费的视频让你看看，后面都是要你报班的，而真正的大佬也很少无偿做视频教程，大多是文字输出。我的学习建议是，HTML5 7天，CSS3 10天，ES6 15天

HTML5

H5常用的东西不多，而且大部分都有奇怪的兼容性问题，可以通过看教程的方式学习，学习的重点在下面几个上。

  1. localstorage和sessionstorage
  2. websocket
  3. 新增的语义化标签和video，audio标签
  4. canvas和svg
  5. Web worker

这部分我推荐的是看书自学，因为在线网站的教程比较水，也不够全。

网站推荐

  1. 菜鸟教程
  2. 掘金

第一个不必多说，属于能让你知道这个什么的网站，而第二个，是我现在逛得最多的前端社区，也是我认为国内最好的前端社区，里面的知识丰富度，专业度都非常高，里面的人绝大多数是认真在分享知识，交流经验的，我推荐掘金的目的是，如果你想学习H5的新特性，直接把搜索关键词，比如第一条，搜索localstorage和sessionstorage，立刻会有很多文章帮你全面，深入地理解它

书籍推荐

  1. 《JavaScript高级程序设计》这本书上面已经推荐过了，里面也会介绍H5新增的API，而且比较详细
  2. 《HTML5高级程序设计》 十年后，我们盼望能够再写一本书，而书里会介绍你用HTML5创造的伟大应用。

CSS3

CSS3是重点学习的部分，是现代网页布局的必备技能，很直接的一点就是，如果你不会CSS3，你就找不到工作

我推荐的学习方式是，先看看视频或者在线教程浏览一下大概有啥东西，然后看书或者去掘金搜对应关键字看文章把知识再深入了解一下，因为这部分真的很重要。

视频推荐

我没找到免费的视频教程，但我找到了某个培训机构的CSS3教程，看了下，总体还行，可以当做入门视频看看

  1. 链接 提取码: z7yr

网站推荐

  1. 10天精通CSS3（课程的标题是这样的，不过都是基础内容，学完不算精通）
  2. css3新特性个人总结（掘金文章，可以当目录看看）

书籍推荐

  1. 《css权威指南》推荐过了，这是一本很好，专业性很高且全面的工具书
  2. 《css揭秘》介绍css的奇淫技巧和高级应用

ES6

ES6有多重要？如果你在招聘需求上看不到它，那一定是默认你会的意思。依旧是不会找个屁工作系列

推荐看视频入门，然后看下书补充一下知识点，然后去掘金看看相关文章。

视频推荐

  1. 深入解读ES6系列（深入解读不存在的，就是介绍新增了啥，给你看看用法）
  2. ECMAScript ES6 从一脸懵逼到灵活运用（小姐姐的声音好听，也比上面那个稍微全一点）

网站推荐

  1. 阮一峰的es6入门教程 （通俗易懂，全面丰富）
  2. ES6官方标准文档（官方制定的标准文档，唯一的问题是可能对英文不好的小伙伴不太友好）

书籍推荐

  1. es6标准入门（ 阮一峰大佬入门教程的纸质版 ）
  2. 深入理解ES6（虽然没读完，但就我读的部分而言，绝对各方面都是一流的）

前端小菜—网络

前端的主要责任是从后端拉取数据和渲染数据，你需要学会一些ajax，跨域，http这样基本的网络知识，这样才能知道如何编写从后端获取数据，向后端传递数据的代码。

视频推荐

  1. Ajax全阶段

博客推荐

  1. Ajax 知识体系大梳理
  2. HTTP和HTTPS详解

如果你想了解更多网络知识，可以看看下面的书

  1. 图解HTTP
  2. 图解TCP/IP
  3. HTTP权威指南

前端进阶篇

这部分你需要学习一门或多门主流框架，因为我现在只会vue，所以暂时只介绍vue

vue

vue现在是国内使用人数（集中在中小型公司）最多的框架，vue基本操作 + vue-cli + vuex + vue router这一套下来，推荐学习时间20天，推荐学习方式，文档学习，不推荐视频，因为，感觉莫得什么特别好的，但是非要挑一个，还是挑的出来的。

视频推荐

  1. 技术胖的vue教程（入门看）
  2. 技术胖的vue学习路线（入门vue看）
  3. Vue.js源码全方位深入解析（入门不要看这个！！！这是源码解析，至少做过两个vue项目再来看！！！虽然我买了也看不太懂的样子…..但评价不错）

网站推荐

  1. vue官方文档
  2. vuex官方文档
  3. Vue Router官方文档

书籍推荐

  1. 深入浅出vue.js（同入门不要看，因为是讲源码的，我现在只粗略看了前几章，但我感觉这是我花的最值的50大洋）

如果你需要vue的实战课程，你可以看看这个（谷歌浏览器打不开就用Edge）

react

虽然我嘴上说着只讲vue，最后我还是真香了，但是也就顺带提提，因为我真不会，而且短时间内也不打算学…….因为我感觉又是个天坑

但我可以给你推荐个学习路线：技术胖的学习路线

前端升华篇

如果你已经学了框架，那么，恭喜你，那你现在已经可以去80%的公司投下简历了，不过如果你还想继续提升（当然提升不完的），你可以继续学习下面的知识

webpack

打包工具，具体的概念解释起来太复杂了，就直接推荐吧，推荐学习时间10天，推荐看书自学，视频也行，文档我感觉不适合入门，比较适合哪里不会点哪里。

视频教程

  1. 10天搞定webpack4

网站推荐

  1. webpack中文网

书籍推荐

  1. Webpack实战：入门、进阶与调优（考试月买的，目前就看了第一章，但感觉很不错，至少可以用来入门）

微信小程序

这个东西有多火就不用我说了，是招聘的加分项。推荐看书 + 文档学习，视频教程依旧水，

视频推荐

  1. 28节课快速玩转微信小程序

网站推荐

  1. 微信小程序文档

书籍推荐

  1. 微信小程序开发入门与实践（我的舍友有，翻了翻感觉对新手还是比较有好的）

移动端

还没学，等我学了再更

后端语言

一个前端工程师，虽然说要会一门后端语言，但不必成为专业的，我就简单推荐入坑的方案好了。

java

java推荐入坑方案：看视频为主 + 看书 + 查文档

  1. 视频推荐这个：高琪老师的Java300集，之前学安卓时看的这个，非常不错，对底层，思想的关注比较高，看这个会帮助你领会java的精髓（PS：图形化界面的部分不要看，没必要，一般也不用Java写图形化界面）
  2. 书推荐这个：java核心技术卷1，前端只要这本书作为工具书，哪里不会查哪里就完事了
  3. 文档：Java8文档

nodejs

nodejs推荐入坑方案：看书 + 文档，视频有点水，不过也不是不行

  1. 视频推荐：Node.js入门
  2. 书籍推荐：深入浅出Node.js
  3. 文档：Node.js文档

PS：前端工程师学习Nodejs压力会比较小，因为语法非常接近，Nodejs使用的也是ECMA标准，所以变量，对象，数组这些语法，完全一样…..你要学习的就是Nodejs中浏览器不提供的API（当然Nodejs也不提供浏览器才会有的API）

你可能还需要的东西

这部分非常个人向，基本是我脑子一拍写出来的，有兴趣可以康康。

更深入的对JS的理解

说是更深入，其实也比不上Java，Java的深入可以深入到CPU，硬盘等硬件，JS嘛……封装的太好了，挖不进去…..但是你还是可以向下挖一点嘛，推荐个大佬的博客，里面的内容会让你对JS的理解比别人更深，点这里

一些计算机原理方面的东西

如果你不是科班生，可能对计算机这个系统缺乏宏观的认识，可以看看b站的一个速成教程，如果你想学习更多的计算机原理方面的东西，你可以去看看计算机组成原理，计算机网络，数据结构和算法，编译原理这四门课程，中国大学MOOC和b站都可以找到相关课程。

英语

很遗憾，程序员是要英语的，就随便说几个理由吧

  1. github，Stack Overflow这些一流社区全是用英文交流的
  2. 文档基本都是英文的
  3. 最新的技术，标准，一定是英文发布的
  4. 国内互联网公司压力太大顶不住想去外企工作也要英文交流

对了，会英文还可以让你起变量名比较好听不会被队友打233，不过言归正传，英语还是很重要的，第二点和第四点你可能听着很扯淡，你可能会说国内的文档很多都有中文啊，你看看JQ，MDN什么的不都有中文吗，很遗憾那是个人翻译的，虽然有翻译，但是质量参差不一，甚至还会翻错（我想到了个人才在MDN上把flex布局翻译成灵活布局的233），而且可读性还未必好，为什么呢，单用MDN来举例，他的中文翻译是谁都可以编辑的，所以…..你懂得…..当然我还是很感谢他们的，不过如果你想往上爬，那英语必不可少……至于第四点嘛，你懂得，外企955，工资也不比国内互联网公司低，最重要的是相对稳定一点，就是可能要英语面试…….

很遗憾，我这条四级500+的咸鱼没什么学好英语的好办法，不过你只要高中英语及格，再配上谷歌翻译（因为计算机科学方面的单词，你过了雅思也未必看得懂），前三条就基本没问题了，如果高中英语不及格的话，赶紧背背3500吧。

数学

数学也是要的…..虽然前期可能用不上（其实我现在也就用过矩阵和三角函数），但是我觉得吧，当未来webGL普及后，3D化的东西，听着就要数学，尤其是线代，不过如果你编程水平还不够，也不急（说的就是我）。还不如先好好提高编程水平

深度优先？广度优先？

我说的不是BFS和DFS，我说的是前端程序员，在学习前端时，是应该广度优先还是深度优先，我的看法是，在前期先深度优先，后期再广度优先，深度优先是先确保你在一个方向上有较大的竞争力，广度优先是为了探索更多可能性，如果前期广度优先，容易什么都会一点，但容易站不住脚。所以，如果你学了三大框架中的任意一个，最好去想想他的实现原理，而不是屁颠屁颠地去学下一个。

一个好的键盘 + 学习盲打

好的键盘嘛，打字舒服心情好，随便去买个2-3百的就行。

学习盲打可以试试这个，让你摆脱二指禅

SakuraSnow收集到的视频 + 书籍资料

链接: https://pan.baidu.com/s/1LsLFY6qiXtjZ_Jv4mGfNAg 提取码: sena