自学前端怎么学

对别人有效的方法，对你不一定有效。这个道理你应该在上小学的时候就发现了。

我在教学过程中发现了一个心理现象，很有意思，那就是：

「已入门者」无法理解「未入门者」的苦恼。

什么意思呢？

「已入门者」在入门的时候，会遇到很多困难，但是一旦他通过搜索、问人、调试甚至碰运气乱写，最终搞懂了之后，他就会觉得：

这很简单嘛！我之前在想些什么啊。

你如果问他，这东西难不难，他肯定会说「不难，很简单」，不就是搜一搜网页、写一写代码。而他在期间的种种苦恼，早已烟消云散了。

为什么会这样？也许是虚荣心作怪，也许是大脑对已熟悉的事物会做简化处理，我不是心理专业的，具体原因就不得而知了。

请问学习前端最有效的办法是什么？

我不太确定你说的有效是指「质量高」还是「效率高」。某种程度上，你不可能同时做到「质量高」和「效率高」。（如果你天赋异禀，那还是可能的）

我就当你说的是「效率高」。

你用了一年时间，还不能仿站，显然效率是低的。

如果纯从理论上来说，想要「效率高」是可能的。

原则一：追求学习的性价比

学习方法

好的学习方法和平台，能使得事半功倍。大多数学习者的学习方式是看书、听视频，上在线学习平台。图书来说，知识点相对系统，但是也是相对较慢。视频通过实际项目代码和动画相关的展示，更容易吸收，但是很多视频只提供视频教学，项目实践和章节练习相对教授。在线学习平台提供项目实践和代码审阅功能，学习者学的轻松，掌握的也快。

研究完理论之后，可以用项目实战法，按照下面步骤做项目，可以迅速提升你学习的技能

1.实战练习

一个字：练，但也不是盲目的练。尤其是对于刚入行的程序员来说，学习源于模仿，但并非对着抄代码，你模仿一个网站写页面，首先你硬着头皮按照自己的方式去把它实现了，不管再麻烦都要去写，遇到问题解决问题，解决不了了查资料去解决。

2.代码优化

网站写完之后，chrome里面f12查看源码，对比下原网站写法，挑出你认为比较好的代码实现方式去优化你相应的模块。修改完之后你的印象会非常深刻，

3.命名规范

对于命名规范，你可以直接审查优秀网站的源码，参照他们的命名方式，比如：天猫，京东，淘宝，携程。也可以查下资料去优化下你的命名方式，

4.功能扩展

这个阶段就是由你去想象扩展怎么样的功能逻辑或者样式效果，这个阶段其实就是对你所掌握技能的一种检验，一种升华。少了这个阶段，项目还不算是你的。

5.源代码管理

在项目开始的时候要在github上面建一个工程，对代码要做实时的提交，git命令是工作的基本技能要求，必须要熟练作用

6.发布

github上设置一个访问链接，可以直接在线访问你的页面，或者发布到你自己的服务器，通过注册的域名或者ip来访问，这一步主要是让你了解发布的简单过程

7.总结

项目做完了不要放在一边就不管了，要从头到尾过一下你的代码，做好相应的总结，这阶段有时候你会发现有些代码块你使用了好几次，这时候你就要把它们抽离出来做成公共组件。这也是一种提升。

8.对自己狠一点儿

以上七个阶段的完成必须要一气呵成，不要三天打鱼 两天晒网的去写一个项目，做项目就要全身心投入进去，不吃不睡都不过分。我辅导过的学生做项目阶段没有十二点之前入睡的，每天都要有功能完成进度汇报，完成不了自己都不好意思睡，大家自学做项目的时候一定要对自己狠一些！一朝受苦，终身受用！

学习性价比 = 你所学到的有用的知识 ➗ 你花费的时间

要想要性价比高，就要做到两点：

1. 尽量学有用的知识，暂时用不到的可以放在后面学。

2. 尽量快，能一下午开完的知识点就坚决不要拖两个下午。

我们来看看前端哪些知识是有用的。而且我们要精简精简再精简，因为我们要追求性价比。

1. HTML + CSS + JS

2、vue或react

3、4、5都忽略吧，他们就是核心了

这2个我实在没法再精简了，那这就是我们最需要学的了。

HTML + CSS + JS 怎么学？

免费教程很多：

HTML 入门CSS

最新全套前端学习路线图 – 知乎

怎么自学前端？ – 知乎

导师指导

其实不只是学习前端，是不管学什么。

我们前面有巨人，可以站在他们肩膀上往下学。当然我们要有一个目标是养成更结实的肩膀。

第一就是模仿，也就是看别人的代码。

想必你仿站的时候，肯定有不少陌生的东西，这些东西学会了，就收获了。

我刚开始做一个单页面APP的时候，用的是jquery来写的，后来老板说加载太慢了，后来发现还有个zepto这个东西。

突然有一天，我发现前端数据渲染太麻烦了，我就发现了React 这个框架，写着写着发现，还有Vue这个框架。

刚开始是直接在HTML文件里面写模板seo要先学什么基础知识，加载的时候老板说 为什么会有{{data.field}}，这种东西存在？ 后来就学习了webpack的打包解决了这个问题。

在不断的解决需求中seo要先学什么基础知识，不断的学习新的知识，让自己的不仅仅停留在理论阶段，和实际项目共同进步，这就是我个人认为学习新知识的最快方法。

不知道有没有受人指导过，反正我在学编程的路上有很多位导师。

导师的作用：

1. 防止你走偏。甚至告诉你捷径。

2. 帮你理清知识脉络。

3. 解答你的疑问，在你有多个方案但是不确定哪个是最好的的时候，教你怎么权衡。

当然，走偏也有走偏的好处，每条路有每条路的风景嘛。但是如果你想要高性价比的话，还是别走偏吧。

我就说到这里了，不然又有人说我打广告咯。

你都看到这儿了，不赞一下？

给大家分享我收集整理的各种学习资料，前端小白交学习流程，入门教程等回答-下面是学习资料参考。

前端学习交流、自学、学习资料等推荐 – 知乎