首页

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

# 我要学什么

想要知道学什么，看招聘需求是最快的，这是腾讯 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