前端开发从入门到进阶完全指南，不用再迷茫前端要怎么学啦！

不念不忘少年蓝@ 2022-12-15 14:07 126阅读 0赞

我经常会看到很多同学在学习前端的时候比较迷茫，不知道到底应该以怎样的学习路线来入门和进阶前端领域。每次遇到这种问题我也会分享一下自己的学习经验，但是发现这是一个问得非常多的一个共性问题。  
作为程序员，肯定是不能容忍重复无味的劳动的，因此我就系统地总结分享一下我的前端学习路线，希望对你能够有所帮助。

# 前言 #

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

# 前端入门 #

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

## 阶段一：HTML + CSS ##

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

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

首先学习 HTML，非常简单。HTML 有非常多的标签，刚入门的时候不要沉浸在记住这些标签中，你也记不住。你只需要整体浏览一遍，知道有哪些标签，各自的作用是什么，整体有一个印象就行了。

学习css过程中千万不要剥离HTML学习。当你什么时候理解了html的重要性（从页面开发角度而言，它可以视为是后续良好css和js编码得以实施的基础，相当于程序中的数据结构，设计好了可以让你事半功倍），你才可以称得上是一个合格的页面开发对于新人，我建议除了几个关键概念，如布局、盒模型、单位等等，都不应该花大量去扣细节，甚至背书记忆，浏览性学习知道有这个东西就行，在实际应用时再去加深记忆。

## 阶段二：JavaScript ##

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

JavaScript这几年变化很快，但是对于初学者来说要摒弃浮躁的气氛，静下心来打好基础。记住：自己是初学者，玩的东西就是：JavaScript和jQuery，工具就用一个编辑器和一个浏览器，这些就够了，别的不要碰

## 阶段三：入门前端框架 ##

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

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

# 前端进阶 #

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

## 阶段四：语言基础进阶 ##

这个阶段就是加深对编程语言的理解，多阅读进阶书籍.

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

## 阶段五：框架和学习边界进阶 ##

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

学习框架周边的生态，社区总结出来的优秀组件，以及各种好用的工具库。  
造一些自己的轮子，使用框架搭建自己的开源项目  
学习 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 应用开发》

## 阶段六：计算机基础知识进阶 ##

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