如何自学成为一个WEB前端

WEB前端是做什么的？

那些什么高大上的介绍作者就略过了，简单来说就是做网页的，我们上网浏览的网站界面就是WEB前端工程师做的。

在互联网迅速发展的近几年，你上网冲浪的时候是不是感觉WEB网站越来越漂亮酷炫，功能越来越多，越来越复杂？各种类似桌面软件的Web应用大量出现，没错，WEB前端在其中有着很大的功劳。

发展方向

WEB前端的发展迅速导致其细分出了很多细分职业，我先来说一下我了解的WEB前端的分支，欢迎各位前辈补充：

1、网页设计方向（移动和PC）：主要偏向html、css。js主要是做一些特效，最好有一定美术功底，很多公司还会要求会photoshop。Css功底一定要好，推荐看书《CSS权威指南》，系统的学习css。

2、B/S应用方向：这个方向就是用html、css、js来做一个web应用程序，和QQ、微信没什么两样，只不过是用网页来打开的，举个栗子：12306火车票订票管理页面、淘宝订单管理页面，或许你在工作中还会用网页登录XX管理系统。该方向主要偏向js，需要会一种以上的MVC框架，如angular、react、vue等，这些框架会在接下来介绍。

3、hybridAPP：没错，html、css、js也是可以开发手机app的，携程、淘宝、支付宝就是其中的代表产品。

4、网页游戏：这方向需要有一定的算法基础，面向对象编程功底，设计模式架构经验，不建议新手从这方面入行，当然如果公司愿意让你往这方面发展又另说。

Web前端的细分职业还有很多，甚至有的公司在用WebGL来开发网页版3D游戏，不得不说web前端这几年发展速度真快，所以说web前端是一个非常有前途的职业。

看了上面这些信息，是不是感觉太多东西要学，精力不够用了呢？其实刚入行最好是在网页设计和B/S应用两者中选一个，这两个方向也是应用最多的。

关于自学与培训机构

如果在学习之前没有编程的经验的话，自学其实是一条很困难的路，因为不仅要从0到前端入门，还要从0到编程入门。

培训机构可以让人迅速入门，但也不是没有缺点，下面的我总结的自学和参加培训机构的优缺点。

——培训机构

优点：

1、入门时间快；

2、知识点比较系统，针对目前流行的各种技术栈；

3、有一群小伙伴一起学习，一起鼓励；

4、会针对面试技巧进行培训；

缺点：

1、需要三个月到五个月不等的完全脱产时间；

2、收费很贵，投入成本高，成本=脱产的时间成本+学费，准备好3W左右的学费+生活费吧（有的学校提供分期付款，但跟分期买房一样，有利息的），如果找不到工作，压力会非常大；

3、短时间学会这么多知识，带来的必然是填鸭式的教学。学员的自学能力没有得到锻炼，而前端是一个需要不断学习的行业。

4、很多公司对培训机构出来的学员有抵触情绪，所以简历一般要包装过才能找到工作；

——自学

优点：

1、0成本投入；

2、学习的时间可以自行控制，甚至可以边工作边学习；

3、学习重心可以自行控制，针对前端某个细分方向，针对性的找工作；

4、很多东西是自行摸索，但也养成了自学的习惯，这对今后工作发展非常重要；

5、当自学成功入门后，会积累强大的自信；

缺点：

1、自学的周期比较长；

2、需要有一定的自制力；

3、有时候会很孤独、很痛苦；

两种方式各有各的优缺点，如何选择就看看哪种方式适合自身的情况。

当初我决定自学主要是因为内心的一点小傲娇：如果我自学入不了门，那我为什么要做WEB前端？就算去培训完找到了一份工作，那么我需要的仅仅是一份工作么？

下面是我在网上搜集的一些碎片化观点，以及一些关于这个问题比较好的文章链接：

*如果同学你具备一定的编程基础，逻辑，而且对开发语言非常有兴趣，能够坚持的每天在改正错误和克服难点，那么你可以尝试购买书，或者看看视频自学。如果同学你是完全0基础，非计算机专业，不容易坚持做一件事，那我建议同学你找一个培训机构，这样不仅有一个完整的0基础入门教程，也可以有培训的老师对你做出监督。

*如果非要用什么比喻的话，培训出来的就好比是练的辟邪剑谱葵花宝典之类的，虽然在短时间内会有一个比较显著的提升，但是终归是根基不稳。但是还是比不上那些从小研习易筋经的和尚。

*自学还是培训这个东西因人而异，有的人有一定的计算机基础，而且有一定的自制力，那么他自学起来真的很快。同样，我身边也有很多培训出来的人，他们给我的感觉就是没有计算机相关的基础，跨行业学习前端，所以自己自学上手很慢，且没有方向。其次，有些人自制力可能有些差，自学进度及其慢，反而给培训班砸上近两万块的培训学费让他们感到肉痛，而不得不认真的去学习前端。

*做web前端开发，培训靠谱还是自学靠谱？

初步接触

刚开始自学时看教学视频是最有效的方法，没有之一，当然你有使用其它编程语言的基础那当我啥都没说。因为刚开始接触，最难的不是知识点，而是各种概念，教学视频里不仅会有知识点的渐进讲解，更会用通俗的语言来让你理解各种概念，而这些概念通过书籍或者别人写的技术文章是很难让你理解清楚的。

我有个朋友是计算机专业的，在学校的时候准备学一下web前端知识，然后就抱着一本《JavaScript权威指南》开始看。结局自然是可以预见的，被书中各种难点：原型、继承、闭包打击的拔凉拔凉，然后就没有然后了。

视频的教程在网上可以搜集到很多，自己找一个比较专业的，我也就不推荐了，毕竟搜集信息也是程序员必备技能之一。建议直接去淘宝搜，里面有很多卖视频的，花几块钱就可以买到一整套视频。

特别注意：每看完一节课程的视频后，一定要把视频里的讲的代码敲一遍。可能你买视频的时候还会赠送视频里面讲解的源码，但是我不建议直接打开这些源码看，甚至可以直接把源码删掉。好记性不如烂笔头，学习编程的过程中自己动手敲代码永远是必不可少的。

其实我觉得看教学视频和培训班上课就内容上而言没有太大区别。只是学习氛围不一样，上课会强制你规律性的学习，学习的气氛更浓郁一些，会有布置作业让你动手。自己看视频的话就得看你心情了，心情好就宠幸一下教学视频，照着敲敲代码，心情不好就玩去了。

不管你是打算自学还是准备参加培训班，我都建议你先看看视频。有些人一学起来就特别感兴趣，根本停不下来，或许你就是其中一个呢?反正试错成本很低，为什么不呢？

如果是业余时间来学习的话，建议每天看1到2节课时，如果是全职学习的话，每天也别超过4节课时，学太多不容易消化。剩余时间可以去跑跑步、打打球，我们是准备长期作战的，前期消耗太多热情并不是什么好事，每天来点运动可以让你第二天保持清晰的头脑。

可以发个朋友圈告诉你的朋友你在自学WEB前端，相信有了朋友的关注，你学习的动力会更足一些，毕竟牛吹出去了，却没有达成目标是很丢脸的。

在这一阶段中，可能会花掉1个月到2个月的时间。这段时间后你应该学会了基础的html,css,js知识，会做一些简单的页面和特效。达到哪个标准算是完成这一阶段呢？你看去“w3school”和“菜鸟教程”（不要问我这是什么东西，百度一下，你就知道）上的html、css、js教程，如果里面的案例代码你90%都能看懂，那恭喜你，第一阶段任务完成了。

项目初涉

完成了第一阶段后，你可以开始做一些小项目了，这个链接有一些适合新手的小项目：

https://zhuanlan.zhihu.com/p/22766255

最好自己去网上根据自己的情况找适合新手的小项目来做，一开始一定不要做太难的项目，不然很容易有挫败感，得循序渐进，不断建立信心。

这个过程是比较艰难的，你必须自己去分析这个项目如何去做，然后去查资料，搜索类似项目，有可能遇到一个坎就困你几天。

做项目是为了强制你去查资料，去动脑筋，网上有些项目很详细的写了设计思路，设计步骤，能找到这种资料挺好的，但一开始尽量别去看这些东西。

尽量找有源码的项目，实在完成不了，能看懂也有很大的收获。

别忘了总结学习方法。

这阶段的时间，业余自学尽量控制在一个月以内，全职自学尽量控制在半个月以内。

框架选择

前端框架分为CSS框架和js框架两种，PC端的CSS框架毫无疑问选择bootstrap学习，这也是每个前端必学的框架。移动端的css框架是百花齐放，ionic、jquery moble、amazeui等等，作者了解不是很多，这方面就不多介绍了。

如果选择了做网页设计，那么你就得多在html、CSS和jquery上下功夫了，jquery毫无疑问是用的最多的js库（作者认为它不是一个框架，是一个js工具库），社区有很多资源，各种插件，UI库多的数不胜数，或许你在第一阶段已经开始接触jquery了。

如果你选择了B/S应用方向，你得选一种mvc框架学习，并且不建议这时候去学习jquery，因为jquery的思维方式有的时候是和mvc思想是相左的，下面是作者对几种主流MVC框架的主观认识，仅供参考，主要还得你自己调研并判断学习哪一种：

1、angular：非常优秀的MVC框架，社区非常完善，各种UI组件应有尽有，PC端移动端都很完善，对于大多数需求来说，你只需要去社区找现成的东西就可以用，不需要你再去造轮子。作者使用的就是这个框架，但目前比较尴尬，因为angular2已经发布了，angular1迟早要被淘汰，但angular2又没有被国内太多公司使用，招聘这方面的人才的公司不多，并且angular2的学习曲线比angular1更陡峭，新手学习起来非常困难，虽然作者很看好angular2的前景，但确实不建议新手去学习。

2、react：跟angular不同，react是轻量级的框架，速度很快，但功能肯定没有angular那么完善，一般是和其它框架配合使用，一些业务是需要你自己造轮子的，不过现在web前端需求越来越复杂，社区提供的组件已经很难完全满足某些需求，一个高性能的轻量级框架就受到了大家的钟爱，华为就是用react，在2016年，react的使用量已经超过了angular，并且在移动端也有很快速的成长。

3、vue：vue是后来居上的一个框架，成长速度非常快，和react的适用范围非常相似，比react更小、更快、更易上手，前景也是非常光明的。但目前社区不如react成熟，移动端也不如react完善。

其它MVC框架作者就不一一介绍了，作者个人建议大家从react和vue当中选一个进行学习。

项目进阶

在学习框架的同时，你可以自己找一个稍大点的项目来做了，边实践边学习是最快的成长方式。

如果选择做网页设计，你可以仿制一些大型网站，比如淘宝、百度的一些界面，里面的数据你可以自己模拟，由于作者不是这方向的，能给的建议不多。

如果做B/S应用，可以仿制“Worktile”，“钉钉”这样的大型B/S应用，同样，里面的数据你可以自己模拟，里面肯定有很多的技术点你没办法完成，没关系，别气馁，只要大致框架像就行了，人家专业的前端团队花了那么多时间做的，你短时间想做到那种程度肯定不现实的。

当你的项目到一定地步的时候，你是不是感觉你的html、css、js文件越来越多了呢，而且越来越难控制了（虽然你可能不会觉得）。这时候你就需要一个前端自动化工具来对代码进行合并、压缩、部署、模块化管理，目前比较流行的有webpack、grunt、glup，webpack现在非常火，用的公司也多，作者推荐用wenbapck，当然，你最好都了解一下，对比做出选择。

如果是在公司工作，你总不能把代码一直放在你自己的电脑上吧，所以你还得需要一个代码管理工具，git好无疑问是新时代青年最好的选择。顺便你可以去申请个bitbucket免费账号，创建一个代码仓库，把你写的代码用git push到仓库，自己也可以多玩玩git一些常用功能。

找工作

你经过一系列闯关，终于要面对最后一关的大BOSS了，想想是不是有点小激动呢。

在找工作前，你得临时突击一下，去网上下载一些前端面试题来做吧！相信我，如果面试的公司有笔试环节，他们的题基本上都是在网上找的，很少有公司有那个闲功夫自己出题的（BAT这样的大公司除外），做题的过程也可以不断完善你的知识。

在项目进阶这个阶段时，其实你已经可以着手去找工作了，工作中技术积累是非常快的，别担心技术不够，一些公司还是愿意招一些初学者，毕竟便宜啊，多投简历总能有机会的，不行那就继续学习。

找工作期间多跑步吧，可以让你保持好的精神状态，并且也有助于缓解压力。

注意别被一些XX教育投资公司、XX人才培训公司招实习生误导了，这些公司就是用招聘来说服你去培训的，特点就是强调“无经验”“包吃住”“对编程有浓厚的兴趣”。

后续

如果你自学找到了一份WEB前端的工作，恭喜你，这段经历一定会是你人生中宝贵的财富，从此你自信心爆棚，并且你一定积累了丰富的学习技巧，似乎只要你愿意去学，就没有什么可以难倒你。

作者为你感到骄傲！

等工作趋于稳定了，别忘了夯实基础，系统的梳理一下知识结构，看书是最有效的方式，推荐《css权威指南》《JavaScript高级程序设计》《JavaScript权威指南》《JavaScript设计模式》。

《JavaScript高级程序设计》偏向dom；

《JavaScript权威指南》偏向js语言本身；

《JavaScript设计模式》有一年工作经验后再去看比较好，设计模式是可以受益整个程序员生涯的好东西。

作者见识有限，本文仅供参考！

作者写在后面的话

不知不觉自学入前端的坑已经有段时间了，目前遇到了技术瓶颈，处在职业倦怠期，即：日常项目需求已经很难提升技术水平了，新知识的get速度很慢。这个时期对我来说是非常焦虑的，我想方设法在突破这种困境，写技术博客就是其中一种方法。我定的目标是，每个月最少写两篇技术文章，最好每周一篇。每篇文章一定要有大量的调研，尽量保证文章的严谨，在调研的过程中就可以不断扎实基础。

博客的主要面向人群：WEB前端初学者。就跟做产品一样，文章要有准确的定位。本人技术能力有限，写不出精彩绝艳，有深度的文章。唯一值得一提的是我是自学入行的，走了许多弯路，深知自学的不易，甚至是痛苦，也总结了一些经验，希望我的文章能够对WEB前端初学者带来一些帮助。

其实我生出写博客这念头的时候是很惶恐的，因为我也是个新人，我哪里有这个资格

写文章给别人看？让我安慰的是，一篇技术文章能不能让人受益，不仅取决于作者的技术水平，也取决于作者的表达方式。所以我会努力让自己的文章理解起来更轻松，对初学者更友好，也算是跟前辈大咖们进行差异化竞争。

文章中如果写的有什么不对的，需要补充的，希望各位前辈不要吝惜自己的键盘，多多斧正，就算是把我批的一无是处我会也很开心。