如何学习Web前端？超全Web前端学习路线+教程分享

破晓的曙光

Web前端开发技术是当前比较火热的编程技术之一，相对后端语言，Web前端入门更简单，更适合零基础小白。但是对于零基础的小伙伴来说，想要通过自学学好Web前端技术需要找到适合自己的学习方式和学习方法，才能更高效的入门前端开发。那，如何自学Web前端呢？
说在前面的话：

自学Web前端是一件枯燥的事情，它尤其考验一个人的学习毅力，自学成才的也是少数。
想要成功自学前端，其实无非就是4个字：
贵在坚持！

并且，学习Web前端是需要花时间的，不要想一口吃成一个胖子，两个月就能速成学好Web前端。只要你坚持，一步一个脚印的去学习，并且活学活用，多做案例，久而久之，我们就会熟练的掌握Web前端这门技能。
为了帮助大家可以高效的自学Web前端，今天从Web前端学什么、怎么学两方面带大家构建Web前端自学之路。
一、Web前端学什么？

想要自学Web前端的第一步，就是构建Web前端学习体系，了解每一个阶段需要学习的内容，以及能实现的效果。
因为前端知识点多而分散，所以如果不能构建起自己对于Web前端的知识体系框架的认识，很容易就会不知所措，没了方向。
一张Web前端必学知识点送给你，这些都是接下来你要学习的：


觉得思维导图不够清晰？视频版Web前端学习路线来了！
下面是我根据这份Web前端学习路线，整理的Web前端每个阶段要学的内容，每一个阶段学习结束后的技能要求，以及学习时长。
也可以说是一份Web前端学习规划，可以参考这份规划，按顺序学习：
1、HTML

想要搭建一个页面，就需要知道页面的组成，经过简单的学习你将会了解到HTML、CSS、JS。
HTML部分最为简单，大概1~2天（全天都要学哦！）就可以学完主要知识。剩下拿出一天来练习即可。
合格标准：能够熟练使用各种标签，写出一个整体的页面结构且标签使用合理即可。
学习时长：3~4天。
2、CSS

当你学完了HTML之后，会发现页面只有内容，干巴巴的。于是你会开始CSS的学习，大体内容就是选择器加样式，外加一部分动画。这段时间大概会花费你3周左右。
合格标准：能够熟练使用各种布局，自己完成一个静态页面，且标签语义化。
学习时长：3周左右。
3、JavaScript

当你学完了CSS，看着你做出来的页面，发现有内容又漂亮，但是还缺点什么。于是你开始学习JavaScript。从数据类型、变量、语句、判定、循环、函数、作用域、数组、对象、定时器、延时器、DOM操作、事件、面向对象、AJAX、设计模式、闭包、垃圾回收机制、ES5、ES6、ES7、ES8.......等等。
这里要提醒一下，JavaScript是整个前端体系的重中之重。务必把基础夯实，后续才有更进一步的可能，否则很可能成为只会使用框架的程序员。
合格标准：熟练编写业务代码，封装简单的库和函数，能修改第三方库或者函数的源码。
学习时长：1.5到2个月。
至此，HTML、CSS、JavaScript已经全部学习完毕。如果有后端支持你甚至可以开始写一个完整的网站了。
不过，现在的前端开发早已经不是把代码写完就可以跑的“远古时代”。所以接下来进入一个新的世界。
4、前端工程化

代码已经学习完了，现在要面临的就是整个项目，所以接下来的话题就是“前端工程化”。
Gulp、Grunt、Fis、WebPack等工具及插件。
以及与CSS配套的Sass、Less。
与JS配套的TypeScript、Babel。
负责规范代码的ESlint。
这些都是现代化开发必不可少的东西
这些工具的学习视情况而定。
预估学习时长：1个月左右。
5、框架

框架的学习是重中之重，可以说拿到多少工资的上限就靠它了。
现阶段的两大主流框架是Vue和React。
这里推荐先学习Vue，后学习React。因为Vue上手简单，使用方便，开发快速。
主要内容有：
1. Vue思想（MVVM、单向数据流等）
2. Vue基础（基础使用及各种指令）
3. Vue高级（组件、通信、自定义指令、路由等）
4. 脚手架（单文件组件开发模式、Vuex、SSR等）预计学习时长：1个月左右。


到目前为止，我们已经学习了Web前端的绝大部分内容。可以这么说，学习了上面的内容之后就可以去找工作了。前提是多写几个项目，最好是复杂一点的。
二、Web前端怎么学？

1、找到Web前端学习资源
自学Web前端想找到合适且免费的教程是很难的。现在网上Web前端学习资料铺天盖地，还有很多人通过卖资料来挣钱，但是很多资料都是过时的，是能学到一些东西，但跟不上市场公司的需求，跟市场脱轨了，你怎么能学好？找到一份好工作？
就相当于你拿着50年前的眼光穿越到今天，你不敢相信会科技发展的这么快。
可以看一下这篇回答，里面有详细的Web前端学习教程，全面覆盖HTML5+CSS3+JavaScript+node.js+vue+React+小程序开发等内容，可以跟着学习：
2、学习要深入
我们在学习和练习的过程中，遇到不懂的代码和程序，要多查API，了解它的原理。直到自己可以轻松应对熟练掌握为止。
3、学会看书查漏补缺
如果说视频是带我们入门的，那么书籍是发散我们思维的。自学Web前端一定是视频为主，书籍为辅，多敲代码，“理论 + 实战”两者结合，成功几率更高！
所以，每一个优秀的程序员都应该养成看书的习惯，毕竟很多经典是不可复制的。
推荐看看我的这篇回答，包含Web前端各个阶段所需要的14本经典书籍。学习Web前端的小伙伴们，赶紧收好吧！
最后，提醒大家，初学一门语言，要秉承一个原则：“能动手的，尽量别吵吵”，学习还是要靠自己，老师只是引导作用，自己看视频的过程中，要多实践，多思考，多总结。
好了，就分享这么多了，想加入自学团的小伙伴赶快行动起来吧！