还在迷茫于前端如何入门和进阶?万字指南让你不再迷茫!

13,355 阅读15分钟

我经常会看到很多同学在学习前端的时候比较迷茫,不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验,但是发现这是一个问得非常多的一个共性问题。

作为程序员,肯定是不能容忍重复无味的劳动的,因此我就系统地总结分享一下我的前端学习路线,希望对你能够有所帮助。

前言

前端学习是一个螺旋上升的过程,既要反复地看书,也要抓紧时间进行实战。只看书,看了就会忘,所以必须将看书和写代码相结合。只要你认真学,入门前端的话三个月左右就可以了。之后我还给出了前端进阶路线,帮助你提升前端技能水平。我把前端入门和前端进阶一共分为六个阶段,并对相应阶段所需要的大致的学习时间进行了标注。

前端入门

入门前端开发主要需要学习 HTML,CSS 和 JavaScript 三大件。之后学习前端主流框架的使用,并基于已学内容开发一个小项目进行实战。当你把这些学习并理解透彻以后,也就算真正地入门前端了。

阶段一:HTML + CSS

前端对于入门者相当友好,因为开始学习的时候你只需要一个浏览器,推荐 Chrome。HTML 和 CSS 可以直接运行在浏览器中,浏览器就是它们的运行环境。你也可以使用编辑器,推荐 VSCode,这是前端开发使用最多的编辑器。

HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其实并不是编程语言。HTML 中文名叫做超文本标记语言,其实就是一些标签。CSS 中文名为层叠样式表,也就是一些样式的配置。

首先学习 HTML,非常简单。HTML 有非常多的标签,刚入门的时候不要沉浸在记住这些标签中,你也记不住。你只需要整体浏览一遍,知道有哪些标签,各自的作用是什么,整体有一个印象就行了。我推荐跟着 MDN 的 HTML 学习路径 过一遍就行。我学习 HTML 的时候还看过两本书,你感兴趣也可以看一下,这是这方面很好的书了:

  • 《Head First HTML and CSS》
  • 《HTML5 与 CSS3 基础教程》

看完之后可以自我检测一下,例如常用的标签有哪些,<!DOCTYPE> 的作用是什么,哪些标签是行内标签,哪些是块级标签,HTML5 有什么新特性等。这里不要花太多时间,大致过一下即可,不用都记住,之后有需要再回来查就行。

接下来学习 CSS,直接推荐目前最适合 CSS 入门的书:

  • 《精通 CSS(第三版)》

在入门阶段,不需要将整本书一字不差地看完,你只需要抓住几块核心内容,例如选择器、层叠、继承、盒模型、Flex 页面布局和网格等。这些内容快速过一遍就行,太细节的内容不用记,之后需要了再回来查。以上内容用时 6 天左右,其中 HTML 2 天,CSS 4 天。

有了这些基础知识,你就可以进行实战了。这里推荐百度前端技术学院平台,他们这都是开源免费的前端题目,应该是为了培养前端人才,让自己能够招到更合适的人而创建的。他们的课开了四年:

现在打开 IFE2018 中的 第五题 开始写静态页面吧。然后你会发现,你根本写不出来。这是很正常的,那你就去看别人的代码,看一点你就开窍了,就知道怎么写了。忘掉的属性就回去查 MDN 或者查我推荐的书,如此反复你就记住了。

写完一个页面之后别急着往下写。你写的第一个页面肯定有很多问题,例如属性使用错误,代码缩进不规范等问题。这时候你应该找一个代码规范,例如 百度前端代码规范,根据规范重写你的代码。这个规范我只是举一个例子,自己上网搜一下,好的大公司都有自己的规范,这个不是规定死的,风格统一并且可读性强即可。

重写代码之后,你再去看看别人提交的代码,这个页面是怎么写的,如果身边有技术好的前端,可以让他帮你指点一下。这时候你应该就知道如何写一个页面,并且怎样才能写好一个页面了。然后你可以自己再去找几个题目,写几个页面熟练一下。

以上为阶段一内容,用时 10 天左右。

CSS 进阶:学习 CSS 核心内容不需要很多时间,但其实 CSS 是细节非常深的一个技术。前期不要陷入其中,那么你会问如何深入学习 CSS 呢?我推荐一些很好的权威书籍,基本看这些就够了。

  • 《CSS 世界》:张鑫旭大神的书,十多年的 CSS 经验分享,必买书籍。
  • 《CSS 选择器世界》:张鑫旭大神的另一力作,深入讲解 CSS 选择器。
  • 《深入解析 CSS》:2020 年的新书,奇虎团工程师翻译,质量有保证。
  • 《CSS 揭秘》:各种 CSS 奇淫巧技,主要是来开阔视野。
  • 《CSS 权威指南》:属于 CSS 的新华字典,很全面,属于一本工具书。

阶段二:JavaScript

学习了 HTML 和 CSS,可以开始学习 JavaScript 了。这也是至关重要的阶段。JavaScript 主要包括语言基础(ECMAScript)、DOM 和 BOM 三部分,如果你是初学者,会想这到底是啥,咋还三个东西。那就开始学起来,学完你就知道啦,其实没那么难。

学习这部分,一定要从现代 JavaScript 教程学起:

现代 JavaScript 教程是 React 官方文档中与 MDN 并列推荐的 JavaScript 学习教程。 这个教程解决了现存 JavaScript 书籍最大的痛点:实时性。技术领域的书籍在实时性上一直都存在很大的问题,而这个教程却解决了这个问题。并且它为读者搭建了良好的学习路线,由浅入深,内容足够详细也足够全面,你就按着教程顺序学习就行了。此外,每节内容后,还给出了高质量的课后习题和解析。通过做题可以帮你检验自己的学习效果,并巩固新学到的知识。

教程地址zh.javascript.info/

学完这个教程,你就其实已经学完了 JavaScript。你可能还听说过 ES5/ES6/ES7/ES8……,其实你也已经学完了,而且还通过这个教程做了很多实战的小例子。教程里还将技术点与实际应用联系起来,让你知道这个知识点在实际开发中是如何使用的,它解决了什么问题。

在学现代 JavaScript 教程的同时,我推荐你买基本权威书籍,其实这些书所讲的大部分在教程里都有,不过可以相互补充取长补短,同时还可以巩固知识点,加深你对 JavaScript 的理解:

  • 《JavaScript 高级程序设计(第 3 版)》:俗称红宝书,只是这本书版本有些旧,第四版预计于 2020 年下半年出版,可以关注一下。这本书前七章讲的是语言特性,一定要掌握。如果你有其他语言的编程基础,理解起来会更快。第 8、10-14、20、21、23、24 章也要重点看,第 25 章的第一节也要看,其他没提到的章节属于非重点的扩展内容,有空就大概读一下。至于 XML 这种过时的东西就不用看了,书中有大量 API 的章节,不用死记硬背,浏览一下就行,用到再回来查。你一定要先看《现代 JavaScript 教程》再看这本红宝书,因为这里的内容在教程中都有,而且都是最新的,红宝书只是用于复习巩固。
  • 《JavaScript 权威指南》:俗称犀牛书,和《CSS 权威指南》类似,都是大而全的工具书。
  • 《ES6 标准入门》:你一定听过 ES6 或者 ES2015 吧,其实指的是一个东西,就是 2015 年发布的 ECMAScript 规范,发布的一些语言特性。这本书是阮一峰老师的书,是学习 ES6 必买书籍,当然里面也参杂了一些作者的个人理解。
  • 《深入理解 ES6》:尼古拉斯大佬的力作,必买书籍!讲解非常详细且深入。
  • 《深入理解 JavaScript 特性》:尼古拉斯大佬的最新书籍,由李松峰老师翻译,主要讲的也是 ES6 的内容。
  • 《JavaScript DOM 编程艺术》:DOM 必备书籍,本书主要讲的是 DOM 知识,还会带你通过实战深入理解相关知识,很有帮助。 《JavaScript 语言精粹》:俗称蝴蝶书,很薄的一本,里面讲的都是 JavaScript 语言最核心的部分。半天就能看一遍,可以买了反复看。
  • 《Head First JavaScript 程序设计》:这本书对于没有编程经验的新手友好,内容比较简单。

阶段二用时一个半月左右。如果你有编程经验,学起来会轻松一些。所列出的书不用全都看完,而是挑选重点,相互补充着看。对于 API 相关内容不要死记硬背,大概浏览即可,用到的时候再查,多些代码就自然记住了。

阶段三:入门前端框架

学完前端三大件,打好了大树的根基,就可以开始扩展技能树了,开始学习前端框架。前端的主流框架目前主要为 React,Vue 和 Angular。选择哪个框架呢?你可以去知乎或者其他网站搜一搜,然后根据你的个人喜好进行选择。一般是在 React 和 Vue 中选一个。React 的开发体验更类似于写原生的 JavaScript,要求你有较好的 JavaScript 基础。Vue 则引入了模版,将很多实现封装成了 API,你需要记住并调用 API 来进行开发,因为很多都是封装好的,所以学习起来较为简单,只是编程的感觉稍微弱了一些。

这两个都是非常优秀的框架,新人不必纠结于选择哪个框架,学了一个,另一个也很容易学。如果你不知道选择哪个,我推荐你先学习 React。推荐的学习路线:

  1. 阅读 React 官方文档:先学习文档中核心概念部分,然后跟着官方文档写出文档中的井字棋。然后自己写一个 Todo App。
  2. 然后学习慕课网 Dell 老师的 React16.4 快速上手React16.4 开发简书项目 课程。
  3. 还可以继续选一些百度前端技术学院里的经典题目来巩固 JavaScript 的基础知识和使用。

在这个过程中你会学到很多知识,会用到 React 的高阶知识,那么就把 React 官方文档中的高级指引,API Reference,Hooks 等部分的内容学完。还会学到 React Router,Redux 等内容。会学到从零开发一个完整项目,从项目配置到组件拆分,到项目打包和上线的完整流程,还会学到 React 框架的一些底层源码级知识。

如果你选择了 Vue 框架,学习路线也类似:阅读官方文档,写一些简单的 Demo。然后学习慕课网 Dell 老师的 Vue 2.5 入门Vue 2.5 -> 2.6 -> 3.0 开发去哪儿网 App 从零基础入门到实战项目开发 课程,中间穿插做一些百度前端技术学院的典型题目巩固 JavaScript 的基础知识。

此阶段用时一个月左右。至此你已经成功入门前端开发了,恭喜你 🎉🎉🎉

阶段一到阶段三共计用时三个月。

前端进阶

成功入门前端开发之后就要开启进阶部分了,主要是加深对各个知识的理解程度,打牢计算机领域基础知识,扩展技能树,提升项目开发和宏观理解及把控能力。前端进阶是需要终生学习的,活到老学到老。

阶段四:语言基础进阶

这个阶段就是加深对编程语言的理解,多阅读进阶书籍,有能力的推荐去阅读 ECMAScript 规范:ecma-international.org/ecma-262/

进阶必读书籍:

  • 《你不知道的 JavaScript 上/中/下卷》:必买书籍,将 JavaScript 的疑难问题,细节知识一网打尽。原版是 GitHub 上开源的电子书,英语水平高的可以去读英文原版。
  • 《JavaScript 忍者秘籍》:深入讲解 JavaScript 的核心知识点,必买书籍。
  • 《了不起的 JavaScript 工程师》:从宏观来看 JavaScript 语言,以及前端工程师所需要掌握的一些技能,推荐阅读。
  • 《JavaScript 函数式编程指南》:学习函数式编程思想
  • 《JavaScript 函数式编程》:也是一本函数式编程思想的好书
  • 《JavaScript 设计模式》:学习 JavaScript 设计模式,推荐阅读
  • 《JavaScript 设计模式与开发实践》:另一本同等分量的设计模式书籍,推荐阅读
  • 《锋利的 jQuery》:jQuery 现在已经很少有人用了,除非是很老的项目或者写小东西。不过这本书值得买,学习 jQuery 的优秀思想,还可以去学习一下它的源码,对你进阶很有帮助。

进阶选读书籍:

  • 《高性能 JavaScript》
  • 《JavaScript Web 应用开发》
  • 《深入理解 JavaScript》
  • 《JavaScript 经典实例》
  • 《JavaScript 面向对象编程指南》
  • 《JavaScript 编程精粹》

学习 TypeScript。JavaScript 是一门弱类型语言,你声明一个变量,既可以将字符串赋值给它,也可以将数字等复制给它,这在大型项目开发中很容易因为数据类型出 bug。基于此类种种原因,就出现了 TypeScript。你有了 JavaScript 的基础,学习 TypeScript 很容易,它只是一种语法糖,也就是一种另一种写 JavaScript 的方式。推荐以下书籍:

  • 《深入理解 TypeScript》
  • 《TypeScript 实战指南》
  • 《TypeScript 实战》

阶段五:框架和学习边界进阶

通过阶段三,你已经掌握了前端框架的基本使用,开发一个完整项目的流程。那么在框架和学习边界进阶阶段,你就可以:

  • 学习框架周边的生态,社区总结出来的优秀组件,以及各种好用的工具库。
  • 造一些自己的轮子,使用框架搭建自己的开源项目
  • 学习 Webpack,Gulp,Babel,ESLint 等工具的使用、思想和原理
  • 带着问题去阅读框架源码,学习性能优化
  • 养成良好的编程习惯
  • 扩展技术边界,学习 Node.js 等后端相关技能
  • ……

推荐阅读书籍

以下推荐的书籍都是比较出名的书籍,你可以根据自己的技能树,选择所需要的书籍进行阅读。并不是一字不差地整本阅读,而是在每本书中学习自己所需要的部分。很多都是非常著名的好书,有精力尽量买来学习。

Webpack 相关:

  • 《深入浅出 Webpack》
  • 《Webpack 实战:入门、进阶与调优》

React 相关:

  • 《深入 React 技术栈》
  • 《深入浅出 React 和 Redux》
  • 《Redux 实战》
  • 《React 学习手册》
  • 《React 快速上手开发》
  • 《React 设计模式与最佳实践》

Vue 相关:

  • 《Vue.js 实战》
  • 《Vue.js 开发实战》
  • 《深入浅出 Vue.js》
  • 《Vue.js 权威指南》
  • 《Vue.js 从入门到项目实战》
  • 《Vue.js 前端开发基础与项目实战》
  • 《Vue.js 项目开发实战》
  • 《Vue.js 快速入门》
  • 《Vue.js 前端开发》

Node.js 相关:

  • 《狼书卷1》
  • 《狼书卷2》
  • 《Node 学习指南》
  • 《了不起的 Node.js》
  • 《深入浅出 Node.js》
  • 《Node.js 实战》
  • 《Node.js 开发指南》
  • 《Node 即学即用》
  • 《Node 与 Express 开发》

样式和布局相关:

  • 《Bootstrap 实战》
  • 《Bootstrap 用户手册》
  • 《响应式 Web 设计:HTML5 与 CSS3 实战》

性能相关:

  • 《Web 性能权威指南》
  • 《高性能网站建设指南》

PWA 相关:

  • 《PWA 开发实战》
  • 《PWA 实战:面向下一代的 Progressive Web APP》

其他:

  • 《SVG 精髓》
  • 《深入理解 SVG》
  • 《前端架构设计》
  • 《重构:改善既有代码的设计》
  • 《同构 JavaScript 应用开发》

阶段六:计算机基础知识进阶

编程编程,万变不离其宗,那就是计算机基础知识,算法、数据结构、计算机原理、网络等内容。在这里我只推荐最经典的好书,每一本都是必读书籍。学好这些内容,大厂任你选。

数据结构和算法:

  • 《剑指offer》
  • 《程序员面试金典(第 6 版)》
  • 《编程之美》
  • 《漫画算法》
  • 《算法图解》
  • 《程序员代码面试指南》
  • 《大话数据结构》
  • 《趣学算法》
  • 《学习 JavaScript 数据结构与算法》
  • 《数据结构与算法: JavaScript 描述》
  • 《算法(第四版)》
  • 《算法导论》
  • 《算法竞赛入门经典(第二版)》
  • 《算法竞赛入门经典 训练指南》

计算机网络:

  • 《HTTP/2 基础教程》
  • 《HTTPS 权威指南》
  • 《计算机网络:自顶向下方法》
  • 《图解 HTTP》
  • 《图解 TCP/IP》
  • 《TCP/IP 详解》
  • 《UNIX 网络编程》

操作系统:

  • 《深入理解计算机系统》
  • 《现代操作系统》
  • 《UNIX 环境高级编程》
  • 《The Linux Programming Interface》

编程思想:

  • 《代码大全》

编译原理:

  • 《编译原理》

产品思想:

总结

至此,你已经完成了前端开发从入门到进阶,已然成为了一个巨佬,之后再学什么已经了如指掌。希望我的分享对你有帮助,如果你觉得有用,可以收藏本文,并分享给你有需要的朋友。让我们一起学习,共同进步!


微信扫码关注公众号「技术漫谈」,订阅更多精彩内容:

  • LeetCode 算法题解
  • JavaScript 入门到进阶
  • 前端项目从零到一实战
  • 前端学习方法路线分享
  • ……