diff --git a/.github/ISSUE_TEMPLATE/translations_checklist.md b/.github/ISSUE_TEMPLATE/translations_checklist.md
index f55f519f..1bbd070e 100644
--- a/.github/ISSUE_TEMPLATE/translations_checklist.md
+++ b/.github/ISSUE_TEMPLATE/translations_checklist.md
@@ -67,3 +67,4 @@ assignees: ''
    - [ ] state-management README
    - [ ] state-management  assignment
    - [ ] solution base README
+   - [ ] API base README
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fil.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fil.md
new file mode 100644
index 00000000..5fe8129a
--- /dev/null
+++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fil.md
@@ -0,0 +1,198 @@
+# Panimula sa Programming Language at Tools of the Trade
+
+Sinasaklaw ng araling ito ang mga pangunahing kaalaman sa mga programming language. Ang mga paksang sakop dito ay nalalapat sa karamihan ng mga modernong programming language ngayon. Sa seksyong 'Tools of the Trade', matututunan mo ang tungkol sa kapaki-pakinabang na software na tumutulong sa iyo bilang isang developer.
+
+![Intro Programming](/sketchnotes/webdev101-programming.png)
+> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pagsusulit bago ang lektura
+[Pre-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1)
+
+## Panimula
+
+Sa araling ito, tatalakayin natin:
+
+- Ano ang programming?
+- Mga uri ng programming language
+- Mga pangunahing elemento ng isang programa
+- Kapaki-pakinabang na software at tooling para sa propesyonal na developer
+
+> Maaari mong kunin ang araling ito [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming?WT.mc_id=academic-13441-cxa)!
+
+## Ano ang Programming?
+
+Ang programming (kilala rin bilang coding) ay ang proseso ng pagsulat ng mga tagubilin sa isang device, gaya ng computer o mobile device. Isinulat namin ang mga tagubiling ito gamit ang isang programming language, na pagkatapos ay binibigyang-kahulugan ng device. Ang mga hanay ng mga tagubiling ito ay maaaring tukuyin ng iba't ibang pangalan, ngunit ang *program*, *computer program*, *application (app)*, at *executable* ay ilang sikat na pangalan.
+
+Ang *program* ay maaaring maging anumang nakasulat gamit ang code; Ang mga website, laro, at app ng telepono ay mga programa. Bagama't posibleng gumawa ng program nang walang pagsusulat ng code, ang pinagbabatayan na lohika ay binibigyang-kahulugan sa device at ang logic na iyon ay malamang na nakasulat gamit ang code. Ang isang program na *tumatakbo* o *nagpapatupad ng code* ay nagsasagawa ng mga tagubilin. Ang device na kasalukuyang binabasa mo ang araling ito ay nagpapatakbo ng isang programa upang i-print ito sa iyong screen.
+
+✅ Gumawa ng kaunting pananaliksik: sino ang itinuturing na unang computer programmer sa mundo?
+
+## Mga Wika sa Programming
+
+Ang mga programming language ay may pangunahing layunin: para sa mga developer na bumuo ng mga tagubilin para ipadala sa isang device. Ang mga device lang ang makakaintindi ng binary (1s at 0s), at para sa *karamihan* na mga developer, hindi iyon isang napakahusay na paraan para makipag-usap. Ang mga programming language ay isang sasakyan para sa komunikasyon sa pagitan ng mga tao at mga computer.
+
+Ang mga programming language ay may iba't ibang format at maaaring magsilbi ng iba't ibang layunin. Halimbawa, ang JavaScript ay pangunahing ginagamit para sa mga web application, habang ang Bash ay pangunahing ginagamit para sa mga operating system.
+
+*Mababang antas ng mga wika* ay karaniwang nangangailangan ng mas kaunting mga hakbang kaysa sa *mataas na antas ng mga wika* para sa isang device upang bigyang-kahulugan ang mga tagubilin. Gayunpaman, ang nagpapasikat sa mga mataas na antas ng wika ay ang kanilang pagiging madaling mabasa at suporta. Ang JavaScript ay itinuturing na isang mataas na antas ng wika.
+
+Ang sumusunod na code ay naglalarawan ng pagkakaiba sa pagitan ng mataas na antas ng wika na may JavaScript at mababang antas ng wika na may ARM assembly code.
+
+```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
+```
+
+Maniwala ka man o hindi, *pareho silang gumagawa ng parehong bagay*: pag-print ng Fibonacci sequence hanggang 10.
+
+✅ Ang Fibonacci sequence ay [tinukoy](https://en.wikipedia.org/wiki/Fibonacci_number) bilang isang hanay ng mga numero na ang bawat numero ay ang kabuuan ng dalawang nauna, simula sa 0 at 1.
+
+## Mga elemento ng isang programa
+
+Ang nag-iisang pagtuturo sa isang programa ay tinatawag na *pahayag* at kadalasang magkakaroon ng character o line spacing na nagmamarka kung saan nagtatapos ang pagtuturo, o *nagtatapos*. Nag-iiba-iba ang paraan ng pagwawakas ng isang programa sa bawat wika.
+
+Karamihan sa mga program ay umaasa sa paggamit ng data mula sa isang user o sa ibang lugar, kung saan ang mga pahayag ay maaaring umasa sa data upang magsagawa ng mga tagubilin. Maaaring baguhin ng data kung paano kumikilos ang isang program, kaya ang mga programming language ay may paraan upang pansamantalang mag-imbak ng data na magagamit sa ibang pagkakataon. Ang data na ito ay tinatawag na *mga variable*. Ang mga variable ay mga pahayag na nagtuturo sa isang device na mag-save ng data sa memorya nito. Ang mga variable sa mga programa ay katulad ng mga nasa algebra, kung saan mayroon silang natatanging pangalan at ang kanilang halaga ay maaaring magbago sa paglipas ng panahon.
+
+May posibilidad na ang ilang pahayag ay hindi isasagawa ng isang device. Ito ay karaniwang sa pamamagitan ng disenyo kapag isinulat ng developer o hindi sinasadya kapag may nangyaring hindi inaasahang error. Ang ganitong uri ng kontrol ng isang application ay ginagawa itong mas matatag at mapanatili. Karaniwang nangyayari ang mga pagbabagong ito sa kontrol kapag natugunan ang ilang partikular na desisyon. Ang isang karaniwang pahayag sa mga modernong programming language upang kontrolin kung paano pinapatakbo ang isang programa ay ang `if..else` na pahayag.
+
+✅ Matututo ka pa tungkol sa ganitong uri ng pahayag sa mga susunod na aralin
+
+## Mga Tool ng Kalakalan
+
+[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
+
+> 🎥 I-click ang larawan sa itaas para sa isang video tungkol sa tooling
+
+Sa seksyong ito, matututunan mo ang tungkol sa ilang software na maaari mong makitang lubhang kapaki-pakinabang habang sinisimulan mo ang iyong paglalakbay sa propesyonal na pag-unlad.
+
+Ang **development environment** ay isang natatanging hanay ng mga tool at feature na madalas gamitin ng developer kapag nagsusulat ng software. Ang ilan sa mga tool na ito ay na-customize para sa isang partikular na pangangailangan ng developer, at maaaring magbago sa paglipas ng panahon kung babaguhin ng developer ang mga priyoridad sa trabaho o personal na mga proyekto, o kapag gumagamit sila ng ibang programming language. Ang mga development environment ay kasing kakaiba ng mga developer na gumagamit ng mga ito.
+
+### Editors
+
+Ang isa sa mga pinakamahalagang tool para sa pagbuo ng software ay ang editor. Ang mga editor ay kung saan mo isusulat ang iyong code at kung minsan kung saan mo tatakbo ang iyong code.
+
+Umaasa ang mga developer sa mga editor para sa ilang karagdagang dahilan:
+
+- *Debugging* Pagtuklas ng mga bug at error sa pamamagitan ng hakbang sa code, linya sa linya. Ang ilang mga editor ay may mga kakayahan sa pag-debug, o maaaring i-customize at idagdag para sa mga partikular na programming language.  
+- *Syntax highlighting* Nagdaragdag ng mga kulay at pag-format ng teksto sa code, ginagawang mas madaling basahin. Pinapayagan ng karamihan sa mga editor ang naka-customize na pag-highlight ng syntax.
+- *Extensions and Integrations* Mga karagdagan na dalubhasa para sa mga developer, ng mga developer, para sa access sa mga karagdagang tool na hindi naka-built sa base editor. Halimbawa, kailangan din ng maraming developer ng paraan para idokumento ang kanilang code at ipaliwanag kung paano ito gumagana at mag-i-install ng extension ng spell check upang suriin kung may mga typo. Karamihan sa mga karagdagan na ito ay inilaan para sa paggamit sa loob ng isang partikular na editor, at karamihan sa mga editor ay may kasamang paraan upang maghanap ng mga available na extension.
+- *Customization* Karamihan sa mga editor ay lubos na napapasadya, at ang bawat developer ay magkakaroon ng kanilang sariling natatanging kapaligiran sa pag-unlad na nababagay sa kanilang mga pangangailangan. Marami rin ang nagpapahintulot sa mga developer na gumawa ng sarili nilang mga extension.
+
+#### Mga Sikat na Editor at Web Development Extension
+
+- [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)
+
+### Browsers
+
+Ang isa pang mahalagang tool ay ang browser. Ang mga web developer ay umaasa sa browser upang obserbahan kung paano tumatakbo ang kanilang code sa web, ginagamit din ito upang tingnan ang mga visual na elemento ng isang web page na nakasulat sa editor, tulad ng HTML.
+
+Maraming browser ang kasama ng *developer tools* (DevTools) na naglalaman ng isang hanay ng mga kapaki-pakinabang na feature at impormasyon para tulungan ang mga developer na mangolekta at makakuha ng mahahalagang insight tungkol sa kanilang application. Halimbawa: Kung ang isang web page ay may mga error, minsan nakakatulong na malaman kung kailan nangyari ang mga ito. Maaaring i-configure ang DevTools sa isang browser upang makuha ang impormasyong ito.
+
+#### Mga sikat na Browser at 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)
+
+### Mga Tool sa Command Line
+
+Mas gusto ng ilang developer ang isang mas kaunting graphical na view para sa kanilang mga pang-araw-araw na gawain at umaasa sa command line para makamit ito. Ang pagbuo ng code ay nangangailangan ng malaking halaga ng pagta-type, at mas gusto ng ilang developer na huwag guluhin ang kanilang daloy sa keyboard at gagamit sila ng mga keyboard shortcut upang magpalit sa pagitan ng mga desktop windows, magtrabaho sa iba't ibang file, at gumamit ng mga tool. Karamihan sa mga gawain ay maaaring kumpletuhin gamit ang isang mouse, ngunit ang isang benepisyo ng paggamit ng command line ay ang maraming maaaring gawin gamit ang command line tool nang hindi nangangailangan ng pagpapalit sa pagitan ng mouse at keyboard. Ang isa pang benepisyo ng command line ay ang mga ito ay maaaring i-configure at maaari mong i-save ang iyong custom na configuration, baguhin ito sa ibang pagkakataon, at i-import din ito sa mga bagong development machine. Dahil natatangi ang mga development environment sa bawat developer, iiwasan ng ilan ang paggamit ng command line, ang ilan ay aasa dito nang buo, at ang ilan ay mas gusto ang paghahalo ng dalawa.
+
+### Mga Sikat na Opsyon sa Command Line
+
+Mag-iiba ang mga opsyon para sa command line batay sa operating system na iyong ginagamit.
+
+*💻 = ay paunang naka-install sa operating system.*
+
+#### 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)
+
+#### Mga sikat na Command Line Tool
+
+- [Git](https://git-scm.com/) (💻 on most operating systems)
+- [NPM](https://www.npmjs.com/)
+- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
+
+### Documentation
+
+Kapag ang isang developer ay gustong matuto ng bago, malamang na bumaling sila sa dokumentasyon upang matutunan kung paano ito gamitin. Ang mga developer ay madalas na umaasa sa dokumentasyon upang gabayan sila sa kung paano gamitin nang maayos ang mga tool at wika, at upang makakuha din ng mas malalim na kaalaman sa kung paano ito gumagana.
+
+#### Popular Documentation sa Web Development
+
+- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), from Mozilla, ang mga publisher ng [Firefox](https://www.mozilla.org/firefox/) browser
+- [Frontend Masters](https://frontendmasters.com/learn/)
+- [Web.dev](https://web.dev), mula sa Google, mga publisher ng [Chrome](https://www.google.com/chrome/)
+- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), para sa [Microsoft Edge](https://www.microsoft.com/edge)
+
+✅ Magsaliksik: Ngayong alam mo na ang mga pangunahing kaalaman sa kapaligiran ng isang web developer, ihambing at ihambing ito sa kapaligiran ng isang web designer.
+
+---
+
+## 🚀 Hamon
+
+Ihambing ang ilang mga programming language. Ano ang ilan sa mga natatanging katangian ng JavaScript vs. Java? Kumusta naman ang COBOL vs. Go?
+
+## Pagsusulit pagkatapos ng Lektura
+[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/2)
+
+## Pagsusuri
+
+Mag-aral nang kaunti sa iba't ibang wika na magagamit ng programmer. Subukang magsulat ng isang linya sa isang wika, at pagkatapos ay gawing muli ito sa dalawang iba pa. Ano ang nalaman mo?
+
+## Assignment
+
+[Reading the Docs](assignment.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.uk.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.uk.md
new file mode 100644
index 00000000..b07f04f8
--- /dev/null
+++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.uk.md
@@ -0,0 +1,11 @@
+# Читання документів
+
+## Інструкції
+
+Існує багато інструментів, які можуть знадобитися веб-розробнику  [MDN документація для client-side інструментів](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Виберіть 3 інструменти, які не розглянуті в уроці, поясніть, чому веб-розробник використав би їх, знайдіть інструмент, який підпадає під цю категорію, і поділіться його документацією. Не використовуйте той самий приклад інструмента для документів MDN.
+
+## Рубрика
+
+Зразковий | Достатній | Потребує покращення
+--- | --- | -- |
+| Пояснено, чому веб-розробник використовує інструмент| Пояснив як, але не пояснив чому розробник використовує інструмент| Не згадав як і чому розробник буде використовувати інструмент  |
\ No newline at end of file
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.fil.md b/1-getting-started-lessons/2-github-basics/translations/README.fil.md
new file mode 100644
index 00000000..02c67338
--- /dev/null
+++ b/1-getting-started-lessons/2-github-basics/translations/README.fil.md
@@ -0,0 +1,318 @@
+# Panimula sa GitHub
+
+Sinasaklaw ng araling ito ang mga pangunahing kaalaman ng GitHub, isang platform para mag-host at mamahala ng mga pagbabago sa iyong code.
+
+![Intro to GitHub](../sketchnotes/webdev101-github.png)
+> Sketchnote ni [Tomomi Imura](https://twitter.com/girlie_mac)
+
+## Pagsusulit bago ang lektura
+[Pagsusulit bago ang lektura](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/3)
+
+## Panimula
+
+Sa araling ito, tatalakayin natin ang:
+
+- pagsubaybay sa gawaing ginagawa mo sa iyong makina
+- nagtatrabaho sa mga proyekto kasama ang iba
+- paano mag-ambag sa open source software
+
+### Mga kinakailangan
+
+Bago ka magsimula, kakailanganin mong suriin kung naka-install ang Git. Sa uri ng terminal: 
+`git --version`
+
+Kung hindi naka-install ang Git, [download Git](https://git-scm.com/downloads). Pagkatapos, i-setup ang iyong lokal na profile sa Git sa terminal:
+* `git config --global user.name "your-name"`
+* `git config --global user.email "your-email"`
+
+Upang tingnan kung naka-configure na ang Git maaari kang mag-type:
+`git config --list`
+
+Kakailanganin mo rin ang isang GitHub account, isang code editor (tulad ng Visual Studio Code), at kakailanganin mong buksan ang iyong terminal (or: command prompt).
+
+Mag-navigate sa [github.com](https://github.com/) at gumawa ng account kung hindi mo pa nagagawa, o mag-log in at punan ang iyong profile. 
+
+✅ Ang GitHub ay hindi lamang ang code repository sa mundo; may iba pa, ngunit ang GitHub ang pinakakilala
+
+### Paghahanda
+
+Kakailanganin mo ang parehong folder na may proyekto ng code sa iyong lokal na makina (laptop o PC), at isang pampublikong imbakan sa GitHub, na magsisilbing halimbawa kung paano mag-ambag sa mga proyekto ng iba.  
+
+---
+
+## Pamamahala ng code
+
+Sabihin nating mayroon kang lokal na folder na may ilang proyekto ng code at gusto mong simulan ang pagsubaybay sa iyong pag-unlad gamit ang git - ang version control system. Inihambing ng ilang tao ang paggamit ng git sa pagsulat ng love letter sa iyong sarili sa hinaharap. Ang pagbabasa ng iyong mga commit na mensahe mga araw o linggo o buwan mamaya, maaalala mo kung bakit ka gumawa ng desisyon, o "rollback" ng isang pagbabago - iyon ay, kapag sumulat ka ng magagandang "commit messages".
+
+### Gawain: Gumawa ng repository at mag-commit ng code
+
+1. **Create repository on GitHub**. Sa GitHub.com, sa tab na mga repositoryo, o mula sa kanang bahagi ng navigation bar, hanapin ang **new repo** pindutan.
+
+   1. Bigyan ng pangalan ang iyong repositoryo (folder).
+   1. Piliin **create repository**.
+
+1. **Navigate to your working folder**. Sa iyong terminal, lumipat sa folder (kilala rin bilang direktoryo) na gusto mong simulan ang pagsubaybay. Uri:
+
+   ```bash
+   cd [name of your folder]
+   ```
+
+1. **Initialize a git repository**. Sa uri ng iyong proyekto:
+
+   ```bash
+   git init
+   ```
+
+1. **Check status**. Upang suriin ang katayuan ng iyong uri ng imbakan:
+
+   ```bash
+   git status
+   ```
+
+   ang output ay maaaring magmukhang ganito:
+
+   ```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
+   ```
+
+   Karaniwang ang `git status` Ang command ay nagsasabi sa iyo ng mga bagay tulad ng kung anong mga file ang handa na _save_ sa repo o may mga pagbabago dito na maaaring gusto mong magpatuloy.
+
+1. **Idagdag ang lahat ng mga file para sa pagsubaybay**
+   Tinatawag din itong staging file/pagdaragdag ng mga file sa staging area.
+
+   ```bash
+   git add .
+   ```
+
+   The `git add` plus `.` argument indicates that all your files & changes for tracking. 
+
+1. **Magdagdag ng mga napiling file para sa pagsubaybay**
+
+   ```bash
+   git add [file or folder name]
+   ```
+
+   Nakakatulong ito sa amin na magdagdag lamang ng mga napiling file sa staging area kapag ayaw naming i-commit ang lahat ng file nang sabay-sabay.
+
+1. **Alisin ang lahat ng mga file**
+
+   ```bash
+   git reset
+   ```
+
+   Ang command na ito ay tumutulong sa amin na i-unstage ang lahat ng mga file nang sabay-sabay.
+
+1. **Alisin ang isang partikular na file**
+
+   ```bash
+   git reset [file or folder name]
+   ```
+
+   Tinutulungan kami ng command na ito na i-unstage lang ang isang partikular na file nang sabay-sabay na hindi namin gustong isama para sa susunod na commit.
+
+1. **Ipagpatuloy ang iyong trabaho**. Sa puntong ito naidagdag mo ang mga file sa isang tinatawag na _staging area_. Isang lugar kung saan sinusubaybayan ng Git ang iyong mga file. Upang gawing permanente ang pagbabago kailangan mong gawin _commit_ ang mga papeles. Upang gawin ito, lumikha ka ng isang _commit_ kasama ang `git commit` atas. A _commit_ kumakatawan sa isang punto ng pag-save sa kasaysayan ng iyong repo. I-type ang sumusunod upang lumikha ng a _commit_:
+
+   ```bash
+   git commit -m "first commit"
+   ```
+
+   Iko-commit nito ang lahat ng iyong file, idinaragdag ang mensaheng "first commit". Para sa mga commit na mensahe sa hinaharap, gugustuhin mong maging mas mapaglarawan sa iyong paglalarawan upang maihatid kung anong uri ng pagbabago ang iyong ginawa.
+
+1. **Ikonekta ang iyong lokal na Git repo sa GitHub**. Ang isang Git repo ay mabuti sa iyong makina ngunit sa isang punto gusto mong magkaroon ng backup ng iyong mga file sa isang lugar at mag-imbita rin ng ibang mga tao na magtrabaho kasama mo sa iyong repo. Ang isang magandang lugar para gawin ito ay ang GitHub. Tandaan na nakagawa na kami ng repo sa GitHub kaya ang kailangan lang naming gawin ay ikonekta ang aming lokal na Git repo sa GitHub. Ang utos `git remote add` gagawin lang yan. I-type ang sumusunod na command:
+
+   > Tandaan, bago mo i-type ang command pumunta sa iyong GitHub repo page para mahanap ang repository URL. Gagamitin mo ito sa utos sa ibaba. Palitan `repository_name` gamit ang iyong GitHub URL.
+
+   ```bash
+   git remote add origin https://github.com/username/repository_name.git
+   ```
+
+   Lumilikha ito ng isang _remote_, o koneksyon, pinangalanan "origin" na tumuturo sa GitHub repository na ginawa mo kanina.
+
+1. **Magpadala ng mga lokal na file sa GitHub**. Sa ngayon ay nakagawa ka ng isang _connection_ sa pagitan ng lokal na repo at ng GitHub repo. Ipadala natin ang mga file na ito sa GitHub gamit ang sumusunod na command `git push`, tulad nito: 
+
+   ```bash
+   git push -u origin main
+   ```
+
+   Ipinapadala nito ang iyong mga commit sa iyong "pangunahing" branch sa GitHub.
+
+1. **Upang magdagdag ng higit pang mga pagbabago**. Kung gusto mong magpatuloy sa paggawa ng mga pagbabago at itulak ang mga ito sa GitHub kakailanganin mo lang gamitin ang sumusunod na tatlong utos:
+
+   ```bash
+   git add .
+   git commit -m "type your commit message here"
+   git push
+   ```
+
+   > Tip, Baka gusto mo ring magpatibay ng isang `.gitignore` file upang maiwasan ang mga file na hindi mo gustong subaybayan mula sa paglabas sa GitHub - tulad ng mga talang iyon na iniimbak mo sa parehong folder ngunit walang lugar sa isang pampublikong imbakan. Makakahanap ka ng mga template para sa `.gitignore` files at [.gitignore templates](https://github.com/github/gitignore).
+
+#### Mag-commit ng mga mensahe
+
+Ang isang mahusay na linya ng paksa ng Git commit ay kumukumpleto sa sumusunod na pangungusap:
+Kung inilapat, gagawin ng commit na ito <your subject line here>
+
+Para sa paksa gamitin ang pautos, kasalukuyang panahunan: "pagbabago" hindi "binago" o "pagbabago". 
+Tulad ng sa paksa, sa katawan (opsyonal) ay ginagamit din ang imperative, present tense. Dapat isama ng katawan ang motibasyon para sa pagbabago at ihambing ito sa nakaraang pag-uugali. Ipinapaliwanag mo ang `why`, hindi ang `how`.
+
+✅ Maglaan ng ilang minuto upang mag-surf sa GitHub. Makakahanap ka ba ng talagang mahusay na commit message? Makakahanap ka ba ng talagang minimal? Anong impormasyon sa tingin mo ang pinakamahalaga at kapaki-pakinabang na ihatid sa isang commit message?
+
+### Gawain: Magtulungan
+
+Ang pangunahing dahilan ng paglalagay ng mga bagay sa GitHub ay upang gawing posible ang pakikipagtulungan sa ibang mga developer.
+
+## Paggawa sa mga proyekto kasama ang iba
+
+Sa iyong imbakan, mag-navigate sa `Insights > Community` upang makita kung paano inihahambing ang iyong proyekto sa mga inirerekomendang pamantayan ng komunidad.
+
+   Narito ang ilang bagay na maaaring mapabuti ang iyong GitHub repo:
+   - **Description**. Nagdagdag ka ba ng paglalarawan para sa iyong proyekto?
+   - **README**. Nagdagdag ka ba ng README? Nagbibigay ang GitHub ng gabay para sa pagsulat ng a [README](https://docs.github.com/articles/about-readmes/).
+   - **Contributing guideline**. Mayroon ba ang iyong proyekto [contributing guidelines](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
+   - **Code of Conduct**. a [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
+   - **License**. Marahil ang pinakamahalaga, ang [license](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
+
+
+Makikinabang ang lahat ng mapagkukunang ito sa pag-onboard ng mga bagong miyembro ng team. At iyon ang karaniwang mga uri ng mga bagay na tinitingnan ng mga bagong kontribyutor bago man lang tingnan ang iyong code, upang malaman kung ang iyong proyekto ay ang tamang lugar para sa kanila na gugulin ang kanilang oras.
+
+✅ Ang mga file ng README, bagama't nangangailangan sila ng oras upang maghanda, ay kadalasang napapabayaan ng mga abalang tagapangasiwa. Makakahanap ka ba ng isang halimbawa ng isang partikular na naglalarawan? Tandaan: may ilan [tools to help create good READMEs](https://www.makeareadme.com/) na baka gusto mong subukan.
+
+### Gawain: Pagsamahin ang ilang code
+
+Ang mga nag-aambag na doc ay tumutulong sa mga tao na mag-ambag sa proyekto. Ipinapaliwanag nito kung anong mga uri ng mga kontribusyon ang iyong hinahanap at kung paano gumagana ang proseso. Ang mga kontribyutor ay kailangang dumaan sa isang serye ng mga hakbang upang makapag-ambag sa iyong repo sa GitHub:
+
+
+1. **Forking your repo** Malamang na gusto mo ang mga tao _fork_ your project. Ang ibig sabihin ng forking ay paggawa ng replica ng iyong repository sa kanilang profile sa GitHub.
+1. **Clone**. Mula doon ay i-clone nila ang proyekto sa kanilang lokal na makina. 
+1. **Create a branch**. Gusto mong hilingin sa kanila na lumikha ng isang _branch_ para sa kanilang trabaho. 
+1. **Focus their change on one area**. Hilingin sa mga kontribyutor na ituon ang kanilang mga kontribusyon sa isang bagay sa isang pagkakataon - sa paraang iyon ang mga pagkakataong magagawa mo _merge_ sa kanilang trabaho ay mas mataas. Isipin na magsulat sila ng pag-aayos ng bug, magdagdag ng bagong feature, at mag-update ng ilang pagsubok - paano kung gusto mo, o maaari lang ipatupad ang 2 sa 3, o 1 sa 3 pagbabago?
+
+✅ Isipin ang isang sitwasyon kung saan ang mga sangay ay partikular na kritikal sa pagsulat at pagpapadala ng magandang code. Anong mga use case ang maiisip mo?
+
+> Tandaan, maging ang pagbabagong gusto mong makita sa mundo, at lumikha din ng mga sangay para sa iyong sariling gawain. Ang anumang commit na gagawin mo ay gagawin sa branch na kasalukuyan mong kinaroroonan “checked out” sa. Gamitin `git status` para makita kung saang branch yan.
+
+Dumaan tayo sa isang daloy ng trabaho ng contributor. Ipagpalagay na ang nag-ambag ay mayroon na _forked_ at _cloned_ ang repo para magkaroon sila ng Git repo na handang gawin, sa kanilang lokal na makina:
+
+1. **Create a branch**. Gamitin ang command `git branch` upang lumikha ng isang sangay na maglalaman ng mga pagbabagong ibig nilang i-ambag:
+
+   ```bash
+   git branch [branch-name]
+   ```
+
+1. **Switch to working branch**. Lumipat sa tinukoy na sangay at i-update ang gumaganang direktoryo gamit ang `git checkout`:
+
+   ```bash
+   git checkout [branch-name]
+   ```
+
+1. **Do work**. Sa puntong ito gusto mong idagdag ang iyong mga pagbabago. Huwag kalimutang sabihin kay Git ang tungkol dito gamit ang mga sumusunod na utos:
+
+   ```bash
+   git add .
+   git commit -m "my changes"
+   ```
+
+   Siguraduhing bibigyan mo ng magandang pangalan ang iyong commit, para sa iyong kapakanan pati na rin ang maintainer ng repo na tinutulungan mo.
+
+1. **Combine your work with the `main` branch**. Sa ilang mga punto ay tapos ka nang magtrabaho at gusto mong pagsamahin ang iyong trabaho sa iyong trabaho `main` sangay. Ang `main` maaaring nagbago ang branch samantala kaya siguraduhing i-update mo muna ito sa pinakabago gamit ang mga sumusunod na command:
+
+   ```bash
+   git checkout main
+   git pull
+   ```
+
+   Sa puntong ito gusto mong tiyakin na anuman _conflicts_, mga sitwasyon kung saan hindi madali ang Git _combine_ ang mga pagbabago ay nangyayari sa iyong nagtatrabaho na sangay. Samakatuwid, patakbuhin ang sumusunod na mga atas:
+
+   ```bash
+   git checkout [branch_name]
+   git merge main
+   ```
+
+   Dadalhin nito ang lahat ng pagbabago mula sa `main` into your branch and sana matuloy mo na lang. Kung hindi, sasabihin sa iyo ng VS Code kung nasaan ang Git _confused_ at babaguhin mo lang ang mga apektadong file para masabi kung aling content ang pinakatumpak.
+
+1. **Send your work to GitHub**. Ang pagpapadala ng iyong trabaho sa GitHub ay nangangahulugan ng dalawang bagay. Itulak ang iyong sangay sa iyong repo at pagkatapos ay magbukas ng isang PR, Hiling na Hilahin.
+
+   ```bash
+   git push --set-upstream origin [branch-name]
+   ```
+
+   Ang utos sa itaas ay lumilikha ng sangay sa iyong forked repo.
+
+1. **Open a PR**. Susunod, gusto mong magbukas ng PR. Ginagawa mo iyon sa pamamagitan ng pag-navigate sa forked repo sa GitHub. Makakakita ka ng indikasyon sa GitHub kung saan itatanong nito kung gusto mong lumikha ng bagong PR, i-click mo iyon at dadalhin ka sa isang interface kung saan maaari mong baguhin ang pamagat ng commit message, bigyan ito ng mas angkop na paglalarawan. Ngayon ay makikita ng tagapangasiwa ng repo na iyong tinira ang PR na ito at _fingers crossed_ sila ay pahalagahan at _merge_ your PR. Isa ka na ngayong contributor, yay :)
+
+1. **Clean up**. Ito ay itinuturing na mabuting kasanayan sa _clean up_ pagkatapos mong matagumpay na pagsamahin ang isang PR. Gusto mong linisin ang iyong lokal na sangay at ang sangay na itinulak mo sa GitHub. Una, tanggalin natin ito nang lokal gamit ang sumusunod na utos: 
+
+   ```bash
+   git branch -d [branch-name]
+   ```
+
+   Tiyaking pupunta ka sa pahina ng GitHub para sa susunod na forked repo at alisin ang malayong sangay na itinulak mo lang dito.
+
+`Pull request` parang silly term kasi gusto mo talagang i-push yung mga pagbabago mo sa project. Ngunit kailangang isaalang-alang ng maintainer (may-ari ng proyekto) o pangunahing koponan ang iyong mga pagbabago bago ito isama sa "pangunahing" sangay ng proyekto, kaya talagang humihiling ka ng desisyon sa pagbabago mula sa isang maintainer.  
+
+Ang pull request ay ang lugar upang paghambingin at pag-usapan ang mga pagkakaibang ipinakilala sa isang sangay na may mga review, komento, pinagsamang pagsubok, at higit pa. Ang isang mahusay na kahilingan sa paghila ay sumusunod sa halos kaparehong mga panuntunan gaya ng isang commit na mensahe. Maaari kang magdagdag ng reference sa isang isyu sa issue tracker, kapag ang iyong trabaho halimbawa ay nag-ayos ng isyu. Ginagawa ito gamit ang a `#` na sinusundan ng bilang ng iyong isyu. Halimbawa `#97`.
+
+🤞Pinilit na ang lahat ng mga tseke ay pumasa at ang (mga) may-ari ng proyekto ay pinagsama ang iyong mga pagbabago sa proyekto🤞
+
+I-update ang iyong kasalukuyang lokal na nagtatrabaho na sangay sa lahat ng mga bagong commit mula sa kaukulang remote na sangay sa GitHub:
+
+`git pull`
+
+## Paano mag-ambag sa open source
+
+Una, maghanap tayo ng isang imbakan (o **repo**) sa GitHub ng interes sa iyo at kung saan mo gustong mag-ambag ng pagbabago. Gusto mong kopyahin ang mga nilalaman nito sa iyong makina.
+
+✅ Ang isang mahusay na paraan upang makahanap ng 'beginner-friendly' repos ay ang [search by the tag '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)
+
+Mayroong ilang mga paraan ng pagkopya ng code. Ang isang paraan ay ang "i-clone" ang mga nilalaman ng repository, gamit ang HTTPS, SSH, o gamit ang GitHub CLI (Command Line Interface). 
+
+Buksan ang iyong terminal at i-clone ang repositoryo tulad nito:
+`git clone https://github.com/ProjectURL`
+
+Upang magtrabaho sa proyekto, lumipat sa kanang folder:
+`cd ProjectURL`
+
+Maaari mo ring buksan ang buong proyekto gamit ang [Codespaces](https://github.com/features/codespaces), Ang naka-embed na code editor / cloud development environment ng GitHub, o [GitHub Desktop](https://desktop.github.com/).
+
+Panghuli, maaari mong i-download ang code sa isang naka-zip na folder. 
+
+### Ilang mas kawili-wiling bagay tungkol sa GitHub
+
+Maaari mong lagyan ng star, panoorin at/o "i-fork" ang anumang pampublikong repository sa GitHub. Mahahanap mo ang iyong mga naka-star na repository sa kanang tuktok na drop-down na menu. Ito ay tulad ng pag-bookmark, ngunit para sa code. 
+
+Ang mga proyekto ay may tagasubaybay ng isyu, karamihan ay nasa GitHub sa tab na "Issues" maliban kung iba ang ipinahiwatig, kung saan tinatalakay ng mga tao ang mga isyung nauugnay sa proyekto. At ang tab na Pull Requests ay kung saan tinatalakay at sinusuri ng mga tao ang mga pagbabagong kasalukuyang isinasagawa.
+
+Maaaring magkaroon din ng talakayan ang mga proyekto sa mga forum, mailing list, o mga channel ng chat tulad ng Slack, Discord o IRC.
+
+✅ Tingnan ang iyong bagong GitHub repo at subukan ang ilang bagay, tulad ng pag-edit ng mga setting, pagdaragdag ng impormasyon sa iyong repo, at paggawa ng proyekto (tulad ng Kanban board). Marami kang magagawa!
+
+---
+
+## 🚀 Hamon 
+
+Ipares sa isang kaibigan para magtrabaho sa code ng isa't isa. Gumawa ng proyekto nang magkakasama, mag-fork ng code, gumawa ng mga sangay, at magsama ng mga pagbabago.
+
+## Pagsusulit pagkatapos ng Lektura
+[Post-lecture quiz](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/4)
+
+## Pagsusuri at Sariling pag-aaral
+
+Magbasa pa tungkol sa [contributing to open source software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
+
+[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
+
+Magsanay, magsanay, magsanay. Ang GitHub ay may mahusay na mga landas sa pag-aaral na magagamit sa pamamagitan ng [lab.github.com](https://lab.github.com/):
+
+- [First Week on GitHub](https://lab.github.com/githubtraining/first-week-on-github)
+
+Makakahanap ka rin ng mas advanced na mga lab. 
+
+## Takdang-aralin 
+
+Kumpletuhin [the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github)
diff --git a/1-getting-started-lessons/translations/README.uk.md b/1-getting-started-lessons/translations/README.uk.md
new file mode 100644
index 00000000..f12ccddf
--- /dev/null
+++ b/1-getting-started-lessons/translations/README.uk.md
@@ -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)
+
+
+
+
diff --git a/2-js-basics/translations/README.uk.md b/2-js-basics/translations/README.uk.md
new file mode 100644
index 00000000..9580f0a7
--- /dev/null
+++ b/2-js-basics/translations/README.uk.md
@@ -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)
\ No newline at end of file
diff --git a/3-terrarium/1-intro-to-html/assignment.md b/3-terrarium/1-intro-to-html/assignment.md
index d74b60b4..349b6b06 100644
--- a/3-terrarium/1-intro-to-html/assignment.md
+++ b/3-terrarium/1-intro-to-html/assignment.md
@@ -8,4 +8,4 @@ Imagine you are designing, or redesigning, your personal web site. Create a grap
 
 | Criteria | Exemplary                                                                           | Adequate                                                                         | Needs Improvement                                                                 |
 | -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
-|          | A blog layout is represented visually with at least 10 elements of markup displayed | A blog layout is represented visually with around 5 elements of markup displayed | A blog layout is represented visually with at most 3 elements of markup displayed |
\ No newline at end of file
+|          | A blog layout is represented visually with at least 10 elements of markup displayed | A blog layout is represented visually with around 5 elements of markup displayed | A blog layout is represented visually with at most 3 elements of markup displayed |
diff --git a/3-terrarium/1-intro-to-html/translations/README.pt-BR.md b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md
new file mode 100644
index 00000000..b57d52b2
--- /dev/null
+++ b/3-terrarium/1-intro-to-html/translations/README.pt-BR.md
@@ -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)
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.pt-BR.md b/3-terrarium/1-intro-to-html/translations/assignment.pt-BR.md
new file mode 100644
index 00000000..36b465ea
--- /dev/null
+++ b/3-terrarium/1-intro-to-html/translations/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 |
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.pt.md b/3-terrarium/1-intro-to-html/translations/assignment.pt.md
new file mode 100644
index 00000000..371cfec2
--- /dev/null
+++ b/3-terrarium/1-intro-to-html/translations/assignment.pt.md
@@ -0,0 +1,11 @@
+# Pratique seu HTML: Construa um mockup de blog
+
+## Instruções
+
+Imagine que você está projetando ou redesenhando seu web site pessoal. Crie um mockup gráfico do seu site e então escreva as marcações HTML que você usaria para construir os vários elementos do site. Você pode fazer isso no papel e digitalizar ou usar o software de sua preferência, apenas tenha certeza de elaborar manualmente a marcação HTML.
+
+## Rubrica
+
+| Critério | Exemplar                                                                           | Adequado                                                                         | Precisa de melhoria                                                                 |
+| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|          | Um layout de blog é representado visualmente com pelo menos 10 elementos de marcação HTML exibidos | Um layout de blog é representado visualmente com cerca de 5 elementos de marcação HTML exibidos | Um layout de blog é representado com no máxiom 3 elementos de marcação HTML exibidos |
\ No newline at end of file
diff --git a/3-terrarium/2-intro-to-css/translations/assignment.pt.md b/3-terrarium/2-intro-to-css/translations/assignment.pt.md
new file mode 100644
index 00000000..1ac270c2
--- /dev/null
+++ b/3-terrarium/2-intro-to-css/translations/assignment.pt.md
@@ -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 |
diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/README.pt.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.pt.md
new file mode 100644
index 00000000..934c4401
--- /dev/null
+++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/README.pt.md
@@ -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)
+
diff --git a/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.pt.md b/3-terrarium/3-intro-to-DOM-and-closures/translations/assignment.pt.md
new file mode 100644
index 00000000..77b5f87d
--- /dev/null
+++ b/3-terrarium/3-intro-to-DOM-and-closures/translations/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 |
diff --git a/3-terrarium/translations/README.pt-BR.md b/3-terrarium/translations/README.pt-BR.md
new file mode 100644
index 00000000..84b0a4ac
--- /dev/null
+++ b/3-terrarium/translations/README.pt-BR.md
@@ -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.
diff --git a/3-terrarium/translations/README.pt.md b/3-terrarium/translations/README.pt.md
new file mode 100644
index 00000000..232cd210
--- /dev/null
+++ b/3-terrarium/translations/README.pt.md
@@ -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.
\ No newline at end of file
diff --git a/6-space-game/5-keeping-score/translations/README.fr.md b/6-space-game/5-keeping-score/translations/README.fr.md
new file mode 100644
index 00000000..448db363
--- /dev/null
+++ b/6-space-game/5-keeping-score/translations/README.fr.md
@@ -0,0 +1,189 @@
+# Construire un jeu de l'espace - Partie 5 : scores et vies
+
+## Quiz de pré-lecture
+
+[Quiz de pré-lecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/37?loc=fr)
+
+Dans cette leçon, vous apprendrez à ajouter des points à un jeu et à calculer des vies.
+
+## Dessiner du texte à l'écran
+
+Pour pouvoir afficher un score de jeu à l'écran, vous devez savoir comment placer du texte à l'écran. La réponse est d'utiliser la méthode `fillText()` sur l'objet canvas. Vous pouvez également contrôler d'autres aspects comme la police à utiliser, la couleur du texte et même son alignement (gauche, droite, centre). Vous trouverez ci-dessous du code permettant d'afficher du texte à l'écran.
+
+```javascript
+ctx.font = "30px Arial";
+ctx.fillStyle = "red";
+ctx.textAlign = "right";
+ctx.fillText("show this on the screen", 0, 0);
+```
+
+✅ En savoir plus sur [comment ajouter du texte à un canvas ](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), et n'hésitez pas à rendre le vôtre plus sophistiqué !
+
+## La vie, comme concept de jeu
+
+Le concept d'avoir une vie dans un jeu n'est qu'un nombre. Dans le contexte d'un jeu spatial, il est courant d'attribuer un ensemble de vies qui sont réduites une par une lorsque votre vaisseau subit des dégâts. C'est bien si vous pouvez montrer une représentation graphique de ceci comme des mini vaisseaux ou des cœurs au lieu d'un nombre.
+
+## Ce qu'il faut construire
+
+Ajoutons les éléments suivants à votre jeu :
+
+- **Score de jeu** : Pour chaque navire ennemi détruit, le héros devrait recevoir quelques points, nous suggérons 100 points par navire. Le score du jeu devrait être affiché en bas à gauche.
+- **Vie** : Votre navire a trois vies. Vous perdez une vie chaque fois qu'un navire ennemi entre en collision avec vous. Un score de vie devrait être affiché en bas à droite et être composé du graphique suivant [image de vie](solution/assets/life.png).
+
+## Étapes recommandées
+
+Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire `your-work`. Il devrait contenir les éléments suivants :
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Vous démarrez votre projet dans le dossier `your_work` en tapant :
+
+```bash
+cd your-work
+npm start
+```
+
+Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:5000`. Ouvrez un navigateur et entrez cette adresse, pour l'instant il devrait afficher le héros et tous les ennemis, et lorsque vous appuyez sur vos flèches gauche et droite, le héros se déplace et peut abattre les ennemis.
+
+### Ajouter du code
+
+1. **Copiez les éléments nécessaires** du dossier `solution/assets/` dans le dossier `your-work` ; vous allez ajouter un élément `life.png`. Ajoutez l'image lifeImg à la fonction window.onload :
+
+    ```javascript
+    lifeImg = await loadTexture("assets/life.png");
+    ```
+
+1. Ajoutez le `lifeImg` à la liste des éléments :
+
+    ```javascript
+    let heroImg,
+    ...
+    lifeImg,
+    ...
+    eventEmitter = new EventEmitter();
+    ```
+  
+2. **Ajoutez des variables**. Ajoutez le code qui représente votre score total (0) et les vies restantes (3), affichez ces scores sur un écran.
+
+3. **Étendre la fonction `updateGameObjects()`**. Étendre la fonction `updateGameObjects()` pour gérer les collisions avec les ennemis :
+
+    ```javascript
+    enemies.forEach(enemy => {
+        const heroRect = hero.rectFromGameObject();
+        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
+          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
+        }
+      })
+    ```
+
+4. **Ajouter `life` et `points`**. 
+   1. **Initialiser les variables**. Sous `this.cooldown = 0` dans la classe `Hero` , définissez la vie et les points :
+
+        ```javascript
+        this.life = 3;
+        this.points = 0;
+        ```
+
+   1. **Dessinez les variables à l'écran**. Dessinez ces valeurs à l'écran :
+
+        ```javascript
+        function drawLife() {
+          // TODO, 35, 27
+          const START_POS = canvas.width - 180;
+          for(let i=0; i < hero.life; i++ ) {
+            ctx.drawImage(
+              lifeImg, 
+              START_POS + (45 * (i+1) ), 
+              canvas.height - 37);
+          }
+        }
+        
+        function drawPoints() {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = "red";
+          ctx.textAlign = "left";
+          drawText("Points: " + hero.points, 10, canvas.height-20);
+        }
+        
+        function drawText(message, x, y) {
+          ctx.fillText(message, x, y);
+        }
+
+        ```
+
+   1. **Ajouter des méthodes à la boucle de jeu**. Assurez-vous d'ajouter ces fonctions à votre fonction window.onload sous `updateGameObjects()`:
+
+        ```javascript
+        drawPoints();
+        drawLife();
+        ```
+
+1. **Mettre en œuvre les règles du jeu**. Mettez en œuvre les règles du jeu suivantes :
+
+   1. **Pour chaque collision entre héros et ennemis**, retirez une vie.
+   
+      Étendez la classe `Hero` pour faire cette suppression:
+
+        ```javascript
+        decrementLife() {
+          this.life--;
+          if (this.life === 0) {
+            this.dead = true;
+          }
+        }
+        ```
+
+   2. **Pour chaque laser qui touche un ennemi**, augmentez le score du jeu de 100 points.
+
+      Étendez la classe Hero pour faire cet ajout :
+    
+        ```javascript
+          incrementPoints() {
+            this.points += 100;
+          }
+        ```
+
+        Ajoutez ces fonctions à vos émetteurs d'événements de collision :
+
+        ```javascript
+        eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+           first.dead = true;
+           second.dead = true;
+           hero.incrementPoints();
+        })
+
+        eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+           enemy.dead = true;
+           hero.decrementLife();
+        });
+        ```
+
+✅ Faites une petite recherche pour découvrir d'autres jeux créés à l'aide de JavaScript/Canvas. Quels sont leurs points communs ?
+
+À la fin de ce travail, vous devriez voir les petits vaisseaux de "vie" en bas à droite, les points en bas à gauche, et vous devriez voir votre compte de vie diminuer lorsque vous entrez en collision avec des ennemis et vos points augmenter lorsque vous tirez sur des ennemis. Bien joué ! Votre jeu est presque terminé.
+
+---
+
+## 🚀 Challenge
+
+Votre code est presque complet. Pouvez-vous envisager vos prochaines étapes ?
+
+## Quiz post-lecture
+
+[Quiz post-lecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/38?loc=fr)
+
+## Révision et autoformation
+
+Recherchez des moyens d'incrémenter et de décrémenter les scores et les vies. Il existe des moteurs de jeu intéressants comme [PlayFab](https://playfab.com). Comment l'utilisation de l'un d'eux pourrait-elle améliorer votre jeu ?
+
+## Travail à faire
+
+[Construire un jeu de score](assignment.fr.md)
diff --git a/6-space-game/6-end-condition/translations/README.fr.md b/6-space-game/6-end-condition/translations/README.fr.md
new file mode 100644
index 00000000..cd729f37
--- /dev/null
+++ b/6-space-game/6-end-condition/translations/README.fr.md
@@ -0,0 +1,223 @@
+# Construire un jeu de l'espace Partie 6 : Fin et redémarrage
+
+## Quiz de prélecture
+
+[Quiz de prélecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=fr)
+
+Il existe différentes façons d'exprimer une "condition de fin" dans un jeu. C'est à vous, en tant que créateur du jeu, de dire pourquoi le jeu est terminé. Voici quelques raisons, si nous supposons que nous parlons du jeu spatial que vous avez construit jusqu'à présent :
+
+- **`N`Les navires ennemis ont été détruits** : Si vous divisez un jeu en plusieurs niveaux, il est assez fréquent que vous deviez détruire `N` vaisseaux ennemis pour terminer un niveau.
+- **Votre navire a été détruit** : Il y a certainement des jeux où vous perdez la partie si votre vaisseau est détruit. Une autre approche commune est que vous avez le concept de vies. Chaque fois que votre vaisseau est détruit, une vie est déduite. Une fois que toutes les vies ont été perdues, vous perdez la partie.
+- **Vous avez collecté `N` points** : Une autre condition de fin commune est que vous accumuliez des points. La façon dont vous obtenez des points dépend de vous, mais il est assez courant d'attribuer des points à diverses activités comme la destruction d'un navire ennemi ou la collecte d'objets que les objets *laissent tomber* lorsqu'ils sont détruits.
+- Compléter un niveau** : Cela peut impliquer plusieurs conditions telles que `X` navires ennemis détruits, `Y` points collectés ou peut-être qu'un objet spécifique a été collecté.
+
+
+## Redémarrage
+
+Si les gens apprécient votre jeu, ils auront probablement envie d'y rejouer. Lorsque le jeu se termine, quelle qu'en soit la raison, vous devez proposer une alternative pour recommencer.
+
+✅ Réfléchissez un peu aux conditions dans lesquelles vous constatez qu'une partie se termine, puis à la manière dont vous êtes invité à la reprendre.
+
+## Ce qu'il faut construire
+
+Vous allez ajouter ces règles à votre jeu :
+
+1. **Gagner la partie**. Une fois que tous les navires ennemis ont été détruits, vous gagnez la partie. Affichez en outre une sorte de message de victoire.
+1. **Démarrer**. Une fois que toutes les vies sont perdues ou que la partie est gagnée, vous devez proposer un moyen de redémarrer la partie. N'oubliez pas ! Vous devrez réinitialiser le jeu et l'état précédent du jeu devra être effacé.
+
+## Mesures recommandées
+
+Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire `your-work`. Il devrait contenir les éléments suivants :
+
+```bash
+-| assets
+  -| enemyShip.png
+  -| player.png
+  -| laserRed.png
+  -| life.png
+-| index.html
+-| app.js
+-| package.json
+```
+
+Vous démarrez votre projet dans le dossier `your_work` en tapant :
+
+```bash
+cd your-work
+npm start
+```
+
+Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:5000`. Ouvrez un navigateur et entrez cette adresse. Votre jeu devrait être dans un état jouable.
+
+> astuce : pour éviter les avertissements dans Visual Studio Code, modifiez la fonction `window.onload` pour appeler `gameLoopId` tel quel (sans `let`), et déclarez le gameLoopId en haut du fichier, indépendamment : `let gameLoopId;`
+
+### Ajouter du code
+
+1. **Condition de fin de parcours**. Ajoutez du code qui garde la trace du nombre d'ennemis, ou si le vaisseau du héros a été détruit en ajoutant ces deux fonctions :
+
+    ```javascript
+    function isHeroDead() {
+      return hero.life <= 0;
+    }
+
+    function isEnemiesDead() {
+      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
+      return enemies.length === 0;
+    }
+    ```
+
+1. **Ajouter de la logique aux gestionnaires de messages**. Modifiez le `eventEmitter` pour gérer ces conditions :
+
+    ```javascript
+    eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
+        first.dead = true;
+        second.dead = true;
+        hero.incrementPoints();
+
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+
+    eventEmitter.on(Messages.COLLISION_ENEMY_HERO, (_, { enemy }) => {
+        enemy.dead = true;
+        hero.decrementLife();
+        if (isHeroDead())  {
+          eventEmitter.emit(Messages.GAME_END_LOSS);
+          return; // loss before victory
+        }
+        if (isEnemiesDead()) {
+          eventEmitter.emit(Messages.GAME_END_WIN);
+        }
+    });
+    
+    eventEmitter.on(Messages.GAME_END_WIN, () => {
+        endGame(true);
+    });
+      
+    eventEmitter.on(Messages.GAME_END_LOSS, () => {
+      endGame(false);
+    });
+    ```
+
+1. **Ajouter de nouveaux types de messages**. Ajoutez ces messages à l'objet constantes :
+
+    ```javascript
+    GAME_END_LOSS: "GAME_END_LOSS",
+    GAME_END_WIN: "GAME_END_WIN",
+    ```
+
+1. **Ajouter le code de redémarrage** code qui redémarre le jeu à la pression d'un bouton sélectionné.
+
+   1. **Écouter la touche pressée `Enter`**. Modifiez l'eventListener de votre fenêtre pour écouter cette pression :
+
+    ```javascript
+     else if(evt.key === "Enter") {
+        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
+      }
+    ```
+
+   1. **Ajouter un message de redémarrage**. Ajoutez ce message à votre constante de messages :
+
+        ```javascript
+        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
+        ```
+
+1. **Mettre en œuvre les règles du jeu**.  Mettez en œuvre les règles du jeu suivantes :
+
+   1. **Condition de victoire du joueur**. Lorsque tous les navires ennemis sont détruits, affichez un message de victoire.
+
+      1. Tout d'abord, créez une fonction `displayMessage()` :
+
+        ```javascript
+        function displayMessage(message, color = "red") {
+          ctx.font = "30px Arial";
+          ctx.fillStyle = color;
+          ctx.textAlign = "center";
+          ctx.fillText(message, canvas.width / 2, canvas.height / 2);
+        }
+        ```
+
+      1. Créez une fonction `endGame()` :
+
+        ```javascript
+        function endGame(win) {
+          clearInterval(gameLoopId);
+        
+          // set a delay so we are sure any paints have finished
+          setTimeout(() => {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.fillStyle = "black";
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            if (win) {
+              displayMessage(
+                "Victory!!! Pew Pew... - Press [Enter] to start a new game Captain Pew Pew",
+                "green"
+              );
+            } else {
+              displayMessage(
+                "You died !!! Press [Enter] to start a new game Captain Pew Pew"
+              );
+            }
+          }, 200)  
+        }
+        ```
+
+   1. **Logique de redémarrage**. Lorsque toutes les vies sont perdues ou que le joueur a gagné la partie, affichez que le jeu peut être redémarré. En outre, redémarrez le jeu lorsque la touche *redémarrage* est enfoncée (vous pouvez décider quelle touche doit être affectée au redémarrage).
+
+      1. Créez la fonction `resetGame()` :
+
+        ```javascript
+        function resetGame() {
+          if (gameLoopId) {
+            clearInterval(gameLoopId);
+            eventEmitter.clear();
+            initGame();
+            gameLoopId = setInterval(() => {
+              ctx.clearRect(0, 0, canvas.width, canvas.height);
+              ctx.fillStyle = "black";
+              ctx.fillRect(0, 0, canvas.width, canvas.height);
+              drawPoints();
+              drawLife();
+              updateGameObjects();
+              drawGameObjects(ctx);
+            }, 100);
+          }
+        }
+        ```
+
+     1. Ajoutez un appel au `eventEmitter` pour réinitialiser le jeu dans `initGame()`:
+
+        ```javascript
+        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
+          resetGame();
+        });
+        ```
+
+     1. Ajoutez une fonction `clear()` à l'EventEmitter:
+
+        ```javascript
+        clear() {
+          this.listeners = {};
+        }
+        ```
+
+👽 💥 🚀 Félicitations, capitaine ! Ton jeu est terminé ! Bien joué ! 🚀 💥 👽
+
+---
+
+## 🚀 Défi
+
+Ajoutez un son ! Pouvez-vous ajouter un son pour améliorer votre jeu, par exemple lorsqu'un laser est touché, ou lorsque le héros meurt ou gagne ? Jetez un coup d'œil à ce [bac à sable](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) pour apprendre à jouer un son en utilisant JavaScript.
+
+## Quiz post-lecture
+
+[Quiz post-lecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/40?loc=fr)
+
+## Révision et autoformation
+
+Votre mission consiste à créer un nouveau jeu type. Explorez donc certains des jeux intéressants qui existent pour voir quel type de jeu vous pourriez créer.
+
+## Travail à faire
+
+[Créer un jeu type](assignment.fr.md)
diff --git a/7-bank-project/2-forms/translations/README.fr.md b/7-bank-project/2-forms/translations/README.fr.md
new file mode 100644
index 00000000..92264002
--- /dev/null
+++ b/7-bank-project/2-forms/translations/README.fr.md
@@ -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)
diff --git a/7-bank-project/2-forms/translations/assignment.fr.md b/7-bank-project/2-forms/translations/assignment.fr.md
new file mode 100644
index 00000000..88e164e1
--- /dev/null
+++ b/7-bank-project/2-forms/translations/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. |
diff --git a/7-bank-project/translations/README.fr.md b/7-bank-project/translations/README.fr.md
new file mode 100644
index 00000000..f06b295f
--- /dev/null
+++ b/7-bank-project/translations/README.fr.md
@@ -0,0 +1,21 @@
+# :dollar: Créer une banque
+
+Dans ce projet, vous apprendrez à créer une banque fictive. Ces leçons comprennent des instructions sur la façon de mettre en page une application Web et de fournir des itinéraires, de construire des formulaires, de gérer l'état et de récupérer les données d'une API à partir de laquelle vous pouvez récupérer les données de la banque.
+
+| ![Screen1](../images/screen1.png) | ![Screen2](../images/screen2.png) |
+|--------------------------------|--------------------------------|
+
+## Leçons
+
+1. [Modèles HTML et itinéraires dans une application Web](../1-template-route/translations/README.fr.md)
+2. [Créer un formulaire de connexion et d'inscription](../2-forms/translations/README.fr.md)
+3. [Méthodes d'extraction et d'utilisation des données](../3-data/translations/README.fr.md)
+4. [Concepts de gestion de l'État](../4-state-management/translations/README.fr.md)
+
+### Crédits
+
+Ces leçons ont été rédigées avec :hearts: par [Yohan Lasorsa](https://twitter.com/sinedied).
+
+Si vous souhaitez apprendre comment créer l'[API serveur](../api/translations/README.fr.md) utilisée dans ces leçons, vous pouvez suivre [cette série de videos](https://aka.ms/NodeBeginner) (en particulier les vidéos 17 à 21).
+
+Vous pouvez également jeter un coup d'œil à [ce tutoriel d'apprentissage interactif](https://aka.ms/learn/express-api). 
diff --git a/README.md b/README.md
index 86e64ebc..1c264bfc 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,6 @@
 [![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
 [![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
 
-
 # Web Development for Beginners - A Curriculum
 
 Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics. Each lesson includes pre- and post-lesson quizzes, written instructions to complete the lesson, a solution, an assignment and more. Our project-based pedagogy allows you to learn while building, a proven way for new skills to 'stick'.
@@ -21,13 +20,15 @@ Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson cur
 
 > **Students**, to use this curriculum on your own, fork the entire repo and complete the exercises on your own, starting with a pre-lecture quiz, then reading the lecture and completing the rest of the activities. Try to create the projects by comprehending the lessons rather than copying the solution code; however that code is available in the /solutions folders in each project-oriented lesson. Another idea would be to form a study group with friends and go through the content together. For further study, we recommend [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) and by watching the videos mentioned below.
 
-[![Promo video](screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
+[![Promo video](web.gif)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
+
+Gif by [Mohit Jaisal](https://linkedin.com/in/mohitjaisal)
 
 > 🎥 Click the image above for a video about the project and the folks who created it!
 
 ## Pedagogy
 
-We have chosen two pedagogical tenets while building this curriculum: ensuring that it is project-based and that it includes frequent quizzes. By the end of this series, students will have built a typing game, a virtual terrarium, a 'green' browser extension, a 'space invaders' type game, and a business-type banking app, and will have learned the basics of JavaScript, HTML, and CSS along with the modern toolchain of today's web developer. 
+We have chosen two pedagogical tenets while building this curriculum: ensuring that it is project-based and that it includes frequent quizzes. By the end of this series, students will have built a typing game, a virtual terrarium, a 'green' browser extension, a 'space invaders' type game, and a business-type banking app, and will have learned the basics of JavaScript, HTML, and CSS along with the modern toolchain of today's web developer.
 
 > 🎓 You can take the first few lessons in this curriculum as a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) on Microsoft Learn!
 
@@ -38,7 +39,7 @@ In addition, a low-stakes quiz before a class sets the intention of the student
 While we have purposefully avoided introducing JavaScript frameworks so as to concentrate on the basic skills needed as a web developer before adopting a framework, a good next step to completing this curriculum would be learning about Node.js via another collection of videos: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
 
 > Find our [Code of Conduct](CODE_OF_CONDUCT.md), [Contributing](CONTRIBUTING.md), and [Translation](TRANSLATIONS.md) guidelines. We welcome your constructive feedback!
->
+
 ## Each lesson includes:
 
 - optional sketchnote
@@ -56,32 +57,32 @@ While we have purposefully avoided introducing JavaScript frameworks so as to co
 
 ## Lessons
 
-|       |                       Project Name                       |                            Concepts Taught                             | Learning Objectives                                                                                                                 |                                                         Linked Lesson                                                          |         Author          |
-| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
-|  01   |                     Getting Started                      |           Introduction to Programming and Tools of the Trade           | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
-|  02   |                     Getting Started                      |             Basics of GitHub, includes working with a team             | How to use GitHub in your project, how to collaborate with others on a code base                                                    |                            [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
-|  03   |                     Getting Started                      |                             Accessibility                              | Learn the basics of web accessibility                                                                                               |                       [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
-|  04   |                        JS Basics                         |                         JavaScript Data Types                          | The basics of JavaScript data types                                                                                                 |                                       [Data Types](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
-|  05   |                        JS Basics                         |                         Functions and Methods                          | Learn about functions and methods to manage an application's logic flow                                                             |                              [Functions and Methods](/2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |
-|  06   |                        JS Basics                         |                        Making Decisions with JS                        | Learn how to create conditions in your code using decision-making methods                                                           |                                 [Making Decisions](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
-|  07   |                        JS Basics                         |                            Arrays and Loops                            | Work with data using arrays and loops in JavaScript                                                                                 |                                   [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
-|  08   |       [Terrarium](/3-terrarium/solution/README.md)       |                            HTML in Practice                            | Build the HTML to create an online terrarium, focusing on building a layout                                                         |                                 [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
-|  09   |       [Terrarium](/3-terrarium/solution/README.md)       |                            CSS in Practice                             | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive                     |                                  [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
-|  10   |            [Terrarium](/3-terrarium/solution)            |                 JavaScript Closures, DOM manipulation                  | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation             |                  [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
-|  11   |          [Typing Game](/4-typing-game/solution)          |                          Build a Typing Game                           | Learn how to use keyboard events to drive the logic of your JavaScript app                                                          |                                [Event-Driven Programming](/4-typing-game/typing-game/README.md)                                |       Christopher       |
-|  12   | [Green Browser Extension](/5-browser-extension/solution) |                         Working with Browsers                          | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension                               |                               [About Browsers](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
-|  13   | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage                      |                [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
-|  14   | [Green Browser Extension](/5-browser-extension/solution) |          Background processes in the browser, web performance          | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make   |             [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
-|  15   |           [Space Game](/6-space-game/solution)           |             More Advanced Game Development with JavaScript             | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game              |                      [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md)                       |          Chris          |
-|  16   |           [Space Game](/6-space-game/solution)           |                           Drawing to canvas                            | Learn about the Canvas API, used to draw elements to a screen                                                                       |                                [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
-|  17   |           [Space Game](/6-space-game/solution)           |                   Moving elements around the screen                    | Discover how elements can gain motion using the cartesian coordinates and the Canvas API                                            |                           [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
-|  18   |           [Space Game](/6-space-game/solution)           |                          Collision detection                           | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game    |                              [Collision Detection](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
-|  19   |           [Space Game](/6-space-game/solution)           |                             Keeping score                              | Perform math calculations based on the game's status and performance                                                                |                                    [Keeping Score](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
-|  20   |           [Space Game](/6-space-game/solution)           |                     Ending and restarting the game                     | Learn about ending and restarting the game, including cleaning up assets and resetting variable values                              |                                [The Ending Condition](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
-|  21   |         [Banking App](/7-bank-project/solution)          |                 HTML Templates and Routes in a Web App                 | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates                             |                            [HTML Templates and Routes](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
-|  22   |         [Banking App](/7-bank-project/solution)          |                  Build a Login and Registration Form                   | Learn about building forms and handing validation routines                                                                          |                                           [Forms](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
-|  23   |         [Banking App](/7-bank-project/solution)          |                   Methods of Fetching and Using Data                   | How data flows in and out of your app, how to fetch it, store it, and dispose of it                                                 |                                            [Data](/7-bank-project/3-data/README.md)                                            |          Yohan          |
-|  24   |         [Banking App](/7-bank-project/solution)          |                      Concepts of State Management                      | Learn how your app retains state and how to manage it programmatically                                                              |                                [State Management](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+|     |                       Project Name                       |                            Concepts Taught                             | Learning Objectives                                                                                                                 |                                                         Linked Lesson                                                          |         Author          |
+| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
+| 01  |                     Getting Started                      |           Introduction to Programming and Tools of the Trade           | Learn the basic underpinnings behind most programming languages and about software that helps professional developers do their jobs | [Intro to Programming Languages and Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
+| 02  |                     Getting Started                      |             Basics of GitHub, includes working with a team             | How to use GitHub in your project, how to collaborate with others on a code base                                                    |                            [Intro to GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
+| 03  |                     Getting Started                      |                             Accessibility                              | Learn the basics of web accessibility                                                                                               |                       [Accessibility Fundamentals](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
+| 04  |                        JS Basics                         |                         JavaScript Data Types                          | The basics of JavaScript data types                                                                                                 |                                       [Data Types](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
+| 05  |                        JS Basics                         |                         Functions and Methods                          | Learn about functions and methods to manage an application's logic flow                                                             |                              [Functions and Methods](/2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |
+| 06  |                        JS Basics                         |                        Making Decisions with JS                        | Learn how to create conditions in your code using decision-making methods                                                           |                                 [Making Decisions](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
+| 07  |                        JS Basics                         |                            Arrays and Loops                            | Work with data using arrays and loops in JavaScript                                                                                 |                                   [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
+| 08  |       [Terrarium](/3-terrarium/solution/README.md)       |                            HTML in Practice                            | Build the HTML to create an online terrarium, focusing on building a layout                                                         |                                 [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
+| 09  |       [Terrarium](/3-terrarium/solution/README.md)       |                            CSS in Practice                             | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive                     |                                  [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
+| 10  |            [Terrarium](/3-terrarium/solution)            |                 JavaScript Closures, DOM manipulation                  | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation             |                  [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+| 11  |          [Typing Game](/4-typing-game/solution)          |                          Build a Typing Game                           | Learn how to use keyboard events to drive the logic of your JavaScript app                                                          |                                [Event-Driven Programming](/4-typing-game/typing-game/README.md)                                |       Christopher       |
+| 12  | [Green Browser Extension](/5-browser-extension/solution) |                         Working with Browsers                          | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension                               |                               [About Browsers](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+| 13  | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage                      |                [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+| 14  | [Green Browser Extension](/5-browser-extension/solution) |          Background processes in the browser, web performance          | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make   |             [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+| 15  |           [Space Game](/6-space-game/solution)           |             More Advanced Game Development with JavaScript             | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game              |                      [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md)                       |          Chris          |
+| 16  |           [Space Game](/6-space-game/solution)           |                           Drawing to canvas                            | Learn about the Canvas API, used to draw elements to a screen                                                                       |                                [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+| 17  |           [Space Game](/6-space-game/solution)           |                   Moving elements around the screen                    | Discover how elements can gain motion using the cartesian coordinates and the Canvas API                                            |                           [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+| 18  |           [Space Game](/6-space-game/solution)           |                          Collision detection                           | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game    |                              [Collision Detection](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
+| 19  |           [Space Game](/6-space-game/solution)           |                             Keeping score                              | Perform math calculations based on the game's status and performance                                                                |                                    [Keeping Score](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+| 20  |           [Space Game](/6-space-game/solution)           |                     Ending and restarting the game                     | Learn about ending and restarting the game, including cleaning up assets and resetting variable values                              |                                [The Ending Condition](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
+| 21  |         [Banking App](/7-bank-project/solution)          |                 HTML Templates and Routes in a Web App                 | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates                             |                            [HTML Templates and Routes](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
+| 22  |         [Banking App](/7-bank-project/solution)          |                  Build a Login and Registration Form                   | Learn about building forms and handing validation routines                                                                          |                                           [Forms](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
+| 23  |         [Banking App](/7-bank-project/solution)          |                   Methods of Fetching and Using Data                   | How data flows in and out of your app, how to fetch it, store it, and dispose of it                                                 |                                            [Data](/7-bank-project/3-data/README.md)                                            |          Yohan          |
+| 24  |         [Banking App](/7-bank-project/solution)          |                      Concepts of State Management                      | Learn how your app retains state and how to manage it programmatically                                                              |                                [State Management](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
 
 ## Offline access
 
@@ -97,4 +98,4 @@ Our team produces other curricula! Check out:
 
 - [Machine Learning for Beginners](https://aka.ms/ml-beginners)
 - [IoT for Beginners](https://aka.ms/iot-beginners)
-- [Data Science for Beginners](https://aka.ms/datascience-beginners)
\ No newline at end of file
+- [Data Science for Beginners](https://aka.ms/datascience-beginners)
diff --git a/images/favicon.png b/images/favicon.png
new file mode 100644
index 00000000..9e5b4f6a
Binary files /dev/null and b/images/favicon.png differ
diff --git a/index.html b/index.html
index 202a4877..c7868a1a 100644
--- a/index.html
+++ b/index.html
@@ -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>
diff --git a/translations/README.fil.md b/translations/README.fil.md
new file mode 100644
index 00000000..f2cbbd47
--- /dev/null
+++ b/translations/README.fil.md
@@ -0,0 +1,100 @@
+[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
+[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
+[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
+[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
+[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
+[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
+
+
+# Web Development para sa mga Nagsisimula - Kurikulum
+
+Ang Azure Cloud Advocates sa Microsoft ay nalulugod na mag-alok ng 12-linggo, 24-aralin na curriculum tungkol sa JavaScript, CSS, at HTML basics. Kasama sa bawat aralin ang mga pagsusulit bago at pagkatapos ng aralin, nakasulat na mga tagubilin upang makumpleto ang aralin, isang solusyon, isang takdang-aralin at higit pa. Ang aming project-based na pedagogy ay nagbibigay-daan sa iyo na matuto habang nagtatayo, isang napatunayang paraan para sa mga bagong kasanayan.
+
+**Taos pusong pasasalamat sa aming mga may-akda Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, at sketchnote artist Tomomi Imura!**
+
+# Simula
+
+> **Mga Guro**, mayroon kaming [included some suggestions](../for-teachers.md) kung paano gamitin ang curriculum na ito. Gusto namin ang iyong feedback [sa aming discussion forum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
+
+> **Mga mag-aaral**, para magamit ang curriculum na ito nang mag-isa, i-fork ang buong repo at kumpletuhin ang mga pagsasanay nang mag-isa, simula sa pagsusulit bago ang lecture, pagkatapos ay basahin ang lecture at kumpletuhin ang iba pang aktibidad. Subukang lumikha ng mga proyekto sa pamamagitan ng pag-unawa sa mga aralin sa halip na pagkopya ng code ng solusyon; gayunpaman, ang code na iyon ay magagamit sa mga folder ng /solutions sa bawat aralin na nakatuon sa proyekto. Ang isa pang ideya ay ang bumuo ng isang grupo ng pag-aaral kasama ang mga kaibigan at sabay-sabay na suriin ang nilalaman. Para sa karagdagang pag-aaral, inirerekomenda namin ang [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa) and by watching the videos mentioned below.
+
+[![Promo video](../screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
+
+> 🎥 I-click ang larawan sa itaas para sa isang video tungkol sa proyekto at sa mga taong lumikha nito!
+
+## Pedagogy
+
+Pumili kami ng dalawang pedagogical tenets habang binubuo ang curriculum na ito: pagtiyak na ito ay batay sa proyekto at kasama nito ang madalas na mga pagsusulit. Sa pagtatapos ng seryeng ito, makakagawa ang mga mag-aaral ng laro sa pag-type, virtual terrarium, extension ng browser na 'berde', uri ng larong 'space invaders', at banking app na uri ng negosyo, at matututunan nila ang mga pangunahing kaalaman sa JavaScript. , HTML, at CSS kasama ang modernong toolchain ng web developer ngayon.
+
+> 🎓 Maaari mong kunin ang mga unang aralin sa kurikulum na ito bilang a [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) on Microsoft Learn!
+
+Sa pamamagitan ng pagtiyak na ang nilalaman ay naaayon sa mga proyekto, ang proseso ay ginagawang mas nakakaengganyo para sa mga mag-aaral at ang pagpapanatili ng mga konsepto ay madaragdagan. Sumulat din kami ng ilang panimulang aralin sa mga pangunahing kaalaman sa JavaScript upang ipakilala ang mga konsepto, na ipinares sa video mula sa "[Beginners Series to: JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)" collection of video tutorials, some of whose authors contributed to this curriculum.
+
+Bilang karagdagan, ang isang mababang-stakes na pagsusulit bago ang isang klase ay nagtatakda ng intensyon ng mag-aaral sa pag-aaral ng isang paksa, habang ang pangalawang pagsusulit pagkatapos ng klase ay nagsisiguro ng karagdagang pagpapanatili. Ang kurikulum na ito ay idinisenyo upang maging flexible at masaya at maaaring kunin nang buo o bahagi. Ang mga proyekto ay nagsisimula sa maliit at nagiging mas kumplikado sa pagtatapos ng 12 linggong ikot.
+
+Bagama't sinadya naming iwasan ang pagpapakilala ng mga balangkas ng JavaScript upang makapag-concentrate sa mga pangunahing kasanayang kailangan bilang isang web developer bago magpatibay ng isang balangkas, isang magandang susunod na hakbang sa pagkumpleto ng kurikulum na ito ay ang pag-aaral tungkol sa Node.js sa pamamagitan ng isa pang koleksyon ng mga video: "[Beginner Series to: Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)".
+
+> Hanapin ang aming [Code of Conduct](../CODE_OF_CONDUCT.md), [Contributing](../CONTRIBUTING.md), at [Translation](../TRANSLATIONS.md) mga alituntunin. Tinatanggap namin ang iyong nakabubuo na feedback!
+>
+## Kasama sa bawat aralin ang:
+
+- optional sketchnote
+- optional supplemental video
+- pre-lesson warmup quiz
+- written lesson
+- for project-based lessons, step-by-step guides on how to build the project
+- knowledge checks
+- a challenge
+- supplemental reading
+- assignment
+- post-lesson quiz
+
+> **Isang tala tungkol sa mga pagsusulit**: Ang lahat ng mga pagsusulit ay nakapaloob [in this app](https://happy-mud-02d95f10f.azurestaticapps.net/), para sa 48 kabuuang pagsusulit ng tatlong tanong bawat isa. Ang mga ito ay naka-link mula sa loob ng mga aralin ngunit ang pagsusulit app ay maaaring patakbuhin nang lokal; sundin ang panuto sa `quiz-app` folder. Unti-unti silang na-localize.
+
+## Mga aralin
+
+|       |                       Pangalan ng proyekto                       |                            Mga Konseptong Itinuro                             | Mga Layunin sa pag-aaral                                                                                                                 |                                                         Nakaugnay na Aralin                                                          |         May-akda          |
+| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: |
+|  01   |                     Nagsisimula                      |           Panimula sa Programming at Tools of the Trade           | Matutunan ang mga pangunahing batayan sa likod ng karamihan sa mga programming language at tungkol sa software na tumutulong sa mga propesyonal na developer na gawin ang kanilang mga trabaho | [Panimula sa Programming Languages at Tools of the Trade](/1-getting-started-lessons/1-intro-to-programming-languages/README.md) |         Jasmine         |
+|  02   |                     Nagsisimula                      |             Ang mga pangunahing kaalaman ng GitHub, kasama ang pakikipagtulungan sa isang team             | Paano gamitin ang GitHub sa iyong proyekto, kung paano makipagtulungan sa iba sa isang code base                                                    |                            [Panimula sa GitHub](/1-getting-started-lessons/2-github-basics/README.md)                             |          Floor          |
+|  03   |                     Nagsisimula                      |                             Accessibility                              | Alamin ang mga pangunahing kaalaman sa web accessibility                                                                                               |                       [Mga Pangunahing Kakayahan](/1-getting-started-lessons/3-accessibility/README.md)                       |       Christopher       |
+|  04   |                        JS Basics                         |                         Mga Uri ng Data ng JavaScript                          | Ang mga pangunahing kaalaman ng mga uri ng data ng JavaScript                                                                                                 |                                       [Uri ng data](/2-js-basics/1-data-types/README.md)                                        |         Jasmine         |
+|  05   |                        JS Basics                         |                         Mga Kakayahan at Paraan                          | Matuto tungkol sa mga function at pamamaraan para pamahalaan ang logic flow ng isang application                                                             |                              [Functions and Methods](/2-js-basics/2-functions-methods/README.md)                               | Jasmine and Christopher |
+|  06   |                        JS Basics                         |                        Paggawa ng mga Desisyon sa JS                        | Matutunan kung paano gumawa ng mga kundisyon sa iyong code gamit ang mga paraan ng paggawa ng desisyon                                                           |                                 [Paggawa ng mga Desisyon](/2-js-basics/3-making-decisions/README.md)                                  |         Jasmine         |
+|  07   |                        JS Basics                         |                            Mga Array at Loop                            | Makipagtulungan sa data gamit ang mga arrays at loops in JavaScript                                                                                 |                                   [Mga Array at Loop](/2-js-basics/4-arrays-loops/README.md)                                    |         Jasmine         |
+|  08   |       [Terrarium](/3-terrarium/solution/README.md)       |                            HTML sa Practice                            | Buuin ang HTML upang lumikha ng isang online na terrarium, na nakatuon sa pagbuo ng isang layout                                                         |                                 [Panimula sa HTML](/3-terrarium/1-intro-to-html/README.md)                                 |           Jen           |
+|  09   |       [Terrarium](/3-terrarium/solution/README.md)       |                            CSS sa Practice                             | Buuin ang CSS upang mai-istilo ang online na terrarium, na tumutuon sa mga pangunahing kaalaman ng CSS kabilang ang paggawa ng page na tumutugon                     |                                  [Panimula sa CSS](/3-terrarium/2-intro-to-css/README.md)                                  |           Jen           |
+|  10   |            [Terrarium](/3-terrarium/solution)            |                 Mga Pagsasara ng JavaScript, pagmamanipula ng DOM                  | Buuin ang JavaScript upang gawing function ang terrarium bilang isang drag/drop interface, na tumutuon sa mga pagsasara at pagmamanipula ng DOM             |                  [Mga Pagsasara ng JavaScript, pagmamanipula ng DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md)                   |           Jen           |
+|  11   |          [Typing Game](/4-typing-game/solution)          |                          Build a Typing Game                           | Matutunan kung paano gumamit ng mga kaganapan sa keyboard upang himukin ang lohika ng iyong JavaScript app                                                          |                                [Programming na Batay sa Kaganapan](/4-typing-game/typing-game/README.md)                                |       Christopher       |
+|  12   | [Green Browser Extension](/5-browser-extension/solution) |                         Nagtatrabaho sa Mga Browser                          | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano scaffold ang mga unang elemento ng isang extension ng browser                               |                               [Tungkol sa Mga Browser](/5-browser-extension/1-about-browsers/README.md)                                |           Jen           |
+|  13   | [Green Browser Extension](/5-browser-extension/solution) | Pagbuo ng form, pagtawag ng API at pag-iimbak ng mga variable sa lokal na storage | Buuin ang mga elemento ng JavaScript ng iyong extension ng browser upang tumawag sa isang API gamit ang mga variable na nakaimbak sa lokal na storage                      |                [APIs, Forms, at Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md)                 |           Jen           |
+|  14   | [Green Browser Extension](/5-browser-extension/solution) |          Mga proseso sa background sa browser, pagganap ng web          | Gamitin ang mga proseso sa background ng browser upang pamahalaan ang icon ng extension; alamin ang tungkol sa pagganap ng web at ilang mga pag-optimize na gagawin   |             [Mga Gawain sa Background at Pagganap](/5-browser-extension/3-background-tasks-and-performance/README.md)              |           Jen           |
+|  15   |           [Space Game](/6-space-game/solution)           |             Higit pang Advanced na Pagbuo ng Laro gamit ang JavaScript             | Alamin ang tungkol sa Inheritance gamit ang parehong Mga Klase at Komposisyon at ang pattern ng Pub/Sub, bilang paghahanda sa pagbuo ng isang laro              |                      [Panimula sa Advanced na Pagbuo ng Laro](/6-space-game/1-introduction/README.md)                       |          Chris          |
+|  16   |           [Space Game](/6-space-game/solution)           |                           Pagguhit sa canvas                            | Matuto tungkol sa Canvas API, na ginagamit upang gumuhit ng mga elemento sa isang screen                                                                       |                                [Pagguhit sa Canvas](/6-space-game/2-drawing-to-canvas/README.md)                                |          Chris          |
+|  17   |           [Space Game](/6-space-game/solution)           |                   Paglipat ng mga elemento sa paligid ng screen                    | Tuklasin kung paano makakakuha ng paggalaw ang mga elemento gamit ang mga cartesian coordinates at ang Canvas API                                            |                           [Paglipat ng mga Elemento](/6-space-game/3-moving-elements-around/README.md)                           |          Chris          |
+|  18   |           [Space Game](/6-space-game/solution)           |                          Pagtuklas ng banggaan                           | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang mga keypress at magbigay ng cooldown function para matiyak ang performance ng laro    |                              [Collision Detection](/6-space-game/4-collision-detection/README.md)                              |          Chris          |
+|  19   |           [Space Game](/6-space-game/solution)           |                             Pagpapanatiling Kalidad                              | Magsagawa ng mga kalkulasyon sa matematika batay sa katayuan at pagganap ng laro                                                               |                                    [Pagpapanatiling Kalidad](/6-space-game/5-keeping-score/README.md)                                    |          Chris          |
+|  20   |           [Space Game](/6-space-game/solution)           |                     Pagtapos at i-restart ang laro                     | Matuto tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga variable na value                              |                                [Ang Katapusang Kondisyon](/6-space-game/6-end-condition/README.md)                                 |          Chris          |
+|  21   |         [Banking App](/7-bank-project/solution)          |                 Mga Template at Ruta ng HTML sa isang Web App                 | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage na website gamit ang pagruruta at mga HTML na template                             |                            [Mga Template at Ruta ng HTML](/7-bank-project/1-template-route/README.md)                             |          Yohan          |
+|  22   |         [Banking App](/7-bank-project/solution)          |                  Bumuo ng isang Login at Registration Form                   | Matuto tungkol sa pagbuo ng mga form at pagbibigay ng mga gawain sa pagpapatunay                                                                          |                                           [Forms](/7-bank-project/2-forms/README.md)                                           |          Yohan          |
+|  23   |         [Banking App](/7-bank-project/solution)          |                   Paraan ng Pagkuha at Paggamit ng Data                   | Paano dumadaloy ang data sa loob at labas ng iyong app, kung paano ito kunin, iimbak, at itapon ito                                                 |                                            [Data](/7-bank-project/3-data/README.md)                                            |          Yohan          |
+|  24   |         [Banking App](/7-bank-project/solution)          |                      Mga Konsepto ng Pamamahala ng Estado                      | Alamin kung paano napapanatili ng iyong app ang estado at kung paano ito pamahalaan sa pamamagitan ng program                                                              |                                [Estadong Pamamahala](/7-bank-project/4-state-management/README.md)                                |          Yohan          |
+
+## Offline access
+
+Maaari mong patakbuhin ang dokumentasyong ito offline sa pamamagitan ng paggamit [Docsify](https://docsify.js.org/#/). i-Fork itong repo, [i-install ang Docsify](https://docsify.js.org/#/quickstart) sa iyong lokal na makina, at pagkatapos ay sa root folder ng repo na ito, i-type ang `docsify serve`. Ihahatid ang website sa port 3000 sa iyong localhost: `localhost:3000`.
+
+## PDF
+
+Ang isang PDF ng lahat ng mga aralin ay matatagpuan [dito](pdf/readme.pdf)
+
+## Iba pang Kurikulum
+
+Ang aming team ay gumagawa ng iba pang kurikulum! Tignan:
+
+- [Machine Learning for Beginners](https://aka.ms/ml-beginners)
+- [IoT for Beginners](https://aka.ms/iot-beginners)
+- [Data Science for Beginners](https://aka.ms/datascience-beginners)
diff --git a/translations/README.pt-BR.md b/translations/README.pt-BR.md
new file mode 100644
index 00000000..45d39674
--- /dev/null
+++ b/translations/README.pt-BR.md
@@ -0,0 +1,110 @@
+[![Licensa Github](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
+[![Contribuidores](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
+[![Issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
+[![PRs](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
+[![Contribuições são bem vindas !](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+[![Watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
+[![Forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
+[![Stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
+
+
+# Desenvolvimento Web para Iniciantes - Programa de Estudos
+
+Azure Cloud Advocates da Microsoft têm o prazer de oferecer um curso de 12 semanas e 24 lições sobre o básico de JavaScript, CSS e HTML.
+Cada lição possiu qizzes pré- e pós-lição , instruções escritas para completar a lição, uma solução, uma tarefa e mais.
+Nossa pedagogia baseada em prática permite que você aprenda enquanto construi, uma forma de aprendizado eficaz e comprovada.
+
+**Grandes agradecimentos aos nossos autores Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, e Tomomi Imura!**
+
+# Começando
+
+> **Professores**, nós incluímos algumas [sugestões](for-teachers.pt.md) sobre como tilizar este curso. Adoraríamos o seu Feedback em nosso [fórum](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)!
+
+> **Estudantes**, para usar esse crrículo por conta própria, faça um fork do repositório inteiro, começando por um qizz pré-aula, veja a aula e então faça o resto das atividades.
+Procure fazer os projetos baseado no que aprendeu ao invés de simplesmente copiar a solução que se encontra na pasta de soluções das atividades.
+Uma boa opção seria criar um grupo de estudos e completar todos os conteúdos juntos.
+Para estudos mais profundos, recomendamos que assista aos vídeos mencionados abaixo e procure pelo [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa).
+
+[![Promo video](../screenshot.png)](https://youtube.com/watch?v=R1wrdtmBSII "Promo video")
+
+> 🎥 Clique na imagem acima para acessar um vídeo sobre o projeto e aqueles que o criaram !
+
+## Pedagogia
+
+Nós escolhemos dois princípos pedagógicos enquanto criávamos este curso: Garantir de que era baseado em práticas e que
+tivesse quizzes frequentes.
+Até o fim deste curso, estudantes terão construído um jogo de digitação, um terrário virtual, ums extensão de navegador 'verde' , um jogo do tipo 'space invaders', e um aplicativo bancário, e terão aprendido o básico de JavaScript, HTML, e CSS com um moderno conjunto de ferramentas do desenvolvimento web dos dias atuais 🎓 !!!
+
+> 🎓 Você pode tomar as primeiras lições nesse curso como um [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) no Microsoft Learn!
+
+Ao garantir que o conteúdo esteja alinhado com os projetos, o processo se torna mais envolvente para os alunos e a retenção dos conceitos será aumentada. Também escrevemos várias lições iniciais em noções básicas de JavaScript para introduzir conceitos, emparelhadas com o vídeo da coleção [accessible ici](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa) de vídeo-aulas, alguns de autores os quais contribuíram para este curso.
+
+Além disso, um teste simples antes da aula define a intenção do aluno de aprender um tópico, enquanto um segundo teste após a aula garante maior retenção. Este currículo foi projetado para ser flexível e divertido e pode ser realizado no todo ou em partes. Os projetos começam pequenos e tornam-se cada vez mais complexos no final do ciclo de 12 semanas.
+
+Embora tenhamos evitado propositadamente a introdução de frameworks JavaScript para nos concentrarmos nas habilidades básicas necessárias como desenvolvedor web antes de adotar um framework, uma próxima etapa para concluir este currículo seria aprender sobre Node.js por meio de outra coleção de vídeos:
+[Coletânea inicial sobre Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)
+
+> Encontre nosso [código de condta](CODE_OF_CONDUCT.md), [guia para contribidores](CONTRIBUTING.md), e [o guia para traduções do curso](TRANSLATIONS.md).
+Seu Feedback contrutivo é bem vindo.
+
+>
+## Cada lição inclui :
+
+- Uma folha de rascunho opcional
+- Um vídeo complementar opcional
+- Quiz pré-aula para aquecimento
+- Aula em versão escrita
+- Um desafio
+- Uma explicação **bem detalhada (passo a passo)** sobre como contruir o projeto
+- Leitura complementar
+- Exercícios
+- Quiz pós-aula
+
+> **Nota sobre os qizzes**: todos os qizzes se encontram [aqui](https://happy-mud-02d95f10f.azurestaticapps.net/), um total de 48 quizzes, com 3 questões em cada.
+Também podem ser acessados localmente pela pasta `quiz-app`.
+
+## Lições
+
+|       |                      Nome do projeto                       |                         Conceitos ensinados                         | Objetivos de aprendizado                                                                                                                         |                                                  Lição                                                   |         Autor          |
+| :---: | :------------------------------------------------------: | :--------------------------------------------------------------------: | --------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------: | :---------------------: |
+|  01   |                      Começando                      |                    Introdução à programação                     | Aprenda os fundamentos básicos por trás da maioria das linguagens de programação e sobre o software que ajuda os desenvolvedores profissionais a fazerem seus trabalhos                | [Introdução à programação](/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md) |         Jasmine         |
+|  02   |                      Começando                      |              Introdução às bases do Github, incluindo trabalho em equipe               | Como usar o GitHub em seu projeto, como colaborar com outras pessoas em uma base de código                                                                     |         [Introdução às bases do Github](/1-getting-started-lessons/2-github-basics/translations/README.pt.md)         |          Floor          |
+|  03   |                      Começando                      |                             Acessibilidade                              | Apprendra as bases da acessibilidade na Web                                                                                     |            [Fundamentos da Acessibilidade](/1-getting-started-lessons/3-accessibility/translations/README.pt.md)            |       Christopher       |
+|  04   |                        Básico de JS                         |                         Tipos de dados em JavaScript                          | O básico de dados em JavaScript                                                                                               |                            [Tipos de dados](/2-js-basics/1-data-types/translations/README.pt.md)                             |         Jasmine         |
+|  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/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       |
+|  12   | [Extensão de navegador verde](/5-browser-extension/solution) |                         Trabalhando com navegadores                          | Aprenda como os navegadores funcionam, seu histórico e como organizar os primeiros elementos de uma extensão do navegador                             |                    [Sobre navegadores](/5-browser-extension/1-about-browsers/README.md)                     |           Jen           |
+|  13   | [Extensão de navegador verde](/5-browser-extension/solution) | Construindo um formulário, chamando uma API e armazenando variáveis ​​no armazenamento local | Construa os elementos JavaScript da extensão do seu navegador para chamar uma API usando variáveis ​​armazenadas no armazenamento local                    |     [APIs, Formulários e Armazenamento Local](/5-browser-extension/2-forms-browsers-local-storage/README.md)      |           Jen           |
+|  14   | [Extensão de navegador verde](/5-browser-extension/solution) |          Processos em segundo plano no navegador, desempenho da web          | Use os processos de segundo plano do navegador para gerenciar o ícone da extensão; aprender sobre o desempenho da web e algumas otimizações para fazer |  [Tarefas e desempenho em segundo plano](/5-browser-extension/3-background-tasks-and-performance/README.md)   |           Jen           |
+|  15   |        [Jogo Espacial](/6-space-game/solution)         |              Desenvolvimento de jogos mais avançado com JavaScript               | Saiba mais sobre herança usando classes e composição e o padrão Pub / Sub, na preparação para a construção de um jogo           |  [Introdução ao desenvolvimento avançado de um jogo em Javascript](/6-space-game/1-introduction/README.md)   |          Chris          |
+|  16   |        [Jogo Espacial](/6-space-game/solution)         |                               Desenhar na tela                               | Saiba mais sobre a API Canvas, usada para desenhar elementos em uma tela                                                                 |                    [Desenhando na Tela](/6-space-game/2-drawing-to-canvas/README.md)                    |          Chris          |
+|  17   |        [Jogo Espacial](/6-space-game/solution)         |                         Movendo elementos pela tela                          | Descubra como os elementos podem ganhar movimento usando as coordenadas cartesianas e a API Canvas                                                                            |                [Movendo elementos pela Tela](/6-space-game/3-moving-elements-around/README.md)                |          Chris          |
+|  18   |        [Jogo Espacial](/6-space-game/solution)         |                          Detecção de Colisão                           | Faça os elementos colidirem e reagirem uns com os outros usando o pressionamento de teclas e fornecer uma função de resfriamento para garantir o desempenho do jogo  |                   [Detecção de Colisão](/6-space-game/4-collision-detection/README.md)                   |          Chris          |
+|  19   |        [Jogo Espacial](/6-space-game/solution)         |                             Mantendo a pontuação                              | Faça cálculos matemáticos com base no status e no desempenho do jogo                                                              |                         [Mantendo a pontuação](/6-space-game/5-keeping-score/README.md)                         |          Chris          |
+|  20   |        [Jogo Espacial](/6-space-game/solution)         |                       Terminando e reiniciando o jogo                        | Saiba mais sobre como encerrar e reiniciar o jogo, incluindo limpeza de ativos e redefinição de valores de variáveis                                                                    |                         [A condição de encerramento](/6-space-game/6-end-condition/README.md)                         |          Chris          |
+|  21   |     [Banking App](/7-bank-project/solution)     |           Templates HTML e rotas em um aplicativo da web            | Aprenda a criar o andaime da arquitetura de um site de várias páginas usando modelos de roteamento e HTML                                               |                  [HTML Templates e Rotas](/7-bank-project/1-template-route/README.md)                  |          Yohan          |
+|  22   |     [Banking App](/7-bank-project/solution)     |                    Criar um formulário de Login e Cadastro                    | Aprenda sobre a construção de formulários e rotinas de validação                                                |                             [Formulários](/7-bank-project/2-forms/README.md)                             |          Yohan          |
+|  23   |     [Banking App](/7-bank-project/solution)     |                    Métodos de busca e uso de dados                    | Como os dados fluem para dentro e para fora do seu aplicativo, como buscá-los, armazená-los e descartá-los                                                                               |                               [Dados](/7-bank-project/3-data/README.md)                                |          Yohan          |
+|  24   |     [Banking App](/7-bank-project/solution)     |                   Conceitos de Gestão do Estado                    | Saiba como seu aplicativo mantém o estado e como gerenciá-lo de maneira programática                                                                                 |                    [Gestão de estados](/7-bank-project/4-state-management/README.md)                    |          Yohan          |
+
+## Acesso offline
+
+Você pode utilizar essa documentação quando estiver offline através de [Docsify](https://docsify.js.org/#/). Faça um Fork desse repositório, [instale Docsify](https://docsify.js.org/#/quickstart) na sua máquina e digite `docsify serve` na pasta raiz desse repositório. O site estará disponível na porta 3000 em seu host local: `localhost:3000`.
+
+## PDF
+
+Um PDF de todas as lições pode ser encontrado [bem aqui](../pdf/readme.pdf)
+
+## Outros Cursos
+
+Nossa equipe produziu outros cursos! Veja só :
+
+- [Machine Learning para iniciantes](https://aka.ms/ml-beginners)
+- [IoT para iniciantes](https://aka.ms/iot-beginners)
+- [Data Science para iniciantes](https://aka.ms/datascience-beginners)
diff --git a/translations/for-teachers.ua.md b/translations/for-teachers.ua.md
new file mode 100644
index 00000000..7d181255
--- /dev/null
+++ b/translations/for-teachers.ua.md
@@ -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).
diff --git a/translations/for-teachers.uk.md b/translations/for-teachers.uk.md
new file mode 100644
index 00000000..7d181255
--- /dev/null
+++ b/translations/for-teachers.uk.md
@@ -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).
diff --git a/web.gif b/web.gif
new file mode 100644
index 00000000..25965314
Binary files /dev/null and b/web.gif differ