适合普通大学生的前端学习路线

开发 前端
前端和后端相比,需要学习的知识还是要少很多,如果你要入门后端,你可以要学习一大堆只是,但是你入门前端,只要把 HTML + CSS + JavaScript 这三门知识学习了,就基本差不多入门前端了。

 [[412838]]

假如你没有明确的目标,或许可以按照我说的学习路线来学习一波,我写的每一份学习路线,不会很全面,因为我认为,东西列的太多,反而不利于新手的学习,所以我列举的,都是比较必要的知识,当你把这些知识学了的时候,我相信你不需要别人的学习路线,也能知道自己接下来需要学啥了。

一、入门前端三剑客

前端和后端相比,需要学习的知识还是要少很多,如果你要入门后端,你可以要学习一大堆只是,但是你入门前端,只要把 HTML + CSS + JavaScript 这三门知识学习了,就基本差不多入门前端了,并且可以利用这三门知识,写出很多漂亮的交互页面,下面讲一讲这三门知识的学习。

1、HTML

html 学起来还是挺简单的,无论你是否有编程基础,我觉得都可以快速入门,对于新手,我推荐找个入门的视频看一下,然后跟着视频打代码就可以了,入门教程随便在慕课网啥找个免费的视频就可以了,随便搜索「html入门」即可,或者看菜鸟教程的一个入门教程也行.

看完视频,也可以看一下文字版的教程,不知道大家有没有看过阮一峰写过的教程,我觉得他写的教程都很棒,所以这里我也推荐下大家看一下阮一峰写的这份 HTML 入门教程,可能可以让你理解的更加透彻: https://wangdoc.com/html/

大家切勿眼高手低,一定要跟着视频或者书籍上的案例打代码,写代码的编辑器,我推荐 VS-Code,反正选一款你喜欢的编辑器就行,现在这些编辑器都有很多插件,像 VS-Code 这些编辑器,用好一款就可以写各种语言的代码了。

2、CSS

没啥好说的,和 HTML 相辅相成,你在学习 HTML 的过程中,其实也一直都在接触 CSS,所以你学了 HTML 之后,感觉几个小时就可以学完 CSS 了,还是一样,推荐找个视频快速入门,不多说。

html 是一门标签语言,里面有各种各样的标签,很多初学者学了之后可能就把这些标签忘了, 有人可能会问,老是忘了怎么办?

忘了就忘了,没事的,不需要强行记住这些标签,你需要的是:脑子里有个印象,当你这实现某个功能的时候,你知道 HTML 有某个标签可以实现这样的功能就可以了,然后翻开对应的教程,你能够根据教程使用这个标签即可。

用的次数多了,也就记住了,所以学完 HTML 和 CSS,一定要多多实践,随便打开一个网页,对着葫芦画瓢,自己写一个和它类似的就可以了。

3、JavaScript

比起 HTML 和 CSS,JavaScript 会难一些,不过如果你有其他编程语言基础,例如学过 C 语言,Python 或者 Java 啥的,那学期 JavaScript 也是分分钟的事。

前面的 HTML 和 CSS,我的推荐大家找个视频快速入门即可,但是对于 JavaScript,假如你时间不是很紧,那么我推荐你用书籍系统学一下,有些知识,趁着有时间,一定要系统学,这样可以打下很深的底子,如果你觉得难的话,也可以先用视频快速入门,之后再回过头来钻研书籍,系统过一遍,通过系统学习,你会明白很多原理,学到很多设计思想,我看过一本《JavaScript 高级程序设计》,感觉还好,就推荐这一本吧。

学了 JavaScript 之后,可以学一学 ES6,面试貌似也经常会问到,可以看一看阮一峰写的一份入门教程: https://wangdoc.com/es6/

二、框架

目前前端用的比较多的主要有 Vue 和 React ,在学习框架之前,一定要先用 HTML + CSS + JavaScript 这些做一些项目,因为这些框架的底层实现,其实就是 JavaScript 实现的,然而,居然还有人知道如何使用 Vue,但没学过 JavaScript,这显然不合适,只有你体验过 HTML + CSS + JavaScript ,你才能更好着明白 Vue 和 React 的好处。

不过对于初学者,可以先学习 Vue,Vue 可能更好入门一些,之前实习的时候,被迫学习了几天的 vue,我是在慕课网先快速入门看的,学起来不难,就是细节容易忘,入门课程直达: https://www.imooc.com/coursescore/980

或者百度云我也搞好了一份,vue入门+实战: Vue 入门教程

不过你看了课程之后,你去做项目的话,其实还是会遇到好多问题的,特别是在网络请求那块,在解决问题的过程中,你就能更加理解一些原理了。

学到什么程度?

对于初学者,我的一半建议就是,跟着一份教程,过一遍,然后做对应的项目即可,之后遇到啥,就去搜索啥,不用纠结这个学到什么程度。

Vue 和 React 随便选一个重点学习即可,我推荐 vue,不过学了 Vue 之后,有时间的话,我建议可以了解下 React,快入通过视频了解,感觉几个小时或者一两天就够了。

三、数据结构

无论你是走什么岗位,数据结构都是必须学习的一门课程,从面试的角度来讲,面试基本比问,特别是校招;从个人的提升上来看,学好数据结构与算法,可以让你走的更远。

但是,数据结构与算法这玩意,可深可浅,不过我觉得至少得掌握如下基础知识:

1、时间复杂度、空间复杂度

2、链表、队列、栈

3、树:初级:二叉树,查找二叉树,进阶:AVL树,红黑树等,至少掌握初级吧。

4、图(图有好多种算法,深度/广度搜索,最短路径、最小生存树等),对于图,其实无论是面试还是工作,都挺少用到,学起来也有一定难度,假如你时间不多,我觉得可以先不学。

不过如果你是科班的,那么这些我觉得你大一第二学期把这些都学完是最好的了,没学完也问题不大,有些人可能是先教《离散数学》这本课,为数据结构与算法做铺垫。

书籍推荐:你学过 JavaScript,所以可以用 Javascript 来写这些数据结构,至于书籍,其实我也不知道推荐啥,网上根据目录找一本:

把基础数据结构学了之后,我觉得你要保持刷题,这个还是挺重要的,例如可以每天保持刷一两道,刚开始刷会挺吃力,但后面熟练了,就会快很多,不过很多人在吃力的那会,就放弃了,所以也就有了人与人之间的差距。

我觉得至少把《剑指 offer》刷完吧,刷完之后,可以去把 leetcode 中 top 100 的热门题做了。

当然,如果你想更加系统着学习算法,可以看我之前写的算法学习路线: 谈一谈算法学习之路

另外就是强烈推荐这份 GitHub 80+K 的刷题笔记:

两个月斩获 70k star,前字节大神刷题笔记

四、计算机网络

无论是前端开发还是后端开发,说到底都是数据通过网络在多台主机之间的交互,而且对于前端,计算机网络的知识,用的可能比后端还多,特别是 HTTP 这块,所以呢,计算机网络必须好好学,而且还得重点学。

入门我推荐《图解 HTTP》,不过看完这本我觉得还不够,可以看《计算机网络:自顶向下》这本书,多看两遍,以后面试就可以和面试杆上了。

一边看一边犯困怎么办?

我的建议是,硬着头皮死磕一边,因为根据读者的反馈,确实有挺多人跟我说这玩意看着好困,不过我当时学习的时候,看着好带劲,就是了解了很多原因,很爽,然而事实是,有些人,看着却是一种煎熬,,,,学计算机网络,就一条主线:理解一台计算机是如何找到另外一台计算机,并且把数据交付给他的,或者你可以看我这篇科普文章: 一文读懂一台计算机是如何把数据发送给另一台计算机的

书籍都整理好了: 少走弯路,必读计算机经典书籍推荐(含下载方式)

我也写过一份计算机网络的入门教程:

0. 计算机网络入门简介

1. 计算机网络五层模型入门

2. 通信双方如何保证消息不丢失?

3. 集线器、交换机与路由器有什么区别?

4. 什么是 TCP 拥塞控制?

5. 什么是 TCP 流量控制

6. 什么是 TCP 三次握手?

7. 什么是 TCP 四次挥手?

8. 什么是 HTTP?

9. 什么是 HTTPS?

10. 什么是 SSL/TLS 协议?

11. 什么是 DNS?

12. 什么是 DHCP ?

13. 什么是广播路由算法?

14. 什么是数字签名?

15. 什么是 SQL 注入攻击?

16. 什么是 XSS 攻击?

五、浏览器工作原理

学前端,基本天天和浏览器打交道,因为网页上的各种界面,都是由浏览器来渲染的,所以还是非常有必要学习一下浏览器相关的知识。

如果你在浏览器按 F12,会出现一个「调试」的界面

里面有很多东西,例如各种网络请求数据,各种脚本数据,感兴趣的话,可以去研究研究。

那么具体要学习哪些呢?

我觉得至少得了解一下本地 cookie ,localStorage,SessionStorage 存储吧,还有就是,如何查看一个 http 的请求状态,浏览器关闭后会做哪些处理之类的。

总的来说,就是,从我们发起一个 http 请求,到页面展示如初,浏览器都经历了哪些逻辑处理?

六、进阶

学完了上面这些,可以学一些帮助我们更好着构建一个前端项目的工具,比较常见的有如下几种:

Node.js:这个必须学,主要就是可以帮助我们很快着构建出一个 web 项目,一条命令就搞定了,入门可以在慕课网看视频,我之前看过一个,顺便推荐一下:

进阶或者更甚层次了解,一般都得看书,自己网上搜一本吧。

Webpack:不同浏览器对 JavaScript 的特性支持的不一致,可以通过构建工具把 JavaScript 代码转换成浏览器能支持的。使用构建工具也能够做到性能优化,比如压缩代码,这个 webpack 可以了解一下,在以后做项目的过程中,还是经常用到 node.js 和 webpack 的,我觉得刚开始会使用就好,后面遇到问题了,在通过问题驱动的方式去深入了家。

七、学习顺序问题

这里讲一下学习顺序的问题,就是说学习了 html + css + javascript 之后,我是先学习前端的一些框架好啊,还是学习数据结构与算法好啊,还是学习计算机网络,浏览器工作原理好呢?

我觉得这个和你时间有关,假如你还是大一大二的话,学校会有数据结构,计算机网络的课程,我觉得跟着学校的顺序学就行,然后的话,像刷题,我觉得有些东西同时做并不会存在矛盾,例如我就建议刷题这个时期,长期保持,然后一边做其他的。

总的来说,我觉得也可以按照我说的这个学习顺序来学,然后算法那一块,当你学习了 Javascript 之后,就可以穿拆整个过程了。

学完这些,都可以去面试了,当然,也别忘了刷一刷八股文,可以看看这些PDF,跟着学: 图解操作系统、网络、计算机组成 PDF 下载!

最后

再次强调,这篇文章不是让你成为大神的,学完也不是多厉害,而是, 给处于大学迷茫、不知道学啥的你,一个方向,无论你是否是科班 ,如标题所说, 普通/大众 。不过我相信,当你学完了这些,你应该会有自己的学习方向了。

最后,是希望各位还在校的学生,大一可以好好浪,但也要保持应有的学习时间,之后,就好好学习吧。不管你是名校还是非名校,我觉得你在只要这几年认真学,进大公司的几率,真的非常大,这绝对不是鸡汤。

还有就是,以上说到的书籍,都可以在这个 GitHub 上无套路下载到: 编程的优质书籍整理

 

责任编辑:张燕妮 来源: 博客园
相关推荐

2010-11-10 10:19:24

大学生

2017-03-23 22:23:30

Linux

2010-07-15 16:11:56

大学生职场

2010-11-01 11:21:21

求职

2010-11-17 10:13:57

求职

2015-08-28 10:03:55

IT学习历程大学生活

2010-12-24 11:58:37

2010-03-31 10:32:57

创业大赛

2014-08-22 09:51:54

创业

2009-05-20 08:13:50

谷歌施密特大学生

2010-08-25 15:08:22

经历

2009-02-25 09:06:27

大学生求职经验

2015-07-13 14:15:19

SDN

2009-03-10 09:23:50

求职大学生IT

2010-03-31 15:26:11

大学生创业

2012-06-21 14:30:40

超算大赛

2013-06-21 16:52:02

大学生IT博客大赛IT博客大赛IT博客大赛50强
点赞
收藏

51CTO技术栈公众号