计算机专业的学生如何系统的学习前端技术？

布满荆棘的人生 2022-11-13 16:22 162阅读 0赞

学习前端，最不缺的就是学什么。

网上有一张流传甚广的前端学习路线，很多人看到了这张图，便纷纷从入门到放弃。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70]  
说好的前端是最容易入门的呢？这和传说中讲的不一样啊。

确实，前端涵盖面非常广，所包含的知识非常多，要想短时间内就学会所有内容成为大牛是比较困难的，建议还是循序渐进，找到适合自己的前端发展方向。

当然，无论如何，首先得打好的便是基础知识：

HTML+CSS+JavaScript

HTML是超文本标记语言，它是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入

到网页中体现。

重点学习内容：

1、学习基础知识及如何编写语义化的

2、HTML了解页面的各个部分，并且学会如何正确地构建 DOM

学习完 HTML 的基础知识后，可以动手编写 一个 HTML 页面，什么网站都可以，比如一个论坛的登录页面，而且要确保结构是正确的。虽然完成的页面看起来很丑，但是暂时还不用着急，现阶段的重点是学会编写正确的结构。

CSS是层叠样式表，通过样式属性来对标签进行布局规范，也就是用来美化网页的。

1、学习 CSS 的语法以及常见的属性

2、了解盒子模型以及如何使用 Grid 和 Flexbox

3、完成以上操作后，还需要学会如何使用媒体查询来编写响应式网页

这时候，你就可以给自己的网页增加样式了。

JavaScript 可以让你的 HTML 页面更具有交互性。如果我们不需要加载整个页面，而只加载部分内容，这时出现的滑块、弹窗等都是由 JavaScript 完成的。你需要学习：

1、JavaScript 语言的语法和基础结构学习

2、如何通过 JavaScript 来操作 DOM 对象。例如，通过 JavaScript 删除页面中的某些元素、添加一些元素、操作类名、应用 CSS 样式等等

3、学习并理解作用域、闭包、变量提升和事件冒泡等学习如何使用 XHR 或者 Ajax 发送 HTTP 请求。Ajax 可以让你在不重新加载页面的情况下执行某些页面操作。

4、完成上面的内容后，就可以去学习 ES6+ 中所有的新功能。

> 学习是一个艰苦的过程，当然如果能把技术学成，最后也一定可以获得高薪工作。掌握一个好的学习方法，跟对一个学习的人非常重要。今后要是大家有啥问题，可以随时来问我，能帮助别人学习解决问题，对于自己也是一个提升的过程。自己整理了一份最全面前端学习资料，从最基础的HTML+CSS+JS到HTML5的项目实战的学习资料都有整理这是我的前端技术交流Q un+++ 钱面是603---- 中间是985---- 后面是993–++++++ 有问题随时在里面问我，能给大家提出很多宝贵建议。

教程类推荐：

推荐一些适合这个阶段学习的资料：

W3school：HTML/JavaScript免费教程  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 1]  
前端工程师P5-P6：适合工作了1-2年前端新人。![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 2]  
有三个核心实战项目，可以快速掌握P5-P6前端知识体系，如果你觉得自己一直在重复基础工作内容，找不到方向，可以去学习一下。

1、freecodecamp 学习网站：免费学习网站，对新手非常友好

2、廖雪峰的Javascript教程

3、菜鸟教程

4、MDN 官方教程

5、W3C 官方文档

书籍推荐：

HTML与CSS：

1、《深入浅出HTML与CSS、XHTML》

2、《HTML & CSS设计与构建网站》

JavaScript：

1、《编写可维护的JavaScript》

2、《JavaScript设计模式》

3、《EffectiveJavaScript:编写高质量JavaScript代码的68个有效方法》

4、《JavaScript语言精粹》

其他素材/书籍

来源：github.com/justjavac/free-programming-books-zh\_CN

CSS/HTML、  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 3]  
JavaScript  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppbm11NTIw_size_16_color_FFFFFF_t_70 4]  
JavaScript 经典类库 jQuery

因为 JavaScript 有可以封装的特性，所以在后面也出现了很多用 JavaScript 封装的类库、插件。比如说最经典的类库就是 jQuery了。

jQuery 类库就是在类库里面封装好了很多 JavaScript 的事件方法。jQuery 通过封装，减轻了遍历、对象选择等等很多的问题。把网页特效的实现变得简单化，通过调用方法就可以了。你需要学习：

1、jQuery语法和JavaScript原生语法的差异

2、Dom对象和jQuery对象

3、jQuery的入口函数和JavaScript的入口函数的差异

4、jQuery事件的执行逻辑。

相关教程：  
![在这里插入图片描述][20210327170936382.png]  
这时候，你就可以做一些响应式网站并使用 JavaScript 添加交互功能了。

包管理器

包管理器有 yarn 和 npm，两者几乎相同，都只有安装的功能。你可以选择其中的任何一个，一旦学会使用其中的一个，另一个也就会了。

这时候，可以在你的网页中引入一些外部库。比如安装一些 Toast 插件，当用户点击按钮的时候，用 Toast 插件向他们显示信息；或者你可以创建一个登录表单，利用一些表单验证库来进行表单验证。

接下来还可以学习一些CSS预处理，CSS文件管理，CSS的一些框架，各种构建工具等等。

前端框架