零基础自学Web前端开发，有什么建议吗？

别忘了我

经常看到有人问：零基础如何自学前端？自学前端该怎么开始学，从哪学起？深知广大爱好前端的人学习是多么困难，为了帮大家解惑，今天就来聊聊我对自学前端的一些建议及教程推荐，带你一步步入门前端，不走弯路。
不论学习任何内容，首先要做的就是了解这是个什么东西，然后再确定这个东西是干什么用的，最后才是这个东西怎么使用。
就好比你玩英雄联盟，你要先确定这是一个游戏（这个游戏里面有叫做英雄的角色，可以互相打来打去），然后再确定这个游戏的玩法有哪些（比如极地大乱斗，比如召唤师峡谷，比如克隆模式），最后才是了解这个游戏的每一个英雄的技能和释放技能的顺序及技巧。


自学前端是一样的道理，很多同学在前端学习之前可能连需要学习的语言是什么都没搞懂。先来介绍下前端，让你对前端有个清晰的了解。
一、前端是什么？

第一点：前端是什么？
关于这一点网上的说法有很多，很笼统，比如：一切与用户直接接触的都可以叫做前端。这个说法很正确，没有半点毛病，但是对于一个新手来说你告诉他这个他能不晕？什么叫与用户直接接触？有哪些？就算展开了讲，小白同学能不晕？对于知识点，尤其是新手来说，简单明确是最重要的，所以我对于新手的回答就是：前端就是网站。至于微信小程序、手机app等他以后学完了再告诉他也不迟嘛。
第二点：前端是干什么的？
基于前面的结论，前端就是网站。那么这个问题就可以转化成：网站是干什么的？小白同学再怎么没经验，没写过网站也用过网站，所以这个问题就相对好理解。网站就是用来展示信息的。此时，小白同学就明白了，当他学完前端之后，要做的就是这方面的内容。
第三点：前端是怎么写出来的？
一个网站是如何写出来的？首先我们要明白网站的组成，一个网站显示的内容有很多，以淘宝为例，我们可以引导小白同学让他看这个网站，点这里显示首页、点这里显示商品列表、点这里显示商品的详细信息、点这里加入购物车、点这里结算、点这里...
至此我们可以引导出"一个网站是由多个网页组成"这样的结论
然后我们明确，只要写出一个网页，就能够写出多个网页，就能够完成一个网站。
接下来让我们把目标转向：如何写好一个网页。
二、前端学什么？

一个系统的前端学习路线正是你最需要的，这也是为什么很多前期自学的小白们到处找寻前端学习路线图的原因！
什么是学习路线，说白了，就是告诉你要学习什么，以及应该先学什么后学什么！
对于新手来说，有了一个系统的学习路线，心里好像有谱了，可以说是精神力量和学习动力！
一张前端学习路线送给你，这些都是接下来你要学习的：


视频版前端学习路线，同样奉上，更完整，更清晰：
学前端必须讲究循序渐进，切忌浮躁。有些小伙伴没学几天的语法，就想搞个操作系统出来，浮躁的心态会阻碍你的前端进一步学习。一定要一步一个脚印，这一阶段的知识点掌握好了，再学习下一阶段的内容，打好基础。
三、前端如何制定学习计划？

根据上面的前端学习路线，整理了一份前端学习计划，包含每个阶段要学的内容，每一个阶段学习结束后的技能要求，以及学习时长。可以参考下：
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个月左右。


建议大家可以按照上面的学习计划，再结合系统的前端教程，坚持每天打卡，养成良好的学习习惯，记录自己的学习进度和每天的学习目标，清晰明了的掌握自己的学习情况，假以时日一定会学好前端的。
四、前端怎么学？

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