关于前端:从零开始学习前端开发完整的前端自学指南

文章首发于集体博客

前言

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

对于我：纯熟的 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

写在最初

不论学什么货色，都须要工夫，每天保持学一点点，质变引起量变，一起致力，共勉。