本文并未完全完成，拼命持续更新中......。如果鸽了，请保证不打死我。

序

工欲善其事，必先利其器，在如今的软件开发行业，竞争十分的激烈，你不仅要有好的基础知识，还需具备良好的持续学习能力，并且知识每天都在更新，如果你是后来者，同时还需要跑赢时间。最近一位好朋友正在找工作，制定这个计划希望能帮助她，同时也希望能帮助更多走在这条路上的朋友。

前言

• 计划时间：一个月（30天）
• 计划目标：前端工程师（中级）
• 阅读人群：有编程基础或者初级开发人员想转前端者

距你上次给自己制定计划到现在已经多久了？怕是连你上次制定计划的时间也给忘记了吧。没关系，行动起来，按照这个计划走，一步一步走向不可预知的开发深渊。

说明

本计划制定为一个自然月。也就是30天，当然不是每天都需要学习，不过大多数都是有任务的，你中间也可以暂停，过后继续跟进，不过不建议中断。

涉及前端大多数知识，并且针对前端工作岗位优化出需要学习的知识，不太会用到的会提及，但不需要深入学习。

整体计划

技术	明细
HTML	标签 html5 语义化
CSS	布局 样式 定位 css3
JS	语法 ES6
开发工具	vscode 插件
版本控制	git
包管理	npm yarn
打包	webpack gulp
框架	react vue
状态管理	redux vuex
css高级	css-module css-next less sass
库	jquery lodash
代码质量	eslint stylelint prettier
类型检查	flow typescript
测试	jest
安全	XSS CSRF
服务器	nodejs
其他	git restfulAPI PWA 手机端开发

明细

不得不说的东西，搜索用谷歌没问题吧？翻墙应该是必备技能。
资源列表：
[MDN](https://developer.mozilla.org/en-US/)
[google developer](https://developers.google.com/products/)
[books PDF](https://pan.baidu.com/s/1o8K6lcu#list/path=%2F)

第一天

概要：VSCode编辑器 互联网模型 HTML

欢迎，万事开头难，总算准备好开工了吗？开始之前有必要说下，目前的前端开发和以往的大不相同了，前端经历着巨大的改变，一名合格的前端工程师，需要掌握的技术，随着时间慢慢增多，不要被上面罗列的给吓到了，循序渐进，相信你可以完成的。

任何一个语言的学习，都逃不过经典的 hello world。但在开始之前，你是不是需要一个好用的编码器呢，市场上有许多优秀的编码器，不过我推荐你使用 VSCode(点击下载)。安装好了吗？如果还没，快快去安装，然后自己捣鼓下，大概怎么用的。

大概会了吧，不过别急，还没到编码的时候，你应该先了解互联网基础模型,理解因特网是怎么工作的，什么是DNS,什么是ip地址，什么是url,网页是什么等问题。一个经典的问题是当点击回车后发了什么（点击阅读）。希望你看完还没有晕，因为我还没看完就晕了-_-!，不过大体阅读是能在脑海中建立基础的概念的，后面可以回过来阅读。

了解页面就是html css js 加资源的组合，也就明白你需要制作页面要掌握的知识了。下面就是正式开始学习了。不过我并不能教你什么，因为网上相关知识已经很多了，而且普遍比我好，所以能做的就是又是推荐你进入freeCodeCamp(在线教程 重点系列)。这个项目作为主线项目。每天必学项目，然后扩展里面没有的。今天嘛，当然是简单的 HTML5啦。附赠额外参考手册 html5 教程。

第二天

概要：html5 css3 flex

标签看完了吗？如果你是初学者，估计有点吃力，别急。等你看完在继续看后面的好了。今天嘛，主要还是 html5 标签。这个是 web 的基础，打牢基础才能更好的往后学习。跟着 freeCodeCamp（在线教程） 继续往后做题目。你会发现会涉及到css的知识。所以你又要学习这个新玩意嘛，接触后不难学，主要是记住一些属性，在脑海中能形成盒子模型。然后学会简单的布局技巧，哦忘记说了，现在布局都用flex 弹性盒子模型来布局了。然后不可避免的你需要接触到css3，比如变形，动画等特性都可以用 css3 来完成，还有一些新的选择器，不过这新选择器在实际中运用并不是很多。

html5标签里面有许多在实际项目中用的比较少的，可以粗读下，注重看下常用的标签，并且理解块，内联模型。

css3可以跟着 css3教程（在线教程） 走。然后还是重点阅读常用的，非常用的只需要粗读下就可以了。然而你看着我问，你并如果没开发过网页，也不知道啥是常用，啥是不常用。我就问你，你上网这么久，看的多的就是常用的，很少看到过的效果，就是不常用。。。

当然今天不只是 html5 和 css3 了，还包括布局。以前用 float 布局只需要了解即可，重点学习 flex 布局。参考阅读 flex 布局教程-阮一峰（文章）。

第三天

概要：布局 项目练习

友情提醒下，今天你应该要把 freeCodeCamp（在线教程） 里面的 html5+css 章节完成哦。不过完成还没结束，还需要继续加强布局的训练，阅读 flex 布局解决了啥问题（文章）。里面罗列了几种可以用 flex 布局来实现的布局种类，试着自己编程写写，实现下里面的效果。

也学了几天了，需要做下项目，来验证下自己是否掌握了相关的知识，需要自己网上找个网页，简单写出相关的布局界面。要是实在不好找。https://h5.ele.me/ 这个可以模仿着写下。数据只需要静态的。

实战完相关的知识点后，总结下遇到的问题。

第四天

概要：版本管理 git

在学习完 html 和 css 之后，为了给下面学习 js 打好基础，或者能在 github 上做出贡献，而首先第一步就是学会版本控制工具。目前比较流行的 git 是必须要学习的了。

那么首先你需要了解什么是版本管理工具，它有什么用，解决了什么问题。推荐新手可以阅读书籍git 教程（中文），当然还有一种选择是观看视频 learn git and github（英文）。二者选一个即可。记住，你不需要成为 git 的专家，无需去了解也许你一辈子都用不到的命令，只需要了解 git 的常见用法即可，等到确实需要高级命令的时候，动手翻阅相关的文档就可以啦，当你理解了 git 的概念，并且了解了大致的常用命令，分支，标签，远程仓库等相关知识点后。可以试着在 git tutorial（英文） 里面学习输入命令，这个教程是交互式的，跟着一步一步输入命令即可，力争理解每个命令的用法和作用，最后当然是从 git-scm 下载安装 git（如果你是 mac，可以用 homebrew 来安装），并能在 github 上建立注册账号并且建立自己的第一个仓库，并且通过 git 提交自己的第一行代码到仓库啦。

记得看完上面的教程，如果你还想深入全面的理解 git。推荐阅读 progit2（电子版英文） 书籍。网上也可以找到对应的中文翻译版本。（一般不需要阅读，除非你想成为专家）

哦，最后忘记提了，上面的学习是比较正式全面的学习 git 啦，如果你比较懒，只想用最简单的方式学习，git - the simple guide（文章） 可以帮助你快速上手 git 的用法，祝你好运。

配置 git 别名查看提交日志，配置好后输入git lg查看超棒的输出效果。

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

第五天

概要：js 书籍

当你看到 responsive design with bootstrap 这章的时候，里面出现了bootstrap 这个 css 库。练习完里面的内容，应该要记住的几点是，你不要记住 bootstrap 里面任何标签，组件。因为那是人家提前封装好的样式而已，只是为了快速开发。其实我建议是跳过 bootstrap 的学习。因为并不会帮助你什么，但是作为一个完整的过程，建议了解下即可。根本还是html css 这两样技术。

同理，下面会有jquery的课程。建议也是需要了解下 jquey 是干什么的，并不需要去背 jquery 里面提供的 API。当你看完 jquery 的课程时候。应该可以自己独立完成页面基本布局了，并且完成简单的动画效果。而后将接触JS 。javascript 作为一门完整的编程语言。如果你并没其他语言编程基础，建议阅读《JavaScript DOM编程艺术》。

JavaScript DOM编程艺术.png

如果你已经有 JS 基础，想更进一步，建议阅读《JavaScript高级程序设计（第3版）》。

JavaScript高级程序设计（第3版）

想根据透彻的了解 JS。《你不知道的 javascript》这本书决不能错过。

你不知道的 javascript

《你不知道的 javascript》（在线版本） 。当然你喜欢阅读英文，可以看原版。

选择一本适合你的书籍阅读，记住不要半途而废，任何书籍的知识体系都是完整的，选择一本即可。

更多好的书籍可以在我的百度云盘书籍（超多书籍，欢迎下载）下面的 web 前端分类下载。

第六天

概要：书籍 JS语法

阅读书籍是最好的提升自己编程能力的方法，同时不断的实践在书本中学到的知识才能更好的记住。这里默认你并没多少 JS 基础，所以需要掌握 JS 的基本语法。例如变量，条件，循环，函数等。当然最新的 JS 语法一直在变化，所以也许你看的书籍或者里面的知识已经过时了，但是你了解也能明白这门语言的演化。

当然你还需要一个在线可以练习 JS 的网站。jsfiddle（在线网站） 是一个不错的网站。如果你还想找找人家写的效果。codepen（在线网站） 也是个不错的地方。

今天应该要了解的应该包括 JS 的基础语法。嘿，然而你想要测试下自己到底对 JS 了解了多少，怎么办，可以注册这个网站 codewars（在线网站） 看下里面的问题你可以解决多少，当然里面比较多的是算法题目。基础的 JS 数据结构一定要掌握好。

第七天

概要：高级进阶 语法特性

在学习完 JS 相关的基础语法后，需要学习 JS 语法的高级知识。包括原型链，闭包，作用域，基于原型链的基础，Object Function 顶层关系图。这些知识算是 JS 的语法核心了，需要一步一步慢慢掌握。

这个阶段可以通过阅读比较好的书籍深入了解下JS语言，比如 《Speaking JavaScript》（电子版）。或者上面推荐的《JavaScript高级程序设计（第3版）》。

Speaking JavaScript

第八天

概要：ES6

在你了解了 JS 的语法后，有必要继续学习未来的 JS。未来的 JS,简单来说就是学习语言的发展趋势和标准，比如 ES6, ES7，以及未来的 ES8 等。这个阶段学习的语法，有些是浏览器目前还不支持的，有的已经被最新的浏览器实现了，所以学会了 ES6，在生产环境中还需要进行编译。也就是用 ES5 实现 ES6 的语法。在这个过程中，会接触到比如 node、npm、babel等新东西，不过无需害怕，后面都会一一攻破的。

当然学习 ES6 的方法也是阅读书籍了，一本系统的，全面的书籍可以帮助你构建知识框架，更细致的学习到知识核心，也是学习必不可少的一环。推荐阅读阮一峰老师的《ECMAScript 6 入门》（电子版）。

ECMAScript 6 入门

如果你偏好阅读英文书籍 《Exploring ES6》（英文电子版） 也是一个很好的选择。

Exploring ES6

第九天

概要：nodejs npm

当学习完 JS 语法，你应该可能独立制作简单的静态页面和特效了。JS 仅仅是能在客户端（浏览器内）执行。它是一门独立的语言，也可能在服务器端，芯片上执行。只要有执行环境，都能运行 JS 代码。目前在服务器端实现的出名的当属nodejs。[官方网站传送]（https://nodejs.org/en/）。你也许会说，你不想接触后端的知识，不想写数据库操作，逻辑处理，就可以不学习 nodejs。其实不然，现代的前端开发，有许多的工具都依赖 nodejs 来实现自动化，有很多预编译方式比如（babel，webpack,rollup）都需要运行在 node 之上。有了这些工具，能更好加快前端开发的效率和质量。

nodejs 归根到底是运行 js 的一个平台，如果你会了 JS，其实你基本就会了 nodejs, 只是在这基础上需要掌握相关的 API，如果你专注前端开发，并不需要去记住这些 API，只需要了解基本用法即可。nodejs 有个管理包的工具叫做 npm。npm 官网 学会使用 npm 后，你就掌握了使用是全世界开发人员开发的库，任何对你或者你项目有帮助的库，你都可以拿来用，十分的方便。

那么怎么上手 nodejs 呢。市面上有许多的教怎么学习 nodejs 的书籍，写的很多，但是并不适合你，你也许是需要在你的电脑上安装好 node。并且运行出一句hello world即可。然后在去学习 npm 的用法。会安装其他人的包，并且会上传自己的包也就没有问题了。当你需要问题的时候，在去深入，这样学习后记忆才更加深刻。

第十天

概要：yarn gulp

还记得 npm 是一个包管理工具吗，除了 npm 之外还有一个 facebook 出品的管理工具叫做 yarn。当然从我个人的角度出发，其实 npm 已经够了，并且 npm5 增加了 lock 文件。所以个人感觉用 yarn 的必要性不是那么大了。在前端自动化的今天，有许多的新语法，比如（less,pug,sass,typescript等等)这些需要通过工具编译为浏览器能运行的代码。所以需要一个工具，而目前早期的有 gulp。这个是一个任务流控制工具，能很好的解决你的问题。当然在后面会学习到单页开发中常用到的另一个打包工具叫 webpack。

第十一天

概要：webpack

webpack

当入门了node，接下来需要熟悉打包工具的用法，打包工具解决了什么问题？试着想想看，如果没有打包工具，每一个 JS 文件如果想被引用进页面中，只能通过 script 标签，而如果 JS 文件特别的多，那么 script 标签也十分的多，并且还需要管理他们之间的逻辑关系。而解决这一问题的方案，就是采用打包工具，当然 webpack 目前不单单只是一个打包工具了，还额外附带许多其他功能，比如编译，压缩，处理图片等等。

在初次接触 webpack 的时候，也许会觉得 webpack 配置比较复杂，不要遗漏细节，跟着教程文档，一步一步学习即可。

当然这里额外推荐一个在线打包的文档webpackbin。

第十二天