前端学习路线与资料

在 B 站直播了三十多天，有个兄弟询问我前端学习资料，非常开心能帮助到别人~~

下面来整理一下

1、大神推荐的学习路线

首先是前端学习路线，我在参加字节前端青训营的时候在讲 《Web标准与前端开发》的时候，大牛老师李松峰（ 红宝书和犀牛书的译者 ）推荐了一个学习路线：

• 前端学习路线：https://roadmap.sh/frontend

其次是值得我们敬佩的程序员、B 站up主 技术胖 整理的一份前端学习路线 ，这里给出 技术胖 的博客、b站账号和整理的前端学习路线：

• 个人网站：https://jspang.com/
• b站：https://space.bilibili.com/165659472
• 前端学习路线：https://www.bilibili.com/video/BV1ub4y1h7ZY

2、个人前端学习路线总结

我是暑假开始全面学习前端的，正经学习前端之前我可能前端方面只知道 html 和 css，然后还有学校学的计算机的一些基础知识；但是没关系，只要坚持学，大厂在向我们招手~~

学习的过程中遇到不懂的怎么办？用搜索引擎搜一下就好了~

2.1 前端学习的工具软件

在学习之前肯定必备的软件会需要，下面的是必备软件：

• 浏览器：Chrome、Firefox、Edge，选择 Chorme 是最好的；下载链接
• 代码编辑器：VScode ；下载链接
• node.js；下载链接

其中 VScode 是用来编辑代码的工具，浏览器和 node.js 是用来运行代码的工具；

在后面的学习中你可能还会使用 git、markman、postman 等软件，需要用时学习就好了；

2.2 前端基础知识

然后是前端基础知识，学习前端的都知道 HTML、CSS、JavaScript 是前端的基石，特别是 JavaScript 是前端的看家必备（虽然后面会进阶到 TypeScript）；

下面讲一下这三个的学习：

• HTML

  HTML 大部分都是一些标签的学习，前期可以在一些教程网站（菜鸟教程、w3cschool ）大概过一遍常用的标签；当然要知道这里讲的 HTML 指的是 HTML5；

• CSS

  CSS 主要的是学习一些属性，学习策略也是和 HTML 一样在教程网站上过一遍常用属性就行了；

  要注意的是前期学习 HTML 和 CSS 不用太过于深入，花几天时间大概了解一下就好了，后面肯定还会不断的回来重复查找标签和属性，进行再次学习的~

• JavaScript

  到 JavaScript 了，强烈推荐看 阮一峰 老师的教程，然后结合 MDN 和 经典 JavaScript 书籍进行查缺补漏~

  • 阮一峰 ES5：https://wangdoc.com/javascript
  • 阮一峰 ES6：https://es6.ruanyifeng.com/
  • MDN ：https://developer.mozilla.org/zh-CN/
  • 《JavaScript 语言精粹》
  • 《JavaScript 高级程序设计》-- 俗称红宝书
  • 《JavaScript权威指南》

学习中你会发现 MDN 非常好用，一旦在 html、css、javascript 上有什么不清楚或不记得了，直接上 MDN 搜索可以了，上面的内容写的又好又详细；

在学习中过程记笔记、写总结博文是一个非常好的习惯~，你值得拥有；

2.3 前端框架

在前端基础知识大致过了一遍之后，就可以学前端框架了；但开始学习前端框架并不意味着 html、css、javascript 的东西就不用学了，它们也是要不断深入继续学习的；

上面的内容和接下来的内容中有前端的各种名词，也许你并不理解，但没关系，百度一下就好了；这里也有一份我在学习前端过程中遇到各种名词术语的总结，可以作为休闲材料读一读：

• 前端基础名词和知识：https://blog.csdn.net/txt666999999/article/details/120371123

现在流行前端框架有 vue、react、angular，但主要还是 vue 和 react；学习框架我认为直接看官方文档最好，但是也可以结合一些成套的视频教程来学习；

先着重选择其中一个框架进行学习就行了，如下：

• Vue 文档：https://v3.vuejs.org/

  技术胖视频：

  注：现在学习 Vue 肯定是学习最新的 Vue3了；

• React 文档：https://react.docschina.org/

  技术胖视频：

  注：React 也是应该学习最新的 React 的 函数组件 和 Hook ；

在学习框架的过程中不得不提的是小程序，现在各个大厂的软件基本上都有小程序（微信、支付宝、抖音），如果你有需求的话，可以学习一下，做一个小 demo；

有时间的话是强烈推荐在学习框架之前找个视频学习一下微信小程序的开发的，原因的微信的地位在那里，并且可以快速做一个小程序鼓励一下自己的学习；

2.4 前端工程化

大概学完前端框架的基础内容，就需要了解前端工程化的一些知识了；

当然还是要提醒学习上面的几个模块的过程中，它们之间不是割裂的，它们是并行学习的，只不过是前面的内容需要先大概学习一下；

在这个过程中，可以找教程做一个项目，边做项目边学习，项目教程哪里找呢？如下：

• 技术胖react博客项目：https://jspang.com/detailed?id=52

• B站搜

• 上 GitHub 、Gitee 搜，这个时候你会需要学习 git 的知识了，看下面的内容；

前端工程化你需要了解或学习以下的内容：

• 协作开发的版本控制工具：git（这里推荐一个互动教程https://learngitbranching.js.org/，当然实操还是最重要的，多用多练就好了）

• 包管理工具：npm、yarn

• 打包工具：webpack、vite、roolup

• 转译工具：babel

• 代码检测工具：eslint

• css预编译语言：sass、less、stylus

  …

2.5 后端基础

作为一个现代的前端程序员，对后端肯定要有一定的认识的，在这个阶段，作为前端开发，你可以了解和学习以下内容：

• JavaScript运行环境（和chrome一样都是基于 V8 引擎实现的）：node.js
• web框架：koa3、express
• 基础的 SQL 语句和 数据库(mysql、mongoDB等)学习；

2.6 计算机基础知识

学习前端要不要计算机基础（数据结构、计算机网络、操作系统、计算机组成）呢？我觉得并不需要很多基础，但是有一点点肯定是更好的，这样有利于学习理解和效率；

下面来说具有哪些计算机基础知识：

• 计算机网络

  重点在 HTTP 协议上，其它内容的话，可以学习一下计算机网络的层次划分（IOS/OSI、TCP/IP）;

• 数据结构

  数据结构的话对于前端来说不是太必须，但是如果想进字节、腾讯、阿里 … 等这些大厂是必不可少的；有基础的人可以坚持刷 LeetCode ；

  刚开始刷 leetcode 可以看一下我总结的 leetcode《初级算法》系列题解啊

  • LeetCode《初级算法》-- JavaScript：https://juejin.cn/post/7006692002125316103

对于这些基础知识来说，学习的时候更好的是选择一本教材，这样能体系的学习；

2.7 前端学习的其它补充

前面讲的是系统学习路线，但是学习是有方法和途径的，好的方法促进我们的学习，下面给出一些我的体验和经历：

• 多记笔记多总结；推荐一款笔记软件：Typora
• 将自己对知识的理解归纳整理成文章，并把它发布到技术社区网站或博客；
  • 前端社区：掘金https://juejin.cn/
  • 老牌博客：CSDN
  • 全球最大同性交友网站：GitHub（或者国内的 Gitee）
  • B站
• 对于在校生，推荐你参加 字节前端青训营计划 和 阿里前端练习生计划
  • 字节前端青训营的开营信息你可以在以下途径知道最新消息
    • 网站：https://youthcamp.bytedance.com/
    • 微信公众号：字节前端 ByteFE
    • 掘金上也会有相关消息的：https://juejin.cn/user/4098589725834317
  • 阿里前端练习生的开营信息你可以在以下途径知道最新消息
    • 微信公众号：Alibaba F2E

本文写于 2021/11/7，EDG夺冠之夜（寝室里的走廊回声告诉我的）；