Merge branch 'main' of github.com:pachicodes/Web-Dev-For-Beginners into main

pull/202/head
pachi 4 years ago
commit 2059abf0ba

@ -2,7 +2,7 @@
This lesson covers the basics of programming languages. The topics covered here apply to most modern programming languages today. In the 'Tools of the Trade' section, you'll learn about useful software that helps you as a developer.
![Intro Programming](webdev101-programming.png)
![Intro Programming](/sketchnotes/webdev101-programming.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -2,7 +2,7 @@
Esta lección cubre los conceptos básicos de los lenguajes de programación. Los temas que aprenderemos aquí se aplican a la mayoría de los lenguajes de programación modernos en la actualidad. En la sección 'Herramientas del oficio', aprenderás sobre software y herramientas que te ayudarán como desarrollador.
![Intro Programming](../webdev101-programming.png)
![Intro Programming](/sketchnotes/webdev101-programming.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## [Pre-lecture quiz](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1)

@ -2,7 +2,7 @@
Cette leçon couvre les bases des langages de programmation. Les sujets abordés ici s'appliquent à la plupart des langages de programmation modernes d'aujourd'hui. Dans la section «Outils du métier», vous découvrirez des logiciels utiles qui vous aideront en tant que développeur.
![Intro Programming](webdev101-programming.png)
![Intro Programming](/sketchnotes/webdev101-programming.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -2,7 +2,7 @@
Αυτό το μάθημα καλύπτει τα βασικά των γλωσσών προγραμματισμού. Τα θέματα που καλύπτονται εδώ ισχύουν για τις περισσότερες σύγχρονες γλώσσες προγραμματισμού σήμερα. Στην ενότητα 'Εργαλεία του Εμπορίου', θα μάθετε για χρήσιμο λογισμικό που σας βοηθά ως προγραμματιστές.
![Intro Programming](../webdev101-programming.png)
![Intro Programming](/sketchnotes/webdev101-programming.png)
> Σκίτσο από [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -2,7 +2,7 @@
Pelajaran ini mencakup dasar-dasar bahasa pemrograman. Topik yang dibahas di sini berlaku untuk sebagian besar bahasa pemrograman modern saat ini. Di bagian 'Alat Keterampilan', Anda akan belajar tentang perangkat lunak yang berguna yang membantu Anda sebagai pengembang.
![Pemrograman Intro](../webdev101-programming.png)
![Pemrograman Intro](/sketchnotes/webdev101-programming.png)
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuis Pra-Kuliah

@ -2,7 +2,7 @@
Questa lezione tratta delle basi dei linguaggi di programmazione. Gli argomenti trattati qui si applicano alla maggior parte dei moderni linguaggi di programmazione di oggi. Nella sezione 'Strumenti Necessari' conoscerete utili software che vi aiuteranno come programmatore.
![Introduzione alla Programmazione](../webdev101-programming.png)
![Introduzione alla Programmazione](/sketchnotes/webdev101-programming.png)
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pre-Lezione

@ -4,7 +4,7 @@
ここで取り上げた特徴は、最新のプログラミング言語のほとんどに当てはまります。
次にツールセクションでは、開発者にとって有用なソフトウェアを紹介します。
![Intro Programming](../webdev101-programming.png)
![Intro Programming](/sketchnotes/webdev101-programming.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 事前クイズ

@ -2,7 +2,7 @@
이 강의에서는 프로그래밍 언어의 기초를 다룹니다. 여기에서 다루는 주제는 오늘 날 많은 최신 프로그래밍 언어에 적용됩니다. 'Tools of the Trade' 세션에서는 개발자에게 도움이 되는 유용한 소프트웨어에 대해 알아보겠습니다.
![Intro Programming](../webdev101-programming.png)
![Intro Programming](/sketchnotes/webdev101-programming.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈

@ -2,7 +2,7 @@
Pelajaran ini merangkumi asas bahasa pengaturcaraan. Topik yang anda akan belajar di sini dapat mengaplikasikan untuk kebanyakan bahasa pengaturcaraan moden hari ini. Pada bahagian 'Alat Perdagangan', anda akan belajar bagaimana mengenai perisian berguna yang membantu anda sebagai pembangun.
![Intro Programming](../webdev101-programming.png)
![Intro Programming](/sketchnotes/webdev101-programming.png)
> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuiz Pra-Kuliah

@ -2,7 +2,7 @@
Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leert u over nuttige toepassingen die u helpen als web ontwikkelaar.
![Introductie Programmeren](../webdev101-programming.png)
![Introductie Programmeren](/sketchnotes/webdev101-programming.png)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -0,0 +1,192 @@
# 编程语言概述与工具介绍
这节课涵盖了编程语言的基础知识,涉及到的内容适用于如今大多数现代编程语言。在“工具介绍”部分,你会了解到一些对开发者很有用的软件。
![Intro Programming](/sketchnotes/webdev101-programming.png)
> 涂鸦笔记作者:[Tomomi Imura](https://twitter.com/girlie_mac)
## 课前小测
[课前小测](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/1?loc=zh_cn)
## 大纲
这节课我们将会介绍:
- 什么是编程?
- 编程语言的种类
- 程序的基本要素
- 对专业开发者很有用的软件和工具
## 什么是编程?
编程programming 俗称写代码coding是向诸如计算机或移动设备之类的设备写入指令的过程。我们使用编程语言来编写这些指令然后交由设备去解释interpret。这些指令的集合有许多叫法常见的有*程序program*、*计算机程序computer program*、*应用程序application / app*和*可执行文件executable*。
*程序*可以是任何由代码编写的东西,比如网站、游戏和手机应用。尽管的确有办法不编写任何代码就创建一个程序,但是设备还是会去解析其底层逻辑,这个逻辑大概率是由代码编写的。所谓*正在运行*或是*执行代码*的程序所做的其实都是执行指令。你现在用来阅读这段文字的设备,也正在运行一个将文字输出到你的屏幕上的程序。
✅ 查一查:谁被认为是世界上第一位计算机程序员?
## 编程语言
编程语言的主要目的是:让开发者可以构建指令并将它们传递给设备。设备只能理解二进制(一堆 0 和 1这对*大多数*开发者来说实在不算是高效的交流方式,而编程语言正是人类与计算机之间沟通的桥梁。
编程语言有着不同的形式,也可能用于不同的目的。比如 JavaScript 主要用于 Web 应用,而 Bash 则主要用于操作系统。
对于设备来说看,解释*低级语言low level languages*的指令一般会比解释*高级语言high level languages*的指令需要更少的步骤。然而高级语言因为其可读性和兼容性会更加常用。JavaScript 就是一种高级语言。
下面的代码展示了高级语言(以 JavaScript 为例)和低级语言(以 ARM 汇编代码为例)的区别:
```javascript
let number = 10
let n1 = 0, n2 = 1, nextTerm;
for (let i = 1; i <= number; i++) {
console.log(n1);
nextTerm = n1 + n2;
n1 = n2;
n2 = nextTerm;
}
```
```c
area ascen,code,readonly
entry
code32
adr r0,thumb+1
bx r0
code16
thumb
mov r0,#00
sub r0,r0,#01
mov r1,#01
mov r4,#10
ldr r2,=0x40000000
back add r0,r1
str r0,[r2]
add r2,#04
mov r3,r0
mov r0,r1
mov r1,r3
sub r4,#01
cmp r4,#00
bne back
end
```
不管你信不信,*它们做的事完全相同*:打印斐波那契数列的前 10 位。
✅ [斐波那契数列](https://zh.wikipedia.org/wiki/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97)是一个由 0 和 1 开头,每个数字都是它之前两个数字之和的数列。
## 程序的基本要素
程序中的单条指令instruction被称作*语句statement*,常用一个字符或是空行来标识指令结束的位置,这种标识可被称为*终止符terminates*。程序的结束方式也因语言而异。
多数程序都需要用到从用户或其他地方获取到的数据data此时语句会根据这些数据来执行指令。数据会改变程序的行为所以编程语言提供了一种临时存储此后会被用到的数据的方法。这些数据被称作*变量variables*。变量也是语句,用来指示设备将数据存到它的内存中。和代数学中的变量类似,程序中的变量也有独立的命名,其值在之后也可能发生改变。
有的语句可能不会被设备执行,这通常是开发者有意为之,否则就是发生了意外的错误。这样的控制可以让应用程序更加稳定和可维护。一般来说这些控制的切换会在满足特定条件的情况下发生。`if..else` 语句就是一个在现代编程语言中常见的用于控制程序的语句。
✅ 你会在此后的课程中学到更多关于此类语句的知识
## 工具介绍
[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "工具介绍")
在这一部分,你将会了解到一些能在你的专业开发之旅中颇有帮助的软件。
**开发环境development environment** 指的是一位开发者自己在编写软件时常会用到的工具和功能的集合。其中一些工具会按照开发者的特定需求被自定义配置,这些工具集也会随着时间发生变化,原因可能是开发者在工作或个人项目中改变了需求的优先级,抑或是切换到了另一种编程语言。开发环境往往因人而异。
### 编辑器
编辑器Editors是软件开发中最关键的工具之一是你用来编写甚至运行你的代码的地方。
开发者选用编辑器还有这些原因:
- *调试Debugging* 通过逐步或逐行地运行代码来发现漏洞和错误。一些编辑器自身带有调试功能,或者可以被自定义添加对特定编程语言的调试功能。
- *语法高亮Syntax highlighting* 为代码添加颜色和文本格式以便阅读。多数编辑器都可以对语法高亮进行自定义。
- *插件和集成Extensions and Integrations* 开发者可以根据自身需要为编辑器添加其原生本不包含的功能。比如,许多开发者需要为代码撰写文档来解释其工作原理,就会安装一个拼写检查插件来检查有没有拼写错误。多数插件都只支持特定的编辑器,多数编辑器也会提供搜索可用插件的方法。
- *自定义Customization* 多数编辑器都是高度可自定义的,每一位开发者都能根据自身需要来自定义自己的开发环境。许多开发者还会编写自己的插件。
#### 主流编辑器和 Web 开发插件
- [Visual Studio Code](https://code.visualstudio.com/)
- [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
- [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Atom](https://atom.io/)
- [spell-check](https://atom.io/packages/spell-check)
- [teletype](https://atom.io/packages/teletype)
- [atom-beautify](https://atom.io/packages/atom-beautify)
### 浏览器
另一个关键工具是浏览器。Web 开发者需要用浏览器来观察它们的代码如何在网页上运行,还可以看到编辑器中编写的元素(如 HTML 元素)如何展现在网页上。
许多浏览器都提供了*开发者工具*DevTools包括一系列有用的功能和信息用以辅助开发者收集和捕获它们应用程序的重要信息。例如当网页发生错误时获知错误是何时发生的有助于帮助解决错误而浏览器 DevTools 就可以被配置来捕获这个信息。
#### 主流浏览器和 DevTools
- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium?WT.mc_id=academic-13441-cxa)
- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
- [Firefox](https://developer.mozilla.org/docs/Tools)
### 命令行工具Command Line Tools
一些开发者更喜欢使用较少的图形化界面来执行日常任务,因此选择使用命令行。开发代码需要大量的文字输入,一些开发者不喜欢自己在键盘上的工作流被打断,会使用键盘快捷键来切换桌面窗口、切换工作文件、使用工具等。大多数任务都可以通过鼠标完成,而使用命令行的一个好处就是无需再鼠标和键盘之间切换就能完成多数工作。命令行的另一个好处是它们是可配置的,所以你可以保存你的配置并随时修改,还可以将其导入到新的开发设备上。但开发环境毕竟因人而异,有人完全不想用命令行,有人则希望在命令行做所有事,还有一些人两种方式都乐意接受。
### 常用命令行选择
命令行选择基于你使用的操作系统会有所不同。
*💻 表示会预装在对应操作系统上*
#### Windows
- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻
- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (即 CMD) 💻
- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa)
- [mintty](https://mintty.github.io/)
#### MacOS
- [Terminal](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
- [iTerm](https://iterm2.com/)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### Linux
- [Bash](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
- [KDE Konsole](https://docs.kde.org/trunk5/en/applications/konsole/index.html)
- [Powershell](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux?view=powershell-7?WT.mc_id=academic-13441-cxa)
#### 常用命令行工具
- [Git](https://git-scm.com/) (💻 <- 在多数操作系统上)
- [NPM](https://www.npmjs.com/)
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
### 文档
当一位开发者想要学点新东西他们基本都会去找文档Documentation来学习如何使用。开发者会依靠文档来指引他们如何合理地使用工具和语言并且从中获取更多关于实现原理的深层知识。
#### Web 开发常用文档
- [Mozilla Developer Network](https://developer.mozilla.org/docs/Web)
- [Frontend Masters](https://frontendmasters.com/learn/)
✅ 查一查:既然你已经对 Web 开发者的环境有所了解,何不比较一下其与 Web 设计师的环境的差异?
---
## 🚀 挑战
比较一些编程语言。JavaScript 和 Java 相互之间有什么独特的特征COBOL 和 Go 之间呢?
## 课后小测
[课后小测](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/2?loc=zh_cn)
## 复习 & 自学
尝试接触一些不同的编程语言,用一种语言写一行代码,然后用另外两种语言重写这一行代码,你有什么感悟吗?
## 作业
[阅读文档](assignment.zh-cn.md)

@ -2,7 +2,7 @@
這堂課程解釋程式語言的基礎。這項主題能應用到當代多數的程式語言。關於必備工具的部分,你會學到許多實用的開發者軟體。
![關於程式語言](../webdev101-programming.png)
![關於程式語言](/sketchnotes/webdev101-programming.png)
> 由[Tomomi Imura](https://twitter.com/girlie_mac) 繪製。
## 課前測驗

@ -0,0 +1,11 @@
# 阅读文档
## 说明
[MDN 客户端工具文档](https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)中介绍了需要 Web 开发者可能需要用到的工具。从中选取三种本节课中没有提到的工具,并说明为什么 Web 开发者需要用到它们,搜索其中一种工具并给出它的文档。不要直接使用 MDN 中给出的示例。
## 评价表
| 优秀 | 良好 | 尚可进步 |
| --- | --- | -- |
| 解释了 Web 开发者为什么需要这些工具 | 解释了开发者如何使用这些工具,但却没有解释为什么需要它们 | 既没有解释为什么使用这些工具,也没有给出使用它们的方法 |

@ -2,7 +2,7 @@
This lesson covers the basics of GitHub, a platform to host and manage changes to your code.
![Intro to GitHub](images/webdev101-github.png)
![Intro to GitHub](/sketchnotes/webdev101-github.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -2,7 +2,7 @@
Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar y administrar cambios en tu código.
![Intro to GitHub](../images/webdev101-github.png)
![Intro to GitHub](/sketchnotes/webdev101-github.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3)

@ -2,7 +2,7 @@
Pelajaran ini mencakup dasar-dasar GitHub, platform untuk menghosting dan mengelola perubahan pada kode Anda.
![Dasar-dasar GitHub](images/webdev101-github.png)
![Dasar-dasar GitHub](/sketchnotes/webdev101-github.png)
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuis Pra-Kuliah

@ -2,7 +2,7 @@
Questa lezione tratta delle basi di GitHub, una piattaforma per ospitare e gestire modifiche al proprio codice.
![Intro to GitHub](../images/webdev101-github.png)
![Intro to GitHub](/sketchnotes/webdev101-github.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pre-lezione

@ -2,7 +2,7 @@
이 강의에서는 코드 변경점을 호스팅하고 관리하는 플랫폼인 GitHub의 기본 사항을 다룹니다.
![Intro to GitHub](../images/webdev101-github.png)
![Intro to GitHub](/sketchnotes/webdev101-github.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈

@ -2,7 +2,7 @@
Pelajaran ini merangkumi pengetahuan asas tentang GitHub, dan adalah salah satu platform untuk menjadi tuan rumah dan menguruskan perubahan pada kod anda.
![Intro to GitHub](../images/webdev101-github.png)
![Intro to GitHub](/sketchnotes/webdev101-github.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuiz Pra-Kuliah

@ -2,7 +2,7 @@
Deze les behandelt de basisprincipes van GitHub, een platform voor het hosten en beheren van wijzigingen in uw code.
![Intro to GitHub](../images/webdev101-github.png)
![Intro to GitHub](/sketchnotes/webdev101-github.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz voorafgaand aan de lezing

@ -0,0 +1,318 @@
# GitHub 介绍
这节课涵盖了 GitHub 的基础知识,这是一个可以用来存放代码和管理代码变更的平台。
![Intro to GitHub](/sketchnotes/webdev101-github.png)
> 涂鸦笔记作者:[Tomomi Imura](https://twitter.com/girlie_mac)
## 课前小测
[课前小测](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/3?loc=zh_cn)
## 大纲
这节课我们将会介绍:
- 在你的电脑上追踪你的工作
- 与他人协同开发项目
- 如何参与开源软件贡献
### 开始之前
开始之前,你需要确保安装了 Git在终端译注即上一节课中介绍的命令行中输入
`git --version`
如果没有安装 Git请先[下载并安装 Git](https://git-scm.com/downloads)。然后用如下命令设置你的本地 Git 使用者配置文件:
* `git config --global user.name "your-name"`
* `git config --global user.email "your-email"`
要检查 Git 使用者是否配置完成,可以输入:
`git config --list`
你还需要一个 GitHub 账户,一个代码编辑器(比如 Visual Studio Code并且要打开你的终端或者其他命令行
如果你没有现成的 Github 账号,去 [github.com](https://github.com/) 创建一个。如果已经有账号,就登录进去并且完成个人资料的配置。
✅ GitHub 并不是世界上唯一的代码仓库,但是最知名的。
### 课前准备
你需要在本地(你的笔记本或 PC创建一个项目文件夹还需要在 GitHub 上创建一个公开的仓库(译注:后文会有指引),作为本节课中向其他人的项目提贡献的示例。
---
## 代码管理
假如你在本地有一个代码项目的文件夹,你希望开始使用 Git (版本控制系统)来追踪你的进度。有的人将使用 Git 比作给未来的你自己写一封情书在数日、数周乃至数月后阅读你的提交信息commit messages你就可以想起你做出某个决定的原因或者回滚rollback一次变更 —— 前提是你写了不错的提交信息。
### 任务:创建仓库并提交代码
1. **在 GitHub 上创建仓库**。进入 GitHub.com在 “Repositories” 标签或者右上角导航栏找到 **New repository** 按钮。
1. 给你的仓库取个名字;
1. 点击 **Create repository**
1. **前往你的工作目录**。在你的终端中,通过输入下方命令切换到你希望开始追踪的文件夹(即目录):
```bash
cd [文件名称/目录路径]
```
1. **初始化一个 Git 仓库**。在你的项目下输入:
```bash
git init
```
1. **检查状态**。要检查你的仓库状态,输入:
```bash
git status
```
输出看起来将会像这样:
```output
Changes not staged for commit:
(use "git add <file>..." to update what will be committed)
(use "git checkout -- <file>..." to discard changes in working directory)
modified: file.txt
modified: file2.txt
```
一般来说 `git status` 命令会告诉你诸如什么文件已经 _被保存到_ 仓库内或者有一些你可能想要保留的变更之类的事。
1. **追踪所有文件**
这个操作也叫做暂存stage文件或者将文件添加到暂存区staging area
```bash
git add .
```
`git add` 命令加上 `.` 参数将会追踪你的所有文件和变更。
1. **只追踪选定的文件**
```bash
git add [文件或文件夹名]
```
如果你不想一次性将所有文件添加到暂存区,可以用这个命令仅仅添加选定的文件。
1. **取消所有文件的追踪**
```bash
git reset
```
这条命令可以帮我们取消暂存unstage所有文件。
1. **取消特定文件的追踪**
```bash
git reset [文件或文件夹名]
```
如果你在下次提交中不希望提交某个已经暂存的文件,可以用这条命令取消它的暂存。
1. **保存你的工作**。现在你应该已经将文件添加到了所谓 _暂存区_ 中,这是 Git 追踪你的文件的地方。为了永久地保存变更,你需要 _提交commit_ 这些文件。你可以用 `git commit` 命令创建一次 _提交_。一次 _提交_ 代表你的仓库历史中的一个存档点。输入下方命令来创建一次 _提交_
```bash
git commit -m "first commit"
```
这会提交你暂存区中的所有文件,并带上一条提交信息 —— “first commit”。在以后的提交信息中你会想要加入更加准确的描述比如一些表示你这次变更的类型的信息。
1. **将你的本地仓库连接到 GitHub**。现在 Git 仓库已经能在你的本地机器上正常运作但是有时候你会想要将你的文件备份到别处或者希望邀请其他人来一起参与这个仓库的协作。GitHub 就是一个可以满足你要求的好地方。我们此前已经在 GitHub 上创建了一个仓库,现在只需要将本地 Git 仓库连接到 GitHub 就可以了,用 `git remote add` 命令就可以做到。输入下面的命令:
> 注意,在你输入命令前,需要前往你的 GitHub 仓库而页面来找到仓库的地址URL用它来替换命令中 `username/repository_name` 这一部分。
```bash
git remote add origin https://github.com/username/repository_name.git
```
这会创建一个被命名为 “origin” 的 _远程仓库位置remote_,也可以理解为一个连接,指向你早先创建的 GitHub 仓库。
1. **将本地文件上传至 GitHub**。现在你已经创建了一个本地仓库和 GitHub 仓库间的 _连接_。让我们通过 `git push` 命令将这些文件上传至 GitHub就像这样
```bash
git push -u origin main
```
这样就会把你的提交上传到 GitHub 上你的 “main” 分支了。
1. **添加更多的变更**。如果你想继续搞点变更并且将它们传到 GitHub 上,你只需要使用下面的三行命令:
```bash
git add .
git commit -m "在这里填写你的提交信息"
git push
```
> 提示,你可能还需要建立一个 `.gitignore` 文件来防止 Git 追踪一些文件并且让它们不会被上传到 GitHub比如一些你写在本地仓库但并不想放到公开仓库的笔记文件。你可以在 [.gitignore templates](https://github.com/github/gitignore) 找到一些现成的 `.gitignore` 文件模板。
#### 提交信息Commit Messages
一条好的 Git 提交信息标题subject line可以理解为下方句子的填空
如果生效,这次提交将会 <你的提交信息标题>
在标题内,使用祈使语气和现在时态,即使用 “change” 而非 “changed” 或 “changes”。
同理在正文body可选中也要用祈使语气和现在时态。正文中需要包括更改的动机并对比与更改前后行为的变化。确保你说明的是`为什么`,而不是`怎么做`。
✅ 花几分钟逛逛 GitHub。你能找到感觉非常棒的提交信息吗你可以找到非常简洁的提交信息吗你认为在一条提交信息中传达什么信息是最重要和有用的
### 任务:协作
将项目放到 GitHub 的主要原因是让和其他开发者协作开发成为可能。
## 和其他人协作开发项目
在你的仓库中,前往 `Insights > Community` 来查看你的项目和推荐的社区规范的对比。
这里有一些你可以改进你的项目仓库的点:
- **项目描述Description**。你为你的项目添加了描述吗?
- **README**。你有添加 README 吗GitHub 提供了撰写 [README](https://docs.github.com/articles/about-readmes/) 的指南。
- **贡献指南Contributing guideline**。你的项目是否有[贡献指南](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)
- **行为准则Code of Conduct**。添加一份 [行为准则](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)
- **开源协议License**。或许是最重要的,添加一个[开源协议](https://docs.github.com/articles/adding-a-license-to-a-repository/)
所有这些资源对于新加入的团队成员都是很有好处的,这些一般是新的贡献者在看你的代码前会更先去看的东西,以确认你的项目是否值得他们在这上面花费时间。
✅ 尽管很多人都准备了 README 文件,但常常会因为太忙而疏于维护。你能找到一个这样的例子吗?注:这里有一些可以[用于创建优秀的 README 的工具](https://www.makeareadme.com/),你或许愿意试试。
### 任务合并Merge一些代码
贡献文档帮助人们对项目做贡献,其中说明了你正需要什么样的贡献以及贡献的过程该是怎样的。贡献者需要完成一系列步骤才能在 GitHub 上参与你项目的贡献:
1. **复刻Fork你的仓库**。你可能希望人们 _复刻_ 你的项目。复刻意味着在他们自己的 GitHub 账户下创建你的项目的一份副本。
1. **克隆Clone**。在这里他们将会将项目克隆到他们的本地机器上。
1. **创建一个分支Branch**。你可能希望他们能创建一个 _分支_ 来进行他们的工作。
1. **集中进行一个区域的修改**。要求贡献者每次贡献只专注做一件事,这样你才更可能 _合并_ 他们的工作。想象一下如果他们修了一个 BUG添加了一个新特性然后更新了几个测试而你其实只想要其中的一个或两个更改时该怎么办
✅ 想一想分支在什么情况下对于编写和发布优质的代码非常重要?你能想到哪些使用实例?
> 注意要以身作则对你自己的工作也要创建分支。任何提交都需要在当前“检出checked out”的分支上进行。使用 `git status` 来查看是哪一个分支。
让我们走一遍贡献者的工作流程。假设贡献者已经 _复刻__克隆_ 了仓库,他们在本地机器已经有了一个可以工作的仓库:
1. **创建一个分支**。使用命令 `git branch` 来创建一个他们希望用来包含计划进行的变更的分支:
```bash
git branch [分支名]
```
1. **切换到工作分支**。使用 `git checkout` 来切换到指定分支并且更新工作目录中的文件:
```bash
git checkout [分支名]
```
1. **干活**。现在你可以添加你的变更了,别忘了用下面的命令告诉 Git 你所做的工作:
```bash
git add .
git commit -m "变更内容"
```
确保你的提交有一个好名字,不论是对你自己还是你正在帮助的仓库维护者来说都有好处。
1. **将你的工作合入 `main` 分支**。在完成工作后,你打算将你的工作和 `main` 分支上的合并。`main` 分支可能同时有了一些新的变更,所以要先用以下命令确保将其更新至最新版本:
```bash
git checkout main
git pull
```
这时你想确认是否存在 _冲突conflicts_,即 Git 没法简单地将这些变化 _合入_ 你的分支的情况。为此运行下面的命令:
```bash
git checkout [分支名]
git merge main
```
这将会把所有 `main` 分支上的变更带入到你的分支上。运气好的话一切都会自动搞定,否则 VS Code 会告诉你哪些文件 Git _不确定_ 该如何合并,你只需要手动修改对应文件来解决冲突即可。
1. **将你的工作上传至 GitHub**。将你的工作上传至 GitHub 意味着两件事:把你的分支上传到你自己的仓库,然后开启一个 PRPull Request
```bash
git push --set-upstream origin [分支名]
```
上述命令在你复刻的仓库中创建了一个分支。
1. **开启一个 PR**。接下来,你打算开启一个 PR。前往 GitHub 上你打算贡献的仓库,你将会看到一个消息条询问你是否想要创建一个新的 PR点击后即可进入创建 PR 的界面。在这里你可以更改提交标题,给出更准确的描述。创建 PR 后,仓库维护者将会看到这个,如果 _一切顺利_ 的话他们会表示感谢并且 _合并_ 你的 PR。你现在就是一位贡献者啦 :)
1. **清理**。成功合入一个 PR 后,做做 _清理_ 是一个好习惯。你会想要清理本地和你上传到 GitHub 的分支。首先让我们通过下面的命令来删除本地的分支:
```bash
git branch -d [分支名]
```
接下来请确保前往 GitHub 中对应仓库的页面并删除你刚才上传的分支。
`Pull request` 这个术语看起来有些憨,因为你确实打算把你的变更提交到这个项目中。但是在将你的变更合入到项目的 `main` 分支前维护者项目拥有者或者核心团队需要考虑和检查你的变更这意味着你实际上是在请求request维护者的变更决定。
Pull Request 是一个可以用来比较和讨论一个分支引入的改动的地方,并有代码审查、评论、集成测试等功能。优质的 Pull Request 严格遵照与提交信息相同的规则。如果你的工作是为了修复一个 Issues 面板中的事项,你可以在 PR 中提及这个事项。具体做法是写一个 `#` 加上事项的编号,比如 `#97`
🤞如果一切顺利,所有的检查都通过后项目拥有者就会将你的变更合入项目🤞
使用这个命令即可将 GitHub 上对应远程分支的所有新提交更新到当前本地的工作分支上:
`git pull`
## 如何参与开源贡献
首先,让我们在 GitHub 上找到一个你感兴趣且愿意参与贡献的仓库(**repo**),你会复制一份它的内容到你的机器上。
✅ 一个寻找对入门者友好的仓库的好办法是[搜索 “good-first-issue” 标签](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
![Copy a repo locally](../images/clone_repo.png)
有很多种复制代码的方法,其中一种就是“克隆”仓库的内容,可以用 HTTPS、SSH 或者 GitHub CLICommand Line Interface来做到。
打开你的终端并且用类似下方的命令来克隆仓库:
`git clone https://github.com/ProjectURL`
切换到正确的工作目录:
`cd ProjectURL`
你也可以用 [Codespaces](https://github.com/features/codespaces) 来打开整个项目,这是 GitHub 内置的代码编辑器和云开发环境,或者用 [GitHub Desktop](https://desktop.github.com/)。
当然,你也可以直接下载代码的压缩包。
### 更多 GitHub 的有趣小知识
你可以收藏star、关注watch和/或复刻forkGitHub 上的任何公开仓库。可以在右上角的下拉菜单找到你收藏的仓库,这就像书签一样,但收藏的是代码。
项目都有一个事项面板issue tracker用于让人们讨论和这个项目相关的事项事项面板基本都在 GitHub 的 “Issues” 标签页中,偶尔也会指明在其他地方。而 “Pull Requests” 标签页则是人们讨论和检查正在进行的变更的地方。
项目也可能会在论坛、邮件列表或者如 Slack、Discord、IRC 这样的聊天频道进行讨论。
✅ 看看你新建立的 GitHub 仓库,尝试做一些其他事,比如编辑设置、为仓库增加信息、创建一个 Project类似看板有很多可以尝试的东西
---
## 🚀 挑战
找朋友一起编辑彼此的代码。协作创建一个项目、复刻代码、创建分支,然后合并变更。
## 课后小测
[课后小测](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/4?loc=zh_cn)
## 复习 & 自学
了解更多 [如何提交贡献](https://opensource.guide/zh-hans/how-to-contribute/#%E5%A6%82%E4%BD%95%E6%8F%90%E4%BA%A4%E8%B4%A1%E7%8C%AE)。
[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/)。
练习练习再练习。GitHub 在 [lab.github.com](https://lab.github.com/) 提供了很棒的学习路径:
- [在 GitHub 的第一周](https://lab.github.com/githubtraining/first-week-on-github)
你还可以在上面找到更多高阶的实验内容。
## 作业
完成 [在 GitHub 的第一周](https://lab.github.com/githubtraining/first-week-on-github)

@ -2,7 +2,7 @@
這堂課程講述一個提供加設與管理程式碼的平台 ── Github的基本功能。
![GitHub 簡介](../images/webdev101-github.png)
![GitHub 簡介](/sketchnotes/webdev101-github.png)
> 由[Tomomi Imura](https://twitter.com/girlie_mac) 繪製
## 課前測驗

@ -1,6 +1,6 @@
# Creating Accessible Webpages
![All About Accessibility](webdev101-a11y.png)
![All About Accessibility](/sketchnotes/webdev101-a11y.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -1,6 +1,6 @@
# Creación de páginas web accesibles
![Todo sobre accesibilidad](../webdev101-a11y.png)
![Todo sobre accesibilidad](/sketchnotes/webdev101-a11y.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5)

@ -1,6 +1,6 @@
# Membuat Halaman Web yang Dapat Diakses (oleh Semua Orang)
![Semua Tentang Aksesibilitas](../webdev101-a11y.png)
![Semua Tentang Aksesibilitas](/sketchnotes/webdev101-a11y.png)
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuis Pra-Kuliah

@ -1,6 +1,6 @@
# Creare Pagine Web Accessibili
![Tutto quanto riguarda l'Accessibilità](../webdev101-a11y.png)
![Tutto quanto riguarda l'Accessibilità](/sketchnotes/webdev101-a11y.png)
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pre-Lezione

@ -1,6 +1,6 @@
# アクセシブルな Web ページの作成
![All About Accessibility](../webdev101-a11y.png)
![All About Accessibility](/sketchnotes/webdev101-a11y.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト

@ -1,6 +1,6 @@
# 접근 가능한 웹 페이지 생성하기
![All About Accessibility](../webdev101-a11y.png)
![All About Accessibility](/sketchnotes/webdev101-a11y.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈

@ -1,6 +1,6 @@
# Membuat Halaman Web yang Boleh Diakses
![Semua Tentang Kebolehcapaian](../webdev101-a11y.png)
![Semua Tentang Kebolehcapaian](/sketchnotes/webdev101-a11y.png)
> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuiz Pra Kuliah

@ -1,6 +1,6 @@
# Toegankelijke webpagina's maken
![Alles over toegankelijkheid](../webdev101-a11y.png)
![Alles over toegankelijkheid](/sketchnotes/webdev101-a11y.png)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz voorafgaand aan de lezing

@ -0,0 +1,228 @@
# 创造无障碍网页
![All About Accessibility](/sketchnotes/webdev101-a11y.png)
> 涂鸦笔记作者:[Tomomi Imura](https://twitter.com/girlie_mac)
## 课前小测
[课前小测](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/5?loc=zh_cn)
> 互联网的力量存在于其普适性中,让包括残障人士在内的每个人都能访问互联网,是其中不可或缺的一方面。
>
> —— Timothy Berners-Lee W3C万维网联盟主席、万维网发明者
这段引言恰当地强调了创造无障碍网页的重要性。一个无法被所有人顺畅访问的应用按照定义来说是排他的,作为 Web 开发者我们应该始终将无障碍性牢记在心中。从一开始就关注到这一点,可以让你在确保每个人都能顺利访问你创造的页面这一方面做得很优秀。这节课中,你会了解到一些能帮助你确保你的网站资源无障碍的工具,也会学到该怎样将无障碍性牢记在心中。
## 相关工具
### 屏幕阅读器Screen readers
屏幕阅读器可以说是最知名的无障碍工具之一。
[屏幕阅读器](https://zh.wikipedia.org/wiki/%E8%9E%A2%E5%B9%95%E9%96%B1%E8%AE%80%E5%99%A8)在视力障碍者中被广泛使用。就像我们会花时间来确保浏览器正确地传达了我们想要分享的信息, 我们也必须要确保屏幕阅读器也可以达到同样的效果。
一般来说,屏幕阅读器会从上到下用语音阅读一个页面。如果你的页面全是文字,阅读器传达信息的方式和浏览器会是基本相似的。当然,网页几乎不会只有文字,还会包含链接、图像、颜色以及其他视觉组件。我们也必须得确保这些信息可以被屏幕阅读器正确阅读。
每一位 Web 开发者都需要去熟悉屏幕阅读器。正如上面强调的一样,这是你的用户会用到的一种客户端。就像你很熟悉浏览器的操作一样,你也应该去学习如何操作屏幕阅读器。幸运的是,多数操作系统都内置了屏幕阅读器。
一些浏览器也有内置的工具和扩展程序,可以读出文字甚至提供一些基本的导航功能,比如[这些以无障碍为目的的 Edge 浏览器工具](https://support.microsoft.com/zh-cn/microsoft-edge/microsoft-edge-%E4%B8%AD%E7%9A%84%E8%BE%85%E5%8A%A9%E5%8A%9F%E8%83%BD-4c696192-338e-9465-b2cd-bd9b698ad19a)。这些也是重要的无障碍工具,但是工作方式和屏幕阅读器非常不同,所以不该被错误地用来作为屏幕阅读器的测试工具。
✅ 试用一下屏幕阅读器和浏览器文本阅读器。在 Windows 系统中默认带有[讲述人](https://support.microsoft.com/zh-cn/windows/%E8%AE%B2%E8%BF%B0%E4%BA%BA%E5%AE%8C%E6%95%B4%E6%8C%87%E5%8D%97-e4397a0d-ef4f-b386-d8ae-c172f109bdb1),也可以安装 [JAWS](https://webaim.org/articles/jaws/) 和 [NVDA](https://www.nvaccess.org/about-nvda/)。在 macOS 和 iOS 中默认装有[旁白](https://support.apple.com/zh-cn/guide/voiceover/welcome/10)。
### 缩放Zoom
另一个视力障碍者常用的工具是缩放。最基本的缩放功能是静态缩放,通过 `Control + 加号(+` 或者降低屏幕分辨率达成。这样的缩放会导致整个页面尺寸被调整,所以使用[响应式设计responsive design](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)对于提高了缩放级别的情况下的用户体验非常重要。
另一类缩放需要借助特定的软件来放大屏幕上的部分区域,就像一个真正的放大镜一样。在 Windows 上内置了[放大镜](https://support.microsoft.com/zh-cn/windows/%E4%BD%BF%E7%94%A8%E6%94%BE%E5%A4%A7%E9%95%9C%E5%8F%AF%E4%BD%BF%E5%B1%8F%E5%B9%95%E4%B8%8A%E7%9A%84%E5%86%85%E5%AE%B9%E6%9B%B4%E6%98%93%E4%BA%8E%E6%9F%A5%E7%9C%8B-414948ba-8b1c-d3bd-8615-0e5e32204198),也可以使用 [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) 这样有更多特性和更大用户群体的第三方软件。在 macOS 和 iOS 上则内置了[放大器](https://www.apple.com.cn/accessibility/vision/)
### 对比度检查器Contrast checkers
我们要谨慎地挑选网页上的配色,以照顾到色盲人群和难以区分低对比度颜色的用户的需要。
✅ 用类似 [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=zh-CN) 这样的浏览器插件来检测一下你喜爱的网站的颜色使用情况。你学到了什么?
### Lighthouse
在浏览器开发者工具中,你可以找到 Lighthouse 工具。这个工具可以让你一睹一个网站的无障碍性(以及其他性能分析)。尽管并不建议完全依赖 Lighthouse但将 100% 满分作为一个基础将会很有用。
✅ 在你的浏览器开发者工具中找到 Lighthouse 栏,然后用它分析任何一个网站。你发现了什么?
## Designing for accessibility
无障碍性accessibility是一个相对比较大的主题为了帮助你更深入地了解这里许多你可以参考的资源。
- [Accessible U - 明尼苏达大学](https://accessibility.umn.edu/your-role/web-developers)
尽管我们没法在这里涵盖创建一个无障碍网站的方方面面,但下面还是提供了一些你会想要去实践的核心信条。从一开始就设计一个无障碍页面**总是**比回过头来让一个已经存在的页面变得无障碍会更容易。
## 不错的展示原则
### 使用安全色色板
每个人看待世界的方式都不尽相同,当然也包括颜色。当你为你的站点选择一套配色时,应该确保其对所有人都是无障碍的。这里有一个非常棒的[生成安全色色板的工具](http://colorsafe.co/)。
✅ 举出一个配色非常糟糕的网站的例子。你认为它糟糕在哪?
### 正确使用 HTML
使用 CSS 和 JavaScript 有能力让任何元素看起来在控制效果上是任何一种类型的元素。比如 `<span>` 可以被用来创建出一个 `<button>`,而 `<b>` 则可能会被弄成一个超链接。尽管有人可能认为这样会更加容易调整样式,但是它不会传达任何有效信息给屏幕阅读器。请使用合适的 HTML 来建立对于页面的控制效果,比如你想要一个超链接,请使用 `<a>` 标签。用正确的 HTML 来实现正确的控制效果,这就叫做实践了“语义化 HTML”Semantic HTML
✅ 去任意一个网站看看设计师和开发者是否合理使用了 HTML。你能不能找出一个本该是链接的按钮提示在浏览器中右键点击并且选择“查看网页源代码”来查看底层代码译注此处使用“检查”/“审查元素”来观察或许会更加合适)。
### 建立描述性的标题层级
屏幕阅读器使用者为了寻找信息和在页面中导航,会[非常依赖页面中的标题](https://webaim.org/projects/screenreadersurvey8/#finding)。使用描述性的标题内容和语义化的标题标签,对于创建一个对屏幕阅读器使用者友好的网站是非常重要的。
### 使用良好的视觉线索
CSS 让你可以完全随意地控制页面中任何元素的外观。你可以创建一个没有轮廓的文本框或者一个没有下划线的超链接。但不幸的是,移除这些视觉线索会让一些习惯依靠这些线索的使用者难以认出它们的控制功能。
## 链接文本的重要性
对于网页导航来说,超链接非常关键。因此,确保屏幕阅读器可以准确阅读链接才能保证所有用户都可以顺利地在你的网站导航。
### 屏幕阅读器与链接
可想而知,屏幕阅读器会像阅读页面中其他文本一样阅读链接的文本。将这点牢记在心后,可以看看下面两种看起来似乎还能接受的写法。
> 小蓝企鹅,有时也被称作仙企鹅,是世界上最小的企鹅。[点击这里](https://zh.wikipedia.org/wiki/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)来查看更多信息。
> 小蓝企鹅,有时也被称作仙企鹅,是世界上最小的企鹅。访问 https://zh.wikipedia.org/wiki/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D 来查看更多信息。
> **注意** 下文即将提到,你应该 **避免** 使用上面这两种写法。
记住,屏幕阅读器和浏览器功能上有一些差异,是不同的交互媒介。
### 使用 URL 的问题
屏幕阅读器会阅读文本,如果 URL 出现在了文本里,屏幕阅读器就会直接读出这段 URL。一般来说URL 直接传递的信息都意义不大,而且听起来会很吵。如果你曾经在手机中将一段包含 URL 的文字用语音播放出来,就可能有类似体会。
### 使用“点击这里”的问题
屏幕阅读器也有只阅读页面中超链接的功能,就仿佛一个有视力的人扫视页面来找到所有链接一样。如果所有的链接文本都是“点击这里”,用户听到的就会一直是“点击这里,点击这里,点击这里,点击这里,点击这里……”,完全无法区分各个链接。
### 优秀的链接文本
优秀的链接文本会简要地描述链接另一侧是什么。在上面谈论小蓝企鹅的例子中,链接到的是关于这个物种的维基百科页面。使用*小蓝企鹅*作为链接文本将会非常合适,因为它能清楚地告诉人们如果他们点击了这个链接会了解到什么 —— 小蓝企鹅。
> [小蓝企鹅](https://zh.wikipedia.org/wiki/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D),有时也被称作仙企鹅,是世界上最小的企鹅。
✅ 上网随便逛几分钟,找一找使用了难以理解的链接策略的网页。对比一下其他有更好的链接的网站,你有何体会?
#### 关于搜索引擎
保证你的网站对所有人都无障碍还能带来一个额外的好处:可以帮助搜索引擎导航你的网站。搜索引擎会使用链接文本来了解页面的主题,所以使用好的链接文本其实利人利己!
### ARIA
想象一个下面这样的网页:
| 产品 | 详情 | 预订 |
| ------------ | ------------------ | ------------ |
| 小玩意 | [详情]('#') | [预订]('#') |
| 超棒的小玩意 | [详情]('#') | [预订]('#') |
在这个例子中,复制“详情”和“预订”这两个文本对于使用浏览器的用户来说是没有理解障碍的。然而,使用屏幕阅读器的用户则只会听到对 *详情**预订* 这两个词的两次毫无上下文的复读。
为了处理这类情况HTML 支持一些被称为 [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA) 的属性。这些属性让你可以为屏幕阅读提供一些额外的信息。
> **注意**:正如 HTML 的其他方面一样,浏览器和屏幕阅读器对 ARIA 的支持情况可能会不同,但是多数主流客户端都是支持 ARIA 属性的。
当页面格式不允许你直接用文本描述链接时,你可以使用 `aria-label` 属性来对链接进行描述。对于一个小玩意的详情描述可以被设置为:
``` html
<a href="#" aria-label="小玩意的详情">详情</a>
```
✅ 一般来说,使用此前提到的语义化标签会比使用 ARIA 更好,但是有时确实存在没法找到合适的语义标签来描述一些 HTML 元素。比如“树”,没有和“树”语义等价的 HTML 标签,所以你可以给这个元素选用一般的 `<div>` 标签,然后加上合理的 role 和 aria 属性值。[MDN ARIA 文档](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA)有更多有用的相关信息。
```html
<h2 id="tree-label">文件查看器</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">上传</div>
</div>
```
## 图像
毫无疑问,屏幕阅读器是没法自动阅读图像内容的,但是让图像变得无障碍并不会很麻烦 —— 这正是 `alt` 属性所做的事。所有有意义的图像都应该有一个 `alt` 属性来描述它们的内容是什么。纯装饰性的图像应该有一个被设为空字符串的 `alt` 属性:`alt=""`,这样可以防止屏幕阅读器画蛇添足地描述这些装饰性图像。
✅ 没错,搜索引擎也无法理解图片的内容,它们也会使用 alt 属性中的文本。这又一次证明,确保你的页面无障碍可以带来额外的好处!
## 键盘
一些用户没法使用鼠标或者触控板,而是只能依赖键盘交互来从一个元素切换到下一个元素。在你的网站上以有逻辑的顺序来展示内容是很重要的,这样一来键盘用户可以在往下浏览页面时访问到每一个可交互元素。如果你用你语义化标签来构建页面并且用 CSS 来控制它们的视觉外观,你的页面就应该会是可用键盘导航的,但是最好还是手动测试一遍。可在[键盘导航策略](https://webaim.org/techniques/keyboard/)了解更多关于这方面的内容。
✅ 前往任意一个网站然后尝试只使用你的键盘来导航。哪些可以正常使用?哪些不可以?为什么?
## 总结
只有部分人才能顺利访问的网页算不上真正的万维网world-wide web。确保你创造的网站无障碍地最好方式就是从一开始就贯彻无障碍的最佳实践。尽管这可能会引入额外的步骤但现在就将这些技术包含在你的工作流程中将意味着你创造的所有页面都会是无障碍的。
---
## 🚀 挑战
利用你学到的策略,尽可能将下方的 HTML 代码重写为无障碍的。
```html
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="site-header">
<p class="site-title">Turtle Ipsum</p>
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
</div>
<div class="main-nav">
<p class="nav-header">Resources</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
</div>
</div>
<div class="main-content">
<div>
<p class="page-title">Welcome to Turtle Ipsum.
<a href="">Click here</a> to learn more.
</p>
<p class="article-text">
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<div class="footer">
<div class="footer-section">
<span class="button">Sign up for turtle news</span>
</div><div class="footer-section">
<p class="nav-header footer-title">
Internal Pages
</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
</div>
</div>
<p class="footer-copyright">&copy; 2016 Instrument</span>
</div>
</body>
</html>
```
## 课后小测
[课后小测](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/6?loc=zh_cn)
## 复习 & 自学
许多政府有关于无障碍要求的法律,阅读一下你的国家与无障碍相关的法律。它涉及了哪些方面,又有哪些方面没有涉及?[这个政府网站](https://accessibility.blog.gov.uk/)是一个例子。
## 作业
[分析一个非无障碍网站](assignment.zh-cn.md)
参考:[Turtle Ipsum](https://github.com/Instrument/semantic-html-sample)作者Instrument

@ -1,6 +1,6 @@
# 建立無障礙網頁
![關於網頁親和力](../webdev101-a11y.png)
![關於網頁親和力](/sketchnotes/webdev101-a11y.png)
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
## 課前測驗

@ -0,0 +1,11 @@
# 分析一个非无障碍网站
## 说明
找到一个你认为无障碍性做得不好的网站,制定一个提升其无障碍性的计划表。你的第一个任务是找到这样一个网站,并在不借助分析工具的前提下详细指出你认为它无障碍做得不好的方面,然后再使用 Lighthouse 分析工具来分析它。借助分析的结果,制定一个包含至少十点的改进该网站的详细计划。
## 评价表
| 标准 | 优秀 | 良好 | 尚可进步 |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
| 书面报告 | 解释了这个网站做得不好的地方,将 Lighthouse 报告打印为 PDF 文件,至少十点可改进之处,每点详细说明了改进策略 | 缺少上述 20% 内容 | 缺少上述 50% 内容 |

@ -0,0 +1,17 @@
# 开始 Web 开发
在课程的这一部分,我们会通过不编写代码的方式介绍一些概念,这些概念对于成为一位专业的开发者非常重要。
### 主题
1. [编程语言概述与工具介绍](../1-intro-to-programming-languages/translations/README.zh-cn.md)
2. [GitHub 基础知识](../2-github-basics/translations/README.zh-cn.md)
3. [无障碍性基础知识](../3-accessibility/translations/README.zh-cn.md)
### 参考
无障碍性基础知识由 [Christopher Harrison](https://twitter.com/geektrainer) 用 ♥️ 编写
GitHub 基础知识由 [Floor Drees](https://twitter.com/floordrees) 用 ♥️ 编写
编程语言概述与工具介绍由 [Jasmine Greenaway](https://twitter.com/paladique) 用 ♥️ 编写

@ -1,6 +1,6 @@
# JavaScript Basics: Data Types
![JavaScript Basics - Data types](images/webdev101-js-datatypes.png)
![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -1,6 +1,6 @@
# Dasar-dasar JavaScript: Tipe Data
![Dasar-dasar JavaScript - Tipe data](../images/webdev101-js-datatypes.png)
![Dasar-dasar JavaScript - Tipe data](/sketchnotes/webdev101-js-datatypes.png)
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)

@ -1,6 +1,6 @@
# Nozioni di base su JavaScript: tipi di dato
![Nozioni di base su JavaScript: tipi di dati](../images/webdev101-js-datatypes.png)
![Nozioni di base su JavaScript: tipi di dati](/sketchnotes/webdev101-js-datatypes.png)
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz pre-lezione

@ -1,6 +1,6 @@
# JavaScript の基本: データ型
![JavaScript Basics - Data types](../images/webdev101-js-datatypes.png)
![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト

@ -1,6 +1,6 @@
# JavaScript 기초: 데이터 타입
![JavaScript Basics - Data types](../images/webdev101-js-datatypes.png)
![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈

@ -1,6 +1,6 @@
# Asas JavaScript: Jenis Data
![Asas JavaScript: Jenis Data](../images/webdev101-js-datatypes.png)
![Asas JavaScript: Jenis Data](/sketchnotes/webdev101-js-datatypes.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuiz Pra Kuliah

@ -1,6 +1,6 @@
# JavaScript Basics: Gegevenstypen
![JavaScript Basics - Data types](../images/webdev101-js-datatypes.png)
![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png)
> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz voorafgaand aan de lezing

@ -1,6 +1,6 @@
# JavaScript 入門 - 資料型態
![JavaScript 入門 - 資料型態](../images/webdev101-js-datatypes.png)
![JavaScript 入門 - 資料型態](/sketchnotes/webdev101-js-datatypes.png)
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
## 課前測驗

@ -1,6 +1,6 @@
# JavaScript Basics: Methods and Functions
![JavaScript Basics - Functions](images/webdev101-js-functions.png)
![JavaScript Basics - Functions](/sketchnotes/webdev101-js-functions.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -1,6 +1,6 @@
# Dasar-dasar JavaScript: Metode dan Fungsi
![Dasar-dasar JavaScript - Fungsi](../images/webdev101-js-functions.png)
![Dasar-dasar JavaScript - Fungsi](/sketchnotes/webdev101-js-functions.png)
> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)

@ -1,6 +1,6 @@
# Nozioni di base su JavaScript: Metodi e Funzioni
![Nozioni di base su JavaScript - Funzioni](../images/webdev101-js-functions.png)
![Nozioni di base su JavaScript - Funzioni](/sketchnotes/webdev101-js-functions.png)
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz pre-lezione

@ -1,6 +1,6 @@
# JavaScript の基本: メソッドと関数
![JavaScript Basics - Functions](../images/webdev101-js-functions.png)
![JavaScript Basics - Functions](/sketchnotes/webdev101-js-functions.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト

@ -1,6 +1,6 @@
# JavaScript 기초: 메소드와 함수
![JavaScript Basics - Functions](../images/webdev101-js-functions.png)
![JavaScript Basics - Functions](/sketchnotes/webdev101-js-functions.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈

@ -1,6 +1,6 @@
# Asas JavaScript: Kaedah dan Fungsi
![Asas JavaScript - Fungsi](../images/webdev101-js-functions.png)
![Asas JavaScript - Fungsi](/sketchnotes/webdev101-js-functions.png)
> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuiz Pra Kuliah

@ -1,6 +1,6 @@
# JavaScript 入門 - 函式與方法
![JavaScript 入門 - 函式](../images/webdev101-js-functions.png)
![JavaScript 入門 - 函式](/sketchnotes/webdev101-js-functions.png)
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
## 課前測驗

@ -1,6 +1,6 @@
# JavaScript Basics: Making Decisions
![JavaScript Basics - Making decisions](images/webdev101-js-decisions.png)
![JavaScript Basics - Making decisions](/sketchnotes/webdev101-js-decisions.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -1,6 +1,6 @@
# Dasar-dasar JavaScript: Membuat Keputusan
![Dasar-dasar JavaScript - Membuat Keputusan](../images/webdev101-js-decisions.png)
![Dasar-dasar JavaScript - Membuat Keputusan](/sketchnotes/webdev101-js-decisions.png)
> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)

@ -1,6 +1,6 @@
# Nozioni di base su JavaScript: Prendere Decisioni
![Nozioni di base su JavaScript - Prendere decisioni](../images/webdev101-js-decisions.png)
![Nozioni di base su JavaScript - Prendere decisioni](/sketchnotes/webdev101-js-decisions.png)
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pre-Lezione

@ -1,6 +1,6 @@
# JavaScript の基本: 意思決定
![JavaScript Basics - Making decisions](../images/webdev101-js-decisions.png)
![JavaScript Basics - Making decisions](/sketchnotes/webdev101-js-decisions.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト

@ -1,6 +1,6 @@
# JavaScript 기초: 결정하기
![JavaScript Basics - Making decisions](../images/webdev101-js-decisions.png)
![JavaScript Basics - Making decisions](/sketchnotes/webdev101-js-decisions.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈

@ -1,6 +1,6 @@
# Asas JavaScript: Membuat Keputusan
![Asas JavaScript - Membuat Keputusan](../images/webdev101-js-decisions.png)
![Asas JavaScript - Membuat Keputusan](/sketchnotes/webdev101-js-decisions.png)
> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuiz Pra Kuliah

@ -1,6 +1,6 @@
# JavaScript 入門 - 做出決定
![JavaScript 入門 - 做出決定](../images/webdev101-js-decisions.png)
![JavaScript 入門 - 做出決定](/sketchnotes/webdev101-js-decisions.png)
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
## 課前測驗

@ -1,6 +1,6 @@
# JavaScript Basics: Arrays and Loops
![JavaScript Basics - Arrays](images/webdev101-js-arrays.png)
![JavaScript Basics - Arrays](/sketchnotes/webdev101-js-arrays.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -1,6 +1,6 @@
# Dasar-dasar JavaScript: Array dan Loop
![Dasar-dasar JavaScript - Array](../images/webdev101-js-arrays.png)
![Dasar-dasar JavaScript - Array](/sketchnotes/webdev101-js-arrays.png)
> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)

@ -1,6 +1,6 @@
# Nozioni di base di JavaScript: Array e Cicli
![Nozioni di base su JavaScript - Array](../images/webdev101-js-arrays.png)
![Nozioni di base su JavaScript - Array](/sketchnotes/webdev101-js-arrays.png)
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pre-Lezione

@ -1,6 +1,6 @@
# JavaScript の基本: 配列とループ
![JavaScript Basics - Arrays](../images/webdev101-js-arrays.png)
![JavaScript Basics - Arrays](/sketchnotes/webdev101-js-arrays.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト

@ -1,6 +1,6 @@
# JavaScript 기초: 배열과 반복
![JavaScript Basics - Arrays](../images/webdev101-js-arrays.png)
![JavaScript Basics - Arrays](/sketchnotes/webdev101-js-arrays.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈

@ -1,6 +1,6 @@
# Asas JavaScript: Array dan Loop
![Asas JavaScript - Array](../images/webdev101-js-arrays.png)
![Asas JavaScript - Array](/sketchnotes/webdev101-js-arrays.png)
> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuiz Pra Kuliah

@ -1,6 +1,6 @@
# JavaScript 入門 - 矩陣與迴圈
![JavaScript 入門 - 矩陣](../images/webdev101-js-arrays.png)
![JavaScript 入門 - 矩陣](/sketchnotes/webdev101-js-arrays.png)
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
## 課前測驗

@ -1,6 +1,6 @@
# Terrarium Project Part 1: Introduction to HTML
![Introduction to HTML](images/webdev101-html.png)
![Introduction to HTML](/sketchnotes/webdev101-html.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -1,6 +1,6 @@
# Terrarium Project Parte 1: Introducción a HTML
![Introducción a HTML](images/webdev101-html.png)
![Introducción a HTML](/sketchnotes/webdev101-html.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/15)

@ -1,6 +1,6 @@
# Progetto Terrario Parte 1: Introduzione all'HTML
![Introduzione all'HTML](../images/webdev101-html.png)
![Introduzione all'HTML](/sketchnotes/webdev101-html.png)
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pre-Lezione

@ -1,6 +1,6 @@
# テラリウムプロジェクト その1: HTML 入門
![Introduction to HTML](../images/webdev101-html.png)
![Introduction to HTML](/sketchnotes/webdev101-html.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト

@ -1,6 +1,6 @@
# Terrarium 프로젝트 파트 1: HTML 소개
![Introduction to HTML](../images/webdev101-html.png)
![Introduction to HTML](/sketchnotes/webdev101-html.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈

@ -1,6 +1,6 @@
# Projek Terrarium Bahagian 1: Pengenalan Kepada HTML
![Pengenalan Kepada HTML](images/webdev101-html.png)
![Pengenalan Kepada HTML](/sketchnotes/webdev101-html.png)
> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuiz Pra Kuliah

@ -1,6 +1,6 @@
# 盆栽盒專案 Part 1 HTML 簡介
![HTML 簡介](../images/webdev101-html.png)
![HTML 簡介](/sketchnotes/webdev101-html.png)
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
## 課前測驗

@ -1,6 +1,6 @@
# Terrarium Project Part 2: Introduction to CSS
![Introduction to CSS](images/webdev101-css.png)
![Introduction to CSS](/sketchnotes/webdev101-css.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -1,6 +1,6 @@
# Terrarium Project Parte 2: Introducción a CSS
![Introducción a CSS](../images/webdev101-css.png)
![Introducción a CSS](/sketchnotes/webdev101-css.png)
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/17)

@ -1,6 +1,6 @@
# Progetto Terrario Parte 2: Introduzione a CSS
![Introduzione a CSS](../images/webdev101-css.png)
![Introduzione a CSS](/sketchnotes/webdev101-css.png)
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pre-Lezione

@ -1,6 +1,6 @@
# テラリウムプロジェクト その2: CSS 入門
![Introduction to CSS](../images/webdev101-css.png)
![Introduction to CSS](/sketchnotes/webdev101-css.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト

@ -1,6 +1,6 @@
# Terrarium 프로젝트 파트 2: CSS 소개
![Introduction to CSS](../images/webdev101-css.png)
![Introduction to CSS](/sketchnotes/webdev101-css.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈

@ -1,6 +1,6 @@
# Projek Terrarium Bahagian 2: Pengenalan Kepada CSS
![Pengenalan Kepada CSS](../images/webdev101-css.png)
![Pengenalan Kepada CSS](/sketchnotes/webdev101-css.png)
> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuiz Pra Kuliah

@ -1,6 +1,6 @@
# 盆栽盒專案 Part 2 CSS 簡介
![CSS 簡介](../images/webdev101-css.png)
![CSS 簡介](/sketchnotes/webdev101-css.png)
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
## 課前測驗

@ -1,6 +1,6 @@
# Terrarium Project Part 3: DOM Manipulation and a Closure
![DOM and a closure](images/webdev101-js.png)
![DOM and a closure](/sketchnotes/webdev101-js.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz

@ -1,6 +1,6 @@
# Terrarium Project Part 3: DOM Manipulación y cierre
! [DOM y un cierre](../images/webdev101-js.png)
! [DOM y un cierre](/sketchnotes/webdev101-js.png)
> Boceto de [Tomomi Imura](https://twitter.com/girlie_mac)
## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/19)

@ -1,6 +1,6 @@
# Progetto Terrario Parte 3: Manipolazione del DOM e Closure
![Manipolazione DOM e closure](../images/webdev101-js.png)
![Manipolazione DOM e closure](/sketchnotes/webdev101-js.png)
> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pre-Lezione

@ -1,6 +1,6 @@
# テラリウムプロジェクト その3: DOM の操作とクロージャ
![DOM and a closure](../images/webdev101-js.png)
![DOM and a closure](/sketchnotes/webdev101-js.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## レッスン前の小テスト

@ -1,6 +1,6 @@
# Terrarium 프로젝트 파트 3: DOM 조작과 클로저
![DOM and a closure](../images/webdev101-js.png)
![DOM and a closure](/sketchnotes/webdev101-js.png)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## 강의 전 퀴즈

@ -1,6 +1,6 @@
# Projek Terrarium Bahagian 3: Memanipulasi DOM dan Penutupan
![DOM dan penutupan](../images/webdev101-js.png)
![DOM dan penutupan](/sketchnotes/webdev101-js.png)
> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
## Kuiz Pra Kuliah

@ -1,6 +1,6 @@
# 盆栽盒專案 Part 3 - DOM 元素控制與閉包
![DOM 元素與閉包](../images/webdev101-js.png)
![DOM 元素與閉包](/sketchnotes/webdev101-js.png)
> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
## 課前測驗

@ -1,6 +1,6 @@
# Browser Extension Project Part 1: All about Browsers
![Browser sketchnote](images/sketchnote.jpg)
![Browser sketchnote](/sketchnotes/browser.jpg)
> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Pre-Lecture Quiz

@ -1,6 +1,6 @@
# Proyecto de extensión del navegador Parte 1: Todo sobre los navegadores
![Browser sketchnote](images/sketchnote.jpg)
![Browser sketchnote](/sketchnotes/browser.jpg)
> Sketchnote de [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## [Pre-lecture prueba](https://nice-beach-0fe9e9d0f.azurestaticapps.net/quiz/23)

@ -1,6 +1,6 @@
# Progetto di Estensione del Browser Parte 1: Tutto sui Browser
![schizzo di un browser](../images/sketchnote.jpg)
![schizzo di un browser](/sketchnotes/browser.jpg)
> Sketchnote di [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Quiz Pre-Lezione

@ -1,6 +1,6 @@
# ブラウザ拡張機能プロジェクト その 1: ブラウザのすべて
![Browser sketchnote](../images/sketchnote.jpg)
![Browser sketchnote](/sketchnotes/browser.jpg)
> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## レッスン前の小テスト

@ -1,6 +1,6 @@
# 브라우저 확장 프로젝트 파트 1: 브라우저에 대한 모든 것
![Browser sketchnote](../images/sketchnote.jpg)
![Browser sketchnote](/sketchnotes/browser.jpg)
> Sketchnote by [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## 강의 전 퀴즈

@ -1,6 +1,6 @@
# Projek Pelanjutan Penyemak Imbas Bahagian 1: Semua mengenai Penyemak Imbas
![Sketchnote penyemak imbas](../images/sketchnote.jpg)
![Sketchnote penyemak imbas](/sketchnotes/browser.jpg)
> Sketchnote karya [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Kuiz Pra Kuliah

@ -1,6 +1,6 @@
# 瀏覽器擴充功能專案 Part 1關於瀏覽器
![瀏覽器繪圖筆記](../images/sketchnote.jpg)
![瀏覽器繪圖筆記](/sketchnotes/browser.jpg)
> 由 [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob) 繪製
## 課前測驗

@ -52,32 +52,32 @@ While we have purposefully avoided introducing JavaScript frameworks so as to co
## Lessons
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Written Lesson | Sketchnote | Assignment | Starting Quiz | Ending Quiz | Video | Author |
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :------------: | :--------: | :--------: | :-----------: | :---------: | :---: | :---------------------: |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
| 02 | Getting Started | Basics of GitHub, includes working with a team | How to use GitHub in your project, how to collaborate with others on a code base | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Floor |
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Christopher |
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](/2-js-basics/1-data-types/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Jen |
| 15 | [Space Game](/6-space-game/solution) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 16 | [Space Game](/6-space-game/solution) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 17 | [Space Game](/6-space-game/solution) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 18 | [Space Game](/6-space-game/solution) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 19 | [Space Game](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 20 | [Space Game](/6-space-game/solution) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](/6-space-game/6-end-condition/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | Chris |
| 21 | [Banking App](/7-bank-project/solution) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
| 23 | [Banking App](/7-bank-project/solution) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](/7-bank-project/3-data/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management/README.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | Yohan |
| | Project Name | Concepts Taught | Learning Objectives | Linked Lesson | Author |
| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
| 01 | Getting Started | Introduction to Programming and Tools of the Trade | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) | Jasmine |
| 02 | Getting Started | Basics of GitHub, includes working with a team | How to use GitHub in your project, how to collaborate with others on a code base | [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md) | Floor |
| 03 | Getting Started | Accessibility | Learn the basics of web accessibility | [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | JS Basics | JavaScript Data Types | The basics of JavaScript data types | [Data Types](/2-js-basics/1-data-types/README.md) | Jasmine |
| 05 | JS Basics | Functions and Methods | Learn about functions and methods to manage an application's logic flow | [Functions and Methods](/2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher |
| 06 | JS Basics | Making Decisions with JS | Learn how to create conditions in your code using decision-making methods | [Making Decisions](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
## Offline access

@ -0,0 +1,41 @@
<!-- BEGIN MICROSOFT SECURITY.MD V0.0.5 BLOCK -->
## Security
Microsoft takes the security of our software products and services seriously, which includes all source code repositories managed through our GitHub organizations, which include [Microsoft](https://github.com/Microsoft), [Azure](https://github.com/Azure), [DotNet](https://github.com/dotnet), [AspNet](https://github.com/aspnet), [Xamarin](https://github.com/xamarin), and [our GitHub organizations](https://opensource.microsoft.com/).
If you believe you have found a security vulnerability in any Microsoft-owned repository that meets [Microsoft's definition of a security vulnerability](https://docs.microsoft.com/en-us/previous-versions/tn-archive/cc751383(v=technet.10)), please report it to us as described below.
## Reporting Security Issues
**Please do not report security vulnerabilities through public GitHub issues.**
Instead, please report them to the Microsoft Security Response Center (MSRC) at [https://msrc.microsoft.com/create-report](https://msrc.microsoft.com/create-report).
If you prefer to submit without logging in, send email to [secure@microsoft.com](mailto:secure@microsoft.com). If possible, encrypt your message with our PGP key; please download it from the [Microsoft Security Response Center PGP Key page](https://www.microsoft.com/en-us/msrc/pgp-key-msrc).
You should receive a response within 24 hours. If for some reason you do not, please follow up via email to ensure we received your original message. Additional information can be found at [microsoft.com/msrc](https://www.microsoft.com/msrc).
Please include the requested information listed below (as much as you can provide) to help us better understand the nature and scope of the possible issue:
* Type of issue (e.g. buffer overflow, SQL injection, cross-site scripting, etc.)
* Full paths of source file(s) related to the manifestation of the issue
* The location of the affected source code (tag/branch/commit or direct URL)
* Any special configuration required to reproduce the issue
* Step-by-step instructions to reproduce the issue
* Proof-of-concept or exploit code (if possible)
* Impact of the issue, including how an attacker might exploit the issue
This information will help us triage your report more quickly.
If you are reporting for a bug bounty, more complete reports can contribute to a higher bounty award. Please visit our [Microsoft Bug Bounty Program](https://microsoft.com/msrc/bounty) page for more details about our active programs.
## Preferred Languages
We prefer all communications to be in English.
## Policy
Microsoft follows the principle of [Coordinated Vulnerability Disclosure](https://www.microsoft.com/en-us/msrc/cvd).
<!-- END MICROSOFT SECURITY.MD BLOCK -->

@ -0,0 +1,11 @@
# Support
## How to file issues and get help
This project uses GitHub Issues to track bugs and feature requests. Please search the existing issues before filing new issues to avoid duplicates. For new issues, file your bug or feature request as a new Issue.
For help and questions about using this project, please refer to [our contributing guidelines](CONTRIBUTING.md).
## Microsoft Support Policy
Support for this project is limited to the resources listed above.

Before

Width:  |  Height:  |  Size: 147 KiB

After

Width:  |  Height:  |  Size: 147 KiB

Before

Width:  |  Height:  |  Size: 2.0 MiB

After

Width:  |  Height:  |  Size: 2.0 MiB

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

Before

Width:  |  Height:  |  Size: 1.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save