Merge branch 'microsoft:main' into main

pull/515/head
Charles Emmanuel S. Ndiaye 4 years ago committed by GitHub
commit 9ed5acf0c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -67,3 +67,4 @@ assignees: ''
- [ ] state-management README
- [ ] state-management assignment
- [ ] solution base README
- [ ] API base README

@ -0,0 +1,203 @@
# Введение в языки программирования и инструменты разработки
Этот урок охватывает основы языков программирования. Рассматриваемые здесь темы применимы к большинству современных языков программирования. В разделе «Инструменты разработки» вы узнаете о полезном программном обеспечении, которое поможет вам как разработчику.
![Введение в программирование](/sketchnotes/webdev101-programming.png)
> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac)
## Предлекционный квиз
[Предлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1)
## Введение
В этом уроке мы рассмотрим:
- Что такое программирование?
- Типы языков программирования
- Основные элементы программы
- Полезный софт и инструментарий для профессионального разработчика
> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)!
## Что такое программирование?
Программирование (также известное как кодирование) - это процесс записи инструкций на устройство, такое как компьютер или мобильное устройство. Мы пишем эти инструкции на языке программирования, который затем интерпретируется устройством. Эти наборы инструкций могут называться различными именами, но _программа_, омпьютерная программа_, _приложение_ и сполняемый файл_ - это несколько популярных имен.
рограммой_ может быть что угодно, написанное с помощью кода: веб-сайты, игры и приложения для телефона - это программы. Хотя можно создать программу без написания кода, основная логика интерпретируется на устройстве, и эта логика, скорее всего, была кем-то написана с помощью кода. Программа, которая апущена_ или сполняет код_, выполняет инструкции. Устройство, на котором вы сейчас читаете этот урок, запускает программу для его вывода на ваш экран.
✅ Проведите небольшое исследование: кто считается первым в мире программистом?
## Языки программирования
Языки программирования служат основной цели: с их помощью разработчики могут создавать инструкции для отправки на устройство. Устройства могут понимать только двоичный код (единицы и нули), и для _большинства_ разработчиков это не очень эффективный способ общения. Языки программирования - это средство общения между людьми и компьютерами.
Языки программирования бывают разных форматов и могут служить разным целям. Например, JavaScript в основном используется для веб-приложений, а Bash - в основном для операционных систем.
_Языки низкого уровня_ обычно требуют меньше этапов, чем языки _высокого уровня_, чтобы устройство могло интерпретировать инструкции. Однако то, что делает языки высокого уровня популярными, - это их удобочитаемость и поддержка. 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://ru.wikipedia.org/wiki/Числа_Фибоначчи) как набор чисел, каждое из которых является суммой двух предыдущих, начиная с 0 и 1.
## Элементы программы
Одиночная инструкция в программе называется _выражением_ и обычно имеет символ или межстрочный интервал, который отмечает, где инструкция разделяется, или аканчивается_. Способ завершения программы зависит от языка.
В тех местах, где выражения могут полагаться на данные для выполнения инструкций, большинство программ полагаются на использование данных от пользователя или из других источников. Данные могут изменить поведение программы, поэтому в языках программирования есть способ временного хранения данных, которые можно использовать позже. Эти данные называются _переменными_. Переменные - это выражения, которые инструктируют устройство сохранять данные в памяти устройства. Переменные в программах аналогичны переменным в алгебре, где они имеют уникальное имя, и их значение может меняться со временем.
Есть вероятность, что некоторые выражения не будут выполнены устройством. Обычно это сделано намеренно, когда написано разработчиком, или случайно, когда возникает непредвиденная ошибка. Этот тип управления приложением делает его более надежным и удобным в обслуживании. Обычно эти изменения в управлении происходят, когда выполняются определенные условия. В современных языках программирования распространенным выражением для управления исполнением программы является `if..else` (если..то).
✅ Вы узнаете больше об этом типе инструкций в следующих уроках.
## Инструметы разработки
[![Инструметы разработки](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
> 🎥 Нажмите на изображение выше, чтобы просмотреть видео об инструментах
В этом разделе вы узнаете о программном обеспечении, которое может оказаться очень полезным в начале вашего пути профессионального развития.
**Среда разработки** - это уникальный набор инструментов и функций, которые разработчик может часто использовать при написании программного обеспечения. Некоторые из этих инструментов были настроены для конкретных нужд разработчика и могут измениться со временем, если разработчик меняет приоритеты в работе или личных проектах, или когда он использует другой язык программирования. Среды разработки столь же уникальны, как и разработчики, которые их используют.
### Редакторы
Один из важнейших инструментов разработки программного обеспечения - редактор. Редакторы - это место, где вы пишете свой код, а иногда и где вы запускаете свой код.
Разработчики полагаются на редакторы кода и по нескольким дополнительным причинам.:
- _Отладка_ Выявление багов и ошибок путем пошагового выполнения кода, строка за строкой. Некоторые редакторы имеют возможности отладки или могут быть настроены для определенных языков программирования.
- одсветка синтаксиса_ Добавляет в код цвета и форматирование текста, упрощает чтение. Большинство редакторов позволяют настраивать подсветку синтаксиса.
- _Расширения и интеграции_ Дополнения, созданные разработчиками и специально предназначенные для разработчиков, предоставляют доступ к дополнительным инструментам, которые не встроены в базовый редактор. Например, многим разработчикам также нужен способ документировать свой код и объяснять, как он работает, и они установят расширение проверки орфографии для проверки опечаток. Большинство этих дополнений предназначены для использования в конкретном редакторе, и большинство редакторов имеют возможность поиска доступных расширений.
- _Настройка_ Большинство редакторов легко настраиваются, и у каждого разработчика будет своя собственная уникальная среда разработки, которая соответствует его потребностям. Многие редакторы также позволяют разработчикам создавать свои собственные расширения.
#### Популярные редакторы и расширения для веб-разработки
- [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)
### Браузеры
Еще один важный инструмент - браузер. Веб-разработчики полагаются на браузер, чтобы наблюдать за тем, как их код работает в сети, он также используется для просмотра визуальных элементов веб-страницы, написанных в редакторе, например HTML.
Многие браузеры оснащены _инструментами разработчика_ (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)
### Инструменты командной строки
Некоторые разработчики предпочитают менее графическое представление для своих повседневных задач и полагаются на командную строку для достижения этой цели. Разработка кода требует значительного набора текста, и некоторые разработчики предпочитают не мешать работе с клавиатурой и будут использовать сочетания клавиш для переключения между окнами рабочего стола, работы с разными файлами и использования инструментов. Большинство задач можно выполнить с помощью мыши, но одним из преимуществ использования командной строки является то, что многое можно сделать с помощью инструментов командной строки без необходимости переключаться между мышью и клавиатурой. Еще одним преимуществом командной строки является то, что они настраиваются, и вы можете сохранить свою настраиваемую конфигурацию, изменить ее позже, а также импортировать ее на новые устройства для разработки. Поскольку среды разработки настолько уникальны для каждого разработчика, некоторые избегают использования командной строки, некоторые будут полностью полагаться на нее, а некоторые предпочитают сочетание двух.
### Популярные параметры командной строки
Параметры командной строки зависят от используемой вами операционной системы.
_💻 = предустановлен в операционной системе._
#### 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) (also known as 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/konsole/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/) (💻 on most operating systems)
- [NPM](https://www.npmjs.com/)
- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
### Документация
Когда разработчик хочет узнать что-то новое, он, скорее всего, обратится к документации, чтобы узнать, как это использовать. Разработчики часто полагаются на документацию, которая поможет им понять, как правильно использовать инструменты и языки, а также получить более глубокие знания о том, как они работают.
#### Популярная документация по веб-разработке
- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), от Mozilla, создателей браузера [Firefox](https://www.mozilla.org/firefox/)
- [Frontend Masters](https://frontendmasters.com/learn/)
- [Web.dev](https://web.dev), от Google, создателей браузера [Chrome](https://www.google.com/chrome/)
- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), для [Microsoft Edge](https://www.microsoft.com/edge)
✅ Проведите небольшое исследование: теперь, когда вы знаете основы среды веб-разработчика, сравните и сопоставьте ее со средой веб-дизайнера.
---
## 🚀 Челлендж
Сравните несколько языков программирования. В чем заключаются уникальные черты JavaScript и Java? Как насчет COBOL vs. Go?
## Постлекционный квиз
[Постлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2)
## Обзор и самообучение
Изучите немного разные языки программирования, доступные программисту. Попробуйте написать строку на одном языке, а затем повторите ее на двух других. Какие языки вы изучаете?
## Задание
[Чтение документации](assignment.md)

@ -0,0 +1,11 @@
# Читання документів
## Інструкції
Існує багато інструментів, які можуть знадобитися веб-розробнику [MDN документація для client-side інструментів](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Виберіть 3 інструменти, які не розглянуті в уроці, поясніть, чому веб-розробник використав би їх, знайдіть інструмент, який підпадає під цю категорію, і поділіться його документацією. Не використовуйте той самий приклад інструмента для документів MDN.
## Рубрика
Зразковий | Достатній | Потребує покращення
--- | --- | -- |
| Пояснено, чому веб-розробник використовує інструмент| Пояснив як, але не пояснив чому розробник використовує інструмент| Не згадав як і чому розробник буде використовувати інструмент |

@ -0,0 +1,321 @@
# Введение в GitHub
В этом уроке рассматриваются основы GitHub - платформы для хранения и управления изменениями вашего кода.
![Введение в GitHub](/sketchnotes/webdev101-github.png)
> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac)
## Предлекционный квиз
[Предлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3)
## Введение
В этом уроке мы рассмотрим:
- отслеживание работы, которую вы делаете на своем устройстве
- совместная работа над проектами с другими людьми
- как внести свой вклад в программное обеспечение с открытым исходным кодом
### Требования
Прежде чем начать, вам нужно проверить, установлен ли Git. В терминале напечатайте:
`git --version`
Если Git не установлен, [установите Git](https://git-scm.com/downloads). Затем настройте свой локальный профиль Git в терминале:
- `git config --global user.name "ваше-имя"`
- `git config --global user.email "ваш-email"`
Чтобы проверить, настроен ли уже Git, вы можете ввести:
`git config --list`
Вам также понадобится аккаунт на GitHub, редактор кода (например, Visual Studio Code) и вам нужно будет открыть свой терминал (или командную строку).
Перейдите на [github.com](https://github.com/) и создайте аккаунт, если вы еще этого не сделали, или войдите в систему и заполните свой профиль.
✅ GitHub - не единственная платформа для хранения репозиториев кода в мире; есть и другие, но GitHub - самый известный.
### Подготовка
Вам понадобится как папка с проектом кода на вашем локальном компьютере (ноутбуке или ПК), так и общедоступный репозиторий на GitHub, который мы используем, чтобы показать, как внести свой вклад в другие проекты.
---
## Управление кодом
Допустим, у вас есть локальная папка с каким-то проектом и вы хотите начать отслеживать свой прогресс с помощью системы контроля версий Git. Некоторые люди сравнивают использование git с написанием любовного письма себе в будущем. Читая сообщения коммитов через несколько дней, недель или месяцев, вы сможете вспомнить, почему вы сделали так, а не иначе, или сможете «откатить» изменения.
### Задание: Сделать репозиторий и сделать коммит
1. **Создайте репозиторий на GitHub**. На GitHub.com на вкладке репозиториев или в правом верхнем углу панели навигации найдите кнопку **новый репозиторий**.
1. Дайте вашему репозиторию (папке) имя
1. Выберите **создать репозиторий**.
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. **Добавьте все файлы для отслеживания**.
Это также называется подготовленными файлами (staging files) / добавлением файлов в область подготовленных файлов (staging area).
```bash
git add .
```
Команда `git add` с аргументом `.` указывает, что все ваши файлы и изменения будут добавлены для отслеживания.
1. **Добавьте выбранные файлы для отслеживания**
```bash
git add [название файла или папки]
```
Это помогает нам добавлять только выбранные файлы в область подготовки, когда мы не хотим фиксировать все файлы сразу.
1. **Удаление всех файлов из области подготовки**
```bash
git reset
```
Эта команда помогает нам убрать все файлы сразу из staging area.
1. **Удаление определенного файла из области подготовки**
```bash
git reset [название файла или папки]
```
Эта команда помогает нам убрать определенный файл, который мы не хотим включать в следующий коммит.
1. **Сохраняйте свою работу**. На этом этапе вы добавили файлы в так называемую _staging area (область подготовки)_. Место, где Git отслеживает ваши файлы. Чтобы сделать изменение постоянным, вам необходимо акоммитить (зафиксировать)_ файлы. Для этого вы создаете оммит_ с помощью команды `git commit`. _Коммит_ представляет собой точку сохранения в истории вашего репозитория. Введите следующее, чтобы создать новый оммит_:
```bash
git commit -m "первый коммит"
```
Эта команда сохраняет все ваши файлы, добавляя сообщение «первый коммит». Для будущих сообщений коммитов вам нужно будет быть более информативным в своем описании, чтобы передать, какой тип изменения вы внесли.
1. **Подключите локальный репозиторий Git к GitHub**. Репозиторий Git хорош на вашем компьютере, но в какой-то момент вы захотите сделать резервную копию ваших файлов, а также пригласить других людей поработать с вами над вашим проектом. Одно из таких прекрасных мест для этого - GitHub. Помните, что мы уже создали репозиторий на GitHub, поэтому единственное, что нам нужно сделать, это подключить наш локальный репозиторий Git к GitHub. Команда `git remote add` предназначена именно для этого. Введите следующую команду:
> Обратите внимание: прежде чем вводить команду, перейдите на страницу репозитория GitHub, чтобы найти URL-адрес репозитория. Вы будете использовать его в приведенной ниже команде. Замените `username/repository_name` своим URL-адресом репозитория на GitHub.
```bash
git remote add origin https://github.com/username/repository_name.git
```
Эта команда создает _удаленное соединение_ с именем «origin», указывающее на репозиторий GitHub, который вы создали ранее.
1. **Отправьте локальные файлы в GitHub**. Итак, вы создали _соединение_ между локальным репозиторием и репозиторием на GitHub. Давайте отправим эти файлы на GitHub с помощью следующей команды `git push`, вот так:
```bash
git push -u origin main
```
Эта команда отправляет коммиты из вашей локальной ветки "main" в одноименную ветку на GitHub.
1. **Добавление последующих изменений**. Если вы хотите продолжить вносить изменения и отправлять их на GitHub, вам просто нужно использовать следующие три команды:
```bash
git add .
git commit -m "напишите здесь свое сообщения для коммита"
git push
```
> Совет: вы также можете использовать файл `.gitignore`, чтобы файлы, которые вы не хотите отслеживать, не отправлялись на GitHub. Например, файл заметок, который вы храните в той же папке, но не хотите, чтобы он отображался в публичном репозитории. Вы можете найти шаблоны для файлов `.gitignore` по следующей ссылке [.gitignore templates](https://github.com/github/gitignore).
#### Сообщения коммитов
Хорошее сообщение к коммиту должно завершать следующее предложение:
_Если применить этот коммит, то он <ваше сообщение к коммиту>_
(_If applied, this commit will <your subject line here>_)
Для основного сообщения к коммиту используйте повелительное наклонение в настоящем времени: «change», а не «changed» или «changes». Также и в расширенном сообщении (которое необязательно) используйте повелительное наклонение в настоящем времени. Основное сообщение должно включать мотивацию к изменению и противопоставлять это предыдущему поведению. Вы объясняете `почему`, а не `как`.
✅ Потратьте несколько минут, чтобы немного исследовать GitHub. Сможете ли вы найти действительно отличное сообщение к коммиту? Можете ли вы найти минимальное сообщение к коммиту? Какую информацию вы считаете наиболее важной и полезной для передачи в сообщении к коммиту?
### Задание: Сотрудничество
Основная причина размещения проектов на GitHub заключается в том, чтобы дать возможность сотрудничать с другими разработчиками.
## Работа над проектами с другими разработчиками
В своем репозитории перейдите в `Insights> Community`, чтобы увидеть, как ваш проект сравнивается с рекомендованными стандартами сообщества.
Вот несколько вещей, которые могут улучшить ваш репозиторий на GitHub:
- **Описание**. Вы добавили описание для своего проекта?
- **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/).
- **Лицензия**. Возможно, самое важное - это [лицензия](https://docs.github.com/articles/adding-a-license-to-a-repository/).
Все эти ресурсы принесут пользу новым членам команды. И это, как правило, те вещи, на которые новые участники смотрят, прежде чем даже взглянуть на ваш код, чтобы узнать, является ли ваш проект подходящим местом для них, чтобы тратить свое время.
✅ Файлы README часто игнорируются занятыми разработчиками из-за нехватки времени на их подготовку. Можете ли вы найти пример README с хорошим описанием проекта? Примечание: есть несколько [инструментов для создания хороших README](https://www.makeareadme.com/), которые вы, возможно, захотите попробовать.
### Задание: Слияние кода
Документ CONTRIBUTING.md помогает людям разобраться, как вносить свой вклад в проект. В нем объясняется, какие типы вкладов вас интересуют и как работает этот процесс. Чтобы внести свой вклад в ваш репозиторий на GitHub, участникам потребуется выполнить ряд шагов:
1. **Сделать ответвление вашего репозитория (Forking)**. Вы, вероятно, захотите, чтобы люди сделали _ответвление (fork)_ вашего проекта. Ответвление означает создание копии вашего репозитория в их профиле GitHub.
1. **Клонировать**. Оттуда они будут клонировать проект на свой локальный компьютер.
1. **Создать ветку**. Вы можете попросить их создать етку_ для своей работы.
1. **Сосредоточить свои изменения на одной области**. Попросите участников концентрировать свой вклад на чем-то одном - так шансы, что вы сможете провести _слияние кода_ с их работой, будут выше. Представьте, что они написали исправление ошибки, добавили новую функцию и обновили несколько тестов - что, если вы хотите или можете принять только 2 из 3 или 1 из 3 изменений?
✅ Придумайте ситуацию, в которой ветки особенно важны для написания и распространения хорошего кода. Какие варианты использования приходят вам на ум?
> Примечание: будьте тем изменением, которое вы хотите увидеть в мире, и также создавайте ответвления для своей собственной работы. Любые совершаемые вами коммиты будут выполняться в той ветке, в которой вы в настоящее время находитесь. Используйте `git status`, чтобы узнать, какая это ветка.
Давайте рассмотрим рабочий процесс соавтора. Предположим, что соавтор уже _сделал ответвление_ и _склонировал_ ваш репозиторий, поэтому у него на локальном компьютере есть репозиторий Git, готовый к работе:
1. **Создание ветки**. Используйте команду `git branch` для создания ветки, которая будет содержать изменения, которые вы хотите внести:
```bash
git branch [название-ветки]
```
1. **Переход в рабочую ветку**. Переключитесь на указанную ветку и обновите рабочую папку с помощью команды `git checkout`:
```bash
git checkout [branch-name]
```
1. **Написание кода**. На этом этапе вы хотите добавить свои изменения. Не забудьте сообщить об этом Git с помощью следующих команд:
```bash
git add .
git commit -m "мои изменения"
```
Убедитесь, что вы написали хорошее сообщение для своего коммита, понятное как для себя, так и для владельца репозитория, которому вы помогаете.
1. **Совместите свою работу с веткой `main`**. В какой-то момент вы закончили работу и хотите совместить свою работу с работой над веткой `main`. Ветка `main` за это время могла измениться, поэтому убедитесь, что вы сначала обновили ее до последней версии с помощью следующих команд:
```bash
git checkout main
git pull
```
На этом этапе вы хотите убедиться, что любые онфликты_, ситуации, когда Git не может легко омбинировать_ изменения, происходят в вашей рабочей ветке. Поэтому выполните следующие команды:
```bash
git checkout [название-ветки]
git merge main
```
Это внесет все изменения из main в вашу ветку, и, надеюсь, вы сможете продолжить. Если нет, VS Code сообщит вам, где Git е может самостоятельно решить конфликт_, и вы просто измените затронутые файлы, чтобы указать, какой контент является наиболее точным.
1. **Отправьте свою работу на GitHub**. Отправка вашей работы на GitHub означает две вещи. Отправьте свою ветку (push) в репозиторий, а затем откройте пул реквест (сокращенно PR).
```bash
git push --set-upstream origin [название-ветки]
```
Приведенная выше команда создает ветку в вашем, ответвленном от основного, репозитории.
1. **Открытие PR**. Далее вы хотите открыть PR. Вы делаете это, перейдя к ответвленному репозиторию на GitHub. Вы увидите подсказку на GitHub, где вам предложат, хотите ли вы создать новый PR. Вы нажимаете на это указание, и попадаете в интерфейс, где вы можете изменить заголовок сообщения к пул реквесту, можете дать ему более подходящее описание. Теперь владелец репозитория, от которого вы сделали ответвление, увидит этот PR, и (_скрестим пальцы_) он одобрит и примет ваш PR в свой репозиторий. Теперь вы соавтор, ура :)
1. **Чистка (Clean up)**. Хорошей практикой считается _чистка_ после успешного слияния PR. Вы хотите очистить как локальную ветку, так и ветку, которую вы отправили на GitHub. Сначала удалим ее локально с помощью следующей команды:
```bash
git branch -d [название-ветки]
```
Убедитесь, что вы перешли на страницу GitHub для ответвленного репозитория и удалили удаленную ветку, которую вы только что отправили на GitHub.
`Pull request` (дословно: запрос на стягивание) кажется глупым термином, потому что на самом деле вы хотите отправить (push) свои изменения в проект. Но владелец проекта или основная команда должны рассмотреть ваши изменения перед слиянием их с основной ветвью проекта ("main"), поэтому вы действительно запрашиваете разрешение у владедьца о стягивании ваших изменений.
Pull request - это место, где можно сравнить и обсудить изменения, представленные в ветке, проверками, комментариями, интегрированными тестами и т.д. Хороший pull request следует примерно тем же правилам, что и сообщение к коммиту. Вы можете добавить ссылку на вопрос (issue) в систему отслеживания проблем, например, когда вы работаете над устранением проблемы/бага. Это делается с помощью символа `#`, за которым следует номер вашего issue. Например, `# 97`.
🤞Скрестив пальцы, все проверки проходят, и владелец (владельцы) проекта проводят слияние ваших изменений в проект🤞
Обновите текущую локальную рабочую ветку всеми новыми коммитами из соответствующей удаленной ветки на GitHub с помощью следующей команды:
`git pull`
## Как внести свой вклад в открытый исходный код
Во-первых, давайте найдем репозиторий на GitHub, который вас интересует и в который вы хотели бы внести изменения. Вам неоходимо скопировать его содержимое на свой компьютер.
✅ Хороший способ найти репозитории, удобные для новичков, - это [поиск по тегу '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 CLI (интерфейс командной строки).
Откройте свой терминал и клонируйте репозиторий вот так:
`git clone https://github.com/ProjectURL`
Для работы над проектом перейдите в правильную папку:
`cd ProjectURL`
Вы также можете открыть весь проект, используя [Codespaces](https://github.com/features/codespaces), встроенный редактор кода / облачная среда разработки GitHub или [GitHub Desktop](https://desktop.github.com/).
Наконец, вы можете загрузить код в заархивированной папке.
### Еще несколько интересных вещей о GitHub
Вы можете отметить, посмотреть и / или «разветвить» любой публичный репозиторий на GitHub. Вы можете найти свои отмеченные репозитории в раскрывающемся меню в правом верхнем углу. Это как закладка, но для кода.
В проектах есть средство отслеживания проблем, в основном на GitHub на вкладке «Проблемы» (Issues), если не указано иное, где люди обсуждают проблемы, связанные с проектом. А на вкладке «Pull Requests» люди обсуждают и просматривают изменения, которые происходят.
Проекты также могут обсуждаться на форумах, в списках рассылки или в чатах, таких как Slack, Discord или IRC.
✅ Осмотрите свой новый репозиторий GitHub и попробуйте несколько вещей, например, отредактируйте настройки, добавьте информацию в репозиторий и создайте проект (например, доску Канбан). Вы можете многое сделать!
---
## 🚀 Челлендж
Объединитесь с другом, чтобы работать над кодом друг друга. Совместно создавайте проект, разветвляйте код, создавайте ветви и объединяйте изменения.
## Постлекционный квиз
[Постлекционный квиз](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4)
## Обзор и самообучение
Подробнее об [участие в разработке программного обеспечения с открытым исходным кодом](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
[Шпаргалка по Git](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)

@ -0,0 +1,16 @@
# Проанализировать сайт не оптимизированный для людей с ограниченными возможностями
## Инструкции
Определите веб-сайт, который, по вашему мнению, НЕ оптимизирован для людей с ограниченными возможностями, и составьте план действий по его оптимизации.
Ваша задача - идентифицировать такой сайт, подробно описать способы, которыми, по вашему мнению, он недоступен без использования аналитических инструментов, а затем отправить его на анализ Lighthouse. Сделайте PDF-файл с результатами этого анализа и наметьте подробный план с минимум десятью пунктами, показывающими, как можно улучшить сайт.
## Таблица для проверки доступности сайта (accessibility)
| Критерии | Образцовый | Адекватный | Нуждается в улучшении |
| -------- | ------------------------------------ | ---------------------------------- | ---------------------------------- |
| | отсутствует <10% того, что требуется | не хватает 20% того, что требуется | не хватает 50% того, что требуется |
---
Ваш отчет должен содержать следующее: включает параграфы о том, насколько недоступен сайт, отчет Lighthouse, записанный в формате PDF, список из десяти пунктов, которые следует улучшить, с подробностями о том, как его улучшить.

@ -0,0 +1,21 @@
# Початок роботи з веб-розробкою
У цьому розділі навчальної програми ви познайомитеся з концепціями важливими для того, щоб стати професійним розробником, які не опираються на проектах.
### Теми
1. [Введення до мов програмування та інструменти](../1-intro-to-programming-languages/README.md)
2. [Ввід до GitHub](../2-github-basics/README.md)
3. [Основи доступності](../3-accessibility/README.md)
### Титри
Введення до мов програмування та інструменти були написані з ♥️ від [Jasmine Greenaway](https://twitter.com/paladique)
Ввід до GitHub були написані з ♥️ від [Floor Drees](https://twitter.com/floordrees)
Основи доступності були написані з ♥️ від [Christopher Harrison](https://twitter.com/geektrainer)

@ -0,0 +1,14 @@
# Вступ до JavaScript
JavaScript — це мова Інтернету. На цих чотирьох уроках ви дізнаєтеся його основи.
### Теми
1. [Змінні та типи данних](../1-data-types/README.md)
2. [Функції та Методи](../2-functions-methods/README.md)
3. [Прийняття рішень в JavaScript](../3-making-decisions/README.md)
4. [Масиви та Цикли](../4-arrays-loops/README.md)
### Титри
Ці уроки були написані з ♥️ від [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) та [Chris Noring](https://twitter.com/chris_noring)

@ -0,0 +1,231 @@
# Projeto terrario Parte 1: Introdução a HTML
![Introdução a HTML](/sketchnotes/webdev101-html.png)
> Esboço por [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz Pré-aula
[Quiz pré-aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/15)
### Introdução
HTML, ou Linguagem de Marcação de Hypertexto, é o 'esqueleto' da web. Se CSS 'veste' o seu HTML e JavaScript o dá vida, HTML é o corpo de sua aplicação web. A própria sintaxe HTML reflete isso, ao passo que ela inclui tags "head" (cabeça), "body" (corpo), e "footer" (rodapé).
Nesta lição, usaremos HTML para fazer o layout do 'esqueleto' da interface do nosso terrário virtual. Terá um título e três colunas: uma coluna à direita e outra à esquerda, onde vivem as plantas arrastáveis, e uma área central que será o verdadeiro terrário de aspecto de vidro. Ao final desta lição, você poderá ver as plantas nas colunas, mas a interface parecerá um pouco estranha; não se preocupe, na próxima seção você adicionará estilos CSS à interface para torná-la mais bonita.
### Tarefa
Em seu computador, crie uma pasta chamada 'terrario' e, dentro dela, um arquivo chamado 'index.html'. Você pode fazer isso no Visual Studio Code depois de criar sua pasta terrarium, abrindo uma nova janela do VS Code, clicando em 'abrir pasta' e navegando até sua nova pasta. Clique no pequeno botão 'arquivo' no painel do Explorer e crie o novo arquivo:
![explorer no VS Code](../images/vs-code-index.png)
Ou
Use esses comando no seu git bash:
* `mkdir terrarium`
* `cd terrarium`
* `touch index.html`
* `code index.html` ou `nano index.html`
> Os arquivos index.html indicam a um navegador que ele é o arquivo padrão em uma pasta; URLs como `https://anysite.com/test` podem ser construídas usando uma estrutura de pasta incluindo uma pasta chamada` test` com `index.html` dentro dela; `index.html` não precisa ser mostrado em uma URL.
---
## O DocType e as tags HTML
A primeira linha de um arquivo HTML é seu DocType. É um pouco surpreendente que você precise ter essa linha bem no topo do arquivo, mas ela diz aos navegadores mais antigos que o navegador precisa renderizar a página em um modo padrão, seguindo a especificação HTML atual.
> Dica: no VS Code, você pode passar o mouse sobre uma tag e obter informações sobre seu uso nos guias de referência do MDN.
A segunda linha deve ser a tag de abertura da tag `<html>`, seguida agora por sua tag de fechamento `</html>`. Essas tags são os elementos-raiz da sua interface.
### Tarefa
Adicione essas linhas ao topo do seu arquivo `index.html`:
```HTML
<!DOCTYPE html>
<html></html>
```
✅ Existem alguns modos diferentes que podem ser determinados definindo o DocType com uma string de consulta: [Quirks Mode and Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Esses modos costumavam suportar navegadores muito antigos que não são normalmente usados hoje em dia (Netscape Navigator 4 e Internet Explorer 5). Você pode seguir a declaração doctype padrão.
---
## A 'cabeça' do documento
A área do 'cabeçalho' do documento HTML inclui informações cruciais sobre sua página da web, também conhecidas como [metadados] (https://developer.mozilla.org/docs/Web/HTML/Element/meta). No nosso caso, informamos ao servidor da web para o qual esta página será enviada para ser renderizada, estas quatro coisas:
- o título da página
- metadados da página, incluindo:
- o 'conjunto de caracteres', informando sobre qual codificação de caracteres é usada na página
- informações do navegador, incluindo `x-ua-compatible`, que indica que o navegador IE = edge é compatível
- informações sobre como a janela de visualização deve se comportar quando é carregada. Definir a janela de visualização para ter uma escala inicial de 1 controla o nível de zoom quando a página é carregada pela primeira vez.
### Tarefa
Adicione um bloco 'head' ao seu documento entre a tag `<html>` inicial e a final.
```html
<head>
<title>Bem-vindo ao meu terrário virtual</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
```
✅ O que aconteceria se você definir uma metatag de janela de visualização como esta: `<meta name =" viewport "content =" width = 600 ">`? Leia mais sobre a [janela de exibição](https://developer.mozilla.org/docs/Mozilla/Mobile/Viewport_meta_tag).
---
## O `corpo` do documento
### Tags HTML
Em HTML, você adiciona tags ao seu arquivo .html para criar elementos de uma página da web. Cada tag geralmente possui uma tag de abertura e de fechamento, como esta: `<p> olá </p>` para indicar um parágrafo. Crie o corpo da sua interface adicionando um conjunto de tags `<body>` dentro do par de tags `<html>`; sua marcação agora se parece com isto:
### Tarefa
```html
<!DOCTYPE html>
<html>
<head>
<title>Bem-vindo ao meu terrário virtual</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body></body>
</html>
```
Agora, você pode começar a construir sua página. Normalmente, você usa tags `<div>` para criar os elementos separados em uma página. Vamos criar uma série de elementos `<div>` que conterão imagens.
### Imagens
Uma tag html que não precisa de uma tag de fechamento é a tag `<img>`, porque ela tem um elemento `src` que contém todas as informações que a página precisa para processar o item.
Crie uma pasta em seu aplicativo chamada `images` e nela, adicione todas as imagens da [pasta de código fonte](../solution/images); (são 14 imagens de plantas).
### Tarefa
Adicione essas imagens de plantas em duas colunas entre as tags `<body> </body>`:
```html
<div id="page">
<div id="left-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
</div>
</div>
<div id="right-container" class="container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
</div>
</div>
</div>
```
> Nota: Spans vs. Divs. Divs são considerados elementos de 'bloco' e Spans são 'embutidos'. O que aconteceria se você transformasse esses divs em spans?
Com essa marcação, as plantas agora aparecem na tela. Parece muito ruim, porque eles ainda não foram estilizados usando CSS, e faremos isso na próxima lição.
Cada imagem possui um texto alternativo que aparecerá mesmo se você não puder ver ou renderizar uma imagem. Este é um atributo importante a ser incluído para acessibilidade. Aprenda mais sobre acessibilidade em aulas futuras; por enquanto, lembre-se de que o atributo alt fornece informações alternativas para uma imagem se um usuário por algum motivo não puder visualizá-la (devido à conexão lenta, um erro no atributo src ou se o usuário usar um leitor de tela).
✅ Você notou que cada imagem tem a mesma tag alt? Esta é uma boa prática? Por que ou por que não? Você pode melhorar este código?
---
## Marcação semântica
Em geral, é preferível usar 'semântica' significativa ao escrever HTML. O que isso significa? Isso significa que você usa tags HTML para representar o tipo de dados ou interação para a qual foram projetadas. Por exemplo, o texto do título principal em uma página deve usar uma tag `<h1>`.
Adicione a seguinte linha logo abaixo da tag `<body>` de abertura:
```html
<h1>Meu Terrário</h1>
```
Usar marcação semântica, como ter cabeçalhos `<h1>` e listas não ordenadas renderizadas como `<ul>`, ajuda os leitores de tela a navegar por uma página. Em geral, os botões devem ser escritos como `<button>` e as listas devem ser `<li>`. Embora seja _possível_ usar elementos `<span>` especialmente estilizados com manipuladores de clique para simular botões, é melhor para usuários com deficiência usar tecnologias para determinar onde um botão reside em uma página e para interagir com ele, se o elemento aparecer como um botão. Por esse motivo, tente usar a marcação semântica o máximo possível.
✅ Dê uma olhada em um leitor de tela e [como ele interage com uma página web](https://www.youtube.com/watch?v=OUDV1gqs9GA). Você pode ver por que ter marcação não semântica pode frustrar o usuário?
## O Terrário
A última parte desta interface envolve a criação de marcações que serão estilizadas para criar um terrário.
### Tarefa:
Adicione esta marcação acima da última tag `</div>`:
```html
<div id="terrarium">
<div class="jar-top"></div>
<div class="jar-walls">
<div class="jar-glossy-long"></div>
<div class="jar-glossy-short"></div>
</div>
<div class="dirt"></div>
<div class="jar-bottom"></div>
</div>
```
✅ Mesmo que você tenha adicionado essa marcação à tela, você não vê absolutamente nada renderizado. Porque?
---
## 🚀Desafio
Existem algumas tags 'mais antigas' selvagens em HTML que ainda são divertidas de brincar, embora você não deva usar tags obsoletas, como [essas tags](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) na sua marcação. Ainda assim, você pode usar a velha tag `<marquee>` para fazer o título h1 rolar horizontalmente? (se o fizer, não se esqueça de removê-lo depois)
## Quiz Pós-aula
[Quiz pós-aula](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/16)
## Revisão e autoestudo
HTML é o sistema de blocos de construção 'testado e comprovado' que ajudou a construir a web no que ela é hoje. Aprenda um pouco sobre sua história estudando algumas tags antigas e novas. Você consegue descobrir por que algumas tags foram descontinuadas e outras adicionadas? Quais tags podem ser introduzidas no futuro?
Saiba mais sobre como construir sites para a web e dispositivos móveis em [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-13441-cxa).
## Atribuiçao
[Pratique seu HTML: Construa uma maquete de blog](assignment.pt-BR.md)

@ -0,0 +1,11 @@
# Pratique seu HTML: Construa uma maquete de blog
## Instruções
Imagine que você está projetando ou redesenhando seu site pessoal. Crie uma maquete gráfica do seu site e anote a marcação HTML que você usaria para construir os vários elementos do site. Você pode fazer isso no papel e digitalizá-lo ou usar o software de sua escolha, apenas certifique-se de codificar manualmente a marcação HTML.
## Rubrica
| Critérios | Exemplar | Adequado | Necessidades Melhoria |
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
| | Um layout de blog é representado visualmente com pelo menos 10 elementos de marcação exibidos | Um layout de blog é representado visualmente com cerca de 5 elementos de marcação exibidos | Um layout de blog é representado visualmente com no máximo 3 elementos de marcação exibidos |

@ -0,0 +1,11 @@
# Refatoração de CSS
## Instruções
Reestilize seu terrário usando Flexbox ou CSS Grid e faça screenshots para mostrar que você o testou em diversos navegadores. Pode ser necessário modificar a marcação , então, crie uma nova versão da aplicação com a arte pronta para sua refatoração. Não se preocupe em tornar os elementos arrastáveis; Apenas refatore o HTML e o CSS por enquanto.
## Rubrica
| Criterio | Exemplar | Adequado | Precisa de melhoria |
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
| | Apresente um terrário completamente reestilizado usando Flexbox ou CSS Grid | Reestilize algum dos elementos | Falha ao reestilizar o terrário em tudo |

@ -0,0 +1,234 @@
# Projeto Terrarium Parte 3: Manipulação do DOM e fechamento
![DOM e fechamento](/sketchnotes/webdev101-js.png)
> Esboço de [Tomomi Imura](https://twitter.com/girlie_mac)
## Quiz pré-leitura
[Quiz pré-leitura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/19)
### Introdução
Manipular o DOM, ou o "Modelo de objeto de documento", é um aspecto chave do desenvolvimento web. Segundo [MDN](https://developer.mozilla.org/pt-BR/docs/Web/API/Document_Object_Model/Introduction), "O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web.". Os desafios em torno da manipulação do DOM na web, muitas vezes tem sido o ímpeto por trás do uso de frameworks JavaScript em vez de JavaScript vanilla para gerenciar o DOM, mas vamos gerenciar por conta própria!!
Além disso, essa lição apresentará a ideia de um [closure(encerramento) de JavaScript](https://developer.mozilla.org/docs/Web/JavaScript/Closures), que você pode considerar como uma função delimitada por outra função, de modo que a função interna tenha acesso ao escopo da função externa.
> Os closures (fechamentos) de JavaScript são um tópico vasto e complexo. Esta lição toca na ideia mais básica de que no código deste terrário, você encontrará um closure: uma função interna e uma função externa construída de forma a permitir que a função interna acesse o escopo da função externa. Para obter mais informações sobre como isso funciona, visite a [extensa documentação](https://developer.mozilla.org/docs/Web/JavaScript/Closures).
Usaremos um closure para manipular o DOM.
Pense no DOM como uma árvore, representando todas as maneiras como um documento de página da web pode ser manipulado. Várias APIs (interfaces de programa de aplicativo) foram escritas para que os programadores, usando sua linguagem de programação de escolha, possam acessar o DOM e editar, alterar, reorganizar e de outra forma gerenciá-lo.
![Representação da árvore DOM](../images/dom-tree.png)
> Uma representação do DOM e a marcação HTML que faz referência a ele. De [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
Nesta lição, concluiremos nosso projeto de terrário interativo criando o JavaScript que permitirá ao usuário manipular as plantas na página.
### Pré-requisitos
Você deve ter construído o HTML e CSS para o seu terrário. Ao final desta lição, você será capaz de mover as plantas para dentro e para fora do terrário arrastando-as.
### Tarefa
Na pasta do seu terrário, crie um novo arquivo chamado script.js. Importe esse arquivo na seção `<head>`:
```html
<script src="./script.js" defer></script>
```
> Nota: use `defer` ao importar um arquivo JavaScript externo para o arquivo html, de modo a permitir que o JavaScript seja executado somente depois que o arquivo HTML tiver sido totalmente carregado. Você também pode usar o atributo async, que permite que o script seja executado enquanto o arquivo HTML está sendo analisado, mas, em nosso caso, é importante ter os elementos HTML totalmente disponíveis para arrastar antes de permitir que o script de arrastar seja executado.
---
## Os elementos DOM
A primeira coisa que você precisa fazer é criar referências aos elementos que deseja manipular no DOM. No nosso caso, são as 14 plantas que aguardam atualmente nas barras laterais.
### Tarefa
```html
dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3'));
dragElement(document.getElementById('plant4'));
dragElement(document.getElementById('plant5'));
dragElement(document.getElementById('plant6'));
dragElement(document.getElementById('plant7'));
dragElement(document.getElementById('plant8'));
dragElement(document.getElementById('plant9'));
dragElement(document.getElementById('plant10'));
dragElement(document.getElementById('plant11'));
dragElement(document.getElementById('plant12'));
dragElement(document.getElementById('plant13'));
dragElement(document.getElementById('plant14'));
```
O que está acontecendo aqui? Você está referenciando o documento e olhando através de seu DOM para encontrar um elemento com um Id específico. Lembra na primeira lição sobre HTML que você deu Ids individuais para cada imagem de planta (id = "plant1")? Agora você fará uso disso. Depois de identificar cada elemento, você passa esse item para uma função chamada dragElement que construirá em um minuto. Portanto, o elemento no HTML agora está ativado para arrastar, ou será em breve.
✅ Por que referenciamos elementos por Id? Por que não por sua classe CSS? Você pode consultar a lição anterior sobre CSS para responder a esta pergunta.
---
## O Closure(fechamento)
Agora você está pronto para criar o closure(fechamento) dragElement, que é uma função externa que inclui uma função ou funções internas (em nosso caso, teremos três).
Os closures(fechamentos) são úteis quando uma ou mais funções precisam acessar o escopo de uma função externa. Aqui está um exemplo:
```javascript
function mostrarDoce(){
let doce = ['jujubas'];
function adicionarDoce(tipoDeDoce) {
doce.push(tipoDeDoce)
}
adicionarDoce('gomas');
}
mostrarDoce();
console.log(doce)
```
Neste exemplo, a função mostrarDoce envolve uma função que coloca um novo tipo de doce em uma matriz que já existe na função. Se você executasse este código, o array doce seria indefinido, pois é uma variável local (local para o fechamento).
✅ Como você pode tornar o conjunto de doces acessível? Tente movê-lo para fora do fechamento. Dessa forma, o array torna-se global, ao invés de ficar disponível apenas para o escopo local do fechamento.
### Tarefa
Nas declarações de elemento em `script.js`, crie uma função:
```javascript
function dragElement(terrariumElement) {
//definir 4 posições para posicionamento na tela
let pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
terrariumElement.onpointerdown = pointerDrag;
}
```
`dragElement` obtém seu objeto `terrariumElement` das declarações na parte superior do script. Em seguida, você define algumas posições locais em 0 para o objeto passado para a função. Essas são as variáveis locais que serão manipuladas para cada elemento à medida que você adiciona a funcionalidade de arrastar e soltar no fechamento de cada elemento. O terrário será preenchido por esses elementos arrastados, então o aplicativo precisa manter o controle de onde eles são colocados.
Além disso, o terrariumElement que é passado para essa função é atribuído a um evento pointerdown, que faz parte das [APIs da web](https://developer.mozilla.org/docs/Web/API) projetadas para ajudar no gerenciamento de DOM. `Onpointerdown` dispara quando um botão é pressionado ou, em nosso caso, um elemento arrastável é tocado. Este manipulador de eventos funciona em [navegadores web e mobile](https://caniuse.com/?search=onpointerdown), com algumas exceções.
✅ O [manipulador de eventos onclick](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) tem muito mais suporte para vários navegadores; por que você não usaria aqui? Pense no tipo exato de interação de tela que você está tentando criar aqui.
---
## A função Pointerdrag
O terrariumElement está pronto para ser arrastado; quando o evento `onpointerdown` é disparado, a função `pointerDrag` é chamada. Adicione essa função logo abaixo desta linha: `terrariumElement.onpointerdown = pointerDrag;`:
### Tarefa
```javascript
function pointerDrag(e) {
e.preventDefault();
console.log(e);
pos3 = e.clientX;
pos4 = e.clientY;
}
```
Várias coisas acontecem. Primeiro, você evita que os eventos padrão que normalmente acontecem em pointerdown ocorram usando `e.preventDefault ();`. Dessa forma, você tem mais controle sobre o comportamento da interface.
> Volte a esta linha quando tiver criado o arquivo de script completamente e tente sem `e.preventDefault()` - o que acontece?
Em segundo lugar, abra `index.html` em uma janela do navegador e inspecione a interface. Ao clicar em uma planta, você pode ver como o evento 'e' é capturado. Explore o evento para ver quanta informação é coletada por um evento de ponteiro para baixo!
A seguir, observe como as variáveis locais `pos3` e `pos4` são definidas como e.clientX. Você pode encontrar os valores `e` no painel de inspeção. Esses valores capturam as coordenadas xey da planta no momento em que você clica ou toca nela. Você precisará de um controle refinado sobre o comportamento das plantas ao clicar e arrastá-las, para manter o controle de suas coordenadas.
✅ Está ficando mais claro por que todo esse aplicativo é construído com um grande fechamento? Se não fosse, como você manteria o escopo para cada uma das 14 plantas arrastáveis?
Conclua a função inicial adicionando mais duas manipulações de eventos de ponteiro em `pos4 = e.clientY`:
```html
document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;
```
Agora você está indicando que deseja que a planta seja arrastada junto com o ponteiro conforme você a move e que o gesto de arrastar pare quando você desmarcar a planta. `onpointermove` e `onpointerup` são partes da mesma API que `onpointerdown`. A interface lançará erros agora, pois você ainda não definiu as funções `elementDrag` e `stopElementDrag`, então crie-as a seguir.
## As funções elementDrag e stopElementDrag
Você completará seu fechamento adicionando mais duas funções internas que irão lidar com o que acontece quando você arrasta uma planta e para de arrastá-la. O comportamento que você deseja é que você possa arrastar qualquer planta a qualquer momento e colocá-la em qualquer lugar da tela. Esta interface é bastante neutra (não há zona de queda, por exemplo) para permitir que você projete seu terrário exatamente como você gosta, adicionando, removendo e reposicionando plantas.
### Tarefa
Adicione a função `elementDrag` logo após a chave de fechamento de `pointerDrag`:
```javascript
function elementDrag(e) {
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
console.log(pos1, pos2, pos3, pos4);
terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
}
```
Nesta função, você edita várias vezes as posições iniciais 1-4 que definiu como variáveis locais na função externa. O que está acontecendo aqui?
Conforme você arrasta, você reatribui `pos1` tornando-o igual a `pos3` (que você definiu anteriormente como `e.clientX`) menos o valor atual de `e.clientX`. Você faz uma operação semelhante à `pos2`. Em seguida, você redefine `pos3` e `pos4` para as novas coordenadas X e Y do elemento. Você pode observar essas mudanças no console enquanto arrasta. Em seguida, você manipula o estilo CSS da planta para definir sua nova posição com base nas novas posições de `pos1` e `pos2`, calculando as coordenadas X e Y superior e esquerda da planta com base na comparação de seu deslocamento com essas novas posições.
> `OffsetTop` e `offsetLeft` são propriedades CSS que definem a posição de um elemento com base na posição de seu pai; seu pai pode ser qualquer elemento que não esteja posicionado como `static`.
Todo este recálculo de posicionamento permite afinar o comportamento do terrário e das suas plantas.
### Tarefa
A tarefa final para completar a interface é adicionar a função `stopElementDrag` após a chave de fechamento de `elementDrag`:
```javascript
function stopElementDrag() {
document.onpointerup = null;
document.onpointermove = null;
}
```
Esta pequena função redefine os eventos `onpointerup` e `onpointermove` para que você possa reiniciar o progresso de sua planta, começando a arrastá-la novamente, ou começar a arrastar uma nova planta.
✅ O que acontece se você não definir esses eventos como nulos?
Agora você concluiu seu projeto!
🥇 Parabéns! Você terminou seu lindo terrário.
![terrario terminado](../images/terrarium-final.png)
---
## 🚀Desafio
Adicione um novo manipulador de eventos ao seu fechamento para fazer algo mais para as plantas; por exemplo, clique duas vezes em uma planta para trazê-la para a frente. Seja criativo!
## Quiz pós-leitura
[Quiz pós-leitura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/20)
## Revisão & auto-estudo
Embora arrastar elementos pela tela pareça trivial, existem muitas maneiras de fazer isso e muitas armadilhas, dependendo do efeito que você busca. Na verdade, existe toda uma [API de arrastrar e soltar](https://developer.mozilla.org/docs/Web/API/HTML_Drag_and_Drop_API) que você pode experimentar. Não a usamos neste módulo porque o efeito que queríamos era um pouco diferente, mas experimente esta API em seu próprio projeto e veja o que você pode conseguir.
Encontre mais informações sobre eventos de ponteiro nos documentos [W3C](https://www.w3.org/TR/pointerevents1/) e [MDN web docs](https://developer.mozilla.org/pt-BR/docs/Web/API/Pointer_events).
Sempre verifique os recursos do navegador usando [CanIUse](https://caniuse.com/)
## Tarefa
---
[Trabalhar um pouco mais com o DOM](assignment.pt.md)

@ -0,0 +1,11 @@
# Trabalhe um pouco mais com a DOM
## Instruções
Pesquise a DOM um pouco mais 'adotando' um elemento DOM. Visite a [lista de interfaces DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) do MDN e escolha uma. Encontre-o em um web site e escreva uma explicação de como ele é usado.
## Rubrica
| Criterio | Exemplar | Adequado | Precisa de melhoria |
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
| | A redação do parágrafo é apresentada com exemplo | redação do parágrafo é apresentada sem exemplo | Nenhum texto é apresentado |

@ -0,0 +1,31 @@
# Meu Terrário: Um projeto para aprender HTML, CSS, e manipulação DOM usando JavaScript 🌵🌱
Uma pequena meditação de código de arrastar e soltar. Com um pouco de HTML, JS e CSS, você pode construir uma interface web, esilizá-la, e adiconar uma interação.
![Meu Terrário](../images/screenshot_gray.png)
# Lições
1. [Introdução à HTML](../1-intro-to-html/translations/README.pt-BR.md)
2. [Introdução à CSS](../2-intro-to-css/README.md)
3. [Introdução à DOM e fechamentos JS](../3-intro-to-DOM-and-closures/README.md)
## Créditos
Escrito com ♥️ por [Jen Looper](https://www.twitter.com/jenlooper)
O terrário criado via CSS foi inspirado na jarra de vidro de Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
A arte do curso foi desenhada à mão por [Jen Looper](http://jenlooper.com) using Procreate.
## Implante o seu Terrário
Você pode implantar ou publicar seu terrario na web usando o Azure Static Web Apps.
1. Fork este repositório
2. Pressione este botão
[![Implemente para o botão Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
3. Percorra o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo ou a raiz de sua base de código como `/ solution`. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta .github será criada em seu repositório "forkado" que ajudará o serviço de construção de aplicativos da Web estáticos do Azure a construir e publicar seu aplicativo em uma nova URL.

@ -0,0 +1,32 @@
# Meu terrário: um projeto para aprender sobre a manipulação do HTML, CSS e DOM usando JavaScript 🌵🌱
Uma pequena reflexão de arrastar e soltar sobre o código. Com um pouco de HTML, JS e CSS, você pode construir uma interface da web, estilizá-la e adicionar uma interação.
![meu terrário](../images/screenshot_gray.png)
# Lições
1. [Introdução ao CSS](./intro-to-css/README.md)
2. [Introdução ao HTML](./intro-to-html/README.md)
3. [Introdução ao DOM e JS Closures(fechamentos)](intro-to-DOM-and-js-closures/README.md)
## Créditos
Escrito com ♥ por [Jen Looper](https://www.twitter.com/jenlooper)
O terrário criado via CSS foi inspirado no codepen de jarra de vidro de Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
A arte foi desenhada à mão por [Jen Looper](http://jenlooper.com) usando Procreate.
## Deploy do seu Terrário
Você pode fazer o deploy, ou publicar seu terrário na web usando o Azure Static Web Apps.
1. Fork(bifurque) esse repositório
2. Pressione esse botão
[![Deploy no Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-13441-cxa#create/Microsoft.StaticApp)
3. Percorra o assistente para criar seu aplicativo. Certifique-se de definir a raiz do aplicativo para ser `/solution` ou a raiz(root) de sua base de código. Não há API neste aplicativo, então não se preocupe em adicioná-la. Uma pasta .github será criada em seu repositório bifurcado que ajudará os aplicativos da Web estáticos do Azure a construir e publicar seu aplicativo em uma nova URL.

@ -0,0 +1,30 @@
# Програмування на основі подій створимо гру для введення тексту
## Вступ
Введення тексту — одна з найбільш недооцінених навичок розробника. Здатність швидко передавати думки з голови до редактора дозволяє вільно протікати творчості. Один з найкращих способів навчитися - грати в гру!
> Отже, давайте створимо гру для набору тексту!
Ви збираєтеся використовувати навички JavaScript, HTML і CSS, які ви вже напрацювали, щоб створити гру набору тексту. Гра представить гравцеві випадкову цитату (ми використовуємо цитати [Шерлока Холмса](https://en.wikipedia.org/wiki/Sherlock_Holmes) ) і час, скільки часу потрібно гравцеві, щоб точно ввести його. Ви збираєтеся використовувати навички JavaScript, HTML і CSS, які ви вже напрацювали, щоб створити гру набору тексту.
![демо](../images/demo.gif)
## Передумови
Цей урок передбачає, що ви знайомі з такими поняттями:
- Створення елементів керування введенням тексту та кнопок
- CSS і налаштування стилів за допомогою класів
- Основи JavaScript
- Створення масиву
- Створення випадкового числа
- Отримання поточного часу
## Урок
[Створення гри введення тексту за допомогою програмування на основі подій](../typing-game/README.md)
## Посилання
Створенно з ♥️ [Крістофером Гаррісоном](http://www.twitter.com/geektrainer)

@ -0,0 +1,167 @@
# Projeto de extensão do navegador, parte 1: tudo sobre navegadores
![Browser sketchnote](/sketchnotes/browser.jpg)
> Esboço 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)
## Leitura pré-quiz
[Leitura pré-quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/23)
### Introdução:
As extensões do navegador adicionam funcionalidade adicional a um navegador. Mas antes de criar um, você deve aprender um pouco sobre como os navegadores funcionam.
### Sobre o navegador:
Nesta série de lições, você aprenderá como construir uma extensão de navegador que funcionará nos navegadores Chrome, Firefox e Edge. Nesta parte, você descobrirá como os navegadores funcionam e estruturará os elementos da extensão do navegador.
Mas o que é exatamente um navegador? É um aplicativo de software que permite ao usuário final acessar o conteúdo de um servidor e exibi-lo em páginas da web.
✅ Um pouco de história: o primeiro navegador chamava-se 'WorldWideWeb' e foi criado por Sir Timothy Berners-Lee em 1990.
![primeiros navegadores](../images/earlybrowsers.jpg)
> Alguns navegadores antigos, por [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
Quando um usuário se conecta à Internet usando um endereço URL (Uniform Resource Locator), geralmente usando o protocolo de transferência de hipertexto por meio de um endereço `http` ou `https`, o navegador se comunica com um servidor da web e busca uma página da web.
Nesse ponto, o mecanismo de renderização do navegador o exibe no dispositivo do usuário, que pode ser um telefone celular, desktop ou laptop.
Os navegadores também têm a capacidade de armazenar o conteúdo em cache para que ele não precise ser recuperado do servidor todas as vezes. Eles podem registrar o histórico da atividade de navegação de um usuário, armazenar 'cookies', que são pequenos bits de dados que contêm informações usadas para armazenar a atividade de um usuário e muito mais.
Uma coisa realmente importante a lembrar sobre os navegadores é que eles não são todos iguais! Cada navegador tem seus pontos fortes e fracos, e um desenvolvedor profissional da web precisa entender como fazer com que as páginas tenham um bom desempenho em navegadores diferentes. Isso inclui lidar com pequenas janelas de visualização, como as de um telefone celular, bem como quando um usuário está offline.
Um site realmente útil que você provavelmente deve adicionar aos favoritos em qualquer navegador de sua preferência é [caniuse.com](https://www.caniuse.com). Quando você está construindo páginas da web, é muito útil usar as listas de tecnologias suportadas do caniuse para que você possa dar o melhor suporte aos seus usuários.
✅ Como você pode saber quais navegadores são mais populares com a base de usuários do seu site? Verifique sua análise - você pode instalar vários pacotes de análise como parte de seu processo de desenvolvimento da web, e eles dirão quais navegadores são mais usados pelos vários navegadores populares.
## Extensões de navegador
Por que você deseja construir uma extensão de navegador? É uma coisa útil para anexar ao seu navegador quando você precisa de acesso rápido às tarefas que tende a repetir. Por exemplo, se você precisar verificar as cores nas várias páginas da web com as quais interage, poderá instalar uma extensão de navegador com seletor de cores. Se você tiver problemas para lembrar as senhas, pode usar uma extensão do navegador para gerenciamento de senhas.
As extensões do navegador também são divertidas de desenvolver. Eles tendem a gerenciar um número finito de tarefas que executam bem.
✅ Quais são as suas extensões de navegador favoritas? Quais tarefas elas realizam?
### Instalando extensões
Antes de começar a construir, dê uma olhada no processo de construção e implantação de uma extensão de navegador. Embora cada navegador varie um pouco na forma como gerenciam essa tarefa, o processo é semelhante no Chrome e no Firefox a este exemplo no Edge:
![instalar uma extensão de navegador](../images/install-on-edge.png)
Basicamente, o processo será:
- construir sua extensão usando `npm build`
- no navegador ir até o painel de extensões usando o ícone `...` na parte superior da direita
- se for uma nova instalação, selecione `load unpacked` para carregar uma nova extensão a partir de sua pasta (no nosso caso, é `/dist`)
- ou clique em `recarregar` se está recarregando a extensão já instalada
✅ Estas instruções referem-se a extensões que você mesmo constrói; para instalar extensões que foram lançadas para seu navegador, você deve navegar até essas [lojas](https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home) e instalar a extensão de sua escolha.
### Iniciar
Você vai construir uma extensão de navegador que exibe a pegada de carbono da sua região, mostrando o uso de energia da sua região e a fonte da energia. A extensão terá um formulário que coleta uma chave API para que você possa acessar a API do CO2 Signal.
**Você precisa:**
- [uma chave API](https://www.co2signal.com/); coloque seu email no formulário da página e uma chave será enviada para você.
- o [código de sua região](http://api.electricitymap.org/v3/zones) correspondente ao [Mapa de eletricidade](https://www.electricitymap.org/map) (em Boston, por exemplo, EU uso 'US-NEISO').
- o [código de inicio](../../start). Faça o download da pasta `start`; você irá completar o código desta pasta.
- [NPM](https://www.npmjs.com) - NPM é uma ferramenta de gerenciamento de pacotes; instale-o localmente e os pacotes listados em seu arquivo package.json serão instalados para uso por seu app da web.
✅ Saiba mais sobre gerenciamento de pacotes neste [excelente módulo de aprendizagem](https://docs.microsoft.com/learn/modules/create-nodejs-project-dependencies/?WT.mc_id=academic-13441-cxa)
Reserve um minuto para examinar o código base:
dist
- | manifest.json (padrões definidos aqui)
- | index.html (marcador HTML do front-end aqui)
- | background.js (JS de fundo aqui)
- | main.js (JS construído)
src
- | index.js (seu código JS vai aqui)
✅ Assim que tiver a chave API e o código da região em mãos, armazene-os em uma nota para uso futuro.
### Construir o HTML para a extensão
Esta extensão possui duas visualizações. Uma para reunir a chave API e o código de região:
![formulário da extensão](../images/1.png)
E a segunda para mostrar o uso de carbono da região:
![uso do carbono](../images/2.png)
Vamos começar construindo o HTML para o formulário e estilizando-o com CSS.
Na pasta `/dist`, você construirá um formulário e uma área de resultados. No arquivo `index.html`, preencha a área delineada do formulário:
```HTML
<form class="form-data" autocomplete="on">
<div>
<h2>Novo? Adicione suas informações.</h2>
</div>
<div>
<label for="region">Nome da Região</label>
<input type="text" id="region" required class="region-name" />
</div>
<div>
<label>Sua chave de API</label>
<input type="text" required class="api-key" />
</div>
<button class="search-btn">Enviar</button>
</form>
```
Este é o formulário onde suas informações salvas serão inseridas e guardadas no armazenamento local.
Em seguida, crie a área de resultados; após a tag final do formulário, adicione algumas divs:
```HTML
<div class="result">
<div class="loading">carregando...</div>
<div class="errors"></div>
<div class="data"></div>
<div class="result-container">
<p><strong>Região: </strong><span class="my-region"></span></p>
<p><strong>Uso de carbono: </strong><span class="carbon-usage"></span></p>
<p><strong>Porcentagem de combustível fóssil: </strong><span class="fossil-fuel"></span></p>
</div>
<button class="clear-btn">Trocar região</button>
</div>
```
Neste ponto, você pode tentar um build (construção). Certifique-se de instalar o pacote de dependências desta extensão:
```
npm install
```
Este comando usará npm, o Node Package Manager, para instalar o webpack para o processo de build (construção) de sua extensão. Webpack é um bundler (empacotador) que lida com a compilação de código. Você pode ver a saída desse processo olhando em `/dist/main.js` - você vê que o código foi empacotado.
Por enquanto, a extensão deve ser construída (build) e, se você implantá-la (deploy) no Edge como uma extensão, verá um formulário perfeitamente exibido.
Parabéns, você deu os primeiros passos para criar uma extensão de navegador. Nas lições subsequentes, você o tornará mais funcional e útil.
---
## 🚀Desafio
Dê uma olhada em uma loja de extensões de navegador e instale uma em seu navegador. Você pode examinar seus arquivos de maneiras interessantes. O que você descobriu?
## Quiz pós-leitura
[Quiz pós-leitura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/24)
## Revisão e auto-estudo
Nesta lição você aprendeu um pouco sobre a história do navegador da web; aproveite esta oportunidade para aprender como os inventores da World Wide Web imaginaram seu uso, lendo mais sobre sua história. Alguns sites úteis incluem:
[A história dos navegadores web](https://www.mozilla.org/firefox/browsers/browser-history/)
[História da Web](https://webfoundation.org/about/vision/history-of-the-web/)
[Uma entrevista com Tim Berners-Lee](https://www.theguardian.com/technology/2019/mar/12/tim-berners-lee-on-30-years-of-the-web-if-we-sueñe-un-poco-podemos-conseguir-la-web-que-queremos)
## Tarefa
[Refatore o estilo de sua extensão](assignment.pt.md)

@ -0,0 +1,11 @@
# Refatore o estilo de sua extensão
## Instruções
O código base para esta extensão vem completo com estilos, mas você não precisa usá-los; faça sua própria estilização editando seu arquivo css.
## Rubrica
| Critérios | Exemplar | Adequado | Necessita de melhoria |
| -------- | -------------------------------------------- | --------------------- | ----------------- |
| | O código é enviado com novos estilos funcionais | O estilo está incompleto | Os estilos contém erros |

@ -0,0 +1,301 @@
# Créer une application bancaire Partie 2: Créer un formulaire de connexion et d'inscription
## Quiz préalable
[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/43?loc=fr)
### Introduction
Dans presque toutes les applications Web modernes, vous pouvez créer un compte pour avoir votre propre espace privé. Comme plusieurs utilisateurs peuvent accéder à une application Web en même temps, vous avez besoin d'un mécanisme pour stocker les données personnelles de chaque utilisateur séparément et sélectionner les informations à afficher. Nous n'expliquerons pas comment gérer [l'identité de l'utilisateur en toute sécurité](https://en.wikipedia.org/wiki/Authentication) car il s'agit d'un sujet étendu en soi, mais nous veillerons à ce que chaque utilisateur puisse créer un (ou plusieurs) compte bancaire sur notre application.
Dans cette partie, nous utiliserons des formulaires HTML pour ajouter une connexion et une inscription à notre application Web. Nous verrons comment envoyer les données à une API serveur par programmation, et finalement comment définir des règles de validation de base pour les entrées utilisateur.
### Prérequis
Vous devez avoir terminé les [modèles HTML et routage](../../1-template-route/translations/README.fr.md) d'une application Web pour cette leçon. Vous devez également installer [Node.js](https://nodejs.org/fr) et [exécuter l'API du serveur](../../api/translations/README.fr.md) localement afin de pouvoir envoyer des données pour créer des comptes.
**Prenez note**
Vous aurez deux terminaux fonctionnant en même temps comme indiqué ci-dessous.
1. Pour l'application bancaire principale, nous avons intégré la leçon [Modèles HTML et routage](../../1-template-route/translations/README.fr.md)
2. Pour l'[API du serveur Bank APP](../../api/translations/README.fr.md), que nous avons configuré ci-dessus.
Vous avez besoin que les deux serveurs soient opérationnels pour suivre le reste de la leçon. Ils écoutent sur différents ports (port `3000` et port `5000`) donc tout devrait bien fonctionner.
Vous pouvez tester que le serveur fonctionne correctement en exécutant cette commande dans un terminal :
```sh
curl http://localhost:5000/api
# -> devrait renvoyer "Bank API v1.0.0" comme résultat
```
---
## Formulaire et contrôles
L'élément `<form>` encapsule une section d'un document HTML où l'utilisateur peut saisir et soumettre des données avec des contrôles interactifs. Il existe toutes sortes de contrôles d'interface utilisateur (UI) qui peuvent être utilisés dans un formulaire, les plus courants étant les éléments `<input>` et `<button>`.
Il existe de nombreux [types](https://developer.mozilla.org/docs/Web/HTML/Element/input) différents de `<input>`, par exemple pour créer un champ où l'utilisateur peut saisir son nom d'utilisateur vous pouvez utiliser:
```html
<input id="username" name="username" type="text">
```
L'attribut `name` sera utilisé comme nom de propriété lorsque les données du formulaire seront envoyées. L'attribut `id` est utilisé pour associer un `<label>` au contrôle de formulaire.
> Jetez un œil à la liste complète des [types `<input>`](https://developer.mozilla.org/docs/Web/HTML/Element/input) et aux [autres contrôles de formulaire](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) pour avoir une idée de tous les éléments d'interface utilisateur natifs que vous pouvez utiliser lors de la création de votre interface utilisateur.
✅ Notez que `<input>` est un [élément vide](https://developer.mozilla.org/docs/Glossary/Empty_element) sur lequel vous ne devez *pas* ajouter une balise de fermeture correspondante. Vous pouvez cependant utiliser la notation à fermeture automatique `<input/>`, mais ce n'est pas obligatoire.
L'élément `<button>` dans un formulaire est un peu spécial. Si vous ne spécifiez pas son attribut `type`, il soumettra automatiquement les données du formulaire au serveur lorsqu'il est pressé. Voici les valeurs de `type` possibles :
- `submit` : La valeur par défaut dans un `<form>`, le bouton déclenche l'action de soumission du formulaire.
- `reset` : Le bouton réinitialise tous les contrôles du formulaire à leurs valeurs initiales.
- `button` : n'attribue pas de comportement par défaut lorsque le bouton est enfoncé. Vous pouvez ensuite lui affecter des actions personnalisées à l'aide de JavaScript.
### Tâche
Commençons par ajouter un formulaire au modèle `login`. Nous aurons besoin d'un champ *nom d'utilisateur* et d'un bouton *Connexion*.
```html
<template id="login">
<h1>Bank App</h1>
<section>
<h2>Login</h2>
<form id="loginForm">
<label for="username">Username</label>
<input id="username" name="user" type="text">
<button>Login</button>
</form>
</section>
</template>
```
Si vous regardez de plus près, vous remarquerez que nous avons également ajouté un élément `<label>` ici. Les éléments `<label>` sont utilisés pour ajouter un nom aux contrôles de l'interface utilisateur, tels que notre champ de nom d'utilisateur. Les étiquettes sont importantes pour la lisibilité de vos formulaires, mais présentent également des avantages supplémentaires :
- En associant une étiquette à un contrôle de formulaire, il aide les utilisateurs utilisant des technologies d'assistance (comme un lecteur d'écran) à comprendre quelles données ils sont censés fournir.
- Vous pouvez cliquer sur l'étiquette pour mettre directement l'accent sur l'entrée associée, ce qui facilite l'accès sur les appareils à écran tactile.
> [Accessibilité](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) sur le Web est un sujet très important qui est souvent négligé. Grâce aux [éléments HTML sémantiques](https://developer.mozilla.org/docs/Learn/Accessibility/HTML), il n'est pas difficile de créer du contenu accessible si vous les utilisez correctement. Vous pouvez [en savoir plus sur l'accessibilité](https://developer.mozilla.org/docs/Web/Accessibility) pour éviter les erreurs courantes et devenir un développeur responsable.
Nous allons maintenant ajouter un deuxième formulaire pour l'inscription, juste en dessous du précédent:
```html
<hr/>
<h2>Register</h2>
<form id="registerForm">
<label for="user">Username</label>
<input id="user" name="user" type="text">
<label for="currency">Currency</label>
<input id="currency" name="currency" type="text" value="$">
<label for="description">Description</label>
<input id="description" name="description" type="text">
<label for="balance">Current balance</label>
<input id="balance" name="balance" type="number" value="0">
<button>Register</button>
</form>
```
En utilisant l'attribut `value`, nous pouvons définir une valeur par défaut pour une entrée donnée.
Notez également que l'entrée pour `balance` a le type `number`. Est-ce que ça a l'air différent des autres entrées ? Essayez d'interagir avec lui.
✅ Pouvez-vous naviguer et interagir avec les formulaires en utilisant uniquement un clavier ? Comment feriez-vous cela?
## Soumission des données au serveur
Maintenant que nous avons une interface utilisateur fonctionnelle, la prochaine étape consiste à envoyer les données à notre serveur. Faisons un test rapide avec notre code actuel : que se passe-t-il si vous cliquez sur le bouton *Connexion* ou *S'inscrire* ?
Avez-vous remarqué le changement dans la section URL de votre navigateur ?
![Capture d'écran du changement d'URL du navigateur après avoir cliqué sur le bouton S'inscrire](../images/click-register.png)
L'action par défaut pour un `<form>` consiste à soumettre le formulaire à l'URL du serveur actuel à l'aide de la [méthode GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3 ), en ajoutant les données du formulaire directement à l'URL. Cette méthode a cependant quelques défauts :
- Les données envoyées sont de taille très limitée (environ 2000 caractères)
- Les données sont directement visibles dans l'URL (pas génial pour les mots de passe)
- Cela ne fonctionne pas avec les téléchargements de fichiers
C'est pourquoi vous pouvez le modifier pour utiliser la [méthode POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) qui envoie les données du formulaire au serveur dans le corps de la requête HTTP, sans aucune des limitations précédentes.
> Alors que POST est la méthode la plus couramment utilisée pour envoyer des données, [dans certains scénarios spécifiques](https://www.w3.org/2001/tag/doc/whenToUseGet.html) il est préférable d'utiliser la méthode GET, lorsque l'on implémente un champ de recherche par exemple.
### Tâche
Ajoutez les propriétés `action` et `method` au formulaire d'inscription :
```html
<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
```
Essayez maintenant d'enregistrer un nouveau compte avec votre nom. Après avoir cliqué sur le bouton *S'inscrire*, vous devriez voir quelque chose comme ceci :
![Une fenêtre de navigateur à l'adresse localhost:5000/api/accounts, affichant une chaîne JSON avec des données utilisateur](./images/form-post.png)
Si tout se passe bien, le serveur doit répondre à votre demande avec une réponse [JSON](https://www.json.org/json-fr.html) contenant les données de compte qui ont été créées.
✅ Essayez de vous enregistrer à nouveau avec le même nom. Que se produit'il?
## Soumettre des données sans recharger la page
Comme vous l'avez probablement remarqué, il y a un léger problème avec l'approche que nous venons d'utiliser : lors de la soumission du formulaire, nous sortons de notre application et le navigateur redirige vers l'URL du serveur. Nous essayons d'éviter tous les rechargements de pages avec notre application Web, car nous créons une [Application à page unique (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
Pour envoyer les données du formulaire au serveur sans forcer le rechargement de la page, nous devons utiliser du code JavaScript. Au lieu de mettre une URL dans la propriété `action` d'un élément `<form>`, vous pouvez utiliser n'importe quel code JavaScript précédé de la chaîne `javascript:` pour effectuer une action personnalisée. L'utiliser signifie également que vous devrez implémenter certaines tâches qui étaient auparavant effectuées automatiquement par le navigateur :
- Récupérer les données du formulaire
- Convertir et encoder les données du formulaire dans un format approprié
- Créer la requête HTTP et l'envoyer au serveur
### Tâche
Remplacez le formulaire d'inscription `action` par :
```html
<form id="registerForm" action="javascript:register()">
```
Ouvrez `app.js` ajoutez une nouvelle fonction nommée `register` :
```js
function register() {
const registerForm = document.getElementById('registerForm');
const formData = new FormData(registerForm);
const data = Object.fromEntries(formData);
const jsonData = JSON.stringify(data);
}
```
Ici, nous récupérons l'élément de formulaire à l'aide de `getElementById()` et utilisons l'assistant [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) pour extraire les valeurs des contrôles de formulaire en tant qu'ensemble de paires clé/valeur. Ensuite, nous convertissons les données en un objet normal à l'aide de [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) et enfin sérialisons les données en [JSON](https://www.json.org/json-fr.html), un format couramment utilisé pour échanger des données sur le Web.
Les données sont maintenant prêtes à être envoyées au serveur. Créez une nouvelle fonction nommée `createAccount` :
```js
async function createAccount(account) {
try {
const response = await fetch('//localhost:5000/api/accounts', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: account
});
return await response.json();
} catch (error) {
return { error: error.message || 'Unknown error' };
}
}
```
A quoi sert cette fonction ? Tout d'abord, notez le mot-clé `async` ici. Cela signifie que la fonction contient du code qui s'exécutera [**asynchrone**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Lorsqu'il est utilisé avec le mot-clé `await`, il permet d'attendre l'exécution du code asynchrone - comme attendre la réponse du serveur ici - avant de continuer.
Voici une vidéo rapide sur l'utilisation de `async/await` :
[![Async et Await pour la gestion des promesses](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async et Await pour la gestion des promesses")
> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur async/await.
Nous utilisons l'API `fetch()` pour envoyer des données JSON au serveur. Cette méthode prend 2 paramètres :
- L'URL du serveur, donc on remet `//localhost:5000/api/accounts` à ce niveau.
- Les paramètres de la requête. C'est là que nous définissons la méthode sur `POST` et fournissons le `body` de la requête. Comme nous envoyons des données JSON au serveur, nous devons également définir l'en-tête `Content-Type` sur `application/json` afin que le serveur sache comment interpréter le contenu.
Comme le serveur répondra à la demande avec JSON, nous pouvons utiliser `wait response.json()` pour analyser le contenu JSON et renvoyer l'objet résultant. Notez que cette méthode est asynchrone, nous utilisons donc le mot-clé `await` ici avant de revenir pour nous assurer que toutes les erreurs lors de l'analyse sont également détectées.
Ajoutez maintenant du code à la fonction `register` pour appeler `createAccount()`:
```js
const result = await createAccount(jsonData);
```
Comme nous utilisons ici le mot-clé `await`, nous devons ajouter le mot-clé `async` avant la fonction register:
```js
async function register() {
```
Enfin, ajoutons quelques logs pour vérifier le résultat. La fonction finale devrait ressembler à ceci:
```js
async function register() {
const registerForm = document.getElementById('registerForm');
const formData = new FormData(registerForm);
const jsonData = JSON.stringify(Object.fromEntries(formData));
const result = await createAccount(jsonData);
if (result.error) {
return console.log('An error occurred:', result.error);
}
console.log('Account created!', result);
}
```
C'était un peu long mais nous y sommes arrivés ! Si vous ouvrez vos [outils de développement de navigateur](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) et essayez d'enregistrer un nouveau compte, vous ne devriez voir aucun changement sur la page Web, mais un message s'affichera. apparaissent dans la console confirmant que tout fonctionne.
![Capture d'écran montrant le message de journal dans la console du navigateur](../images/browser-console.png)
✅ Pensez-vous que les données sont envoyées au serveur en toute sécurité ? Et si quelqu'un était capable d'intercepter la demande ? Vous pouvez en savoir plus sur [HTTPS](https://fr.wikipedia.org/wiki/HTTPS) pour en savoir plus sur la communication de données sécurisée.
## La validation des données
Si vous essayez d'enregistrer un nouveau compte sans définir de nom d'utilisateur au préalable, vous pouvez voir que le serveur renvoie une erreur avec le code d'état [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
Avant d'envoyer des données à un serveur, il est recommandé de [valider les données du formulaire](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) au préalable lorsque cela est possible, pour vous assurer d'envoyer une demande valide. Les contrôles de formulaires HTML5 fournissent une validation intégrée à l'aide de divers attributs :
- `required` : le champ doit être rempli sinon le formulaire ne peut pas être soumis.
- `minlength` et `maxlength` : définit le nombre minimum et maximum de caractères dans les champs de texte.
- `min` et `max` : définit la valeur minimum et maximum d'un champ numérique.
- `type` : définit le type de données attendu, comme `numéro`, `e-mail`, `fichier` ou [autres types intégrés](https://developer.mozilla.org/docs/Web/HTML/Element/input). Cet attribut peut également modifier le rendu visuel du contrôle de formulaire.
- `pattern` : permet de définir un pattern d'[expression régulière](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) pour tester si les données saisies sont valides ou non.
> Astuce : vous pouvez personnaliser l'apparence de vos contrôles de formulaire selon qu'ils sont valides ou non en utilisant les pseudo-classes CSS `:valid` et `:invalid`.
### Tâche
Il y a 2 champs obligatoires pour créer un nouveau compte valide, le nom d'utilisateur et la devise, les autres champs étant facultatifs. Mettez à jour le code HTML du formulaire, en utilisant à la fois l'attribut `required` et le texte du libellé du champ:
```html
<label for="user">Username (required)</label>
<input id="user" name="user" type="text" required>
...
<label for="currency">Currency (required)</label>
<input id="currency" name="currency" type="text" value="$" required>
```
Bien que cette implémentation de serveur particulière n'impose pas de limites spécifiques sur la longueur maximale des champs, il est toujours recommandé de définir des limites raisonnables pour toute entrée de texte utilisateur.
Ajoutez un attribut `maxlength` aux champs de texte :
```html
<input id="user" name="user" type="text" maxlength="20" required>
...
<input id="currency" name="currency" type="text" value="$" maxlength="5" required>
...
<input id="description" name="description" type="text" maxlength="100">
```
Maintenant, si vous appuyez sur le bouton *S'inscrire* et qu'un champ ne respecte pas une règle de validation que nous avons définie, vous devriez voir quelque chose comme ceci :
![Capture d'écran montrant l'erreur de validation lors de la tentative de soumission du formulaire](../images/validation-error.png)
Une validation comme celle-ci effectuée *avant* l'envoi de données au serveur est appelée validation **côté client**. Mais notez qu'il n'est pas toujours possible d'effectuer toutes les vérifications sans envoyer les données. Par exemple, nous ne pouvons pas vérifier ici si un compte existe déjà avec le même nom d'utilisateur sans envoyer de requête au serveur. Une validation supplémentaire effectuée sur le serveur est appelée validation **côté serveur**.
Généralement, les deux doivent être implémentés, et bien que l'utilisation de la validation côté client améliore l'expérience utilisateur en fournissant un retour instantané à l'utilisateur, la validation côté serveur est cruciale pour s'assurer que les données utilisateur que vous manipulez sont saines et sûres.
---
## 🚀 Challenge
Afficher un message d'erreur dans le code HTML si l'utilisateur existe déjà.
Voici un exemple de ce à quoi peut ressembler la page de connexion finale après un peu de style :
![Capture d'écran de la page de connexion après l'ajout de styles CSS](../images/result.png)
## Quiz de validation des connaissances
[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/44?loc=fr)
## Révision et étude personnelle
Les développeurs sont devenus très créatifs dans leurs efforts de création de formulaires, en particulier en ce qui concerne les stratégies de validation. Découvrez les différents flux de formulaires en parcourant [CodePen](https://codepen.com); pouvez-vous trouver des formulaires intéressants et inspirants ?
## Affectation
[Concevez votre application bancaire](assignment.fr.md)

@ -0,0 +1,13 @@
# Stylisez votre application bancaire
## Instructions
Créez un nouveau fichier `styles.css` et ajoutez un lien vers celui-ci dans votre fichier `index.html`. Dans le fichier CSS que vous venez de créer, ajoutez des éléments de style pour que les pages *Login* et *Dashboard* aient un aspect agréable et soigné. Essayez de créer un thème de couleurs pour donner à votre application sa propre image de marque.
> Conseil : vous pouvez modifier le HTML et ajouter de nouveaux éléments et classes si nécessaire.
## Rubrique
| Critères | Exemplaire | Adéquat | Besoin d'amélioration |
| -------- | ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
| | Toutes les pages sont propres et lisibles, avec un thème de couleurs cohérent et les différentes sections se détachant correctement. | Les pages sont stylisées mais sans thème ou avec des sections non clairement délimitées. | Les pages manquent de style, les sections sont désorganisées et les informations sont difficiles à lire. |

@ -0,0 +1,15 @@
# Refactorisez et commentez votre code
## Instructions
Au fur et à mesure que votre base de code se développe, il est important de refactorisez votre code fréquemment pour qu'il reste lisible et maintenable dans le temps. Ajoutez des commentaires et refactorisez votre `app.js` pour améliorer la qualité du code :
- Extrayez des constantes, telles que l'URL de base de l'API du serveur.
- Factorisez tout code similaire : par exemple, vous pouvez créer une fonction `sendRequest()` pour regrouper le code utilisé dans les fonctions `createAccount()` et `getAccount()`.
- Réorganisez le code pour le rendre plus facile à lire, et ajoutez des commentaires.
## Rubrique
| Critères | Exemplaire | Adéquat | Besoin d'amélioration |
| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
| | Le code est commenté, bien organisé en différentes sections et facile à lire. Les constantes sont extraites et une fonction `sendRequest()` a été créée. | Le code est propre mais peut encore être amélioré avec plus de commentaires, d'extraction de constantes ou de factorisation.| Le code est désordonné, non commenté, les constantes ne sont pas extraites et le code n'est pas factorisé.|

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

@ -2,11 +2,12 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<title>Web Dev for Beginners</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"></head>
<link rel="icon" type="image/png" href="images/favicon.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsify-themeable@0/dist/css/theme-simple.css"></head>
<body>
<div id="app"></div>
<script>

@ -75,7 +75,7 @@ Também podem ser acessados localmente pela pasta `quiz-app`.
| 05 | Básico de JS | Funções e métodos | Aprenda sobre Funções e métodos para gerenciar o fluxo de lógica de uma aplicação | [Funções e métodos](/2-js-basics/2-functions-methods/translations/README.pt.md) | Jasmine e Christopher |
| 06 | Básico de JS | Tomando decisões com JS | Aprenda como criar condições em seu código usando métodos de tomada de decisão methods | [Tomando decisões](/2-js-basics/3-making-decisions/translations/README.pt.md) | Jasmine |
| 07 | Básico de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](/2-js-basics/4-arrays-loops/translations/README.pt.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando em construir um layout | [Introdução a HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando em construir um layout | [Introdução a HTML](/3-terrarium/1-intro-to-html/translations/README.pt-BR.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando no básico de inclusão CSS fazendo a página responsiva | [Introdução a CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript closures, DOM manipulation | Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar / soltar, focando em fechamentos e manipulação de DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Construa um jogo de digitação | Aprenda a usar eventos de teclado para conduzir a lógica de seu aplicativo JavaScript | [Programação Orientada a Eventos](/4-typing-game/typing-game/README.md) | Christopher |

@ -0,0 +1,33 @@
## Для вчителів
Що робити, якщо ви хотіли б ви використовувати цю навчальну програму у своєму класі? Будь ласка, не соромтеся!
Насправді, ви можете використовувати його в самому GitHub, використовуючи GitHub Classroom.
Для цього створіть форк цього репозиторію. Вам потрібно буде створити репозиторій для кожного уроку, тому вам потрібно буде розпакувати кожну папку в окреме репо. Таким чином, [GitHub Classroom](https://classroom.github.com/classrooms) може підхопити кожен урок окремо.
Ці [вичерпні інструкції](https://github.blog/2020-03-18-set-up-your-digital-classroom-with-github-classroom/) нададуть вам уявлення про те, як налаштувати вашу класну кімнату.
## Використання в Moodle, Canvas або Blackboard
Ця навчальна програма добре працює в цих системах управління навчанням! Використовуйте [Moodle файл](/teaching-files/webdev-moodle.mbz) для повного контенту, або спробуйте [Common Cartridge file](/teaching-files/webdev-common-cartridge.imscc) який містить деякий контент. Moodle Cloud не підтримує повні Common Cartridge експорти, тому бажано використовувати Moodle download файл, який може бути завантажений в Canvas. Будь-ласка повідомте як ми можемо це покращити.
![Moodle](/teaching-files/moodle.png)
> Розклад в Moodle classroom
![Canvas](/teaching-files/canvas.png)
> Розклад в Canvas
## Використання репозиторію самостійно
Якщо ви хочете використовувати цей репозиторій у його теперішньому вигляді, не використовуючи GitHub Classroom, це також можна зробити. Ви маєте поговорити зі своїми учнями, який урок опрацювати разом.
В онлайн-форматі (Zoom, Teams або інший) ви можете створити кімнати для тестів і наставляти учнів, щоб допомогти їм підготуватися до навчання. Потім запросіть студентів взяти участь у вікторинах і подайте свої відповіді як «проблеми» в певний час. Ви можете зробити те ж саме із завданнями, якщо ви хочете, щоб учні працювали спільно на відкритому повітрі.
Якщо ви віддаєте перевагу більш приватний формат, попросіть своїх учнів форкнути навчальну програму, урок за уроком, до власних репозиторій GitHub як приватних репозиторій і надати вам доступ. Потім вони можуть приватно виконувати вікторини та завдання та надсилати їх вам за допомогою issues у вашій аудиторії.
Існує багато способів зробити це в форматі онлайн-класу. Будь ласка, повідомте нам, що найкраще підходить для вас!
## Будь ласка, висловіть нам свої думки!
Ми хочемо, щоб ця навчальна програма працювала для вас і ваших учнів. Будь ласка, залиште нам [відгук](https://forms.microsoft.com/Pages/ResponsePage.aspx?id=v4j5cvGGr0GRqy180BHbR2humCsRZhxNuI79cm6n0hRUQzRVVU9VVlU5UlFLWTRLWlkyQUxORTg5WS4u).
Loading…
Cancel
Save