前端自学路线（零基础小白向/2020持续更新）

膨胀的骚年 · 发表于 2022-9-20 10:30:09

更新于2020-4-4
************************************************************************************

19年辞职，辞职原因不外乎本专业行业天花板太低/工资条感人/工作环境差之类，对隔壁cs诱人薪资垂涎已久，思索一番后准备从传说中“简单易学”的前端入手。
开场按照惯例在知乎逛了一圈，点赞收藏了很多大佬给出的自学方案，但总感觉差那么点意思。作为编程基础仅是大学C++靠助攻飘过的自己来说，各种回答里琳琅满目的专业名词，什么框架、语法、源码，看得是一脸懵逼。
大佬们可能没这种感觉，实际上这阵势劝退效果极佳。搜集资料、找教程找视频、找学习路线很简单，作为菜鸡来说，如何从这五花八门的回答中找到适合自己的学习方案，就需要耗费很多心血。
有人说到培训班。科学的学习路线、手把手教学、毕业包分配，听起来很是诱人，但就自己了解培训班出身的人来看，效果一般。忘了之前是哪个回答看到的：觉得去培训班比自学好的，85%是做培训机构的。（大概是这么个意思）
还有句话很打动人心：计算机行业需要有强大的自学能力的以适应快速迭代更新的技术。如果你无法靠自学找到一份工作，那你在这个行业也不会有太大发展。（也大概是这么个意思）
所以最终权衡之后选择自学，当然，也可能是因为贫穷。
言归正传，本着自我总结的态度写下这篇文章。
一是对自己自学前端的学习生涯做个记录，二是如果有其他小伙伴需要类似的学习路线，这篇从零开始手把手教学攻略可能会对你有所帮助，最起码省去一些筛选资料的时间。
当然，自己也是摸着石头过河，可能会走弯路做一些无用功，也可能某些观点（针对前端学习中的知识点）很低级，甚至有的想法是错误的，欢迎大家交流指正。
************************************我是学习的分割线************************************
前端的学习路线可以大致凝练为HTML+CSS、JavaScript、jQuery、CSS3、HTML5、ES6以及之后的Vue/React/Angular等框架部分。
一.基础部分：HTML+CSS+JavaScript

【1】小白入门篇

大佬们的推荐不尽相同，选择困难癌直接发作。
<1.1>《Head First HTML 与 CSS》
最开始搞了本《Head First HTML 与 CSS》来看，很多人推荐的入门书籍。这本书的确很入门，图文插画贼多，甚至还有些小剧情，浅显易懂看得津津有味。
但看了大半本，问题来了——我枯了。我学代码想做东西啊，不想看这种傻屌弱智剧情的书啊！
我想很多人和我一样，学着学着就懵了。不知道自己学的有没有用，陷入自我怀疑（现在有时候也会）。这就是一开始就啃书的弊端，学习时候的正反馈极差。
<1.2>慕课网基础教程
经过辛勤的搜寻，让我发掘到了两处宝藏。
一是慕课网的基础教程。
前端基础包括HTML、CSS和JavaScript三大类，慕课网上有对应的免费课程。
这种边学边做的课程极大地刺激了我的学习热情，刷得不亦乐乎废寝忘食，每做一道题就感觉自己变强了一分。

但当刷完《JavaScript进阶篇》，又再度陷入了茫然。
慕课网上其他的课程与自己所学的跨度有点大，虽然说靠着三个课程零零散散学了点东西，但不足已支撑自己独立试着做项目。
<1.3>freecodecamp/W3Cschool
很快，第二处宝藏也被我发现了：freecodecamp。
与慕课网一样的教学模式，左边教程中间代码调试框右边展示效果，无缝衔接了自己之前的学习模式。
ps：freecodecamp快刷完的时候网站崩了，后来在W3Cschool找到了一模一样的教程。
W3Cschool的界面优化更好，建议大家在这个上面学。
其中有一些和慕课网知识点重叠的部分，我懒得筛选直接重新都做了一遍，就当巩固了。
这些课程中真正让我感到编程乐趣和进步的，是其中的脚本算法部分。
非常建议大家自己思考认真做，实在没思路可以查答案，但最后还是要撇开答案亲手从零码一遍代码。
这里po一个大佬的blog，里面有很详尽的关于脚本算法部分的解答：
调试成功的时候非常开心，这可能就是编程的快乐吧~~

结束了上述课程的学习，我开始膨胀了。尤其是JavaScript进阶篇和算法题更是给了自己极大自信，感觉前端不过如此。
既然这样，那我们就速战速决，直接莽个小程序出来，听说拿着自己做的demo去面试会增加90%的通过率呢，嘿嘿。
打开编辑器，随便网上找个练手小项目，准备大展身手。点开文档，看着屏幕上密密麻麻的代码，不禁发出感慨：
“哦~~~how made winds！”
……
除了<html>、<body>、<a>之类的基础标签，其他一概看不懂，打扰了，告辞！
【2】巩固补缺篇

经过之前的学习，大概（自以为）摸清了前端是在做个什么东西。
简单来说，HTML相当于是骨架，就一些标签之类的，这么长时间也熟悉地差不多了。万一遇到没见过的，现场查w3c也来得及；
CSS主要是渲染呈现页面，虽然不算简单但似乎不是很重要，先放放；
JavaScript作为前端逻辑核心，编程的精髓所在，之前娱乐式的粗浅学习不行，得补。
<2.1>《JavaScript高级程序设计》（第3版）

无论是慕课网还是W3Cschool的教程，知识点都散而不深。那些课程就像教你1+1=2，2+2=4，只告诉你结果而不甚探究为什么，等自己遇到1+2这样的问题，就会当场失智。
但不得不说，上述课程对于无基础的自己而言，很有帮助。虽然是零散的知识点，但开阔了眼界，不至于对前端知识一窍不通，学起来也没有方向。
但本人可是要吃前端这碗饭的啊，就这水平怎么能行？本着要学就要学精学懂的精神，开始恶补底层知识。
排除了臭名昭著的犀牛书，俗称红宝书的《JavaScript高级程序设计》（第3版）就是最好的选择了。
啃，就硬啃。
面对简单的技术文档一脸懵逼的耻辱犹在，书啃起来是格外认真。当然，也稍微借鉴了些前辈的看法，毕竟这书是真的厚。
下面是自己借鉴过，觉得不错的一份指南：
由于书实在是太厚，结合指南先跳过所有能暂时忽略不看的部分（根据个人精神状态酌情调整），剩下的逐字逐句读完，本书学习结束。
虽然通读了一遍，但头似乎更大了。
什么原型链，继承，闭包，事件流，冒泡，处于薛定谔的学习状态，好像懂了又好像依旧懵逼。重点句划了不少，笔记也记了一些，但似乎被作者降维打击智商碾压了……
别担心，作为入门弟子，第一遍以通读为主，对整个JavaScript语法、内容有所了解即可。毕竟是众人推崇备至百读不厌的神书，以后还要回头重温的。
这时候对JavaScript中的一些知识点脑子里有些印象了，但总感觉虚得慌。《高程》中的知识点似乎有些太底层了，缺乏与实践结合。
<2.2>《JavaScript DOM编程艺术》（第2版）

是时候来看这本书了。
有了之前的功底，这本书可以说是友好度最高的一本了。友好度高，是指整本书的知识点是连贯的，看下来顺畅丝滑，不像《高程》有些碎片化且点到为止。
书中用到的语法都很简单，逻辑清晰，主要针对JavaScript中的DOM部分进行介绍，从零开始构建、优化一些实用的函数，十分建议大家手动跟着书敲一遍代码。
还有书中反复强调的渐进增强和平稳退化，更是要结合书中的函数，细品。
看完这本书，可以说对DOM部分的掌握有了十足的进步。
<2.3>《JavaScript语言精粹》（修订版）

蝴蝶书也是一本不错的书，很薄，本着去粗取精的原则，针对JavaScript的对象、函数、继承、数组、正则表达式、方法进行进一步介绍，过一遍就好。
[3]实战演练篇

之前的主要学习了“三驾马车”，即最基础的HTML+CSS+JavaScript部分。但通过书本学习不可避免地存在一些问题：书中内容由于无法及时更新存在滞后性，以及常见的理论与实战脱节。
这就导致在看书的时候脑子里会不断重复类似于“这些真的都要学吗？”“这个学了有什么用？”这样的问题，对学习效率和心态都带来了很大的负面影响。
不得不说，2w块钱的培训班最值钱的地方，就在于有相对专业的老师会解决类似的疑问。
<3.1>视频学习
从内容连贯性、讲师风格等方面进行考量，粗略对比了市面上常见的视频教程，以下视频推荐给大家：
此课程目前活动价是1块钱，性价比极高，如果以后恢复原价，下单时请斟酌……
基本上覆盖了之前所学的内容，以视频的形式，从实际编程的角度出发进行讲解，可以说很好的补全了之前学习的漏洞。
视频最后附带了几章用于练手的小项目，这对我们从理论过渡到实际编程大有裨益。
<3.2>练手项目
如果觉得上述的小项目不够，以下几个继续推荐个大家：
以及最经典的——仿写静态淘宝界面：
到这一步结束，可以说已经从小白成长为切图仔了。别灰心也别骄傲，进化之路才刚刚开始。

【暂时就到这儿啦，会持续更新的呦~~也欢迎大家交流~~~】

土黑鱼 · 发表于 2022-9-20 10:30:54

看了一下，有点意思哈哈，多谢文章！最近也在自学，不过都是下班时间
[熬夜]

放纵的年华 · 发表于 2022-9-20 10:31:18

认真在学就够啦 [干杯]

小小小小羽 · 发表于 2022-9-20 10:31:53

坐等分享

元瑾 · 发表于 2022-9-20 10:32:04

坐等更新 [感谢]

槑槑 · 发表于 2022-9-20 10:32:18

今天我老八挑战一把《JavaScript高级程序设计》，兄弟们，奥利给，干了

一土翁 · 发表于 2022-9-20 10:33:11

好文章，希望楼主更新

扫保护伞除黑恶 · 发表于 2022-9-20 10:33:34

跟着你一起学

夏与白 · 发表于 2022-9-20 10:34:33

一起学吧

麦田里的老鼠 · 发表于 2022-9-20 10:35:16

谢谢！一起努力