从零开始学习前端开发：完整的前端自学指南

文章首发于个人博客

前言

这一篇文章我一直在思考该不该写，因为每一个人的学习方式都不一样，这篇文章提到的内容是我学习前端开发的最佳方法，可能并不适用于其他人，所以就随心写一写自己的前端学习之旅吧。

关于我：熟练的 Vue、React 的 API 使用者以及会写一点后端的前端页面仔。

希望这篇文章对前端感兴趣的同学有用，它并不是一篇前端进阶的文章，更适合小白独立学习前端技术的指南。

TL;RD

如果不想读这么长的文章，可以直接读这一个小节。

从零开始学习 HTML/CSS 和 JavaScript。

关于 JS 可以看书《JS 权威指南》、《JS 高级程序设计》、《JS 忍者秘籍》三本书里面选一本，然后边看边实践即可。

然后就是学习 Css，可以先简单的菜鸟教程 Css，熟悉了一些语法之后，推荐去看张鑫旭大佬的《Css 世界》这本书，这本书需要经常翻。

如果学习过程觉得比较枯燥，也可以同时看看试试这个仓库50 天每天一个小项目，可以通过 Js + Css 就实现一个小东西，挺不错的，不管学什么东西都需要有积极反馈哦。

上面完成之后可以看看 Vue/React，Vue/React 可以看看官方文档，写的挺不错的，如果看文档比较困难的话，可以去中国 Bilibili 大学搜 Vue/React 视频，一大把，通过用 Vue/React 写一个简单的小东西，在学习过程中有什么不懂一定要去看 Vue/React 文档，不懂的时候是进步最快的时候。

在这个过程中，推荐每天看看30s code，了解一个常用的数组、对象、Date、String、Number 的 API，也可以在项目中使用到这些片段。

同时如果你对 Vue、React 项目比较感兴趣时，也可以去看别人写得好的开源库。

我就列举几个仓库，记得常去看。

Vue:

1. vue-element-admin
2. todomvc
3. awesome-vue

React:

1. todomvc
2. awesome-react

这个时候，写完一个小东西后，可以选择去看书《你不知道的 JS》上中下，巩固一下 JS 基础知识以及看相对应的 CSS 世界。

Ts 可以看看 TS 官方文档以及每一个版本的变更日志，如果想加深了解可以看相对应的知识点，尝试做一做 TypeScript Challenges 即可。

此外，我也可推荐你可以刷一刷算法题，锻炼逻辑思维能力，可以刷一刷 LeetCode Hot 100 题，这些刚好也是面试常考的题目。

后面的话可以去看看 Next.js(React 的 ssr)/Nuxt.js(Vue 的 ssr)项目，这里就靠自己自由发挥了。

我的前端学习之旅

与安卓的爱恨情仇

在学前端之前，我有半年的安卓经验，也学过 flutter、kotlin 等相关知识, 那个时候我为了实现 qq 界面每天在图书馆待到很晚，写出来之后很有成就感，当时想着能不能实现一个左滑删除的功能，在那之后的事情记不清楚了，但是我印象中的是安卓我学不明白，对于它我一无所知，我不知道怎么学习, 各种自定义视图等操作要我望而却步, 简称对于学习曲线比较陡, 可能是我的学习方法不对, 也渐渐的对安卓失去了兴趣.

跟前端来一场 jsp 的邂逅

前端是一个缘分，当时在软件协会学长学姐布置了一个关于登录注册的 jsp 任务，我当时觉得用一个很简陋的登录注册实现了功能，但是我看到别人的登录注册那么好看，我就开始了美化之旅，当然现在的我再来看之前的页面、代码，那绝对是丑不堪言，不过在那个时候已经是我的巅峰了，就因为这样子，我走上了前端之旅，而这个时间是在 2018 年, 因为 jsp 跟前端来了一场邂逅~。

那个时候 vue 很火，（那个时候说 vue3 要出来了，结果到现在才出来），所以我没有什么 js、css 基础，就直接上手的框架(Vue)，然后基本上是用到啥搜索啥。

跌跌撞撞的前段之旅

学习 Vue 当时看的是黑马程序员、尚硅谷 Vue、JavaScript 的课, 但是看完之后的感觉就是：懂了，没有完全懂。

现在如果要我去学习一个东西，我不会选择看视频，对我来说有两个缺点：

1. 即使全部看完之后，自己去写一个东西的时候完全无法下手就很苦恼，完全没有成就感。
2. 挺浪费时间的，一系列的课程就几十个小时，真的理解和消化到实际运用这个周期很长。

但是那时的我并不懂，如果是前端小白不知道从哪里下手的时候，可以尝试一下看看相关的视频，至少对新的东西有一个整体的把握和了解。

最终我回到了文档，开始啃 MDN、Vue 的官方文档，那时候我发现文档比看视频进度快很多，而且要容易吸收和理解。

加上一看到知识点我就直接直接动手实践，有什么问题就依靠强大的谷歌，它总能解决我的问题，我的问题解决能力就是在这里得到了锻炼。

如果你有一定的编码能力之后，我比较推荐你去看看别人的代码。组件可以这么抽象、类型可以这么用、数组 API 有这么多。

我比较喜欢学习的时候去看看别人写的代码，开阔自己的视野。

有自己的产品嘛?

如果你问我，我有什么产品，第一时间会说博客，当然我们也可以选择拿得出手的其他产品。

博客是我一直在用心去写的一个网站，一个简单的博客项目形成了我的命名规范、目录规范以及相关的开发规范。

你有自己的产品嘛，它是你的名片，它不一定要是博客，它也可以是论坛、商城等其他项目，但是它一定是你可以自信满满可以分享出来的项目。

输出

有一点是我没做好的，每天花了很多时间就感觉啥也没学，直到现在才发现，我那时只有输入，没有输出也没有自己的反思和复盘。

之前就停留在"抄"笔记与实践这一层，这样子看起来比较快，但是少了最重要的一步，把"抄"的笔记用自己的话语写成文章，结合自己的所思所想去表达出来。

很多东西看似自己懂了，但如果要写成文章或者说跟别人去表达，还是不能清晰准确的表达，我最近在看一本书，也在强调，知识的输入和输出，这一点真的很重要。

如果要学一个什么知识点，就带着我能把这个知识点跟别人说清楚嘛？

与开源的碰撞

在想要不要写这个章节，因为自己开源经历并不是很多，只有几个 commit，不过我觉得大家有时间可以去尝试一下参与开源项目，就从我个人说起吧。

上一次做贡献已经是 20 年的事情了

在 20 年的时候，当时有两个月时间的暑假，然后在长沙准备简历就找了一份 React 相关的工具，进去之后发现使用 Antd3 搭建的后台管理系统，有很多很多相同的表格。

我当时就无意之间看到了一个 Antd 的一个子仓库：Pro-Table，现在已经改名成 pro-components 了，当时这个仓库只兼容 Antd4，所以我就在想，能不能自己"抄一抄"它的代码，向下兼容 Antd3 在公司内部使用呢？

所以就开始研究这个仓库之旅，当时也是直接读源码啥的，后面自己在研究的时候发现了几个 bug，就提了 issue，作者(chenshuaishuai)也是很积极的说，可以来一个 Pr？

提交完 Pr 会采用之后，很有成就感，我写的代码被合并了！就开始在 issue 里面找我可以实现的功能和 bug，然后后面也是成功的提交了几个 pr。

为什么要参与开源社区建设呢?

1. 一个好的仓库有好的规范和代码风格, 光是看他们代码, 才发现原来 React 可以这么写, 原来 Ts 类型可以这么用, 直到现在我一直都保持着多看看别人仓库代码的习惯, 我们总会在里面学到一些东西.

2. pr 的提交远不止写两个 commit 那么简单, 涉及到多人合作, 如何快速和别人说清楚, 当前 Pr 做了啥, 要做啥, 怎么做的, 这些都是代码之外的软实力, 也是需要好好提升的.

3. pr 需要涉及到前期讨论、代码实现、单测和文档编写, 这些都是我们要去完善的, 我当时懒并没有写文档，写代码只是其中的一环.

4. 提高自己的影响力, 在面试或者经历都是浓墨重彩的一笔, 后面校招很大一部分机会就是因为这几次的 pr.

怎么样参与到开源社区呢?

我没有好的办法, 不过我推荐你可以去看看自己比较熟悉 UI 组件、功能包, 我们在使用的时候可能会有 bug, 我们能不能看源码去修复他们呢? 这不贡献就来了吗?

实在不行, 可以看看自己对那个仓库感兴趣, 直接找 issue, 看看自己可以修复哪一个, 动手修复, 这不贡献就来了吗?

学习资源

最后我就列一下资料把，希望对大家有用，学习不是三分钟热度哦，需要不断持续的学习、输出和反思。

JavaScript

然后之后可以先看看 Vue 的东西。

1. 看书《JavaScript 权威指南》、《JavaScript 高级程序设计》、《JavaScript 忍者秘笈》三选一
2. Mdn 字典
3. 现代 JavaScript 教程
4. 30s code：碎片化时间可以学习的片段
5. 常见的 JavaScript 小问题
6. 关于 Js 运行机制的解释

Css

1. 看书：《Css 权威指南》、《Css 世界》二选一
2. 张鑫旭大佬的博客
3. Css Tricks

typescript

1. TypeScript Challenges 简称 Ts 类型体操
2. TypeScript 官方手册
3. TypeScript Release Notes，主要说了每一个版本 Ts 的功能变更
4. TypeScript Deep Dive

Vue

1. Vue 官方文档
2. Vue Use
3. awesome-vue

Vue 我好久没用了，推荐在 awesome-vue 中找好的学习资源和代码仓库

React

1. React 文档 Beta 版
2. kentcdodds 写了很多关于 React 的文章
3. React + TypeScript 指南
4. Dan 的博客都是精品
5. awesome-react

写在最后

不管学什么东西，都需要时间，每天坚持学一点点，量变引起质变，一起努力，共勉。