前端应该怎么学？—— 给初学者的一些建议

r囧r小猫 2022-11-19 11:21 175阅读 0赞

> **说在前面**

最近，有个想转行做前端的朋友，问我前端怎么样，想要转行。我说还不错，他就自己去搜前端要学些什么，过了半晌，发给我一张图，如下：

![d5a369601fad9bb30b915f0edb4175ce.png][]

他问，是不是上面的都要学，我说差不多吧.

"对不起，打扰了。"这就是典型的还没入门就放弃。

> **1. 前端真的难吗？**

先从前端的前景说起，从14年进入大前端时代，一直到现在。**前端从业人员有增无减，岗位的需求也依旧旺盛，压根就不用担心就业的问题。**

那么，前端难学么？显然不是的，前端的入门非常简单，我们用不到十行的代码就做成一张网页。

同时，上面的图也是真实的，前端很泛，有很多的东西需要学，js，浏览器，网络协议，框架，node.js....并且更新的速度非常之快，但是大家不要紧张。

作为初学者，目标应该很简单：**找到工作，先解决就业问题。**

> **2. 如何尽快找一份工作？**

我们用真实数据说话

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70][]

这是深圳一则真实的前端招聘，也是对于初级前端最基本的要求，你想要找工作，能够做事，先不考虑工资多少，以上的这些技能是需要具备的，我们稍微整理一下：

1.  HTML（写网页的）
2.  CSS（给网页上色，布局）
3.  JS（数据交互，效果的实现）
4.  jQuery（一个JS库，也可看成一个前端的框架）

所以，以上四条就是最基本的，我们只要努力一点，前端小白两到三个月也能搞定了，学完你就能找到一份工作。

我也录制了一个视频，免费的，大家初学者可以先看一下：[前端第一课][Link 1]。后续我会持续更新，争取出一个系列，大家可以关注一下。

> **3. 想薪资高一点，怎么搞？**

如果上述技能都会了，那么你的路线就是这样的：

1.  HTML5 + CSS3（新标签和新语法，动画效果的增强）
2.  ES6（js 的下一个版本，现在许多企业都会用到，新语法，提高效率的）
3.  Vue.js（国内非常火的前端框架，上手也简单，vue学会了，找工作的成功几率可以达到60%以上）
4.  小程序（vue学会了，这个就是非常简单的了，目前国内也很流行）

以上8条，如果都学会了，找工作是没得问题的。路给大家指明了，大家可以先搞定这些，那些杂七杂八的可以等到工作之后慢慢接触，慢慢提升，咱也不说太多。

大家自学能力强的，完全可以在菜鸟教程上就能搞定，没必要花钱，[菜鸟教程官网][Link 2]

> **4. 高级前端工程师方向**

1.  react.js，reactNative（会react的前端比会vue的工资高，同时门槛也高些）
2.  原理与底层研究（vue源码，webpack源码等）
3.  node.js（服务端方向，很多大厂或者高级前端招聘都会有一条：**有node经验优先**）
4.  算法（二叉树，红黑树这些大厂算法）
5.  浏览器底层（缓存机制等

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1][]

> **前端学习技巧**

*  知识点及demo练习（第一步）
 *  学习通过博客记录（这是个好习惯，也可以为面试加分，系统化的学习，也可以用于自己查找、复习）
 *  小型项目制作（将学到的知识点串起来，变成项目）
 *  多看看博客，关注前沿技术发展
 *  多问几个为什么，多思考，加深记忆、巩固学习

> **还有点事**

如果有需要，可以联合一些前端大咖给大家做一些**前端的重难点解析、实战项目与面试题分享**，一定能对大家的找工作之路有帮助（并未与任何培训机构有合作，也不发广告，不搞这些花里胡哨的）

Q: 2567040816

[d5a369601fad9bb30b915f0edb4175ce.png]: /images/20221119/6a3cb218488c41e1b059e02de36112f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221119/b35c4dee9c1c49fea6c877ca72d8e2d2.png
[Link 1]: https://www.bilibili.com/video/BV1iv411W7Q8
[Link 2]: https://www.runoob.com/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: /images/20221119/ddf340cb6a4b4f11b10073b09b04d7ba.png