转行web前端，自学很迷茫，该怎么办？

有不少同窗留言说，越学越迷茫，不知道该从哪里下手，今天梳理了一些学习web前端的经验，以及学习的步骤，分享给你们，但愿对大家学习能有帮助。

计算机行业不少领域都符合82定律，也就是20%的东西的使用频率占到80%，因此很适合囫囵吞枣，所以咱们的重点就是把这20%学起来，而首先要作的就是把这20%的东西找出来。

在我看来前端这20%的东西大概就是经常使用的html标签，css的盒子模型，基本的原生js，以及熟练使用jquery，ajax，常见浏览器的兼容。

拿下这些东西意义非凡，一方面证实你适合作前端这份工做，另外一方面这些技能能让你找到一份工做。让你可以从容地去学习剩下的80%。

总之就是专心对付最重要的东西，那些什么less、sass、angular这类的东西，当你把我以前说的基础打好以后，学习起来畅通无阻，随学随用。

最后我以为最难的就是实践，只有实践才能学到真正的技术，新人很难参与一些有价值有意义的项目，没有这些项目又很难成长，因此本身有项目可参与应该珍惜，没项目应该多造一些有价值的轮子。

学习web前端的路线以下：

一、HTML的学习

html的语法、格式，经常使用的标签极其做用，理解标签的嵌套，学习使用firefox+firebug或者chrom的调试工具，可以使用这些工具调试html、css、js、断点调试、抓包。

二、CSS、js的学习

如何引入css、js（有多少种方法，各类方法有什么区别），理解id、class属性的区别，学会css的经常使用选择器，理解盒子模型（padding，margin，border，width，height，），css坐标系，css布局（position的absolute、relative 、fixed、static），css浮动（float：left、right ）和清除浮动（clear）,display:inline、block、inline-block、flex。

三、基本编程的学习

js的执行顺序，基本的编程基础（变量、运算、流程控制、数组、调用函数、自定义函数、对象）、json、js的dom操做、js的事件机制（委托、绑定、监听，冒泡和阻止冒泡，兼容性），了解ajax的xmlhttprequest及其建立方法（多浏览器兼容）、跨域，明白其工做原理，

有朋友说http协议，确实是我疏忽，http协议是web的根本，因此其重要性再怎么强调都不为过，熟悉http协议对web开发的方方面面都有很多帮助，好比理解及使用ajax，好比调试程序、抓取数据等等，不过http是一个很杂很细的东西，内容不少，我建议也囫囵吞枣式地学习，先了解、熟悉简单的，之后在项目中遇到深刻点的再进一步学习。

四、jQuery的学习

使用jquery解放你的开发工做，学会jq选择器，修改属性、监听事件、修改css，学会写jquery插件。这一步我以为能够和第3步穿插学习。

五、搭建服务器

弄个傻瓜服务器好比wamp，phpstudy等软件，能够一键创建一个apache+php+mysql的服务器，前期能够把你的静态页发布到本地服务器，使用本地服务器配合ajax学习。

六、学点服务器端

学点服务器端，建议php+mysql。服务器端脚本其实很简单，总结起来就是4个东西：SESSION、COOKIE、Request、Response，结合http协议理解如何从Request取得数据，通过处理后Response给客户端。这就是整个过程。

至于mysql也就是基本的sql语句。如何使用php进行CURD操做。这块其实很难总结，基本上以实现业务为主。

七、框架学习

来点框架，理解MVC模式、推荐个比较流行的MVC框架：ThinkPHP，简洁好用不解释，国人弄的，文档和例子什么的很是丰富。

建议从1往7学习，这样你就能快速成为web前端工程师啦！

一、HTML的学习

html的语法、格式，经常使用的标签极其做用，理解标签的嵌套，学习使用firefox+firebug或者chrom的调试工具，可以使用这些工具调试html、css、js、断点调试、抓包。

二、CSS、js的学习

如何引入css、js（有多少种方法，各类方法有什么区别），理解id、class属性的区别，学会css的经常使用选择器，理解盒子模型（padding，margin，border，width，height，），css坐标系，css布局（position的absolute、relative 、fixed、static），css浮动（float：left、right ）和清除浮动（clear）,display:inline、block、inline-block、flex。

三、基本编程的学习

js的执行顺序，基本的编程基础（变量、运算、流程控制、数组、调用函数、自定义函数、对象）、json、js的dom操做、js的事件机制（委托、绑定、监听，冒泡和阻止冒泡，兼容性），了解ajax的xmlhttprequest及其建立方法（多浏览器兼容）、跨域，明白其工做原理，

有朋友说http协议，确实是我疏忽，http协议是web的根本，因此其重要性再怎么强调都不为过，熟悉http协议对web开发的方方面面都有很多帮助，好比理解及使用ajax，好比调试程序、抓取数据等等，不过http是一个很杂很细的东西，内容不少，我建议也囫囵吞枣式地学习，先了解、熟悉简单的，之后在项目中遇到深刻点的再进一步学习。

四、jQuery的学习

使用jquery解放你的开发工做，学会jq选择器，修改属性、监听事件、修改css，学会写jquery插件。这一步我以为能够和第3步穿插学习。

五、搭建服务器

弄个傻瓜服务器好比wamp，phpstudy等软件，能够一键创建一个apache+php+mysql的服务器，前期能够把你的静态页发布到本地服务器，使用本地服务器配合ajax学习。

六、学点服务器端

学点服务器端，建议php+mysql。服务器端脚本其实很简单，总结起来就是4个东西：SESSION、COOKIE、Request、Response，结合http协议理解如何从Request取得数据，通过处理后Response给客户端。这就是整个过程。

至于mysql也就是基本的sql语句。如何使用php进行CURD操做。这块其实很难总结，基本上以实现业务为主。

七、框架学习

来点框架，理解MVC模式、推荐个比较流行的MVC框架：ThinkPHP，简洁好用不解释，国人弄的，文档和例子什么的很是丰富。

建议从1往7学习，这样你就能快速成为web前端工程师啦！

一、HTML的学习

html的语法、格式，经常使用的标签极其做用，理解标签的嵌套，学习使用firefox+firebug或者chrom的调试工具，可以使用这些工具调试html、css、js、断点调试、抓包。

二、CSS、js的学习

如何引入css、js（有多少种方法，各类方法有什么区别），理解id、class属性的区别，学会css的经常使用选择器，理解盒子模型（padding，margin，border，width，height，），css坐标系，css布局（position的absolute、relative 、fixed、static），css浮动（float：left、right ）和清除浮动（clear）,display:inline、block、inline-block、flex。

三、基本编程的学习

js的执行顺序，基本的编程基础（变量、运算、流程控制、数组、调用函数、自定义函数、对象）、json、js的dom操做、js的事件机制（委托、绑定、监听，冒泡和阻止冒泡，兼容性），了解ajax的xmlhttprequest及其建立方法（多浏览器兼容）、跨域，明白其工做原理，

有朋友说http协议，确实是我疏忽，http协议是web的根本，因此其重要性再怎么强调都不为过，熟悉http协议对web开发的方方面面都有很多帮助，好比理解及使用ajax，好比调试程序、抓取数据等等，不过http是一个很杂很细的东西，内容不少，我建议也囫囵吞枣式地学习，先了解、熟悉简单的，之后在项目中遇到深刻点的再进一步学习。

四、jQuery的学习

使用jquery解放你的开发工做，学会jq选择器，修改属性、监听事件、修改css，学会写jquery插件。这一步我以为能够和第3步穿插学习。

五、搭建服务器

弄个傻瓜服务器好比wamp，phpstudy等软件，能够一键创建一个apache+php+mysql的服务器，前期能够把你的静态页发布到本地服务器，使用本地服务器配合ajax学习。

六、学点服务器端

学点服务器端，建议php+mysql。服务器端脚本其实很简单，总结起来就是4个东西：SESSION、COOKIE、Request、Response，结合http协议理解如何从Request取得数据，通过处理后Response给客户端。这就是整个过程。

至于mysql也就是基本的sql语句。如何使用php进行CURD操做。这块其实很难总结，基本上以实现业务为主。

七、框架学习

来点框架，理解MVC模式、推荐个比较流行的MVC框架：ThinkPHP，简洁好用不解释，国人弄的，文档和例子什么的很是丰富。

建议从1往7学习，这样你就能快速成为web前端工程师啦！

专门创建的学习Q-q-u-n ⑦⑧④-⑦⑧③-零①② 分享学习方法和须要注意的小细节，互相交流学习，不停更新最新的教程和学习技巧（网页制做，网站开发，web开发，从0基础开始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移动端HTML5的项目实战【视频＋工具＋系统路线图】全栈工程师学习路线以及规划都有整理，分享给小伙伴）点：学习前端，咱们是认真的