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

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

网上有一张流传甚广的前端学习路线，很多人看到了这张图，便纷纷从入门到放弃。

说好的前端是最容易入门的呢？这和传说中讲的不一样啊。

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

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

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免费教程

前端工程师P5-P6：适合工作了1-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

JavaScript

JavaScript 经典类库 jQuery

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

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

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

2、Dom对象和jQuery对象

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

4、jQuery事件的执行逻辑。

相关教程：

这时候，你就可以做一些响应式网站并使用 JavaScript 添加交互功能了。

包管理器

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

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

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

前端框架

前端框架众多，React、Vue、Angular 三足鼎立，很多人都不知道应该学什么好。

一个很简单的方法是：先学工作实际需要的&自己更偏好的

1、React：Facebook 推出的一款声明式的，高效的，灵活的用于创建用户界面的JavaScript 库，现在越来越火了

2、Angular：比较容易学，因为它几乎支持所有常用的功能。例如支持懒加载的路由器、支持拦截器的 HTTP 客户端、依赖注入、CSS 封装组件等等。有了它，你可以不用再引入其他库了

3、Vue：现在找工作必须掌握的技术

框架学习可以分为这3个步骤：

第一步：基础学习。看官方的文档及教程（如果有的话）

第二步：项目驱动学习。通过项目的方式来写编写大量的代码，掌握该框架的用法及踩坑，快速积累经验

第三步：求知驱动学习。在求知驱动学习过程中，遇到任何产生困惑或者感兴趣的点，都要去深入学习。

相关教程：

React：入门实例教程

Vue：vue.js教程

Angular：菜鸟教程

当然，前端要学的内容远不止这些，路漫漫其修远兮，加油吧~