如何从零开始入门前端开发，分享我的学习方法！

如何从零开始入门前端开发，分享我的学习方法！我时常会看见许多老师在自学后端的这时候较为迷惘，不知道究竟如果以什么样的自学走线来高阶和高阶后端应用领域。每天碰到这种难题我也会撷取呵呵自己的自学实战经验，但发现这是两个问得十分多的共通点难题。作为合作开发人员，的确非难多次重复乳白色的劳动者，因此我就深入细致归纳撷取呵呵我的后端自学路线，责任编辑为「后端高阶」部分，期望对你能有协助。

我还面世了「程式设计每星期一题

如何从零开始入门前端开发，分享我的学习方法！

序言

后端自学是两个螺旋形下降的操作过程，既要反反复复地看电视，也要到这时候展开两栖作战。只看电视，看了就会忘，所以要将看电视和写标识符并重。如果你深入细致学，高阶后端不然3～6个月以内就能了。后我还得出了后端高阶走线，协助你提高后端专业技能水准。我把后端高阶和后端高阶总共分成五个期，并对适当期所须要的大体的自学时间展开了标示。责任编辑为「后端高阶」，仅包括前四个期。想看后端高阶走线的请在高阶」。

后端高阶

高阶后端合作开发主要须要自学 HTML，CSS 和 JavaScript 三大件。后自学后端非主流架构的采用，并如前所述已学文本合作开发两个小工程项目展开两栖作战。当你把这些自学并认知有条理以后，也即使或者说地高阶后端了。

期一：HTML + CSS

后端对于高阶者十分亲善，因为开始自学的这时候你只须要两个应用程序，所推荐 Chrome。HTML 和 CSS 能间接运转在应用程序中，应用程序就是它的运转自然环境。你也能采用GUI，所推荐 VSCode，这是后端合作开发采用最少的GUI。HTML (HyperText Markup Language) 和 CSS (Cascading Style Sheets) 其实并不是程式设计语言。HTML 中文名叫做超文本标记语言，其实就是一些标签。CSS 中文名为层叠样式表，也就是一些样式的配置。首先自学 HTML，十分简单。HTML 有十分多的标签，刚高阶的这时候不要沉浸在记住这些标签中，你也记不住。你只须要整体浏览一遍，知道有哪些标签，各自的作用是什么，整体有两个印象就行了。我所推荐跟着MDN 的 HTML 自学路径[1] 过一遍就行。我自学 HTML 的这时候还看过两本书，你感兴趣也能看呵呵，这是这方面很好的书了：《Head First HTML and CSS》《HTML5 与 CSS3 基础教程》看完后能自我检测呵呵，例如常用的标签有哪些，<!DOCTYPE>的作用是什么，哪些标签是行内标签，哪些是块级标签，HTML5 有什么新特性等。这里不要花太多时间，大体过呵呵即可，不用都记住，后有须要再回来查就行。接下来自学 CSS，间接所推荐目前最适合 CSS 高阶的书：

《精通 CSS（第三版）》

在高阶期，不须要将整本书一字不差地看完，你只须要抓住几块核心文本，例如选择器、层叠、继承、盒模型、Flex 页面布局和网格等。这些文本快速过一遍就行，太细节的文本不用记，后须要了再回来查。最近我又发现了一本 2020 年的新书，《深入解析 CSS》，奇虎团工程师翻译，质量有保证。这本书讲得也十分详细，你也能买这本不买上面那本。有了这些基础知识，你就能展开两栖作战了。这里所推荐百度后端技术学院平台，他们这都是开源免费的前端题目，如果是为了培养后端人才，让自己能够招到更合适的人而创建的。他们的课开了四年：IFE 2015: https://github.com/baidu-ife/ifeIFE 2016: http://ife.baidu.com/2016/static/index.htmlIFE 2017: http://ife.baidu.com/2017IFE 2018: http://ife.baidu.com/现在打开 IFE2018 中的第五题[2] 开始写静态页面吧（只是举例，具体能自己找题目做）。然后你会发现，你根本写不出来。这是很正常的，那你就去看别人的标识符，看一点你就开窍了，就知道怎么写了。忘掉的属性就回去查 MDN 或者查我所推荐的书，如此反反复复你就记住了。写完两个页面后别急着往下写。你写的第两个页面的确有许多难题，例如属性采用错误，标识符缩进不规范等难题。这这时候你如果找两个标识符规范，例如百度后端标识符规范[3]，根据规范重写你的标识符。这个规范我只是举两个例子，自己上网搜呵呵，好的大公司都有自己的规范，这个不是规定死的，风格统一并且可读性强即可。重写标识符后，你再去看看别人提交的标识符，这个页面是怎么写的，如果身边有技术好的后端，能让他帮你指点呵呵。这这时候你如果就知道怎样写两个页面，并且什么样才能写好两个页面了。然后你能自己再去找几个题目，写几个页面熟练呵呵。以上为期一文本，用时 10~20 天以内。CSS 高阶：自学 CSS 核心文本不须要许多时间，但其实 CSS 是细节十分深的两个技术。前期不要陷入其中，那么你会问怎样深入自学 CSS 呢？我所推荐一些很好的权威书籍，基本看这些就够了。《CSS 世界》：张鑫旭大神的书，十多年的 CSS 实战经验撷取，高阶文本。《CSS 选择器世界》：张鑫旭大神的另一力作，深入讲解 CSS 选择器。《CSS 揭秘》：各种 CSS 奇淫巧技，主要是来开阔视野。《CSS 权威指南》：属于 CSS 的新华字典，很全面，属于一本工具书。

期二：JavaScript

自学了 HTML 和 CSS，能开始自学 JavaScript 了。这也是至关重要的期。JavaScript 主要包括语言基础（ECMAScript）、DOM 和 BOM 三部分，如果你是初学者，会想这究竟是啥，咋还四个东西。那就开始学起来，学完你就知道啦，其实没那么难。自学这部分，一定要从现代 JavaScript 教程学起：现代 JavaScript 教程是 React 官方文档中与 MDN 并列所推荐的 JavaScript 自学教程。这个教程解决了现存 JavaScript 书籍最大的痛点：实时性。技术应用领域的书籍在实时性上一直都存在很大的难题，而这个教程却解决了这个难题。并且它为读者搭建了良好的自学走线，图文搭配，由浅入深，文本足够详细也足够全面，你就按着教程顺序学习就行了。此外，每节文本后，还得出了高质量的课后习题和解析。通过做题能帮你检验自己的自学效果，并巩固新学到的知识。教程地址：https://zh.javascript.info/学完这个教程，你就其实已经学完了 JavaScript。你可能还听说过 ES5/ES6/ES7/ES8……，其实你也已经学完了，而且还通过这个教程做了许多两栖作战的小例子。教程里还将技术点与实际应用联系起来，让你知道这个知识点在实际合作开发中是怎样采用的，它解决了什么难题。在学现代 JavaScript 教程的同时，我所推荐你买几本权威书籍，其中红宝书为必看电视籍。其实这些书所讲的大部分在教程里都有，不过能相互补充取长补短，同时还能巩固知识点，加深你对 JavaScript 的认知：《JavaScript 高级程序设计(第 4 版)》：俗称红宝书，这本书 1~11 章讲的是语言特性，一定要掌握。如果你有其他语言的程式设计基础，认知起来会更快。第 12、14-17 和 23-26 章是重点文本也要重点看，第 13、19 和 21 章是次重点文本，尽量看呵呵。第 28 章是最佳实践，能在看完前面这些部分来自学呵呵怎样写出更好的标识符。第 18 章 Canvas，第 20 章 API，第 22 章 XML 和第 27 章工作者线程，能在学有余力或者用到的这时候看呵呵，不是初期重点文本。书中有大量 API 的章节，不用死记硬背，浏览呵呵就行，用到再回来查。所推荐先看《现代 JavaScript 教程》再看这本红宝书，或者搭配着看。因为这里的文本在教程中都有，而且都是最新的，红宝书能用于复习巩固。红宝书对新手不亲善，这是因为其章节编排并非由浅入深，让初学者抓不住重点，什么都想学，什么都记不住，挫败感强。《JavaScript 权威指南（第七版）》：俗称犀牛书，第六版的犀牛书是大而全的工具书，但是第七版做了大幅更新，跟进到了 ES2020，增添了 Node.js 的相关文本，还删掉了许多过时的 JS 特性相关文本。现在能说是十分值得购买阅读的一本书了。《ES6 标准高阶》：你一定听过 ES6 或者 ES2015 吧，其实指的是两个东西，就是 2015 年发布的 ECMAScript 规范，发布的一些语言特性。这本书是阮一峰老师的书，是自学 ES6 必买书籍，当然里面也参杂了一些作者的个人认知。《深入认知 ES6》：尼古拉斯大佬的力作，必买书籍！讲解十分详细且深入。《深入认知 JavaScript 特性》：尼古拉斯大佬的最新书籍，由李松峰老师翻译，主要讲的也是 ES6 的文本。《JavaScript DOM 程式设计艺术》：DOM 自学书籍，本书主要讲的是 DOM 知识，还会带你通过两栖作战深入认知相关知识。以前大家会很所推荐这本书，但是现在我看过后觉得，你看完其他书能买本浏览下。《JavaScript 语言精粹》：俗称蝴蝶书，很薄的一本，里面讲的都是 JavaScript 语言最核心的部分。半天就能看一遍，能买了反反复复看，只是版本有些老。《Head First JavaScript 程序设计》：这本书对于没有程式设计实战经验的新手亲善，文本较为简单。期二用时 1~3 个月以内，没有程式设计实战经验的老师可能须要更长。如果你有程式设计实战经验，学起来会轻松一些。所列出的书不用全都看完，而是挑选重点，相互补充着看。对于 API 相关文本不要死记硬背，大概浏览即可，用到的这时候再查，多些标识符就自然记住了。这些书我都有，也是挑着看，补充着学。

期三：高阶后端架构

学完后端三大件，打好了大树的根基，就能开始扩展专业技能树了，开始自学后端架构。后端的非主流架构目前主要为 React，Vue 和 Angular。选择哪个架构呢？你能去知乎或者其他网站搜一搜，然后根据你的个人喜好展开选择。一般是在 React 和 Vue 中选两个。React 的合作开发体验更类似于写原生的 JavaScript，要求你有较好的 JavaScript 基础。Vue 则引入了模版，将许多实现封装成了 API，你须要记住并调用 API 来展开合作开发，因为许多都是封装好的，所以自学起来较为简单，只是程式设计的感觉稍微弱了一些。这两个都是十分优秀的架构，新人不必纠结于选择哪个架构，学了两个，另两个也很容易学。如果你不知道选择哪个，我所推荐你先自学 React。Vue 相对来讲偏向通过模板的方式也就是调用 API 来写页面（当然现在 Vue 3.0 也正在跟进 Vue 的 JSX 写法，类似于 React），而 React 则是更偏向于通过写原生 JS 的那种方式写页面，使得逻辑和页面分离开来。我所推荐的自学走线如下：阅读 React 官方文档：先自学文档中核心概念部分，然后跟着官方文档写出文档中的井字棋。然后自己写两个 Todo App。然后自学慕课网 Dell 老师的React16.4 快速上手[4] 和 React16.4 合作开发简书工程项目[5] 课程。还能继续选一些百度后端技术学院里的经典题目来巩固 JavaScript 的基础知识和采用。在这个操作过程中你会学到许多知识，会用到 React 的高阶知识，那么就把 React 官方文档中的高级指引，API Reference，Hooks 等部分的文本学完。还会学到 React Router，Redux 等文本。会学到从零合作开发两个完整工程项目，从工程项目配置到组件拆分，到工程项目打包和上线的完整流程，还会学到 React 架构的一些底层源码级知识。如果你选择了 Vue 架构，自学走线也类似：阅读官方文档，写一些简单的 Demo。然后自学慕课网 Dell 老师的Vue 2.5 高阶[6] 和 Vue 2.5 -> 2.6 -> 3.0 合作开发去哪儿网 App 从零基础高阶到两栖作战工程项目合作开发[7] 课程，中间穿插做一些百度后端技术学院的典型题目巩固 JavaScript 的基础知识。此期用时 1~2 个月以内。至此你已经成功高阶后端合作开发了，恭喜你 🎉🎉🎉期一到期三共计用时 3~6 个月以内。以上都学差不多了，你就能找一些算法题，例如 LeetCode，找一些自己感兴趣的工程项目，找一些大厂面试题，学起来做起来，不断巩固自己的知识掌握程度。接下来你就能开始你的后端高阶之路，在高阶」后端高阶走线。如果你身边也有想要或者正在自学后端的朋友，欢迎你将责任编辑撷取给他，他也会感谢你的 🤣我会撷取各种计算机应用领域息填写「高阶」：

如何从零开始入门前端开发，分享我的学习方法！