前言

下周要给学弟学妹们做个报告，关于怎样学习前端？？？所以在此先整理一番。

作为一个网络工程专业的学生，因为对于本专业并不是很感兴趣，就在课外时间摸索了下前端，最初的想法也只是想看看html和css，能写出自己喜欢的页面，但后来得知前端要学的东西可多呢，请看下面的前端知识体系.........（原来我会的只是切页面~~~~）

前端体系结构图

还有就是从网上的一个培训机构截下来的学习路线图给你们做参考。
这些知识在培训机构大概花四五个月的时间，学员们会在高强度的作业下完成。但对于在校的学弟学妹们可以利用两年甚至三年的时间，自己对照着大纲寻找相关的书籍、视频、大牛的博客和一些前端专栏进行学习。当然你会在学习中遇到很多问题，也许自己一时半会解决不了，但一般的问题在网上或是知乎之类的网站上都能找到，实在解决不了可以问问认识的前辈或在知乎上进行提问，那些大牛们非常乐意为你解决问题。在这里我要提醒大家，自学的途中肯定会走很多弯路（像学姐我就走了很多弯路，都是泪啊），因为不像培训机构身边有老师和同学不懂得你可以马上问他们，所以我们自学的孩子主要是靠自己。而且有一点很重要，自学的我们基础肯定要比培训出来的强。基础打牢了，学习什么框架啊都不会太难。

第一阶段

第二阶段

第三阶段

第四阶段

第五阶段

第六阶段

前端能做什么

前端无处不在，无所不能

实现Web界面优化代码并保持良好的兼容性
Web前端表现层及与前后端交互的架构设计和开发
配合社交及人员实现产品界面和功能
利用各种Web技术模拟开发产品模型
它在微信的使用也非常广泛，现在的微信小程序是火的一塌糊涂，还有炫酷的3D动画和狂拽炫酷的网页特效粒子动画都是它实现的。
用它开发的手机应用可以完美的在苹果手机和安卓手机上运行
现在用H5开发的游戏越来越成熟，将来必在游市场上占一定的份额，游戏案例包括：切水果，中国象棋，五子棋，太空大战，超级玛丽
现在我们手机常用的离线缓存、音频、视屏、地理定位、Canvas绘图以及大量的动效都离不开HTML5
未来是互联网的时代，各行各业、每家公司都需要一完美的前端去征服用户，HTML5的特性"跨平台"，让开发更加轻松快捷

干货

大神门的个人博客

张鑫旭首页
 小胡子哥的博客
 阮一峰首页
 js大声汤姆大叔
 一个前端妹子的博客
 廖雪峰的js

团队博客和技术社区

w3cplus
淘宝前端团队
 腾讯前端团队
 伯乐在线
 SegmentFault
掘金
 前端乱炖
 前端外刊-知乎专栏

一些有视频的学习网站

这些网站上都有些免费的学习资源

慕课网
 腾讯课堂
 网易云课堂
 智能社
 妙味课堂

新手学习建议

对于入门的人建议先看

HTML

HTML教程 | 菜鸟教程

CSS

CSS教程 | 菜鸟教程
 CSS参考手册

javascript

javascript教程 | 简介
《JavaScript高级程序设计》（一定要看这个，而且最少要看两遍）

对于上面推荐的博客建议可以先看看阮一峰的js教程，张鑫旭的css系列，w3cplus上有关css的讲解，其它的慎重进入，有些对于入门的新手并不实用。建议在有了基础印象之后再去搜索。将上面的学完后可以做做实例，在慕课网上有很多实例，在w3cplus上也有很多小Demo，自己可以学习敲，也可以在网上搜或是模仿别人的网站写个静态页面。
一定要给自己定目标，比如一个礼拜学会HTML、一个礼拜写完2个DEMO、半个月学会css、一年看完JS高级程序设计。如果实现不了，对于男孩子就不要玩英雄联盟，女孩子就不要逛淘宝，看电视剧，如果按时完成甚至提前完成，恭喜你可以有一小段时间吃喝玩乐了。
只要你坚持每天给自己下达任务并很好的完成，我相信你可以把基础打的很牢固。