前端开发初级成长计划 v1 - 概述

1. 欢迎

通过《前端开发初级成长计划 v1》，你将获得 HTML，CSS 和 JavaScript 的代码编写经验，学习如何通过 Git 命令来保存你的代码，以及使用 Node.js 为你的网站提供服务。

以下是本计划所涉及的内容大纲：

1. 概述
2. HTML
3. CSS
4. HTML和CSS实战
5. JavaScript
6. HTML,CSS和JavaScript实战
7. Ajax
8. 使用第三方库
9. Git和Bash
10. Node.js
11. 部署App

作为《前端开发初级成长计划 v1》的开始篇章，首先介绍成为 Web 开发人员涉及的一些基础知识。

让我们开始。

2. 我们将学习什么

总的来说，我们将学习创建一个网站所需要的基础知识。

2.1 掌握术语

学习编程中首先碰到的困难可能是你需要去理解编程开发中所使用的术语。

本计划主要是面向 Web 前端开发，所以我们确实需要知道一些单词说的是什么意思。

比如 超链接，级联样式表，函数，作用域等等。

但是有些术语在学习初阶可以暂时忽略，比如 Monad。

重点是我们将学习几种语言。

需要注意的是在创建网站的过程中所使用的的语言并不一定是编程语言，它可能只是一门计算机语言，比如我们的 HTML 和 CSS。

我们在后面肯定会学习这俩家伙，它们通常被称为标记语言和样式语言。

2.2 创建一个网站的过程

我们将使用盖房子这个比喻来探讨和阐述创建一个网站的过程。

这其中引入了创建网站所涉及的三种语言以及它们各自的作用。

2.2.1 搭建

要建造房子，你需要使用到工具（比如文本编辑器，浏览器，终端）。

有了工具，我们需要一些材料来建造房子，比如长方形的方砖和长条钢筋，我们需要把这些东西放在一起，构建出房子结构。

方砖，钢筋就是我们要学的 HTML（超文本标记语言）。

HTML将被用于搭建我们整个房子基础结构。

只通过方砖，钢筋构建成的房子看起来会非常简陋，因为没有颜色，也没有任何的装饰品。

也就是说只使用了 HTML 语言的网站看起来并不好看。

2.2.2 装修

为了让房子看起来好看些，我们需要设计一个装修方案，这个装修方案就是一些规则，比如：这块方砖放这里，墙壁里面是淡蓝色的，窗户应该安装在哪个位置，这里应该摆放一个花瓶。

装修方案的规则还涉及到判断，比如如果这个位置放不下一块 4 乘以 8 的方砖，那么就改为 2 乘以 4 的。

这个设计方案就是我们网站中的 CSS（层叠样式表）。

CSS 就是一系列的规则，用于定义 HTML 元素在符合某些条件下使用对应的样式。

比如，我们可以通过 CSS 把文章中的某一句话设置为蓝色。

2.2.3 智能家居

现在，我们有了一个建造合理且外观漂亮的房子了。

看起来还不错，但为了让房子住起来更加地舒适，我们需要在房子中安装一些工具。

比如一套智能家居设备。

当我们进门时，灯自动打开，空调自动开启降温，厨房自动开始做饭。

安装这些工具实际上就是我们给这个房子增加了行为，这就是 JavaScript。

和智能家居一样，对于我们的网页来说，JavaScript 并不是必须的。

有些网页根本不需要 JavaScript，因为这些网页只需要显示内容而不需要真正的交互。

这里需要提到一个 HTML 的内容，就是页面的跳转，我们只需要使用链接，这是 HTML 的内容，并不需要 JavaScript。

2.2.4 网购和外卖

好了，现在我们可以住在有着智能家居的房子中了。

此时我们可以想象一个我们经常会进行的行为：网购或者订外卖。

现在外面下着大雨，此刻又很需要一杯咖啡来续命。

此时，我们可以联系外面的咖啡店，让他们来帮我们制作一杯，然后送过来。

这里的咖啡店就类似我们的服务器。

一家咖啡店可以为很多不同的客户提供服务，只要咖啡店按照客户的要求 （请求） 把咖啡制作好，然后根据客户的地址，将其送到各个客户手中就可以了 （响应） 。

另外，我们知道，现实生活中有许多不同品牌的咖啡店，比如星巴克和瑞幸。

还有全家这种便利店也能买咖啡。

不同的咖啡店品牌，就好比各种各样的用于编写服务器程序的语言，比如 Java，Python 和 Go 等。

这里要知道的是，JavaScript 也可以用于构建我们的后端，也就是我们的 Node.js。

毫无疑问的是，Node.js 已经是我们 Web 前端开发中非常重要的组成部分了。

2.2.5 房子建好了

HTML 是房子的结构。它包含了所有文本，以及各种相关的静态资源（比如图片音视频等）。

CSS 是房子建成后的装修设计方案。它包含了样式规则的所有内容，比如规定大小，颜色和字体等。

HTML 和 CSS 描述了内容以及应用于内容的样式规则。

JavaScript 是房子的智能家居，并非是必须的，有了它我们就可以让房子有一些预定义的行为，甚至可以让 HTML 和 CSS 对于用户行为所作出的反应进行改变。

外面的咖啡店就好像我们产品中的后端服务器。

我们对咖啡店提出我们的要求，咖啡店将响应我们的要求，把咖啡按要求做好送过来。

现在，房子建好了。

但是别忘了，建房子首先需要有工具。

3. 工具

3.1 概述

目前，我使用的 macOS 系统，但是我给大家所建议的工具几乎都具有跨平台的特性，也就是说在其他如 Windows 系统或者 Linux 上也是合适的。

每个开发人员都对他们自身所使用的的工具集都具有很强的个人见解，所以如果你去询问别人的意见，通常他们会告诉你由于某些原因所以他们使用了这个工具，巴拉巴拉的一堆。

我的建议是保持开放的心态，因为你需要找到适合自己的东西。

同时，我也不希望你抱有太大的逆反心理，当大家都在使用这个工具在做同一件事情的时候总是有原因的。

你应该先去尝试，看看这个工具为什么会流行，然后再决定是否要在这个工具上进行长远的投资。

3.2 浏览器

作为前端开发，首先需要安装的工具应该是浏览器。

你可能还没有意识到，浏览器中就内置了开发者工具。

这些工具可以帮助我们理解代码，调试代码（查找错误），甚至可以直接在运行的网站上进行试验。

对于浏览器，我的选择有 Chrome，Firefox，Safari，Edge，它们都是具有强大开发者工具的浏览器。

如果你已经在使用其中的一款，那么你可以继续使用，但是如果你还没接触以上的任一款，那么建议优先选择 Chrome 来进行尝试。

3.3 编辑器

哪个编辑器最好？这是一个容易引起争论的问题。

有很多观点会干扰到你的选择，但我认为这完全取决于你希望使用这款编辑器干什么，以及它是否合你的胃口。

这里说的编辑器包含了文本编辑器 和 IDE。

IDE（集成开发环境），简单来说，它相比文本编辑器，提供了更完整的开发功能。

现在很多的文本编辑器都提供了超越普通文本编辑的能力，所以对于文本编辑器，现在更准确的说法应该是代码编辑器。

对于 Web 前端开发，我选择 Visual Studio Code（简称 VSCode 或者 Code）。

它是一款由微软开源的且跨平台的文本编辑器。

它真的非常出色，具有许多便捷强大的功能，当前社区也很繁荣。

VSCode 做到了在文本编辑器和 IDE 之间取得了很好的平衡，真的非常棒。

如果你想要更加强大完整的功能，那么也可以选择一款 IDE。

WebStorm 可能是目前 Web 前端开发的最佳 IDE。

还有两款编辑器需要特别提一下，就是 vi 和 emacs。

他们的特点是当我们掌握了它们后，可以让我们在编程的过程中只使用键盘而不使用鼠标。

但它们的学习曲线非常陡峭，所以这里的建议是看着来。

如果你有兴趣，也有时间，那么可以去学习它们（优先学习 Vi）。

3.4 终端

在本课程，你将会使用终端（就是我们下文提到的终端仿真器）。

对，就是那个打开之后只看到一个黑乎乎背景，并有一个光标在闪烁的那个窗口。

首先要强调的是它并没有看起来的那么难懂。

在接触终端之前，需要了解两个概念：shell 和 终端仿真器（Terminal Emulator）。

终端仿真器其实只是操作系统中的一个窗口，它本身并不会执行或者说理解我们给他输入的任何指令。

执行我们指令的其实是在终端仿真器内部的 Shell。

Shell 又分很多种，常见的是 Bash Shell。

终端仿真器和 Shell 主要负责和操作系统打交道，所以不同的操作系统会提供不同的终端仿真器和 Shell。

如果以上的内容已经开始让你感到困惑了，那么就停下来吧，因为它们不是目前主要的内容，我们可以在后面再详细了解。

对于终端仿真器，我们使用哪个都无所谓。

• macOS，我个人推荐使用 iTerm2。
• Windows，我推荐可以尝试使用 Hyper 或者 Cmder，一个有趣，一个强大。
  或许还可以尝试使用 Windows Terminal，但我本人并没有怎么使用过，不知道体验如何。
• Linux系统，用默认提供的就可以了。

至于使用哪种 Shell，我目前使用 zsh，据说 fish 也很好，但我还没有开始尝试。

如果你刚开始，我建议先使用 Bash Shell 看看，通常终端仿真器默认提供的 Shell 都会是 Bash。

3. 学习资源推荐

如果要查找关于 HTML，CSS 或者 JavaScript 有关的任何内容，我的第一选择肯定是 Mozilla 的 MDN 文档。

而如果是库或者框架，比如 Bootstrap，React，Vue，Angular等等，那么可以直接访问其 GitHub 页面，或者其官方文档进行学习。

4. 成功学习编程的小秘诀

4.1 开始学习

首先，不要在开始学习前就去听取太多的声音。

比如当你想学习编程的时候，别人就会告诉你，你需要数学学得好，英语学得好。

这里的疑问是，难道在学习编程的时候，我们的数学和英语水平不能提高吗？

现实中已经有很多数学和英语一般的人成功地成为了一名开发人员，比如我。

我也见证过很多非计算机专业的人成功转入了编程行业并取得成功。

所以，如果你想学习编程，就不要让那些先入为主的观念束缚你。

开始学习就对了。

4.2 解决问题然后继续

请记住，学习编程并不容易，甚至可以说很难。

就好比刚开始学习一门外语一样，从接触到能使用和别人交流并不容易。

我们必须学习到足够多内容的时候，才可以理解编程究竟是怎么回事。

这个过程容易让人感到灰心，特别是当你觉得已经学了很多了，但还是毫无头绪的时候。

你能做的就是继续尝试。解决遇到问题，然后再继续，直到你能完成一个完整的项目。

4.3 使用搜索引擎

我们应该更多地去使用搜索引擎。

我可以很确定地说世界上所有的程序员都在不断地通过搜索引擎去寻找他们需要的信息。

使用搜索引擎去解决问题并不是在考试作弊，而是在使用一种技能。

对的，在学习的过程中，你需要学会使用搜索引擎去解决问题。

技能的获得是需要通过 反复模仿 和 刻意练习 的。

编程是一种技能。

4.4 模仿和练习

学习编程需要模仿和练习。

练习的重要性应该不需要在这里过多地强调，因为你随处都可以看到和听到相关的建议。

我这里想说的是，不要总是对使用复制粘贴这种行为有太大的心理负担。

有时候遇到问题，多去 StackOverflow 上看看。

通过阅读别人的解决方案，并进行分析，把认为可以解决问题的答案通过复制粘贴让我们的程序运行成功。

然后再理解其中的原理，这并不总是一个不好的做法。

学习编程确实需要通过不断地动手练习，但是现在有太多的知识等着我们去学习了，大家的时间都很紧迫和宝贵。

除了模仿和练习，在不断解决问题的过程中，我们也会变得越来越好。

4.5 不要总试图一次了解所有的内容

在学习某个知识点的时候，总会去想完全地了解其中发生的事情。

有时候这并不是一个好事，因为这里很难达到一个平衡。

我的看法是，看你是否有足够的时间，有时候真的只需要知道这里使用了它可以让程序正确运行就好了，等需要深入了解或者有空闲时间的时候再去看它。

我们学习的时间总是有限的，你需要提醒自己继续往下学习，后面还有很多内容。如果你想深入学习，那么我们后面总是可以再抽出时间来的。

5. 总结

仍需强调的是，学习编程非常困难，需要付出巨大的努力。

希望本课程会对你有所帮助。

这是我们的初级成长计划的第一个内容，还算是比较轻松。

如果你准备好了，就让我们继续。

祝你成功！

《前端开发初级成长计划 v1》正在持续更新中。

rushuni
公众号同名，欢迎关注。

2021.02.09