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

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

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

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

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

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

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:菜鸟教程

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

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):