web前端开发学习指南（笔者亲身记实）

web前端开发入门要求低，但技术栈却很广。网站，小程序，APP都是 web前端 要学习的内容。内容多的让人迷茫，新手往往找不到自己的方向。
本篇文章是小编自己的2年学习过程记实，也许可以成为你的学习参考。

一、入门（学完之后将是一个可以走上岗位的前端）

内容	时长	说明
HTML + CSS	2个月	常用的HTML标记（表单尤为重要） CSS盒子模型 和 布局技巧 阶段重点：浮动式分栏布局
javascript	1个月	JS语法，基本语句，数据类型 DOM和BOM两大核心对象 浏览器调试（元素，网络，控制台） 练习实例：悬浮式广告，轮播图，边栏吸附式面板 补充说明：学习了js才算前端入门
jQuery	3个月	元素查询，效果，属性，CSS 练习实例：将js时的demo源码重写成jq代码，QQ和淘宝网站的注册和登录（正确的使用HTML标记和兼容事件处理）
Bootstrap	1个月	学习和使用Bootstrap框架的响应式布局，这个框架是一款非常适合学习者使用的框架

二、进阶（这是一个漫长的过程，学完之后将是一个不错的前端）

内容	时长	说明
CSS 进阶	2个月	Bootstrap是CSS学习路上最好的老师，学习每一个Bootstrap框架组件的样式（能手写响应式框架视为合格） 选择器，动画 伪元素和伪类（灵活运用，减少DOM节点数量，这将是你与非专业前端人员写出来的HTML代码有着明显区别的地方） 深刻理解元素类型（内联元素，行块元素，块元素）的特性，好多后端人员学习了CSS基础后布局上还是会有各种对齐的问题，原因正是不理解浏览器对各类元素类型的渲染效果。 阶段重点：元素类型，不完全理解这点知识，那么优美的布局结构将与你无缘，写好布局是写好JS的前提，HTML结构不好，那么你的JS不可能写好。
javascript 进阶	5个月	方法封装（提高代码重用，这是写好js必须掌握的） 重学数据类型（Array,Object,JSON，不会JSON的前端不是一个合格的前端） 面向对象编程（工厂/构造/原型开发模式），深刻理解this、同步、异步 浏览器事件模型 练习实例：将之前的代码按 面向对象 方式全部重写（怕累就不要做前端）。 特别提醒：进入该阶段的学习，一定要抛弃看视频学习的方式，学会阅读文档是必须的。视频教给你的只有功能的实现，没有质量的提升。如果不会阅读文档，那么你的前端之路基本在此终结。 推荐书籍：《JavaScript高级程序设计》
jQuery 进阶	3个月	熟练使用jQuery（选择器，链式语法，对象访问，CSS，筛选，事件，测试，遍历） 理解JQ对象与原生JS对象的区别 jQuery插件编写（插件的编写不仅是功能的实现，更是对自己代码健壮性的考验） 补充说明：将JS进阶的知识灵活运用在jQ的进阶中
CSS 移动端开发	1个月	rem与vw（一定要深刻理解rem的作用，在许多框架中有许多文档写着，1rem=20px  这都不是rem的正确用法） flex布局（完全掌握flex的各项属性，各种不负责任的前端经常会写 flex:1，各类浏览器默认值会不一样，小心在这方面吃大亏） touch事件，浏览器默认行为（浏览器默认手势功能） 特别提醒：不要进入rem的误区，rem应该是一个变量，而不是一个常量

经过一年半左右的时间对前两个阶段的学习和巩固之后，你将是一个不错的前端工程师，不管自己到了那一个阶段，也不能停止CSS的学习，jQuery虽然现在的使用率可能不会那么高，但这是前端学习路上的重要一环（如果连JQ都写不好的前端，MVVM框架也不可能写好）

三、扩展（扩大技能范围，适应更多的工作要求，加薪必备）

内容	时长	说明
ECMAScript 6	1个月	学习ES6（这对后期学习框架很有帮助） 补充说明：到了这一阶段，相信你已经有能力区分什么是重点学习内容
Vue / React / Angular	3个月	选择自己喜欢的一种学习即可（推荐Vue），在这一阶段中，你将会深刻的体会到当时学习JS进阶时内容的重要性，要是在这一阶段有重大障碍的朋友，不妨从JS进阶阶段重新来过。
小程序	15天	主要学习微信小程序，15天的安排，一周文档一周练习足矣。
Hybrid App	1个月	推荐APICloud与uni-app，其它的没去了解过，都一个尿性。

小编的话：

• 不管你现在处于前端学习的那一个阶段，学习C语言是很有帮助的，JS是一门弱类型的语言，学习C语言能很好的培养写代码的规范。如果你是一个初学者，C语言对培养程序思维也很有帮助，尽管学起来很枯燥还没有成就感。
• 在学习前端的路上，不要依赖UI框架，一个合格的前端工程师是不需要这些的。框架是给你在工作上提高效率的工具，不是你逃避不思进取的借口。学习框架之前应该先充分学习框架应该要具备的能力要求，而不是为了学框架而学框架。
• 学习基础的 PhotoShop 应用，特别是现在设备的兼容问题，切图前一定要清楚后面布局的实现问题（基本的PS使用和基本的命令，和设计师沟通起来会更加容易，而不是一口大白话），万一那天设计请假了，切图还不是要自己亲自操刀。
• 学习计算机网络：学习网络对每一个开发者来说都是有必要的，学习基本的网络协议。
• 学习软件测试：在工作中给自己的代码进行简单的测试是有必要的，学习软件测试的基本术语能提高说话的B格（上级教你如何测试你都听不懂岂不很尴尬），测试技巧能有效的降低自己的BUG率，写出来的东西老是有BUG，会让上级很不悦。
• 学习一门后端开发语言：后端开发也是需要涉及的，前端人员推荐PHP或Node.js，了解客户端与服务端之间的业务过程也是有需要的。
• 培养自己的专业术语，这是工作中提升沟通效率必须的（群里问半天没人懂你的意思，不如一个关键词让帮助你的人瞬间get问题）。有些招聘中要求中明确规定只招聘 信息系专业的学生是有这方面道理的，不然沟通都费劲。

作者：黄河爱浪 QQ：1846492969，邮箱：[email protected]

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号