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

如鱼饮水，冷暖自知。

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

有些答案里说的一两周入门，是可能的。

比如我在彩程的时候一周入门 Rails，两周做出了一个已上线使用的网站。并且还封装了 API 供 iPad 客户端使用。

但这也是因为我有基础呀。我会融会贯通呀。所以如果你没有接触过编程，不要指望几周入门这种事情了。

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

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

什么意思呢？

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

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

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

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

我作为一个五年的前端从业人员，其实已经无法理解新人在入门时遇到的障碍了。

为了理解新人，我做了一些事情。

比如我在 2016 年开始学五笔，以体会「新人」的感受。

总结下来就是：

真难啊。

虽然结果是「我学会了」。但是我学得不太爽。

下面是我的学习过程。

首先我动用我十多年来高超的搜索技巧（其实就是搜索了一下知乎），知道五笔分为两个版本。

那么我应该学哪个版本呢？

分析了一下之后选择了新版。

然后开始记字根。

我记忆力还行，一晚上基本把 25 个键位上的一百多个字根背下来了。

然后就开始用。

也就是说我只用了一天就入门了。

但是！

在这之后，我有很多不适的感觉。

首先，我不会拆字，我看到很多拆字的口诀，但是只能猜个大概。

真到自己拆字的时候，老是拆错。

而且搜索如何拆字的时候，有时候会搜到老版的拆法，令我费解。

然后，就是打字很慢。这个是当然的，我只用了一天入门，我一分钟能打10个字我就谢天谢地了！

为了解决这个问题，我想了两个办法：

1. 打印了所有字根放在手边供我快速查阅

2. 开启五笔拼音混合输入

但是也不爽，由于我打拼音比较快，所以用着用着就变成了完全在用拼音，没用五笔。这怎么能学得好呀。

不过如果我坚持一个月不用拼音，应该就能完全学会五笔了吧。

但是！

我坚持不下去呀。

我打字那么慢，万一女神给我发一句「今晚一起看电影吧」，我用五笔几分钟还没回复可怎么是好！

最终，我成了一个半壶水的五笔使用者。

如果你要问我学五笔难不难。

我会说

简单~不就是背字根然后坚持练习嘛。

其实呢

冷暖自知。

故事讲完了，回到正题：

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

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

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

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

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

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

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

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

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

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

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

1. 英语

2. HTML + CSS + JS

3. HTTP

4. 浏览器 API

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

英语怎么学？

因为编程基本就是在写英文单词，什么 if else while for var new this 之类的，好多单词。

HTML 中的 标签的全称是 anchor，很多人不记得，这个 a 好记，不记得全称不要紧。

但有些标签你不记得全称就不好办了，比如

我见过不少人由于不知道这些单词的意思而放弃使用这些标签 - - |||

CSS 里英语就更重要了，比如 transition、transform、translate，你在不了解英语含义的情况下，很难把这些记下来。

对于英语，我的建议是：

a) 电脑装个有道词典，哪里不会点哪里。

b) 抓住一切可以学单词的机会。比如多用英文软件，少用汉化版。比如用英文操作系统，不用中文版。这样你每天都在记单词了。

HTML + CSS + JS 怎么学？

免费教程很多：

HTML 入门

CSS

JavaScript

看完你就入门了。还记得我学五笔的经历吗，你成功的前提是你能「坚持得下去」。

其实现实生活中有很多前端并不怎么会 CSS（我在阿里和腾讯见到过不少这样的前端），所以如果你想更快，CSS 可以囫囵记一下语法，就直接实践吧！实践是解决坑的唯一办法。

HTTP 怎么学？

墙裂推荐《图解HTTP》，但是看书就慢了是不是，怎么办呢？

你还是自己坚持看教程吧，还免费呢：

HTTP

浏览器 API

比较重要的就是 文档对象模型 (DOM) 和 Window（BOM）。如果你想直接学 React / Vue，其实 DOM 都不用看了。

学了上面四个，然后呢？

如果你坚持下来了，就可以按照轮子哥说的做咯，去做出些东西吧！

原则二：尽量学点难学的东西。

有很多新人说，「webpack 好难啊，看不懂」

知道为什么你觉得难么？因为你没见过更难的东西。

你知不知道有两种编辑器分别叫做 vim 和 Emacs。很多极客都在使用这两款编辑器。（我在用 vim）。

去学学这两个货，比 webpack 难学多了。学完他们，回头看 webpack，不跟玩儿似的。

所以，别老是学习一些简单的东西，多挑战难一点的东西。

原则三：你需要导师。

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

导师的作用：

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

2. 帮你理清知识脉络。

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

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

在前端领域混了这几年，总结了一套前端学习的精讲视频和学习路线，如果有对前端开发感兴趣的伙伴，不管你是想转行，或是大学生，还有工作中想提升自己能力的web前端党，欢迎大家的加入我的前端开发交流群：603985993 希望大家诚心交流！，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号：【前端留学生】 每天更新最新技术文章干货。

我就说到这里了，

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