前端的基础无外乎HTML、CSS、js三类，HTML控制内容、CSS控制表现、js控制动效。由于看题目感觉题主应该是要快速上手，所以基础学习的时间分配可以有侧重：在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
- HTML、HTML5标签过一遍：大概2天。不要求对每个标签的每个属性都了如指掌，知道什么情况下用什么标签就足矣，死记硬背也没什么意义，后面用的多了自然就熟了。
- CSS、CSS3：也还是整体先过一遍：大概3天。重点关注选择器语法、选择器优先级计算，要写出高效简洁的CSS，其实也就是看选择器写得好不好而已。
- 了解常见布局：大概2天。熟悉一下常见的2列3列自适应布局方案，各种居中，各种行列的实现方式有哪些，响应式布局的实现方式等。
- 模仿几个PC、移动端网页：10天。学编程主要是靠练习，前面学的都是比较零散的细节，这时候可以找一个比较简洁的网站去模仿它的静态页面。这个时候的重点不是某个CSS属性的用法，而是要看一下一个网站的HTML结构是怎样的，CSS样式是怎么组织起来的，HTML与CSS是怎么结合的。多想想为什么要这样做，这里可不可以精简？别把这些网站想得很厉害，由于它们普遍都经过了几波人的迭代，一般来说结构都偏复杂的，都是有优化的空间的。
通过以上的学习，基本上拿到一个设计稿你就能做出静态页面了。如果你还有不错的布局意识、良好的色感，基本上你就可以做一个酷炫的静态页面去面试前端设计岗位了~
不过等等！是不是漏掉了js呢？在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
恰恰相反，由于js可以同时控制HTML和CSS，所以js在前端中的重要性其实是高于其他两位的，而且显然应该在有了HTML、CSS的基础上再去学习。
- 基础语法：还是可以在[菜鸟网](菜鸟教程 - 学的不仅是技术，更是梦想！)上学习，也可以看看廖老师的js教程，过一遍也相当快。
- 重点：事件、DOM操作。这些是js最原始的东西，主要是用来实现交互效果的。
- 组织代码：了解函数，了解对象，主要是为了以更好的方式组织你的代码。不然你一行一行写下去也行，但完全没有条理，日后也无法改动。写代码要养成一个好习惯，除了考虑怎么实现，还要考虑怎么去组织代码，把你的代码弄得条理分明。
进阶部分：
通过以上基础学习后，基本上都能满足产品大人的常规需求了。下面就要往炫酷、屌炸天的方向去努力了：
- 调试工具：极度推荐chrome！抱歉，其实应该在最开始推荐的。在写CSS的时候，你还是写一下保存然后打开浏览器看效果？用用chrome开发者工具吧，CSS实时调整，爽！js各种调试，爽！chrom使用教程在此我向大家推荐一个前端全栈开发交流圈：619586920 突破技术瓶颈，提升思维能力
- 性能意识：之前的基础学习都是为了做出一个东西，而现在你应该要想着做出一个高性能的东西。性能主要有两方面：加载速度以及页面执行效率（多指动画），直观点说就是卡不卡。这里可以看看腾讯前端项目组的总结：移动H5前端性能优化指南
- 代码规范：基础部分的代码组织没有着重强调，是因为那个时候了解太少，以实现为目的。现在进阶阶段就要考虑使用面向对象的方式来组织代码了，而且还要有模块化工程化的意识。可以从js看起阮一峰的模块化教程，主要是理解这么个思路，日后语言层就会支持。
- 了解一下服务器开发，做前端总是要跟服务器配合的，你要是完全不懂后端，那就简直无法交流了呀。
其实，题主你学这个是要干嘛呢？如果是单纯为了做点小应用的话，其实也可以用WeX5这种可视化开发工具，支持安卓、苹果、web几种应用模式。如果是要进入前端行业，那就要好好学习了。
结语
感谢您的观看，如有不足之处，欢迎批评指正。
#获取资料
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：619586920，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。