2020学习前端开发有前途吗？（建议收藏）

梦里梦外; 2022-12-04 08:49 213阅读 0赞

导语：

最近很多粉丝私信小米粥，我们举两个比较有代表性的同学吧。

> **同学A**：他现在是一名大学生，学了学校的编程课程，什么语言都学了一点，但是现在感觉自己什么都不会，他同学自学了一些，做了一两个小项目，他很羡慕，而且他个人对前端有点兴趣，不知道现在开始学前端怎么样。

> **同学B**：他刚刚上大学，被师兄介绍到大学学编程都是是学校学基础，真正的技术靠自学，所以过来询问我现在该怎么学习，他以后想走前端路线。

### 本文的目录 ###

*   *  1，学校的课程到底有没有用？
     *  2，为什么学了两三年的学校课程，做不出一个小项目呢？
     *  3，2020开始学习前端开发有前途吗，晚吗?
     *   *  （1）有前途，而且不晚
         *  （2）为什么前端是JavaScript？有其他语言吗？JavaScript会被淘汰吗？
     *  4，如何0基础学习前端
     *   *  第一阶段（1-2个星期）
         *  第二阶段（1-2个星期）
         *  第三阶段（2个星期）
         *  第四阶段（1个星期）入门完成
         *  第五阶段（2个星期）
         *  第六阶段（4个星期）
         *  第七阶段（5个星期）合格的前端开发人员
         *  第八阶段（4个星期）进阶

解答：

我们来系统的讲解这个问题吧。

## 1，学校的课程到底有没有用？ ##

首先是很多同学反应学校学习的东西没啥用，学了2-3年甚至都不会写一个网址，写一个后台。

> **我的回答是，肯定有用，而且很有用。**

这一点是毋庸置疑的，无论是大学生人生的第一门编程语言，数据结构，操作系统，计算机网络等等课程。**只有把这些基础打扎实了，你的脑海里就会呈现出一个计算机的世界，你的思维观念也会变得不同于其他非计算机的学生**。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]

## 2，为什么学了两三年的学校课程，做不出一个小项目呢？ ##

这是大多数同学存在的问题，你要明白，计算机开发发展的方向太多了，学校不能给每一个同学都设计一个路线，只能通过基础的计算机教学，改变你的思维，并且通过学校的一系列应用开发比赛，网络攻防赛，ACM，机器人，实验室等活动来引导你往你喜欢的方向发展。

> **总之一句话，大学学的是计算机基础，而且是很重要的基础，至于你想往什么方向发展，这是你自己的选择，你应该主动去自学你喜欢的方向。而不是学校逼迫你来学，你已经成年了，要学会自己规划自己的人生。**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]

## 3，2020开始学习前端开发有前途吗，晚吗? ##

### （1）有前途，而且不晚 ###

我们光说无凭，看一看招聘信息吧。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 4]

> 现在基本每一家公司都是需要前端程序员的，试问哪个公司没有网址，没有公众号，小程序。

所以现在学习前端还不晚，但是现在的前端渐渐趋向大前端路线，工程化。所以学习起来会比以前的前端程序员辛苦一些，而且现在公司招聘前端工程师的要求会稍微高些，这就需要我们学习更多的知识和技能。

### （2）为什么前端是JavaScript？有其他语言吗？JavaScript会被淘汰吗？ ###

1.  现在浏览器使用的是JavaScript，而且是一家独大，而且小程序，web应用等等有关前端开发的，都是使用到了JavaScript，所以他在短时间内不会淘汰，除非出现新的语言或者浏览器淘汰了。
2.  那会不会出现新的前端语言呢？
    
    我们要从浏览器的渲染机制开始，首先JavaScript是单线程语言，它和dom渲染共用一个线程。如果再出现一个新语言还是单线程，那么我觉得他出现的意义不大。
    
    如果浏览器的渲染机制改变了，支持多线程了，再出现了一个新的语言比JavaScript更好，这时候JavaScript才会慢慢的淘汰，因为新技术的出现和取代旧技术是需要一定的时间的。
    
    这时候大不了我们前端程序员再学习这一门语言不就好了，程序员都是需要学习新技术的。

## 4，如何0基础学习前端 ##

### 第一阶段（1-2个星期） ###

学习HTML+CSS，能够使用这两个东西写出特别简单的页面，比如盒子模型或者文章加配图。

推荐学习网址 [菜鸟教程][Link 1] 或者 [w3school][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 6]

### 第二阶段（1-2个星期） ###

**学习原生的js以及它操纵html的方法**，注意要是原生的js，只有明白原生的js才能够快速掌握各种框架及其原理。

依然推荐学习网址 [菜鸟教程][Link 1] 或者 [w3school][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 7]

### 第三阶段（2个星期） ###

学习jquery以及bootstrap框架，其中前者是js框架后者是css框架。

这是你学的第一个框架要认真学习，跟着里面的例子每个都手动写一遍。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 9]

### 第四阶段（1个星期）入门完成 ###

学习html5和css3，只要你学完这个东西，你就可以去模仿淘宝或者京东首页，编写一个仿淘宝或者京东首页，这时候你就会成就感十足，我就是这样觉得的哈哈哈哈。  
![在这里插入图片描述][20200819181859845.png_pic_center]

![在这里插入图片描述][2020081918190922.png_pic_center]

### 第五阶段（2个星期） ###

学习移动端页面布局

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、手机滚屏。让你的页面在手机浏览器中能够适配。

![在这里插入图片描述][20200819182013898.png_pic_center]

### 第六阶段（4个星期） ###

面向对象进阶和学习网络请求（使用接口get和post），以及ajax的使用。了解跨域是什么东西。明白ajax简介和异步的概念、ajax框架的封装、XMLHttpRequest对象详细介绍方法。json和json解析、jsonp解决跨域问题、使用jquery里面的ajax。  
![在这里插入图片描述][20200819181939924.png_pic_center]  
![在这里插入图片描述][20200819181951742.png_pic_center]

**这时候你已经可以通过jsonp去get到各个网址上面的地址，甚至你可以做一个仿酷狗应用的页面，搜索歌曲及其播放，虽然页面肯定不会像酷狗官网一样炫酷。但是已经成就满满了。**

### 第七阶段（5个星期）合格的前端开发人员 ###

这时候你已经是一名快合格的前端工程师了，我们还要在学一下主流的开发框架，了解一下MVC/MVVM/MVW框架是什么东西，然后从React.js、Vue.js、Angular.js选择一个来学习，并且搭配**webpack**来进行项目工程化和打包。  
![在这里插入图片描述][20200819183525203.png_pic_center]  
![在这里插入图片描述][20200819183546490.png_pic_center]

这个过程可能会比较苦，但是只要你咬一咬牙，坚持学下去，就会胜利。

学习过程中需要搭配一个实战项目，推荐一些学习网址，[大前端学习网址][Link 2]

### 第八阶段（4个星期）进阶 ###

Node.js全栈开发，去了解node是什么东西，以及他现在的作用，其实它也可以作为一门后台开发语言，而且它的语法跟js特别相似，所以对于我们前端开发工程师来说真的是一个理解后台运作的很好的工具。

学习原生的nodejs、express和koa2，深入理解和使用node.js，将会对你的工程化思想有很大的提升。

> **学到这里，你可以开始写一个属于自己的全栈项目了**

加油！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 10]  
**补充**：  
![在这里插入图片描述][20200902155530706.jpg_pic_center]  
微信搜索【web小馆】，回复**全栈博客项目**，即可获取**项目源码和后续的实战文章教程**。每天用最简单朴实的语言，潜移默化的提升你的计算机基础知识和前端技术。小米粥，一个专注的web全栈工程师，我们下期再见！

![在这里插入图片描述][20200825125805528.png_pic_center]  
![node后台][node]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/e6c17da4a43041ba9d0da1e12f391393.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/5470153db2f344e5a040badbbe1f0a5e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/5059353928844b3584bdc77f69580e7b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/c84b15911753451182f24a428d74041b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/8dd89f3a41184b74abf6632d0617ae7b.png
[Link 1]: https://www.runoob.com/
[w3school]: https://www.w3school.com.cn/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/4a0e2d5e21e34bbc8b3802ee48c47757.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/6d00a1812aff45db85ca3b0b46ec20d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/a2014f0d9ee44898b52cd483708e7c81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/5e624bde5ab645e189024e000c8e2527.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/2b031d232c91425fbfe4c2f8a6709f62.png
[20200819181859845.png_pic_center]: /images/20221123/d8b07ddbb179498ba4e4e16d00137795.png
[2020081918190922.png_pic_center]: /images/20221123/7ba9fe99085949ada927c2c93301b635.png
[20200819182013898.png_pic_center]: /images/20221123/0e2f6721372243c7be8bb1737c2c6845.png
[20200819181939924.png_pic_center]: /images/20221123/0c19b432b1224e95909a81adf2a1c95a.png
[20200819181951742.png_pic_center]: /images/20221123/109f22b637ad4f5ca8d59e41fb2f3f4a.png
[20200819183525203.png_pic_center]: /images/20221123/1ce70403f00b451383c57ba3abe1df2a.png
[20200819183546490.png_pic_center]: /images/20221123/d9ead6bc010c4834915c60dd43418ebf.png
[Link 2]: https://xiaomizhou.blog.csdn.net/article/details/108166954
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGNoYXR4aWFvbWk_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/3ce17aceb0ca4fa8ab109fed8a0e6dcd.png
[20200902155530706.jpg_pic_center]: /images/20221123/b38968ed491447979e57a93a3541a3d0.png
[20200825125805528.png_pic_center]: /images/20221123/006ab3afc4d24891989cfea2e11268af.png
[node]: /images/20221123/a83296f50d954fda87804fa654b3f271.png