第一个月 HTML+CSS

web前端自学

1.视频网站：慕课网，麦子学院，极客学院，北风网，B站
2.w3school

1.学习大纲

环境搭建

前端环境很好搭建，一个开发工具即可，webstorm，hbuilder，vscode，sublime。
初学者建议sublime也不要装插件，没有语法提示，可以打基础

html基础

css基础

html是勾勒，css是染色，直接按照自己所想开写，这是你的第一个项目

js基础

js是页面的逻辑，作为一个web前端工程师，js是很核心的部分，也是很难的部分。js的学习之后放长一些，尤其是前一周，要让自己去熟悉那种语法环境，培养自己的开发思路，而且有一点就是学完一个星期的知识之后，及时和你的指引人沟通，看卡自己的理解是否有误，还有就是学习思路是否有问题，他会给你指出那些东西需要多学习，哪些不常用，还有就是给你点一下你学的这些在项目中会是怎么去应用，理论联系实际是最好的学习方式。

纯js操作dom和jquery

这阶段要知道怎么去用js来更改页面的元素，怎么去写dom事件，经过一番联系后，再引入jquery，不要本末倒置，有个同学学完jquery之后说发誓以后再不用原生js操作dom！然后被我狠狠骂了一顿

开始你的ui框架之旅

这个阶段我推荐从bootstrap开始，这个框架很经典，响应式的珊格系统被后来框架一直沿用，在我线下教学的那几年，我都会带着学生一起看bootstrap的源码，让他们学会这种设计思想，因为之后对他们太有用了，当时他们很痛苦，现在他们说起来觉得很受益，如果可以，你也要去看看源码，先学会去定制bootstrap，公司注重二次开发，定制bootstrap正好可以练手。

开始深入css3基础

学完css3要提上日程，这时你会看到不一样的世界

深入js

这阶段你就要去解读原型链，原型替换，this指向，es6，es7的新语法，

学一套主流mv*框架

vue，react，angular2选一种，我建议从vue开始，react的jsx语法不适合你入门去学习，angular2的typescript语法糖难度也比较高，vue学起来平滑些，结合vue，学一下vue-router，vuex，element ui，axios，webpack。做个项目玩一下这个全家桶。

升级后台语言nodejs

这个不作要求，你在学vue的时候其实已经在用nodejs了，你用的npm就是nodejs的一部分，这个阶段说的是nodejs编程，比较难理解，毕竟是写服务器的东西，不过前面基础打牢固，让别人一点拨就能上手，技术不难，难在思

时间规划

第一个月 HTML+CSS

第一周
要学会IDE插件安装和使用，掌握H5语法和基础标签的应用，学完本周可以进行简单的页面搭建。

• 1、了解前端行业发展
• 2、了解HTML5对于网页的意义
• 3、学习常用标签/属性，进行结构搭建
• 4、掌握无序列表/有序列表/自定义列表
• 5、学习表单标签/属性，能创建常见表单结构
• 6、掌握标签嵌套规则/行内元素/块元素的使用
• 7、学习VSCode开发工具使用，能创建简单网页

第二周
学习CSS3样式，掌握语法结构、选择器、盒子模型、文本和字体样式设置，能够对网页进行简单的样式开发。
1、掌握CSS3的基本语法和使用
2、掌握CSS3各类型选择器/样式属性，进行快速开发
3、学习文本、字体等常见属性
4、盒子模型核心知识讲解，深入理解原理
5、掌握行内元素和块级元素设置与转换

第三周
通过掌握浮动、定位、边框、背景样式以及2D&3D转换，以及布局技巧。能够进行特殊图形绘制，开发更美观的网页效果。
1、浮动与定位核心知识，灵活运用实现网页布局
2、常见布局方法，解决布局常见问题
3、如何绘制圆角边框/阴影框/图片边框等特殊图形
4、掌握元素扭曲/移位/旋转，更自由的装饰HTML
5、BFC规范和浏览器差异

第四周
CSS3也能实现炫酷的网页动态效果，结合企业级上线“旅游网”项目，综合运用前面所学的知识，完成穷游首页排版布局和CSS3动画特效开发。
1、大项目：结合H5/CSS3，完成PC小兔仙首页布局开发
2、掌握不同布局结构与技巧
3、掌握过渡的使用与缓动效果，实现常见小案例
4、运用动画效果，实现炫酷动画效果