怎么转行学前端？

╰半橙微兮° 2023-10-10 13:28 7阅读 0赞

想转行做前端，现在通俗的方法就是两种，一种就是自学，一种就是去学习机构培训，接下来这两个问题，我们逐一分析一下。  
首先刚刚看到题主的问题描述，我觉得你可能更多还是比较纠结要不要转，不知道前端的前景怎么样？

那针对这个问题，我简单的说一下自己的看法。  
近日，软件开发公司 JetBrains 发布了《**[2021开发者生态系统现状][2021]**》报告，来自 **183** 个国家或地区的 **31743** 名开发者参与了问卷调查。

在这份报告中，分析了科技行业的最新趋势，以及有关工具、技术、编程语言等数据，对IT感兴趣的小伙伴们的学习和就业选择有一定参考意义。

**下面是报告的重要发现，一起来看下：**  
◆ JavaScript 是最受欢迎的语言。  
◆ 就整体使用情况而言，Python 比 Java 更受欢迎，而作为一种主要语言，Java 比 Python 更受欢迎。  
◆ 开发者计划采用或迁移到的前 5 种语言是 Go、Kotlin、TypeScript、Python 和 Rust。  
◆ 2021 年开发者学习的前 5 种语言是 JavaScript、Python、TypeScript、Java 和 Go。  
◆ 过去 5 年，Ruby、Objective-C 和 Scala 的受欢迎度都在下降。  
◆ 增长最快的 5 种语言是 Python、TypeScript、Kotlin、SQL 和 Go。  
◆ 大部分受访者 (71%) 从事网页后端开发。

**JavaScript是最受欢迎的语言**  
**近7成开发者在使用**  
从报告中可以看出，**JavaScript 依然是最受开发者欢迎的编程语言**，受访者中 Web 开发者占多数，他们更多的是使用 JavaScript、PHP、TypeScript 来开发网站。

![a4100d114cb8124e70c9e5a6047035a5.png][]

\* 图片来源于JetBrains

凭借着 React、Node.js 和 Vue.js 等框架，Web开发者在前端和后端都可以使用JavaScript，**69%的开发者在过去12个月中使用的都是JavaScript**。

![c25a3b27546a59919345283df3b88f8b.png][]

\* 图片来源于JetBrains，部分展示

由此可见，无论是在 GitHub 平台还是 TIOBE 等编程语言榜单，**诞生26年以来，JavaScript 的身影无处不在**。

随着浏览器与互联网用户体验的不断升级，JavaScript 自身的特性，如**可以在任何地方运行、无须任何环境设置、基于对象和事件驱动**等使得应用程序的开发更为高效。  
同时，其背后的开放标准和庞大的社区支持，也促进了 JavaScript 的成熟发展。

**JavaScript是前端工程师唯一编程语言，****薪资高、好就业、不过时** ，**编程行业只有选择对了大方向，才能达到高薪的预期**。不知道选啥的话，建议首选 JavaScript ，理由如下：  
· 全面、简单、面向结果的Web开发语言；· 对使用者要求不是特别高，更具有普适性；· 流行、功能强大，就业前景非常可观；

根据第三方平台职友集，数据显示，北京前端开发工程师月平均工资 ￥**20.2K**，其中拿**20K-30K**工资的占比最多，达 29.7% 。

![75ce33c7edbde7416d4a3b8fda2ae8ad.png][]

**那么如果你也看好前端的话，怎么开启你的转行之路呢。**  
两种方式，自学或者培训，对于选择培训机构去培训这个我不做过多的推荐，题主可以根据自身的情况，已经以后想在哪里发展选择适合自己的学校。  
下面说下零基础自学的同学该如何转行到前端这个行业。

**首先，先梳理一下前端大致要学习哪些内容.**

![24d7827f076672bf4a4423eaf77fa2f8.png][]

如图可以看到，学习前端必须要经历一下几个阶段  
**第一阶段：HTML+CSS基础**  
**第二阶段：移动Web网页开发**  
**第三阶段：Javascript[网页编程][Link 1]**  
**第四阶段：Node.js 与 AJAX**  
**第五阶段：vue.js实战项目**  
**第六阶段：微信小程序**  
**第七阶段：[react.js][]项目实战**  
清晰的知道自己需要学哪些内容，然后再开始学习，往往有事半功倍的效果。  
那么接下来我们看下每个阶段要学习哪些内容（直接上视频+项目）

**第一阶段：HTML+CSS基础**

[前端HTML5+CSS3+移动Web全套教程，零基础学前端web首选黑马程序员\_哔哩哔哩\_bilibiliwww.bilibili.com/video/BV1cf4y1j7hL正在上传…重新上传取消][HTML5_CSS3_Web_web_bilibiliwww.bilibili.com_video_BV1cf4y1j7hL]

**第二阶段：移动Web网页开发**

[最全面的Html5+css3教程，前端开发工程师进阶教程\_哔哩哔哩\_bilibiliwww.bilibili.com/video/BV1b4411i742正在上传…重新上传取消][Html5_css3_bilibiliwww.bilibili.com_video_BV1b4411i742]

[黑马程序员前端教程，HTML5+CSS3京东项目实战\_前端必备基础\_哔哩哔哩\_bilibiliwww.bilibili.com/video/BV1Vx411g7DP正在上传…重新上传取消][HTML5_CSS3_bilibiliwww.bilibili.com_video_BV1Vx411g7DP]

[Web前端移动开发进阶教程-乐淘移动商城项目\_哔哩哔哩\_bilibiliwww.bilibili.com/video/BV1nW411Z7kT正在上传…重新上传取消][Web_-_bilibiliwww.bilibili.com_video_BV1nW411Z7kT]

[黑马程序员JavaScript全套教程，Web前端必学的JS教程，零基础入门JavaScript\_哔哩哔哩\_bilibiliwww.bilibili.com/video/BV1ux411d75J正在上传…重新上传取消][JavaScript_Web_JS_JavaScript_bilibiliwww.bilibili.com_video_BV1ux411d75J]

[黑马程序员前端基础-彻底征服JavaScript（知识精讲+贪吃蛇等项目案例）\_哔哩哔哩\_bilibiliwww.bilibili.com/video/BV1tW41187vH正在上传…重新上传取消][-_JavaScript_bilibiliwww.bilibili.com_video_BV1tW41187vH]

[黑马程序员JavaScript核心教程，前端基础教程，JS必会的DOM BOM操作\_哔哩哔哩\_bilibiliwww.bilibili.com/video/BV1k4411w7sV正在上传…重新上传取消][JavaScript_JS_DOM BOM_bilibiliwww.bilibili.com_video_BV1k4411w7sV]

[黑马程序员前端基础必备教程|jQuery网页开发案例精讲\_哔哩哔哩\_bilibiliwww.bilibili.com/video/BV1a4411w7Gx正在上传…重新上传取消][jQuery_bilibiliwww.bilibili.com_video_BV1a4411w7Gx]

**第四阶段：Node.js 与 AJAX**  
Nodejs教程精讲：[https://pan.baidu.com/s/1uJFKYaqTGYysxgJsaHmyjA][https_pan.baidu.com_s_1uJFKYaqTGYysxgJsaHmyjA] 提取码：5566  
[Ajax从入门到精通][Ajax]：[https://pan.baidu.com/s/1jIxg\_a6H7Qj1gAxhPvPQPA][https_pan.baidu.com_s_1jIxg_a6H7Qj1gAxhPvPQPA] 提取码：0ecq

**第五阶段：vue.js实战项目**  
[黑马程序员vue前端基础教程-4个小时带你快速入门vue\_][vue_-4_vue]

**第六阶段：微信小程序**  
[黑马程序员微信小程序开发前端教程\_零基础玩转微信小程序\_][Link 2]  
[前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程\_][vue_web]

**第七阶段：react.js项目实战**  
[黑马程序员前端React精品教程， React从零基础入门到原理详解][React_ React]  
[前端热门教程推荐|五天从零基础学会TypeScript\_][TypeScript]

**PS:给大家整理了一些前端与移动开发需要的开发工具**

![3dc6cc2102fd08ab2ef32e400e85af1e.png][]

最后推荐书籍系列：  
**HTML+CSS教程**

![bc7ccb571da720aa1ce333a20efe20a9.png][]

**微信小程序开发实战**

![285d4abfe647e77222351abf8bd4b9b8.png][]

**Vue.js前端开发实战**

![0fe543a9ce768eb8777d4d2c73a4bf50.png][]

**Node.js 核心技术教程**

![3c3b02cbaf5ff1c2af0fa061d2a028fe.png][]

[2021]: https://www.zhihu.com/search?q=2021%E5%BC%80%E5%8F%91%E8%80%85%E7%94%9F%E6%80%81%E7%B3%BB%E7%BB%9F%E7%8E%B0%E7%8A%B6&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A421969199%7D
[a4100d114cb8124e70c9e5a6047035a5.png]: https://img-blog.csdnimg.cn/img_convert/a4100d114cb8124e70c9e5a6047035a5.png
[c25a3b27546a59919345283df3b88f8b.png]: https://img-blog.csdnimg.cn/img_convert/c25a3b27546a59919345283df3b88f8b.png
[75ce33c7edbde7416d4a3b8fda2ae8ad.png]: https://img-blog.csdnimg.cn/img_convert/75ce33c7edbde7416d4a3b8fda2ae8ad.png
[24d7827f076672bf4a4423eaf77fa2f8.png]: https://img-blog.csdnimg.cn/img_convert/24d7827f076672bf4a4423eaf77fa2f8.png
[Link 1]: https://www.zhihu.com/search?q=%E7%BD%91%E9%A1%B5%E7%BC%96%E7%A8%8B&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A421969199%7D
[react.js]: https://www.zhihu.com/search?q=react.js&search_source=Entity&hybrid_search_source=Entity&hybrid_search_extra=%7B%22sourceType%22%3A%22article%22%2C%22sourceId%22%3A421969199%7D
[HTML5_CSS3_Web_web_bilibiliwww.bilibili.com_video_BV1cf4y1j7hL]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1cf4y1j7hL
[Html5_css3_bilibiliwww.bilibili.com_video_BV1b4411i742]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1b4411i742
[HTML5_CSS3_bilibiliwww.bilibili.com_video_BV1Vx411g7DP]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1Vx411g7DP
[Web_-_bilibiliwww.bilibili.com_video_BV1nW411Z7kT]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1nW411Z7kT
[JavaScript_Web_JS_JavaScript_bilibiliwww.bilibili.com_video_BV1ux411d75J]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1ux411d75J
[-_JavaScript_bilibiliwww.bilibili.com_video_BV1tW41187vH]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1tW41187vH
[JavaScript_JS_DOM BOM_bilibiliwww.bilibili.com_video_BV1k4411w7sV]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1k4411w7sV
[jQuery_bilibiliwww.bilibili.com_video_BV1a4411w7Gx]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1a4411w7Gx
[https_pan.baidu.com_s_1uJFKYaqTGYysxgJsaHmyjA]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1uJFKYaqTGYysxgJsaHmyjA
[Ajax]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1b4411B7Xk
[https_pan.baidu.com_s_1jIxg_a6H7Qj1gAxhPvPQPA]: https://link.zhihu.com/?target=https%3A//pan.baidu.com/s/1jIxg_a6H7Qj1gAxhPvPQPA
[vue_-4_vue]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV12J411m7MG
[Link 2]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1nE41117BQ
[vue_web]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1Sc41187nZ
[React_ React]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV1gh411U7JD
[TypeScript]: https://link.zhihu.com/?target=https%3A//www.bilibili.com/video/BV14Z4y1u7pi
[3dc6cc2102fd08ab2ef32e400e85af1e.png]: https://img-blog.csdnimg.cn/img_convert/3dc6cc2102fd08ab2ef32e400e85af1e.png
[bc7ccb571da720aa1ce333a20efe20a9.png]: https://img-blog.csdnimg.cn/img_convert/bc7ccb571da720aa1ce333a20efe20a9.png
[285d4abfe647e77222351abf8bd4b9b8.png]: https://img-blog.csdnimg.cn/img_convert/285d4abfe647e77222351abf8bd4b9b8.png
[0fe543a9ce768eb8777d4d2c73a4bf50.png]: https://img-blog.csdnimg.cn/img_convert/0fe543a9ce768eb8777d4d2c73a4bf50.png
[3c3b02cbaf5ff1c2af0fa061d2a028fe.png]: https://img-blog.csdnimg.cn/img_convert/3c3b02cbaf5ff1c2af0fa061d2a028fe.png