Web前端开发入门 v1 – 超强不解释

时间:2020-8-24 作者:admin

1 前言

1.1 欢迎

欢迎大家参加《Web前端开发入门 v1 – 超强不解释》。

在这个课程中,我们将开始介绍有关如何成为 Web 开发人员的一些知识。

通过本门课程,你将获得 HTML,CSS 和 JavaScript 的代码编写经验。
你还将学习如何通过 Git 命令来保存你的代码,以及使用 Node.js 为你的网站提供服务。

大部分情况下,我会假设你对于编程是 0 基础的。

同时,我也假设你对计算机是有基础了解的,比如,如何使用键盘和鼠标去操作我们的操作系统,如何使用浏览器以及如何在操作系统中创建文件并输入内容等等。

除此之外,学习本课程并没有更多的前置要求,除了电脑,网络,以及最重要的–时间。

本课程是我的《前端开发成长计划-初级 v1》中的第一个课程,也是整个计划的基础和起点。

以下是本课程所涉及的内容大纲:

  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

1.2 我们将学习什么

1.2.1 掌握术语

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

本课程中主要是面向 Web 前端开发,我们确实需要知道一些单词说的是什么意思。
比如 超链接,级联样式表,函数,作用域等等。

如果你在课程中经常看到某个术语,那么这就是一个很好的掌握这个内容的机会。

但是有些单词我们可以暂时忽略,比如 Monad。

总的来说,我们将在本课程中学习创建一个网站所需要的一切。重点是我们将学习几种“语言”。

这里我对语言使用引号的原因是,在创建网站的过程中所使用的的语言并不一定是一门编程语言,它可能只是一门计算机语言,比如我们的 HTML 和 CSS。

1.2.2 学会创建网站

我认为使用盖房子这个比喻来探讨和阐述创建一个网站的过程是一个不错的选择。因为这其中可以引入创建网站所涉及的三种语言以及它们各自的职责。

1.2.2.1 搭建

要建造房子,你需要使用到工具(比如文本编辑器,浏览器,命令行)。

有了工具,我们需要一些材料来建造房子,比如长方形的方砖,长条钢筋或者菱形窗户等等,我们需要把这些东西放在一起,构建出房子模样。

这些方砖,钢筋,窗户就是我们要学的HTML(超文本标记语言),它应用于搭建我们整个房子的基础架构中。

只通过方砖,钢筋,窗户(HTML语言)构建的房子看起来会非常简陋,因为还没有任何的装饰品,也没有颜色或者一些复杂的结构构造。
也就是说只使用了 HTML 语言的网站看起来就像是我们打开的记事本一样,黑白色的文本,没有任何的样式,也没有任何的交互性。

1.2.2.2 装修

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

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

这个设计方案就是我们房子的 CSS(级联样式表)。

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

比如我们可以通过 CSS 设计我们的网站中的文章中最后一段的文字字体为 18px,字体颜色为蓝色。

1.2.2.3 智能家居

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

如果是古代,那还说得过去,但现在是现代了,我们需要在房子中安装一些工具,比如安装一套智能家居设备。

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

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

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

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

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

1.2.2.4 网购和外卖

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

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

现在外面下着大雨,家里的咖啡豆已经没了,此刻又很需要一杯咖啡来续命,那么我们就需要联系咖啡店来帮我们制作一杯然后送过来。

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

一家咖啡店可以为很多不同的客户提供服务,只要咖啡店按照客户的要求把制作好的各种各样的咖啡做好后,将其送到各个客户手中就可以了。

在这种情况下,类比我们的程序,我们的房子(前端代码)都是使用 HTML,CSS 和 JavaScript 构成。但是后端代码却可以使用多种语言(比如 Java,Python,Go等)。

这里要知道的是 JavaScript 也可以用于构建我们的后端,所以我们还将学习 Node.js,它现在是我们 Web 前端开发中非常重要的组成部分了。

1.2.2.5 总结

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

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

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

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

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

我们对咖啡店提出我们的要求,咖啡店将结果送过来给我们。

一个咖啡店可以服务许多房子提出来的订购需求,这就好像一台服务器可以服务许多不同的请求一样。

一开始,我们就提到了工具,有了工具,我们才好开始所有的一切。

所以接下来让我们聊聊工具。

2.1 工具

2.1.1 概述

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

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

你应该保持开发的心态,你需要找到适合自己的东西。

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

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

2.1.2 浏览器

作为前端开发,首先需要安装的工具应该是浏览器,你可能还没有意识到,浏览器中内置了许多的开发人员工具,这些工具可以帮助我们理解代码,调试代码(查找错误),甚至可以直接在运行的网站上进行试验。

目前,对于浏览器,我的第一选择是 Chrome,除此之外,Firefox,Safari,Edge 也都是不错的选择,它们都是具有强大开发者工具的浏览器。

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

2.1.3 编辑器

哪个编辑器最好?这是一个容易引起争论的问题。有很多观点会干扰你的选择,但我认为这完全取决于你希望使用这款编辑器干什么以及它是否合你的胃口。

这里说的编辑器包含了 文本编辑器 和 IDE(集成开发环境,相比之下提供了更完整的开发能力的软件)。

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

对于用于 Web 前端开发的代码编辑器,我选择了 Visual Studio Code(后面简称 VSCode)。它是一款由微软开发的开源的免费且跨平台的文本编辑器。它真的非常出色,具有许多便捷强大的功能,当前社区也很繁荣。

VSCode 强大的地方在于做到了在文本编辑器和 IDE 之间取得了很好的平衡,真的非常棒。

如果你想要更加强大完整的功能,那么也可以选择一款 IDE。WebStorm 是目前 Web 前端开发最佳 IDE 之一。

另外,我们还有两款编辑器需要特别提一下,就是 vim 和 emacs。

这通常是我们在命令行或者终端中会使用到的工具,他们的特点就是可以让我们在编程的过程中只使用键盘而不使用鼠标。

但它们的学习曲线非常陡峭,所以我的建议是先不要,尤其是在刚开始学习编写代码的阶段。

2.1.4 终端

在本课程,你将学习使用终端。对,就是那个打开之后背景黑乎乎只有一些提示符和闪烁光标的那个窗口。

我首先要强调的是它看起来并没有那么可怕。在接触终端之前,我需要先帮助你了解两个概念的区别。

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

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

Shell 程序其实有很多种,比如我们常听说的 Bash Shell。

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

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

对于终端仿真器,我们使用哪个都无所谓,如果是 macOS,那么我个人推荐使用 iTerm2。

如果是 Windows,那么我推荐可以尝试使用 Hyper 或者 Cmder,如果是最新版的Win10,可以尝试使用 Windows Terminal。

如果是Linux系统,用默认提供的就可以了。

对于 Shell,我目前使用 zsh,但是如果你刚开始,我建议先使用 Bash 看看,通常终端仿真器默认提供的 Shell 都会是 Bash。

2.1.5 学习资源推荐

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

而如果是库或者框架,比如 Bootstrap,React,Vue,Angular等等,建议最好直接访问其 GitHub 页面,或者其官方文档先进行学习。

1.3 成功学习编程的一点小秘诀

1.3.1 开始学习

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

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

和很多人的看法相反,我不认为学习编程前就一定要把数学掌握地很好,把英语掌握的很好。

这里的重点是,在学习编程的时候,我们的数学和英语水平难道就不能提高吗?

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

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

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

1.3.2 解决问题然后继续

请记住,学习编程并不容易,甚至可以说很难。作为一个对比,就好像刚开始学习一门外语一样,从接触到能使用和别人交流并不容易。

我们必须学习到足够多内容的时候,才可以理解编程究竟是怎么回事。这个过程容易让人感到灰心,特别是当感觉学了很多了,却还是毫无头绪的时候。

你能做的就是继续尝试。解决遇到问题,然后再继续。

1.3.3 使用搜索引擎

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

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

使用搜索引擎去解决问题并不像是在考试作弊,因为搜索引擎的使用现在已经是一种技能了。

编程是一种技能,而技能的获得是需要通过反复模仿刻意练习的。

1.4.4 模仿和练习

学习编程你是需要模仿和练习的,我认为练习的重要性已经不需要过多地强调了,因为你随处都可以看到和听到相关的言论。

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

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

通过分析,把认为可以解决问题的答案先通过复制粘贴,让我们的程序成功运行起来。然后再理解其中的原理,这并不总是一个坏的行为。

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

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

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

我明白这里很难达到一个平衡,因为在学习某个知识点的时候,总会去想完全地了解这个程序中发生的所有事情。

但我的建议是,有时候只需要知道这里使用了它,就可以让程序正确运行起来就好了,等学到这个内容的时候再了解它。

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

1.4.6 总结

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

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

这是我们的第一章,还算是比较轻松,如果你准备好了,就让我们继续吧。

祝你成功!

《前端开发成长计划-初级 v1 》仍在设计规划的初始阶段。
本课程 《Web前端开发入门 v1 – 超强不解释 》是整个计划中的第一个内容。现在入手,优惠巨大-_-

Rush
2020.08.22

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。