前言

好的学习方法可以事半功倍，好的学习路径可以指明前进方向。这篇文章不仅要写学习路径，还要写学习方法，还要发资料，干货满满，准备接招。

网上有很多前端的学习路径文章，大多是知识点罗列为主或是资料的汇总，数据量让新人望而却步。今天我们虽然也有大量的知识点，但是整体以特定目标引导学习，让学习梯度更加平滑。

文章用下面七个目标引导学习，只要依次完成，就可以踏进前端开发的大门

1. 将设计稿还原成htML页面（5天）
2. 在网页中添加图片切换的效果（2天）
3. 学会使用gIT管理你的代码，并且用Markdown格式做笔记（2天）
4. 系统地学习javaScript（8天）
5. 搭建一个web服务器（5天）。
6. 熟悉ajax和跨域请求。（2天）
7. 了解一个前端框架。（2天）

一、将设计稿还原成html页面

第一天：掌握html标签和css样式基础

html有那么多标签，你只需要记住八个就可以搞定99%的网页，它们分别是：h,p,a,img,ul,li,div,span。

css选择器：id选择器，class选择器，元素选择器，层级选择器；记住四个，够用了。

css属性：width,height,color,background-color,font-size;记住这几个就够了。

上面的内容没有多少需要理解的，照着w3cschool上面敲一遍，剩下的时间自己随便玩玩，比如弄个空div，设置个宽高，设置个背景色，里面添加一个标题，添加一个连接等等，想怎么玩就怎么玩，但是注意：

有疑问不一定要马上解决，但是定要用笔记下来，以后可以带着问题学习(同下)
有疑问不一定要马上解决，但是定要用笔记下来，以后可以带着问题学习(同下)
有疑问不一定要马上解决，但是定要用笔记下来，以后可以带着问题学习(同下)

如果有问题马上去解决，你会陷入问题的黑洞，然后被一个个连锁问题搞得喘不过气来，记住，第一天就一个目标，知道html和css是怎么用的就行。

第二天：盒子模型

关于盒子模型，网上有大量的博客，找一篇自己能理解的从头看到尾就差不多了，其实记住五个css属性就行（width，height,margin,padding,border）

概念理解了一点要多练，一天的时间搞盒子模型，怎么也玩明白了。可以看看电商网站中的一个个盒子都是怎么设置的。自己也照着做一做。

第三天：浮动布局

在前两天的学习中，一定会发现：有些元素独占一行，有些元素可以和其他元素共享一行。因为什么？看看元素的分类。如何让两个div放在同一个，学学浮动布局，在看看如何清除浮动。这些网上都有相应的教程。也可以关注微信公众号：晓舟报告，发送“获取资料”，就能收到下载密码，网盘地址在最下方，获取教程和案例的资料。

第三天主要就是两个属性（float:left和clear:both），玩明白了任务就完成了。

第四天：定位

如何设置元素的绝对定位，相对定位和固定定位，如何设置定位元素的参照物：一个css属性和三个值就搞定了（posotion：absolute,raletive,fixed），这个也可以玩一天，看看网页中的广告是怎么做的。向对联广告，弹框广告，都需要用到定位。

第五天：还原设计稿

如果前四天的知识都掌握了，第五天要学习还原设计稿，找一个简单的设计稿（psd格式），用photoshop的切片工具把主要内容切下来（可以用一上午的时间学习切图），用半天的时间将设计稿还原成html页面。如果没有简单的设计稿，可以关注微信公众号：晓舟报告，发送“获取资料”，就能收到下载密码，网盘地址在最下方，这里有简单的设计稿素材。

二、在网页中添加图片切换的效果

jQuery仍然是当前使用最广泛的库，我们可以在不懂JavaScript的情况下，直接使用jQuery实现一些网页效果，如果自学，我建议先简单学学jquery，然后再去学习JavaScript，这样学习曲线更加平滑，而且会有更多的学习乐趣（js相对枯燥）。

第六天：入门jQuery

首先，了解jQuery选择器，这个基本看一下就会了。

然后，使用jQuery修改样式和属性。

最后，学会绑定单击事件

第七天：完成一个图片切换效果

可以上网找现成的案例，也可以看书上的案例。《锋利的jQuery（第二版）》写的不错，有兴趣看的话看两个小时，扫一扫就行，适合初学者，不要在这本书上面浪费太多时间，如果没有找书籍或是案例素材，可以关注微信公众号：晓舟报告，发送“获取资料”，就能收到下载密码，网盘地址在最下方，资料都是现成的。

三、学会使用git管理你的代码，并且用markdown格式做笔记

第八天：是时候学习git了

学到第八天的时候，你会发现你的代码越写越多，案例越来越多，笔记越来越多，有的可能已经找不到了。这时候，你需要用git来管理你的代码。廖雪峰老师的博客有很不错的git教程，可以看一下。如果想看精简版的，可以关注我的微信公众号。

第九天：用markdown记录你的笔记

markdown格式很适合程序员做笔记，真的非常非常适合，我现在写这篇文章就是用markdown格式在写，学起来也非常容易，谁用谁说好，抽一天的时间学习一下把。然后以后所有的问题，资料，笔记都用它来记录。

四、系统地学习JavaScript

是时候学习JavaScript了，对没有编程经验的朋友，这也许是个坎，但也是个试金石，对于一个前端开发工程师，你要用JavaScript表达你的感情，用JavaScript对浏览器下达指令，用JavaScript体现你的能力，JavaScript是你进步的基石，这个不能再重要了。

第十天：变量、数据类型、运算符、表达式

定义变量用VAR（let是什么？先不用管），数据类型记住六种：数值，字符，布尔，null，undefined，对象。运算符和表达式，可以看看犀牛书，这章写得不错。

第十一天：控制流程语句

记住这四个：if,switch,for,while。熟悉语法，在做几个简单的练习。比如：输出1-100所有整数，输出1-100所有奇数，输出1-100所有能陪7整除的数，输出1-100前3个能被7整除的数。用for写完了再用while写一遍，反正就是多写多练。

第十二天：函数

什么是函数，什么是返回值，什么是参数，什么是形参，什么是实参，如何调用函数。在了解一下作用域的概念。然后做几个练习：写一个函数计算两个数的加和，写一个函数计算四则运算，写一个函数计算阶乘（用循环，不用递归）。在了解一些作用域的基本概念。

除非好奇心驱使你，否则不要去看作用域链，不要去看闭包，不要解决函数嵌套的各种问题，这些都不是30天之内的任务

第十三天：数组

到w3cschool上看看数组的基本概念，如何遍历数组，有兴趣的话可以试试遍历二维数组。在数组中添加数组，删除数据，替换数据，如何使用排序方法（sort）。

第十四天：内置对象

学会使用三个内置对象：数学对象、日期对象。数学对象会取任意的随机数就行，比如1-7的随机数，10-100的随机数。日期对象会获取年、月、日、时、分、秒，还有时间戳就够了。

第十五天：计时器方法

四个计时器方法：setInterval,clearInterval,setTimeout,clearTimeout。然后做练习：5秒跳转到其他页面；网页显示时钟；还有网页显示倒计时；有时间做一个图片自动轮播的效果。

第十六天：DOM

熟悉DOM的树状结构，节点关系，html节点分类（元素节点、属性节点、文本节点），获取节点的方法，记住这两个就行：querySelector和querySelectorAll。（如果看到getElement(s)ByXXXX,有兴趣就看看，没兴趣就放着），添加节点，删除节点，修改节点的各种方法，都试一遍就可以了。

第十七天：DOM练习

今天的主要任务就是把之前用jQuery做的效果，用原生的JavaScript实现一遍。

学到这里，原生JavaScript就告一段落了，什么闭包，原型，面向对象，ES6，都不要在这个阶段学。学习就像剥洋葱一样，一层一层的去见识里面的事件，如果扣一个点一直向内探索，这种方法不适合自学，会严重打击自信心。

如果有比较难的案例不会自己写，可以关注微信公众号：晓舟报告，发送“获取资料”，就能收到下载密码，网盘地址在最下方。

五、搭建一个web服务器（5天）

第十八天：学习node

对于前端同学来说，用node搭建web服务器是再合适不过的了，最起语法层面不用重学了，大家都是js吗。

前端同学学习node要简单粗暴一点，什么异步io,事件驱动，单线程，都不用管。先照着官网开一个服务器再说。

第十九天：学习npm

要学会用npm下载第三方模块，要会用package.json文件管理依赖模块，然后下载一个http-server的模块，开一个静态服务器就够了。

第二十天：了解http协议

知道什么是请求，什么是响应，查查get和post的区别，学会使用chrome调试工具抓包。看看别人网站的请求和相应是什么样的，再看看自己的静态服务器请求和响应是什么样的。

第二十一天：用exPress搭建静态服务器

不要写太多，就建一个server.js文件，引入exPRess，处理两个url的请求，send回几个字符串就OK了。前端可以用表单提交get和post请求，用抓包工具看看有响应式什么效果，没响应式什么效果，404是什么效果。

第二十二天：了解一下pug模板引擎
用模板继承做一个动态页，感受一下最简单的网站时如何实现的。

六、熟悉ajax和跨域请求。（2天）

第二十三天：学习ajax

了解XMLHttpRequest对象，再看看如何使用这个对象发送请求和接受响应的数据。如果之前的内容了解的透彻，这个就很好理解了，ajax说的简单点就是http协议的实现。

尝试用封装好的ajax方法来请求数据，jQuery有，axios有，如果前面的课程都学会了，这个看文档，超简单。

第二十四天：学习跨域请求

看看什么是同源策略，了解跨域请求的解决方案，看看jsonp的原理，在尝试用封装好的jsonp方法获取数据。jQuery有，jsonp模板(npm可以下载)也有。至于后台，用node自己模拟一个跨域的环境，应该不难。

七、了解一个前端框架。（2天）

第二十五天：学习webpack

阮一峰老师有一套webpack的教学视频，写的不错，可以照着练练，然后，找一个写好的webpack配置文件和package.json文件，面得自己配浪费时间。

第二十六天：刷文档

现在主流的前端框架：react、vue、Angular，找一个对着文档刷一天，感受一下它与jQuery的区别。

八、注意事项

• 写的一定要比看的多
• 写的一定要比看的多
• 写的一定要比看的多

重要的事情说三遍

九、总结

通过上面26天的学习，恭喜你！你已经在前端开发的道路上走出了第一步，之后，喜欢数据结构和算法，可以去leetcode刷题，喜欢node，可以系统的学习一下后台，可以深入学习网络协议，操作系统，数据库等知识，喜欢原生JavaScript，可以看看《js高级程序设计》还有再了解ES的新特性。总之，把上面的目标完成之后，你的世界就开阔了，对知识体系也有了一个全新的理解，到时候再着手深入某一个方向的学习。

十、资料

资料下载地址：http://pan.baidu.com/s/1jI7pjJw

原文链接