diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.el.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.el.md
deleted file mode 100644
index c7f842e1..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.el.md
+++ /dev/null
@@ -1,194 +0,0 @@
-# Εισαγωγή στις Γλώσσες Προγραμματισμού και στα Εργαλεία του Εμπορίου
-
-Αυτό το μάθημα καλύπτει τα βασικά των γλωσσών προγραμματισμού. Τα θέματα που καλύπτονται εδώ ισχύουν για τις περισσότερες σύγχρονες γλώσσες προγραμματισμού σήμερα. Στην ενότητα 'Εργαλεία του Εμπορίου', θα μάθετε για χρήσιμο λογισμικό που σας βοηθά ως προγραμματιστές.
-
-![Intro Programming](/sketchnotes/webdev101-programming.png)
-> Σκίτσο από [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Pre-Lecture Quiz
-[Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=gr)
-
-## Εισαγωγή
-
-Σε αυτό το μάθημα, θα καλύψουμε:
-
-- Τι είναι ο προγραμματισμός;
-- Τύποι γλωσσών προγραμματισμού
-- Βασικά στοιχεία ενός προγράμματος
-- Χρήσιμο λογισμικό και εργαλεία για τους επαγγελματίες προγραμματιστές
-
-## Τι είναι ο προγραμματισμός;
-
-Προγραμματισμός(επίσης γνωστό ως κώδικας) είναι η διαδικασία συγγραφής οδηγιών σε μία συσκευή, όπως ένας υπολογιστής ή μία φορητή συσκευή. Γράφουμε αυτές τις οδηγίες με μία γλώσσα προγραμματισμού, η οποία ερμηνεύεται από τη συσκευή. Αυτά τα σύνολα οδηγιών μπορούν να αναφέρονται με διάφορα ονόματα, *πρόγραμμα*, *πρόγραμμα υπολογιστή*, *εφαρμογή* και *εκτελέσιμο* είναι μερικά δημοφιλή ονόματα.
-
-Ένα *πρόγραμμα* μπορεί να είναι οτιδήποτε γράφεται με κώδικα, ιστοσελίδες, παιχνίδια και εφαρμογές τηλεφώνου είναι προγράμματα. Ενώ είναι δυνατό να δημιουργηθεί ένα πρόγραμμα χωρίς να γραφτεί κώδικας, η υποκείμενη λογική θα βρίσκεται στη συσκευή και η λογική αυτή πιθανότατα γράφτηκε με κώδικα. Ένα πρόγραμμα που *τρέχει* ή *εκτελεί κώδικα* εκτελεί οδηγίες. Η συσκευή με την οποία διαβάζετε αυτό το μάθημα εκτελεί ένα πρόγραμμα για να το εκτυπώσει στην οθόνη σας.
-
-✅ Κάντε λίγη έρευνα: ποιος θεωρείται πως ήταν ο πρώτος προγραμματιστής στον κόσμο;
-
-## Γλώσσες Προγραμματισμού
-
-Οι γλώσσες προγραμματισμού εξυπηρετούν έναν κύριο σκοπό: για τους προγραμματιστές να δημιουργήσουν οδηγίες για αποστολή σε μια συσκευή. Οι συσκευές μπορούν να καταλάβουν μόνο δυαδικά (0 και 1) και για τους *περισσότερους* προγραμματιστές αυτός δεν είναι πολύ αποτελεσματικός τρόπος επικοινωνίας. Οι γλώσσες προγραμματισμού είναι ένα μέσο επικοινωνίας μεταξύ ανθρώπων και υπολογιστών.
-
-Οι γλώσσες προγραμματισμού διατίθενται σε διαφορετικές μορφές και ενδέχεται να εξυπηρετούν διαφορετικούς σκοπούς. Για παράδειγμα, η JavaScript χρησιμοποιείται κυρίως για εφαρμογές ιστού, ενώ το Bash χρησιμοποιείται κυρίως για λειτουργικά συστήματα.
-
-
-Οι *γλώσσες χαμηλού επιπέδου* συνήθως απαιτούν λιγότερα βήματα από *γλώσσες υψηλού επιπέδου* για να ερμηνευτούν από μία συσκευή. Ωστόσο, αυτό που κάνει τις γλώσσες υψηλού επιπέδου δημοφιλείς είναι η ευκολία στην ανάγνωση και η υποστήριξή τους. Η JavaScript θεωρείται γλώσσα υψηλού επιπέδου.
-
-Ο παρακάτω κώδικας δείχνει τη διαφορά μεταξύ γλώσσας υψηλού επιπέδου σε JavaScript και γλώσσας χαμηλού επιπέδου σε κώδικα ARM assembly.
-
-```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
-```
-
-Είτε το πιστεύετε είτε όχι, *και οι δύο κάνουν το ίδιο πράγμα*: τυπώνουν μία ακολουθία Fibonacci μέχρι το 10.
-
-✅ Μια ακολουθία Fibonacci [ορίζεται] (https://en.wikipedia.org/wiki/Fibonacci_number) ως ένα σύνολο αριθμών έτσι ώστε κάθε αριθμός να είναι το άθροισμα των δύο προηγούμενων, ξεκινώντας από το 0 και το 1.
-
-## Στοιχεία ενός προγράμματος
-
-Μια εντολή σε ένα πρόγραμμα ονομάζεται *δήλωση* και συνήθως έχει ένα χαρακτήρα ή διάστιχο που δείχνει που τελείωνει η εντολή αυτή ή όπως αλλίως λέμε που *τερματίζει* η εντολή. Ο τρόπος που τερματίζει ένα πρόγραμμα διαφέρει ανάλογα με τη γλώσσα.
-
-Τα περισσότερα προγράμματα βασίζονται στη χρήση δεδομένων είτε από έναν χρήστη είτε από κάπου αλλού, όπου οι δηλώσεις μπορεί να βασίζονται σε δεδομένα για την εκτέλεση οδηγιών. Τα δεδομένα μπορούν να αλλάξουν τον τρόπο συμπεριφοράς ενός προγράμματος, οπότε οι γλώσσες προγραμματισμού μπορούν να αποθηκεύουν προσωρινά τα δεδομένα και να τα χρησιμοποιούν αργότερα. Αυτά τα δεδομένα ονομάζονται *μεταβλητές*. Οι μεταβλητές είναι δηλώσεις που δίνουν εντολή σε μια συσκευή να αποθηκεύει δεδομένα στη μνήμη της. Οι μεταβλητές στα προγράμματα είναι παρόμοιες με αυτές στην άλγεβρα, όπου έχουν ένα μοναδικό όνομα και η τιμή τους μπορεί να αλλάξει με την πάροδο του χρόνου.
-
-Υπάρχει πιθανότητα ορισμένες δηλώσεις να μην εκτελεστούν από μια συσκευή. Αυτό συμβαίνει συνήθως είτε λόγω του σχεδιασμού που έχει κάνει ο προγραμματιστής είτε κατά λάθος όταν συμβαίνει ένα απροσδόκητο σφάλμα. Αυτός ο τύπος ελέγχου μιας εφαρμογής το καθιστά πιο στιβαρό και διατηρήσιμο. Συνήθως αυτές οι αλλαγές στον έλεγχο συμβαίνουν όταν πρέπει να ληφθούν κάποιες αποφάσεις. Μια κοινή δήλωση στις σύγχρονες γλώσσες προγραμματισμού για τον έλεγχο του τρόπου εκτέλεσης ενός προγράμματος είναι η δήλωση «if..else».
-
-✅ Θα μάθετε περισσότερα για αυτού του είδους τις δηλώσεις σε επόμενα μαθήματα.
-
-## Εργαλεία του Εμπορίου
-
-[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
-
-Σε αυτήν την ενότητα, θα μάθετε για λογισμικό που μπορεί να σας φανεί πολύ χρήσιμο καθώς ξεκινάτε το επαγγελματικό σας ταξίδι.
-
-Ένα **περιβάλλον ανάπτυξης** είναι ένα μοναδικό σύνολο εργαλείων και λειτουργιών που ένας προγραμματιστής θα χρησιμοποιεί συχνά όταν φτιάχνει λογισμικό. Ορισμένα από αυτά τα εργαλεία έχουν προσαρμοστεί για συγκεκριμένες ανάγκες του προγραμματιστή και ενδέχεται να αλλάξουν με την πάροδο του χρόνου, εάν ένας προγραμματιστής αλλάξει προτεραιότητες στη δουλειά του ή στα προσωπικά του project ή όταν χρησιμοποιήσει διαφορετική γλώσσα προγραμματισμού. Τα περιβάλλοντα ανάπτυξης είναι τόσο μοναδικά όσο οι προγραμματιστές που τα χρησιμοποιούν.
-
-### Editors(Συντάκτες)
-
-Ένα από τα πιο κρίσιμα εργαλεία για την ανάπτυξη λογισμικού είναι ο συντάκτης. Οι συντάκτες είναι εκεί όπου γράφετε τον κωδικό σας και μερικές φορές εκεί όπου θα εκτελέσετε τον κωδικό σας.
-
-Οι προγραμματιστές χρησιμοποιούν τους συντάκτες για μερικούς επιπλέον λόγους:
-
-- *Εντοπισμός σφαλμάτων* Ανακάλυψη σφαλμάτων διαβάζοντας τον κώδικα, γραμμή προς γραμμή. Ορισμένοι συντάκτες έχουν δυνατότητες εντοπισμού σφαλμάτων ή μπορούν να προσαρμοστούν και να προστεθούν για συγκεκριμένες γλώσσες προγραμματισμού.  
-- *Επισήμανση σύνταξης* Προσθέτει χρώματα και μορφοποιεί το κείμενο του κώδικα, διευκολύνει την ανάγνωση. Οι περισσότεροι συντάκτες επιτρέπουν προσαρμοσμένη επισήμανση σύνταξης.
-- *Επεκτάσεις και ενσωματώσεις* Προσθήκες που είναι εξειδικευμένες για προγραμματιστές, από προγραμματιστές, για πρόσβαση σε πρόσθετα εργαλεία που δεν είναι ενσωματωμένα στον βασικό συντάκτη. Για παράδειγμα, πολλοί προγραμματιστές χρειάζονται επίσης έναν τρόπο να τεκμηριώσουν τον κώδικά τους και να εξηγήσουν πώς λειτουργεί και θα εγκαταστήσουν μια επέκταση ορθογραφικού ελέγχου για να ελέγξουν για τυπογραφικά λάθη. Οι περισσότερες από αυτές τις προσθήκες προορίζονται για χρήση σε ένα συγκεκριμένο συντάκτη και οι περισσότεροι συντάκτες έρχονται με έναν τρόπο αναζήτησης για διαθέσιμες επεκτάσεις.
-
-#### Δημοφιλείς Editors και Web Development Extensions(Επεκτάσεις Ανάπτυξης Ιστού)
-
-- [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(Πρoγράμματα Περιήγησης)
-
-Ένα άλλο σημαντικό εργαλείο είναι το πρόγραμμα περιήγησης. Οι προγραμματιστές ιστού βασίζονται στο πρόγραμμα περιήγησης για να παρατηρήσουν πώς λειτουργεί ο κώδικάς τους στον ιστό, χρησιμοποιείται επίσης για την προβολή οπτικών στοιχείων μιας ιστοσελίδας που είναι γραμμένα στον συντάκτη, όπως HTML.
-
-Πολλά προγράμματα περιήγησης διαθέτουν *εργαλεία προγραμματιστών* (DevTools) που περιέχουν ένα σύνολο χρήσιμων λειτουργιών και πληροφοριών που βοηθούν τους προγραμματιστές να συλλέγουν και να συλλαμβάνουν σημαντικές πληροφορίες σχετικά με την εφαρμογή τους. Για παράδειγμα: Εάν μια ιστοσελίδα έχει σφάλματα, μερικές φορές είναι χρήσιμο να γνωρίζετε πότε συνέβησαν. Τα DevTools σε ένα πρόγραμμα περιήγησης μπορούν να ρυθμιστούν έτσι ώστε να συλλαμβάνουν αυτές τις πληροφορίες.
-
-#### Δημοφιλείς Browsers και DevTools
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### Command Line Tools(Εργαλεία Γραμμής Εντολών)
-
-Ορισμένοι προγραμματιστές προτιμούν μια λιγότερο γραφική προβολή για τις καθημερινές τους εργασίες και βασίζονται στη γραμμή εντολών για να το επιτύχουν. Η ανάπτυξη κώδικα απαιτεί σημαντικό αριθμό δακτυλογράφησης και ορισμένοι προγραμματιστές προτιμούν να μην διακόπτουν τη ροή τους στο πληκτρολόγιο και γι'αυτό χρησιμοποιούν συντομεύσεις πληκτρολογίου για εναλλαγή μεταξύ παραθύρων επιφάνειας εργασίας, εργασία σε διαφορετικά αρχεία και χρήση εργαλείων. Οι περισσότερες εργασίες μπορούν να γίνουν με το ποντίκι, αλλά ένα πλεονέκτημα της χρήσης της γραμμής εντολών είναι ότι πολλά μπορούν να γίνουν με εργαλεία γραμμής εντολών χωρίς την ανάγκη εναλλαγής μεταξύ του ποντικιού και του πληκτρολογίου. Ένα άλλο πλεονέκτημα της γραμμής εντολών είναι ότι είναι διαμορφώσιμη και μπορείτε να αποθηκεύσετε την προσαρμοσμένη διαμόρφωση, να την αλλάξετε αργότερα και επίσης να την εισαγάγετε σε νέα μηχανήματα ανάπτυξης. Επειδή τα περιβάλλοντα ανάπτυξης είναι τόσο μοναδικά για κάθε προγραμματιστή, κάποιοι θα αποφύγουν τη χρήση της γραμμής εντολών, κάποιοι θα βασιστούν εξ ολοκλήρου σε αυτή και κάποιοι προτιμούν έναν συνδυασμό των δύο.
-
-### Δημοφιλείς επιλογές γραμμής εντολών
-
-Οι επιλογές για τη γραμμή εντολών θα διαφέρουν ανάλογα με το λειτουργικό σύστημα που χρησιμοποιείτε.
-
-*💻 = έρχεται προεγκατεστημένο στο λειτουργικό σύστημα*.
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (επίσης γνωστό ως CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
-- [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)
-
-#### 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)
-
-#### Δημοφιλή εργαλεία γραμμής εντολών
-
-- [Git](https://git-scm.com/) (💻 στα περισσότερα λειτουργικά συστήματα)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### Documentation(Τεκμηρίωση)
-
-Όταν ένας προγραμματιστής θέλει να μάθει κάτι καινούργιο, πιθανότατα θα στραφεί στο documentation(τεκμηρίωση) για να μάθει πώς να το χρησιμοποιεί. Οι προγραμματιστές βασίζονται συχνά στo documentation για να μάθουν πώς να χρησιμοποιούν σωστά τα εργαλεία και τις γλώσσες, καθώς και για να αποκτήσουν βαθύτερη γνώση του πώς λειτουργεί.
-
-#### Δημοφιλή documentation για την ανάπτυξη Ιστού(Web Development)
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), από τη Μοζίλα, εκδότες του [Firefox](https://www.mozilla.org/firefox/)
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), από την Google, εκδότες του [Chrome](https://www.google.com/chrome/)
-- [Τα έγγραφα προγραμματιστών της Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), Για τον [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ Κάντε λίγη έρευνα: Τώρα που γνωρίζετε τα βασικά για το περιβάλλον ενός προγραμματιστή ιστού(Web Developer), συγκρίνετέ το και βρείτε τις διαφορές με το περιβάλλον ενός σχεδιαστή ιστού(Web Designer).
-
----
-
-## 🚀 Challenge
-
-Συγκρίνετε μερικές γλώσσες προγραμματισμού. Ποια είναι τα μοναδικά χαρακτηριστικά που έχει η JavaScript και δεν έχει η Java και το αντίστροφο; Τι γίνεται με τη COBOL εναντίον της Go;
-
-## Post-Lecture Quiz
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=gr)
-
-## Review & Self Study 
-
-Μελετήστε λίγο τις διαφορετικές γλώσσες που είναι διαθέσιμες στον προγραμματιστή. Προσπαθήστε να γράψετε μια γραμμή σε μία γλώσσα και μετά να την ξεναγράψετε σε άλλες δύο. Τι μάθατε?
-
-## Άσκηση 
-
-[Βλέπε έγγραφο](assignment.gr.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md
deleted file mode 100644
index a531f4ab..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.es.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# Introducción a lenguajes de programación y herramientas del oficio
-
-Esta lección cubre los conceptos básicos de los lenguajes de programación. Los temas que aprenderemos aquí se aplican a la mayoría de los lenguajes de programación modernos en la actualidad. En la sección 'Herramientas del oficio', aprenderás sobre software y herramientas que te ayudarán como desarrollador.
-
-![Intro Programming](/sketchnotes/webdev101-programming.png)
-> Dibujo por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Cuestionario Previo a la Clase
-[Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
-
-### Introducción
-
-En esta lección, cubriremos:
-
-- ¿Qué es la programación?
-- Tipos de lenguajes de programación
-- Elementos básicos de un programa
-- Software y herramientas para desarrolladores profesionales
-
-## ¿Qué es la programación?
-
-La programación (también conocida como codificación) es el proceso de escribir instrucciones en un dispositivo, como una computadora o un celular. Escribimos estas instrucciones con un lenguaje de programación, que luego es interpretado por el dispositivo. Este conjuntos de instrucciones pueden tener varios nombres, como *programa*, *programa de computadora*, *aplicación (app)* o *ejecutable* son algunos de los más populares.
-
-Un *programa* puede ser cualquier cosa que esté escrita con código; los sitios web, los videojuegos y las aplicaciones de teléfono son programas. Si bien es posible crear un programa sin escribir código, la lógica subyacente se interpreta al dispositivo y esa lógica probablemente se escribió con código. Un programa que está *ejecutándose* o *ejecutando código*, está ejecutando una serie de instrucciones. El dispositivo con el que estás leyendo esta lección está ejecutando un programa para imprimirlo en tu pantalla.
-
-✅ Investigue un poco: ¿quién se considera el primer programador(a) de computadoras del mundo?
-
-## Lenguajes de programación
-
-Los lenguajes de programación tienen un propósito principal: que los desarrolladores creen instrucciones para enviarlas a un dispositivo. Los dispositivos solo pueden entender código binario (1 y 0), y para *la mayoría* de los desarrolladores, esa no es una forma muy amigable de comunicarse. Los lenguajes de programación son un vehículo para la comunicación entre los humanos y las computadoras.
-
-Los lenguajes de programación vienen en diferentes formatos y tienen diferentes propósitos. Por ejemplo, JavaScript se usa principalmente para aplicaciones web, mientras que Bash se usa principalmente para sistemas operativos.
-
-*Los lenguajes de bajo nivel* normalmente requieren menos pasos que los *lenguajes de alto nivel* para que un dispositivo interprete las instrucciones. Sin embargo, lo que hace que los lenguajes de alto nivel sean populares es su legibilidad y soporte. JavaScript es considerado un lenguaje de alto nivel.
-
-El siguiente código ilustra la diferencia entre un lenguaje de alto nivel con JavaScript y un lenguaje de bajo nivel con código Assembly ARM.
-
-```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-Lo creas o no, *ambos hacen lo mismo*: imprimir una secuencia de Fibonacci hasta 10.
-
-✅ Una secuencia de Fibonacci se [define](https://en.wikipedia.org/wiki/Fibonacci_number) como un conjunto de números de modo que cada número es la suma de los dos precedentes, comenzando por 0 y 1.
-
-## Elementos de un programa
-
-Una sola instrucción en un programa se llama *instrucción* y generalmente tendrá un carácter o un espacio entre líneas que marca dónde termina esta. La forma en que termina un programa varía con cada idioma.
-
-La mayoría de los programas se basan en el uso de datos de un usuario o de otros lugares, donde las declaraciones pueden basarse en datos para llevar a cabo instrucciones. Los datos pueden cambiar la forma en que se comporta un programa, por lo que los lenguajes de programación vienen con una forma de almacenar temporalmente datos que se pueden usar más adelante. Estos datos se denominan *variables*. Las variables son declaraciones que indican a un dispositivo que guarde datos en su memoria. Las variables en los programas son similares a las del álgebra, donde tienen un nombre único y su valor puede cambiar con el tiempo.
-
-Existe la posibilidad de que un dispositivo no ejecute algunas declaraciones. Esto suele ser por diseño cuando lo escribe el desarrollador o por accidente cuando ocurre un error inesperado. Este tipo de control de una aplicación la hace más robusta y fácil de mantener. Por lo general, estos cambios en el control ocurren cuando se cumplen ciertas decisiones. Una declaración común en los lenguajes de programación modernos para controlar cómo se ejecuta un programa es la declaración `if..else`.
-
-✅ Aprenderás más sobre este tipo de afirmaciones en lecciones posteriores.
-
-## Herramientas del oficio
-
-[![Herramientas](https://img.youtube.com/vi/ysMrHssmhl0/0.jpg)](https://youtube.com/watch?v=ysMrHssmhl0 "Herramientas")
-
-En esta sección, aprenderás sobre software que puede ayudarte comenzar tu viaje de desarrollo profesional.
-
-Un **entorno de desarrollo** es un conjunto único de herramientas y características que un desarrollador utilizará a menudo para escribir software. Algunas de estas herramientas se han personalizado para las necesidades específicas de un desarrollador y pueden cambiar con el tiempo si un desarrollador cambia las prioridades en el trabajo o proyectos personales, o cuando usa un lenguaje de programación diferente. Los entornos de desarrollo son tan únicos como los desarrolladores que los utilizan.
-
-### Editores
-
-Una de las herramientas más importantes para el desarrollo de software es el editor. Los editores son el lugar donde escribes tu código y, a veces, donde lo ejecutarás.
-
-Los desarrolladores confían en los editores por algunas razones adicionales:
-
-- *Depuración* - Descubrimiento de errores al recorrer el código, línea por línea. Algunos editores tienen capacidades de depuración o se pueden personalizar y agregar para lenguajes de programación específicos.
-- *Resaltado de sintaxis* - Agrega colores y formato de texto al código, lo hace más fácil de leer. La mayoría de los editores permiten el resaltado de sintaxis personalizado.
-- *Extensiones e integraciones del navegador*  -  Adiciones especializadas para desarrolladores, por desarrolladores, para acceder a herramientas adicionales que no están integradas en el editor base. Por ejemplo, muchos desarrolladores también necesitan una forma de documentar su código y explicar cómo funciona, e instalarán una extensión de revisión ortográfica para verificar si hay errores. La mayoría de estas adiciones están diseñadas para usarse dentro de un editor específico, y la mayoría de los editores vienen con una forma de buscar extensiones disponibles.
-- *Personalización*  - La mayoría de los editores son extremadamente personalizables, y cada desarrollador tendrá su propio entorno de desarrollo único que se adapta a sus necesidades. Muchos también permiten a los desarrolladores crear su propia extensión.
-
-
-#### Editores populares y extensiones de desarrollo web
-
-- [Visual Studio Code](https://code.visualstudio.com/)
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
-  - [Prettier - Formateador de código](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Editor de codigo Átom](https://atom.io/)
-  - [Code Spell Checker para Atom](https://atom.io/packages/spell-check)
-  - [Teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-
-* Teletype: Es una extensión que nos permite colaborar en un mismo espacio de trabajo entre muchas personas.
-
-### Navegadores
-
-Otra herramienta esencial es el navegador. Los desarrolladores Web confían en el navegador para observar cómo se ejecuta su código. También se usa para ver elementos visuales de una página web que están escritos en el editor, como HTML.
-
-Muchos navegadores vienen con *herramientas para desarrolladores* (DevTools) que contienen un conjunto de características e información útil para ayudar a los desarrolladores a recopilar y capturar información importante sobre su aplicación. Por ejemplo: si una página web tiene errores, a veces es útil saber cuándo ocurrieron. Se puede configurar DevTools en un navegador para capturar esta información.
-
-#### Navegadores y herramientas de desarrollo populares
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### Herramientas de línea de comandos (CLI)
-
-Algunos desarrolladores prefieren una vista menos gráfica para sus tareas diarias y confían en la línea de comandos **(CLI)** para lograrlo. El desarrollo de código requiere una gran cantidad de escritura, y algunos desarrolladores prefieren no interrumpir su flujo de trabajo con el teclado es por eso que usan atajos (shortcuts) para cambiar entre ventanas de escritorio, trabajar en diferentes archivos y usar herramientas. La mayoría de las tareas se pueden completar con un mouse, pero una de las ventajas de utilizar la línea de comandos es que se pueden hacer muchas cosas sin la necesidad de cambiar entre el mouse y el teclado. Otro beneficio de esta es que son configurables, puedes guardar tu configuración personalizada, asi como también cambiarla más tarde o importarla a nueva máquina. Debido a que los entornos son tan exclusivos para cada desarrollador, algunos evitarán usar la línea de comandos, algunos dependerán de ella por completo, así como también otros pueden preferir una combinación de ambos.
-
-### Opciones de línea de comandos (CLI) populares
-
-Las opciones para la línea de comando varían según el sistema operativo que utilices.
-
-💻 = *viene preinstalado en el sistema operativo.*
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### Línea de comandos (CLI) Populares
-
-- [Git](https://git-scm.com/) (💻 en la mayoría de los sistemas operativos)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### Documentación
-
-Cuando un desarrollador quiere aprender algo nuevo, lo más probable es que recurras a la documentación para aprender a usarla. Los desarrolladores a menudo confían en ésta para guiarlos a través de cómo usar ciertas herramientas así como también para entender como funcionan los lenguajes.
-
-#### Documentación popular sobre desarrollo de web
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), de Mozilla, editores de [Firefox](https://www.mozilla.org/firefox/)
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), de Google, editores de [Chrome](https://www.google.com/chrome/)
-- [Documentos para desarrolladores propios de Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), para [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ Investiga un poco: ahora que conoces los conceptos básicos del entorno de un desarrollador web, compáralo y contrasta con el entorno de un diseñador web.
-
----
-
-## 🚀 Reto
-
-Compara algunos lenguajes de programación. ¿Cuáles son algunos de los rasgos únicos de JavaScript frente a Java? ¿Qué hay de COBOL vs. Go?
-
-## [Cuestionario Posterior a la Clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
-
-## Revisión y Autoestudio
-
-Estudia un poco sobre los diferentes lenguajes disponibles para programar. Intenta escribir una línea en un lenguaje y luego vuelve a hacerlo en otros dos. ¿Qué aprendiste?
-
-## [Tarea](./assignment.es.md)
-
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
deleted file mode 100644
index 17168fad..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fil.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# 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://ashy-river-0debb7803.1.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-77807-sagibbon)!
-
-## 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-77807-sagibbon)
-- [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-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### 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://ashy-river-0debb7803.1.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/README.fr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md
deleted file mode 100644
index 2004a665..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.fr.md
+++ /dev/null
@@ -1,193 +0,0 @@
-# Introduction aux langages de programmation et aux outils du métier
-
-Cette leçon couvre les bases des langages de programmation. Les sujets abordés ici s'appliquent à la plupart des langages de programmation modernes d'aujourd'hui. Dans la section «Outils du métier», vous découvrirez des logiciels utiles qui vous aideront en tant que développeur.
-
-![Intro Programming](/sketchnotes/webdev101-programming.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz préalable
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=fr)
-
-## introduction
-
-Dans cette leçon, nous aborderons:
-
-- Qu'est-ce que la programmation?
-- Types de langages de programmation
-- Éléments de base d'un programme
-- Logiciel et outillage utiles pour le développeur professionnel
-
-## Qu'est-ce que la programmation?
-
-La programmation (également appelée codage) est le processus d'écriture d'instructions sur un appareil, tel qu'un ordinateur ou un appareil mobile. Nous écrivons ces instructions avec un langage de programmation, qui est ensuite interprété par l'appareil. Ces ensembles d'instructions peuvent être désignés sous différents noms, mais *programme*, *programme informatique*, *application (application)* et *exécutable* sont quelques noms courants.
-
-Un *programme* peut être tout ce qui est écrit avec du code; les sites Web, les jeux et les applications téléphoniques sont des programmes. Bien qu'il soit possible de créer un programme sans écrire de code, la logique sous-jacente est interprétée sur le périphérique et cette logique a probablement été écrite avec du code. Un programme qui *exécute* ou *exécute du code* exécute des instructions. L'appareil avec lequel vous lisez actuellement cette leçon exécute un programme pour l'imprimer sur votre écran.
-
-✅ Faites une petite recherche: qui est considéré comme le premier programmeur informatique au monde?
-
-## Langages de programmation
-
-Les langages de programmation ont un objectif principal: permettre aux développeurs de créer des instructions à envoyer à un appareil. Les appareils ne peuvent comprendre que le binaire (1 et 0), et pour *la plupart* les développeurs, ce n'est pas un moyen très efficace de communiquer. Les langages de programmation sont un vecteur de communication entre les humains et les ordinateurs.
-
-Les langages de programmation se présentent sous différents formats et peuvent servir à des fins différentes. Par exemple, JavaScript est principalement utilisé pour les applications Web, tandis que Bash est principalement utilisé pour les systèmes d'exploitation.
-
-*Les langues de bas niveau* nécessitent généralement moins d'étapes que les *langues de haut niveau* pour qu'un appareil interprète les instructions. Cependant, ce qui rend les langages de haut niveau populaires, c'est leur lisibilité et leur support. JavaScript est considéré comme un langage de haut niveau.
-
-Le code suivant illustre la différence entre un langage de haut niveau avec JavaScript et un langage de bas niveau avec le code d'assembly ARM.
-
-```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-Croyez-le ou non, *ils font tous les deux la même chose*: l'affichage d'une séquence de Fibonacci jusqu'à 10.
-
-✅ Une séquence de Fibonacci est [définie](https://en.wikipedia.org/wiki/Fibonacci_number) comme un ensemble de nombres tels que chaque nombre est la somme des deux précédents, à partir de 0 et 1.
-
-## Éléments d'un programme
-
-Une seule instruction dans un programme est appelée une *instruction* et aura généralement un caractère ou un interligne qui marque où l'instruction se termine, ou *se termine*. La façon dont un programme se termine varie avec chaque langue.
-
-La plupart des programmes reposent sur l'utilisation des données d'un utilisateur ou d'ailleurs, où les déclarations peuvent s'appuyer sur des données pour exécuter des instructions. Les données peuvent modifier le comportement d'un programme, de sorte que les langages de programmation proposent un moyen de stocker temporairement des données pouvant être utilisées ultérieurement. Ces données sont appelées *variables*. Les variables sont des instructions qui demandent à un appareil d'enregistrer des données dans sa mémoire. Les variables des programmes sont similaires à celles de l'algèbre, où elles ont un nom unique et leur valeur peut changer avec le temps.
-
-Il est possible que certaines instructions ne soient pas exécutées par un périphérique. C'est généralement par conception lors de l'écriture par le développeur ou par accident lorsqu'une erreur inattendue se produit. Ce type de contrôle d'une application la rend plus robuste et maintenable. Généralement, ces changements de contrôle se produisent lorsque certaines décisions sont respectées. Une instruction courante dans les langages de programmation modernes pour contrôler la manière dont un programme est exécuté est l'instruction `if..else`.
-
-✅ Vous en apprendrez plus sur ce type d'énoncé dans les leçons suivantes
-
-## Outils métier
-
-[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
-
-Dans cette section, vous découvrirez certains logiciels que vous pourriez trouver très utiles au début de votre parcours de développement professionnel.
-
-Un **environnement de développement** est un ensemble unique d'outils et de fonctionnalités qu'un développeur utilisera souvent lors de l'écriture d'un logiciel. Certains de ces outils ont été personnalisés pour les besoins spécifiques d'un développeur et peuvent changer au fil du temps si un développeur change de priorités dans ses projets professionnels ou personnels, ou lorsqu'il utilise un langage de programmation différent. Les environnements de développement sont aussi uniques que les développeurs qui les utilisent.
-
-### éditeurs
-
-L'éditeur est l'un des outils les plus cruciaux pour le développement logiciel. Les éditeurs sont l'endroit où vous écrivez votre code et parfois où vous exécuterez votre code.
-
-Les développeurs comptent sur les éditeurs pour quelques raisons supplémentaires:
-
-- *Débogage* Découverte des bogues et des erreurs en parcourant le code, ligne par ligne. Certains éditeurs ont des capacités de débogage ou peuvent être personnalisés et ajoutés pour des langages de programmation spécifiques.
-- *Mise en évidence de la syntaxe* Ajoute des couleurs et la mise en forme du texte au code, le rend plus facile à lire. La plupart des éditeurs permettent une coloration syntaxique personnalisée.
-- *Extensions et intégrations* Ajouts spécialisés pour les développeurs, par les développeurs, pour accéder à des outils supplémentaires qui ne sont pas intégrés à l'éditeur de base. Par exemple, de nombreux développeurs ont également besoin d'un moyen de documenter leur code et d'expliquer comment il fonctionne et installeront une extension de vérification orthographique pour vérifier les fautes de frappe. La plupart de ces ajouts sont destinés à être utilisés dans un éditeur spécifique, et la plupart des éditeurs proposent un moyen de rechercher les extensions disponibles.
-- *Personnalisation* La plupart des éditeurs sont extrêmement personnalisables, et chaque développeur aura son propre environnement de développement unique qui répond à ses besoins. Beaucoup permettent également aux développeurs de créer leur propre extension.
-
-#### Éditeurs et extensions de développement Web populaires
-
-- [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)
-
-### Navigateurs
-
-Un autre outil crucial est le navigateur. Les développeurs Web comptent sur le navigateur pour observer comment leur code s'exécute sur le Web, il est également utilisé pour afficher les éléments visuels d'une page Web qui sont écrits dans l'éditeur, comme le HTML.
-
-De nombreux navigateurs sont livrés avec des *outils de développement* (DevTools) qui contiennent un ensemble de fonctionnalités et d'informations utiles pour aider les développeurs à collecter et capturer des informations importantes sur leur application. Par exemple: si une page Web contient des erreurs, il est parfois utile de savoir quand elles se sont produites. DevTools dans un navigateur peut être configuré pour capturer ces informations.
-#### Navigateurs et outils de développement populaires
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### ligne de commande
-
-Certains développeurs préfèrent une vue moins graphique pour leurs tâches quotidiennes et comptent sur la ligne de commande pour y parvenir. Le développement de code nécessite une quantité importante de saisie, et certains développeurs préfèrent ne pas perturber leur flux sur le clavier et utiliseront des raccourcis clavier pour basculer entre les fenêtres du bureau, travailler sur différents fichiers et utiliser des outils. La plupart des tâches peuvent être effectuées avec une souris, mais un avantage de l'utilisation de la ligne de commande est que beaucoup peut être fait avec des outils de ligne de commande sans avoir besoin de permuter entre la souris et le clavier. Un autre avantage de la ligne de commande est qu'elle est configurable et que vous pouvez enregistrer votre configuration personnalisée, la modifier ultérieurement et également l'importer sur de nouvelles machines de développement. Parce que les environnements de développement sont si uniques à chaque développeur, certains éviteront d'utiliser la ligne de commande, certains s'y fieront entièrement, et certains préfèrent un mélange des deux.
-
-### Options de ligne de commande populaires
-
-Les options de la ligne de commande varient en fonction du système d'exploitation que vous utilisez.
-
-*💻 = est préinstallé sur le système d'exploitation.*
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (appellé également CMD) 💻
-- [Terminal Windows](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### Command Line Tools ( CLI ) populaires
-
-- [Git](https://git-scm.com/) (💻 sur la plupart des SE)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### Documentation
-
-Lorsqu'un développeur souhaite apprendre quelque chose de nouveau, il se tournera très probablement vers la documentation pour apprendre à l'utiliser. Les développeurs s'appuient souvent sur la documentation pour les guider pour utiliser correctement les outils et les langages, et également pour acquérir une connaissance plus approfondie de son fonctionnement.
-
-#### Documentations populaires sur le développement Web
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), de Mozilla, éditeurs de [Firefox](https://www.mozilla.org/firefox/)
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), de Google, éditeurs de [Chrome](https://www.google.com/chrome/)
-- [Documents de développeur de Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), pour [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ Faites des recherches: maintenant que vous connaissez les bases de l'environnement d'un développeur Web, comparez-le à l'environnement d'un concepteur Web.
-
----
-
-## 🚀 Défi
-
-Comparez quelques langages de programmation. Quelles sont les caractéristiques uniques de JavaScript par rapport à Java? Et COBOL vs Go?
-
-## Quiz de validation des connaissances
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=fr)
-
-## Révision et auto-apprentissage
-
-Étudiez un peu les différentes langues disponibles pour le programmeur. Essayez d'écrire une ligne dans une langue, puis refaites-la dans deux autres. Qu'apprenez-vous?
-
-## Consigne
-
-[Lire la documentation](assignment.fr.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md
deleted file mode 100644
index 47f90423..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.hi.md
+++ /dev/null
@@ -1,194 +0,0 @@
-# प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय
-
-यह पाठ प्रोग्रामिंग भाषाओं की मूल बातें शामिल करता है। यहां शामिल विषय आज की अधिकांश आधुनिक प्रोग्रामिंग भाषाओं पर लागू होते हैं। 'टूल ऑफ़ ट्रेड' सेक्शन में, आप उपयोगी सॉफ़्टवेयर के बारे में जानेंगे जो आपको डेवलपर के रूप में मदद करता है।
-
-![इंट्रो प्रोग्रामिंग](/sketchnotes//webdev101-programming.png)
->[टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=hi)
-
-## परिचय
-
-इस पाठ में, हम कवर करेंगे:
-
-- प्रोग्रामिंग क्या है?
-- प्रोग्रामिंग भाषाओं के प्रकार
-- एक प्रोग्राम के बुनियादी तत्व
-- पेशेवर डेवलपर के लिए उपयोगी सॉफ्टवेयर और टूलिंग
-
-## प्रोग्रामिंग क्या है?
-
-प्रोग्रामिंग (कोडिंग के रूप में भी जाना जाता है) एक डिवाइस, जैसे कि कंप्यूटर या मोबाइल डिवाइस, को निर्देश लिखने की प्रक्रिया है। हम इन निर्देशों को एक प्रोग्रामिंग भाषा के साथ लिखते हैं, जो तब डिवाइस द्वारा व्याख्या की जाती है। निर्देशों के इन सेटों को विभिन्न नामों से संदर्भित किया जा सकता है, लेकिन *प्रोग्राम*, *कंप्यूटर प्रोग्राम*, *एप्लिकेशन(ऐप)*, और *निष्पादन योग्य* कुछ लोकप्रिय नाम हैं.
-
-एक *प्रोग्राम* कुछ भी हो सकता है जो कोड के साथ लिखा गया है; वेबसाइट, गेम और फ़ोन ऐप प्रोग्राम हैं। हालांकि, कोड लिखे बिना प्रोग्राम बनाना संभव है, अंतर्निहित तर्क की व्याख्या डिवाइस से की जाती है और उस तर्क को कोड के साथ लिखे जाने की सबसे अधिक संभावना है। एक प्रोग्राम जो *रनिंग* या *एक्जीक्यूटिंग कोड* निर्देश कर रहा है। जिस उपकरण के साथ आप वर्तमान में इस पाठ को पढ़ रहे हैं, वह आपकी स्क्रीन पर प्रिंट करने के लिए एक प्रोग्राम चला रहा है।
-
-✅ थोड़ा अनुसंधान करें: कौन  दुनिया का पहला कंप्यूटर प्रोग्रामर माना जाता है ?
-
-## प्रोग्रामिंग भाषाएँ
-
-प्रोग्रामिंग भाषाओं का एक मुख्य उद्देश्य है: डेवलपर्स को डिवाइस पर भेजने के लिए निर्देशों का निर्माण करना। डिवाइस केवल बाइनरी (1s और 0s) को समझ सकते हैं, और *सबसे अधिक* डेवलपर्स के लिए जो संवाद करने का एक बहुत ही कुशल तरीका नहीं है। प्रोग्रामिंग भाषाएं मनुष्य और कंप्यूटर के बीच संचार के लिए एक वाहन हैं।
-
-प्रोग्रामिंग भाषाएँ विभिन्न स्वरूपों में आती हैं और विभिन्न उद्देश्यों की पूर्ति कर सकती हैं। उदाहरण के लिए, जावास्क्रिप्ट का उपयोग मुख्य रूप से वेब अनुप्रयोगों के लिए किया जाता है, जबकि बैश मुख्य रूप से ऑपरेटिंग सिस्टम के लिए उपयोग किया जाता है।
-
-*निम्न स्तर की भाषाएं* आमतौर पर निर्देशों की व्याख्या करने के लिए एक उपकरण के लिए * उच्च स्तरीय भाषाओं की तुलना में कम चरणों की आवश्यकता होती है। हालांकि, उच्च स्तरीय भाषाओं को लोकप्रिय बनाने वाली इसकी पठनीयता और समर्थन है। जावास्क्रिप्ट को एक उच्च स्तरीय भाषा माना जाता है.
-
-निम्न कोड जावास्क्रिप्ट के साथ एक उच्च स्तर की भाषा और एआरएम विधानसभा कोड के साथ निम्न स्तर की भाषा के बीच अंतर को दर्शाता है।
-
-```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-मानो या न मानो, *वे दोनों एक ही काम कर रहे हैं*: 10 तक एक फाइबोनैचि अनुक्रम मुद्रित करना।
-
-✅ एक फाइबोनैचि अनुक्रम को संख्याओं के एक सेट के रूप में [परिभाषित](https://en.wikipedia.org/wiki/Fibonacci_number) किया जाता है जैसे कि प्रत्येक संख्या दो पूर्ववर्ती का योग है, जिसकी शुरुआत 0 और 1 से होती है।
-
-## एक प्रोग्राम के तत्व
-
-किसी प्रोग्राम में एक निर्देश को एक *स्टेटमेंट* कहा जाता है और इसमें आमतौर पर एक कैरेक्टर या लाइन स्पेस होता है, जो उन सिरों को चिह्नित करता है, जहां से निर्देश समाप्त होता है, या *टर्मिनेट* होता है। कैसे एक कार्यक्रम समाप्त होता है प्रत्येक भाषा के साथ बदलता रहता है।
-
-अधिकांश प्रोग्राम उपयोगकर्ता या कहीं और से डेटा का उपयोग करने पर निर्भर करते हैं, जहां कथन निर्देशों को पूरा करने के लिए डेटा पर भरोसा कर सकते हैं। डेटा बदल सकता है कि कोई प्रोग्राम कैसे व्यवहार करता है, इसलिए प्रोग्रामिंग भाषाएँ अस्थायी रूप से डेटा को संग्रहीत करने का एक तरीका है जो बाद में उपयोग किया जा सकता है। इस डेटा को *वैरिएबल* कहा जाता है। चर ऐसे कथन हैं जो किसी डिवाइस को उसकी मेमोरी में डेटा को बचाने का निर्देश देते हैं। कार्यक्रमों में विविधताएं बीजगणित में लोगों के समान हैं, जहां उनका एक अनूठा नाम है और समय के साथ उनका मूल्य बदल सकता है।
-
-एक मौका है कि कुछ बयानों को डिवाइस द्वारा निष्पादित नहीं किया जाएगा। यह आमतौर पर डिज़ाइनर द्वारा लिखा जाता है जब डेवलपर द्वारा लिखा जाता है या जब कोई अप्रत्याशित त्रुटि होती है तो दुर्घटना से। किसी एप्लिकेशन का इस प्रकार का नियंत्रण उसे अधिक मजबूत और बनाए रखने योग्य बनाता है। आमतौर पर नियंत्रण में ये परिवर्तन तब होते हैं जब कुछ निर्णय मिलते हैं।  `if..else` स्टेटमेंट आधुनिक प्रोग्रामिंग भाषाओं में एक सामान्य विवरण यह नियंत्रित करने के लिए कि प्रोग्राम कैसे चलाया जाता है।
-
-✅ आप बाद के पाठों में इस प्रकार के कथन के बारे में अधिक जानेंगे
-
-## व्यापार के उपकरण
-
-[![व्यापार के उपकरण](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "व्यापार के उपकरण")
-
-इस अनुभाग में, आप कुछ सॉफ़्टवेयर के बारे में जानेंगे जो आपको अपने व्यावसायिक विकास की यात्रा शुरू करने के दौरान बहुत उपयोगी लग सकते हैं .
-
-एक **विकास पर्यावरण** उपकरण और सुविधाओं का एक अनूठा सेट है जो एक डेवलपर सॉफ्टवेयर लिखते समय अक्सर उपयोग करेगा। इन उपकरणों में से कुछ को एक डेवलपर विशिष्ट आवश्यकताओं के लिए अनुकूलित किया गया है, और समय के साथ बदल सकता है यदि कोई डेवलपर काम या व्यक्तिगत परियोजनाओं में प्राथमिकताएं बदलता है, या जब वे एक अलग प्रोग्रामिंग भाषा का उपयोग करते हैं। विकास का वातावरण डेवलपर्स के रूप में अद्वितीय है जो उनका उपयोग करते हैं।
-
-### एडिटर्स 
-
-सॉफ्टवेयर विकास के लिए सबसे महत्वपूर्ण उपकरणों में से एक एडिटर्स है। एडिटर्स वे होते हैं जहाँ आप अपना कोड लिखते हैं और कभी-कभी जहाँ आप अपना कोड चलाते हैं।
-
-डेवलपर्स कुछ अतिरिक्त कारणों से एडिटर्स पर भरोसा करते हैं:
-
-- *डिबगिंग* कोड के माध्यम से कदम से, लाइन के द्वारा बग और त्रुटियों की खोज करना। कुछ एडिटर्स में डिबगिंग क्षमताएं होती हैं, या उन्हें विशिष्ट प्रोग्रामिंग भाषाओं के लिए अनुकूलित और जोड़ा जा सकता है।.  
-- *सिंटेक्स हाइलाइटिंग* कोड के लिए रंगों और पाठ स्वरूपण को जोड़ता है, यह पढ़ना आसान बनाता है। अधिकांश एडिटर अनुकूलित सिंटैक्स हाइलाइटिंग की अनुमति देते हैं.
-- *एक्सटेंशन और एकीकरण* डेवलपर्स के लिए जो अतिरिक्त हैं, डेवलपर्स के लिए, अतिरिक्त टूल तक पहुंच के लिए जो कि आधार एडिटर में निर्मित नहीं हैं। उदाहरण के लिए, कई डेवलपर्स को अपने कोड को दस्तावेज करने और यह समझाने का तरीका भी चाहिए कि यह कैसे काम करता है और टाइपोस की जांच के लिए वर्तनी जांच एक्सटेंशन स्थापित करेगा। इनमें से अधिकांश परिवर्धन एक विशिष्ट एडिटर के भीतर उपयोग के लिए हैं, और अधिकांश एडिटर उपलब्ध एक्सटेंशन की खोज करने का एक तरीका है।
-- *अनुकूलन* अधिकांश एडिटर अत्यंत अनुकूलन योग्य हैं, और प्रत्येक डेवलपर का अपना विशिष्ट विकास वातावरण होगा जो उनकी आवश्यकताओं के अनुरूप होगा। कई भी डेवलपर्स को अपना विस्तार बनाने की अनुमति देते हैं।
-
-#### लोकप्रिय एडिटर्स और वेब डेवलपमेंटका एक्सटेंशन
-
-- [Visual Studio Code](https://code.visualstudio.com/)
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
-  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Atom](https://atom.io/)
-  - [spell-check](https://atom.io/packages/spell-check)
-  - [teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-
-### ब्राउज़र्स
-
-एक अन्य महत्वपूर्ण उपकरण ब्राउज़र है। वेब डेवलपर ब्राउज़र पर भरोसा करते हैं कि यह देखने के लिए कि उनका कोड वेब पर कैसे चलता है, इसका उपयोग वेब पेज के दृश्य तत्वों को देखने के लिए किया जाता है जो एडिटर में लिखे गए हैं, जैसे की HTML। 
-
-कई ब्राउज़र *डेवलपर टूल*(DevTools) के साथ आते हैं, जिसमें डेवलपर्स को अपने एप्लिकेशन के बारे में महत्वपूर्ण अंतर्दृष्टि एकत्र करने और कैप्चर करने में मदद करने के लिए उपयोगी सुविधाओं और जानकारी का एक सेट होता है। उदाहरण के लिए: यदि किसी वेब पेज में त्रुटियां हैं, तो कभी-कभी यह जानना उपयोगी होता है कि वे कब हुए। एक ब्राउज़र में DevTools इस जानकारी को पकड़ने के लिए कॉन्फ़िगर किया जा सकता है।
-
-#### लोकप्रिय ब्राउज़रों और DevTools
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### कमांड लाइन टूल्स
-
-कुछ डेवलपर्स अपने दैनिक कार्यों के लिए कम ग्राफ़िकल दृश्य पसंद करते हैं और इसे प्राप्त करने के लिए कमांड लाइन पर भरोसा करते हैं। विकासशील कोड के लिए महत्वपूर्ण मात्रा में टाइपिंग की आवश्यकता होती है, और कुछ डेवलपर्स कीबोर्ड पर अपने प्रवाह को बाधित नहीं करना पसंद करते हैं और डेस्कटॉप विंडो के बीच स्वैप करने के लिए कीबोर्ड शॉर्टकट का उपयोग करेंगे, विभिन्न फ़ाइलों पर काम करेंगे, और टूल का उपयोग करेंगे। अधिकांश कार्यों को एक माउस के साथ पूरा किया जा सकता है, लेकिन कमांड लाइन का उपयोग करने का एक लाभ यह है कि माउस और कीबोर्ड के बीच स्वैपिंग की आवश्यकता के बिना कमांड लाइन टूल के साथ बहुत कुछ किया जा सकता है। कमांड लाइन का एक और लाभ यह है कि वे कॉन्फ़िगर करने योग्य हैं और आप अपने कस्टम कॉन्फ़िगरेशन को सहेज सकते हैं, इसे बाद में बदल सकते हैं और इसे नई विकास मशीनों में भी आयात कर सकते हैं। क्योंकि विकास वातावरण प्रत्येक डेवलपर के लिए बहुत अनूठा है, कुछ कमांड लाइन का उपयोग करने से बचेंगे, कुछ इस पर पूरी तरह से भरोसा करेंगे, और कुछ दोनों का मिश्रण पसंद करते हैं।
-
-### लोकप्रिय कमांड लाइन विकल्प
-
-आपके द्वारा उपयोग किए जाने वाले ऑपरेटिंग सिस्टम के आधार पर कमांड लाइन के विकल्प अलग-अलग होंगे.
-
-*💻 = ऑपरेटिंग सिस्टम पर प्रीइंस्टॉल्ड आता है.*
-
-#### विंडोज
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [mintty](https://mintty.github.io/)
-  
-#### मैक ओएस
-
-- [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-77807-sagibbon)
-
-#### लिनक्स
-
-- [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-77807-sagibbon)
-
-#### लोकप्रिय कमांड लाइन टूल्स
-
-- [Git](https://git-scm.com/) (💻 अधिकांश ऑपरेटिंग साइटम पर)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### प्रलेखन
-
-जब कोई डेवलपर कुछ नया सीखना चाहता है, तो वे इसका उपयोग करने के तरीके जानने के लिए प्रलेखन की ओर रुख करेंगे। डेवलपर्स अक्सर टूल और भाषाओं का सही तरीके से उपयोग करने के लिए, और यह भी कि यह कैसे काम करता है के गहन ज्ञान प्राप्त करने के लिए मार्गदर्शन के लिए प्रलेखन पर भरोसा करते हैं।
-
-#### वेब विकास पर लोकप्रिय प्रलेखन
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozilla से, [Firefox](https://www.mozilla.org/firefox/) के प्रकाशक
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), Google की ओर से, [Chrome](https://www.google.com/chrome/) के प्रकाशक
-- [Microsoft के अपने डेवलपर दस्तावेज़](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), के लिए [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ कुछ शोध करें: अब जब आप वेब डेवलपर के परिवेश की मूल बातें जानते हैं, तो इसकी तुलना वेब डिज़ाइनर के परिवेश से करें।
-
----
-
-## 🚀 चुनौती
-
-कुछ प्रोग्रामिंग भाषाओं की तुलना करें। जावास्क्रिप्ट बनाम जावा के कुछ विशिष्ट लक्षण क्या हैं? COBOL बनाम GO के बारे मे?
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-प्रोग्रामर के लिए उपलब्ध विभिन्न भाषाओं पर थोड़ा अध्ययन करें। एक भाषा में एक पंक्ति लिखने का प्रयास करें, और फिर इसे दो अन्य में फिर से लिखें। आप क्या सीखते हैं?
-
-## असाइनमेंट
-
-[डॉक्स पढ़ना](assignment.hi.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md
deleted file mode 100644
index 4383078d..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.id.md
+++ /dev/null
@@ -1,196 +0,0 @@
-# Pengantar Bahasa Pemrograman dan Alat Keterampilan
-
-Pelajaran ini mencakup dasar-dasar bahasa pemrograman. Topik yang dibahas di sini berlaku untuk sebagian besar bahasa pemrograman modern saat ini. Di bagian 'Alat Keterampilan', Anda akan belajar tentang perangkat lunak yang berguna yang membantu Anda sebagai pengembang.
-
-![Pemrograman Intro](/sketchnotes/webdev101-programming.png)
-> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuis Pra-Kuliah
-
-[Kuis pra-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=id)
-
-## Pengantar
-
-Dalam pelajaran ini, kami akan membahas:
-
-- Apa itu pemrograman?
-- Jenis bahasa pemrograman
-- Elemen dasar dari sebuah program
-- Perangkat lunak dan alat-alat yang berguna untuk pengembang profesional
-
-## Apa itu Pemrograman?
-
-Pemrograman (juga dikenal sebagai koding) adalah proses penulisan instruksi ke perangkat, seperti komputer atau perangkat seluler. Kami menulis instruksi ini dengan bahasa pemrograman, yang kemudian diinterpretasikan oleh perangkat. Kumpulan instruksi ini dapat dirujuk dengan berbagai nama, tetapi *program*, *program komputer*, *aplikasi (app)*, dan *dapat dijalankan (executable)* adalah beberapa nama populer.
-
-Sebuah *program* dapat berupa apapun yang ditulis dengan kode; situs web, permainan, dan aplikasi telepon adalah program. Meskipun memungkinkan untuk membuat program tanpa menulis kode, logika dasarnya diinterpretasikan ke perangkat dan logika itu kemungkinan besar ditulis dengan kode. Sebuah program yang *berjalan (running)* atau *menjalankan kode (executing code)* sedang menjalankan instruksi. Perangkat yang saat ini Anda gunakan untuk membaca pelajaran ini menjalankan program untuk mencetaknya ke layar Anda.
-
-✅ Lakukan sedikit riset: siapa yang dianggap pemrogram komputer pertama di dunia?
-
-## Bahasa pemrograman
-
-Bahasa pemrograman memiliki tujuan utama: bagi pengembang untuk membuat instruksi untuk dikirim ke perangkat. Perangkat hanya dapat memahami biner (1 dan 0), dan untuk *sebagian besar* pengembang itu bukan cara yang sangat efisien untuk berkomunikasi. Bahasa pemrograman adalah wahana komunikasi antara manusia dan komputer.
-
-Bahasa pemrograman memiliki format yang berbeda dan mungkin memiliki tujuan yang berbeda. Misalnya, JavaScript terutama digunakan untuk aplikasi web, sedangkan Bash terutama digunakan untuk sistem operasi.
-
-*Bahasa tingkat rendah (Low level languages)* biasanya membutuhkan lebih sedikit langkah daripada *bahasa tingkat tinggi (high level languages)* agar perangkat dapat menafsirkan instruksi. Namun, yang membuat bahasa tingkat tinggi lebih populer adalah keterbacaan dan dukungannya. JavaScript dianggap sebagai bahasa tingkat tinggi.
-
-Kode berikut menggambarkan perbedaan antara bahasa tingkat tinggi dengan JavaScript dan bahasa tingkat rendah dengan kode rakitan ARM (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
-```
-
-Percaya atau tidak, *mereka berdua melakukan hal yang sama*: mencetak urutan Fibonacci hingga 10.
-
-✅ Urutan Fibonacci [didefinisikan](https://en.wikipedia.org/wiki/Fibonacci_number) sebagai sekumpulan angka sedemikian rupa sehingga setiap angka adalah jumlah dari dua angka sebelumnya, mulai dari 0 dan 1.
-
-## Elemen program
-
-Satu instruksi dalam program disebut *statement* dan biasanya akan memiliki karakter atau penspasian baris yang menandai di mana instruksi berakhir, atau *mengakhiri (terminates)*. Bagaimana sebuah program berakhir bervariasi menurut setiap bahasa.
-
-Sebagian besar program mengandalkan penggunaan data dari pengguna atau di tempat lain, di mana pernyataan dapat mengandalkan data untuk melakukan instruksi. Data dapat mengubah bagaimana sebuah program berperilaku, sehingga bahasa pemrograman datang dengan cara untuk menyimpan data sementara yang dapat digunakan nanti. Data ini disebut *variabel*. Variabel adalah pernyataan yang menginstruksikan perangkat untuk menyimpan data dalam memorinya. Variabel dalam program mirip dengan yang ada di aljabar, di mana mereka memiliki nama yang unik dan nilainya dapat berubah dari waktu ke waktu.
-
-Ada kemungkinan bahwa beberapa pernyataan tidak akan dijalankan oleh perangkat. Ini biasanya oleh desain ketika ditulis oleh pengembang atau secara tidak sengaja ketika kesalahan yang tidak terduga terjadi. Jenis kontrol aplikasi ini membuatnya lebih kuat dan dapat dipertahankan. Biasanya perubahan kontrol ini terjadi ketika keputusan tertentu terpenuhi. Pernyataan umum dalam bahasa pemrograman modern untuk mengontrol bagaimana program dijalankan adalah pernyataan `if..else`.
-
-✅ Anda akan mempelajari lebih lanjut tentang jenis pernyataan ini dalam pelajaran berikutnya
-
-## Alat Keterampilan
-
-[![Alat Keterampilan](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Alat Keterampilan")
-
-Di bagian ini, Anda akan mempelajari beberapa perangkat lunak yang mungkin berguna saat memulai perjalanan pengembangan profesional.
-
-***Lingkungan pengembangan (development environment)*** adalah seperangkat alat dan fitur unik yang sering digunakan pengembang saat menulis perangkat lunak. Beberapa alat ini telah disesuaikan untuk kebutuhan khusus pengembang, dan dapat berubah seiring waktu jika pengembang mengubah prioritas dalam proyek kerja atau pribadi, atau ketika mereka menggunakan bahasa pemrograman yang berbeda. Lingkungan pengembangan sama uniknya dengan pengembang yang menggunakannya.
-
-### Editor
-
-Salah satu alat yang paling penting untuk pengembangan perangkat lunak adalah editor. Editor adalah tempat Anda menulis kode dan kadang-kadang di mana Anda akan menjalankan kode Anda.
-
-Pengembang mengandalkan editor karena beberapa alasan tambahan:
-
-- *Debugging* Menemukan bug dan kesalahan dengan melangkah melalui kode, baris demi baris. Beberapa editor memiliki kemampuan debugging, atau dapat disesuaikan dan ditambahkan untuk bahasa pemrograman tertentu.  
-- *Penyorotan sintaks* Menambahkan warna dan pemformatan teks ke kode, membuatnya lebih mudah dibaca. Sebagian besar editor memungkinkan penyorotan sintaks yang disesuaikan.
-- *Ekstensi dan Integrasi* Penambahan yang khusus untuk pengembang, oleh pengembang, untuk akses ke alat tambahan yang tidak dibangun ke dalam editor dasar. Misalnya, banyak pengembang juga membutuhkan cara untuk mendokumentasikan kode mereka dan menjelaskan cara kerjanya dan akan menginstal ekstensi pemeriksaan ejaan untuk memeriksa kesalahan ketik. Sebagian besar penambahan ini dimaksudkan untuk digunakan dalam editor tertentu, dan sebagian besar editor datang dengan cara untuk mencari ekstensi yang tersedia.
-- *Kustomisasi* Sebagian besar editor sangat dapat disesuaikan, dan setiap pengembang akan memiliki lingkungan pengembangan unik mereka sendiri yang sesuai dengan kebutuhan mereka. Banyak juga yang memungkinkan pengembang untuk membuat ekstensi mereka sendiri.
-
-#### Editor dan Ekstensi Pengembangan Web Populer
-
-- [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)
-
-### Browser
-
-Alat penting lainnya adalah browser. Pengembang web mengandalkan browser untuk mengamati bagaimana kode mereka berjalan di web, itu juga digunakan untuk melihat elemen visual dari halaman web yang ditulis di editor, seperti HTML.
-
-Banyak browser datang dengan *alat pengembang* (DevTools) yang berisi serangkaian fitur dan informasi bermanfaat untuk membantu pengembang mengumpulkan dan menangkap wawasan penting tentang aplikasi mereka. Misalnya: Jika halaman web memiliki kesalahan, terkadang berguna untuk mengetahui kapan halaman web tersebut terjadi. DevTools di browser dapat dikonfigurasi untuk mengambil informasi ini.
-
-#### Browser dan DevTools Populer
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### Alat Command Line
-
-Beberapa pengembang lebih suka tampilan grafis yang kurang untuk tugas sehari-hari mereka dan mengandalkan command line (baris perintah) untuk mencapai ini. Mengembangkan kode membutuhkan sejumlah besar pengetikan, dan beberapa pengembang lebih suka tidak mengganggu aliran mereka pada keyboard dan akan menggunakan pintasan keyboard untuk bertukar antara jendela desktop, mengerjakan file yang berbeda, dan menggunakan alat. Sebagian besar tugas dapat diselesaikan dengan mouse, tetapi satu manfaat menggunakan command line adalah bahwa banyak yang dapat dilakukan dengan alat command line tanpa perlu bertukar antara mouse dan keyboard. Manfaat lain dari command line adalah bahwa mereka dapat dikonfigurasi dan Anda dapat menyimpan konfigurasi kustom Anda, mengubahnya nanti, dan juga mengimpornya ke mesin pengembangan baru. Karena lingkungan pengembangan sangat unik untuk setiap pengembang, beberapa akan menghindari menggunakan command line, beberapa akan mengandalkannya sepenuhnya, dan beberapa lebih suka campuran keduanya.
-
-### Pilihan Command Line Populer
-
-Pilihan untuk command line akan berbeda berdasarkan sistem operasi yang Anda gunakan.
-
-*💻 = sudah terinstall dengan sistem operasi.*
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### Alat Command Line Populer
-
-- [Git](https://git-scm.com/) (💻 on most operating sytems)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### Dokumentasi
-
-Ketika pengembang ingin mempelajari sesuatu yang baru, mereka kemungkinan besar akan mengandalkan dokumentasi untuk mempelajari cara menggunakannya. Pengembang sering mengandalkan dokumentasi untuk memandu mereka melalui cara menggunakan alat dan bahasa dengan benar, dan juga untuk mendapatkan pengetahuan yang lebih mendalam tentang cara kerjanya.
-
-#### Dokumentasi Populer tentang Pengembangan Web
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web) dari Mozilla, penerbit [Firefox](https://www.mozilla.org/firefox/)
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), dari Google, penerbit [Chrome](https://www.google.com/chrome/)
-- [Dokumen pengembang Microsoft sendiri](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), untuk [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ Lakukan riset: Sekarang Anda tahu dasar-dasar lingkungan pengembang web, bandingkan dan kontras dengan lingkungan desainer web.
-
----
-
-## 🚀 Tantangan
-
-Bandingkan beberapa bahasa pemrograman. Apa saja ciri-ciri unik JavaScript vs. Java? Bagaimana dengan COBOL vs. Go?
-
-## Kuis Pasca-Kuliah
-
-[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=id)
-
-## Ulasan & Belajar Mandiri
-
-Pelajari sedikit tentang berbagai bahasa yang tersedia untuk programmer. Cobalah untuk menulis baris dalam satu bahasa, dan kemudian mengulanginya pada dua bahasa lainnya. Apa yang Anda pelajari?
-
-## Tugas
-
-[Membaca Dokumentasi](assignment.id.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md
deleted file mode 100644
index 3fa0a8ca..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.it.md
+++ /dev/null
@@ -1,194 +0,0 @@
-# Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari
-
-Questa lezione tratta delle basi dei linguaggi di programmazione. Gli argomenti trattati qui si applicano alla maggior parte dei moderni linguaggi di programmazione di oggi. Nella sezione 'Strumenti Necessari' conoscerete utili software che vi aiuteranno come programmatore.
-
-![Introduzione alla  Programmazione](/sketchnotes/webdev101-programming.png)
-> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pre-Lezione
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=it)
-
-## Introduzione
-
-In questa lezione tratteremo di:
-
-- Cos'è la programmazione?
-- Tipi di linguaggi di programmazione
-- Elementi base di un programma
-- Software utili e strumenti per lo sviluppatore professionista
-
-## Cos'è la programmazione?
-
-La programmazione (conosciuta anche come scrivere codice) è il processo con il quale si scrivono istruzioni a un dispositivo, tipo un computer o dispositivo mobile. Queste istruzioni vengono scritte con un linguaggio di programmazione, quindi vengono interpretate dal dispositivo. Ci si può riferire a questo insieme di istruzioni in vari modi, ma *programma*, *programma di computer*, *applicazione (app)*, ed *eseguibile* sono alcuni dei nomi più conosciuti.
-
-Un *programma* può essere qualsiasi cosa che sia scritta con codice; siti web, giochi, app per telefono sono programmi. Mentre è possibile creare un programma senza scrivere codice, la logica sottostante viene interpretata dal dispositivo e quella logica è molto probabile che sia stata scritta con codice. Un programma che sta *girando* o sta*eseguendo codice* sta effettuando istruzioni. Il dispositivo con il quale state attualmente leggendo questa lezione sta eseguendo un programma per stamparla sul vostro schermo.
-
-✅ Fate una piccola ricerca: quale si ritiene sia stato il primo programmatore al mondo?
-
-## Linguaggi di programmazione
-
-I linguaggi di programmazione servono uno scopo principale: fare in modo che gli sviluppatori costruiscano istruzioni da inviare a un dispositivo. I dispositivi possono comprendere solo codice binario (gli 1 e gli 0), e per la *maggior parte* degli sviluppatori questo non è un modo molto efficace di comunicare. I linguaggi di programmazione sono un veicolo per comunicare tra umani e computer.
-
-I linguaggi di programmazione sono disponibili in diversi formati e possono servire per scopi diversi. Ad esempio, JavaScript è principalmente usato per applicazioni web, mentre Bash è principalmente usato per sistemi operativi.
-
-I *linguaggi a basso livello* richiedono in genere a un dispositivo meno passi per interpretare le istruzioni rispetto ai *linguaggi di alto livello*. Tuttavia ciò che rende popolari i *linguaggi di alto livello* è la loro leggibilità e supporto. JavaScript è considerato un *linguaggio di alto livello*
-
-Il codice seguente illustra le differenze tra un linguaggio ad alto livello come JavaScript e un linguaggio a basso livello come il codice assembly ARM.
-
-```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-Credeteci o no, *stanno entrambi facendo la stessa cosa*: stampare una successione di Fibonacci fino a 10.
-
-✅ Una successione di Fibonacci è [definita](https://www.wikiwand.com/it/Successione_di_Fibonacci) come un insieme di numeri tali che ciascun numero è la somma dei due precedenti, a partire da 0 e 1.
-
-## Elementi di un programma
-
-Una singola istruzione in un programma è detta *istruzione* e in genere avrà un carattere o spaziatura di riga che identifica dove essa finisce, o *termina*. Il modo nel quale un programma termina varia per ogni linguaggio.
-
-La maggior parte dei programmi dipende dall'utilizzo di dati ricevuti da un utente o altrove, dove le istruzioni potrebbero dipendere da dati per essere effettuate. I dati possono modificare il comportamento di un programma, quindi i linguaggi di programmazione sono dotati della possibilità di conservare temporaneamente dati che possono essere usati successivamente. Questi dati sono detti *variabili*. Le variabili sono istruzioni che richiedono a un dispositivo di salvare dati nella sua memoria. Le variabili nei programmi sono simili a quelle dell'algebra, dove devono avere un nome univoco e il loro valore potrebbe mutare nel tempo.
-
-Esiste la possibilità che alcune istruzioni non saranno eseguite da un dispositivo. In genere è una cosa voluta quando scritta dallo sviluppatore oppure per caso quando si verifica un errore inaspettato. Questo tipo di controllo di un'applicazione la rende più robusta e mantenibile. In genere queste modifiche nel controllo accadono quando si verificano certe condizioni. Una istruzione comune nei moderni linguaggi di programmazione per controllare come viene eseguito un programma è `if..else`.
-
-✅ Saprete di più circa questo tipo di istruzione nelle lezioni successive
-
-## Strumenti Necessari
-
-[![Strumenti Necessari](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
-
-In questa sezione conoscerete qualche software che potreste trovare molto utile per iniziare il vostro viaggio come programmatori professionisti.
-
-Un *ambiente di sviluppo* è un insieme univoco di strumenti e caratteristiche che uno sviluppatore usa spesso quando scrive software. Alcuni di questi strumenti sono stati personalizzati per specifiche necessità dello sviluppatore e potrebbero cambiare nel tempo se lo sviluppatore cambia le priorità dei progetti di lavoro o personali, oppure quando usa un diverso linguaggio di programmazione. Gli ambienti di sviluppo sono unici tanto quanto gli sviluppatori che li utilizzano.
-
-### Editor
-
-Uno degli strumenti cruciali per lo sviluppo del software è l'editor. Gli editor sono dove scrivete il vostro codice e talvolta dove eseguirete il vostro codice.
-
-Gli sviluppatori si affidano agli editor per qualche altra ragione aggiuntiva:
-
-- *Debugging* La scoperta di bug ed errori seguendo passo passo il codice, riga per riga. Alcuni editor hanno capacita di debugging o possono essere personalizzate e aggiunte per linguaggi di programmazione specifici.
-- *Evidenziazione della Sintassi* Aggiunge colorazione e formattazione al testo del codice, rendendone più facile la lettura. La maggior parte degli editor consente la personalizzazione dell'evidenziazione della sintassi.
-- *Estensioni e integrazioni* Aggiunte specializzate per gli sviluppatori, dagli sviluppatori, per accedere a strumenti addizionali che non sono incluse come caratteristiche base dell'editor. Ad esempio molti sviluppatori hanno bisogno di un modo per documentare il proprio codice e spiegare come funziona e installeranno una estensione in grado di verificare la sintassi per trovare errori di ortografia. La maggior parte di queste aggiunte sono rivolte all'uso per un editor specifico, e molti editor hanno un modo per ricercare le estensioni disponibili.
-- *Personalizzazione* La maggior parte degli editor sono estremamente personalizzabili, e ciascun sviluppatore avrà il suo proprio ambiente di programmazione in grado di soddisfare le sue necessità. Molti consentono agli sviluppatori di creare le loro proprie estensioni.
-
-#### Popolari Editor ed Estensioni per lo Sviluppo Web
-
-- [Visual Studio Code](https://code.visualstudio.com/)
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
-  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Atom](https://atom.io/)
-  - [spell-check](https://atom.io/packages/spell-check)
-  - [teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-
-### Browser
-
-Un altro strumento cruciale è il browser. Gli sviluppatori web fanno affidamento sul browser per osservare come il proprio codice viene eseguito nel web, viene anche usato per vedere elementi grafici di una pagina web che sono scritti nell'editor, come HTML.
-
-Molti browser dispongono di *strumenti per lo sviluppatore* (DevTools) che contengono un insieme di caratteristiche e informazioni per aiutare gli sviluppatori nella raccolta e cattura di importanti approfondimenti in merito alle proprie applicazioni. Ad esempio: se una pagina web ha errori, è talvolta utile sapere dove questi errori sono capitati. DevTools in un browser può essere configurato per catturare queste informazioni.
-
-#### Popolari Browser e DevTools
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://sviluppatori.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://sviluppatore.mozilla.org/docs/Tools)
-
-### Strumenti da Riga di Comando
-
-Alcuni sviluppatori preferiscono una visione meno grafica per i propri compiti quotidiani e si appoggiano alla riga di comando per completarli. Lo sviluppo del codice richiede un significativo ammontare di digitazione e taluni sviluppatori preferiscono non interrompere il proprio flusso sulla tastiere e usano scorciatoie da tastiera per spostarsi tra finestre del desktop, lavorare su file diversi, e usare strumenti. La maggior parte dei compiti può essere completata con un mouse, ma un vantaggio dell'usare la riga di comando è che molto può essere fatto con essa senza dover passare dalla tastiera al mouse e viceversa. Un altro vantaggio è che è configurabile ed è possibile salvare la propria configurazione, modificarla successivamente, e anche importarla su nuove macchine di sviluppo. Poiché gli ambienti di sviluppo sono così particolari per ciascun sviluppatore, alcuni eviteranno l'uso della riga di comando, altri la utilizzeranno esclusivamente e altri preferiranno mescolare le due tattiche.
-
-### Popolari Alternative per Riga di Comando
-
-Le alternative per la riga di comando differiriscono in base al sistema operativo che si sta usando.
-
-*💻 = preinstallate nel sistema operativo.*
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### Popolari Strumenti da Riga di Comando
-
-- [Git](https://git-scm.com/) (💻 nella maggior parte dei sistemi operativi)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### Documentazione
-
-Quando uno sviluppatore vuole imparare qualcosa di nuovo, per la maggior parte delle volte farà riferimento alla documentazione per imparare come usarlo. Gli sviluppatori fanno spesso affidamento alla documentazione per essere guidati all'utilizzo corretto degli strumenti e dei linguaggi, oltre a ottenere una più profonda conoscenza del funzionamento.
-
-#### Popolari Documentazioni sullo Sviluppo Web
-
-- [Mozilla sviluppatore Network (MDN)](https://sviluppatore.mozilla.org/docs/Web), di Mozilla, editori di [Firefox](https://www.mozilla.org/firefox/)
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), di Google, editori di [Chrome](https://www.google.com/chrome/)
-- [Documenti per sviluppatori di Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), per [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ Fate qualche ricerca: Ora che sapete le basi per un ambiente di sviluppo web, confrontate e rilevate le differenze rispetto all'ambiente di sviluppo di un web designer.
-
----
-
-## 🚀 Sfida
-
-Confrontate alcuni linguaggi di programmazione. Quali sono i tratti univoci di  JavaScript rispetto a Java? E COBOL rispetto a Go?
-
-## Quiz Post-Lezione
-[Quiz Post-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=it)
-
-## Revisione e Auto Istruzione
-
-Studiate un poco sui diversi linguaggi di programmazione a disposizione di un programmatore. Cercate di scrivere una riga in un linguaggio, poi rifatelo con altri due. Cosa avete imparato?
-
-## Compito 
-
-[Leggere la documentazione](assignment.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md
deleted file mode 100644
index bf9e4101..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ja.md
+++ /dev/null
@@ -1,249 +0,0 @@
-# プログラミング言語と開発ツール入門
-
-このレッスンでは、まずプログラミング言語の基礎を学びます。
-ここで取り上げた特徴は、最新のプログラミング言語のほとんどに当てはまります。
-次にツールセクションでは、開発者にとって有用なソフトウェアを紹介します。
-
-![Intro Programming](/sketchnotes/webdev101-programming.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 事前クイズ
-[事前クイズ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ja)
-
-## Introduction
-
-この講座には以下が含まれています。
-
-- プログラミングとは何か？
-- プログラミング言語の種類
-- プログラムの基本要素
-- 開発ツール
-
-## プログラミングとは何か？
-
-プログラミング(コーディングとも表されます)とは、コンピュータやモバイル機器などのデバイスに対して、命令を出すことです。
-命令はプログラミング言語で書かれており、そしてデバイスはその命令を解釈して実行します。
-この命令は色々な名称で呼ばれることがありますが、*プログラム*、*コンピュータプログラム*、*アプリケーション(アプリ)*、*実行可能ファイル*、などが一般的に使われています。
-
-*プログラム*とは、コードで書かれている何かです。
-Webサイトも、ゲームも、スマホアプリも、全てがプログラムです。
-コードを書かずにプログラムを作ることも可能ですが、作り上げたロジックは実際にはコードで書かれていて、実際にデバイスが解釈するのはコードです。
-プログラムはコードを実行し、デバイスに命令を出します。
-あなたが今このレッスンを読んでいるということは、文字を画面に表示するというプログラムをデバイスが実行しているということです。
-
-✅ ちょっと調べてみましょう：世界初のコンピュータプログラマは誰でしょうか？
-
-## プログラミング言語
-
-プログラミング言語の主な目的は、開発者がデバイスに対して命令を送信する手助けをすることです。
-デバイスはバイナリ(要するに0と1)しか理解することができず、そして*ほとんどの*開発者にとってバイナリはあまり効率的な命令手段ではありません。
-プログラミング言語は、人間とコンピュータがコミュニケーションを取るための手段なのです。
-
-世の中には様々な目的のために様々なプログラミング言語が存在しています。
-たとえばJavaScriptは主にWebアプリケーションのために、Bashは主にOSとの対話のために使われます。
-
-*低レベル言語*とは、デバイスが命令を解釈するために必要なステップ数が、*高レベル言語*より少ない言語のことです。
-高レベル言語が人気であるのは、その読みやすさとサポート能力によるものです。
-JavaScriptは高レベル言語とされています。
-
-次のコードは、高レベル言語であるJavaScriptと、低レベル言語であるARMアセンブリの違いを表したものです。
-
-```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-信じられないかもしれませんが、両者は同じ処理をしています。
-いずれもフィボナッチ数を順番に10個出力します。
-
-✅ [フィボナッチ数](https://ja.wikipedia.org/wiki/%E3%83%95%E3%82%A3%E3%83%9C%E3%83%8A%E3%83%83%E3%83%81%E6%95%B0)とは、各数がその手前の二つの値の和である値の集合です。
-
-## プログラムの基本要素
-
-プログラムにおいてひとつの命令は*文*と呼ばれ、文は通常は改行などの*区切り文字*で分かたれます。
-プログラムの区切り文字は言語によって異なります。
-
-多くのプログラムは、ユーザや他から来た入力データによって出力が変わります。
-データによってプログラムの動作を変えるため、プログラミング言語にはデータを一時的に保存しておく方法が用意されています。
-そのデータは*変数*と呼ばれています。
-変数とは、デバイス内のメモリにデータを保存する文のことです。
-プログラムにおける変数は数学における変数と似ていて、変数には固有の名称があり、その値は処理の経過に伴って変化することがあります。
-
-プログラムには、実行されない文が現れることがあります。
-これは、そうなるように開発者が設計して制御されたものであるか、予期せぬエラーが発生したかのいずれかです。
-アプリケーションの制御は、堅牢で信頼性の高いプログラムを書くために必要なことです。
-制御は、何らかの条件が満たされたことによって発生することが一般的です。
-最近のプログラミング言語には、実行される文を制御するために`if...else`のような文が存在します。
-
-✅ これら文については次のレッスンで詳しく学びます。
-
-## 開発ツール
-
-[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
-
-このセクションでは、プロの開発者としての道を歩き始めるときに役立つであろうソフトウェアについて紹介します。
-
-**開発環境**とは、開発者がソフトウェアを作成する際に頻繁に使用するツールや機能のセットのことです。
-開発環境は、開発者が特定のニーズに合わせてカスタマイズしたり、優先順位を変更したり、異なるプログラミング言語を使用したりといった理由で次々と変わっていくこともあります。
-開発環境は、それを使用する開発者の数と同じくらい千差万別です。
-
-### エディタ
-
-ソフトウェア開発において最も重要なツールのひとつが、エディタです。
-エディタはコードを書く場所であり、時にはコードを実行する場所であることもあります。
-
-開発者がエディタを使う理由は、それ以外にも多々あります。
-
-- *デバッグ*
-コードを1行1行ステップ実行することで、バグやエラーを発見しやすくします。
-デバッグ機能を備えたエディタや、特定のプログラミング言語用にカスタマイズすることができるエディタも存在します。
-
-- *シンタックスハイライト*
-コードに色や書式を設定することで、コードを読みやすくします。
-多くのエディタはシンタックスハイライトをカスタマイズすることもできます。
-
-- *拡張機能*
-デフォルトでは含まれない、一部の開発者向けに特化された拡張機能を追加することができます。
-例えば、コードをドキュメント化してどのように動作するかを確認したいユーザがいて、タイプミスのチェックのためにスペルチェックを行いたいユーザがいて、各自が自分のほしい拡張機能をインストールすることができます。
-ほとんどの拡張機能は特定のエディタでのみ動作するもので、そしてほとんどのエディタは拡張機能を検索する方法を用意しています。
-
-- *カスタマイズ*
-ほとんどのエディタは幅広いカスタマイズが可能で、開発者は自分のニーズに合わせた開発環境を作ることができます。
-さらに多くのエディタでは、開発者が自分で拡張機能を作ることも可能です。
-
-#### 有名なエディタとWeb開発向けのエクステンション
-
-- [Visual Studio Code](https://code.visualstudio.com/)
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
-  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Atom](https://atom.io/)
-  - [spell-check](https://atom.io/packages/spell-check)
-  - [teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-
-### ブラウザ
-
-もうひとつの重要なツールはブラウザです。
-Web開発者は、自分のコードがWeb上でどのように実行されるかを確認するため、そしてHTML要素を視覚的に確認するためにブラウザを必要とします。
-
-多くのブラウザには*開発者ツール*が付属しており、アプリケーションの動作を収集・分析するために便利な機能や情報があります。
-たとえば開発者ツールを使って、Webページにエラーがあった場合に、いつどこでエラーが発生したかを把握することができます。
-
-
-#### 有名なブラウザ
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### コマンドラインツール
-
-開発者の中には、日常の作業をGUIで行うことを好まず、コマンドラインに多くを頼る人もいます。
-コードの開発には多量のタイピングが必要となるため、マウスを使うためにキーボードから手を外すことで作業の流れを中断されることを避け、キーボードショートカットを駆使して複数のファイルを操作したり複数のツールを併用したりします。
-
-多くのタスクはマウスだけでも実行可能です。
-しかし、コマンドラインの利点のひとつが、マウスとキーボードで行ったり来たりせずにキーボードだけで作業を完結できるというものです。
-またコマンドラインのもうひとつの利点が、カスタム設定を登録しておくことが可能ということです。
-さらにマシンを新調したときに設定を移動することもできます。
-
-開発環境は個人個人によって非常に異なるため、コマンドラインの使用を避ける人もいれば、完全にコマンドラインだけしか使わない人もいます。
-両方とも使う人も多いでしょう。
-
-### 有名なコマンドラインオプション
-
-コマンドラインオプションは、OSによって異なります。
-
-💻はOSにプリインストールされているものです。
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### 有名なコマンドラインツール
-
-- [Git](https://git-scm.com/) (多くのOSで 💻)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### ドキュメント
-
-何か新しいことを学びたいと思ったとき、その使い方を学ぶためには大抵ドキュメントに頼ることになるでしょう。
-開発者は、ツールや言語を適切に使用する方法を学んだり、その仕組みについて深く調べる場合、まずはドキュメントを参照します。
-
-#### Web開発者向けの有名なドキュメント
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), [Firefox](https://www.mozilla.org/firefox/) の発行元である Mozilla から
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), [Chrome](https://www.google.com/chrome/) の発行元である Google から
-- [Microsoft 独自の開発者向けドキュメント](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge) の場合
-
-✅ Web開発者の開発環境の基礎を理解したところで、Webデザイナーの開発環境との違いを見てみましょう。
-
----
-
-## 🚀 チャレンジ
-
-いくつかのプログラミング言語について比較してみましょう。
-JavaScriptとJavaの特徴は？
-COBOLとGoについては？
-
-## 事後テスト
-[事後テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ja)
-
-## レビュー & 自習
-
-プログラマーが利用できる様々な言語について、少しだけかじってみましょう。
-ひとつの言語で1行書いて実行したら、次は別のふたつの言語で同じことをやってみてください。
-なにかわかりましたか？
-
-## 課題
-
-[ドキュメントを読む](assignment.ja.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md
deleted file mode 100644
index ad19c7f9..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ko.md
+++ /dev/null
@@ -1,194 +0,0 @@
-# 프로그래밍 언어 및 도구 소개
-
-이 강의에서는 프로그래밍 언어의 기초를 다룹니다. 여기에서 다루는 주제는 오늘 날 많은 최신 프로그래밍 언어에 적용됩니다. 'Tools of the Trade' 세션에서는 개발자에게 도움이 되는 유용한 소프트웨어에 대해 알아보겠습니다.
-
-![Intro Programming](/sketchnotes/webdev101-programming.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 강의 전 퀴즈
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ko)
-
-## 소개
-
-이 강의에서 다음 내용을 다룹니다.
-
-- 프로그래밍이란?
-- 프로그래밍 언어의 타입
-- 프로그램의 기본 요소
-- 전문적인 개발자를 위한 유용한 소프트웨어와 도구
-
-## 프로그래밍이란?
-
-프로그래밍(코딩)은 컴퓨터 또는 모바일에 명령을 내리는 프로세스입니다. 프로그래밍 언어로 명령어를 작성한 후 장치에서 해석합니다. 이러한 명령어 세트는 다양한 이름으로 참조 될 수 있지만 *program*, *computer program*, *application (app)*, 그리고 *executable* 로도 인기있는 이름입니다.
-
-*program*은 코드로 작성된 모든 것이 될 수 있습니다; 웹 사이트, 게임과 전화 앱도 프로그램입니다. 코드를 작성하지 않고 프로그램을 만들 수는 있지만, 기본 로직은 장치로 해석되며 코드로 작성되었을 가능성이 높습니다. *running* 또는 *executing code* 프로그램이 명령을 수행하고 있습니다. 현재 이 강의를 읽고있는 장치는 화면에 출력하는 프로그램을 실행하고 있습니다.
-
-✅ 약간의 조사를 해보세요: 세계 최초의 컴퓨터 프로그래머는 누구일까요?
-
-## 프로그래밍 언어
-
-프로그래밍 언어는 개발자가 기기에 보낼 명령어를 빌드할 때 사용됩니다. 장치는 바이너리(0과 1)만 이해할 수 있으며, *대부분* 개발자에게는 매우 효율적인 통신 방법이 아닙니다. 프로그래밍 언어는 인간과 컴퓨터의 소통을 위한 방법입니다.
-
-프로그래밍 언어는 각자 다른 형식으로 제공되며 다른 용도로 사용될 수 있습니다. 예를 들어 JavaScript는 주로 웹 애플리케이션에 사용되지만, Bash는 주로 운영체제에서 사용됩니다.
-
-*저레벨 언어*는 일반적으로 기기에서 명령을 해석할 때 *고수준 언어*보다 적은 단계로 할 수 있습니다. 그러나 고수준 언어가 인기있는 이유는 가독성과 지원입니다. JavaScript는 고수준 언어로 간주됩니다.
-
-다음 코드는 JavaScript를 사용하는 고수준 언어와 ARM 어셈블리 코드를 사용하는 저수준 언어의 차이점을 보여줍니다.
-
-```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-안 믿어도 되지만, *두 언어는 같은 일을 하고 있습니다* : 피보나치 수열을 최대 10개까지 출력합니다.
-
-✅ 피보나치 수열은 각 숫자가 0과 1에서 시작하는 앞의 두 숫자의 합이되는 숫자의 집합으로 [정의](https://en.wikipedia.org/wiki/Fibonacci_number)됩니다.
-
-## 프로그램의 요소
-
-프로그램의 단일 명령어를 *statement*라고 불리며, 일반적으로 명령어가 끝나거나 *terminates*되는 위치를 표시하는 문자 또는 줄 간격이 있습니다. 프로그램 종료 방법은 언어마다 다릅니다.
-
-대부분의 프로그램은 명령을 수행하기 위해 명령문을 데이터에 의존 할 수 있는 사용자 또는 다른 곳의 데이터 사용에 의존합니다. 데이터는 프로그램의 작동 방식을 변경할 수 있으므로 프로그래밍 언어에서 나중에 사용할 수 있는 데이터를 임시 저장하도록 제공합니다. 이 데이터를 *변수*라고 불립니다. 변수는 메모리에 데이터를 저장하도록 장치에 지시하는 명령입니다. 프로그램의 변수는 고유 이름을 가지며, 시간이 지남에 따라 값이 변경 될 수 있는 대수학의 변수와 유사합니다.
-
-일부 구문이 장치에서 실행되지 않을 가능성이 있습니다. 이는 일반적으로 개발자가 코드 작성할 때 의도적으로 설계되었거나, 오류가 발생할 때 우연히 발생합니다. 이러한 유형의 애플리케이션 제어는 더 강력하게 유지될 수 ​​있도록 합니다. 일반적으로 제어를 변경하려면 특정 조건이 충족되는 순간에 발생합니다. 프로그램 실행 방법을 제어하는 ​​최신 프로그래밍 언어의 일반적인 구문은`if..else` 구문입니다.
-
-✅ 이후 강의에서 이러한 구문의 타입에 대해 자세히 알아볼 것입니다.
-
-## Tools of the Trade
-
-[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
-
-이 세션에서는 전문적인 개발 여정을 떠날 때 매우 유용할 수 있는 일부 소프트웨어에 대해 알아봅니다.
-
-**개발 환경**은 개발자가 소프트웨어를 작성할 때 자주 사용하는 도구 및 기능 집합입니다. 이러한 도구 중 일부는 개발자의 특정 요구에 맞게 변경되었으며, 개발자가 작업 또는 개인 프로젝트에서 우선 순위를 변경하거나 다른 프로그래밍 언어를 사용할 때 시간이 지남에 따라 변경 될 수 있습니다. 개발 환경은 이를 사용하는 개발자만큼 독특합니다.
-
-### 에디터
-
-소프트웨어 개발을 위한 가장 중요한 도구 중 하나는 에디터입니다. 에디터는 코드를 작성하고 때로는 코드를 실행하는 곳입니다.
-
-개발자는 몇 가지 추가 이유로 에디터에 의존합니다.
-
-- *디버깅* 코드를 한 줄씩 단계별로 실행하여 버그와 오류를 발견합니다. 일부 에디터에는 디버깅 기능이 있거나, 특정 프로그래밍 언어에 맞게 변경하거나 추가할 수 있습니다.
-- *Syntax highlighting* 코드에 색상 및 텍스트 서식을 추가하여 읽기 쉽게 만듭니다. 대부분 에디터에는 Syntax highlighting을 허용합니다.
-- *확장 및 통합* 기본 에디터에는 없는 추가 도구에 접근하기 위해 개발자를 위한 전문화된 추가 기능입니다. 예를 들어, 많은 개발자는 코드를 문서화하고 작동 방식을 설명하는 방법이 필요하며 오타를 확인하기 위해 맞춤법 검사 확장 프로그램을 설치합니다. 이러한 추가 기능의 대부분은 특정 에디터 내에서 사용하기 위한 것이며, 대부분의 에디터는 사용 가능한 확장 검색을 제공합니다.
-- *커스터마이즈* 대부분의 에디터는 커스터마이즈가 가능하며 각 개발자는 자신이 필요한 개발 환경을 가지게 됩니다. 또한 많은 개발자가 자신의 확장을 만들 수 있습니다.
-
-#### 인기있는 에디터와 웹 개발 확장
-
-- [Visual Studio Code](https://code.visualstudio.com/)
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
-  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Atom](https://atom.io/)
-  - [spell-check](https://atom.io/packages/spell-check)
-  - [teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-
-### 브라우저
-
-또 다른 중요 도구는 브라우저입니다. 웹 개발자는 웹에서 코드가 어떻게 실행되는지 보기 위해 브라우저에 의존하며, HTML과 같은 에디터에서 작성된 웹 페이지의 시각적 요소를 보는데도 사용됩니다.
-
-많은 브라우저에는 개발자가 애플리케이션에 대한 중요한 인사이트를 수집하고 잡아내는 것에 도움이 되는 유용한 기능 및 정보가 포함된 *개발자 도구* (DevTools)가 함께 제공됩니다. 예시: 웹 페이지에 오류가 있는 경우, 오류가 발생한 시기를 아는 것이 도움될 때가 있습니다. 이 정보를 잡을 수 있도록 브라우저의 DevTools를 구성 할 수 있습니다.
-
-#### 인기있는 브라우저와 DevTools
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### Command Line 도구
-
-일부 개발자는 일상적인 작업에 그래픽 작업을 덜 하기 위해 Command Line에 의존합니다. 코드를 개발하려면 상당한 양의 코드 타이핑이 필요하며, 일부 개발자는 키보드의 흐름을 방해하지 않는 것을 선호하므로 키보드 단축키를 사용하여 데스크톱 창을 전환하여 다른 파일에서 작업하거나, 도구를 사용합니다. 대부분 작업은 마우스로 완료할 수 있지만, Command Line을 사용하는 한 가지 이점은 마우스와 키보드를 서로 바꾸지 않고도 Command Line 도구로 많은 작업을 수행할 수 있다는 것입니다. Command Line의 또 다른 이점은 사용자 지정 구성을 저장하고, 나중에 변경하거나 새 컴퓨터로 개발 할 때 그대로 가져올 수도 있다는 것입니다. 개발 환경은 각 개발자마다 다르기  때문에 일부는 Command Line 사용을 피하고 일부는 전적으로 의존하며 일부는 두 가지를 혼용하여 사용하는 것을 선호합니다.
-
-### 인기 있는 Command Line 옵션
-
-command line 옵션은 사용하는 운영체제에 따라 다릅니다.
-
-*💻 = 운영체제에 사전 설치되어 있습니다.*
-
-#### 윈도우즈
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [mintty](https://mintty.github.io/)
-  
-#### 맥OS
-
-- [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-77807-sagibbon)
-
-#### 리눅스
-
-- [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-77807-sagibbon)
-
-#### 인기있는 Command Line 도구
-
-- [Git](https://git-scm.com/) (💻 on most operating sytems)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### 문서
-
-개발자가 새로운 것을 배우고 싶거나, 방식을 알기 위해 문서를 찾을 가능성이 높습니다. 개발자는 종종 문서에 의존하여 도구와 언어를 올바르게 사용하는 방법을 안내하고, 작동 방식에 대한 더 깊은 지식을 얻습니다.
-
-#### 웹 개발의 인기있는 문서
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), Mozilla, [Firefox](https://www.mozilla.org/firefox/) 게시자
-- [Frontend Masters](https://frontendmasters.com/learn/)
--[Web.dev](https://web.dev), Google의 [Chrome](https://www.google.com/chrome/) 게시자
--[Microsoft 자체 개발자 문서](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), [Microsoft Edge](https://www.microsoft.com/edge) 용 
-
-✅ 약간의 조사를 해보세요: 이제 웹 개발자 환경의 기본 사항을 알았으므로, 웹 디자이너 환경과 비교하고 대조하십시오.
-
----
-
-## 🚀 도전
-
-일부 프로그래밍 언어를 비교하십시오. JavaScript와 자바의 특징은 무엇입니까? COBOL과 Go는 어떻습니까?
-
-## 강의 후 퀴즈
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-프로그래머가 사용할 수 있는 다른 언어에 대해 조금 공부하십시오. 한 언어로 한 줄을 쓴 다음, 다른 언어로 다시 실행하십시오. 무엇을 배우나요?
-
-## 과제 
-
-[Reading the Docs](../assignment.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md
deleted file mode 100644
index 18b02e41..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ms.md
+++ /dev/null
@@ -1,192 +0,0 @@
-# Pengenalan Bahasa Pengaturcaraan dan Alat Perdagangan
-
-Pelajaran ini merangkumi asas bahasa pengaturcaraan. Topik yang anda akan belajar di sini dapat mengaplikasikan untuk kebanyakan bahasa pengaturcaraan moden hari ini. Pada bahagian 'Alat Perdagangan', anda akan belajar bagaimana mengenai perisian berguna yang membantu anda sebagai pembangun.
-
-![Intro Programming](/sketchnotes/webdev101-programming.png)
-> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuiz Pra-Kuliah
-[Kuiz Pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
-
-## Pengenalan
-
-Dalam bab ini, kita akan belajar:
-
-- Apa itu pengaturcaraan?
-- Jenis bahasa pengaturcaraan
-- Elemen asas program
-- Perisian dan perkakas yang berguna untuk pembangun profesional
-
-## Apa itu pengaturcaraan?
-
-Pengaturcaraan (juga dikenali sebagai pengekodan) adalah proses menulis arahan ke peranti, seperti komputer atau peranti mudah alih. Kami menulis arahan ini dengan bahasa pengaturcaraan, yang kemudian ditafsirkan oleh peranti. Set arahan ini dapat disebut dengan pelbagai nama, tetapi *program*, *program komputer*, *aplikasi (app)*, dan *boleh dilaksanakan* ialah beberapa nama yang popular.
-
-*Program* boleh menjadi apa-apa sahaja yang ditulis dengan kod; laman web, permainan, dan aplikasi telefon adalah program. Walaupun mungkin kita boleh membuat program tanpa menulis kod, logik yang mendasari ditafsirkan ke peranti dan logik itu kemungkinan besar ditulis dengan kod. Program yang *melaksanakan kod* ialah dedefinisikan sebagai program yang sedang menjalankan arahan. Peranti yang anda sedang gunakan untuk membaca pelajaran ini sedang menjalankan program sendiri untuk mencetakkan pada skrin anda.
-
-✅ Lakukan sedikit pengajian: siapakah yang dianggap sebagai pengaturcara komputer pertama di dunia?
-
-## Bahasa Pengaturcaraan
-
-Bahasa pengaturcaraan berfungsi untuk tujuan utama: bagi pembangun untuk membina arahan untuk menghantar ke peranti. Peranti hanya dapat memahami binari (1s dan 0s), dan *untuk  kebanyakan* pembangun itu bukan kaedah yang sangat efisien untuk berkomunikasi. Bahasa pengaturcaraan adalah wahana berkomunikasi antara manusia dan komputer.
-
-Bahasa pengaturcaraan terdapat dalam format-format yang berbeza dan mungkin mempunyai tujuan yang berbeza. Sebagai contoh, ('JavaScript') digunakan terutamanya untuk aplikasi web dan ('Bash') digunakan terutamanya untuk sistem operasi.
-
-*Bahasa tahap rendah* biasanya memerlukan langkah yang lebih sedikit berbanding daripada *bahasa tahap tinggi* agar peranti dapat menafsirkan arahan. Walau bagaimanapun, apa yang menjadikan bahasa peringkat tinggi menjadi popular adalah kebolehbacaan dan sokongannya. ('JavaScript') dianggap bahasa tahap tinggi.
-
-Kod berikut akan menggambarkan perbezaan antara bahasa tahap tinggi dengan ('JavaScript') dan bahasa tahap rendah dengan kod pemasangan ARM.
-
-```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-Percaya atau tidak, *mereka berdua melakukan perkara yang sama*: mencetak urutan Fibonacci hingga 10.
-
-✅ Urutan Fibonacci [didefinisikan] (https://en.wikipedia.org/wiki/Fibonacci_number) sebagai satu set nombor sehingga setiap nombor adalah jumlah dari dua nombor sebelumnya, bermula dari 0 dan 1.
-
-## Elemen Asas Program
-
-Satu arahan dalam program dipanggil *pernyataan* dan biasanya akan mempunyai watak atau jarak baris yang menandakan di mana arahan itu berakhir, atau *diterminasikan*. Bagaimanakah program ditamatkan berbeza-beza dengan setiap bahasa.
-
-Sebilangan besar program bergantung pada penggunaan data dari pengguna atau di tempat lain, di mana pernyataan mungkin bergantung pada data untuk melaksanakan arahan. Data dapat mengubah bagaimana program berperilaku, sehingga bahasa pengaturcaraan dilengkapi dengan cara untuk menyimpan data sementara yang dapat digunakan kemudian. Data ini dipanggil *pemboleh ubah* (*Variable*). Pemboleh ubah ialah pernyataan yang memerintahkan peranti menyimpan data dalam ingatannya. Pemboleh ubah dalam program serupa dengan ('algebra'), di mana mereka mempunyai nama yang unik dan nilainya mungkin berubah dari semasa ke semasa.
-
-Ada kemungkinan beberapa penyataan tidak akan dilaksanakan oleh peranti. Ini biasanya berdasarkan reka bentuk apabila ditulis oleh pembangun atau secara tidak sengaja apabila berlaku kesalahan yang tidak dijangka. Jenis kawalan aplikasi ini menjadikannya lebih mantap dan dapat dikendalikan. Biasanya perubahan kawalan ini berlaku apabila keputusan tertentu dipenuhi. Pernyataan umum dalam bahasa pengaturcaraan moden untuk mengawal bagaimana program dijalankan adalah pernyataan `if..else`.
-
-✅ Anda akan belajar lebih mendalam tentang jenis pernyataan ini dalam pelajaran seterusnya
-
-## Alat Perdagangan
-
-[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
-
-Dalam bahagian ini, anda akan belajar tentang beberapa perisian yang mungkin berguna bagi anda semasa memulakan perjalanan pengembangan profesional anda.
-
-**Persekitaran pengembangan** ('development enviroment') ialah sekumpulan alat dan ciri unik yang sering digunakan oleh pembangun semasa menulis perisian. Sebilangan alat ini telah disesuaikan untuk keperluan khusus pembangun, dan mungkin berubah dari masa ke masa jika pembangun mengubah keutamaan dalam kerja atau projek peribadi, atau ketika mereka menggunakan bahasa pengaturcaraan yang berbeda. Persekitaran pembangunan sama uniknya dengan pemaju yang menggunakannya.
-
-### Editor
-
-Salah satu alat yang paling penting untuk pembangunan perisian adalah ('editor'). ('Editor') ialah tempat anda menulis kod anda dan kadang kala anda akan menjalankan kod anda.
-
-Pembangun bergantung pada editor untuk beberapa sebab tambahan:
-
-- *Debugging* Mencari bug dan kesilapan dengan melangkah ke kod, baris demi baris. Beberapa editor mempunyai kemampuan debug, atau dapat disesuaikan dan ditambahkan untuk bahasa pengaturcaraan tertentu.
-- *Penyorotan sintaks* Menambah warna dan format teks ke kod, menjadikannya lebih mudah dibaca. Sebilangan besar editor membenarkan penyorotan sintaks yang disesuaikan.
-- *Sambungan dan Integrasi* Penambahan yang dikhususkan untuk pembangun, oleh pemaju, untuk akses ke alat tambahan yang tidak terdapat dalam penyunting asas. Sebagai contoh, banyak pembangun juga memerlukan cara untuk mendokumentasikan kod mereka dan menerangkan cara kerjanya dan akan memasang pelanjutan pemeriksaan ejaan untuk memeriksa kesalahan ketik. Sebilangan besar penambahan ini dimaksudkan untuk digunakan dalam editor tertentu, dan kebanyakan editor datang dengan cara untuk mencari sambungan yang tersedia.
-- *Penyesuaian* Sebilangan besar editor sangat disesuaikan, dan setiap pembangun akan mempunyai persekitaran pembangunan unik mereka sendiri yang sesuai dengan keperluan mereka. Banyak juga yang membenarkan pembangun membuat peluasan mereka sendiri.
-
-- [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)
-
-### Penyemak Imbas
-
- Alat penting lain ialah penyemak imbas. Pembangun web bergantung pada penyemak imbas untuk melihat bagaimana kod mereka berjalan di web, ia juga digunakan untuk melihat elemen visual dari laman web yang ditulis dalam editor, seperti HTML.
-
- Banyak penyemak imbas dilengkapi dengan *developer tools* (DevTools) yang mengandungi sekumpulan ciri dan maklumat berguna untuk membantu pembangun mengumpulkan dan menangkap pandangan penting mengenai aplikasinya. Contohnya: Sekiranya halaman web mempunyai kesilapan, kadang-kadang bermanfaat untuk mengetahui kapan halaman tersebut berlaku. DevTools dalam penyemak imbas boleh dikonfigurasi untuk menangkap maklumat ini.
-
-### Penyemak Imbas Popular dan DevTools
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### Alat Command Line
-
-Sebahagian pembangun lebih suka paparan yang kurang grafik untuk tugas harian mereka dan bergantung kepada baris perintah untuk mencapainya. Membangunkan kod memerlukan sebilangan besar menaip, dan sebilangan pembangun memilih untuk tidak mengganggu aliran mereka pada papan kekunci dan akan menggunakan pintasan papan kekunci untuk menukar antara tetingkap desktop, mengerjakan fail yang berbeza, dan menggunakan alat. Sebilangan besar tugas dapat diselesaikan dengan tetikus, tetapi satu manfaat menggunakan baris perintah adalah banyak yang dapat dilakukan dengan alat baris perintah tanpa perlu menukar antara tetikus dan papan kekunci. Manfaat yang lain daripada baris perintah ialah mereka boleh dikonfigurasi dan anda dapat menukar konfigurasi yang sesuai untuk anda, mengubahnya kemudian, dan juga mengimportnya ke mesin pengembangan baru. Kerana persekitaran pembangunan sangat unik bagi setiap pembangun, ada yang akan menghindari penggunaan baris perintah, ada yang akan bergantung sepenuhnya, dan ada yang lebih suka gabungan kedua-duanya.
-
-### Pilihan Command Line Popular
-
-Pilihan untuk ('command line') akan berbeza berdasarkan sistem operasi yang anda mengguna.
-
-*💻 = sudah dimuat turun dalam sistem operasi.*
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands) (Juga dikenali sebagai CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/)
-- [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)
-
-#### 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)
-
-#### Popular Command Line Tools
-
-- [Git](https://git-scm.com/) (💻 Dimuat turun pada kebanyakkan sistem operasi)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### Dokumentasi
-
-Apabila pembangun ingin mempelajari sesuatu yang baru, kemungkinan besar mereka akan beralih ke dokumentasi untuk mengetahui cara menggunakannya. Pembangun sering bergantung pada dokumentasi untuk membimbing mereka bagaimana menggunakan alat dan bahasa dengan betul, dan juga untuk mendapatkan pengetahuan yang lebih mendalam tentang cara ia berfungsi.
-
-#### Dokumentasi Popular untuk Pembangunan Web
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), dari Mozilla, penerbit [Firefox](https://www.mozilla.org/firefox/)
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), dari Google, penerbit [Chrome](https://www.google.com/chrome/)
-- [Dokumen pembangun Microsoft sendiri](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), untuk [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ Lakukan penyelidikan: Sekarang setelah anda mengetahui asas-asas persekitaran pembangun web, membandingkan dan membezakannya dengan persekitaran pereka web.
-
----
-
-## 🚀 Cabaran
-
-Bandingkan beberapa bahasa pengaturcaraan. Apa ciri unik JavaScript berbanding dengan Java? Bagaimanakah dengan COBOL vs. Go?
-
-## Kuiz Pasca Kuliah
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
-
-## Mengkaji sendiri & Belajar sendiri
-
-Belajar sedikit mengenai bahasa yang disediakan untuk pengaturcara. Cuba menulis baris dalam satu bahasa pengaturcaraan, dan kemudian membuat semula dalam dua bahasa pengaturcaraan lain. Apakah yang anda pelajari?
-
-## Tugasan
-
-[Membaca Dokumentasi](assignment.ms.md)
\ No newline at end of file
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md
deleted file mode 100644
index fd5e3f95..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.nl.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# Introductie van Programmeertalen en Bijbehorend Vakgereedschap
-
-Deze les beschrijft de basis over programmeertalen. De onderwerpen zijn van toepassing op de meeste hedendaagse programeertalen. In het 'Vakgereedschap' onderdeel leert u over nuttige toepassingen die u helpen als web ontwikkelaar.
-
-![Introductie Programmeren](/sketchnotes/webdev101-programming.png)
-> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Pre-Lecture Quiz
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
-
-## Introductie
-
-In deze les hebben we het over:
-
-- Wat is programmeren?
-- Verschillende typen programmeertalen.
-- Basis elementen van een programma.
-- Nuttige toepassingen en gereedschap voor de professionele web ontwikkelaar.
-
-## Wat is programmeren?
-
-Programmeren (ook wel coderen genoemd) is het process van het schrijven van instructies voor een apparaat, zoals een computer of een mobieltje. We schrijven deze instructies met een programmeertaal, welke wordt geinterpreteerd door het apparaat. Deze sets van instructies staan bekend onder verschillende namen zoals; *programma*, *computer programma*, *applicatie (app)*, *script* en *executable*.
-
-Een *programma* kan van alles zijn wat met code is geschreven; websites, spellen, en mobiele apps zijn programmas. Hoewel het mogelijk is om een programma te maken zonder code te schrijven, is de onderliggende logica, dat wordt geinterpreteerd door het apparaat, hoogstwaarschijnlijk wel geschreven met code. Een programma dat *draait* of *code uitvoert* voert instructies uit. Het apparaat wat u nu gebruikt om deze les te volgen draait een programma om deze tekst op het scherm te tonen.
-
-✅ Doe wat onderzoek: wie wordt gezien als werelds eerste computer programmeur?
-
-## Programmeertalen
-
-Programmeertalen hebben maar één hoofddoel: het voor ontwikkelaars mogelijk maken om instructies te sturen naar een apparaat. Apparaten begrijpen slechts binaire instructies (1-en en 0-en), en voor de meeste ontwikkelaars is dit niet een erg efficiënte manier om instructies te schrijven. Programmeertalen zijn daarom een mooi communicatiemiddel tussen mensen en computers.
-
-Programmeertalen zijn er in verschillende uitvoeringen en hebben soms specifieke doeleinden. JavaScript wordt bijvoorbeeld voornamelijk gebruikt voor webapplicaties terwijl Bash hoofdzakelijk wordt gebruikt voor besturingssystemen.
-
-*Lagere programmertalen* hebben over het algemeen minder stappen nodig dan *hogere programmeertalen* om door een apparaat geinterpreteerd te worden. Hogere programmeertalen zijn echter populairder omdat ze veel leesbaarder zijn. Een voorbeeld van een hogere programmeertaal is JavaScript.
-
-Het volgende codevoorbeeld laat het verschil zien tussen een hogere (JavaScript) en een lagere (ARM assembly) programeertaal.
-
-```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
-```
-
-Geloof het of niet, maar beide codevoorbeelden *doen exact hetzelfde*: het printen van een Fibonacci reeks tot en met het tiende getal.
-
-✅ Een Fibonacci reeks is [gedefinieerd](https://nl.wikipedia.org/wiki/Rij_van_Fibonacci) als een set van getallen waarvan elk getal de som is van de vorige twee getallen, beginnend met 0 en 1.
-
-## Elementen van een programma
-
-Een enkele instructie in een programma wordt ook wel *statement* genoemd en bevat vaak een karakter of witruimte om aan te geven waar de instructie begint en eindigt. Hoe een programma eindigt varieert per programmertaal.
-
-De meeste programma's zijn afhankelijk van gegevens, die ofwel door een gebruiker wordt ingevoerd, ofwel ergens vandaan wordt gehaald. De statements zijn afhankelijk van deze data om instructies uit te voeren. Data is van invloed hoe een programma reageert. Daarom hebben programmeertalen een manier om tijdelijk data op te slaan wat later weer gebruikt wordt. Deze data wordt ook wel *variabelen* genoemd. Variabelen zijn statements die een apparaat een instructie geven om de data op te slaan in het geheugen van het apparaat. Variabelen in programma's zijn gelijkwaardig aan hun tegenhanger in algebra. Ook daar hebben variabelen een unieke naam en kan de waarde veranderen in de loop der tijd.
-
-Niet alle statements in een programma worden altijd uitgevoerd. Dit is meestal zo bedacht door de ontwikkelaar of het treed onbedoeld op bij onverwachte fouten. Het is een vorm van controle in een applicatie, dat het robuuster en onderhoudbaarder maakt. De keuze in welke statements worden uitgevoerd hangt vaak af van de data en of dit voldoet aan bepaalde condities. Een veelvoorkomend statement in een moderne programmeertaal om de controle van een programma te beïnvloeden is het `if..else` statement.
-
-✅ U leert meer over het `if..else` statement in de volgende lessen.
-
-## Vakgereedschap
-
-[![Vakgereedschap](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Vakgereedschap")
-
-In dit onderdeel leert u welke applicaties u wellicht handig vindt om mee te werken als u uw professionele web ontwikkelaar carrière start.
-
-Een **ontwikkelomgeving** is een unieke set van applicaties wat een ontwikkelaar regelmatig gebruikt om software te schrijven. Sommige van deze applicaties zijn aangepast voor de specifieke eisen die de ontwikkelaar heeft en kunnen veranderen over de tijd. Dit kan te maken hebben met het type werk wat de ontwikkelaar uitvoert, bijvoorbeeld persoonlijke projecten versus projecten voor werk, of als er een andere programmeertaal moet worden gebruikt. Ontwikkelomgevingen zijn zo uniek als de ontwikkelaars die ze gebruiken.
-
-### Editors
-
-Een van de meest cruciale applicaties voor software ontwikkeling is de code editor. In een editor schrijft u uw code en soms runt u daar ook uw code.
-
-Ontwikkelaars gebruiken editors ook om de volgende redenen:
-
-- *Debugging* Het regel voor regel runnen van uw code om bugs te ontdekken. Sommige editors hebben debugging mogelijkheden, of kunnen aangepast worden voor specifieke programmeertalen.
-- *Syntax markering* Voegt kleuren en tekst opmaak toe aan code om het leesbaarder te maken. De meeste editors hebben de mogelijkheid om dit aan te passen naar uw eigen smaak.  
-- *Extensies en Integraties* Uitbreidingen van de editor, speciaal voor ontwikkelaars en gemaakt door ontwikkelaars, om extra functionaliteiten toe te voegen die standaard niet in de editor inzitten. Bijvoorbeeld een spellingscontrole extensie wat documentatie kan controleren op spelfouten. Vaak zijn extensies ontwikkeld voor een specifieke code editor. De meeste editors bieden een zoekfunctie om relevante extensies te vinden.
-- *Persoonlijke instellingen* De meeste editors hebben instellingen die volledig aan te passen zijn naar de wens van de ontwikkelaar. Elke ontwikkelaar zal daarom een unieke ontwikkelomgeving hebben wat voldoet aan hun specifieke wensen.
-
-#### Populaire Editors en Web Ontwikkeling Extensies
-
-- [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
-
-Nog een zeer belangrijke applicatie is de webbrowser. Web ontwikkelaars zijn afhankelijk van de browser om na te gaan hoe hun code draait op het web. De browser wordt ook gebruikt om de visuele elementen van een web pagina weer te geven die geschreven zijn in de editor, zoals HTML.  
-
-Veel browsers hebben ingebouwd *ontwikkel gereedschap* (DevTools) waarmee ontwikkelaars makkelijk inzicht kunnen krijgen over hun applicatie. Bijvoorbeeld: als een webpagina fouten heeft, is het handig om te weten wanneer die fouten zijn opgetreden. In zo'n situatie kan DevTools kan geconfigureerd worden om deze informatie te verzamelen.
-
-#### Populaire Browsers en DevTools
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### Command Line Applicaties
-
-Sommige ontwikkelaars hebben de voorkeur om minder grafische applicaties te gebruiken voor hun dagelijks werk. Zij gebruiken *command line applicaties* om hun werk te doen. Voor het schrijven van code is veel typewerk nodig, en aangezien sommige ontwikkelaars niet teveel afgeleid willen worden in hun keyboardgebruik maken zij daarom gebruik van keyboard shortcuts om bijvoorbeeld met verschillende bestanden te werken en tussen applicaties te wisselen. De meeste taken kunnen met een muis worden uitgevoerd, maar één van de voordelen van de command line is dat u heel veel kunt doen zonder te wisselen van keyboard en muis. Een bijkomend voordeel is dat command line applicaties aanpasbaar zijn en u deze naar wens kunt instellen. De instellingen kunnen opgeslagen worden op een andere computer weer herbruikt worden. Omdat elke ontwikkelaar een andere voorkeur heeft qua ontwikkelomgeving, gebruiken sommigen de command line nooit, sommigen doen juist alles ermee, en anderen gebruiken zowel de command line als grafische applicaties.
-
-### Populaire Command Lines
-
-Beschikbaarheid van command lines verschilt op basis van het besturingssysteem wat u gebruikt.
-
-*💻 = is geïnstalleerd met het besturingssysteem.*
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (ook bekend als CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### Populaire Command Line Applicaties
-
-- [Git](https://git-scm.com/) (💻 op de meeste besturingssystemen)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### Documentatie
-
-Wanneer een ontwikkelaar iets nieuws wil leren dan zullen ze waarschijnlijk de bijbehorende documentatie (Docs) raadplegen. Ontwikkelaars zijn erg afhankelijk van goede documentatie, wat hun verder helpt om nieuwe programmeertalen of applicaties te gebruiken waardoor ze een beter inzicht krijgen hoe dit toe te passen in hun dagelijks werk.
-
-#### Populaire Documentatie over Web Ontwikkeling
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), van Mozilla, uitgevers van [Firefox](https://www.mozilla.org/firefox/)
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), van Google, uitgevers van [Chrome](https://www.google.com/chrome/)
-- [eigen ontwikkelaarsdocumenten van Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), voor [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ Doe wat onderzoek: Nu u de basis weet van de omgeving van een web ontwikkelaar, probeer eens uit te zoeken in hoeverre dit verschilt van een omgeving voor een web designer.
-
----
-
-## 🚀 Uitdaging
-
-Vergelijk wat programmeertalen. Wat zijn unieke kenmerken van JavaScript vs. Java. En het verschil tussen COBOL en Go?
-
-## Post-Lecture Quiz
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
-
-## Review & Zelfstudie
-
-Bestudeer wat voor verschillende programmeertalen er zijn. Zoek in 3 talen een 'Hello World' voorbeeld op. Zo krijgt u een goed idee wat er voor nodig is om tekst in de browser te tonen.
-
-## Opdracht
-
-[Lees de documentatie](../assignment.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.np.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.np.md
deleted file mode 100644
index b0f811ae..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.np.md
+++ /dev/null
@@ -1,97 +0,0 @@
-# प्रोग्रामिङ भाषाहरू र व्यापारका उपकरणहरूको परिचय
-
-यो पाठले प्रोग्रामिङ भाषाहरूको आधारभूत कुराहरू समेट्छ। यहाँ समेटिएका विषयहरू आजका अधिकांश आधुनिक प्रोग्रामिङ भाषाहरूमा लागू हुन्छन्। 'व्यापारका उपकरणहरू' खण्डमा, तपाईंले विकासकर्ताको रूपमा मद्दत गर्ने उपयोगी सफ्टवेयरको बारेमा सिक्नुहुनेछ।
-
-![Intro Programming](../../../sketchnotes/webdev101-programming.png)
-> [Tomomi Imura](https://twitter.com/girlie_mac) द्वारा स्केचनोट
-
-## प्रि-लेक्चर क्विज
-[प्री-लेक्चर क्विज](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/1)
-
-## परिचय
-
-यस पाठमा, हामी कभर गर्नेछौं:
-
-- प्रोग्रामिङ भनेको के हो?
-- प्रोग्रामिङ भाषाहरूको प्रकार
-- कार्यक्रमको आधारभूत तत्वहरू
-- व्यावसायिक विकासकर्ताको लागि उपयोगी सफ्टवेयर र उपकरण
-
-> तपाईंले [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) मा यो पाठ लिन सक्नुहुन्छ!
-
-## प्रोग्रामिङ भनेको के हो?
-
-प्रोग्रामिङ (कोडिङ पनि भनिन्छ) कम्प्युटर वा मोबाइल उपकरण जस्ता उपकरणका लागि निर्देशनहरू लेख्ने प्रक्रिया हो। हामी यी निर्देशनहरू प्रोग्रामिङ भाषाको साथ लेख्छौं, जुन त्यसपछि उपकरणद्वारा व्याख्या गरिन्छ। निर्देशनहरूको यी सेटहरू विभिन्न नामहरूद्वारा उल्लेख गर्न सकिन्छ, तर *कार्यक्रम*, *कम्प्युटर प्रोग्राम*, *एप्लिकेशन (एप)*, र *कार्यान्वयनयोग्य* केही लोकप्रिय नामहरू हुन्।
-
-एक *कार्यक्रम* कोड संग लेखिएको कुनै पनि हुन सक्छ; वेबसाइटहरू, खेलहरू, र फोन एपहरू कार्यक्रमहरू हुन्। कोड नलिइकन एउटा कार्यक्रम सिर्जना गर्न सम्भव भए पनि, अन्तर्निहित तर्कलाई यन्त्रद्वारा व्याख्या गरिन्छ र त्यो तर्क सम्भवतः कोडसँग लेखिएको थियो। एउटा प्रोग्राम जुन * चलिरहेको * वा * कार्यान्वयन * कोड निर्देशनहरू पूरा गर्दैछ। तपाईंले यो पाठ पढिरहनुभएको यन्त्रले यसलाई तपाईंको स्क्रिनमा प्रिन्ट गर्नको लागि एउटा कार्यक्रम चलाउँदैछ।
-
-✅ थोरै अनुसन्धान गर्नुहोस्: संसारको पहिलो कम्प्युटर प्रोग्रामर कसलाई मानिन्छ?
-
-## प्रोग्रामिङ भाषाहरू
-
-प्रोग्रामिङ भाषाहरूले विकासकर्ताहरूलाई उपकरणको लागि निर्देशनहरू लेख्न सक्षम बनाउँछन्। यन्त्रहरूले बाइनरी (1s र 0s) मात्र बुझ्न सक्छन्, र *धेरै* विकासकर्ताहरूका लागि यो सञ्चार गर्ने एकदमै प्रभावकारी तरिका होइन। प्रोग्रामिङ भाषाहरू मानिसहरू र कम्प्युटरहरू बीच सञ्चारको माध्यम हो।
-
-प्रोग्रामिङ भाषाहरू विभिन्न ढाँचाहरूमा आउँछन् र विभिन्न उद्देश्यहरू पूरा गर्न सक्छन्। उदाहरणका लागि, जाभास्क्रिप्ट मुख्यतया वेब अनुप्रयोगहरूको लागि प्रयोग गरिन्छ, जबकि Bash मुख्य रूपमा अपरेटिङ सिस्टमहरूको लागि प्रयोग गरिन्छ।
-
-*निम्न स्तरका भाषाहरू* लाई निर्देशनहरू व्याख्या गर्न यन्त्रको लागि *उच्च स्तरका भाषाहरू* भन्दा कम चरणहरू चाहिन्छ। यद्यपि, उच्च स्तरका भाषाहरूलाई लोकप्रिय बनाउने कुरा भनेको तिनीहरूको पठनीयता र समर्थन हो। जाभास्क्रिप्टलाई उच्च स्तरको भाषा मानिन्छ।
-
-निम्न कोडले जाभास्क्रिप्टको साथ उच्च स्तरको भाषा र ARM असेंबली कोडको साथ निम्न स्तरको भाषा बीचको भिन्नतालाई चित्रण गर्दछ।
-
-```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-विश्वास गर्नुहोस् वा नगर्नुहोस्, *तिनीहरू दुवैले एउटै काम गरिरहेका छन्*: 10 सम्मको फिबोनाची अनुक्रम प्रिन्ट गर्दै।
-
-✅ फिबोनाची अनुक्रम [परिभाषित](https://en.wikipedia.org/wiki/Fibonacci_number) संख्याहरूको सेटको रूपमा हो जसमा प्रत्येक संख्या ० र १ बाट सुरु हुने दुई अघिल्लो संख्याहरूको योग हो।
-
-## कार्यक्रमका तत्वहरू
-
-कार्यक्रममा एकल निर्देशनलाई *कथन* भनिन्छ र सामान्यतया एउटा क्यारेक्टर वा लाइन स्पेसिङ हुन्छ जहाँ निर्देशन समाप्त हुन्छ, वा *समाप्त हुन्छ*। कार्यक्रम कसरी समाप्त हुन्छ प्रत्येक भाषा अनुसार फरक हुन्छ।
-
-कार्यक्रम भित्रका कथनहरू निर्देशनहरू पूरा गर्नका लागि प्रयोगकर्ता वा अन्यत्र प्रदान गरिएको डाटामा भर पर्न सक्छन्। डेटाले प्रोग्रामको व्यवहार कसरी परिवर्तन गर्न सक्छ, त्यसैले प्रोग्रामिङ भाषाहरू अस्थायी रूपमा डेटा भण्डारण गर्ने तरिकाको साथ आउँछन् ताकि यसलाई पछि प्रयोग गर्न सकिन्छ। यसलाई *चर* भनिन्छ। चरहरू कथनहरू हुन् जसले यन्त्रलाई यसको मेमोरीमा डेटा बचत गर्न निर्देशन दिन्छ। कार्यक्रमहरूमा चरहरू बीजगणितका चरहरू जस्तै हुन्छन्, जहाँ तिनीहरूको एक अद्वितीय नाम हुन्छ र तिनीहरूको मान समयसँगै परिवर्तन हुन सक्छ।
-
-त्यहाँ एक मौका छ कि केहि कथनहरू यन्त्रद्वारा कार्यान्वयन गरिने छैन। यो सामान्यतया डिजाइन द्वारा हो जब विकासकर्ता द्वारा लेखिएको वा दुर्घटना द्वारा जब एक अप्रत्याशित त्रुटि हुन्छ। अनुप्रयोगमा यस प्रकारको नियन्त्रणले यसलाई अझ बलियो र मर्मतयोग्य बनाउँछ। सामान्यतया, नियन्त्रणमा यी परिवर्तनहरू हुन्छन् जब निश्चित सर्तहरू पूरा हुन्छन्। कार्यक्रम कसरी चल्छ भनेर नियन्त्रण गर्न आधुनिक प्रोग्रामिङमा प्रयोग गरिने सामान्य कथन `if..else` कथन हो।
-
-✅ तपाईले यस प्रकारको कथनको बारेमा पछिल्ला पाठहरूमा जान्नुहुनेछ।
-
-## व्यापार को उपकरण
-
-[![व्यापारका उपकरणहरू](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "व्यापारको उपकरण")
-
-> 🎥 टूलिङको बारेमा भिडियोको लागि माथिको छविमा क्लिक गर्नुहोस्
-
-यस खण्डमा, तपाइँ केहि सफ्टवेयर बारे जान्नुहुनेछ जुन तपाइँ तपाइँ जस्तै धेरै उपयोगी हुन सक्छ
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md
deleted file mode 100644
index b43df3fe..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.pt.md
+++ /dev/null
@@ -1,215 +0,0 @@
-# Introdução a Linguagens de Programação e Ferramentas
-
-Essa lição trata dos básicos de linguagens de programação. Os tópicos tratados aqui se aplicam na maioria das linguagens de programação modernas. Na sessão 'Ferramentas', você vai aprender sobre softwares úteis que ajudarão como uma pessoa desenvolvedora.
-
-![Introdução à Programação](../../../sketchnotes/webdev101-programming.png)
-
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pré-Lição
-
-[Quiz Pré-Lição](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
-
-## Introdução
-
-Nessa lição, vamos falar sobre:
-
-- O que é Programação?
-- Tipos de linguagens de programação
-- Elementos básicos de um programa
-- Ferramentas e softwares utéis para a pessoa desenvolvedora
-
-## O que é Programação?
-
-Programação (também conhecida como codificação) é o processo de escrever instruções em um dispositivo, como um computador ou dispositivo móvel. Escrevemos essas instruções com uma linguagem de programação, que é então interpretada pelo dispositivo. Esses conjuntos de instruções podem ser chamados de vários nomes, mas _programa_, _programa de computador_, _aplicativo (app_ e _executável_) são alguns nomes populares.
-
-Um _programa_ pode ser qualquer coisa escrita com código; sites, jogos e aplicativos de celular são programas. Embora seja possível criar um programa sem escrever código, a lógica subjacente é interpretada para o dispositivo e essa lógica provavelmente foi escrita com o código. Um programa que está * executando* ou *executando código* está executando instruções. O dispositivo com o qual você está lendo esta lição está executando um programa para exibi-la em sua tela.
-
-✅ Faça uma pequena pesquisa: quem é considerado a primeira pessoa programadora de computador do mundo?
-
-## Linguagens de Programação
-
-Linguagens de programação têm um propósito principal: Serem usadas por pessoas desenvolvedoras para criar instruções para enviar a um dispositivo. Os dispositivos só podem entender binários (1s e 0s) e, para *a maioria* das pessoas desenvolvedoras, essa não é uma maneira muito eficiente de se comunicar. As linguagens de programação são um veículo de comunicação entre humanos e computadores.
-
-As linguagens de programação vêm em formatos diferentes e podem servir a propósitos diferentes. Por exemplo, JavaScript é usado principalmente para aplicativos da web, enquanto Bash é usado principalmente para sistemas operacionais.
-
-*Linguagens de baixo nível* normalmente requerem menos etapas do que *linguagens de alto nível* para um dispositivo interpretar as instruções. No entanto, o que torna as linguagens de alto nível populares é sua legibilidade e suporte. JavaScript é considerado uma linguagem de alto nível.
-
-O código a seguir ilustra a diferença entre uma linguagem de alto nível com JavaScript e uma linguagem de baixo nível com código ARM assembly.
-
-```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
-```
-
-Acredite ou não, *ambos estão fazendo a mesma coisa*: imprimir uma sequência de Fibonacci de até 10.
-
-✅ A sequência de Fibonacci [definida](https://en.wikipedia.org/wiki/Fibonacci_number) como um conjunto de números em que cada número é a soma dos dois anteriores, começando em 0 e 1.
-
-## Elementos de um programa
-
-Uma única instrução em um programa é chamada de _declaração_ e geralmente terá um caractere ou espaçamento de linha que marca onde a instrução termina, ou _acaba_. Como um programa termina varia com cada idioma.
-
-
-A maioria dos programas depende do uso de dados de um usuário ou de outro lugar, onde as declarações podem se basear em dados para realizar as instruções. Os dados podem alterar o comportamento de um programa, portanto, as linguagens de programação vêm com uma maneira de armazenar dados temporariamente que podem ser usados ​​posteriormente. Esses dados são chamados de _variáveis_. Variáveis ​​são statements que instruem um dispositivo a salvar dados em sua memória. As variáveis ​​nos programas são semelhantes às da álgebra, onde têm um nome exclusivo e seu valor pode mudar com o tempo.
-
-
-Há uma chance de que algumas instruções não sejam executadas por um dispositivo. Isso geralmente ocorre de propósito, quando escrito pela pessoa desenvolvedora, ou por acidente, quando ocorre um erro inesperado. Esse tipo de controle de um aplicativo o torna mais robusto e sustentável. Normalmente, essas mudanças no controle acontecem quando certas decisões são cumpridas. Uma declaração comum em linguagens de programação modernas para controlar como um programa é executado é a declaração `if..else`.
-
-
-✅ Você aprenderá mais sobre esse tipo de declaração nas lições seguintes
-
-
-## Ferramentas
-
-[![Ferramentas](https://img.youtube.com/vi/bynF1E0Hq98/0.jpg)](https://youtube.com/watch?v=bynF1E0Hq98 "Ferramentas")
-
-Nesta seção, você aprenderá sobre alguns softwares que podem ser muito úteis ao iniciar sua jornada de desenvolvimento profissional.
-
-
-Um **ambiente de desenvolvimento** é um conjunto exclusivo de ferramentas e recursos que uma pessoa desenvolvedora usará com frequência ao escrever software. Algumas dessas ferramentas foram personalizadas para as necessidades específicas de uma pessoa desenvolvedora e podem mudar com o tempo se as prioridades de trabalho ou projetos pessoais forem alterados, ou quando usar uma linguagem de programação diferente. Os ambientes de desenvolvimento são tão exclusivos quanto as pessoas desenvolvedoras que os utilizam.
-
-
-### Editores
-
-Uma das ferramentas mais importantes para o desenvolvimento de software é o editor. Os editores são onde você escreve seu código e, às vezes, onde o executará.
-
-Também contamos com os editores por alguns motivos adicionais:
-
-
-- _Debugging_ Descobrir bugs e erros ao passar pelo código, linha por linha. Alguns editores têm recursos de depuração ou podem ser personalizados e adicionados para linguagens de programação específicas.
-- _Destaque da sintaxe_ Adiciona cores e formatação de texto ao código, tornando-o mais fácil de ler. A maioria dos editores permite destaque de sintaxe personalizada.
-- _Extensões e integrações_ Adições especializadas para pessoas desenvolvedoras, por pessoas desenvolvedoras, para acesso a ferramentas adicionais que não são incorporadas ao editor de base. Por exemplo, muitas vezes precisamos de uma maneira de documentar nosso código e explicar como ele funciona, nesse caso, instalaremos uma extensão de verificação ortográfica para verificar erros de digitação. A maioria dessas adições se destina ao uso em um editor específico, e a maioria dos editores vem com uma maneira de pesquisar as extensões disponíveis.
-- _Personalização_ A maioria dos editores é extremamente personalizável e cada pessoa desenvolvedora terá seu ambiente de desenvolvimento exclusivo que atende às suas necessidades. Muitos também permitem que você crie suas próprias extensões.
-
-
-#### Editores Populares e Extensões para Desenvolvimento de Web
-
-- [Visual Studio Code](https://code.visualstudio.com/)
-  - [Code Spell Checker - verificador ortográfico de código ](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share - Compartilhamento ao vivo](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
-  - [Prettier - Formatador de Código](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Atom](https://atom.io/)
-  - [spell-check - verificador ortográfico](https://atom.io/packages/spell-check)
-  - [teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-
-### Navegadores
-
-Outra ferramenta crucial é o navegador. As pessoas desenvolvedoras da web contam com o navegador para observar como seu código é executado na internet, isso também é usado para visualizar elementos visuais de uma página da web que são escritos no editor, como HTML.
-
-Muitos navegadores vêm com _ferramentas para desenvolvimento_ (DevTools) que contêm um conjunto de recursos e informações úteis que ajudam a coletar e capturar percepções importantes sobre seus aplicativos. Por exemplo: se uma página da web contém erros, às vezes é útil saber quando eles ocorreram. DevTools em um navegador pode ser configurado para capturar essas informações. 
-
-
-#### Navegadores Populares e DevTools
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### Ferramentas da Linha de Comando
-
-Algumas pessoas desenvolvedoras preferem uma visualização menos gráfica para suas tarefas diárias e contam com a linha de comando para fazer isso. O desenvolvimento de código requer uma quantidade significativa de digitação e algumas pessoas desenvolvedoras preferem não interromper seu fluxo no teclado e usam atalhos de teclado para alternar entre as janelas da área de trabalho, trabalhar em arquivos diferentes e usar ferramentas. 
-A maioria das tarefas pode ser concluída com um mouse, mas um benefício de usar a linha de comando é que muito pode ser feito com ferramentas de linha de comando sem a necessidade de alternar entre o mouse e o teclado. Outro benefício da linha de comando é que ela é configurável ​​e você pode salvar sua configuração personalizada, alterá-la posteriormente e também importá-la para novas máquinas de desenvolvimento. Como os ambientes de desenvolvimento são tão exclusivos para cada pessoa desenvolvedora, algumas evitam o uso da linha de comando e outras dependem dela inteiramente e existem também aquelas que preferem uma combinação dos dois.
-
-
-### Opções Populares de Linhas de Comando
-
-As opções da linha de comando variam de acordo com o sistema operacional que você usa.
-
-
-_💻 = já vem pré-instalado no sistema operacional._
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (also known as CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### Ferramentas Populares para Linha de Comando
-
-- [Git](https://git-scm.com/) (💻 na maioria dos sistemas operacionais)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### Documentação
-
-Quando uma pessoa desenvolvedora deseja aprender algo novo, provavelmente recorrerá à documentação para aprender como usá-la. As pessoas desenvolvedoras geralmente contam com a documentação para orientá-las sobre como usar ferramentas e linguagens de maneira adequada e também para obter um conhecimento mais profundo de como funciona.
-
-#### Documentações Populares para Desenvolvimento de Web
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), do Mozilla, editores do [Firefox](https://www.mozilla.org/firefox/)
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), do Google, editores do [Chrome](https://www.google.com/chrome/)
-- [Documentos de desenvolvedor da própria Microsoft](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), para [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ Faça uma pesquisa: agora que você conhece os fundamentos do ambiente de desenvolvimento da web, compare-o com o ambiente de um web designer.
-
-
----
-
-## 🚀 Desafio
-
-Compare algumas linguagens de programação. Quais são algumas das características únicas de JavaScript vs. Java? E COBOL x Go?
-
-
-
-## Quiz Pós-Aula
-
-[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
-
-## Revisão & Autoestudo
-
-Estude um pouco sobre as diferentes linguagens de programação à disposição. Tente escrever uma linha em uma delas e depois refaça em outras duas. O que você aprende?
-
-
-## Lição de casa
-
-[Lendo Documentação](assignment.pt.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md
deleted file mode 100644
index 704c7ee4..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md
+++ /dev/null
@@ -1,203 +0,0 @@
-# Введение в языки программирования и инструменты разработки
-
-Этот урок охватывает основы языков программирования. Рассматриваемые здесь темы применимы к большинству современных языков программирования. В разделе «Инструменты разработки» вы узнаете о полезном программном обеспечении, которое поможет вам как разработчику.
-
-![Введение в программирование](/sketchnotes/webdev101-programming.png)
-
-> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Предлекционный квиз
-
-[Предлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1)
-
-## Введение
-
-В этом уроке мы рассмотрим:
-
-- Что такое программирование?
-- Типы языков программирования
-- Основные элементы программы
-- Полезный софт и инструментарий для профессионального разработчика
-
-> Этот урок можно пройти на [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)!
-
-## Что такое программирование?
-
-Программирование (также известное как кодирование) - это процесс записи инструкций на устройство, такое как компьютер или мобильное устройство. Мы пишем эти инструкции на языке программирования, который затем интерпретируется устройством. Эти наборы инструкций могут называться различными именами, но _программа_, _компьютерная программа_, _приложение_ и _исполняемый файл_ - это несколько популярных имен.
-
-_Программой_ может быть что угодно, написанное с помощью кода: веб-сайты, игры и приложения для телефона - это программы. Хотя можно создать программу без написания кода, основная логика интерпретируется на устройстве, и эта логика, скорее всего, была кем-то написана с помощью кода. Программа, которая _запущена_ или _исполняет код_, выполняет инструкции. Устройство, на котором вы сейчас читаете этот урок, запускает программу для его вывода на ваш экран.
-
-✅ Проведите небольшое исследование: кто считается первым в мире программистом?
-
-## Языки программирования
-
-Языки программирования служат основной цели: с их помощью разработчики могут создавать инструкции для отправки на устройство. Устройства могут понимать только двоичный код (единицы и нули), и для _большинства_ разработчиков это не очень эффективный способ общения. Языки программирования - это средство общения между людьми и компьютерами.
-
-Языки программирования бывают разных форматов и могут служить разным целям. Например, JavaScript в основном используется для веб-приложений, а Bash - в основном для операционных систем.
-
-_Языки низкого уровня_ обычно требуют меньше этапов, чем языки _высокого уровня_, чтобы устройство могло интерпретировать инструкции. Однако то, что делает языки высокого уровня популярными, - это их удобочитаемость и поддержка. JavaScript считается языком высокого уровня.
-
-Следующий код иллюстрирует разницу между языком высокого уровня (JavaScript) и языком низкого уровня (ARM ассемблер).
-
-```javascript
-let number = 10;
-let n1 = 0,
-  n2 = 1,
-  nextTerm;
-
-for (let i = 1; i <= number; i++) {
-  console.log(n1);
-  nextTerm = n1 + n2;
-  n1 = n2;
-  n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-Вы не поверите, но _они оба делают одно и то же_: выводят последовательность Фибоначчи до 10.
-
-✅ Последовательность Фибоначчи [определена](https://ru.wikipedia.org/wiki/Числа_Фибоначчи) как набор чисел, каждое из которых является суммой двух предыдущих, начиная с 0 и 1.
-
-## Элементы программы
-
-Одиночная инструкция в программе называется _выражением_ и обычно имеет символ или межстрочный интервал, который отмечает, где инструкция разделяется, или _заканчивается_. Способ завершения программы зависит от языка.
-
-В тех местах, где выражения могут полагаться на данные для выполнения инструкций, большинство программ полагаются на использование данных от пользователя или из других источников. Данные могут изменить поведение программы, поэтому в языках программирования есть способ временного хранения данных, которые можно использовать позже. Эти данные называются _переменными_. Переменные - это выражения, которые инструктируют устройство сохранять данные в памяти устройства. Переменные в программах аналогичны переменным в алгебре, где они имеют уникальное имя, и их значение может меняться со временем.
-
-Есть вероятность, что некоторые выражения не будут выполнены устройством. Обычно это сделано намеренно, когда написано разработчиком, или случайно, когда возникает непредвиденная ошибка. Этот тип управления приложением делает его более надежным и удобным в обслуживании. Обычно эти изменения в управлении происходят, когда выполняются определенные условия. В современных языках программирования распространенным выражением для управления исполнением программы является `if..else` (если..то).
-
-✅ Вы узнаете больше об этом типе инструкций в следующих уроках.
-
-## Инструметы разработки
-
-[![Инструметы разработки](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
-
-> 🎥 Нажмите на изображение выше, чтобы просмотреть видео об инструментах
-
-В этом разделе вы узнаете о программном обеспечении, которое может оказаться очень полезным в начале вашего пути профессионального развития.
-
-**Среда разработки** - это уникальный набор инструментов и функций, которые разработчик может часто использовать при написании программного обеспечения. Некоторые из этих инструментов были настроены для конкретных нужд разработчика и могут измениться со временем, если разработчик меняет приоритеты в работе или личных проектах, или когда он использует другой язык программирования. Среды разработки столь же уникальны, как и разработчики, которые их используют.
-
-### Редакторы
-
-Один из важнейших инструментов разработки программного обеспечения - редактор. Редакторы - это место, где вы пишете свой код, а иногда и где вы запускаете свой код.
-
-Разработчики полагаются на редакторы кода и по нескольким дополнительным причинам.:
-
-- _Отладка_ Выявление багов и ошибок путем пошагового выполнения кода, строка за строкой. Некоторые редакторы имеют возможности отладки или могут быть настроены для определенных языков программирования.
-- _Подсветка синтаксиса_ Добавляет в код цвета и форматирование текста, упрощает чтение. Большинство редакторов позволяют настраивать подсветку синтаксиса.
-- _Расширения и интеграции_ Дополнения, созданные разработчиками и специально предназначенные для разработчиков, предоставляют доступ к дополнительным инструментам, которые не встроены в базовый редактор. Например, многим разработчикам также нужен способ документировать свой код и объяснять, как он работает, и они установят расширение проверки орфографии для проверки опечаток. Большинство этих дополнений предназначены для использования в конкретном редакторе, и большинство редакторов имеют возможность поиска доступных расширений.
-- _Настройка_ Большинство редакторов легко настраиваются, и у каждого разработчика будет своя собственная уникальная среда разработки, которая соответствует его потребностям. Многие редакторы также позволяют разработчикам создавать свои собственные расширения.
-
-#### Популярные редакторы и расширения для веб-разработки
-
-- [Visual Studio Code](https://code.visualstudio.com/)
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
-  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Atom](https://atom.io/)
-  - [spell-check](https://atom.io/packages/spell-check)
-  - [teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-
-### Браузеры
-
-Еще один важный инструмент - браузер. Веб-разработчики полагаются на браузер, чтобы наблюдать за тем, как их код работает в сети, он также используется для просмотра визуальных элементов веб-страницы, написанных в редакторе, например HTML.
-
-Многие браузеры оснащены _инструментами разработчика_ (DevTools), содержащими набор полезных функций, которые помогают разработчикам собирать и фиксировать важную информацию о своем приложении. Например: если на веб-странице есть ошибки, иногда полезно знать, когда они произошли. DevTools в браузере можно настроить для сбора этой информации.
-
-#### Популярные браузеры и инструменты разработки
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### Инструменты командной строки
-
-Некоторые разработчики предпочитают менее графическое представление для своих повседневных задач и полагаются на командную строку для достижения этой цели. Разработка кода требует значительного набора текста, и некоторые разработчики предпочитают не мешать работе с клавиатурой и будут использовать сочетания клавиш для переключения между окнами рабочего стола, работы с разными файлами и использования инструментов. Большинство задач можно выполнить с помощью мыши, но одним из преимуществ использования командной строки является то, что многое можно сделать с помощью инструментов командной строки без необходимости переключаться между мышью и клавиатурой. Еще одним преимуществом командной строки является то, что они настраиваются, и вы можете сохранить свою настраиваемую конфигурацию, изменить ее позже, а также импортировать ее на новые устройства для разработки. Поскольку среды разработки настолько уникальны для каждого разработчика, некоторые избегают использования командной строки, некоторые будут полностью полагаться на нее, а некоторые предпочитают сочетание двух.
-
-### Популярные варианты командной строки
-
-Варианты командной строки зависят от используемой вами операционной системы.
-
-_💻 = предустановлен в операционной системе._
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (также известный как CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### Популярные инструменты командной строки
-
-- [Git](https://git-scm.com/) (💻 в большинстве операционных систем)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### Документация
-
-Когда разработчик хочет узнать что-то новое, он, скорее всего, обратится к документации, чтобы узнать, как это использовать. Разработчики часто полагаются на документацию, которая поможет им понять, как правильно использовать инструменты и языки, а также получить более глубокие знания о том, как они работают.
-
-#### Популярная документация по веб-разработке
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), от Mozilla, создателей браузера [Firefox](https://www.mozilla.org/firefox/)
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), от Google, создателей браузера [Chrome](https://www.google.com/chrome/)
-- [Microsoft's own developer docs](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers), для [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ Проведите небольшое исследование: теперь, когда вы знаете основы среды веб-разработчика, сравните и сопоставьте ее со средой веб-дизайнера.
-
----
-
-## 🚀 Челлендж
-
-Сравните несколько языков программирования. В чем заключаются уникальные черты JavaScript и Java? Как насчет COBOL vs. Go?
-
-## Постлекционный квиз
-
-[Постлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2)
-
-## Обзор и самообучение
-
-Изучите немного разные языки программирования, доступные программисту. Попробуйте написать строку на одном языке, а затем повторите ее на двух других. Какие языки вы изучаете?
-
-## Задание
-
-[Чтение документации](assignment.ru.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ta.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ta.md
deleted file mode 100644
index b5eb79f9..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ta.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம்
-
-இந்த பாடம் நிரலாக்க மொழிகளின் அடிப்படைகளை உள்ளடக்கியது. இங்கே உள்ளடக்கப்பட்டுள்ள தலைப்புகள் இன்று பெரும்பாலான நவீன நிரலாக்க மொழிகளுக்கு பொருந்தும். 'வர்த்தககருவிகள்' பிரிவில், நீங்கள் ஒரு டெவலப்பராக உங்களுக்கு உதவும் பயனுள்ள மென்பொருள் பற்றி அறிந்து கொள்வீர்கள்.
-
-![அறிமுக நிரலாக்கம்](/sketchnotes/webdev101-programming.png)
-> ஸ்கெட்ச்நோட் [டோமோமி இமுரா](https://twitter.com/girlie_mac)
-
-## விரிவுரைக்கு முந்தைய வினாடி வினா
-[விரிவுரைக்கு முந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=ta)
-
-## அறிமுகம்
-
-இந்த பாடத்தில், நாங்கள் உள்ளடக்குவோம்:
-
-- நிரலாக்க என்றால் என்ன?
-- நிரலாக்க மொழிகளின் வகைகள்
-- ஒரு நிரலின் அடிப்படை கூறுகள்
-- தொழில்முறை டெவலப்பர் பயனுள்ள மென்பொருள் மற்றும் கருவி
-
-> நீங்கள் இந்த பாடத்தை [மைக்ரோசாப்ட் கற்றல்](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon) பற்றி எடுத்துக் கொள்ளலாம்!
-
-## நிரலாக்க என்றால் என்ன??
-
-நிரலாக்கம் (குறியீட்டு முறை என்றும் அழைக்கப்படுகிறது) என்பது கணினி அல்லது மொபைல் சாதனம் போன்ற சாதனத்திற்கு அறிவுறுத்தல்களை எழுதும் செயல்முறையாகும். இந்த வழிமுறைகளை நிரலாக்க மொழியுடன் எழுதுகிறோம், இது சாதனத்தால் விளக்கப்படுகிறது. இந்த அறிவுறுத்தல்களின் தொகுப்புகள் பல்வேறு பெயர்களால் குறிப்பிடப்படலாம், ஆனால் *நிரல்*, *கணினி நிரல்*, *பயன்பாடு (பயன்பாடு)*, மற்றும் *செயல்படுத்தக்கூடிய* ஆகியவை சில பிரபலமான பெயர்கள்
-
-*நிரல்* என்பது குறியீடு டன் எழுதப்பட்ட தாக இருக்கலாம்; வலைத்தளங்கள், விளையாட்டுகள் மற்றும் தொலைபேசி பயன்பாடுகள் திட்டங்கள். குறியீட்டை எழுதாமல் ஒரு நிரலை உருவாக்க முடியும் என்றாலும், அடிப்படை தர்க்கம் சாதனத்திற்கு விளக்கப்படுகிறது மற்றும் அந்த தர்க்கம் பெரும்பாலும் குறியீட்டுடன் எழுதப்பட்டது. *இயங்கும்* அல்லது *செயல்படுத்தும் குறியீடு* என்று ஒரு நிரல் வழிமுறைகளை செயல்படுத்துகிறது. நீங்கள் தற்போது இந்த பாடத்தை படிக்கும் சாதனம் உங்கள் திரையில் அச்சிட ஒரு நிரலை இயக்குகிறது.
-
-✅ ஒரு சிறிய ஆராய்ச்சி செய்யுங்கள்: உலகின் முதல் கணினி நிரலாளராக யார் கருதப்படுகிறார்கள்?
-
-## நிரலாக்க மொழிகள்
-
-நிரலாக்க மொழிகள் ஒரு முக்கிய நோக்கத்தை வழங்குகின்றன: டெவலப்பர்கள் ஒரு சாதனத்திற்கு அனுப்புவதற்கான வழிமுறைகளை உருவாக்கவேண்டும். சாதனங்கள் மட்டுமே பைனரி (1 கள் மற்றும் 0 கள்) புரிந்து கொள்ள முடியும், மற்றும் *மிகவும்* டெவலப்பர்கள் தொடர்பு கொள்ள மிகவும் திறமையான வழி அல்ல. நிரலாக்க மொழிகள் மனிதர்களுக்கும் கணினிகளுக்கும் இடையிலான தகவல் தொடர்புக்கான ஒரு வாகனமாகும்.
-
-நிரலாக்க மொழிகள் வெவ்வேறு வடிவங்களில் வருகின்றன மற்றும் வெவ்வேறு நோக்கங்களுக்காக சேவை செய்யலாம். எடுத்துக்காட்டாக, ஜாவாஸ்கிரிப்ட் முதன்மையாக வலை பயன்பாடுகளுக்கு பயன்படுத்தப்படுகிறது, அதே நேரத்தில் பாஷ் முதன்மையாக இயக்க முறைமைகளுக்கு பயன்படுத்தப்படுகிறது.
-
-*குறைந்த நிலை மொழிகள்* பொதுவாக வழிமுறைகளை விளக்குவதற்கு ஒரு சாதனத்திற்கு *உயர் மட்ட மொழிகளை* விட குறைவான படிகள் தேவைப்படுகின்றன. எனினும், உயர் மட்ட மொழிகளை பிரபலமாக்குவது அவற்றின் வாசிப்பு மற்றும் ஆதரவு ஆகும். ஜாவாஸ்கிரிப்ட் ஒரு உயர் மட்ட மொழியாகக் கருதப்படுகிறது.
-
-பின்வரும் குறியீடு ஜாவாஸ்கிரிப்ட் கொண்ட உயர் நிலை மொழிக்கும் ஏஆர்எம் அசெம்பிளி குறியீட்டுடன் குறைந்த நிலை மொழிக்கும் இடையிலான வித்தியாசத்தை விளக்குகிறது.
-
-```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-நம்பினால் நம்புங்கள், *அவர்கள் இருவரும் ஒரே காரியத்தைச் செய்கிறார்கள்*: 10 வரை ஒரு ஃபிபோனச்சி வரிசையை அச்சிடுதல்.
-
-✅ ஒரு ஃபிபோனச்சி வரிசை யானது [வரையறுக்கப்பட்ட](https://en.wikipedia.org/wiki/Fibonacci_number) எண்களின் தொகுப்பாகும், இது ஒவ்வொரு எண்ணும் 0 மற்றும் 1 இல் இருந்து தொடங்கும் இரண்டு முந்தைய எண்களின் தொகையாகும்.
-
-## நிரலின் கூறுகள்
-
-நிரலில் உள்ள ஒரே ஒரு அறிவுறுத்தல் *அறிக்கை* என்று அழைக்கப்படுகிறது, மேலும் வழக்கமாக ஒரு கேரக்டர் அல்லது வரி இடைவெளி யைக் கொண்டிருக்கும், இது அறிவுறுத்தல் முடிவடையும் இடத்தில் குறிக்கிறது, அல்லது *நிறுத்தப்படும்*. ஒரு நிரல் எவ்வாறு முடிவடைகிறது என்பது ஒவ்வொரு மொழிக்கும் மாறுபடும்.
-
-பெரும்பாலான நிரல்கள் ஒரு பயனர் அல்லது வேறு இடங்களிலிருந்து தரவைப் பயன்படுத்துவதை நம்பியுள்ளன, அங்கு அறிக்கைகள் அறிவுறுத்தல்களை மேற்கொள்ள தரவை நம்பலாம். ஒரு நிரல் எவ்வாறு நடந்துகொள்ளுகிறது என்பதை தரவு மாற்றலாம், எனவே நிரலாக்க மொழிகள் பின்னர் பயன்படுத்தக்கூடிய தரவை தற்காலிகமாக சேமிக்க ஒரு வழியுடன் வருகின்றன. இந்த தரவு *மாறிகள்* என்று அழைக்கப்படுகிறது. மாறிகள் என்பது ஒரு சாதனத்தின் நினைவகத்தில் தரவை சேமிக்க அறிவுறுத்தும் அறிக்கைகள். நிரல்களில் உள்ள மாறிகள் இயற்கணிதத்தில் உள்ளதைப் போலவே உள்ளன, அங்கு அவை ஒரு தனித்துவமான பெயரைக் கொண்டுள்ளன, மேலும் அவற்றின் மதிப்பு காலப்போக்கில் மாறலாம்.
-
-சில அறிக்கைகள் ஒரு சாதனத்தால் செயல்படுத்தப்படாது என்று ஒரு வாய்ப்பு உள்ளது. இது பொதுவாக டெவலப்பர் எழுதும் போது வடிவமைப்பு அல்லது எதிர்பாராத பிழை ஏற்படும் போது தற்செயலாக இருக்கும். ஒரு பயன்பாட்டின் இந்த வகை கட்டுப்பாடு அதை மிகவும் வலுவானதாகவும் பராமரிக்கக்கூடியதாகவும் ஆக்குகிறது. பொதுவாக சில முடிவுகள் நிறைவேற்றப்படும் போது கட்டுப்பாட்டில் இந்த மாற்றங்கள் நிகழ்கின்றன. ஒரு நிரல் எவ்வாறு இயங்குகிறது என்பதைக் கட்டுப்படுத்த நவீன நிரலாக்க மொழிகளில் ஒரு பொதுவான அறிக்கை 'என்றால்.. வேறு ' அறிக்கை.
-
-
-✅ அடுத்தடுத்த பாடங்களில் இந்த வகை அறிக்கையைப் பற்றி மேலும் அறிந்து கொள்வீர்கள்
-
-## வர்த்தககருவிகள்
-
-[![வர்த்தககருவிகள்](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "Tools of the Trade")
-
-> 🎥 கருவியாக்கல் பற்றிய வீடியோவிற்கு மேலே உள்ள படத்தை கிளிக் செய்யவும்
-
-இந்தப் பிரிவில், உங்கள் தொழில்முறை வளர்ச்சிப் பயணத்தைத் தொடங்கும்போது நீங்கள் மிகவும் பயனுள்ளதாக க் காணக்கூடிய சில மென்பொருளைப் பற்றி நீங்கள் கற்றுக்கொள்வீர்கள்.
-
-ஒரு **வளர்ச்சி சூழல்** மென்பொருள் எழுதும் போது ஒரு டெவலப்பர் அடிக்கடி பயன்படுத்தும் கருவிகள் மற்றும் அம்சங்கள் ஒரு தனிப்பட்ட தொகுப்பு ஆகும். இந்த கருவிகளில் சில ஒரு டெவலப்பர் குறிப்பிட்ட தேவைகளுக்கு தனிப்பயனாக்கப்பட்டிருக்கின்றன, மேலும் ஒரு டெவலப்பர் வேலை அல்லது தனிப்பட்ட திட்டங்களில் முன்னுரிமைகளை மாற்றினால் அல்லது அவர்கள் வேறு நிரலாக்க மொழியைப் பயன்படுத்தும்போது காலப்போக்கில் மாறலாம். வளர்ச்சி சூழல்கள் அவற்றைப் பயன்படுத்தும் டெவலப்பர்களைப் போலவே தனித்துவமானவை.
-
-### ஆசிரியர்கள்
-
-மென்பொருள் உருவாக்கத்திற்கான மிக முக்கியமான கருவிகளில் ஒன்று ஆசிரியர். ஆசிரியர்கள் நீங்கள் உங்கள் குறியீட்டை எழுதும் இடம் மற்றும் சில நேரங்களில் உங்கள் குறியீட்டை இயக்கும் இடம்.
-
-டெவலப்பர்கள் ஒரு சில கூடுதல் காரணங்களுக்காக ஆசிரியர்களை நம்பியுள்ளனர்:
-
-- *பிழைநீக்குதல்* குறியீடு மூலம், வரி வரி மூலம் நுழைவதன் மூலம் பிழைகள் மற்றும் பிழைகளைக் கண்டறிதல். சில ஆசிரியர்கள் பிழைநீக்கதிறன்களைக் கொண்டுள்ளனர், அல்லது குறிப்பிட்ட நிரலாக்க மொழிகளுக்காக தனிப்பயனாக்கலாம் மற்றும் சேர்க்கலாம்.  
-- *தொடரியல் சிறப்பித்துக் காட்டுதல்* வண்ணங்கள் மற்றும் உரை வடிவமைப்பை குறியீட்டுக்கு சேர்க்கிறது, படிக்க எளிதாக்குகிறது. பெரும்பாலான ஆசிரியர்கள் தனிப்பயனாக்கப்பட்ட தொடரியல் சிறப்பம்சத்தை அனுமதிக்கிறார்கள்.
-- *விரிவாக்கங்கள் மற்றும் ஒருங்கிணைப்புகள்* டெவலப்பர்கள், டெவலப்பர்கள், அடிப்படை ஆசிரியர் கட்டமைக்கப்படாத கூடுதல் கருவிகள் அணுகசிறப்பு என்று சேர்த்தல். உதாரணமாக, பல டெவலப்பர்கள் தங்கள் குறியீட்டை ஆவணப்படுத்தவும், அது எவ்வாறு செயல்படுகிறது என்பதை விளக்கவும் ஒரு வழி தேவை, மேலும் எழுத்துப்பிழைகளை சரிபார்க்க ஒரு எழுத்துப்பிழை காசோலை நீட்டிப்பை நிறுவும். இந்த சேர்த்தல் பெரும்பாலான ஒரு குறிப்பிட்ட ஆசிரியர் உள்ள பயன்படுத்த நோக்கம், மற்றும் பெரும்பாலான ஆசிரியர்கள் கிடைக்கும் நீட்டிப்புகள் தேட ஒரு வழி கொண்டு வருகின்றன.
-- *தனிப்பயனாக்கு* பெரும்பாலான ஆசிரியர்கள் மிகவும் தனிப்பயனாக்கலாம், மேலும் ஒவ்வொரு டெவலப்பரும் தங்கள் தேவைகளுக்கு ஏற்ற தங்கள் சொந்த தனித்துவமான வளர்ச்சி சூழலைக் கொண்டிருப்பார்கள். பலர் டெவலப்பர்கள் தங்கள் சொந்த நீட்டிப்புகளை உருவாக்க அனுமதிக்கிறார்கள்.
-
-#### பிரபலமான ஆசிரியர்கள் மற்றும் வலை மேம்பாட்டு நீட்டிப்புகள்
-
-- [விஷுவல் ஸ்டுடியோ குறியீடு](https://code.visualstudio.com/)
-  - [குறியீடு எழுத்துப்பிழை சரிபார்ப்பி](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [லிவ் ஷர்](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
-  - [ப்ரெட்திர் - குறியீடு பொருள்](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [அணு](https://atom.io/)
-  - [எழுத்துப்பிழை-சரிபார்த்தல்](https://atom.io/packages/spell-check)
-  - [டெலிடைப்](https://atom.io/packages/teletype)
-  - [அணு அழகுபடுத்தல்](https://atom.io/packages/atom-beautify)
-
-### மேய்வான்களில்
-
-மற்றொரு முக்கியமான கருவி உலாவி. வலை டெவலப்பர்கள் தங்கள் குறியீடு இணையத்தில் எவ்வாறு இயங்குகிறது என்பதைக் கண்காணிக்க உலாவியை நம்பியுள்ளனர், இது ஹெச்டிஎம்எல் போன்ற எடிட்டரில் எழுதப்பட்ட ஒரு வலைப் பக்கத்தின் காட்சி கூறுகளைக் காணவும் பயன்படுத்தப்படுகிறது.
-
-பல உலாவிகள் *டெவலப்பர் கருவிகள்* (தேவ்டூல்ஸ்) உடன் வருகின்றன, அவை டெவலப்பர்கள் தங்கள் பயன்பாட்டைப் பற்றிய முக்கியமான நுண்ணறிவுகளை சேகரிக்கவும் கைப்பற்றவும் உதவுவதற்கு பயனுள்ள அம்சங்கள் மற்றும் தகவல்களின் தொகுப்பைக் கொண்டுள்ளன. எடுத்துக்காட்டாக: வலைப்பக்கத்தில் பிழைகள் இருந்தால், அவை எப்போது நிகழ்ந்தன என்பதை அறிவது சில நேரங்களில் உதவியாக இருக்கும். இந்த தகவலை ப்வுசர் மூலம் கைப்பற்ற, ஒரு உலாவியில் உள்ள தேவ்டூல்களை உள்ளமைக்கலாம்.
-
-#### பிரபலமான உலாவிகள் மற்றும் தேவ்டூல்ஸ்
-
-- [விளிம்பு](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [குரோம்](https://developers.google.com/web/tools/chrome-devtools/)
-- [பயர்பாக்ஸ்](https://developer.mozilla.org/docs/Tools)
-
-### கட்டளை வரி கருவிகள் 
-
-சில டெவலப்பர்கள் தங்கள் தினசரி பணிகளுக்கு குறைவான வரைகலை பார்வையை விரும்புகிறார்கள் மற்றும் இதை அடைய கட்டளை வரியை நம்புகிறார்கள். குறியீட்டை உருவாக்குவதற்கு குறிப்பிடத்தக்க அளவு தட்டச்சு தேவைப்படுகிறது, மேலும் சில டெவலப்பர்கள் விசைப்பலகையில் தங்கள் ஓட்டத்தை சீர்குலைக்க விரும்பவில்லை, மேலும் டெஸ்க்டாப் ஜன்னல்களுக்கு இடையில் பரிமாற்றம் செய்ய விசைப்பலகை குறுக்குவழிகளைபயன்படுத்துவார்கள், வெவ்வேறு கோப்புகளில் வேலை செய்வார்கள், கருவிகளைப் பயன்படுத்துவார்கள்.பெரும்பாலான பணிகளை சுட்டிமூலம் முடிக்கலாம், ஆனால் கட்டளை வரியைப் பயன்படுத்துவதன் ஒரு நன்மை என்னவென்றால், சுட்டி மற்றும் விசைப்பலகைக்கு இடையில் மாற்றவேண்டிய அவசியம் இல்லாமல் கட்டளை வரி கருவிகளைக் கொண்டு நிறைய செய்ய முடியும். கட்டளை வரிமற்றொரு நன்மை அவர்கள் கட்டமைக்கமுடியும் என்று மற்றும் நீங்கள் உங்கள் விருப்ப கட்டமைப்பு சேமிக்க முடியும், பின்னர் அதை மாற்ற, மேலும் புதிய வளர்ச்சி இயந்திரங்கள் அதை இறக்குமதி.வளர்ச்சி சூழல்கள் ஒவ்வொரு டெவலப்பருக்குமிகவும் தனித்துவமானவை என்பதால், சிலர் கட்டளை வரியைப் பயன்படுத்துவதைத் தவிர்ப்பார்கள், சிலர் அதை முற்றிலும் நம்புவார்கள், சிலர் இரண்டின் கலவையை விரும்புகிறார்கள்.
-
-### பிரபலமான கட்டளை வரி விருப்பங்கள்
-
-நீங்கள் பயன்படுத்தும் இயக்க முறைமையின் அடிப்படையில் கட்டளை வரிக்கான விருப்பங்கள் வேறுபடும்.
-
-*💻 = இயக்க முறைமையில் முன்நிறுவல் வருகிறது..*
-
-#### விண்டோஸ்
-
-- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [கட்டளை வரி](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (சி.எம்.டி என்றும் அழைக்கப்படுகிறது) 💻
-- [விண்டோஸ் முனையம்](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [புதினா](https://mintty.github.io/)
-  
-#### MacOS
-
-- [முனையம்](https://support.apple.com/guide/terminal/open-or-quit-terminal-apd5265185d-f365-44cb-8b09-71a064a42125/mac) 💻
-- [ஐடெர்ம்](https://iterm2.com/)
-- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-macos/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
-
-#### Linux
-
-- [பாஸ்](https://www.gnu.org/software/bash/manual/html_node/index.html) 💻
-- [கேடிஇ கான்சோல்](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)
-- [பவர்ஷெல்](https://docs.microsoft.com/powershell/scripting/install/installing-powershell-core-on-linux/?view=powershell-7&WT.mc_id=academic-77807-sagibbon)
-
-#### பிரபலமான கட்டளை வரி கருவிகள்
-
-- [கிட்](https://git-scm.com/) (💻 பெரும்பாலான இயக்க முறைமைகளில்)
-- [என்பிஎம்](https://www.npmjs.com/)
-- [யர்ன்](https://classic.yarnpkg.com/en/docs/cli/)
-
-### ஆவணச்சான்று வழக்காட்சி
-
-ஒரு டெவலப்பர் புதிய ஒன்றைக் கற்றுக்கொள்ள விரும்பும்போது, அதை எவ்வாறு பயன்படுத்துவது என்பதைக் கற்றுக்கொள்ள அவர்கள் பெரும்பாலும் ஆவணத்திற்குத் திரும்புவார்கள். டெவலப்பர்கள் கருவிகள் மற்றும் மொழிகளை எவ்வாறு சரியாகப் பயன்படுத்துவது என்பதன் மூலம் அவர்களுக்கு வழிகாட்டவும், அது எவ்வாறு செயல்படுகிறது என்பது பற்றிய ஆழமான அறிவைப் பெறவும் பெரும்பாலும் ஆவணங்களை நம்பியுள்ளனர்.
-
-#### வலை அபிவிருத்தி பற்றிய பிரபலமான ஆவணப்படுத்தல்
-
-- [மொசில்லா டெவலப்பர் நெட்வொர்க் (எம்டிஎன்)](https://developer.mozilla.org/docs/Web), [பயர்பாக்ஸ்](https://www.mozilla.org/firefox/) வெளியீட்டாளர்களான மொசில்லாவிலிருந்து.
-- [முன்னணி முதுநிலை](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev), கூகிள் இருந்து, [குரோம்](https://www.google.com/chrome/) வெளியீட்டாளர்கள்.
-- [மைக்ரோசாப்ட் இன் சொந்த டெவலப்பர் ஆவணம்](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers),  [மைக்ரோசாப்ட் எட்ஜ்](https://www.microsoft.com/edge)
-
-✅ சில ஆராய்ச்சிகளை செய்யுங்கள்: இப்போது நீங்கள் ஒரு வலை டெவலப்பரின் சூழலின் அடிப்படைகளை அறிந்திருக்கிறீர்கள், அதை ஒரு வலை வடிவமைப்பாளரின் சூழலுடன் ஒப்பிட்டு வேறுபடுத்திப் பாருங்கள்.
----
-
-## 🚀 அறைகூவல்
-
-சில நிரலாக்க மொழிகளை ஒப்பிடுக. ஜாவாஸ்கிரிப்ட் எதிராக ஜாவா வின் தனித்துவமான பண்புகள் யாவை? எப்படி கோபோல் எதிராக கோ பற்றி?
-
-## விரிவுரைக்குப் பிந்தைய வினாடி வினா
-[விரிவுரைக்குப் பிந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=ta)
-
-## ஆய்வு & சுய ஆய்வு
-
-நிரலாளர் களுக்கு கிடைக்கும் பல்வேறு மொழிகளில் ஒரு பிட் படிக்கவும். ஒரு மொழியில் ஒரு வரியை எழுத முயற்சிக்கவும், பின்னர் அதை மற்ற இரண்டு மொழிகளில் மீண்டும் செய்ய முயற்சிக்கவும். நீங்கள் என்ன கற்றுக்கொள்கிறீர்கள்?
-
-## வகுத்தமைத்தல்
-
-[ஆவணத்தைப் படித்தல்](assignment.ta.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md
deleted file mode 100644
index d0445013..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-cn.md
+++ /dev/null
@@ -1,194 +0,0 @@
-# 编程语言概述与工具介绍
-
-这节课涵盖了编程语言的基础知识，涉及到的内容适用于如今大多数现代编程语言。在“工具介绍”部分，你会了解到一些对开发者很有用的软件。
-
-![Intro Programming](../../../sketchnotes/webdev101-programming.png)
-> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 课前小测
-[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=zh_cn)
-
-## 大纲
-
-这节课我们将会介绍：
-
-- 什么是编程？
-- 编程语言的种类
-- 程序的基本要素
-- 对专业开发者很有用的软件和工具
-
-## 什么是编程？
-
-编程（programming） ，俗称写代码（coding），是向诸如计算机或移动设备之类的设备写入指令的过程。我们使用编程语言来编写这些指令，然后交由设备去解释（interpret）。这些指令的集合有许多叫法，常见的有*程序（program）*、*计算机程序（computer program）*、*应用程序（application / app）*和*可执行文件（executable）*。
-
-*程序*可以是任何由代码编写的东西，比如网站、游戏和手机应用。尽管的确有办法不编写任何代码就创建一个程序，但是设备还是会去解析其底层逻辑，这个逻辑大概率是由代码编写的。所谓*正在运行*或是*执行代码*的程序所做的其实都是执行指令。你现在用来阅读这段文字的设备，也正在运行一个将文字输出到你的屏幕上的程序。
-
-✅ 查一查：谁被认为是世界上第一位计算机程序员？
-
-## 编程语言
-
-编程语言的主要目的是：让开发者可以构建指令并将它们传递给设备。设备只能理解二进制（一堆 0 和 1），这对*大多数*开发者来说实在不算是高效的交流方式，而编程语言正是人类与计算机之间沟通的桥梁。
-
-编程语言有着不同的形式，也可能用于不同的目的。比如 JavaScript 主要用于 Web 应用，而 Bash 则主要用于操作系统。
-
-对于设备来说看，解释 *低级语言（low level languages）* 的指令一般会比解释 *高级语言（high level languages）* 的指令需要更少的步骤。然而，高级语言因为其可读性和兼容性会更加常用。JavaScript 就是一种高级语言。
-
-下面的代码展示了高级语言（以 JavaScript 为例）和低级语言（以 ARM 汇编代码为例）的区别：
-
-```javascript
-let number = 10
-let n1 = 0, n2 = 1, nextTerm;
-
-for (let i = 1; i <= number; i++) {
-    console.log(n1);
-    nextTerm = n1 + n2;
-    n1 = n2;
-    n2 = nextTerm;
-}
-```
-
-```c
- area ascen,code,readonly
- entry
- code32
- adr r0,thumb+1
- bx r0
- code16
-thumb
- mov r0,#00
- sub r0,r0,#01
- mov r1,#01
- mov r4,#10
- ldr r2,=0x40000000
-back add r0,r1
- str r0,[r2]
- add r2,#04
- mov r3,r0
- mov r0,r1
- mov r1,r3
- sub r4,#01
- cmp r4,#00
- bne back
- end
-```
-
-不管你信不信，*它们做的事完全相同*：打印斐波那契数列的前 10 位。
-
-✅ [斐波那契数列](https://zh.wikipedia.org/wiki/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97)是一个由 0 和 1 开头，每个数字都是它之前两个数字之和的数列。
-
-## 程序的基本要素
-
-程序中的单条指令（instruction）被称作*语句（statement）*，常用一个字符或是空行来标识指令结束的位置，这种标识可被称为*终止符（terminates）*。程序的结束方式也因语言而异。
-
-多数程序都需要用到从用户或其他地方获取到的数据（data），此时语句会根据这些数据来执行指令。数据会改变程序的行为，所以编程语言提供了一种临时存储此后会被用到的数据的方法。这些数据被称作*变量（variables）*。变量也是语句，用来指示设备将数据存到它的内存中。和代数学中的变量类似，程序中的变量也有独立的命名，其值在之后也可能发生改变。
-
-有的语句可能不会被设备执行，这通常是开发者有意为之，否则就是发生了意外的错误。这样的控制可以让应用程序更加稳定和可维护。一般来说这些控制的切换会在满足特定条件的情况下发生。`if..else` 语句就是一个在现代编程语言中常见的用于控制程序的语句。
-
-✅ 你会在此后的课程中学到更多关于此类语句的知识
-
-## 工具介绍
-
-[![Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "工具介绍")
-
-在这一部分，你将会了解到一些能在你的专业开发之旅中颇有帮助的软件。
-
-**开发环境（development environment）** 指的是一位开发者自己在编写软件时常会用到的工具和功能的集合。其中一些工具会按照开发者的特定需求被自定义配置，这些工具集也会随着时间发生变化，原因可能是开发者在工作或个人项目中改变了需求的优先级，抑或是切换到了另一种编程语言。开发环境往往因人而异。
-
-### 编辑器
-
-编辑器（Editors）是软件开发中最关键的工具之一，是你用来编写甚至运行你的代码的地方。
-
-开发者选用编辑器还有这些原因：
-
-- *调试（Debugging）* 通过逐步或逐行地运行代码来发现漏洞和错误。一些编辑器自身带有调试功能，或者可以被自定义添加对特定编程语言的调试功能。
-- *语法高亮（Syntax highlighting）* 为代码添加颜色和文本格式以便阅读。多数编辑器都可以对语法高亮进行自定义。
-- *插件和集成（Extensions and Integrations）* 开发者可以根据自身需要为编辑器添加其原生本不包含的功能。比如，许多开发者需要为代码撰写文档来解释其工作原理，就会安装一个拼写检查插件来检查有没有拼写错误。多数插件都只支持特定的编辑器，多数编辑器也会提供搜索可用插件的方法。
-- *自定义（Customization）* 多数编辑器都是高度可自定义的，每一位开发者都能根据自身需要来自定义自己的开发环境。许多开发者还会编写自己的插件。
-
-#### 主流编辑器和 Web 开发插件
-
-- [Visual Studio Code](https://code.visualstudio.com/)
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
-  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Atom](https://atom.io/)
-  - [spell-check](https://atom.io/packages/spell-check)
-  - [teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-
-### 浏览器
-
-另一个关键工具是浏览器。Web 开发者需要用浏览器来观察它们的代码如何在网页上运行，还可以看到编辑器中编写的元素（如 HTML 元素）如何展现在网页上。
-
-许多浏览器都提供了*开发者工具*（DevTools），包括一系列有用的功能和信息，用以辅助开发者收集和捕获它们应用程序的重要信息。例如当网页发生错误时，获知错误是何时发生的有助于解决错误，而浏览器 DevTools 就可以被配置来捕获这个信息。
-
-#### 主流浏览器和 DevTools
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### 命令行工具（Command Line Tools）
-
-一些开发者更喜欢使用较少的图形化界面来执行日常任务，因此选择使用命令行。开发代码需要大量的文字输入，一些开发者不喜欢自己在键盘上的工作流被打断，会使用键盘快捷键来切换桌面窗口、切换工作文件、使用工具等。大多数任务都可以通过鼠标完成，而使用命令行的一个好处就是无需再鼠标和键盘之间切换就能完成多数工作。命令行的另一个好处是它们是可配置的，所以你可以保存你的配置并随时修改，还可以将其导入到新的开发设备上。但开发环境毕竟因人而异，有人完全不想用命令行，有人则希望在命令行做所有事，还有一些人两种方式都乐意接受。
-
-### 常用命令行选择
-
-命令行选择基于你使用的操作系统会有所不同。
-
-*💻 表示会预装在对应操作系统上*
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (即 CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### 常用命令行工具
-
-- [Git](https://git-scm.com/) (💻 <- 在多数操作系统上)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### 文档
-
-当一位开发者想要学点新东西，他们基本都会去找文档（Documentation）来学习如何使用。开发者会依靠文档来指引他们如何合理地使用工具和语言，并且从中获取更多关于实现原理的深层知识。
-
-#### Web 开发常用文档
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), 来自 Mozilla，[Firefox](https://www.mozilla.org/firefox/) 的出版商
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev)，来自 Google，[Chrome](https://www.google.com/chrome/) 的发布者
-- [Microsoft 自己的开发人员文档](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)，用于 [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ 查一查：既然你已经对 Web 开发者的环境有所了解，何不比较一下其与 Web 设计师的环境的差异？
-
----
-
-## 🚀 挑战
-
-比较一些编程语言。JavaScript 和 Java 相互之间有什么独特的特征？COBOL 和 Go 之间呢？
-
-## 课后小测
-[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=zh_cn)
-
-## 复习 & 自学
-
-尝试接触一些不同的编程语言，用一种语言写一行代码，然后用另外两种语言重写这一行代码，你有什么感悟吗？
-
-## 作业
-
-[阅读文档](assignment.zh-cn.md)
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md
deleted file mode 100644
index 22702135..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.zh-tw.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# 程式語言概論與必備工具
-
-這堂課程解釋程式語言的基礎。這項主題能應用到當代多數的程式語言。關於必備工具的部分，你會學到許多實用的開發者軟體。
-
-![關於程式語言](/sketchnotes/webdev101-programming.png)
-> 由[Tomomi Imura](https://twitter.com/girlie_mac) 繪製。
-
-## 課前測驗
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/1?loc=zh_tw)
-
-## 大綱
-
-在這堂課中，包含：
-
-- 什麼是程式設計?
-- 程式語言的種類
-- 程式的基本架構
-- 給專業開發者的實用軟體與工具
-
-## 什麼是程式設計?
-
-程式設計，又稱作Coding，是編寫電腦或手機裝置的指令過程。我們以裝置看得懂的程式語言來編寫這些指令，這些指令集涉及到常見的*程式*、*電腦程式*、*應用程式(App)*或*執行檔*。
-
-一個*程式*以程式碼任意創作出來，網頁、遊戲、手機應用都是程式的一種。雖然我們可以在不編寫程式碼的情況下建出程式，但裝置底下的邏輯概念還是以程式碼為主。一個*執行中*、*執行編碼*的程式都是仰賴著指令。你眼前正閱讀的文字就是由程式輸出到螢幕。
-
-✅ 課外研究： 誰被認為是世界上第一位電腦工程師?
-
-## 撰寫程式語言
-
-編寫程式語言的主要目的是讓開發者得以指示裝置。裝置只能讀懂二元格式 ( 1 與 0 )，對於*大多數*的開發者而言，這並不是個很好理解溝通的方式。程式語言就像人類與電腦之間溝通的橋梁。
-
-程式語言有不同的格式與滿足的目的。舉例來說，JavaScript 常被用在網頁應用上，而 Bash 主要是用在作業系統上。
-
-*低階語言(Low level languages)* 通常比 *高階語言(high level languages)* 要求更少的裝置指示步數。然而，高階語言的閱讀性與支援性讓它成為最普及的程式語言。JavaScript 即是一種高階語言。
-
-下列程式碼說明高階語言(JavaScript)與低階語言(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
-```
-
-事實上，*他們都做一樣的事情* ── 印出前十項費氏數列。
-
-✅ 費氏數列的[定義](https://zh.wikipedia.org/zh-tw/%E6%96%90%E6%B3%A2%E9%82%A3%E5%A5%91%E6%95%B0%E5%88%97)為該數是由之前的兩數相加而得出。初始值為 0 與 1。
-
-## 程式的基本架構
-
-程式中的一行指令(instruction)被稱做*陳述式(statement)*，通常會由特定符號或分行來決定結尾處，或是執行*程式終止*。程式終止的方式會依不同程式語言而有所不同。
-
-大多數程式需要使用用戶或其他位置的資料，陳述式依照這些資料決定指令。資料會影響程式的運作方式，編寫程式語言便是一種暫時性儲存資料的途徑。這些資料稱為*變數(Variables)*。變數會指引資料儲存到裝置上的位置，它們就像代數一樣：有自己的名稱、數值隨時間改變。
-
-有些情況裝置不會執行到陳述式。通常是開發者故意的選擇或意外性地輸入錯誤，讓應用程式變得更豐富且需要被維護。常見的發生情況在決定條件的時候，如當代程式語言以 `if..else` 條件式來決定程式的執行方式。
-
-✅ 往後的課程會講解各式各樣的陳述式型態。
-
-## 工欲善其事，必先利其器
-
-[![謀生工具 Tools of the Trade](https://img.youtube.com/vi/69WJeXGBdxg/0.jpg)](https://youtube.com/watch?v=69WJeXGBdxg "謀生工具 Tools of the Trade")
-
-在這個章節，你會學習到一些實用的軟體來開始你的開發旅程。
-
-一個**開發環境**包含許多開發者撰寫程式需要用到的工具。它們會依照開發者的需求而不同，隨著時間、專案大小、程式語言而有所調整。每個開發者都有自己獨特的開發環境。
-
-### 文字編輯器
-
-文字編輯器可說是最重要的軟體開發工具。開發者可以在其中撰寫並執行程式。
-
-還有許多原因讓開發者選擇文字編輯器：
-
-- *偵錯(Debugging)* 在程式碼中一行一行地找尋錯誤。有些文字編輯器有偵錯的功能，可以依照不同的程式語言而調整。
-- *語法突顯(Syntax highlighting)* 將程式碼加上顏色並自動排版，方便開發者閱讀。文字編輯器也支援語法突顯的客製化。
-- *整合擴充插件(Extensions and Integrations)* 擴充插件不包含在預設的文字編輯器當中，開發者依照自己的需求建立並新增到文字編輯器當中。舉例來說，許多開發者需要統整程式文檔並註解這些檔案，他們就會加裝檢查拼字的插件。有些插件功能只支援特定的文字編輯器，文字編輯器也提供搜尋擴充插件的功能。
-- *客製化(Customization)* 大多數的文字編輯器都允許開發者做客製化，開發者依照自己的習慣，建立自己順手的開發環境。其中也包含建立自己的擴充插件。
-
-#### 常見文字編輯器與網頁開發插件
-
-- [Visual Studio Code](https://code.visualstudio.com/)
-  - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
-  - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare-pack)
-  - [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
-- [Atom](https://atom.io/)
-  - [spell-check](https://atom.io/packages/spell-check)
-  - [teletype](https://atom.io/packages/teletype)
-  - [atom-beautify](https://atom.io/packages/atom-beautify)
-
-### 瀏覽器
-
-另一款重要的工具是瀏覽器。網頁開發人員會藉由瀏覽器觀察程式的執行情況，瀏覽器也是常見的網頁編輯與檢視器，顯示來自檔案的可見物件，如 HTML 檔。
-
-許多瀏覽器都附加*開發者工具(DevTools)*，內含實用的功能協助開發者蒐集與取得重要的程式資訊。假設有一頁網頁出現錯誤，了解它出錯的時間與狀況就很重要，配置開發者工具即可蒐集這些資訊。
-
-#### 常見瀏覽器與網頁開發工具
-
-- [Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)
-- [Chrome](https://developers.google.com/web/tools/chrome-devtools/)
-- [Firefox](https://developer.mozilla.org/docs/Tools)
-
-### 常用指令
-
-有些開發者偏好較少的介面，通常會使用指令來完成工作；撰寫程式碼要求大量的文字輸入，有些開發者偏好以不中斷文字輸入為首要條件，常用快捷鍵做視窗與檔案的切換。多數工作能以滑鼠操作，但為了減少鍵盤與滑鼠間的切換，指令輸入會是實踐上較合適的方式。另一項指令輸入的好處是它們彈性很高，隨時可以更新設定，甚至移植到其他機器上。每一位開發者有各自的開發習慣，開發環境也有所不同。
-
-### 常用指令選項
-
-指令選項(Command Line Options)會依不同的作業系統而有所不同。
-
-*💻 表示預設已安裝在作業系統上。*
-
-#### Windows
-
-- [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7/?WT.mc_id=academic-77807-sagibbon) 💻
-- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands/?WT.mc_id=academic-77807-sagibbon) (又稱作 CMD) 💻
-- [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)
-- [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-77807-sagibbon)
-
-#### 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-77807-sagibbon)
-
-#### 其他常用指令
-
-- [Git](https://git-scm.com/) (💻 已支援大多數的作業系統。)
-- [NPM](https://www.npmjs.com/)
-- [Yarn](https://classic.yarnpkg.com/en/docs/cli/)
-
-### 技術文件
-
-若開發人員想學新的事物，技術文件會是很好的幫手。他們會參照文件來學習如何使用工具與新的程式語言，並瞭解如何鑽研更深入的用法。
-
-#### 常用的網頁開發文件
-
-- [Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web), 來自 Mozilla，[Firefox](https://www.mozilla.org/firefox/) 的出版商
-- [Frontend Masters](https://frontendmasters.com/learn/)
-- [Web.dev](https://web.dev)，來自 Google，[Chrome](https://www.google.com/chrome/) 的發布者
-- [Microsoft 自己的開發人員文檔](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)，用於 [Microsoft Edge](https://www.microsoft.com/edge)
-
-✅ 研究項目： 現在你已經了解基本的網頁開發環境了。請比較「網頁開發環境」與「網頁設計環境」之間的差異。
-
----
-
-## 🚀 挑戰
-
-比較不同的程式語言： JavaScript 與 Java 間有什麼獨特的特徵? 那 COBOL 與 Go 呢?
-
-## 課後測驗
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/2?loc=zh_tw)
-
-## 複習與自學
-
-學習不同的程式語言。試著在三種不同的程式語言寫幾行程式碼。你學到了什麼?
-
-## 作業
-
-[閱讀技術文件](assignment.zh-tw.md)
-
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.el.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.el.md
deleted file mode 100644
index 0929d7f8..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.el.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Βλέπε έγγραφο
-
-## Οδηγίες
-
-Υπάρχουν πολλά εργαλεία που μπορεί να χρειαστεί ένας web developer και τα οποία βρίσκονται στο [MDN έγγραφα για client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Επιλέξτε 3 εργαλεία που δεν αναφέρονται στο μάθημα, εξηγήστε γιατί θα τα χρησιμοποιούσε ένας web developer, αναζητήστε ένα εργαλείο που ανήκει σε αυτήν την κατηγορία και μοιραστείτε την τεκμηρίωσή σας. Μην χρησιμοποιήσετε το ίδιο παράδειγμα εργαλείου που αναφέρεται στα έγγραφα MDN.
-
-## 
-
-Εξήγηση | Τρόπος χρήσης | Χρειάζεται Βελτίωση
---- | --- | -- |
-| Εξηγήστε γιατί να χρησιμοποιήσει αυτό το εργαλείο ένας web developer| Εξηγήστε το πως, αλλά όχι το γιατί ένας developer να χρησιμοποιήσει αυτό το εργαλείο| Μην αναφέρετε το πως και το γιατί ένας developer θα χρησιμοποιούσε αυτό το εργαλείο |
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.es.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.es.md
deleted file mode 100644
index 7758660c..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.es.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Lectura de documentos
-
-## Instrucciones
-
-Hay muchas herramientas que un desarrollador web puede necesitar, muchas de ellas se encuentran en la [Documentación de MDN - Herramientas del lado del cliente](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Seleccionar 3 herramientas que no sean las comentadas en el artículo, explicar por qué un Desarrollador Web las debería usar, buscar una herramienta que pertenezca a esta categoría y compartir la documentación. No utilizar los ejemplos de herramientas brindados en la documentación de MDN.
-
-
-## Rúbrica
-
-Ejemplo | Adecuado | Necesita mejorar
---- | --- | -- |
-| Explicar por qué el Desarrollador web usará la herramienta | Explicar cómo el desarrollador debería usar la herramienta| Por qué un desarrollador usaría la herramienta. |
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md
deleted file mode 100644
index d08028f0..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.fr.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Lire la documentation
-
-## Instructions
-
-Un développeur Web peut avoir besoin de nombreux outils qui se trouvent sur le [Documentation MDN pour l'outillage côté client](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Sélectionnez 3 outils non traités dans la leçon, expliquez pourquoi un développeur Web l'utiliserait, recherchez un outil qui relève de cette catégorie et partagez sa documentation. N'utilisez pas le même exemple d'outil sur les documents MDN.
-
-## Rubrique
-
-Exemplaire | Adéquat | A besoin d'amélioration
---- | --- | -- |
-| Expliqué pourquoi le développeur Web utiliserait l'outil | Expliqué comment, mais pas pourquoi le développeur utiliserait l'outil | N'a pas mentionné comment ou pourquoi un développeur utiliserait l'outil |
\ No newline at end of file
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md
deleted file mode 100644
index 8c73b4be..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.hi.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# डॉक्स पढ़ना
-
-## अनुदेश
-
-ऐसे कई उपकरण हैं जिनकी आवश्यकता वेब डेवलपर को हो सकती है जो [एमडीएन प्रलेखन के क्लाइंट-साइड टूलिंग](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) पे उपलब्ध है । पाठ में शामिल नहीं किए गए 3 टूल चुनें, बताएं कि एक वेब डेवलपर इसका उपयोग क्यों करेगा, और इस टूल के लिए खोज करेगा जो इस श्रेणी में आता है और इसके प्रलेखन को साझा करता है । MDN डॉक्स पर समान टूल उदाहरण का उपयोग न करें.
-
-## सरनामा
-
-| उदाहरणात्मक                                  | पर्याप्त                                                   | सुधार की जरूरत                                                      |
-| -------------------------------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- |
-| बताया कि वेब डेवलपर टूल का उपयोग क्यों करेगा | समझाया कि कैसे, लेकिन डेवलपर टूल का उपयोग क्यों नहीं करेगा | यह उल्लेख नहीं किया कि एक डेवलपर उपकरण का उपयोग कैसे या क्यों करेगा |
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md
deleted file mode 100644
index 870ed91d..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.id.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Membaca Dokumentasi
-
-## Instruksi
-
-Ada banyak alat yang mungkin diperlukan pengembang web yang ada di [dokumentasi MDN untuk alat sisi klien](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview) . Pilih 3 alat yang tidak tercakup dalam pelajaran, jelaskan mengapa pengembang web akan menggunakannya, dan cari alat yang termasuk dalam kategori ini dan bagikan dokumentasinya. Jangan gunakan contoh alat yang sama pada dokumen MDN.
-
-## Rubrik
-
-| Teladan                                                  | Memenuhi Syarat                                                             | Perlu Perbaikan                                                                  |
-|----------------------------------------------------------|-----------------------------------------------------------------------------|----------------------------------------------------------------------------------|
-| Menjelaskan mengapa pengembang web akan menggunakan alat | Dijelaskan bagaimana, tetapi tidak mengapa pengembang akan menggunakan alat | Tidak disebutkan bagaimana atau mengapa seorang pengembang akan menggunakan alat |
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md
deleted file mode 100644
index 36c8f18d..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.it.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Leggere la Documentazione
-
-## Istruzioni
-
-Ci sono molti strumenti dei quali uno sviluppatore web potrebbe avere bisogno che non sono nella [documentazione MDN per strumenti lato client](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selezionare 3 strumenti non trattati nella lezione, spiegare perchè uno sviluppatore web dovrebbe usarli, cercare uno strumento che possa rientrare in questa categoria e condivere la sua documentazione. Non usare lo stesso strumento di esempio citato nei documenti MDN.
-
-## Rubrica
-
-Ottimo | Adeguato | Necessari miglioramenti
---- | --- | -- |
-|Spiega perchè uno sviluppatore web dovrebbe usare lo strumento| Spiega come, ma non perchè uno sviluppatore web dovrebbe usare lo strumento| Non menziona come o perchè uno sviluppatore web dovrebbe usare lo strumento  |
\ No newline at end of file
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md
deleted file mode 100644
index 9c18dc8d..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ja.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# ドキュメントを読む
-
-## 説明書
-
-Web 開発者が必要とする可能性のあるツールは、[クライアントサイドツールの MDN ドキュメント](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)に記載されているものが多くあります。このレッスンでカバーされていないツールを3つ選び、Web 開発者がそれを使う理由を説明し、このカテゴリに該当するツールを検索し、そのドキュメントを共有してください。同じツールの例を MDN ドキュメント上で使用しないでください。
-
-## ルーブリック
-
-模範的な例 | 適切な | 改善が必要
---- | --- | -- |
-|Web 開発者がツールを使う理由を説明| 開発者がツールを使用する理由ではなく、どのように使用するかを説明しました。| 開発者がツールを使用する方法や理由については言及していません。  |
\ No newline at end of file
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md
deleted file mode 100644
index ff32c318..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ko.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 공식문서 읽기
-
-## 설명
-
-웹 개발자들이 필요할 만한 도구들이 [MDN 클라이언트 사이드 도구 문서](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)에 소개되어있습니다. 이번 수업내용에 포함되지 않은 3개의 도구를 선택하고, 왜 웹 개발자들이 사용할만한지를 설명해봅시다. 그리고 이 범주에 속하는 도구를 찾아서 문서를 공유해봅시다. MDN문서에 있는 똑같은 예시를 사용하면 안 됩니다.
-
-## 평가 기준
-
-모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | ---
-웹 개발자가 도구를 사용하는 이유를 설명한 경우 | 개발자가 도구를 사용하는 방법은 설명했지만 도구를 사용하는 이유는 설명하지 않은 경우 | 개발자가 도구를 사용하는 이유나 방법을 설명하지 않은 경우
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ml.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ml.md
deleted file mode 100644
index 09bc60b5..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ml.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# ഡോക്‌സ് വായിക്കുന്നു
-
-## നിർദ്ദേശങ്ങൾ
-
-ഒരു വെബ് ഡെവലപ്പർക്ക് ആവശ്യമായേക്കാവുന്ന നിരവധി ടൂളുകൾ ഇതിൽ ഉണ്ട് [ക്ലയന്റ് സൈഡ് ടൂളിങ്ങിനുള്ള MDN ഡോക്യുമെന്റേഷൻ](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/1-intro-to-programming-languages/translations/assignment.ms.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md
deleted file mode 100644
index 13a6d9c4..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ms.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Membaca Docs
-
-## Arahan
-Terdapat banyak alat yang mungkin diperlukan oleh pembangun web adalah di [Dokumentasi MDN untuk perkakas sisi pelanggan](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Pilih 3 alat yang tidak diliputi dalam pelajaran, terangkan mengapa pembangun web menggunakannya, dan mencari alat yang terdapat dalam kategori ini dan kongsikan dokumentasinya. Jangan menggunakan contoh alat yang sama pada MDN.
-
-## Rubrik 
-
-Contoh | Mencukupi | Usaha Lagi
---- | --- | -- |
-|Terangkan mengapa pembangun web menggunakan alat| Terangkan bagaimana dan mengapa pembangun akan menggunakan alat| Tidak menyebut bagaimana atau mengapa pembangun menggunakan alat  |
\ No newline at end of file
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md
deleted file mode 100644
index d6100309..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.nl.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# De Documenten lezen
-
-## Instructies
-
-Er zijn veel tools die een webontwikkelaar nodig heeft en die staan in de [MDN-documentatie voor client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecteer 3 tools die niet in de les worden behandeld, leg uit waarom een webontwikkelaar deze zou gebruiken en zoek naar een tool die onder deze categorie valt en deel de documentatie ervan. Gebruik niet hetzelfde toolvoorbeeld voor MDN-documenten.
-
-## Rubriek
-
-Voorbeeldig | Voldoende | Moet Worden Verbeterd
---- | --- | -- |
-|Uitgelegd waarom webontwikkelaar een tool zou gebruiken| Uitgelegd hoe, maar niet waarom de ontwikkelaar de tool zou gebruiken| Niet vermeld hoe of waarom een ontwikkelaar een tool zou gebruiken  |
\ No newline at end of file
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.pt.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.pt.md
deleted file mode 100644
index 6c562b06..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.pt.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Lendo a documentação
-
-## Instruções
-
-Existem muitas ferramentas que uma pessoa desenvolvedora de web pode precisar que estão na [documentação MDN para ferramentas do lado do cliente (versão em inglês)](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Selecione 3 ferramentas não abordadas na lição, explique por que uma dev Web as usaria, procure uma ferramenta que se enquadre nesta categoria e compartilhe sua documentação. Não use o mesmo exemplo de ferramenta em documentos MDN.
-
-## Rubrica
-
-Exemplar | Adequado | Precisa de melhorias
---- | --- | - |
-| Explicado por que uma pessoa desenvolvedora de web usaria a ferramenta | Explicou como, mas não por que uma pessoa desenvolvedora de web usaria a ferramenta | Não mencionou como ou por que uma pessoa desenvolvedora de web usaria a ferramenta |
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ru.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ru.md
deleted file mode 100644
index fd3058d6..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ru.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Чтение документации
-
-## Инструкция
-
-Существует много инструментов, которые могут понадобиться веб-разработчику в процессе работы. Их можно найти на [MDN documentation for client-side tooling](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). Выберите 3 инструмента из тех, которые не были рассмотрены в этом уроке и объясните, с какой целью веб-разработчик мог бы их использовать. Найдите тот, который входит в данную категорию, и поделитесь его документацией. Не используйте тот же пример инструмента, как и в документации MDN.
-
-## Категории
-
-| Образцовая                                                       | Адекватная                                                                 | Нуждается в улучшении                                |
-| ---------------------------------------------------------------- | -------------------------------------------------------------------------- | ---------------------------------------------------- |
-| Объяснение почему веб-разработчик мог бы использовать инструмент | Объяснение как, а не почему веб-разработчик мог бы использовать инструмент | Нет упоминаний зачем или как использовать инструмент |
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md
deleted file mode 100644
index 2b9b658f..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.sw.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Soma Nyaraka
-
-## Maagizo
-
-Msanidi wa wavuti anaweza kuhitaji zana nyingi ambazo zinaweza kupatikana kwenye [Hati ya MDN ya Utengenezaji Upande wa Mteja](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview). 
-
-Chagua zana 3 ambazo hazijafunikwa kwenye somo, eleza ni kwanini msanidi wa wavuti atatumia, pata zana ambayo iko kwenye kitengo hiki, na ushiriki nyaraka zake. Usitumie zana sawa ya sampuli kwenye hati za MDN.
-
-## Kichwa
-
-| Nakili | Inatosha                                                                                                                           | Inahitaji kuimarishwa                                      |
-| ------ | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- |
-| Imefafanuliwa kwanini msanidi wa wavuti atatumia zana hiyo | Imefafanuliwa jinsi, lakini sio kwa nini msanidi programu atatumia zana | Haikutaja jinsi au kwa nini msanidi programu atatumia zana |
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ta.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ta.md
deleted file mode 100644
index 664e39ca..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.ta.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# ஆவணத்தைப் படித்தல்
-
-## செயல்துறைக்கட்டளை
-
-ஒரு வலை டெவலப்பர் தேவைஎன்று பல கருவிகள் உள்ளன [வாடிக்கையாளர் பக்க கருவிகளுக்கு எம்டிஎன் இன் ஆவணங்கள்](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview).பாடத்தில் உள்ளடக்கப்படாத 3 கருவிகளைத் தேர்ந்தெடுத்து, ஒரு வலை டெவலப்பர் ஏன் அதைப் பயன்படுத்துவார் என்பதை விளக்கவும், இந்த வகையின் கீழ் வரும் ஒரு கருவியைத் தேடவும் மற்றும் அதன் ஆவணங்களைப் பகிர்ந்து கொள்ளவும். எம்டிஎன் ஐ ஆவணத்தில் ஒரே கருவி உதாரணத்தைப் பயன்படுத்த வேண்டாம்.
-
-
-## இயல் மேல்வரி
-
-பின்பற்றத்தக்க | போதிய | தேவை மேம்பாடு
---- | --- | -- |
-|வலை உருவாக்குநர் ஏன் கருவியைப் பயன்படுத்துவார் என்பதை விளக்கினார்| எப்படி விளக்கினார், ஆனால் டெவலப்பர் ஏன் கருவியைப் பயன்படுத்துவார் என்று அல்ல| ஒரு டெவலப்பர் கருவியை எவ்வாறு அல்லது ஏன் பயன்படுத்துவார் என்பதைக் குறிப்பிடவில்லை  |
\ No newline at end of file
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
deleted file mode 100644
index b07f04f8..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.uk.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Читання документів
-
-## Інструкції
-
-Існує багато інструментів, які можуть знадобитися веб-розробнику  [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/1-intro-to-programming-languages/translations/assignment.zh-cn.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-cn.md
deleted file mode 100644
index e29de1c8..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-cn.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 阅读文档
-
-## 说明
-
-[MDN 客户端工具文档](https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)中介绍了需要 Web 开发者可能需要用到的工具。从中选取三种本节课中没有提到的工具，并说明为什么 Web 开发者需要用到它们，搜索其中一种工具并给出它的文档。不要直接使用 MDN 中给出的示例。
-
-## 评价表
-
-| 优秀 | 良好 | 尚可进步 |
-| --- | --- | --- |
-| 解释了 Web 开发者为什么需要这些工具 | 解释了开发者如何使用这些工具，但却没有解释为什么需要它们 | 既没有解释为什么使用这些工具，也没有给出使用它们的方法 |
diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md
deleted file mode 100644
index 57658f91..00000000
--- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 閱讀技術文件
-
-## 說明
-
-網頁開發人員所需要使用的工具套件可以參考 [MDN Client端技術開發文件](https://developer.mozilla.org/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)。 請選擇三種未被本課程提及的工具，試解釋為何網頁開發人員使用它，並搜尋其相關的工具與它的技術文件。這些資料不能出現在前述的 MDN 文件當中。
-
-## 學習評量
-
-| 優良                           | 普通                 | 待改進                         |
-| ------------------------------ | -------------------- | ------------------------------ |
-| 解釋為何網頁開發人員會用此工具 | 只解釋工具的使用方法 | 未提及工具的使用意義與使用方法 |
\ No newline at end of file
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.es.md b/1-getting-started-lessons/2-github-basics/translations/README.es.md
deleted file mode 100644
index 93d561e2..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.es.md
+++ /dev/null
@@ -1,332 +0,0 @@
-# Introducción a GitHub
-
-Esta lección cubre los conceptos básicos de GitHub, una plataforma para alojar y administrar cambios en tu código.
-
-![Introducción a GitHub](/sketchnotes/webdev101-github.png)
-> Dibujo de [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## [Cuestionario previo a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
-
-### Introducción
-
-En esta lección, cubriremos:
-
-- Seguimiento de trabajo que se realiza en su máquina.
-- Trabajar en proyectos con otros.
-- Cómo contribuir al software de código abierto (Open Source)
-
-### Prerrequisitos
-
-Antes de comenzar, debemos verificar si Git está instalado. Escribe en tu terminal:
-`git --version`
-
-Si Git no está instalado, [descargue Git desde aquí](https://git-scm.com/downloads). Luego, configure su perfil de Git local en la terminal:
-`git config --global user.name "tu-nombre"`
-`git config --global user.email "tu-email"`
-
-Para comprobar si Git ya está configurado, escribe:
-`git config --list`
-
-También necesitarás una cuenta de GitHub, un editor de código (como Visual Studio Code) una terminal (también conocida como línea de comandos o símbolo del sistema).
-
-Ve a [GitHub.com](https://github.com/) y crea una cuenta si aún no lo has hecho, o inicia sesión y completa tu perfil.
-
-✅ GitHub no es el único lugar para almacenar código; hay otros, pero GitHub es el más conocido.
-
-### Preparación
-
-Necesitarás un directorio con un proyecto de código en tu máquina local (computadora portátil o PC) y un repositorio público en GitHub, que te servirá como ejemplo de cómo contribuir a los proyectos de otros.
-
----
-
-## Gestión de código
-
-Digamos que tienes una directorio local con algún proyecto de código y deseas rastrear tu progreso usando git (sistema de control de versiones). Algunas personas comparan el uso de git con escribir una carta de amor a tu futuro. Al leer tus mensajes de confirmación días, semanas o meses después, podrás recordar por qué tomaste una decisión o "revertiste" un cambio, siempre y cuando escribas buenos mensajes a la hora de enviar un commit.
-
-### Tarea: Hacer un repositorio git y enviar código
-
-> Revisa este video
-> 
-> [![Video de los conceptos básicos de Git y GitHub](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4)
-
-1. **Crear repositorio en GitHub**. En GitHub.com, en la pestaña de repositorios, o en la barra de navegación superior derecha, busca el botón **nuevo repositorio**.
-
-    1. Dale un nombre a tu repositorio (directorio)
-    1. Selecciona **Crear Repositorio**.
-
-1. **Navegue a su directorio de trabajo**. En su terminal, navegue hasta el directorio donde tiene su proyecto que deseas comenzar a rastrear. Escribe:
-
-   ```bash
-   cd [nombre de su directorio]
-   ```
-
-1. **Inicializar un repositorio de git**. En su proyecto escribe:
-
-   ```bash
-   git init
-   ```
-
-1. **Comprobar estado**. Para comprobar el estado del proyecto escribe:
-
-   ```bash
-   git status
-   ```
-
-   La respuesta de la terminal (CLI) probablemente se verá así:
-
-   ```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
-   ```
-
-   Por lo general, el comando `git status` nos avisa qué archivos están listos para ser guardados en el repositorio o cambios en tu codigo que puedes conservar.
-
-1. **Agregar archivos al seguimiento**
-
-   ```bash
-   git add .
-   ```
-
-   El comando `git add` más `.` indica que todos tus archivos y cambios están listos para darles seguimiento.
-
-1. **Agregar archivos puntuales**
-
-   ```bash
-   git add [nombre de archivo o carpeta]
-   ```
-
-  Esto nos ayuda a agregar solo los archivos seleccionados al área de preparación cuando no queremos confirmar todos los archivos a la vez.
-
-
-1. **Eliminar archivos de la zona de staging**
-
-   ```bash
-   git reset
-   ```
-
-  Este comando nos ayuda a eliminar todos los archivos a la vez.
-
-
-1. **Quitar un archivo en particular**
-
-   ```bash
-   git reset [nombre del archivo o carpeta]
-   ```
-
-  Este comando nos ayuda a eliminar un archivo/directorio puntual, para que éste no sea enviado en el próximo commit.
-
-
-1. **Persistir en tu trabajo**. En este punto, has agregado los archivos a lo que se denomina _stagin area_. Un lugar donde Git rastrea tus archivos. Para que el cambio sea permanente, debes realizar un _commit_. Para hacerlo, utilizas el siguiente commando `git commit`. Un _commit_ representa un punto en el historial de tu repositorio que estás guardando, este viene acompañado de un mensaje, el cual nos sirve para saber que cambios se hicieron dentro de ese commit. Ejecuta el siguiente comando para realizar tu primer commit.
-
-   ```bash
-   git commit -m "first commit"
-   ```
-
-   Esto confirma todos tus archivos, agregando el mensaje "first commit". Para futuros mensajes de confirmación, querrás ser más descriptivo en tu descripción para transmitir qué tipo de cambio has realizado.
-
-1. **Conecta tu repositorio de Git local con GitHub**. Es bueno tener un repositorio de Git en tu máquina, pero también tienes que guardar todos estos archivos en algún lugar e invitar a otras personas a trabajar contigo en tu repositorio. Un buen lugar para hacerlo es GitHub. Recuerda que ya hemos creado un repositorio en GitHub, por lo que lo único que debemos hacer es conectar nuestro repositorio de Git local con GitHub. El comando `git remote add` hará precisamente eso. Escribe el siguiente comando:
-
-   > Nota, antes de escribir el comando, ve a la página de tu repositorio de GitHub para encontrar el URL del repositorio. Lo usarás en el siguiente comando. Reemplaza `repository_name` con tu URL de GitHub.
-
-   ```bash
-   git remote add origin https://github.com/USUARIO/NOMBRE_DEL_REPOSITORIO.git
-   ```
-
-   Esto crea un _remote_, o conexión, llamado "origin" que apunta al repositorio de GitHub que creaste anteriormente.
-   
-   Si tienes una conexión previa con algún "origin" y deseas cambiar la dirección puedes utilizar el siguiente comando:
-   
-   ```bash
-   git remote set-url https://github.com/USUARIO/NOMBRE DEL REPOSITORIO.git
-   ```
-
-1. **Envía archivos locales a GitHub**. Hasta ahora ha creado una _conexión_ entre el repositorio local y el repositorio de GitHub. Enviemos estos archivos a GitHub con el siguiente comando `git push`, así:
- 
-
-   ```bash
-   git push -u origin main
-   ```
-
-   Esto envía una confirmación en tu rama "main" en GitHub.
-
-1. **Para agregar más cambios**. Si deseas continuar haciendo cambios y enviarlos a GitHub, solo necesitas usar los siguientes tres comandos:
-
-   ```bash
-   git add .
-   git commit -m "escribe tu mensaje de confirmación aquí"
-   git push
-   ```
-
-   > Sugerencia: es posible que también desees adoptar un archivo `.gitignore` para evitar que los archivos que no deseas rastrear aparezcan en GitHub. Puedes encontrar plantillas para archivos `.gitignore` en [.gitignore templates](https://github.com/github/gitignore).
-
-
-#### Confirmar mensajes
-
-Una buena línea de asunto (subject line), completa la siguiente frase: "Si se aplica, este commit hará..."
-
-Para el asunto use el imperativo, tiempo presente: "cambiar" no "cambió" ni "cambiará".
-Como en el asunto, en el cuerpo (opcional) también use el presente imperativo. El cuerpo debe incluir el motivo del cambio y contrastarlo con el funcionamiento previo. Estás explicando el "por qué", no el "cómo".
-
-✅ Tómate unos minutos para navegar por GitHub. ¿Puedes encontrar un mensaje de commit realmente bueno? ¿Puedes hallar uno aún más simple? ¿Qué información crees que es la más importante y útil de transmitir en un mensaje de commit?
-
-### Tarea: Colaborar
-
-La razón principal para poner cosas en GitHub fue hacer posible la colaboración con otros desarrolladores.
-
-## Trabajando en proyectos con otros
-
-> Revisa este video
->
-> [![Video de los conceptos básicos de Git y GitHub](https://img.youtube.com/vi/bFCM-PC3cu8/0.jpg)](https://www.youtube.com/watch?v=bFCM-PC3cu8)
-
-En tu repositorio, ve a `Insights > Community` para ver cómo se compara tu proyecto con los estándares comunitarios recomendados.
-
-   Aquí hay algunas cosas que pueden mejorar tu repositorio de GitHub:
-   - **Descripción**. ¿Agregaste una descripción para tu proyecto?
-   - **README**. ¿Agregaste un archivo README? GitHub proporciona una guía para escribir un [README](https://docs.github.com/articles/about-readmes/).
-   - **Guía de contribución**. ¿Tiene [guías de contribución](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/) tu proyecto?
-   - **Código de Conducta**. Crea un [Código de conducta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/).
-   - **Licencia**. Quizás lo más importante, una [licencia](https://docs.github.com/articles/adding-a-license-to-a-repository/).
-
-Todos estos recursos beneficiarán la incorporación de nuevos miembros del equipo. Y esos son típicamente el tipo de cosas que los nuevos colaboradores miran antes incluso de mirar tu código, para descubrir si tu proyecto es el lugar adecuado para que ellos pasen su tiempo.
-
-✅ Los archivos README, aunque requieren tiempo para prepararse, a menudo son descuidados por los mantenedores. ¿Puedes encontrar un ejemplo de uno particularmente descriptivo? Nota: aquí hay algunas [herramientas para ayudar a crear buenos archivos READMEs](https://www.makeareadme.com/) que te puedes probar.
-
-
-### Tarea: Fusionar (merging) código
-
-Los documentos de contribución ayudan a las personas a contribuir al proyecto. Explica qué tipos de contribuciones estás buscando y cómo funciona el proceso. Los colaboradores deberán seguir una serie de pasos para poder contribuir a tu repositorio en GitHub:
-
-1. **Bifurcando (forking) tu repositorio** Probablemente querrás que la gente _bifurque_ (fork) tu proyecto. Bifurcar significa crear una réplica de tu repositorio en su perfil de GitHub.
-1. **Clonar**. Desde allí, clonarán el proyecto en su máquina local.
-1. **Crear una rama**. Querrás pedirles que creen una _rama_ para su trabajo.
-1. **Concentre su cambio en un área**. Pida a los colaboradores que concentren sus contribuciones en una cosa a la vez; de esa manera, las posibilidades de _fusionar_ su trabajo son mayores. Imagínate que escriben una corrección de errores, agregan una nueva función y actualizan varias pruebas; ¿qué sucede si quieres todos los cambios o solo puedes implementar 2 de 3 ó 1 de 3 cambios?
-
-✅ Imagínate una situación en la que las ramas (branches) de git son particularmente críticas para escribir y enviar buen código. ¿Qué casos de uso se te ocurren?
-
-> Sé el cambio que deseas ver en el mundo y crea también ramas  para tu propio trabajo. Todos los commits que hagas se realizarán en la rama en la que estás actualmente "registrado". Usa `git status` para ver qué rama es.
-
-Repasemos el flujo de trabajo de un colaborador. Supongamos que el colaborador ya ha _bifurcado_ y _clonado_ el repositorio para que tenga un repositorio de Git listo para trabajar en su máquina local:
-
-1. **Crea una rama**. Usa el comando `git branch` para crear una rama que tendrá los cambios que quieres contribuir:
-
-   ```bash
-   git branch [branch-name]
-   ```
-
-1. **Cambiar a rama de trabajo**. Cambia a la rama especificada y actualiza tu directorio de trabajo con `git switch`:
-
-   ```bash
-   git switch [branch-name]
-   ```
-
-1. **Trabaja**. En este punto, deseas agregar tus cambios. No olvides informarle a Git con los siguientes comandos:
-
-   ```bash
-   git add .
-   git commit -m "mis cambios"
-   ```
-
-   Asegúrate de darle un buen nombre a tu commit, tanto por tu bien como por el del mantenedor del repositorio en el que estás ayudando.
-
-1. **Combina tu trabajo con la rama `principal`**. En algún momento has terminado de trabajar y deseas combinar tu trabajo con el de la rama `principal`. La rama `main` podría haber cambiado mientras tanto, así que asegúrate de actualizarla con los siguientes comandos:
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-   En este punto, querrás asegurarte de que cualquier _conflicto_, situaciones en las que Git no pueda _combinarse_ fácilmente los cambios, ocurran en tu rama de trabajo. Por lo tanto, ejecuta los siguientes comandos:
-
-   ```bash
-   git switch [branch_name]
-   git merge main
-   ```
-
-   Esto traerá todos los cambios de `main` a su rama y es de esperar que pueda continuar. De lo contrario, VS Code le dirá dónde está _confundido_ Git y simplemente modificará los archivos afectados para decir qué contenido es el más preciso.
-
-1. **Envía tu trabajo a GitHub**. Enviar tu trabajo a GitHub significa dos cosas. Empujar tu rama a tu repositorio y luego abrir un PR (Pull Request).
-
-   ```bash
-   git push --set-upstream origin [branch-name]
-   ```
-
-   El comando anterior crea la rama en tu repositorio bifurcado.
-
-2. **Abre un Pull Request**. A continuación, abre un PR. Para hacerlo, navega al repositorio bifurcado en GitHub. Verás una indicación en GitHub donde te preguntarán si deseas crear un nuevo PR. Haz clic allí y te llevará a una interfaz donde puedes cambiar el título del mensaje de commit, asígnale una descripción más adecuada. Ahora, el mantenedor del repositorio que bifurcaste verá esta PR y _dedos cruzados_ valorarán y _fusionarán_ tu PR. Ahora eres un colaborador, ¡yay! :)
-
-3. **Limpiar**. Se considera una buena práctica "_limpiar_" después de que tu Pull Request fue combinado a la rama principal exitosamente. Limpia tanto tu rama local como la rama que enviaste a GitHub. Primero eliminémoslo localmente con el siguiente comando:
-
-   ```bash
-   git branch -d [branch-name]
-   ```
-
-   Asegúrate de ir a la página de GitHub del repositorio bifurcado a continuación y elimina la rama remota que acabas de ingresar.
-
-`Solicitud de extracción` (Pull request) parece un término tonto porque realmente deseas impulsar los cambios al proyecto. Pero el mantenedor (propietario del proyecto) o el equipo central debe considerar tus cambios antes de fusionarlo con la rama "principal" del proyecto, por lo que realmente estás solicitando una decisión de cambio a un mantenedor.
-
-Una Pull request es el lugar para comparar y discutir las diferencias introducidas en una rama con revisiones, comentarios, pruebas integradas y más. Una buena Pull request sigue aproximadamente las mismas reglas que un mensaje de commit. Puedes agregar una referencia a un problema (issue) en el rastreador de problemas, cuando tu trabajo, por ejemplo, soluciona un problema. Esto se hace usando un '#' seguido del número de tu problema. Por ejemplo, `#97`.
-
-🤞 Cruza los dedos para que todos los controles pasen y los propietarios del proyecto combinen tus cambios en el proyecto🤞
-
-Actualiza tu rama de trabajo local actual con todas las nuevas confirmaciones de la rama remota correspondiente en GitHub:
-
-`git pull`
-
-## Cómo contribuir al código abierto
-
-Primero, busquemos un repositorio en GitHub que te interese y al que te gustaría contribuir con un cambio. Querrás copiar el contenido a nuestra máquina.
-
-✅ Una buena forma de encontrar repositorios 'aptos para principiantes' es [buscar por la etiqueta `good-first-issue`](https://github.blog/2020-01-22-browse-good-first-issues-para-empezar-a-contribuir-al-código-abierto/).
-
-![Copia un repositorio localmente](../images/clone_repo.png)
-
-Hay varias formas de copiar código. Una forma es "clonar" el contenido del repositorio, usando HTTPS, SSH o usando GitHub CLI (Interfaz de línea de comandos).
-
-Abre tu terminal y clona el repositorio así:
-`git clone https://github.com/ProjectURL`
-
-Para trabajar en el proyecto, cambia al directorio correcto:
-`cd ProjectURL`
-
-También puedes abrir todo el proyecto utilizando [Codespaces](https://github.com/features/codespaces), el entorno de desarrollo en la nube / editor de código integrado de GitHub o [GitHub Desktop](https://desktop.github.com/).
-
-Por último, puedes descargar el código en un directorio comprimido.
-
-### Algunas cosas más interesantes sobre GitHub
-
-Puedes destacar, ver y/o hacer "fork" cualquier repositorio público en GitHub. Asimismo, encontrar tus repositorios destacados en el menú desplegable de la parte superior derecha. Es como marcar como favorito, pero por código.
-
-Los proyectos tienen un rastreador de problemas, principalmente en GitHub en la pestaña "Issues" a menos que se indique lo contrario, donde las personas debaten los problemas relacionados con el proyecto. Y la pestaña Pull requests es donde las personas debaten y revisan los cambios que están en curso.
-
-Los proyectos también pueden tener discusiones en foros, listas de correo o canales de chat como Slack, Discord o IRC.
-
-✅ Echa un vistazo a tu nuevo repositorio de GitHub y prueba algunas cosas, como editar la configuración, agregar información a tu repositorio y crear un proyecto (como un tablero Kanban). ¡Hay muchas cosas que puedes hacer!
-
----
-
-## 🚀 Reto
-
-Reúnete con un amigo para trabajar en el código del otro. Crea un proyecto en colaboración, haz fork del código, crea ramas y hagan merge a los cambios.
-
-## [Cuestionario posterior a la clase](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
-
-## Revisión y Autoestudio
-
-Obtén más información sobre [contribución al software de código abierto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
-
-[Hoja de referencia de Git](https://training.github.com/downloads/github-git-cheat-sheet/).
-
-Practica, practica, practica. GitHub tiene excelentes rutas de aprendizaje disponibles a través de [skills.github.com](https://skills.github.com/):
-
-- [Primera semana en GitHub](https://skills.github.com/#first-week-on-github)
-
-También encontrarás laboratorios más avanzados.
-
-## Tarea
-
-Completa [La Primera Semana en el Laboratorio de capacitación de GitHub](https://skills.github.com/#first-week-on-github)
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
deleted file mode 100644
index 80f78b69..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.fil.md
+++ /dev/null
@@ -1,318 +0,0 @@
-# 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://ashy-river-0debb7803.1.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 switch`:
-
-   ```bash
-   git switch [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 switch 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 switch [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://ashy-river-0debb7803.1.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/2-github-basics/translations/README.fr.md b/1-getting-started-lessons/2-github-basics/translations/README.fr.md
deleted file mode 100644
index cd5c1fc0..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.fr.md
+++ /dev/null
@@ -1,318 +0,0 @@
-# Introduction à GitHub
-
-Cette leçon couvre les principes de base de GitHub, une plateforme permettant d’héberger et de gérer les modifications apportées à votre code.
-
-![Intro to GitHub](/sketchnotes/webdev101-github.png)
-> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz préalable
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=fr)
-
-## Introduction
-
-Dans cette leçon, nous allons couvrir :
-
-- suivre le travail que vous faites sur votre machine
-- travailler sur des projets avec d’autres personnes
-- comment contribuer aux logiciels open source
-
-### Prérequis
-
-Avant de commencer, vous devrez vérifier si Git est installé. Dans le type de terminal : 
-`git --version`
-
-Si Git n’est pas installé, [télécharger Git](https://git-scm.com/downloads). Ensuite, configurez votre profil Git local dans le terminal:
-* `git config --global user.name " votre-nom"`
-* `git config --global user.email " your-email"`
-
-Pour vérifier si Git est déjà configuré, vous pouvez taper :
-`git config --list`
-
-Vous aurez également besoin d’un compte GitHub, d’un éditeur de code (comme Visual Studio Code), et vous devrez ouvrir votre terminal (ou : invite de commandes).
-
-Accédez à [github.com](https://github.com/) et créez un compte si vous ne l’avez pas déjà fait, ou connectez-vous et remplissez votre profil. 
-
-✅ GitHub n’est pas le seul référentiel de code au monde; il y en a d’autres, mais GitHub est le plus connu
-
-### Préparation
-
-Vous aurez besoin à la fois d’un dossier avec un projet de code sur votre ordinateur local (ordinateur portable ou PC) et d’un référentiel public sur GitHub, qui servira d’exemple pour contribuer aux projets d’autres personnes.  
-
----
-
-## Gestion du code
-
-Supposons que vous ayez un dossier localement avec un projet de code et que vous souhaitiez commencer à suivre votre progression à l’aide de git - le système de contrôle de version. Certaines personnes comparent l’utilisation de git à l’écriture d’une lettre d’amour à votre futur moi. En lisant vos messages de validation des jours, des semaines ou des mois plus tard, vous pourrez vous rappeler pourquoi vous avez pris une décision, ou " annuler " une modification - c’est-à-dire lorsque vous écrivez de bons " messages de validation ".
-
-### Tâche : créer un référentiel et valider le code
-
-1. **Créer un référentiel sur GitHub**. Sur GitHub.com, dans l’onglet Référentiels ou dans la barre de navigation en haut à droite, recherchez le bouton **nouveau référentiel**.
-
-   1. Donnez un nom à votre référentiel (dossier)
-   1. Sélectionnez **créer un référentiel**.
-
-1. **Accédez à votre dossier de travail**. Dans votre terminal, basculez vers le dossier (également connu sous le nom de répertoire) que vous souhaitez démarrer le suivi. Tapez :
-
-   ```bash
-   cd [nom de votre dossier]
-   ```
-
-1. **Initialiser un dépôt git**. Dans votre type de projet :
-
-   ```bash
-   git init
-   ```
-
-1. **Vérifier l’état**. Pour vérifier l’état de votre type de référentiel :
-
-   ```bash
-   git status
-   ```
-
-   la sortie peut ressembler à ceci :
-
-   ```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
-   ```
-
-   En règle générale, une commande `git status` vous indique des choses comme quels fichiers sont prêts à être _enregistrés_ dans le référentiel ou contient des modifications que vous voudrez peut-être conserver.
-
-1. **Ajouter tous les fichiers pour le suivi**
-   Cela s’appelle aussi fichiers intermédiaires/ ajout de fichiers à la zone de transit.
-
-   ```bash
-   git add .
-   ```
-
-   L’argument `git add` plus `.` indique que tous vos fichiers &changes pour le suivi. 
-
-1. **Ajouter les fichiers sélectionnés pour le suivi**
-
-  ```bash
-   git add [nom du fichier ou du dossier]
-   ```
-
-   Cela nous aide à ajouter uniquement les fichiers sélectionnés à la zone de transit lorsque nous ne voulons pas valider tous les fichiers à la fois.
-
-1. **Défaire la scène de tous les fichiers**
-
-   ```bash
-   git reset
-   ```
-
-   Cette commande nous aide à défaire tous les fichiers à la fois.
-
-1. **Défaire un fichier particulier**
-
-   ```bash
-   git reset [nom du fichier ou du dossier]
-   ```
-
-   Cette commande nous aide à défaire un fichier particulier à la fois que nous ne voulons pas inclure pour le prochain commit.
-
-1. **Persistance de votre travail**. À ce stade, vous avez ajouté les fichiers à un soi-disant _staging area_. Un endroit où Git suit vos fichiers. Pour rendre la modification permanente, vous devez _valider_ les fichiers. Pour ce faire, vous créez un _commit_ avec la commande `git commit`. Un _commit_ représente un point d’enregistrement dans l’historique de votre référentiel. Tapez ce qui suit pour créer un _commit_ :
-
-   ```bash
-   git commit -m " premier commit "
-   ```
-
-   Cela valide tous vos fichiers, en ajoutant le message " premier commit ". Pour les futurs messages de validation, vous voudrez être plus descriptif dans votre description pour indiquer le type de modification que vous avez apportée.
-
-1. **Connectez votre référentiel Git local avec GitHub**. Un référentiel Git est bon sur votre machine, mais à un moment donné, vous voulez avoir une sauvegarde de vos fichiers quelque part et également inviter d’autres personnes à travailler avec vous sur votre dépôt. GitHub est un excellent endroit pour le faire. N’oubliez pas que nous avons déjà créé un référentiel sur GitHub, donc la seule chose que nous devons faire est de connecter notre référentiel Git local à GitHub. La commande `git remote add` fera exactement cela. Tapez la commande suivante :
-
-   > Remarque, avant de taper la commande, accédez à votre page de référentiel GitHub pour trouver l’URL du référentiel. Vous l’utiliserez dans la commande ci-dessous. Remplacez `repository_name` par votre URL GitHub.
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
-   Cela crée un _remote_, ou une connexion, nommé " origin " pointant vers le référentiel GitHub que vous avez créé précédemment.
-
-1. **Envoyer des fichiers locaux à GitHub**. Jusqu’à présent, vous avez créé une _connexion_ entre le référentiel local et le référentiel GitHub. Envoyons ces fichiers à GitHub avec la commande suivante `git push`, comme suit: 
-
-   ```bash
-   git push -u origin main
-   ```
-
-   Cela envoie vos commits dans votre branche "main" à GitHub..
-
-1. **Pour ajouter d’autres modifications**. Si vous souhaitez continuer à apporter des modifications et à les pousser vers GitHub, il vous suffit d’utiliser les trois commandes suivantes:
-
-   ```bash
-   git add .
-   git commit -m " tapez votre message de validation ici "
-   git push
-   ```
-
-   > Conseil, vous pouvez également adopter un fichier `.gitignore` pour empêcher les fichiers que vous ne souhaitez pas suivre d’apparaître sur GitHub - comme ce fichier de notes que vous stockez dans le même dossier mais n’a pas sa place sur un référentiel public. Vous pouvez trouver des modèles pour les fichiers `.gitignore` dans [.gitignore templates](https://github.com/github/gitignore).
-
-#### Valider les messages
-
-Une grande ligne d’objet de commit Git complète la phrase suivante:
-S’il est appliqué, ce commit le sera
-
-Pour le sujet, utilisez l’impératif, présent: "changement" pas "changé" ni "changements". 
-Comme dans le sujet, dans le corps (facultatif) utilisez également l’impératif, le présent. Le corps doit inclure la motivation du changement et contraster cela avec le comportement précédent. Vous expliquez le `pourquoi`, pas le `comment`.
-
-✅ Prenez quelques minutes pour surfer sur GitHub. Pouvez-vous trouver un très bon message d’engagement? Pouvez-vous en trouver un vraiment minime? Quelles informations pensez-vous être les plus importantes et les plus utiles à transmettre dans un message de validation ?
-
-### Tâche : Collaborer
-
-La principale raison de mettre des choses sur GitHub était de permettre de collaborer avec d’autres développeurs.
-
-## Travailler sur des projets avec d’autres
-
-Dans votre référentiel, accédez à `Insights > Community ` pour voir comment votre projet se compare aux normes communautaires recommandées.
-
-   Voici quelques éléments qui peuvent améliorer votre référentiel GitHub :
-   - **Description**. Avez-vous ajouté une description pour votre projet ?
-   - **README**. Avez-vous ajouté un fichier README ? GitHub fournit des conseils pour l’écriture d’un [README](https://docs.github.com/articles/about-readmes/).
-   - **Guide de contribution**. Votre projet a-t-il des [directives de contribution](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
-   - **Code de conduite**. Un [Code de conduite](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
-   - **Licence**. Peut-être plus important encore, une [licence](https://docs.github.com/articles/adding-a-license-to-a-repository/) ?
-
-
-Toutes ces ressources profiteront à l’intégration des nouveaux membres de l’équipe. Et ce sont généralement le genre de choses que les nouveaux contributeurs regardent avant même de regarder votre code, pour savoir si votre projet est le bon endroit pour qu’ils passent leur temps.
-
-✅ fichiers README, bien qu’ils prennent du temps à préparer, sont souvent négligés par les mainteneurs occupés. Pouvez-vous trouver un exemple particulièrement descriptif? Remarque: il y a quelques [outils pour aider à créer de bons README](https://www.makeareadme.com/) que vous voudrez peut-être essayer.
-
-### Tâche : fusionner du code
-
-Les documents contributeurs aident les gens à contribuer au projet. Il explique les types de contributions que vous recherchez et comment le processus fonctionne. Les contributeurs devront passer par une série d’étapes pour pouvoir contribuer à votre référentiel sur GitHub :
-
-
-1. **Forker votre repo** Vous voudrez probablement que les gens _fork_ votre projet. La duplication signifie la création d’un réplica de votre référentiel sur leur profil GitHub.
-1. **Cloner**. De là, ils cloneront le projet sur leur ordinateur local. 
-1. **Créer une branche**. Vous voudrez leur demander de créer une _branche_ pour leur travail. 
-1. **Concentrez leur changement sur un seul domaine**. Demandez aux contributeurs de concentrer leurs contributions sur une chose à la fois - de cette façon, les chances que vous puissiez _fusionner_ dans leur travail sont plus élevées. Imaginez qu’ils écrivent un correctif de bogue, ajoutent une nouvelle fonctionnalité et mettent à jour plusieurs tests - que se passe-t-il si vous le souhaitez ou si vous ne pouvez implémenter que 2 modifications sur 3 ou 1 sur 3?
-
-✅ Imaginez une situation où les branches sont particulièrement essentielles à l’écriture et à l’expédition d’un bon code. À quels cas d’utilisation pouvez-vous penser ?
-
-> Remarque, soyez le changement que vous voulez voir dans le monde et créez également des branches pour votre propre travail. Tous les commits que vous faites seront effectués sur la branche que vous avez actuellement "extraite". Utilisez `git status` pour voir de quelle branche il s’agit.
-
-Passons en revue un flux de travail de contributeur. Supposons que le contributeur a déjà _forked_ et _cloné_ le référentiel afin qu’il ait un référentiel Git prêt à être travaillé, sur sa machine locale :
-
-1. **Créer une branche**. Utilisez la commande `git branch` pour créer une branche qui contiendra les modifications qu’ils veulent contribuer:
-
-   ```bash
-   git branch [nom_branche]
-   ```
-
-1. **Passer à la branche de travail**. Basculez vers la branche spécifiée et mettez à jour le répertoire de travail avec `git switch`:
-
-   ```bash
-   git switch [nom_branche]
-   ```
-
-1. **Travailler**. À ce stade, vous souhaitez ajouter vos modifications. N’oubliez pas d’en parler à Git avec les commandes suivantes:
-
-   ```bash
-   git add .
-   git commit -m " mes modifications "
-   ```
-
-   Assurez-vous de donner à votre engagement une bonne réputation, pour votre bien ainsi que pour le mainteneur du repo que vous aidez.
-
-1. **Combinez votre travail avec la branche `main`**. À un moment donné, vous avez fini de travailler et vous voulez combiner votre travail avec celui de la branche `main`. La branche `main`" a peut-être changé entre-temps, alors assurez-vous de la mettre à jour au plus tard avec les commandes suivantes:
-
-   ```bash
-   git switch principal
-   git pull
-   ```
-
-   À ce stade, vous voulez vous assurer que tous les _conflits_, les situations où Git ne peut pas facilement _combiner_ les modifications se produisent dans votre branche de travail. Par conséquent, exécutez les commandes suivantes :
-
-   ```bash
-   git switch [branch_name]
-   git merge main
-   ```
-
-   Cela apportera tous les changements de `main` dans votre branche et j’espère que vous pourrez simplement continuer. Sinon, VS Code vous dira où Git est _confus_ et vous modifiez simplement les fichiers affectés pour dire quel contenu est le plus précis.
-
-1. **Envoyez votre travail à GitHub**. L’envoi de votre travail à GitHub signifie deux choses. Pousser votre succursale à votre dépôt, puis ouvrir un PR, Pull Request.
-
-   ```bash
-   git push --set-upstream origin [nom_branche]
-   ```
-
-   La commande ci-dessus crée la branche sur votre référentiel duppliqué.
-
-1. **Ouvrez une PR**. Ensuite, vous souhaitez ouvrir une PR. Pour ce faire, accédez au référentiel forké sur GitHub. Vous verrez une indication sur GitHub où il vous demande si vous souhaitez créer une nouvelle PR, vous cliquez dessus et vous êtes emmené vers une interface où vous pouvez changer le titre du message de validation, lui donner une description plus appropriée. Maintenant, le mainteneur du repo que vous avez forké verra ce PR et _croisons les doigts_ qu’il apprécieront et _fusionnera_ votre PR. Vous êtes maintenant un contributeur, yay :)
-
-1. **Nettoyer**. Il est considéré comme une bonne pratique de _clean up_ après avoir fusionné avec succès un PR. Vous voulez nettoyer à la fois votre branche locale et la branche que vous avez poussée vers GitHub. Commençons par le supprimer localement avec la commande suivante: 
-
-   ```bash
-   git branch -d [nom_branche]
-   ```
-
-   Assurez-vous d’accéder à la page GitHub pour le référentiel duppliqué suivant et supprimez la branche distante que vous venez d’y pousser.
-
-`Pull request` semble être un terme stupide parce que vous voulez vraiment pousser vos modifications au projet. Mais le responsable (propriétaire du projet) ou l’équipe principale doit prendre en compte vos modifications avant de la fusionner avec la branche " principale " du projet, vous demandez donc vraiment une décision de modification à un responsable.  
-
-Une pull request est l’endroit idéal pour comparer et discuter des différences introduites sur une branche avec des révisions, des commentaires, des tests intégrés, etc. Une bonne pull request suit à peu près les mêmes règles qu’un message de validation. Vous pouvez ajouter une référence à un problème dans le suivi des problèmes, lorsque votre travail, par exemple, résout un problème. Cela se fait à l’aide d’un `#` suivi du numéro de votre problème. Par exemple `#97`.
-
-🤞croisons les doigts pour que toutes les vérifications réussissent et que le ou les propriétaires du projet fusionnent vos modifications dans le projet🤞
-
-Mettez à jour votre branche de travail locale actuelle avec tous les nouveaux commits de la branche distante correspondante sur GitHub :
-
-`git pull`
-
-## Comment contribuer à l’open source
-
-Tout d’abord, trouvons un référentiel (ou **repo**) sur GitHub qui vous intéresse et auquel vous souhaitez apporter une modification. Vous voudrez copier son contenu sur votre machine.
-
-✅ Un bon moyen de trouver des repos " conviviaux pour les débutants " est de [rechercher par la balise '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)
-
-Il existe plusieurs façons de copier du code. Une façon consiste à " cloner " le contenu du référentiel, en utilisant HTTPS, SSH ou en utilisant l’interface de ligne de commande GitHub CLI (Interface de ligne de commande). 
-
-Ouvrez votre terminal et clonez le référentiel comme suit:
-`git clone https://github.com/ProjectURL`
-
-Pour travailler sur le projet, basculez vers le dossier de droite :
-`cd ProjectURL`
-
-Vous pouvez également ouvrir l’ensemble du projet à l’aide de [Codespaces](https://github.com/features/codespaces), de l’éditeur de code intégré / environnement de développement cloud de GitHub ou de [GitHub Desktop](https://desktop.github.com/).
-
-Enfin, vous pouvez télécharger le code dans un dossier compressé. 
-
-### Quelques choses plus intéressantes sur GitHub
-
-Vous pouvez mettre en vedette, regarder et / ou " fork " n’importe quel référentiel public sur GitHub. Vous pouvez trouver vos référentiels étoilés dans le menu déroulant en haut à droite. C’est comme le bookmarking, mais pour le code. 
-
-Les projets ont un suivi des problèmes, principalement sur GitHub dans l’onglet " Problèmes ", sauf indication contraire, où les gens discutent des problèmes liés au projet. Et l’onglet Pull Requests est l’endroit où les gens discutent et examinent les modifications en cours.
-
-Les projets peuvent également avoir des discussions dans des forums, des listes de diffusion ou des canaux de chat tels que Slack, Discord ou IRC.
-
-✅ Jetez un coup d’œil à votre nouveau référentiel GitHub et essayez quelques éléments, comme la modification des paramètres, l’ajout d’informations à votre référentiel et la création d’un projet (comme un tableau Kanban). Il y a beaucoup de choses que vous pouvez faire!
-
----
-
-## 🚀 Challenge
-
-Associez-vous à un ami pour travailler sur le code de l’autre. Créez un projet en collaboration, bifurquez du code, créez des branches et fusionnez les modifications.
-
-## Quiz de validation des connaissances
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=fr)
-
-## Examen & Auto-apprentissage
-
-En savoir plus sur [contribuer à un logiciel open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
-
-[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
-
-Pratique, pratique, pratique. GitHub a d’excellents chemins d’apprentissage disponibles via [lab.github.com](https://lab.github.com/):
-
-- [Première semaine sur GitHub](https://lab.github.com/githubtraining/first-week-on-github)
-
-Vous trouverez également des laboratoires plus avancés. 
-
-## Affectation
-
-Complétez [la première semaine dans le laboratoire de formation GitHub](https://lab.github.com/githubtraining/first-week-on-github)
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.hi.md b/1-getting-started-lessons/2-github-basics/translations/README.hi.md
deleted file mode 100644
index 9b3e3ae6..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.hi.md
+++ /dev/null
@@ -1,315 +0,0 @@
-# गिटहब का परिचय
-
-इस पाठ में GitHub की मूल बातें शामिल हैं, जो आपके कोड में परिवर्तनों को होस्ट और प्रबंधित करने के लिए एक मंच है।
-
-![GitHub का परिचय](/sketchnotes//webdev101-github.png)
-> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=hi)
-
-## परिचय
-
-इस पाठ में, हम कवर करेंगे:
-
-- आपके द्वारा मशीन पर किए गए कार्य को ट्रैक करना
-- दूसरों के साथ परियोजनाओं पर काम करना
-- खुला स्त्रोत सॉफ़्टवेयर खोलने में योगदान कैसे करें
-
-### आवश्यक शर्तें
-
- शुरू करने से पहले, आपको जांचना होगा कि क्या Git स्थापित है। टर्मिनल में लिखे:
-`git --version`
-
-यदि गिट स्थापित नहीं है तो , [गिट डाउनलोड करे](https://git-scm.com/downloads). फिर, टर्मिनल में अपनी स्थानीय Git प्रोफ़ाइल सेट करें:
-* `git config --global user.name "your-name"`
-* `git config --global user.email "your-email"`
-
-यह जाँचने के लिए कि क्या Git पहले से कॉन्फ़िगर है आप टाइप कर सकते हैं:
-`git config --list`
-
-आपको एक GitHub खाते, एक कोड एडिटर (जैसे Visual Studio कोड) की आवश्यकता होगी, और आपको अपना टर्मिनल (या: कमांड प्रॉम्प्ट) खोलने की आवश्यकता होगी।
-
-[Github.com](https://github.com/) पर नेविगेट करें और यदि आप पहले से नहीं हैं, तो एक खाता बनाएं या लॉग इन करें और अपना प्रोफ़ाइल भरें। 
-
-✅ GitHub दुनिया में एकमात्र कोड भंडार नहीं है; अन्य हैं, लेकिन GitHub सबसे अच्छा ज्ञात है
-
-### तैयारी
-
-आपको अपने स्थानीय मशीन (लैपटॉप या पीसी) पर एक कोड परियोजना के साथ एक फ़ोल्डर की आवश्यकता होगी, और GitHub पर एक सार्वजनिक भंडार, जो दूसरों की परियोजनाओं में योगदान करने के लिए एक उदाहरण के रूप में काम करेगा। 
-
----
-
-## कोड प्रबंधन
-
-मान लें कि आपके पास कुछ कोड प्रोजेक्ट के साथ स्थानीय रूप से एक फ़ोल्डर है और आप संस्करण नियंत्रण प्रणाली - git का उपयोग करके अपनी प्रगति को ट्रैक करना शुरू करना चाहते हैं। कुछ लोग आपके भविष्य के लिए एक प्रेम पत्र लिखने के लिए git का उपयोग करने की तुलना करते हैं। अपने प्रतिबद्ध संदेशों को दिनों या हफ्तों या महीनों के बाद पढ़कर आप याद कर पाएंगे कि आपने निर्णय क्यों लिया, या "रोलबैक" में बदलाव किया - यानी जब आप अच्छा "कमिट मैसेज" लिखते हैं।
-
-### कार्य: एक रीपाज़टॉरी और कमिट कोड बनाएं
-1. **GitHub पर रीपाज़टॉरी बनाएँ**. GitHub.com पर, रिपॉजिटरी टैब में, या नेविगेशन बार टॉप-राइट से, **नया रेपो** बटन ढूंढें।
-
-   1. अपने रिपॉजिटरी (फ़ोल्डर) को एक नाम दें
-   1. **रिपॉजिटरी बनाएं** चुनें।
-
-1. **अपने कार्यशील फ़ोल्डर में नेविगेट करें**. अपने टर्मिनल में, उस फ़ोल्डर पर स्विच करें (जिसे निर्देशिका के रूप में भी जाना जाता है) जिसे आप ट्रैक करना चाहते हैं, लिखे :
-
-   ```bash
-   cd [फ़ोल्डरका नाम]
-   ```
-
-1. **एक गिट रिपॉजिटरी को प्रारंभ करें**. आपके प्रोजेक्ट मे लिखे:
-   ```bash
-   git init
-   ```
-
-1. **अवस्था जांच**. अपने भंडार प्रकार की स्थिति की जांच करने के लिए लिखे:
-
-   ```bash
-   git status
-   ```
-
-  आउटपुट कुछ इस तरह दिख सकता है:
-
-   ```output
-   Changes not staged for commit:
-   (use "git add <file>..." to update what will be committed)
-   (use "git checkout -- <file>..." to discard changes in working directory)
-
-        modified:   file.txt
-        modified:   file2.txt
-   ```
-
-आमतौर पर एक `git status` कमांड आपको ऐसी चीजें बताती है जैसे रेपो में _saved_ होने के लिए कौन सी फाइलें तैयार हैं या इस पर ऐसे बदलाव हैं जिन्हें आप जारी रखना चाहते हैं।
-
-1. **ट्रैकिंग के लिए सभी फाइलें जोड़ें**
-  इसे स्टेजिंग फाइल / फाइल को स्टेजिंग एरिया में जोड़ना भी कहा जाता है।
-
-   ```bash
-   git add .
-   ```
-
-  `Git add` और `.` तर्क इंगित करता है कि आपकी सभी फाइलें और ट्रैकिंग के लिए परिवर्तन होगया है। 
-
-1. **ट्रैकिंग के लिए चयनित फ़ाइलें जोड़ें**
-
-   ```bash
-   git add [फ़ाइल या फ़ोल्डर का नाम]
-   ```
-
-   जब हम एक बार में सभी फ़ाइलों को कमिट नहीं करना चाहते हैं, तो यह हमें केवल स्टेजिंग क्षेत्र में चयनित फ़ाइलों को जोड़ने में मदद करता है।
-
-1. **सभी फाइलों को अनस्टेज करें**
-
-   ```bash
-   git reset
-   ```
-
-   यह कमांड हमें एक ही बार में सभी फ़ाइलों को अस्थिर करने में मदद करता है।
-
-1. **किसी विशेष फ़ाइल को अनस्टेज करें**
-
-   ```bash
-   git reset [फ़ाइल या फ़ोल्डर का नाम]
-   ```
-
-यह कमांड हमें केवल एक विशेष फ़ाइल को एक बार में अनस्टेज करने में मदद करती है जिसे हम अगले कमिट के लिए शामिल नहीं करना चाहते हैं।
-
-1. **अपना काम जारी रखना**. इस बिंदु पर आपने फ़ाइलों को तथाकथित _स्टैजिंग एरिया_ में जोड़ा है।एक जगह जहां Git आपकी फ़ाइलों को ट्रैक कर रही है। परिवर्तन को स्थायी करने के लिए आपको फ़ाइलों को _कॉमित_ की आवश्यकता होती है। ऐसा करने के लिए आप `git commit` कमांड के साथ एक _कमिट _ बनाते हैं। एक _कमिट_ आपके रेपो के इतिहास में एक बचत बिंदु का प्रतिनिधित्व करता है। _कमिट_ बनाने के लिए निम्नलिखित टाइप करें:
-
-   ```bash
-   git commit -m "पहला कमिट"
-   ```
-
-   यह आपकी सभी फ़ाइलों को "पहला कमिट" संदेश को जोड़ता है। भविष्य के कमिट संदेशों के लिए आप अपने विवरण में यह बताना चाहेंगे कि आपने किस प्रकार का परिवर्तन किया है।
-
-1. **अपने स्थानीय Git रेपो को GitHub से कनेक्ट करें**. आपके मशीन पर एक Git रेपो अच्छा है, लेकिन कुछ बिंदु पर आप अपनी फ़ाइलों का बैकअप कहीं और रखना चाहते हैं और अन्य लोगों को भी अपने रेपो पर आपके साथ काम करने के लिए आमंत्रित करते हैं। ऐसा करने के लिए एक महान जगह GitHub है। याद रखें कि हमने पहले ही GitHub पर एक रेपो बना लिया है, इसलिए हमें केवल अपने Git रेपो को GitHub के साथ जोड़ना है। कमांड `git remote add` बस यही करेगा। निम्न कमांड टाइप करें:
-
-   > ध्यान दें, इससे पहले कि आप कमांड टाइप करें अपने रिपॉजिटरी URL को खोजने के लिए अपने GitHub रेपो पेज पर जाएं। आप इसे नीचे दिए गए कमांड में उपयोग करेंगे। अपने GitHub URL से `repository_name` बदलें।
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
-   यह आपके द्वारा पहले बनाए गए GitHub रिपॉजिटरी को इंगित करते हुए "origin" नाम का एक _remote_, या कनेक्शन बनाता है।
-
-1. **GitHub पर स्थानीय फ़ाइलें भेजें**. अब तक आपने स्थानीय रेपो और गिटहब रेपो के बीच एक _कनेक्शन_ बनाया है। चलो निम्न कमांड `git push` के साथ इन फाइलों को गिटहब को भेजें, जैसे:
-
-   ```bash
-   git push -u origin main
-   ```
-
-   यह आपकी "मैन" शाखा में GitHub को आपके कमिट भेजता है।
-
-1. **अधिक परिवर्तन जोड़ने के लिए**. यदि आप परिवर्तन करना जारी रखना चाहते हैं और उन्हें GitHub पर धकेलना चाहते हैं, तो आपको निम्नलिखित तीन आदेशों का उपयोग करने की आवश्यकता होगी:
-
-   ```bash
-   git add .
-   git commit -m "अपना संदेश यहाँ लिखें"
-   git push
-   ```
-
-   > टिप, आप उन फ़ाइलों को रोकने के लिए एक `.gitignore` फ़ाइल भी अपनाना चाह सकते हैं जिन्हें आप GitHub पर दिखाने से रोकना चाहते हैं - जैसे नोट्स आप उसी फ़ोल्डर में संग्रहीत करते हैं, लेकिन सार्वजनिक रिपॉजिटरी में कोई स्थान नहीं है। आप `.gitignore` फाइल के लिए टेम्प्लेट में [.gitignore टेम्प्लेट](https://github.com/github/gitignore) पे पा सकते हैं
-#### कमिट संदेश
-
-एक महान Git कमिट विषय पंक्ति निम्नलिखित वाक्य को पूरा करती है:
-यदि लागू किया जाता है, तो यह प्रतिबद्ध होगा <आपकी विषय पंक्ति यहां>
-
-विषय के लिए अनिवार्य, वर्तमान काल का उपयोग करें: "परिवर्तन" न "बदला गया" और न ही "परिवर्तने"।
-विषय के रूप में, शरीर में (वैकल्पिक) भी अनिवार्य, वर्तमान काल का उपयोग करते हैं। शरीर में परिवर्तन के लिए प्रेरणा शामिल होनी चाहिए और पिछले व्यवहार के साथ इसके विपरीत होना चाहिए। आप `क्यों` को समझा रहे हैं,` कैसे` को नहीं।
-
-✅ GitHub के आसपास सर्फ करने के लिए कुछ मिनट लें। क्या आप वास्तव में महान कमिट संदेश पा सकते हैं? क्या आप वास्तव में न्यूनतम पा सकते हैं? आपको क्या संदेश लगता है कि एक कमिट संदेश देने के लिए सबसे महत्वपूर्ण और उपयोगी है?
-
-### कार्य: सहयोग करें
-
-गिटहब पर चीजें डालने का मुख्य कारण अन्य डेवलपर्स के साथ सहयोग करना संभव बनाना था।
-
-## दूसरों के साथ परियोजनाओं पर काम करना
-
-अपनी रिपॉजिटरी में, यह देखने के लिए कि आपकी परियोजना अनुशंसित सामुदायिक मानकों की तुलना कैसे करती है, `इनसाइट्स > कम्यूनिटी` पर जाएँ।
-
-   यहाँ कुछ चीजें हैं जो आपके GitHub रेपो में सुधार कर सकती हैं:
-   - **विवरण**. क्या आपने अपनी परियोजना के लिए एक विवरण जोड़ा?
-   - **README**. क्या आपने एक README जोड़ा? GitHub एक [README](https://docs.github.com/articles/about-readmes/) लिखने के लिए मार्गदर्शन प्रदान करता है।
-   - **योगदान दिशानिर्देश**. आपके प्रोजेक्टका [योगदान दिशानिर्देश](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/) है, 
-   - **आचार संहिता**. एक [आचार संहिता](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
-   - **लाइसेंस**. शायद सबसे महत्वपूर्ण बात, एक [लाइसेंस](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
-
-
-इन सभी संसाधनों से टीम के नए सदस्यों को लाभ मिलेगा। और वे आम तौर पर इस तरह की चीजें हैं जो आपके कोड को देखने से पहले भी नए योगदानकर्ताओं को देखते हैं, यह पता लगाने के लिए कि क्या आपका प्रोजेक्ट उनके लिए अपना समय बिताने के लिए सही जगह है।
-
-✅ README फाइलें, हालांकि उन्हें तैयार करने में समय लगता है, अक्सर व्यस्त रखवाले द्वारा उपेक्षित कर दिए जाते हैं। क्या आप एक विशेष रूप से वर्णनात्मक का एक उदाहरण पा सकते हैं? नोट: कुछ अच्छे [READMEs बनाने में मदद करने के लिए कुछ उपकरण हैं](https://www.makeareadme.com/) जिन्हें आप आज़माना चाहते हैं।
-
-### कार्य: कुछ कोड मर्ज करें
-
-डॉक्स में योगदान करने से लोगों को परियोजना में योगदान करने में मदद मिलती है। यह बताता है कि आप किस प्रकार के योगदान की तलाश कर रहे हैं और प्रक्रिया कैसे काम करती है। योगदानकर्ताओं को GitHub पर आपके रेपो में योगदान करने में सक्षम होने के लिए कई चरणों से गुजरना होगा:
-
-
-1. **अपने रेपो को फोर्क करना** आप शायद लोगों को अपनी परियोजना को _fork_ करना चाहेंगे। फोर्किंग का अर्थ है उनके GitHub प्रोफाइल पर अपनी रिपॉजिटरी की प्रतिकृति बनाना।
-1. **क्लोन**.वहां से वे इस परियोजना को अपनी स्थानीय मशीन से जोड़ देंगे।
-1. **एक शाखा बनाएँ**. आप उन्हें अपने काम के लिए एक _शाखा_ बनाने के लिए कहना चाहेंगे। 
-1. **एक क्षेत्र पर उनके परिवर्तन पर ध्यान दें**.योगदानकर्ताओं से एक समय में एक चीज़ पर उनके योगदान पर ध्यान केंद्रित करने के लिए कहें - इस तरह से संभावना है कि आप उनके काम में विलय कर सकते हैं। कल्पना कीजिए कि वे एक बग फिक्स लिखते हैं, एक नई सुविधा जोड़ते हैं, और कई परीक्षण अपडेट करते हैं - क्या होगा यदि आप चाहते हैं, या केवल 3 में से 2, या 3 में से 1 परिवर्तन लागू कर सकते हैं?
-
-✅ ऐसी स्थिति की कल्पना करें जहां शाखाएं विशेष रूप से अच्छे कोड लिखने और शिपिंग करने के लिए महत्वपूर्ण हैं। आप किन मामलों का उपयोग कर सकते हैं?
-
-> ध्यान दें, वह परिवर्तन हो जो आप दुनिया में देखना चाहते हैं, और अपने काम के लिए भी शाखाएँ बनाएँ। आपके द्वारा किया गया कोई भी शाखा उस शाखा पर बना दी जाएगी जिसे आप वर्तमान में "चेक आउट" कर रहे हैं। कौन सी शाखा है यह देखने के लिए `git status` का प्रयोग करें।
-
-चलो एक योगदानकर्ता वर्कफ़्लो के माध्यम से चलते हैं। मान लें कि योगदानकर्ता पहले से ही रेपो को _फोर्क_ और _क्लोन_ कर चुका है, इसलिए उनके पास अपने स्थानीय मशीन पर काम करने के लिए तैयार गिट रेपो है:
-
-1. **एक शाखा बनाएँ**.एक शाखा बनाने के लिए कमांड `git branch` का उपयोग करें जिसमें वे परिवर्तन होंगे जो उनके योगदान के लिए हैं:
-
-   ```bash
-   git branch [शाखाका-नाम]
-   ```
-
-1. **कार्यशील शाखा पर स्विच करें**. निर्दिष्ट शाखा में स्विच करें और `git switch` के साथ कार्य निर्देशिका को अपडेट करें:
-
-   ```bash
-   git switch [शाखाका-नाम]
-   ```
-
-1. **काम करो**. इस बिंदु पर आप अपने परिवर्तन जोड़ना चाहते हैं। निम्नलिखित आदेशों के बारे में Git को बताना न भूलें:
-
-   ```bash
-   git add .
-   git commit -m "मेरे परिवर्तन"
-   ```
-
-   यह सुनिश्चित करें कि आप अपनी खातिर एक अच्छा नाम दें, साथ ही साथ आप जिस रेपो में मदद कर रहे हैं उसका रखवालाका भी।
-
-1. **`main` शाखा के साथ अपने काम को मिलाएं**. कुछ बिंदु पर आप काम कर रहे हैं और आप `main` शाखा के साथ अपने काम को जोड़ना चाहते हैं। `main` शाखा इस बीच बदल सकती है, इसलिए सुनिश्चित करें कि आपने इसे निम्न कमांड के साथ नवीनतम में अपडेट किया है:
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-  इस बिंदु पर आप यह सुनिश्चित करना चाहते हैं कि कोई भी _टकराव_, परिस्थितियां जहां Git आसानी से आपके कामकाजी शाखा में होने वाले परिवर्तनों को _संयोजित_ नहीं कर सकती है। इसलिए निम्न आदेश चलाएँ:
-
-   ```bash
-   git switch [शाखाका-नाम]
-   git merge main
-   ```
-
-   यह आपकी शाखा में `main` से सभी बदलाव लाएगा और उम्मीद है कि आप अभी भी जारी रख सकते हैं। यदि नहीं, तो VS कोड आपको बताएगा कि गिट कहां _उलझन_ में है और आप यह कहने के लिए प्रभावित फाइलों को बदल देते हैं कि कौन सी सामग्री सबसे सटीक है।
-
-1. **अपना काम GitHub को भेजें**. अपने काम को GitHub में भेजने का मतलब है दो चीजें। अपनी शाखा को अपने रेपो में धकेलना और फिर एक पीआर, पुल अनुरोध को खोलें।
-
-   ```bash
-   git push --set-upstream origin [शाखाका-नाम]
-   ```
-
-  उपरोक्त कमांड आपके फोर्क्ड रेपो पर शाखा बनाता है।
-
-1. **एक पीआर खोलें**. अगला, आप एक पीआर खोलना चाहते हैं। आप GitHub पर फोर्केड रेपो में नेविगेट करके ऐसा करते हैं। आपको GitHub पर एक संकेत दिखाई देगा जहां यह पूछता है कि क्या आप एक नया PR बनाना चाहते हैं, आप उस पर क्लिक करते हैं और आपको एक इंटरफ़ेस पर ले जाया जाता है जहाँ आप प्रतिबद्ध संदेश शीर्षक बदल सकते हैं, इसे अधिक उपयुक्त विवरण दे सकते हैं। अब रेपो के अनुरक्षक आप इस पीआर को देखेंगे और _उँगलियाँ पार_ कर जाएँगे जो आपके पीआर को सराहेंगे और _मर्ज_ करेंगे। अब आप एक योगदानकर्ता हैं, याय :)
-
-1. **साफ - सफाई**. अपने को सफलतापूर्वक मर्ज करने के बाद _सफाई करना_ अच्छा माना जाता है। आप अपनी स्थानीय शाखा और उस शाखा को साफ़ करना चाहते हैं जिसे आपने GitHub में धकेल दिया है। पहले इसे निम्नलिखित कमांड के साथ स्थानीय रूप से हटा दें: 
-
-   ```bash
-   git branch -d [शाखाका-नाम]
-   ```
-
-   सुनिश्चित करें कि आप अगले फोर्केड रेपो के लिए GitHub पृष्ठ पर जाएं और उस दूरस्थ शाखा को हटा दें जिसे आपने अभी पुश किया था।
-
-`पुल अनुरोध` एक मूर्खतापूर्ण शब्द की तरह लगता है क्योंकि वास्तव में आप परियोजना में अपने परिवर्तनों को आगे बढ़ाना चाहते हैं। लेकिन अनुरक्षक (परियोजना स्वामी) या कोर टीम को परियोजना की "main" शाखा के साथ विलय करने से पहले आपके परिवर्तनों पर विचार करने की आवश्यकता है, इसलिए आप वास्तव में एक अनुचर से परिवर्तन के निर्णय का अनुरोध कर रहे हैं।
-
-एक पुल अनुरोध समीक्षा, टिप्पणियों, एकीकृत परीक्षणों और अधिक के साथ एक शाखा पर पेश किए गए मतभेदों की तुलना और चर्चा करने का स्थान है। एक अच्छा पुल अनुरोध एक प्रतिबद्ध संदेश के समान नियमों का पालन करता है। आप समस्या ट्रैकर में किसी समस्या के संदर्भ को जोड़ सकते हैं, जब उदाहरण के लिए आपका कार्य किसी समस्या को हल करता है। यह आपके अंक की संख्या के बाद एक `#` का उपयोग करके किया जाता है। उदाहरण के लिए `# 97`।
-
-🤞उंगलियों ने पार कर दिया कि सभी चेक पास हो गए और परियोजना के मालिकों ने परियोजना में आपके बदलावों को मर्ज कर दिया🤞
-
-GitHub पर संबंधित दूरस्थ शाखा से सभी नए कमिट के साथ अपनी वर्तमान स्थानीय कार्य शाखा को अपडेट करें:
-
-`git pull`
-
-## कैसे खुला स्रोत में योगदान करे
-
-सबसे पहले, आप के हित के GitHub पर एक रिपॉजिटरी (या **रेपो**) ढूंढें और जिसमें आप बदलाव में योगदान करना चाहते हैं। आप इसकी सामग्री को अपनी मशीन पर कॉपी करना चाहेंगे।
-
-✅'शुरुआती-अनुकूल' रेपो को खोजने का एक अच्छा तरीका है, ['good-first-issue' द्वारा खोज करना](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
-
-![एक रेपो को स्थानीय रूप से कॉपी करें](../images/clone_repo.png)
-
-कोड को कॉपी करने के कई तरीके हैं। एक तरीका है रिपॉजिटरी की सामग्री को "क्लोन" करना, HTTPS, SSH का उपयोग करना, या GitHub CLI (कमांड लाइन इंटरफ़ेस) का उपयोग करना। 
-
-अपना टर्मिनल खोलें और रिपॉजिटरी को क्लोन करें जैसे:
-`git clone https://github.com/ProjectURL`
-
-प्रोजेक्ट पर काम करने के लिए, सही फ़ोल्डर पर जाएँ:
-`cd ProjectURL`
-
-आप [Codespaces](https://github.com/features/codespaces), GitHub के एम्बेडेड कोड एडिटर / क्लाउड डेवलपमेंट एन्वायरमेंट, या [GitHub Desktop](https://desktop.github.com/) का उपयोग करके पूरी परियोजना भी खोल सकते हैं ) का है।
-
-अंत में, आप ज़िप फ़ोल्डर में कोड डाउनलोड कर सकते हैं।
-
-### GitHub के बारे में कुछ और दिलचस्प बातें
-
-आप GitHub पर किसी भी पब्लिक रिपॉजिटरी को स्टार, पहरा और/या "फोर्क" कर सकते हैं। आप शीर्ष-दाएँ ड्रॉप-डाउन मेनू में अपने तारांकित रिपॉजिटरी पा सकते हैं। यह बुकमार्क करने जैसा है, लेकिन कोड के लिए।
-
-परियोजनाओं में एक मुद्दा ट्रैकर है, ज्यादातर "इश्यू" टैब में गिटहब पर जब तक कि अन्यथा इंगित नहीं किया जाता है, जहां लोग परियोजना से संबंधित मुद्दों पर चर्चा करते हैं। और पुल अनुरोध टैब वह है जहां लोग उन परिवर्तनों की चर्चा और समीक्षा करते हैं जो प्रगति पर हैं।
-
-परियोजनाओं की चर्चा फ़ोरम, मेलिंग सूचियों, या चैट चैनलों जैसे स्लैक, डिस्कोर्ड या आईआरसी में भी हो सकती है।
-
-✅ अपने नए GitHub रेपो के चारों ओर एक नज़र डालें और कुछ चीजों को आज़माएं, जैसे कि सेटिंग्स को संपादित करना, अपने रेपो में जानकारी जोड़ना और एक प्रोजेक्ट बनाना (जैसे कंबन बोर्ड)। बहुत कुछ है जो आप कर सकते हैं!
-
----
-
-## 🚀 चुनौती
-
-एक दूसरे के कोड पर काम करने के लिए एक दोस्त के साथ जोडे। सहयोगी रूप से एक परियोजना बनाएँ, कोड बनाएँ, शाखाएँ बनाएँ, और परिवर्तनों को मर्ज करें।
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-[ओपन सोर्स सॉफ्टवेयर में योगदान](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) के बारे में और पढ़ें।
-
-[गिट चिटशीट](https://training.github.com/downloads/github-git-cheat-sheet/).
-
-अभ्यास, अभ्यास, अभ्यास। GitHub में [lab.github.com](https://lab.github.com/) के माध्यम से सीखने के शानदार रास्ते उपलब्ध हैं:
-
-- [GitHub पर पहला सप्ताह](https://lab.github.com/githubtraining/first-week-on-github)
-
-आपको और भी उन्नत प्रयोगशालाएँ मिलेंगी।
-
-## असाइनमेंट 
-
-[GitHub प्रशिक्षण प्रयोगशाला पर पहला सप्ताह](https://lab.github.com/githubtraining/first-week-on-github) पूरा करे
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.id.md b/1-getting-started-lessons/2-github-basics/translations/README.id.md
deleted file mode 100644
index 643c5568..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.id.md
+++ /dev/null
@@ -1,293 +0,0 @@
-# Dasar-dasar GitHub
-
-Pelajaran ini mencakup dasar-dasar GitHub, platform untuk menghosting dan mengelola perubahan pada kode Anda.
-
-![Dasar-dasar GitHub](/sketchnotes/webdev101-github.png)
-> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuis Pra-Kuliah
-
-[Kuis pra-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=id)
-
-## Pengantar
-
-Dalam pelajaran ini, kami akan membahas:
-
-- melacak pekerjaan yang Anda lakukan di mesin Anda
-- mengerjakan proyek dengan orang lain
-- bagaimana berkontribusi pada perangkat lunak sumber terbuka
-
-### Prasyarat
-
-Sebelum memulai, Anda harus memeriksa apakah Git sudah diinstal. Di terminal ketik:
-`git --version`
-
-Jika Git tidak diinstal, [unduh Git](https://git-scm.com/downloads). Kemudian, atur profil Git lokal Anda di terminal:
-`git config --global user.name "nama-anda"`
-`git config --global user.email "email-anda"`
-
-Untuk memeriksa apakah Git sudah dikonfigurasi, Anda dapat mengetik:
-`git config --list`
-
-Anda juga memerlukan akun GitHub, editor kode (seperti Visual Studio Code), dan Anda harus membuka terminal (atau: command prompt).
-
-Buka [github.com](https://github.com/) dan buat akun jika Anda belum melakukannya, atau masuk dan isi profil Anda.
-
-✅ GitHub bukan satu-satunya repositori kode di dunia; ada yang lain, tapi GitHub adalah yang paling terkenal
-
-### Persiapan
-
-Anda akan memerlukan folder dengan proyek kode di komputer lokal Anda (laptop atau PC), dan repositori publik di GitHub, yang akan berfungsi sebagai contoh cara berkontribusi pada proyek orang lain.
-
----
-
-## Manajemen kode
-
-Katakanlah Anda memiliki folder secara lokal dengan beberapa proyek kode dan Anda ingin mulai melacak kemajuan Anda menggunakan git - sistem kontrol versi. Beberapa orang membandingkan penggunaan git dengan menulis surat cinta untuk diri Anda di masa depan. Membaca pesan commit Anda beberapa hari atau minggu atau bulan kemudian, Anda akan dapat mengingat mengapa Anda membuat keputusan, atau "membatalkan" perubahan - yaitu, saat Anda menulis "pesan commit" yang baik.
-
-### Tugas: Membuat repositori dan menyerahkan kode
-
-1. **Buat repositori di GitHub**. Di GitHub.com, di tab repositories, atau dari kanan atas bilah navigasi, temukan tombol **repo baru (new repo)**.
-
-   1. Beri nama repositori (folder) Anda
-   1. Pilih **create repository**.
-
-1. **Arahkan ke folder kerja Anda**. Di terminal Anda, beralihlah ke folder (juga dikenal sebagai direktori) yang ingin Anda mulai lacak. Ketik:
-
-   ```bash
-   cd [nama folder anda]
-   ```
-
-1. **Inisialisasi repositori git**. Dalam proyek Anda ketik:
-
-   ```bash
-   git init
-   ```
-
-1. **Periksa status**. Untuk memeriksa status repositori Anda ketik:
-
-   ```bash
-   git status
-   ```
-
-   hasilnya akan terlihat seperti ini:
-
-   ```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
-   ```
-
-   Pada umunya perintah `git status` memberi tahu Anda hal-hal seperti file apa yang siap untuk _simpan_ ke repo atau ada perubahan di dalamnya yang mungkin ingin Anda pertahankan.
-
-1. **Tambahkan file ke pelacakan**
-
-   ```bash
-   git add .
-   ```
-
-   `git add` ditambah argumen `.` menunjukkan bahwa semua file dan perubahan Anda untuk pelacakan.
-
-1. **Mempertahankan pekerjaan Anda**. Pada titik ini Anda telah menambahkan file ke apa yang disebut _staging area_ (area pementasan). Tempat di mana Git melacak file Anda. Untuk membuat perubahan permanen Anda perlu _commit_ (menyerahkan) file. Untuk melakukannya, Anda membuat _commit_ dengan perintah `git commit`. Sebuah _commit_ mewakili titik penyimpanan dalam riwayat repo Anda. Ketik berikut ini untuk membuat _commit_:
-
-   ```bash
-   git commit -m "first commit"
-   ```
-
-   Ini menyerahkan (commit) semua file Anda, menambahkan pesan "first commit". Untuk pesan commit di masa mendatang, Anda akan ingin lebih deskriptif dalam deskripsi Anda untuk menyampaikan jenis perubahan apa yang telah Anda buat.
-
-1. **Hubungkan repo Git lokal Anda dengan GitHub**. Sebuah Repo Git bagus di mesin Anda tetapi pada titik tertentu Anda ingin memiliki cadangan file Anda di suatu tempat dan juga mengundang orang lain untuk bekerja dengan Anda di repo Anda. Salah satu tempat yang bagus untuk melakukannya adalah GitHub. Ingat kita sudah membuat repo di GitHub jadi satu-satunya hal yang perlu kita lakukan adalah menghubungkan repo Git lokal kita dengan GitHub. Perintah `git remote add` akan melakukan hal itu. Ketik perintah berikut:
-
-   > Catatan, sebelum Anda mengetik perintah, buka halaman repo GitHub Anda untuk menemukan URL repositori. Anda akan menggunakannya di perintah di bawah ini. Ganti `nama_repository` dengan URL GitHub Anda.
-
-   ```bash
-   git remote add origin https://github.com/username/nama_repository.git
-   ```
-
-   Ini membuat _remote_, atau koneksi, bernama "origin" yang menunjuk ke repositori GitHub yang Anda buat sebelumnya.
-
-1. **Kirim file lokal ke GitHub**. Sejauh ini Anda telah membuat _connection_ (koneksi) antara repo lokal dan repo GitHub. Ayo kirim file-file ini ke GitHub dengan perintah berikut `git push`, seperti itu:
-
-   ```bash
-   git push -u origin main
-   ```
-
-   Ini mengirimkan komit Anda di cabang "main" Anda ke GitHub.
-
-1. **Untuk menambahkan lebih banyak perubahan**. Jika Anda ingin terus membuat perubahan dan menerapkannya ke GitHub, Anda hanya perlu menggunakan tiga perintah berikut:
-
-   ```bash
-   git add .
-   git commit -m "ketik pesan komit Anda di sini"
-   git push
-   ```
-
-   > Tip, Anda mungkin juga ingin mengadopsi file `.gitignore` untuk mencegah file yang tidak ingin Anda lacak muncul di GitHub - seperti file catatan yang Anda simpan di folder yang sama tetapi tidak memiliki tempat di repositori publik. Anda dapat menemukan template untuk file `.gitignore` di [.gitignore templates](github.com/github/gitignore).
-
-#### Pesan commit
-
-Baris subjek Git commit yang bagus melengkapi kalimat berikut:
-Jika diterapkan, komit ini akan <baris subjek Anda di sini>
-
-Untuk subjek gunakan imperatif, bentuk waktu sekarang (present tense): "merubah" bukan "perubahan" atau "mengubah". 
-Seperti pada subjek, dalam tubuh (opsional) juga gunakan imperatif, bentuk waktu sekarang. Tubuh harus memasukkan motivasi untuk perubahan dan membandingkannya dengan perilaku sebelumnya. Anda menjelaskan `mengapa`, bukan `bagaimana`.
-
-✅ Luangkan beberapa menit untuk menjelajahi GitHub. Dapatkah Anda menemukan pesan commit yang sangat bagus? Dapatkah Anda menemukan yang sangat minim? Informasi apa yang menurut Anda paling penting dan berguna untuk disampaikan dalam pesan commit?
-
-### Tugas: Berkolaborasi
-
-Alasan utama menempatkan sesuatu di GitHub adalah untuk memungkinkan kolaborasi dengan pengembang lain.
-
-## Mengerjakan proyek dengan orang lain
-
-Di repositori Anda, buka `Insights > Community` untuk melihat bagaimana proyek Anda dibandingkan dengan standar komunitas yang direkomendasikan.
-
-   Berikut beberapa hal yang dapat meningkatkan repo GitHub Anda:
-   - **Deskripsi**. Apakah Anda menambahkan deskripsi untuk proyek Anda?
-   - **README**. Apakah Anda menambahkan README? GitHub memberikan panduan untuk menulis [README](https://docs.github.com/articles/about-readmes/).
-   - **Panduan berkontribusi**. Apakah project Anda memiliki [pedoman kontribusi](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
-   - **Kode etik**. sebuah [Kode etik](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
-   - **Lisensi**. Mungkin yang paling penting, sebuah [lisensi](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
-
-Semua sumber daya ini akan bermanfaat bagi anggota tim baru. Dan biasanya itu adalah jenis hal yang dilihat oleh kontributor baru bahkan sebelum melihat kode Anda, untuk mengetahui apakah proyek Anda adalah tempat yang tepat bagi mereka untuk menghabiskan waktu mereka..
-
-✅ File README, meskipun membutuhkan waktu untuk mempersiapkannya, sering kali diabaikan oleh pengelola yang sibuk. Dapatkah Anda menemukan contoh yang sangat deskriptif? Catatan: ada beberapa [alat untuk membantu membuat README yang baik](https://www.makeareadme.com/) yang mungkin ingin Anda coba.
-
-### Tugas: Menggabungkan beberapa kode
-
-Dokumen kontribusi membantu orang berkontribusi pada proyek. Itu menjelaskan jenis kontribusi yang Anda cari dan bagaimana prosesnya bekerja. Kontributor harus melalui serangkaian langkah untuk dapat berkontribusi ke repo Anda di GitHub:
-
-1. **Membagi (Forking) repo Anda** Anda mungkin ingin orang _fork_ proyek Anda. Forking berarti membuat replika repositori Anda di profil GitHub mereka.
-1. **Clone**. Dari sana mereka akan mengkloning proyek tersebut ke mesin lokal mereka. 
-1. **Buat cabang**. Anda akan ingin meminta mereka untuk membuat _branch_ (cabang) untuk pekerjaan mereka. 
-1. **Fokuskan perubahan mereka pada satu area**. Minta kontributor untuk memusatkan kontribusinya pada satu hal pada satu waktu - dengan begitu, peluang Anda untuk _menggabungkan_ dalam pekerjaan mereka lebih tinggi. Bayangkan mereka menulis perbaikan bug, menambahkan fitur baru, dan memperbarui beberapa pengujian - bagaimana jika Anda ingin, atau hanya dapat mengimplementasikan 2 dari 3, atau 1 dari 3 perubahan?
-
-✅ Bayangkan situasi di mana cabang sangat penting untuk menulis dan mengirimkan kode yang baik. Kasus penggunaan apa yang dapat Anda pikirkan?
-
-> Perhatikan, jadilah perubahan yang ingin Anda lihat di dunia, dan buat cabang untuk pekerjaan Anda juga. Komit apa pun yang Anda buat akan dilakukan di cabang tempat Anda "check out" saat ini. Gunakan `git status` untuk melihat cabang mana itu.
-
-Mari kita melalui alur kerja kontributor. Asumsikan kontributor sudah _forked (membagi)_ dan _cloned (mengkloning)_ repo sehingga mereka memiliki repo Git yang siap untuk dikerjakan, di mesin lokal mereka:
-
-1. **Buat cabang**. Gunakan perintah `git branch` untuk membuat cabang yang akan berisi perubahan yang dimaksudkan untuk dikontribusikan:
-
-   ```bash
-   git branch [nama-cabang]
-   ```
-
-1. **Beralih ke cabang kerja**. Beralih ke cabang yang ditentukan dan perbarui direktori kerja dengan `git switch`:
-
-   ```bash
-   git switch [nama-cabang]
-   ```
-
-1. **Bekerja**. Pada titik ini Anda ingin menambahkan perubahan Anda. Jangan lupa untuk memberi tahu Git tentangnya dengan perintah berikut:
-
-   ```bash
-   git add .
-   git commit -m "perubahan saya"
-   ```
-
-   Pastikan Anda memberikan nama yang baik pada komitmen Anda, demi Anda dan juga pemelihara repo yang Anda bantu.
-
-1. **Gabungkan pekerjaan Anda dengan cabang `main`**. Pada titik tertentu Anda telah selesai bekerja dan Anda ingin menggabungkan pekerjaan Anda dengan pekerjaan yang ada di cabang `main`. Cabang `main` mungkin telah berubah sementara itu jadi pastikan Anda terlebih dahulu memperbaruinya ke yang terbaru dengan perintah berikut:
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-   Pada titik ini Anda ingin memastikan bahwa setiap _conflicts (konflik)_, situasi di mana Git tidak dapat dengan mudah _combine (menggabugkan)_ perubahan terjadi di cabang kerja Anda. Oleh karena itu jalankan perintah berikut:
-
-   ```bash
-   git switch [nama-cabang]
-   git merge main
-   ```
-
-   Ini akan membawa semua perubahan dari `main` ke cabang Anda dan mudah-mudahan Anda bisa langsung melanjutkan. Jika tidak, VS Code akan memberi tahu Anda di mana Git _confused (bingung)_ dan Anda hanya mengubah file yang terpengaruh untuk mengatakan konten mana yang paling akurat.
-
-1. **Kirim pekerjaan Anda ke GitHub**. Mengirim pekerjaan Anda ke GitHub berarti dua hal. Mendorong cabang Anda ke repo Anda dan kemudian membuka PR, Pull Request (Permintaan Tarik).
-
-   ```bash
-   git push --set-upstream origin [nama-cabang]
-   ```
-
-   Perintah di atas membuat cabang di repo bercabang Anda.
-
-1. ****. Selanjutnya, Anda ingin membuka PR. Anda melakukannya dengan menavigasi ke repo bercabang di GitHub. Anda akan melihat indikasi di GitHub yang menanyakan apakah Anda ingin membuat PR baru, Anda mengkliknya dan Anda akan dibawa ke antarmuka di mana Anda dapat mengubah judul pesan commit, berikan deskripsi yang lebih sesuai. Sekarang pengelola repo Anda bercabang akan melihat PR ini dan _semoga_ mereka akan menghargai dan _merge (menggabungkan)_ PR Anda. Anda sekarang menjadi kontributor, hore :)
-
-1. **Membersihkan**. Ini dianggap praktik yang baik untuk _membersihkan_ setelah Anda. Anda ingin membersihkan cabang lokal dan cabang yang Anda dorong ke GitHub. Pertama mari kita hapus secara lokal dengan perintah berikut:
-
-   ```bash
-   git branch -d [nama-cabang]
-   ```
-
-   Pastikan Anda membuka halaman GitHub untuk repo bercabang berikutnya dan hapus cabang jarak jauh yang baru saja Anda dorong ke sana.
-
-`Pull request` sepertinya istilah yang konyol karena Anda benar-benar ingin mendorong perubahan Anda ke proyek. Namun pengelola (pemilik proyek) atau tim inti perlu mempertimbangkan perubahan Anda sebelum menggabungkannya dengan cabang "main" proyek, jadi Anda benar-benar meminta keputusan perubahan dari pengelola.  
-
-Pull request adalah tempat untuk membandingkan dan mendiskusikan perbedaan yang diperkenalkan pada cabang dengan ulasan, komentar, pengujian terintegrasi, dan banyak lagi. Pull request yang baik mengikuti aturan yang kira-kira sama dengan pesan komit. Anda dapat menambahkan referensi ke masalah di pelacak masalah, ketika pekerjaan Anda, misalnya, memperbaiki masalah (issue). Ini dilakukan dengan menggunakan `#` diikuti dengan nomor masalah (issue) Anda. Misalnya `#97`.
-
-🤞Semoga semua pemeriksaan lulus dan pemilik proyek menggabungkan perubahan Anda ke dalam proyek🤞
-
-Perbarui cabang lokal Anda saat ini dengan semua komit baru dari cabang jarak jauh yang sesuai di GitHub:
-
-`git pull`
-
-## Bagaimana berkontribusi pada open source
-
-Pertama, mari temukan repositori - atau: repo - di GitHub yang Anda minati dan yang ingin Anda beri kontribusi perubahan. Anda akan ingin menyalin konten ke mesin kami.
-
-✅ Cara yang baik untuk menemukan repositori 'ramah-pemula' adalah [menelusuri dengan tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-mulai-berkontribusi-ke-open-source/).
-
-![Salin repo secara lokal](../images/clone_repo.png)
-
-Ada beberapa cara untuk menyalin kode. Salah satu caranya adalah dengan "menggandakan" konten repositori, menggunakan HTTPS, SSH, atau menggunakan GitHub CLI (Command Line Interface).
-
-Buka terminal Anda dan kloning repositori seperti ini:
-`git clone https://github.com/ProjectURL`
-
-Untuk mengerjakan proyek, alihkan ke folder yang benar:
-`cd ProjectURL`
-
-Anda juga dapat membuka seluruh proyek menggunakan [Codespaces](https://github.com/features/codespaces), editor kode / lingkungan pengembangan cloud GitHub yang disematkan, atau [GitHub Desktop](https://desktop.github.com/ ).
-
-Terakhir, Anda dapat mengunduh kode dalam folder zip.
-
-### Beberapa hal menarik lainnya tentang GitHub
-
-Anda dapat membintangi, menonton, dan / atau "fork (membagi)" repositori publik apa pun di GitHub. Anda dapat menemukan repositori berbintang di menu tarik-turun kanan atas. Ini seperti mem-bookmark, tetapi untuk kode.
-
-Proyek memiliki pelacak masalah, sebagian besar di GitHub di tab "Issues (Masalah)" kecuali dinyatakan lain, tempat orang-orang mendiskusikan masalah yang terkait dengan proyek. Dan tab Pull Requests (Permintaan Tarik) adalah tempat orang mendiskusikan dan meninjau perubahan yang sedang berlangsung.
-
-Proyek mungkin juga memiliki diskusi di forum, milis, atau saluran obrolan seperti Slack, Discord atau IRC.
-
-✅ Lihatlah repo GitHub baru Anda dan coba beberapa hal, seperti mengedit pengaturan, menambahkan informasi ke repo Anda, dan membuat proyek (seperti papan Kanban). Banyak yang bisa Anda lakukan!
-
----
-
-## 🚀 Tantangan
-
-Sandingkan dengan seorang teman untuk mengerjakan kode satu sama lain. Buat proyek secara kolaboratif, buat kode, buat cabang, dan gabungkan perubahan.
-
-## Kuis Pasca Kuliah
-
-[Kuis pasca kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=id)
-
-## Review & Belajar Mandiri
-
-Baca lebih lanjut tentang [berkontribusi pada software open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
-
-[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
-
-Latihan, latihan, latihan. GitHub memiliki jalur pembelajaran yang bagus yang tersedia melalui [lab.github.com](https://lab.github.com/):
-
-- [Minggu Pertama di GitHub](https://lab.github.com/githubtraining/first-week-on-github)
-
-Anda juga akan menemukan lab yang lebih canggih.
-
-## Tugas
-
-Selesaikan [Minggu Pertama di lab pelatihan GitHub](https://lab.github.com/githubtraining/first-week-on-github)
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.it.md b/1-getting-started-lessons/2-github-basics/translations/README.it.md
deleted file mode 100644
index b35b44a9..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.it.md
+++ /dev/null
@@ -1,315 +0,0 @@
-# Introduzione a GitHub
-
-Questa lezione tratta delle basi di GitHub, una piattaforma per ospitare e gestire modifiche al proprio codice.
-
-![Intro to GitHub](/sketchnotes/webdev101-github.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pre-lezione
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=it)
-
-## Introduzione
-
-In questa lezione tratteremo come:
-
-- tracciare il lavoro che si fa sulla propria macchina
-- lavorare con altri su progetti
-- come contribuire a software open source
-
-### Prerequisiti
-
-Prima di iniziare, si dovrebbe verificare se Git è installato. Dal terminale digitare:
-`git --version`
-
-Se Git non è installato, [scaricare Git](https://git-scm.com/downloads). Poi impostare il proprio profilo locale Git dal terminale:
-* `git config --global user.name "il-proprio-nominativo"`
-* `git config --global user.email "la-propria-email"`
-
-Per verificare se Git è già configurato si può digitare:
-`git config --list`
-
-E' anche necessario un account GitHub, un editor di codice (tipo Visual Studio Code), e sarà necessario aprire il proprio terminale (o prompt di comando).
-
-Navigare su [github.com](https://github.com/) e creare un account se non se ne dispone già di uno, oppure accedere e compilare il proprio profilo. 
-
-✅ GitHub non è il solo deposito di codice nel mondo, ce ne sono altri, ma GitHub è il più conosciuto.
-
-### Preparazione
-
-Servirà sia una cartella con il codice di un progetto sulla propria macchina locale (laptop o PC), e un repository pubblico su GitHub, che servirà come esempio su come contribuire a progetti di altri.  
-
----
-
-## Gestione del codice
-
-Diciamo che si ha una cartella in locale con del codice di un progetto e che si vuole iniziare a tracciarne lo sviluppo usando git - il sistema di controllo di versione. Alcuni paragonano l'uso di git alla scrittura di una lettera d'amore a se stessi nel futuro. Leggendo i messaggi di commit giorni, settimane o mesi più tardi si dovrà essere in grado di ricordare perchè è stata presa una certa decisione, o ripristinare ("rollback") una modifica - questo è, quando si scrivono dei buoni "messaggi di commit".
-
-### Compito: Creare un repository e inserirvi codice via commit
-
-1. **Creare un repository su GitHub**. Su GitHub.com, nella scheda repositories, o dalla barra di navigazione in alto a destra, trovare il bottone **new repository**.
-
-   1. Dare un nome al proprio repository (cartella)
-   1. Selezionare **create repository**.
-
-1. **Navigare verso la propria cartella di lavoro**. Nel proprio terminale, portarsi nella cartella (detta anche directory) che si vuole iniziare a tracciare. Digitare:
-
-   ```bash
-   cd [nome della cartella]
-   ```
-
-1. **Inizializzare un repository git**. Nel proprio progetto digitare:
-
-   ```bash
-   git init
-   ```
-
-1. **Verifica stato**. Per verificare lo stato del proprio repository digitare:
-
-   ```bash
-   git status
-   ```
-
-   il risultato potrebbe essere qualcosa tipo:
-
-   ```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
-   ```
-
-   In genere un comando `git status` informa circa quali file sono pronti per essere  _salvati_ nel repository o quali modifiche sono state effettuate che si vogliono persistere.
-
-1. **Aggiungere tutti i file per la tracciatura**
-   Fase nota anche come aggiungere file nell'area di staging.
-
-   ```bash
-   git add .
-   ```
-
-   Gli argomenti `git add` più `.` indicano che tutti i propri file e modifiche sono selezionati per la tracciatura. 
-
-1. **Aggiungere file selezionati per la tracciatura**
-
-   ```bash
-   git add [file o nome cartella]
-   ```
-
-   Questo consente di aggiungere file nell'area di staging quando non si vogliono aggiungere tutti in una volta.
-
-1. **Togliere dall'area di staging tutti i file**
-
-   ```bash
-   git reset
-   ```
-
-   Questo comando consente di togliere tutti i file dall'area di staging.
-
-1. **Togliere dall'area di staging uno specifico file**
-
-   ```bash
-   git reset [file o nome cartella]
-   ```
-
-   Questo comando consente di togliere dall'area di staging uno specifico file che non si vuole includere nel commit successivo.
-
-1. **Persistere il proprio lavoro**. A questo punto sono stati aggiunti tutti i file alla cosiddetta _area di staging_. Un posto nel quale Git sta tracciando i propri file. Per rendere permanenti le modifiche occorre eseguire un'azione di _commit_ dei file. Per farlo si crea un _commit_ con il comando `git commit`. Un _commit_ rappresenta un punto di salvataggio nella storia del proprio repository. Digitare questo per creare un _commit_:
-
-   ```bash
-   git commit -m "primo commit"
-   ```
-
-   Questo esegue il commit di tutti i file a suo tempo inclusi, aggiungendo il messaggio 'primo commit'. Per messaggi di commit successivi si vorrà essere più descrittivi nell'esposizione per identificare il tipo di modifiche effettuate.
-
-1. **Connettere il repository Git locale a GitHub**. Un repository Git va bene sulla propria macchina ma a un certo punto si vuole avere una copia dei propri file da qualche altra parte e anche invitare altre persone a lavorare al proprio progetto. Un gran posto per fare questo è GitHub. Si ricorderà che è stato già creato un repository in GitHub quindi la sola cosa da fare è connettere il repository Git locale con GitHub. Il comando `git remote add` farà proprio questo. Digitare il comando:
-
-   > Nota, prima di digitare il comando portarsi sulla propria pagina del repository su GitHub per trovare l'URL del repository. Dovrà essere usato nel comando seguente. Sostituire `repository_name` con il proprio URL di GitHub e `username` con il proprio nome utente di github.
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
-   Questo crea un  _remote_, o connessione, chiamata "origin" che punta al repository GitHub precedentemente creato.
-
-1. **Inviare file locali a GitHub**. Fino ad ora è stata creata una _connessione_ tra il repository locale e quello GitHub. Ora si inviano i file locali a GitHub usando il comando `git push`, in questo modo: 
-
-   ```bash
-   git push -u origin main
-   ```
-
-   Questo invia i propri commit nel ramo  "main" di GitHub.
-
-1. **Aggiungere ulteriori modifiche**. Se si vuole continuare a fare modifiche e inviarle a GitHub occorre usare uno dei tre comandi seguenti:
-
-   ```bash
-   git add .
-   git commit -m "digitare qui il messaggio di commit"
-   git push
-   ```
-
-   > Suggerimento, Si potrebbe anche utilizzare un file `.gitignore` per evitare che alcuni file che non si vogliono tracciare finiscano su GitHub - come le note che si salvano sulla cartella del progetto ma che non sono adatte in un repository pubblico. Si possono trovare modelli di file `.gitignore` a [modelli .gitignore](github.com/github/gitignore).
-
-#### Messaggi di commit
-
-Una grande riga di oggetto per un commit Git completa la seguente frase:
-Se applicato, questo commit farà ... (qui la vostra riga oggetto)
-
-Per l'oggetto utilizzare l'imperativo presente: "modifica" non "modificato" o "modifiche"- Come per l'oggetto nel corpo (opzionale) usar4 l'imperativo presente. Il corpo dovrebbe includere il motivo della modifica e il confronto con il precedente comportamento. Si sta spiegando il `perchè`, non il `come`.
-
-✅ Si prenda qualche minuto per esplorare GitHub. E' possibile scovare un bel messaggio di commit? Se ne puà trovare uno assolutamente minimale? Quali informazioni si pensa che siano le più importanti e utili per un messaggio di commit?
-
-### Compito: Collaborare
-
-La ragione principale per inserire cose in GitHub è di fare in modo che si possa collaborare tra sviluppatori.
-
-## Lavorare su progetti con altri
-
-Nel proprio repository, portarsi a `Insights > Community` per vedere come il proprio progetto si confronta con gli standard della comunità.
-
-   Ecco alcune cose che possono migliorare il proprio repository GitHub:
-   - **Descrizione**. E' stata aggiunta una descrizione per il proprio progetto?
-   - **README**. E' stato aggiunto un README (leggimi)? GitHub fornisce una traccia per scrivere un [README](https://docs.github.com/articles/about-readmes/).
-   - **Linee guida per contribuire**. Il proprio progetto fornisce [linne guida per contribuire](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
-   - **Codice di Condotta**. un [Codice di Condotta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
-   - **Licenza**. Forse la più imporatante, una [licenza](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
-
-Tutte queste risorse favoriranno la salita a bordo di nuovi elementi nella squadra. Queste sono in genere il tipo di cose che i nuovi contributori cercano anche prima di dare un'occhiata al codice, per scoprire se il progetto è il posto giusto per spendere il loro tempo.
-
-✅ I file README, sebbene richiedono tempo per prepararli, sono spesso trascurati da manutentori troppo occupati. E' possibile trovare un esempio di uno particolarmente descrittivo? Nota: ci sono alcuni [strumenti per aiutare la creazione di buoni  README](https://www.makeareadme.com/) che si potrebbero provare.
-
-### Compito: Fondere del codice
-
-La documentazione per la collaborazione aiuta a fare sì che la gente contribuisca al progetto. Spiega che tipo di collaborazione ci si deve attendere e come funziona il processo. I contributori dovranno compiere una serie di passi per poter contribuire a un repository su GitHub:
-
-1. **Biforcare il repository** Probabilmente si vorrà che la gente possa  _biforcare_ il proprio progetto (forking). Questa azione crea una replica di un repository al quale si vuole contribuire sul profilo del contributore su GitHub.
-1. **Clonare**. Da qui verrà eseguita una azione di clonazione del progetto sulla  macchina locale del contributore. 
-1. **Creare un ramo**. Sarà richiesto al contributore di creare un _ramo_ (branch) per il suo lavoro. 
-1. **Concentrare le modifiche del contributore su una area**. Richiedere ai contributori di concentrarsi su una cosa sola alla volta - in questo modo le possibilità che si possa _fondere_ (merge) il lavoro del contributore sono più alte. Se viene scritta la risoluzione di un bug, o viene aggiunta una nuova funzionalità o vengono aggiornati parecchi test - cosa succede se si vuole o si può, solo implementarne 2 su 3 o 1 su 3 di queste modifiche?
-
-✅ Si immagini una situazione dove i rami sono particolarmente critici per la scrittura e lo sviluppo di buon codice. A quali casi d'uso sono stati individuati?
-
-> Nota, siate il cambiamento che volete vedere nel mondo, e si creino rami anche per il proprio lavoro. Qualsiasi commit che verrà fatto sarà su rami che si sta attualmente *verificando* (check out). Usare  `git status` per vedere su quale ramo ci si trova attualmente.
-
-Si analizza il flusso di lavoro di un contributore. Si assume che egli abbia già eseguito il _fork_ e _clonato_ il repository in modo che lo stesso sia pronto per lavorarci, sulla sua macchina locale:
-
-1. **Creare un ramo**. Usare il comando `git branch` per creare un ramo che conterrà le modifiche per le quali si è offerta la collaborazione:
-
-   ```bash
-   git branch [branch-name]
-   ```
-
-1. **Passare al ramo di lavoro**. Passare al ramo specificato e aggiornare la directory di lavoro con `git switch`:
-
-   ```bash
-   git switch [nome ramo]
-   ```
-
-1. **Eseguire il lavoro**. A questo punto si vorranno aggiungere i propri cambiamenti. Non dimenticarsi di dirlo a Git tramite questi comandi:
-
-   ```bash
-   git add .
-   git commit -m "le mie modifiche"
-   ```
-
-   Assicurarsi che il commit abbia un buon messaggio, a beneficio proprio e del manutentore del repository sul quale si sta collaborando.
-
-1. **Combinare il proprio lavoro con il ramo `main`**. Una volta terminato il lavoro occorre combinarlo con quello del ramo principale (`main`). Il ramo principale potrebbe avere subito cambiamenti nel mentre quindi ci si deve assicurare di eseguire prima un aggiornamento all'ultima versione con i comandi:
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-   A questo punto occorre assicurarsi che qualsiasi eventuale _conflitto_ (conflict), situazioni dove Git non è in grado di determinare facilmente come _combinare_ le modifiche effettuate nel proprio ramo di lavoro. Eseguire i seguenti comandi:
-
-   ```bash
-   git switch [branch_name]
-   git merge main
-   ```
-
-   Questo porterà tutte le modifiche da `main` verso il proprio ramo, augurandosi che si possa poi continuare. In caso contrario VS Code vi può indicare dove Git si _confonde_ e si potranno modificare i file coinvolti per determinare quale contenuto sia il più accurato.
-
-1. **Inviare il proprio lavoro a GitHub**. Questo significa due cose. Spingere il proprio ramo verso il proprio repository, quindi aprire una PR, Pull Request.
-
-   ```bash
-   git push --set-upstream origin [nome-ramo]
-   ```
-
-   Il comando qui sopra crea il ramo sulla propria biforcazione del repository.
-
-1. **Aprire una PR**. Successivamente, si vorrà aprire una Pull Request. Si fa portandosi nel repository biforcato su GitHub. Si vedrà una indicazione su GitHub dove viene chiesto se si vuol creare una nuova PR, cliccando su questa si verrà portati su una interfaccia dove si potrà cambiare il titolo del messaggio di commit e fornire una descrizione più adatta. Ora il manutentore del repository che è stato biforcato vedrà questa PR e _incrociando le dita_ apprezzerà e _fonderà_ (merge) la PR. Ora si avrà contribuito, yay :)
-
-1. **Pulire**. E' considerata buona pratica effettuare una _pulizia_ dopo il lavoro compiuto. Si vorrà pulire sia il ramo locale che quello spinto su GitHub. Per prima cosa cancellarlo localmente con il comando: 
-
-   ```bash
-   git branch -d [nome-ramo]
-   ```
-
-   Successivamente assicurarsi di andare nella pagina GitHub per del repository biforcato per eliminare il ramo remoto che è stato appena spinto.
-
-`Pull request` sembra un termine sciocco in quanto in realtà si vogliono portare le proprie modifiche al progetto. Ma il manutentore (proprietario del progetto) o la squadra base deve valutare i cambiamenti dei contributori prima di fonderli con il ramo principale del progetto, quindi in realtà il contributore sta chiedendo una decisione sulle modifiche al manutentore.  
-
-Una pull request è il posto dove confrontare e discutere le differenze introdotte su un ramo con valutazioni, commenti, verifiche integrate e altro. Una buona pull request segue grossolanmente le stesse regole di un messaggio di commit. Si può aggiungere un riferimento al problema nel tracciatore di problemi (issue tracker), quando il proprio lavoro risolve ad esempio un problema. Questo viene fatto usando un `#` seguito dal numero del vostro problema. Ad esempio `#97`.
-
-🤞Incrociando le dita si spera che tutte le verifiche vengano superate e che il proprietario(i) del progetto voglia incorporare le modifiche all'interno del progetto🤞
-
-Aggiornare il proprio ramo corrente locale con tutti i nuovi commit per il ramo remoto corrispondente su GitHub:
-
-`git pull`
-
-## Come contribuire a progetti open source
-
-Per prima cosa, trovare un repository - o repo - che interessi su GitHub e per il quale si desideri contribuire con una modifica. Si vorrà copiare il contenuto sulla propria macchina.
-
-✅ Un buon modo di trovare repository 'adatti per i principianti' è di [cercare il tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
-
-![Copiare un repository localmente](../images/clone_repo.png)
-
-Ci sono parecchi modi di copiare il codice. Un modo è "clonare" il contenuto del repository, usando HTTPS, SSH, o usando l'interfaccia da riga di comando GitHub CLI. 
-
-Aprire il proprio terminale e clonare il repository così:
-`git clone https://github.com/URLdelProgetto`
-
-Per lavorare su un progetto, passare alla corretta cartella:
-`cd URLdelProgetto`
-
-Si può anche aprire l'intero progetto usando [Codespaces](https://github.com/features/codespaces), l'editor di codice incorporato di GitHub, oppure un ambiente di sviluppo nel cloud, oppure [GitHub Desktop](https://desktop.github.com/).
-
-Infine si può scaricare il codice in una cartella compressa. 
-
-### Qualche altra cosa interessante riguardo a GitHub
-
-E' possibile attribuire una stella, osservare, e/o "biforcare" un qualsiasi progetto pubblico su GitHub. Si possono trovare i propri repository che hanno stelle nel menù a tendina in alto a destra. E' come mettere un segnalibro, ma per il codice. 
-
-I progetti che hanno un tracciatore di problemi, per la maggior parte nella scheda "Issues" di GitHub a meno di indicazioni diverse, è dove la gente discute dei problemi relativi al progetto. E la scheda Pull Requests è dove la gente discute e verifica le modifiche in corso d'opera.
-
-I progetti potrebbero anche essere discussi nei forum, liste di distribuzione, o canali chat come Slack, Discord o IRC.
-
-✅ Dare una occhiata al proprio nuovo repository in GitHub e provare alcune cose, come modificare la configurazione, aggiungere informazioni al repository e creare un progetto come un tabellone Kanban. C'è tanto che si può fare!
-
----
-
-## 🚀 Sfida
-
-Fare coppia con un amico per lavorare al codice dei progetti l'uno dell'altro. Creare un progetto in modo collaborativo, biforcare il codice, craare rami e fondere modifiche.
-
-## Quiz Post-lezione
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=it)
-
-## Revisione e Auto Apprendimento
-
-Leggene di più al riguardo: [contribuire a software open source](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
-
-[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
-
-Esercizio, esercizio, esercizio. GitHub ha ottimi percorsi di apprendimento disponibili via [lab.github.com](https://lab.github.com/):
-
-- [Prima settimana su GitHub](https://lab.github.com/githubtraining/first-week-on-github)
-
-Si potranno trovare anche altri laboratori più avanzati. 
-
-## Compito 
-
-Completare [la prima settimana nel laboratorio di apprendimento di GitHub](https://lab.github.com/githubtraining/first-week-on-github)
\ No newline at end of file
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ko.md b/1-getting-started-lessons/2-github-basics/translations/README.ko.md
deleted file mode 100644
index 2a86bd3a..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.ko.md
+++ /dev/null
@@ -1,294 +0,0 @@
-# GitHub 소개
-
-이 강의에서는 코드 변경점을 호스팅하고 관리하는 플랫폼인 GitHub의 기본 사항을 다룹니다.
-
-![Intro to GitHub](/sketchnotes/webdev101-github.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 강의 전 퀴즈
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=ko)
-
-## 소개
-
-이 강의에서는 다룹니다:
-
-- 기계에서 수행하는 작업 추적
-- 다른 사람들과 프로젝트 작업
-- 오픈소스 소프트웨어에 기여하는 방법
-
-### 작업 필요
-
-시작하기 전에 Git이 설치되어 있는지 확인해야합니다. 터미널에서 작업:
-`git --version`
-
-만약 Git이 설치되어 있지 않다면, [Git 내려받습니다](https://git-scm.com/downloads). 그리고, 터미널에서 로컬 Git 프로필을 설정합니다:
-* `git config --global user.name "your-name"`
-* `git config --global user.email "your-email"`
-
-Git이 이미 구성되어 있는지 확인하려면 다음을 입력합니다:
-`git config --list`
-
-GitHub 계정, (Visual Studio Code와 같은) 코드 에디터가 필요하며, 터미널(혹은: command prompt)을 열어야 합니다.
-
-아직 계정이 없는 경우에는 [github.com](https://github.com/)으로 이동하여 계정을 생성하거나, 로그인하여 프로필을 작성합니다.
-
-✅ GitHub는 유일한 코드 저장소가 아닙니다. 다른 곳들도 있지만 GitHub가 가장 잘 알려져 있습니다.
-
-### 준비
-
-로컬 장치(노트북 또는 PC)에 코드 프로젝트 폴더와 다른 프로젝트에 기여하는 방법의 예시가 될 GitHub 공개 저장소가 모두 필요합니다.
-
----
-
-## 코드 관리
-
-일부 코드 프로젝트에 포함된 폴더가 로컬에 있고 버전 제어 시스템인 git을 사용하여 진행 상황을 추적하려고 한다고 가정해보겠습니다. 어떤 사람들은 git을 사용하여 미래의 자신에게 연애 편지를 쓰는 것과 비교합니다. 며칠, 몇 주 또는 몇 달 후에 커밋 메시지를 읽으면 그 때 결정을 한 이유를 기억하거나 변경점을 "롤백"할 수 있습니다. 즉, 좋은 "커밋 메시지"를 작성할 때입니다.
-
-### 작업: 저장소 만들고 코드 커밋하기
-
-1. **GitHub에 저장소 만들기**. GitHub.com에서 repositories 탭을 보거나, 우측 상단 네비케이션 바에서 **new repo** 버튼을 찾습니다.
-
-   1. 저장소(폴더)에 이름을 지정합니다
-   1. **create repository** 선택합니다.
-
-1. **작업 폴더로 이동하기**. 터미널에서 추적을 시작할 폴더(디렉토리)로 이동하기 위해 입력합니다:
-
-   ```bash
-   cd [name of your folder]
-   ```
-
-1. **git 저장소 초기화하기**. 프로젝트에서 입력합니다:
-
-   ```bash
-   git init
-   ```
-
-1. **상태 확인하기**. 상태를 확인하려면 저장소에서 입력합니다:
-
-   ```bash
-   git status
-   ```
-
-   다음과 같이 출력될 수 있습니다:
-
-   ```output
-   Changes not staged for commit:
-   (use "git add <file>..." to update what will be committed)
-   (use "git checkout -- <file>..." to discard changes in working directory)
-
-        modified:   file.txt
-        modified:   file2.txt
-   ```
-
-   일반적으로 `git status` 명령은 어떤 파일이 저장소에 _저장_ 될 준비가 되었는 지 또는 유지하고 싶은 변경점이 있는 지 등을 알려줍니다.
-
-1. **추적할 파일 추가하기**
-
-   ```bash
-   git add .
-   ```
-
-   `git add`와 같이 있는 `.` 인수는 모든 파일 및 변경점을 나타냅니다.
-
-1. **작업 지속하기**. Git이 파일을 추적하는 곳에 _staging area_ 라는 파일을 추가했습니다. 영구적으로 변경하려면 파일을 _commit_ 해야합니다. 그렇게 하려면`git commit` 명령으로 _commit_ 을 생성합니다. _commit_ 은 저장소 기록의 저장 시점을 나타냅니다. 다음을 입력하여 _commit_ 을 생성합니다:
- 
-   ```bash
-   git commit -m "first commit"
-   ```
-
-   이렇게하면 모든 파일이 커밋되고, "first commit" 메시지가 추가됩니다. 향후 커밋 메시지의 경우 변경점을 전달하기 위해 설명을 구체적으로 작성해야합니다.
-
-1. **GitHub와 로컬 Git 저장소 연결하기**. Git 저장소는 장치에 존재하기에 좋지만, 어느 시점에서 파일을 어딘가에 백업하고 다른 사람이 저장소에서 함께 작업하도록 초대하고 싶습니다. 그렇게 하기에 좋은 곳 중 하나는 GitHub입니다. 이미 GitHub에 저장소를 만들었으므로 로컬 Git 저장소를 GitHub에 연결할 뿐입니다. `git remote add`  명령을 수행합니다. 다음 명령을 입력합니다:
-
-   > Note, 명령을 입력하기 전에 GitHub 저장소 페이지로 이동하여 저장소 URL을 찾아두십시오. 아래 명령에서 사용됩니다. `repository_name`을 GitHub URL로 바꿉니다.
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
-   이렇게 이전에 만든 GitHub 저장소를 가리키는 "origin"이라는 _remote_ 또는 커넥션이 생성됩니다.
-
-1. **GitHub로 로컬 파일 보내기**. 지금까지 로컬 저장소와 GitHub 저장소 사이에 _connection_ 을 생성했습니다. 다음과 같이 `git push` 명령을 사용하여 이러한 파일을 GitHub로 보냅니다:
-
-   ```bash
-   git push -u origin main
-   ```
-
-   "main" 브랜치는 GitHub로 커밋이 보내집니다.
-
-1. **더 많은 변경점 추가하기**. 계속 작업하여 GitHub로 푸시하려면 다음 세 가지 명령을 사용하면됩니다:
-
-   ```bash
-   git add .
-   git commit -m "type your commit message here"
-   git push
-   ```
-
-   > Tip, 추적하고 싶지 않은 파일이 GitHub에 표시되는 것을 방지하기 위해 `.gitignore` 파일을 채용할 수 있습니다. 동일한 폴더에 저장하지만 공개 저장소에는 존재하지 않는 노트 파일과 같습니다. `.gitignore` 파일의 템플릿은 [.gitignore templates](https://github.com/github/gitignore)에서 찾을 수 있습니다.
-
-#### 커밋 메시지
-
-A great Git commit subject line completes the following sentence:
-If applied, this commit will <your subject line here>
-
-훌륭한 Git 커밋 제목 줄은 다음 문장을 완성합니다:
-적용되면, 이 커밋은 <your subject line here>이 됩니다.
-
-제목에 대해서는 명령문 또는 현재 시제를 사용하십시오 : "변경됨" 또는 "변경점"이 아닌 "변경".
-제목과 마찬가지로 본문(선택 사항)에서도 명령문, 현재 시제를 사용합니다. 본문은 변화에 대한 동기를 포함하고 이를 이전 변경점과 대조해야 합니다. '어떻게'가 아니라 '왜'를 설명하고 있습니다.
-
-✅ 몇 분 동안 GitHub를 둘러보세요. 정말 훌륭한 커밋 메시지를 찾을 수 있습니까? 정말 최소한의 것을 찾을 수 있습니까? 커밋 메시지에서 전달하는 데 가장 중요하고 유용한 정보는 무엇이라고 생각하십니까?
-
-### 작업: 협업하기
-
-GitHub에 코드를 올리는 주 이유는 다른 개발자와 협력할 수 있도록 하기 위함입니다.
-
-## 다른 사람들과 함께 프로젝트 작업하기
-
-저장소에서, `Insights> Community`로 이동하여 프로젝트에 권장되는 커뮤니티 표준과 어떻게 비교되는지 확인합니다.
-
-다음은 GitHub 저장소를 개선 할 수있는 몇 가지 사항입니다:
-   - **설명**. 프로젝트에 설명을 추가했습니까?
-   - **README**. README를 추가했습니까? GitHub는 [README](https://docs.github.com/articles/about-readmes/) 작성에 대한 지침을 제공합니다.
-   - **기여 가이드**. [기여 가이드](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
-   - **Code of Conduct**. [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
-   - **라이선스**. 아마도, 가장 중요한 [라이선스](https://docs.github.com/articles/adding-a-license-to-a-repository/)도 가지고 있습니까?
-
-이러한 모든 리소스는 새로운 팀원을 온보딩하는 데 도움이 됩니다. 그리고 일반적으로 새로운 기여자들이 여러분의 프로젝트가 시간을 보내기에 적합한 장소인지 확인하기 위해  코드를 보기 전 살펴 보는 것입니다.
-
-✅ README 파일은 준비하는 데 시간이 걸리지만 바쁜 관리자들은 종종 무시합니다. 특히 설명적인 예를 찾을 수 있습니까? Note: 몇 가지 [tools to help create good READMEs](https://www.makeareadme.com/)를 시도해 볼 수 있습니다.
-
-### 작업: 코드 병합하기
-
-문서를 제공하면 사람들이 프로젝트에 기여하는 데 도움이 됩니다. 찾고있는 기여 유형과 프로세스 작동 방식을 설명합니다. 기여자는 GitHub의 저장소에 기여할 수 있도록 일련의 단계를 거쳐야합니다:
-
-1. **저장소 포크하기** 아마도 사람들이 당신의 프로젝트를 _fork_ 하기를 원할 것입니다. 포크는 자신의 GitHub 프로필에 저장소 복제본을 만드는 걸 의미합니다.
-1. **복제하기**. 프로젝트를 로컬 컴퓨터에 복제합니다.
-1. **브랜치 생성하기**. 작업을 위해 _branch_ 를 만들도록 요청하고 싶을 것입니다.
-1. **한 영역에 변화를 집중하기**. 기여자에게 한 번에 한 가지만 집중하도록 요청하세요 - 그러면 작업에 _병합_ 할 수 있는 가능성이 더 높아집니다. 그들이 버그 수정을 작성하고, 새로운 기능을 추가하고, 여러 테스트를 추가한다고 상상해보십시오. 원한다면 3개 중 2개 또는 3개 중 1개만 구현할 수 있습니까?
-
-✅ 좋은 코드를 작성하고 전달하는 데 branches가 중요한 상황을 상상해보십시오. 어떤 사용 사례를 생각할 수 있습니까?
-
-> Note, 모두가 보고싶은 변경점이나, 자신의 작업만을 위한 브랜치를 만들 수도 있습니다. 모든 커밋은 현재 "체크 아웃"된 브랜치에서 이루어집니다. `git status`를 사용하여 어떤 브랜치인지 확인하십시오.
-
-기여자 워크플로우를 살펴봅니다. 기여자가 이미 저장소를 _forked_ 하거나 _cloned_ 했기 때문에 로컬 머신에서 작업할 준비가 된 Git 저장소가 있다고 가정합니다.
-
-1. **브랜치 생성하기**. `git branch` 명령을 사용하여 기여하려는 변경 사항을 포함하는 브랜치를 만듭니다:
-
-   ```bash
-   git branch [branch-name]
-   ```
-
-1. **작업 브랜치 변경하기**. 지정된 브랜치로 전환하고 `git switch`으로 작업 디렉토리를 업데이트합니다:
-
-   ```bash
-   git switch [branch-name]
-   ```
-
-1. **일하기**. 이 시점에서 변경 사항을 추가하려고 합니다. 다음 명령을 사용하여 Git에 알리는 것을 잊지 마시기 바랍니다:
-
-   ```bash
-   git add .
-   git commit -m "my changes"
-   ```
-
-   도와주고 있는 저장소의 관리자뿐만 아니라 당신을 위해서, 커밋에 좋은 이름을 부여해야 합니다.
-
-1. **`main` 브랜치에서 작업하기**. 어느 시점에서 작업을 마치고 `main` 브랜치의 작업과 병합하려고 합니다. 그동안 `main` 브랜치가 변경되었을 수 있으므로, 먼저 다음 명령을 사용하여 최신 버전으로 업데이트해야합니다:
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-   이 시점에서 Git이 변경 사항을 쉽게 _결합_ 할 수 없는 _충돌_ 상황이 작업 브랜치에서 발생하는지 확인하려고합니다. 따라서 다음 명령을 실행합니다:
-
-   ```bash
-   git switch [branch_name]
-   git merge main
-   ```
-
-   이렇게하면 `main` 에서 브랜치로 모든 변경점을 가져올 수 있으며 계속 진행할 수 있습니다. 그렇지 않은 경우에는 VS Code는 Git이 _혼란스러운_ 위치를 알려주고 영향받는 파일을 변경하여 가장 정확한 곳을 알려주면 됩니다.
-
-1. **GitHub로 작업 보내기**. 작업을 GitHub에 보내는 것은 두 가지를 의미합니다. 브랜치를 저장소로 푸시 한 다음 PR, Pull Request를 엽니다.
-
-   ```bash
-   git push --set-upstream origin [branch-name]
-   ```
-
-   위의 명령은 포크된 저장소에 브랜치를 만듭니다.
-
-1. **PR 열기**. 다음으로, PR을 열고 싶습니다. GitHub의 포크된 저장소로 이동하면 됩니다. GitHub에서 새 PR을 만들 것인지 묻는 표시가 표시되고 이를 클릭하면 커밋 메시지 제목을 변경할 수 있는 인터페이스로 이동하게 되며 더 적절한 설명을 작성할 수 있습니다. 이제 포크한 저장소의 관리자는 이 PR을 보고 _행운을 빌며_ 감사하고 _병합_ PR을 수행합니다. 당신은 이제 기여자입니다, yay :)
-
-1. **정라하기**. 나중에 _정리_ 하는 것은 좋은 습관으로 간주됩니다. 로컬 브랜치와 GitHub에 푸시한 브랜치를 모두 정리하려고 합니다. 먼저 다음 명령을 사용하여 로컬에서 삭제하겠습니다:
-
-   ```bash
-   git branch -d [branch-name]
-   ```
-
-   포크된 저장소의 GitHub 페이지로 이동하여 방금 푸시한 원격 브랜치를 제거합니다.
-
-변경점을 프로젝트에 푸시하고 싶기 때문에 `Pull request`는 어리석은 용어처럼 보입니다. 그러나 관리자(프로젝트 소유자) 또는 핵심 팀은 변경점을 프로젝트의 "main" 브랜치와 병합하기 전에 고려해야 하므로 실제로 유지 관리자에게 결정을 요청하는 것입니다.
-
-pull request는 리뷰, 코멘트, 통합 테스트 등을 통해 브랜치에 도입된 차이점을 비교하고 논의하는 곳입니다. 좋은 pull request는 커밋 메시지와 거의 동일한 규칙을 따릅니다. 예를 들어 작업에서 문제를 해결할 때 이슈 트래커에서 이슈에 대한 참조를 추가할 수 있습니다. 이 작업은 `#` 다음에 이슈 번호를 사용하여 수행됩니다. 예를 들어 `#97` 처럼 말입니다.
-
-🤞 모든 검사가 통과되고 프로젝트 소유자가 변경 사항을 프로젝트에 병합한다는 손가락이 교차했습니다 🤞
-
-현재 로컬 작업 브랜치를 GitHub의 원격 브랜치의 커밋으로 모두 업데이트합니다:
-
-`git pull`
-
-## 오픈소스에 기여하는 방법
-
-먼저, GitHub에서 관심있고 변경 사항을 기여할 저장소를 찾아 보겠습니다. 그 곳의 내용을 자신의 장치에 복사하고 싶을 것입니다.
-
-✅ '입문-친화적'인 저장소를 찾는 좋은 방법은 ['good-first-issue 태그로 검색하는 것입니다.'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
-
-![Copy a repo locally](../images/clone_repo.png)
-
-코드를 복사하는 방법에는 여러 가지가 있습니다. 한 가지 방법은 HTTPS, SSH 또는 GitHub CLI (Command Line 인터페이스)를 사용하여 저장소의 내용을 "복제"하는 것입니다.
-
-터미널을 열고 다음과 같이 저장소를 복제합니다:
-`git clone https://github.com/ProjectURL`
-
-프로젝트에서 작업하려면 올바른 폴더로 전환합니다:
-`cd ProjectURL`
-
-[Codespaces](https://github.com/features/codespaces), GitHub의 내장 코드 에디터 / 클라우드 개발 환경 또는 [GitHub Desktop](https://desktop.github.com/)을 사용하여 전체 프로젝트를 열 수 있습니다.
-
-마지막으로 압축된 폴더로 코드를 내려받을 수 있습니다.
-
-### GitHub에 대한 몇 가지 흥미로운 사항
-
-GitHub의 모든 공개 저장소에 스타 표시, 워치 및/또는 "포크" 할 수 있습니다. 우측 상단 드롭다운 메뉴에서 스타 표시한 저장소를 찾을 수 있습니다. 북마크와 비슷하지만 코드를 위한 것 입니다.
-
-프로젝트에는 달리 명시되지 않는 한 대부분 GitHub에 "이슈" 탭의 이슈 트레커가 있습니다. 그리고 Pull Requests 탭은 사람들이 진행중인 변경 사항을 논의하고 검토하는 곳입니다.
-
-프로젝트는 포럼, 메일링 리스트 또는 Slack, Discord 또는 IRC와 같은 채팅 채널에서 토론 할 수도 있습니다.
-
-✅ 새로운 GitHub 리포지토리를 둘러보고 설정 편집, 저장소 정보 추가, (Kanban 보드와 같은) 프로젝트 생성을 비롯한 몇 가지 작업을 시도해보시기 바랍니다. 할 수 있는 일이 많이 있습니다!
-
----
-
-## 🚀 도전 
-
-친구와 페어링하여 서로의 코드를 작업하세요. 공동으로 프로젝트를 만들고, 코드를 포크하고, 브랜치를 만들고, 변경 사항을 병합합니다.
-
-## 강의 후 퀴즈
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-[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/).
-
-Practice, practice, practice. GitHub에는 [lab.github.com](https://lab.github.com/)을 통해 사용할 수 있는 훌륭한 학습 경로가 있습니다:
-
-- [First Week on GitHub](https://lab.github.com/githubtraining/first-week-on-github)
-
-더 많은 고급 실습도 찾을 수 있습니다.
-
-## 과제 
-
-[the First Week on GitHub training lab](https://lab.github.com/githubtraining/first-week-on-github) 완료하기
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ms.md b/1-getting-started-lessons/2-github-basics/translations/README.ms.md
deleted file mode 100644
index 4dcc6f8b..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.ms.md
+++ /dev/null
@@ -1,318 +0,0 @@
-# Pengenalan Tentang GitHub
-
-Pelajaran ini merangkumi pengetahuan asas tentang GitHub, dan adalah salah satu platform untuk menjadi tuan rumah dan menguruskan perubahan pada kod anda.
-
-![Intro to GitHub](/sketchnotes/webdev101-github.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuiz Pra-Kuliah
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
-
-## Pengenalan
-
-Dalam pelajaran ini, kita akan belajar tentang:
-
-- mengesan kerja yang anda lakukan di mesin anda
-- membuat projek dengan orang lain
-- bagaimanakah menyumbang kepada perisian sumber terbuka
-
-### Prasyarat
-
-Sebelum bermula, anda perlu memeriksa sama ada Git dipasang dalam komputer anda. Dalam terminal menaip:
-`git --version`
-
-Sekiranya Git tidak dipasang, [memuat turun Git](https://git-scm.com/downloads). Kemudian, siapkan profil Git anda di terminal:
-* `git config --global user.name "your-name"`
-* `git config --global user.email "your-email"`
-
-Untuk memeriksa sama ada Git sudah dikonfigurasi, anda boleh menaip:
-`git config --list`
-
-Anda juga memerlukan akaun GitHub, penyunting kod (seperti Visual Studio Code), dan anda perlu membuka terminal anda (atau: command prompt).
-
-Navigasi ke [github.com] (https://github.com/) dan buat akaun jika anda belum melakukannya, atau log masuk dan isi profil anda.
-
-✅ GitHub bukan satu-satunya repositori kod di dunia; ada yang lain, tetapi GitHub adalah yang paling terkenal.
-
-### Persediaan
-
-Anda memerlukan kedua-dua folder dengan projek kod pada mesin tempatan anda (komputer riba atau PC), dan repositori awam di GitHub, yang akan menjadi contoh bagaimana menyumbang kepada projek orang lain.
-
----
-
-## Pengurusan Kod
-
-Katakan anda mempunyai folder secara tempatan dengan beberapa projek kod dan anda ingin mula mengesan kemajuan anda menggunakan git - sistem kawalan versi. Sebilangan orang membandingkan menggunakan git dengan menulis surat cinta untuk diri masa depan anda. Membaca mesej komit anda beberapa hari atau minggu atau bulan kemudian anda akan dapat mengingat mengapa anda membuat keputusan, atau "memutar balik (rollback)" perubahan - iaitu ketika anda menulis "pesan komit (commit messages)" yang baik.
-
-### Tugasan: Buat repositori dan kod komit
-
-1. **Buat satu repository di GitHub**. Di GitHub.com, pada tab repositori, atau dari bar navigasi di sebelah kanan atas, cari butang   **repo baru (new repo)**.
-
-   1. Beri nama repositori (folder) anda
-   1. Pilih **repositori kreat (create repository)**.
-
-1. **Navigasi ke folder kerja anda**. Di terminal anda, beralih ke folder (juga dikenali sebagai direktori) yang ingin anda mulakan penjejakan. Jenis:
-
-   ```bash
-   cd [name of your folder]
-   ```
-
-1. **Memulakan git repositori**. Dalam jenis projek anda:
-
-   ```bash
-   git init
-   ```
-
-1. **Periksa status**. Untuk memeriksa status repositori anda:
-
-   ```bash
-   git status
-   ```
-
-   the output can look something like this:
-
-   ```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
-   ```
-
-   Biasanya perintah `git status` memberitahu anda perkara seperti fail apa yang siap disimpan_ ke repo atau mempunyai perubahan di atasnya yang mungkin anda mahu berterusan.
-
-1. **Tambahkan semua fail untuk penjejakan**
-   Ini juga disebut sebagai fail pementasan / menambahkan fail ke kawasan pementasan (staging area).
-
-   ```bash
-   git add .
-   ```
-
-   Argumen `git add` plus `.` menunjukkan bahawa semua fail & perubahan anda untuk dijejaki.
-
-1. **Tambahkan fail terpilih untuk dijejaki**
-
-   ```bash
-   git add [file or folder name]
-   ```
-
-   Ini membantu kita untuk menambahkan fail yang dipilih hanya ke kawasan pementasan ketika kita tidak ingin melakukan semua fail sekaligus.
-
-1. **Lepaskan semua fail**
-
-   ```bash
-   git reset
-   ```
-
-   Perintah ini membantu kita untuk melepaskan semua fail sekaligus.
-
-1.  **Lepaskan fail yang tertentu**
-
-   ```bash
-   git reset [file or folder name]
-   ```
-
-   Perintah ini membantu kita untuk melepaskan hanya fail yang tertentu sekaligus yang tidak ingin kita sertakan untuk komit berikutnya.
-
-1. **Meneruskan kerja anda**. Pada masa ini anda telah menambahkan fail ke yang disebut _staging area_. Salah satu tempat di mana Git mengesan fail anda. Untuk melakukan perubahan itu kekal, anda perlu _commit_ fail itu. Untuk melakukannya anda perlu membuat _commit_ dengan perintah `git commit`. _commit_ mewakili titik simpanan dalam sejarah repo anda. Menaip perintah tersebut untuk membuat _commit_: 
-
-   ```bash
-   git commit -m "first commit"
-   ```
-
-   Untuk komit semua fail anda, menaip mesej "komit pertama (first commit)". Untuk mesej komit pada masa kelak, anda ingin lebih terperinci dalam penerangan anda untuk menyampaikan jenis perubahan yang telah anda buat.
-
-1. **Sambungkan repo Git tempatan anda dengan GitHub**. Repo Git adalah bagus dalam mesin anda tetapi pada satu ketika anda ingin mempunyai sandaran fail anda di suatu tempat dan juga mengundang orang lain untuk bekerja dengan anda di repo anda. Salah satu tempat yang bagus untuk melakukannya adalah di GitHub. Ingatlah bahawa kita sudah membuat repo di GitHub jadi satu-satunya perkara yang perlu kita lakukan ialah menghubungkan repo Git tempatan kita dengan GitHub. Perintah ini `git remote add` akan membuat tugasan tersebut. Menaip perintah tersebut: 
-
-   > Perhatikan, sebelum anda mengetik perintah, pergi ke halaman repo GitHub anda untuk mencari URL repositori. Anda akan menggunakannya dalam arahan di bawah. Gantikan `repository_name` degan GitHub URL.
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
-   Ini membuat _remote_, atau sambungan, bernama "origin" yang menunjuk ke repositori GitHub yang anda buat sebelumnya.
-
-1. **Hantar fail tempatan ke GitHub**. Setakat ini anda telah membuat _connection_ antara repo tempatan dan repo GitHub. Marilah hantarkan fail-fail ini ke GitHub dengan perintah berikut `git push`, seperti di bawah:
-
-   ```bash
-   git push -u origin main
-   ```
-
-   Perintah ini menghantar komit anda di cawangan "utama" (main branch) anda ke GitHub.
-
-1. **Untuk menambahkan perubahan lain**. Sekiranya anda ingin terus membuat perubahan dan menghantar ke GitHub, anda hanya perlu menggunakan tiga arahan berikut:
-
-   ```bash
-   git add .
-   git commit -m "type your commit message here"
-   git push
-   ```
-
-   >Tip, Anda mungkin juga mahu mengadopsi fail `.gitignore` untuk mengelakkan fail yang tidak ingin anda lacak muncul di GitHub - seperti fail nota yang anda simpan di folder yang sama tetapi tidak mempunyai tempat di repositori awam. Anda boleh mencari templat untuk `.gitignore` fail pada [.gitignore templates](github.com/github/gitignore).
-
-#### Mesej Komit
-
-Baris subjek Git komit yang hebat melengkapkan ayat berikut:
-Sekiranya berlaku, komit ini akan <baris subjek anda di sini>
-
-Untuk subjek gunakan keharusan, ketegangan sekarang: "perubahan" tidak "berubah" atau "perubahan".
-Seperti dalam subjek, dalam badan (pilihan) juga menggunakan keharusan, sekarang tegang. Tubuh harus merangkumi motivasi untuk perubahan dan membezakannya dengan tingkah laku sebelumnya. Anda menerangkan `mengapa`, bukan `bagaimana`.
-
-✅ Luangkan masa beberapa minit untuk melayari GitHub. Bolehkah anda menemui mesej komit yang sangat hebat? Bolehkah anda mencari yang paling minimum? Maklumat apa yang anda fikir paling penting dan berguna untuk disampaikan dalam pesanan komited?
-
-### Tugas: Kolaborasi
-
-Sebab utama meletakkan perkara di GitHub adalah untuk memungkinkan untuk berkolaborasi dengan pemaju lain.
-
-## Melakukan projek dengan orang lain
-
-Dalam repositori anda, arahkan ke `Insights> Community` untuk melihat bagaimana projek anda dibandingkan dengan standard komuniti yang disyorkan.
-
-   Berikut adalah beberapa perkara yang dapat meningkatkan repo GitHub anda:
-   - **Penerangan**. Adakah anda menambah keterangan untuk projek anda?
-   - **README**. Adakah anda menambah README? GitHub memberikan panduan untuk menulis [README](https://docs.github.com/articles/about-readmes/).
-   - **Garis panduan penyumbang**. Adakah projek anda mempunyai [cGaris panduan penyumbang](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
-   - **Tatakelakuan**. a [Tatakelakuan](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
-   - **Lesen**. Yang paling penting, ialah [lesen](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
-
-
-Semua sumber ini akan memberi manfaat kepada ahli pasukan baru. Dan ini biasanya merupakan jenis perkara yang dilihat oleh penyumbang baru bahkan sebelum melihat kod anda, untuk mengetahui sama ada projek anda adalah tempat yang tepat untuk mereka menghabiskan masa.
-
-✅ README fail, walaupun memerlukan masa untuk disiapkan, sering diabaikan oleh penyelenggara yang sibuk. Bolehkah anda mencari contoh yang sangat deskriptif? Catatan: ada beberapa [alat untuk membantu mencipta README yang baik](https://www.makeareadme.com/) yang anda boleh cuba.
-
-### Tugas: Gabungkan beberapa kod
-
-Menyumbang kepada dokumen membantu orang menyumbang dalam projek tersebut. Ini menerangkan jenis sumbangan yang anda cari dan bagaimana prosesnya berjalan. Penyumbang perlu melalui beberapa langkah untuk dapat menyumbang kepada repo anda di GitHub:
-
-
-1. **Memalsukan repo anda** Anda mungkin mahu orang membuat projek anda. Memalsukan (_fork_) bermaksud membuat replika repositori anda di profil GitHub mereka.
-1. **Klon**. Dari sana mereka akan mengklonkan projek ke mesin tempatan mereka.
-1. **Buat branch**. Anda ingin meminta mereka membuat branch (_branch_) untuk kerja mereka.
-1. **Fokus perubahan mereka pada satu kawasan**. Minta penyumbang memusatkan sumbangan mereka pada satu perkara pada satu masa - dengan cara itu peluang yang anda dapat _merge_ dalam pekerjaan mereka adalah lebih tinggi. Bayangkan mereka menulis perbaikan pepijat, menambah ciri baru, dan mengemas kini beberapa ujian - bagaimana jika anda mahu, atau hanya dapat melaksanakan 2 dari 3, atau 1 dari 3 perubahan?
-
-✅ Bayangkan keadaan di mana branch sangat penting untuk menulis dan menghantar kod yang baik. Apa kes penggunaan yang boleh anda fikirkan?
-
-> Perhatikan, jadikan perubahan yang ingin anda lihat di dunia, dan buatlah cawangan untuk karya anda sendiri juga. Segala komit yang anda buat akan dibuat di cabang tempat Anda sedang "check out" gunakan `git status` untuk melihat cabang mana.
-
-Mari melalui aliran kerja penyumbang. Anggaplah penyumbang telah _forked_ dan _cloned_ repo sehingga mereka mempunyai repo Git yang siap diusahakan, di mesin tempatan mereka:
-
-1. **Membuat branch**. Guna perintah `git branch` untuk membuat branch baharu seperti berikut: 
-
-   ```bash
-   git branch [branch-name]
-   ```
-
-1. **Tukar ke working branch**. Tukar ke branch yang ditentukan dan kemas kini direktori kerja dengan `git switch`:
-
-   ```bash
-   git switch [branch-name]
-   ```
-
-1. **Membuat kerja**. Pada ketika ini anda ingin menambahkan perubahan anda. Jangan lupa memberitahu Git mengenainya dengan arahan berikut:
-
-   ```bash
-   git add .
-   git commit -m "my changes"
-   ```
-
-   Pastikan anda memberikan ayat dengan baik kepada komit anda, demi anda dan juga penjaga repo yang anda bantu.
-
-1. **Gabungkan kerja anda dengan `main` branch**. Pada satu ketika anda selesai bekerja dan anda ingin menggabungkan kerja anda dengan `main` branch. `main` branch mungkin telah berubah sementara itu, pastikan anda mengemas kini terlebih dahulu kepada yang terbaru dengan arahan berikut:
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-   Pada ketika ini anda ingin memastikan bahawa apa-apa _conflicts_, keadaan di mana Git tidak dapat dengan mudah _combine_ perubahan berlaku di working branch anda. Oleh itu, jalankan arahan berikut:
-
-   ```bash
-   git switch [branch_name]
-   git merge main
-   ```
-
-   Ini akan membawa semua perubahan dari `main` ke branch anda dan semoga anda dapat meneruskannya. Sekiranya tidak, VS Code akan memberitahu anda di mana Git _confused_ dan anda hanya mengubah fail yang terjejas untuk mengatakan kandungan mana yang paling tepat.
-
-1. **Hantar kerja anda ke GitHub**. Menghantar karya anda ke GitHub bermaksud dua perkara. Menolak branch anda ke repo anda dan kemudian membuka PR, Tarik Permintaan (Pull Request).
-
-   ```bash
-   git push --set-upstream origin [branch-name]
-   ```
-
-   Perintah di atas membuat branch untuk forked repo.
-
-1. **Buka Tarik Permintaan (Pull Request)** Seterusnya, anda mahu membuka tarik permintaan (Pull Request). Anda melakukannya dengan menavigasi ke repo bercabang di GitHub. Anda akan melihat petunjuk di GitHub di mana ia bertanya sama ada anda mahu membuat tarik permintaan (Pull Request) baru, anda mengkliknya dan anda akan dibawa ke antara muka di mana anda boleh menukar tajuk mesej komit, berikan keterangan yang lebih sesuai. Sekarang penyelenggara repo yang anda garpu akan melihat PR ini dan _fingers crossed_ mereka akan menghargai dan _merge_ tarik permintaan (Pull Request) anda. Anda telah menjadi penyumbang, yay:)
-
-1. **Bersihkan**. Menjadikan amalan baik untuk _cleanup_ selepas anda. Anda mahu membersihkan local branch dan branch yang anda dorong ke GitHub. Pertama marilah hapuskannya secara tempatan dengan arahan berikut:
-
-   ```bash
-   git branch -d [branch-name]
-   ```
-
-   Pastikan anda pergi ke halaman GitHub untuk forked repo seterusnya dan keluarkan branch terpencil yang baru anda tolak.
-
-`Tarik Permintaan (Pull request)` nampaknya istilah yang tidak bermoral kerana anda benar-benar mahu mendorong perubahan anda ke projek. Tetapi penyelenggara (pemilik projek) atau pasukan inti perlu mempertimbangkan perubahan anda sebelum menggabungkannya dengan  "main" branch projek, jadi anda benar-benar meminta keputusan perubahan dari penyelenggara.
-
-Tarik permintaan (Pull Request) adalah tempat untuk membandingkan dan membincangkan perbezaan yang diperkenalkan di cabang dengan ulasan, komen, ujian bersepadu, dan banyak lagi. Tarik permintaan (Pull Request) yang baik mengikuti kira-kira peraturan yang sama dengan pesanan pesanan. Anda dapat menambahkan rujukan ke masalah dalam pelacak masalah, ketika pekerjaan Anda misalnya menyelesaikan masalah. Ini dilakukan dengan menggunakan `#` diikuti dengan jumlah masalah (issue) anda. Contohnya `# 97`.
-
-🤞 Jari memintas bahawa semua cek lulus dan pemilik projek menggabungkan perubahan anda ke dalam projek🤞
-
-Kemas kini working branch tempatan anda sekarang dengan semua komit baru dari branch terpencil yang sesuai di GitHub:
-
-`git pull`
-
-## Bagaimanakah menyumbang kepada sumber terbuka
-
-Pertama, marilah kita cari repositori - atau: repo - di GitHub yang menarik bagi anda dan yang anda ingin menyumbang perubahan. Anda mahu menyalin kandungannya ke mesin kami.
-
-✅ Kaedah yang baik untuk mencari repo 'mesra pemula (beginner-friendly)' adalah dengan [cari mengikut tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
-
-![Salin repo secara tempatan](images/clone_repo.png)
-
-Terdapat beberapa cara menyalin kod. Salah satu cara adalah dengan "mengklon" kandungan repositori, menggunakan HTTPS, SSH, atau menggunakan GitHub CLI (Command Line Interface).
-
-Buka terminal dan klon repo seperti di bawah: 
-`git clone https://github.com/ProjectURL`
-
-Untuk kerja dengan projek tersebut, tukar the fail kanan:
-`cd ProjectURL`
-
-And juga boleh membuka keseluruhan projek dengan [Codespaces](https://github.com/features/codespaces), Penyunting kod terbitan GitHub / persekitaran pengembangan awan, atau [GitHub Desktop](https://desktop.github.com/).
-
-Akhirnya, anda boleh memuat turun kod dalam bentuk zip.
-
-### Beberapa perkara menarik mengenai GitHub
-
-Anda boleh membintangi, menonton, dan / atau "fork" mana-mana repositori awam di GitHub. Anda boleh mencari repositori berbintang anda di menu lungsur kanan atas. Ia seperti penanda buku, tetapi untuk kod.
-
-Projek mempunyai pelacak masalah, kebanyakannya di GitHub di tab "Isu" kecuali dinyatakan sebaliknya, di mana orang membincangkan masalah yang berkaitan dengan projek. Dan tab Tarik Permintaan adalah tempat orang membincangkan dan mengkaji perubahan yang sedang berlangsung.
-
-Projek mungkin juga ada perbincangan di forum, senarai surat, atau saluran sembang seperti Slack, Discord atau IRC.
-
-✅ Lihatlah repo GitHub baru anda dan cuba beberapa perkara, seperti menyunting tetapan, menambahkan maklumat ke repo anda, dan membuat projek (seperti papan Kanban). Banyak yang boleh anda lakukan!
-
----
-
-### 🚀 Cabaran
-
-Berpasangan dengan rakan untuk mengerjakan kod masing-masing. Buat projek secara kolaboratif, fork kod, buat branch dan gabungkan perubahan.
-
-## Kuiz Pasca Kuliah
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
-
-## Mengkaji dan belajar sendiri
-
-Membaca tentang [menyumbang kepada sumber terbuka](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
-
-[Git nota](https://training.github.com/downloads/github-git-cheat-sheet/).
-
-Berlatih, berlatih, berlatih. GitHub mempunyai jalan pembelajaran yang hebat yang tersedia melalui [lab.github.com](https://lab.github.com/):
-
-- [Minggu pertama di GitHub](https://lab.github.com/githubtraining/first-week-on-github)
-
-Anda juga akan menemui makmal yang lebih maju.
-
-## Tugasan
-
-Selesaikan [Minggu pertama di GitHub (training lab)](https://lab.github.com/githubtraining/first-week-on-github)
\ No newline at end of file
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.nl.md b/1-getting-started-lessons/2-github-basics/translations/README.nl.md
deleted file mode 100644
index 40496449..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.nl.md
+++ /dev/null
@@ -1,318 +0,0 @@
-# Inleiding van GitHub
-
-Deze les behandelt de basisprincipes van GitHub, een platform voor het hosten en beheren van wijzigingen in uw code.
-
-![Intro to GitHub](/sketchnotes/webdev101-github.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz voorafgaand aan de lezing
-[Quiz voorafgaand aan de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
-
-## Inleiding
-
-In deze les behandelen we:
-
-- het volgen van het werk dat u op uw machine doet
-- samen met anderen aan projecten werken
-- hoe u kunt bijdragen aan open source software
-
-### Vereisten
-
-Voordat u begint, moet u controleren of Git is geïnstalleerd. In het terminal typ:
-`git --version`
-
-Als Git niet is geïnstalleerd, [download Git](https://git-scm.com/downloads). Stel vervolgens uw lokale Git-profiel in de terminal in:
-* `git config --global user.name "uw-naam"`
-* `git config --global user.email "uw-email"`
-
-Om te controleren of Git al is geconfigureerd, kunt u het volgende typen:
-`git config --list`
-
-U heeft ook een GitHub-account nodig, een code-editor (zoals Visual Studio Code) en u moet uw terminal openen (of: command prompt).
-
-Navigeer naar [github.com](https://github.com/) en maak een account aan als u dat nog niet heeft gedaan, of log in en vul uw profiel in.
-
-✅ GitHub is niet de enige coderepository ter wereld; er zijn anderen, maar GitHub is de bekendste
-
-### Voorbereiding
-
-U heeft zowel een map met een codeproject op uw lokale computer (laptop of pc) als een openbare repository op GitHub nodig, die als voorbeeld zal dienen voor hoe u kunt bijdragen aan de projecten van anderen.  
-
----
-
-## Code beheer
-
-Laten we zeggen dat u lokaal een map hebt met een of ander codeproject en u wilt beginnen met het volgen van uw voortgang met git - het versiebeheersysteem. Sommige mensen vergelijken het gebruik van git met het schrijven van een liefdesbrief aan uw toekomstige zelf. Als u uw commitberichten dagen of weken of maanden later leest, zult u u kunnen herinneren waarom u een beslissing heeft genomen, of een wijziging "terugdraaien" - dat wil zeggen, wanneer u goede "commitberichten" schrijft.
-
-### Taak: maak een repository en leg code vast
-
-1. **Maak een repository op GitHub**. Zoek op GitHub.com, in het tabblad repositories, of in de navigatiebalk rechtsboven, de knop **new repo**.
-
-   1. Geef uw repository (map) een naam
-   1. Selecteer **create repository**.
-
-1. **Navigeer naar uw werkmap**. Schakel in uw terminal naar de map (ook bekend als de directory) die u wilt beginnen met volgen. Typ:
-
-   ```bash
-   cd [naam van uw map]
-   ```
-
-1. **Initialiseer een git-repository**. In uw project, typ:
-
-   ```bash
-   git init
-   ```
-
-1. **Controleer de status**. Om de status van uw repository te controleren, typ:
-
-   ```bash
-   git status
-   ```
-
-   de output kan er ongeveer zo uitzien:
-
-   ```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
-   ```
-
-   Typisch vertelt een `git status` commando u dingen zoals welke bestanden klaar zijn om _opgeslagen_ te worden naar de repo of bevat veranderingen die u misschien wilt behouden.
-
-1. **Voeg alle bestanden toe voor tracking**
-   Dit wordt ook wel staging-bestanden/ bestanden toevoegen aan het staging-gebied genoemd.
-
-   ```bash
-   git add .
-   ```
-
-   Het `git add` plus `.` argument geeft aan dat al uw bestanden en wijzigingen voor tracking geselecteerd zijn. 
-
-1. **Voeg geselecteerde bestanden toe voor tracking**
-
-   ```bash
-   git add [bestands- of mapnaam]
-   ```
-
-   Dit helpt ons om alleen geselecteerde bestanden aan het staging-gebied toe te voegen als we niet alle bestanden tegelijk willen vastleggen.
-
-1. **Unstage alle bestanden**
-
-   ```bash
-   git reset
-   ```
-
-   Dit commando helpt ons om alle bestanden tegelijk te unstagen.
-
-1. **Unstage een bepaald bestand**
-
-   ```bash
-   git reset [bestands- of mapnaam]
-   ```
-
-   Dit commando helpt ons om alleen een bepaald bestand tegelijk te unstagen dat we niet willen opnemen voor de volgende commit.
-
-1. **Uw werk voortzetten**. Op dit punt heeft u de bestanden toegevoegd aan een zogenaamd _staging-gebied_. Een plek waar Git uw bestanden bijhoudt. Om de wijziging permanent te maken, moet u de bestanden _commiten_. Om dit te doen maakt u een _commit_ aan met het `git commit` commando. Een _commit_ vertegenwoordigt een besparingspunt in de geschiedenis van uw repo. Typ het volgende om een _commit_ te maken:
-
-   ```bash
-   git commit -m "eerste commit"
-   ```
-
-   Dit commit al uw bestanden door het bericht "first commit" toe te voegen. Voor toekomstige commitberichten wilt u meer beschrijvend zijn in uw beschrijving om over te brengen wat voor soort wijziging u heeft aangebracht.
-
-1. **Verbind uw lokale Git-repo met GitHub**. Een Git-repo is goed op uw computer, maar op een gegeven moment wilt u ergens een back-up van uw bestanden hebben en ook andere mensen uitnodigen om met u aan uw opslagplaats te werken. Een geweldige plek om dat te doen is GitHub. Onthoud dat we al een repo op GitHub hebben gemaakt, dus het enige dat we hoeven te doen, is onze lokale Git-repo verbinden met GitHub. Het commando `git remote add` zal precies dat doen. Typ de volgende commando:
-
-   > Let op: voordat u de opdracht typt, gaat u naar uw GitHub-repo-pagina om de repository-URL te vinden. U gebruikt het in het onderstaande commando. Vervang `repository_name` door uw GitHub-URL.
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
-   Dit creëert een _remote_, of verbinding, genaamd "origin", wijzend naar de GitHub-repository die u eerder heeft gemaakt.
-
-1. **Stuur lokale bestanden naar GitHub**. Tot nu toe heeft u een _verbinding_ gemaakt tussen de lokale repo en de GitHub-repo. Laten we deze bestanden naar GitHub sturen met het volgende commando `git push`, zoals zo:
-
-   ```bash
-   git push -u origin main
-   ```
-
-   Dit stuurt uw commits in uw "main" tak naar GitHub.
-
-1. **Om meer wijzigingen toe te voegen**. Als u door wilt gaan met het aanbrengen van wijzigingen en ze naar GitHub wilt pushen, hoeft u alleen maar de volgende drie commando's te gebruiken:
-
-   ```bash
-   git add .
-   git commit -m "typ hier uw commitbericht"
-   git push
-   ```
-
-   > Tip, misschien wilt u ook een `.gitignore`-bestand adopteren om te voorkomen dat bestanden die u niet wilt volgen, verschijnen op GitHub - zoals dat notitiesbestand dat u opslaat in dezelfde map maar geen plaats heeft op een openbare repository. U kunt sjablonen voor `.gitignore` bestanden vinden op [.gitignore templates](https://github.com/github/gitignore).
-
-#### Commit berichten
-
-Een geweldige onderwerpregel voor een commitbericht van Git maakt de volgende zin compleet:
-Indien toegepast, zal deze commit <uw onderwerpregel hier>
-
-Gebruik voor het onderwerp de gebiedende wijs, tegenwoordige tijd: "verander" niet "veranderd" noch "veranderingen".
-Net als in het onderwerp, gebruik in het lichaam (optioneel) ook de imperatieve tegenwoordige tijd. Het lichaam moet de motivatie voor de verandering opnemen en dit contrasteren met eerder gedrag. U legt het `waarom` uit, niet het `hoe`.
-
-✅ Neem een paar minuten de tijd om rond GitHub te surfen. Kunt u een echt geweldig commitbericht vinden? Kunt u een echt minimale vinden? Welke informatie is volgens u het belangrijkst en nuttigst om over te brengen in een commitbericht?
-
-### Taak: Samenwerken
-
-De belangrijkste reden om dingen op GitHub te zetten, was om het mogelijk te maken om samen te werken met andere ontwikkelaars.
-
-## Samen met anderen aan projecten werken
-
-Navigeer in uw repository naar `Insights > Community` om te zien hoe uw project zich verhoudt tot aanbevolen communitystandaarden.
-
-   Hier zijn enkele dingen die uw GitHub-repo kunnen verbeteren:
-   - **Omschrijving**. Heeft u een beschrijving voor uw project toegevoegd?
-   - **README**. Heeft u een README toegevoegd? GitHub biedt richtlijnen voor het schrijven van een [README](https://docs.github.com/articles/about-readmes/).
-   - **Richtlijn voor bijdragen**. Heeft uw project [richtlijnen voor bijdragen](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
-   - **Gedragscode**. Een [Gedragscode](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
-   - **Licentie**. Misschien nog belangrijker, een [licentie](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
-
-
-Al deze middelen zullen nieuwe teamleden helpen. En dat zijn typisch het soort dingen waar nieuwe bijdragers naar kijken voordat ze zelfs maar naar uw code kijken, om erachter te komen of uw project de juiste plek is om hun tijd door te brengen.
-
-✅ README-bestanden, hoewel ze wat tijd nodig hebben om voor te bereiden, worden vaak genegeerd door drukke beheerders. Kunt u een voorbeeld vinden van een bijzonder beschrijvende? Opmerking: er zijn enkele [tools om goede README's te maken](https://www.makeareadme.com/) die u misschien zou willen proberen.
-
-### Taak: voeg een code samen
-
-Documenten voor bijdragen helpen mensen bij te dragen aan het project. Het legt uit wat voor soort bijdragen u zoekt en hoe het proces werkt. Bijdragers moeten een reeks stappen doorlopen om bij te dragen aan uw repo op GitHub:
-
-
-1. **Uw repo forken** Waarschijnlijk wilt u dat mensen uw project _forken_. Forken betekent het maken van een replica van uw repository op hun GitHub-profiel.
-1. **Kloon**. Van daaruit zullen ze het project naar hun lokale computer klonen (clone). 
-1. **Maak een tak**. U zult ze willen vragen om een _tak_ voor hun werk te creëren (branch). 
-1. **Richt hun verandering op één gebied**. Vraag bijdragers om hun bijdragen op één ding tegelijk te concentreren - op die manier is de kans groter dat u hun werk kan _samenvoegen_ (merge). Stelt u voor dat ze een bugfix schrijven, een nieuwe functie toevoegen en verschillende tests bijwerken - wat als u slechts 2 van de 3 of 1 van de 3 wijzigingen wilt of kunt implementeren?
-
-✅ Stelt u een situatie voor waarin takken bijzonder cruciaal zijn voor het schrijven en verzenden van goede code. Welke use-cases kunt u bedenken?
-
-> Let op: wees de verandering die u in de wereld wilt zien, en maak ook takken voor uw eigen werk. Alle commits die u maakt, worden gemaakt op de tak waar u momenteel naar "uitgecheckt" bent. Gebruik `git status` om te zien welke tak dat is.
-
-Laten we een workflow voor bijdragers doorlopen. Veronderstel dat de bijdrager de repo al _geforkt_ en _gekloond_ heeft, zodat ze een Git-repo hebben klaar om aan te werken, op hun lokale computer:
-
-1. **Maak een tak**. Gebruik het commando `git branch` om een branch te maken die de wijzigingen bevat die ze willen bijdragen:
-
-   ```bash
-   git branch [taknaam]
-   ```
-
-1. **Overschakelen naar werkende tak**. Schakel over naar de gespecificeerde tak en update de werkdirectory met `git switch`:
-
-   ```bash
-   git switch [taknaam]
-   ```
-
-1. **Werken**. Op dit punt wilt u uw wijzigingen toevoegen. Vergeet niet om Git erover te vertellen met de volgende commando's:
-
-   ```bash
-   git add .
-   git commit -m "mijn veranderingen"
-   ```
-
-   Zorg ervoor dat u uw commit een goede naam geeft, zowel voor u als voor de beheerder van de repo waarmee u helpt.
-
-1. **Combineer uw werk met de `main` tak**. Op een gegeven moment bent u klaar met werken en wilt u uw werk combineren met dat van de `main` tak. De `main` tak kan ondertussen veranderd zijn, dus zorg ervoor dat u deze eerst bijwerkt naar de laatste versie met de volgende commando's:
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-   Op dit punt wilt u er zeker van zijn dat alle _conflicten_, situaties waarin Git niet gemakkelijk de veranderingen kan _combineren_ plaatsvinden in uw werkende tak. Voer daarom de volgende opdrachten uit:
-
-   ```bash
-   git switch [taknaam]
-   git merge main
-   ```
-
-   Dit brengt alle wijzigingen van `main` naar uw tak en hopelijk kunt u gewoon doorgaan. Als dit niet het geval is, zal VS Code u vertellen waar Git _in de war_ is en verandert u gewoon de betrokken bestanden om te zeggen welke inhoud het meest accuraat is.
-
-1. **Stuur uw werk naar GitHub**. Het verzenden van uw werk naar GitHub betekent twee dingen. Uw tak naar uw repo pushen en vervolgens een PR, Pull Request openen.
-
-   ```bash
-   git push --set-upstream origin [taknaam]
-   ```
-
-   Het bovenstaande commando maakt de tak op uw geforkte repo.
-
-1. **Open een PR**. Vervolgens wilt u een PR openen. U doet dat door naar de geforkte repo op GitHub te navigeren. U ziet een indicatie op GitHub waar het vraagt of u een nieuwe PR wilt maken, u klikt erop en u wordt naar een interface geleid waar u de titel van het commitbericht kunt wijzigen, geef het een meer geschikte beschrijving. Nu zal de beheerder van de repo die u heeft geforkt deze PR zien en, _vingers gekruist_, zullen ze uw PR waarderen en _samenvoegen_. U bent nu een bijdrager, yay :)
-
-1. **Opruimen**. Het wordt als een goede gewoonte beschouwd om _op te ruimen_ nadat u met succes een PR hebt samengevoegd. U wilt zowel uw lokale tak opruimen als de tak die u naar GitHub hebt gepusht. Laten we het eerst lokaal verwijderen met het volgende commando: 
-
-   ```bash
-   git branch -d [taknaam]
-   ```
-
-   Zorg ervoor dat u naar de GitHub-pagina gaat voor de geforkte repo en verwijder de externe tak die u er zojuist naartoe hebt gepusht.
-
-`Pull request` lijkt een gekke term, omdat u uw wijzigingen echt in het project wilt pushen. Maar de onderhouder (projecteigenaar) of het kernteam moet rekening houden met uw wijzigingen voordat u deze samenvoegt met de "main" tak van het project, dus u vraagt echt om een wijzigingsbesluit van een onderhouder.  
-
-Een pull request is de plek om de verschillen die op een tak zijn geïntroduceerd te vergelijken en te bespreken met recensies, opmerkingen, geïntegreerde tests en meer. Een goed pull request volgt ongeveer dezelfde regels als een commitbericht. U kunt een verwijzing naar een probleem (issue) toevoegen in de issue tracker, bijvoorbeeld wanneer uw werk een probleem oplost. Dit doet u met een `#` gevolgd door het nummer van uw probleem. Bijvoorbeeld `# 97`.
-
-🤞Duimen dat alle controles slagen en de projecteigenaar(s) uw wijzigingen in het project samenvoegen🤞
-
-Update uw huidige lokale werkende tak met alle nieuwe commits van de corresponderende remote tak op GitHub:
-
-`git pull`
-
-## Hoe u kunt bijdragen aan open source
-
-Laten we eerst een repository - of: repo - op GitHub zoeken die voor u interessant is en waaraan u een wijziging zou willen bijdragen. U zult de inhoud ervan naar uw machine kopiëren.
-
-✅ Een goede manier om 'beginnersvriendelijke' repos te vinden, is door [te zoeken op de tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
-
-![Kopieer lokaal een repo](../images/clone_repo.png)
-
-Er zijn verschillende manieren om code te kopiëren. Een manier is om de inhoud van de repository te "klonen" door HTTPS, SSH of de GitHub CLI (Command Line Interface) te gebruiken. 
-
-Open uw terminal en kloon de repository op deze manier:
-`git clone https://github.com/ProjectURL`
-
-Schakel naar de juiste map om aan het project te werken:
-`cd ProjectURL`
-
-U kunt ook het hele project openen met [Codespaces](https://github.com/features/codespaces), GitHub's ingesloten code-editor  /cloud-ontwikkelomgeving of [GitHub Desktop](https://desktop.github.com/).
-
-Ten slotte kunt u de code downloaden in een gecomprimeerde map. 
-
-### Nog een paar interessante dingen over GitHub
-
-U kunt elke openbare repository op GitHub een ster geven, bekijken en/of "forken". U kunt uw repositories met ster vinden in het vervolgkeuzemenu rechtsboven. Het is net als bladwijzers, maar dan voor code. 
-
-Projecten hebben een issue tracker, meestal op GitHub in de "Issues" tab, tenzij anders aangegeven, waar mensen problemen bespreken die verband houden met het project. En op het tabblad Pull Requests bespreken en beoordelen mensen lopende wijzigingen.
-
-Projecten kunnen ook worden besproken in forums, mailinglijsten of chatkanalen zoals Slack, Discord of IRC.
-
-✅ Kijk eens rond in uw nieuwe GitHub-repo en probeer een paar dingen, zoals het bewerken van instellingen, het toevoegen van informatie aan uw repo en het maken van een project (zoals een Kanban-bord). U kunt veel doen!
-
----
-
-## 🚀 Uitdaging 
-
-Koppel met een vriend om aan elkaars code te werken. Creëer gezamenlijk een project, fork code, maak takken en voeg wijzigingen samen.
-
-## Quiz na de lezing
-[Quiz na de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
-
-## Beoordeling en zelfstudie
-
-Lees meer over [bijdragen aan 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/).
-
-Oefenen, oefenen, oefenen. GitHub heeft geweldige leertrajecten beschikbaar via [lab.github.com](https://lab.github.com/):
-
-- [Eerste week op GitHub](https://lab.github.com/githubtraining/first-week-on-github)
-
-U zult ook meer geavanceerde labs vinden. 
-
-## Toewijzing 
-
-Voltooi [de eerste week op GitHub-trainingslaboratorium](https://lab.github.com/githubtraining/first-week-on-github)
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.pt.md b/1-getting-started-lessons/2-github-basics/translations/README.pt.md
deleted file mode 100644
index 3c66c75b..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.pt.md
+++ /dev/null
@@ -1,317 +0,0 @@
-# Introdução ao GitHub
-
-Esta lição cobre os fundamentos do GitHub, uma plataforma para hospedar e gerenciar alterações em seu código.
-
-![Intro ao GitHub](/sketchnotes/webdev101-github.png)
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pré-Aula
-[Quiz Pré-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
-
-## Introdução
-
-Nesta lição vamos falar sobre:
-
-- rastreando o trabalho que você faz em sua máquina
-- trabalhando em projetos com outros
-- como contribuir com software de código aberto
-
-### Pré-requisitos
-
-Antes de começar, você precisará verificar se o Git está instalado. No terminal, digite: 
-`git --version`
-
-Se o Git não estiver instalado, [baixe o Git aqui](https://git-scm.com/downloads). Em seguida, configure seu perfil Git local no terminal:
-* `git config --global user.name "your-name"`
-* `git config --global user.email "your-email"`
-
-Para verificar se o Git já está configurado, você pode digitar:
-`git config --list`
-
-Você também precisará de uma conta do GitHub, um editor de código (como o Visual Studio Code) e abrir seu terminal (ou: prompt de comando).
-
-Navegue para [github.com](https://github.com/) e crie uma conta, caso ainda não o tenha feito, ou faça login e preencha o seu perfil. 
-
-✅ O GitHub não é o único repositório de código do mundo; existem outros, mas o GitHub é o mais conhecido.
-
-### Preparação
-
-Você precisará de uma pasta com um projeto de código em sua máquina local (laptop ou PC) e de um repositório público no GitHub, que servirá como um exemplo de como contribuir com os projetos de outras pessoas. 
-
----
-
-## Gerenciamento de código
-
-Digamos que você tenha uma pasta localmente com algum projeto de código e deseja começar a monitorar seu progresso usando git - o sistema de controle de versão. Algumas pessoas comparam o uso do git a escrever uma carta de amor para o seu futuro eu. Lendo suas mensagens de commit dias, semanas ou meses depois, você será capaz de se lembrar por que tomou uma decisão, ou "reverter" uma mudança - isto é, quando você escreve boas "mensagens de commit".
-
-### Tarefa: Faça um repositório e conmmit o código
-
-1. **Crie um repositório no GitHub**. No GitHub.com, na guia de repositórios ou na barra de navegação superior direita, encontre o botão **new repo** .
-
-   1. Dê um nome ao seu repositório (pasta) 
-   1. Selecione **create repository**.
-
-1. **Navegue até sua pasta de trabalho**. Em seu terminal, mude para a pasta (também conhecida como diretório) que deseja iniciar o rastreamento. Digite:
-
-   ```bash
-   cd [nome da sua pasta]
-   ```
-
-1. **Inicialize um repositório git**. No seu projeto, digite:
-
-   ```bash
-   git init
-   ```
-
-1. **Cheque status**. Para checar o status de seu repositório, digite:
-
-   ```bash
-   git status
-   ```
-
-   a saída pode ser parecida com esta:
-
-   ```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
-   ```
-
-   Geralmente o comando `git status` diz a você coisas como quais arquivos estão prontos para serem _salvos_ para o repo ou tem alterações que você pode querer persistir.
-
-1. **Adicionar todos os arquivos para rastreamento**
-   Isso também é chamado de arquivos de teste / adição de arquivos à área de teste.
-
-   ```bash
-   git add .
-   ```
-
-   O argumento `git add` plus `.` indiciona todos os seus arquivos e alterações para rastreamento. 
-
-1. **Adicionar arquivos selecionados para rastreamento**
-
-   ```bash
-   git add [nome do arquivo ou pasta]
-   ```
-
-Isso nos ajuda a adicionar apenas os arquivos selecionados à área de teste quando não queremos enviar todos os arquivos de uma vez.
-
-1. **Unstage todos os arquivos**
-
-   ```bash
-   git reset
-   ```
-   Este comando nos ajuda a unstage todos os arquivos de uma vez.
-
-1. **Unstage um arquivo em particular**
-
-   ```bash
-   git reset [nome do arquivo ou pasta]
-   ```
-
-   Este comando nos ajuda a remover stage de apenas um arquivo específico de uma vez que não queremos incluir no próximo commit.
-
-1. **Persistindo no seu trabalho**. Neste ponto, você adicionou os arquivos a um local chamado _staging area_. Um lugar onde o Git está rastreando seus arquivos. Para tornar a mudança permanente, você precisa _committar_ os arquivos. Para fazer isso, crie um _commit_ com o comando `git commit`. Um _commit_ representa um ponto na história do seu repo sendo salvo. Digite o seguinte para criar um _commit_:
-
-   ```bash
-   git commit -m "first commit"
-   ```
-
-   Isso confirma todos os seus arquivos, adicionando a mensagem "first commit" (primeiro commit). Para mensagens de commit futuras, você desejará ser mais descritiva em sua descrição para transmitir que tipo de mudança você fez.
-
-1. **Conecte seu repositório Git local com GitHub**. Um repositório Git é bom em sua máquina, mas em algum momento você vai querer fazer backup de seus arquivos em algum lugar e também convidar outras pessoas para trabalhar com você em seu repositório. Um ótimo lugar para fazer isso é o GitHub. Lembre-se de que já criamos um repositório no GitHub, então a única coisa que precisamos fazer é conectar nosso repositório Git local ao GitHub. O comando `git remote add` fará exatamente isso. Digite o seguinte comando:
-
-   > Antes de digitar o comando, vá para a página do repositório GitHub para encontrar o URL do repositório. Você o usará no comando abaixo. Substitua `repository_name` pelo seu URL do GitHub.
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
-   Isso cria um _remote_, ou conexão, chamada "origin" apontando para o repositório GitHub que você criou anteriormente.
-
-1. **Envie arquivos locais para GitHub**. Até agora, você criou uma _conexão_ entre o repositório local e o repositório GitHub. Vamos enviar esses arquivos para o GitHub com o seguinte comando `git push`, assim: 
-
-   ```bash
-   git push -u origin main
-   ```
-
-   Isso envia seus commits em seu branch "principal" para o GitHub.
-
-1. **Para adicionar mais mudanças**. Se quiser continuar fazendo alterações e enviando-as para o GitHub, você só precisará usar os três comandos a seguir:
-
-   ```bash
-   git add .
-   git commit -m "digite sua mensagem de commit aqui"
-   git push
-   ```
-
-   > Dica, você também pode adotar um arquivo `.gitignore` para evitar que arquivos que você não deseja rastrear apareçam no GitHub - como aquele arquivo de notas que você armazena na mesma pasta, mas não tem lugar em um repositório público. Você pode encontrar modelos para arquivos `.gitignore` em [modelos .gitignore](https://github.com/github/gitignore).
-
-#### Mensagens de Commit 
-
-Uma ótima mensagem de Git commit completa a seguinte frase:
-Se aplicado, este commit irá <sua mensagem de commit aqui>
-
-Para o assunto use o tempo presente imperativo: "mudar" e não "mudou" nem "muda".
-Assim como no sujeito, no corpo (opcional) também use o tempo presente imperativo. O corpo deve incluir a motivação para a mudança e contrastar isso com o comportamento anterior. Você está explicando o `porquê`, não o` como`.
-
-✅ Reserve alguns minutos para navegar no GitHub. Você consegue encontrar uma mensagem de commit realmente ótima? Você pode encontrar uma ruim? Quais informações você acha que são as mais importantes e úteis para transmitir em uma mensagem de commit?
-
-### Tarefa: Colabore
-
-O principal motivo para colocar coisas no GitHub foi possibilitar a colaboração com outros desenvolvedores.
-
-## Trabalhando em projetos com outras pessoas
-
-Em seu repositório, navegue até `Insights> Community` para ver como seu projeto se compara aos padrões recomendados da comunidade.
-
-   Aqui estão algumas coisas que podem melhorar seu repositório GitHub: 
-   - **Descrição**. Você adicionou uma descrição para o seu projeto?
-   - **README**. Você adicionou um README? O GitHub fornece orientação para escrever um [README](https://docs.github.com/articles/about-readmes/).
-   - **Guia de Contribuição**. Seu projeto tem um [guia para contribuição](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/), 
-   - **Código de Conduta**. Um [Código de Conduta](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
-   - **Licença**. Talvez o mais importante, a [licença](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
-
-
-Todos esses recursos irão beneficiar a integração de novos membros da equipe. E esses são normalmente o tipo de coisas que os novas pessoas colaboradoras olham antes mesmo de olhar para o seu código, para descobrir se o seu projeto é o lugar certo para elas passarem o tempo.
-
-✅ Arquivos README, embora levem tempo para serem preparados, são freqüentemente negligenciados por pessoas mantenedores ocupadas. Você pode encontrar um exemplo particularmente descritivo? Nota: existem algumas [ferramentas para ajudar a criar bons READMEs](https://www.makeareadme.com/) que você pode querer experimentar.
-
-### Tarefa: Dar merge em algum código
-
-Documentos contribuintes ajudam as pessoas a contribuir para o projeto. Ele explica quais tipos de contribuições você está procurando e como funciona o processo. As pessoas colaboradoras precisarão seguir uma série de etapas para poder contribuir com seu repo no GitHub:
-
-
- 1. **Bifurcando seu repo** Você provavelmente vai querer que as pessoas _fork_ seu projeto. Bifurcação significa criar uma réplica de seu repositório em seu perfil GitHub.
-1. **Clone**. A partir daí, elas clonarão o projeto em sua máquina local.
-1. **Crie um branch**. Você vai querer pedir a elas que criem um _branch_ para seu trabalho.
-1. **Concentre sua mudança em uma área**. Peça aos colaboradores para concentrarem suas contribuições em uma coisa de cada vez - dessa forma, as chances de você se _mergir_ no trabalho delas são maiores. Imagine que elas escrevam uma correção de bug, adicionem um novo recurso e atualizem vários testes - e se você quiser ou só puder implementar 2 de 3, ou 1 de 3 alterações?
-
-✅ Imagine uma situação em que os branches são particularmente críticos para escrever e distribuir bons códigos. Em quais casos de uso você consegue pensar?
-
-> Nota, seja a mudança que você deseja ver no mundo e crie ramificações para o seu próprio trabalho também. Todos os commits que você fizer serão feitos no branch em que você está atualmente “check-out”. Use `git status` para ver qual branch é.
-
-Vamos analisar o fluxo de trabalho de uma pessoa colaboradora. Suponha que ela já _forked_ e _cloned_ o repo para que ela tenha um repositório Git pronto para ser trabalhado, em sua máquina local:
-
-1. **Crie um brancj**. Use o comando `git branch` para criar um branch que conterá as mudanças que pretendem contribuir:
-
-   ```bash
-   git branch [branch-name]
-   ```
-
-1. **Mudar para o branch de trabalho**. Mude para o branch especificado e atualize o diretório de trabalho com `git switch`:
-
-   ```bash
-   git switch [branch-name]
-   ```
-
-1. **Trabalhe**. Neste ponto, você deseja adicionar suas alterações. Não se esqueça de contar ao Git sobre isso com os seguintes comandos:
-
-   ```bash
-   git add .
-   git commit -m "minhas mudancas"
-   ```
-
-   Certifique-se de dar ao seu commit um bom nome, para seu bem e também para os mantenedores do repo no qual você está ajudando.
-
-1. **Combine seu trabalho com o branch `main`**. Em algum ponto, você concluiu o trabalho e deseja combinar seu trabalho com o do branch `principal`. O branch `main` pode ter mudado enquanto isso, certifique-se de primeiro atualizá-lo para o mais recente com os seguintes comandos:
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-   Neste ponto, você quer ter certeza de que quaisquer _conflitos_, situações em que o Git não pode _combinar_ facilmente as mudanças aconteçam em seu branch de trabalho. Portanto, execute os seguintes comandos:
-
-   ```bash
-   git switch [branch_name]
-   git merge main
-   ```
-
-   Isso trará todas as mudanças de `main` em seu branch e esperançosamente você pode simplesmente continuar. Caso contrário, o VS Code dirá onde o Git está _confundido_ e você apenas alterará os arquivos afetados para dizer qual conteúdo é o mais preciso.
-
-1. **Envie seu trabalho para o GitHub**. Enviar seu trabalho para o GitHub significa duas coisas. Enviando seu branch para o repo e, em seguida, abra um PR, Pull Request.
-
-   ```bash
-   git push --set-upstream origin [branch-name]
-   ```
-
-    O comando acima cria o branch em seu repositório bifurcado.
-
-1. **Abra um PR**. Em seguida, você deseja abrir um PR. Você faz isso navegando até o repositório bifurcado no GitHub. Você verá uma indicação no GitHub onde pergunta se você deseja criar um novo PR, você clica nele e é levado a uma interface onde pode alterar o título da mensagem de commit, dê-lhe uma descrição mais adequada. Agora, a mantenedora do repo que você bifurcou verá este PR e _dedos cruzados_, eles apreciarão e _mergirão_ seu PR. Agora você é uma pessoa contribuidora, eba :)
-
-1. **Limpeza**. É considerado uma boa prática _limpar_ após mesclar com sucesso um PR. Você deseja limpar seu branch local e o branch que você enviou para o GitHub. Primeiro, vamos excluí-lo localmente com o seguinte comando:
-
-   ```bash
-   git branch -d [branch-name]
-   ```
-
-   Em seguida, vá para a página GitHub do repositório bifurcado e remova o branch remoto que você acabou de enviar para ele.
-
-`Pull request` parece um termo bobo porque na verdade você deseja enviar suas alterações para o projeto. Mas a pessoa mantendo o repo ou equipe central precisa considerar suas mudanças antes de fundi-las com o branch "principal" do projeto, então você está realmente solicitando uma decisão de mudança de uma pessoa mantenedora. 
-
-Uma PR é o lugar para comparar e discutir as diferenças introduzidas em um branch com revisões, comentários, testes integrados e muito mais. Uma boa PR segue aproximadamente as mesmas regras de uma mensagem de commit. Você pode adicionar uma referência a um problema no rastreador de problemas, quando seu trabalho, por exemplo, corrige um problema. Isso é feito usando um `#` seguido pelo número do seu problema. Por exemplo `# 97`.
-
-🤞 Dedos cruzados para que todas as verificações sejam aprovadas e as pessoas proprietárias do projeto deem merge nas suas alterações no projeto 🤞
-
-Atualize seu branch de trabalho local atual com todos os novos commits do branch remoto correspondente no GitHub:
-
-`git pull`
-
-## Como contribuir com Open Source
-
-Primeiramente, vamos encontrar um repositório (ou **repo**) no GitHub de interesse para você e para o qual você gostaria de contribuir. Você vai querer copiar o conteúdo desse repo para a sua máquina.
-
-✅ Uma boa maneira de encontrar repos 'iniciantes' é [buscar usando a tag  'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
-
-![Copiar um repo localmente](../images/clone_repo.png)
-
-Existem várias maneiras de copiar códigos. Uma maneira é "clonar" o conteúdo do repositório, usando HTTPS, SSH ou usando o GitHub CLI (Command Line Interface). 
-
-Abra seu terminal e clone o repositório assim:
-`git clone https://github.com/ProjectURL`
-
-Para trabalhar no projeto, mude para a pasta certa:
-`cd ProjectURL`
-
-Você também pode abrir todo o projeto usando [Codespaces](https://github.com/features/codespaces), O editor de código incorporado do GitHub/ ambiente de desenvolvimento em nuvem, ou o [GitHub Desktop](https://desktop.github.com/).
-
-Por último, você pode baixar o código em uma pasta como .zip.
-
-###  Mais algumas coisas interessantes sobre o GitHub
-
-Você pode dar uma estrela, assistir e/ou "bifurcação" em qualquer repositório público no GitHub. Você pode encontrar seus repositórios estrelados no menu suspenso de cima para a direita. É como marcar, mas para código. 
-
-Os projetos têm um rastreador de problemas, no GitHub na aba "Problemas", a menos que indicado o contrário, onde as pessoas discutem questões relacionadas ao projeto. E a aba de Pull Requests é onde as pessoas discutem e analisam as mudanças que estão em andamento.
-
-Os projetos também podem ter discussão em fóruns, listas de discussão ou canais de bate-papo como Slack, Discord ou IRC.
-
-✅ Dê uma olhada no seu novo GitHub repo e experimente algumas coisas, como editar configurações, adicionar informações ao seu repo e criar um projeto (como uma placa Kanban). Há muita coisa que você pode fazer!
-
----
-
-## 🚀 Desafio 
-
-Parear com uma amiga para trabalhar no código uma da outra. Crie um projeto de forma colaborativa, de fork no código, crie branches e de merge mudanças.
-
-## Quiz pós-aula
-[Quiz pós-aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
-
-## Revisão & Auto estudo
-
-Leia mais sobre [contribuindo para o software de código aberto](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
-
-[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/).
-
-Pratique, pratique, pratique. GitHub tem ótimos caminhos de aprendizagem disponíveis via [lab.github.com](https://lab.github.com/):
-
-- [Primeira semana no GitHub](https://lab.github.com/githubtraining/first-week-on-github)
-
-Você também encontrará laboratórios mais avançados.
-
-## Lição de casa
-
-Complete [o lab a Primeira Semana gitHub](https://lab.github.com/githubtraining/first-week-on-github)
\ No newline at end of file
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ru.md b/1-getting-started-lessons/2-github-basics/translations/README.ru.md
deleted file mode 100644
index f927187b..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.ru.md
+++ /dev/null
@@ -1,321 +0,0 @@
-# Введение в GitHub
-
-В этом уроке рассматриваются основы GitHub - платформы для хранения и управления изменениями вашего кода.
-
-![Введение в GitHub](/sketchnotes/webdev101-github.png)
-
-> Скетчноут [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Предлекционный квиз
-
-[Предлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
-
-## Введение
-
-В этом уроке мы рассмотрим:
-
-- отслеживание работы, которую вы делаете на своем устройстве
-- совместная работа над проектами с другими людьми
-- как внести свой вклад в программное обеспечение с открытым исходным кодом
-
-### Требования
-
-Прежде чем начать, вам нужно проверить, установлен ли Git. В терминале напечатайте:
-`git --version`
-
-Если Git не установлен, [установите Git](https://git-scm.com/downloads). Затем настройте свой локальный профиль Git в терминале:
-
-- `git config --global user.name "ваше-имя"`
-- `git config --global user.email "ваш-email"`
-
-Чтобы проверить, настроен ли уже Git, вы можете ввести:
-`git config --list`
-
-Вам также понадобится аккаунт на GitHub, редактор кода (например, Visual Studio Code) и вам нужно будет открыть свой терминал (или командную строку).
-
-Перейдите на [github.com](https://github.com/) и создайте аккаунт, если вы еще этого не сделали, или войдите в систему и заполните свой профиль.
-
-✅ GitHub - не единственная платформа для хранения репозиториев кода в мире; есть и другие, но GitHub - самый известный.
-
-### Подготовка
-
-Вам понадобится как папка с проектом кода на вашем локальном компьютере (ноутбуке или ПК), так и общедоступный репозиторий на GitHub, который мы используем, чтобы показать, как внести свой вклад в другие проекты.
-
----
-
-## Управление кодом
-
-Допустим, у вас есть локальная папка с каким-то проектом и вы хотите начать отслеживать свой прогресс с помощью системы контроля версий Git. Некоторые люди сравнивают использование git с написанием любовного письма себе в будущем. Читая сообщения коммитов через несколько дней, недель или месяцев, вы сможете вспомнить, почему вы сделали так, а не иначе, или сможете «откатить» изменения.
-
-### Задание: Сделать репозиторий и сделать коммит
-
-1. **Создайте репозиторий на GitHub**. На GitHub.com на вкладке репозиториев или в правом верхнем углу панели навигации найдите кнопку **новый репозиторий**.
-
-   1. Дайте вашему репозиторию (папке) имя
-   1. Выберите **создать репозиторий**.
-
-1. **Перейдите в свою рабочую папку**. В вашем терминале перейдите в папку (также известную как каталог), которую вы хотите начать отслеживать. Введите:
-
-   ```bash
-   cd [имя вашей папки]
-   ```
-
-1. **Инициализируйте git репозиторий**. В вашем проекте напечатайте:
-
-   ```bash
-   git init
-   ```
-
-1. **Проверьте статус**. Чтобы проверить статус вашего репозитория введите:
-
-   ```bash
-   git status
-   ```
-
-   вывод может выглядеть примерно так:
-
-   ```output
-   Changes not staged for commit:
-   (use "git add <file>..." to update what will be committed)
-   (use "git checkout -- <file>..." to discard changes in working directory)
-
-        modified:   file.txt
-        modified:   file2.txt
-   ```
-
-   Обычно команда `git status` сообщает вам, какие файлы готовы к _сохранению_ в репозиторий или в каких есть изменения, которые вы, возможно, захотите сохранить.
-
-1. **Добавьте все файлы для отслеживания**.
-   Это также называется подготовленными файлами (staging files) / добавлением файлов в область подготовленных файлов (staging area).
-
-   ```bash
-   git add .
-   ```
-
-   Команда `git add` с аргументом `.` указывает, что все ваши файлы и изменения будут добавлены для отслеживания.
-
-1. **Добавьте выбранные файлы для отслеживания**
-
-   ```bash
-   git add [название файла или папки]
-   ```
-
-   Это помогает нам добавлять только выбранные файлы в область подготовки, когда мы не хотим фиксировать все файлы сразу.
-
-1. **Удаление всех файлов из области подготовки**
-
-   ```bash
-   git reset
-   ```
-
-   Эта команда помогает нам убрать все файлы сразу из staging area.
-
-1. **Удаление определенного файла из области подготовки**
-
-   ```bash
-   git reset [название файла или папки]
-   ```
-
-   Эта команда помогает нам убрать определенный файл, который мы не хотим включать в следующий коммит.
-
-1. **Сохраняйте свою работу**. На этом этапе вы добавили файлы в так называемую _staging area (область подготовки)_. Место, где Git отслеживает ваши файлы. Чтобы сделать изменение постоянным, вам необходимо _закоммитить (зафиксировать)_ файлы. Для этого вы создаете _коммит_ с помощью команды `git commit`. _Коммит_ представляет собой точку сохранения в истории вашего репозитория. Введите следующее, чтобы создать новый _коммит_:
-
-   ```bash
-   git commit -m "первый коммит"
-   ```
-
-   Эта команда сохраняет все ваши файлы, добавляя сообщение «первый коммит». Для будущих сообщений коммитов вам нужно будет быть более информативным в своем описании, чтобы передать, какой тип изменения вы внесли.
-
-1. **Подключите локальный репозиторий Git к GitHub**. Репозиторий Git хорош на вашем компьютере, но в какой-то момент вы захотите сделать резервную копию ваших файлов, а также пригласить других людей поработать с вами над вашим проектом. Одно из таких прекрасных мест для этого - GitHub. Помните, что мы уже создали репозиторий на GitHub, поэтому единственное, что нам нужно сделать, это подключить наш локальный репозиторий Git к GitHub. Команда `git remote add` предназначена именно для этого. Введите следующую команду:
-
-   > Обратите внимание: прежде чем вводить команду, перейдите на страницу репозитория GitHub, чтобы найти URL-адрес репозитория. Вы будете использовать его в приведенной ниже команде. Замените `username/repository_name` своим URL-адресом репозитория на GitHub.
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
-   Эта команда создает _удаленное соединение_ с именем «origin», указывающее на репозиторий GitHub, который вы создали ранее.
-
-1. **Отправьте локальные файлы в GitHub**. Итак, вы создали _соединение_ между локальным репозиторием и репозиторием на GitHub. Давайте отправим эти файлы на GitHub с помощью следующей команды `git push`, вот так:
-
-   ```bash
-   git push -u origin main
-   ```
-
-   Эта команда отправляет коммиты из вашей локальной ветки "main" в одноименную ветку на GitHub.
-
-1. **Добавление последующих изменений**. Если вы хотите продолжить вносить изменения и отправлять их на GitHub, вам просто нужно использовать следующие три команды:
-
-   ```bash
-   git add .
-   git commit -m "напишите здесь свое сообщения для коммита"
-   git push
-   ```
-
-   > Совет: вы также можете использовать файл `.gitignore`, чтобы файлы, которые вы не хотите отслеживать, не отправлялись на GitHub. Например, файл заметок, который вы храните в той же папке, но не хотите, чтобы он отображался в публичном репозитории. Вы можете найти шаблоны для файлов `.gitignore` по следующей ссылке [.gitignore templates](https://github.com/github/gitignore).
-
-#### Сообщения коммитов
-
-Хорошее сообщение к коммиту должно завершать следующее предложение:  
-_Если применить этот коммит, то он <ваше сообщение к коммиту>_  
-(_If applied, this commit will <your subject line here>_)
-
-Для основного сообщения к коммиту используйте повелительное наклонение в настоящем времени: «change», а не «changed» или «changes». Также и в расширенном сообщении (которое необязательно) используйте повелительное наклонение в настоящем времени. Основное сообщение должно включать мотивацию к изменению и противопоставлять это предыдущему поведению. Вы объясняете `почему`, а не `как`.
-
-✅ Потратьте несколько минут, чтобы немного исследовать GitHub. Сможете ли вы найти действительно отличное сообщение к коммиту? Можете ли вы найти минимальное сообщение к коммиту? Какую информацию вы считаете наиболее важной и полезной для передачи в сообщении к коммиту?
-
-### Задание: Сотрудничество
-
-Основная причина размещения проектов на GitHub заключается в том, чтобы дать возможность сотрудничать с другими разработчиками.
-
-## Работа над проектами с другими разработчиками
-
-В своем репозитории перейдите в `Insights > Community`, чтобы увидеть, как ваш проект сравнивается с рекомендованными стандартами сообщества.
-
-Вот несколько вещей, которые могут улучшить ваш репозиторий на GitHub:
-
-- **Описание**. Вы добавили описание для своего проекта?
-- **README**. Вы добавили README? GitHub предлагает руководство по написанию [README](https://docs.github.com/articles/about-readmes/).
-- **Рекомендации по внесению вклада**. У вашего проекта есть [рекомендации по внесению вклада (contributing guideline)](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)?
-- **Нормы поведения**. [Code of Conduct](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/).
-- **Лицензия**. Возможно, самое важное - это [лицензия](https://docs.github.com/articles/adding-a-license-to-a-repository/).
-
-Все эти ресурсы принесут пользу новым членам команды. И это, как правило, те вещи, на которые новые участники смотрят, прежде чем даже взглянуть на ваш код, чтобы узнать, является ли ваш проект подходящим местом для них, чтобы тратить свое время.
-
-✅ Файлы README часто игнорируются занятыми разработчиками из-за нехватки времени на их подготовку. Можете ли вы найти пример README с хорошим описанием проекта? Примечание: есть несколько [инструментов для создания хороших README](https://www.makeareadme.com/), которые вы, возможно, захотите попробовать.
-
-### Задание: Слияние кода
-
-Правила соучастия (например, документ `CONTRIBUTING.md`) помогают людям разобраться, как вносить свой вклад в проект. В нем объясняется, какие типы вкладов вас интересуют и как работает этот процесс. Чтобы внести свой вклад в ваш репозиторий на GitHub, участникам потребуется выполнить ряд шагов:
-
-1. **Сделать ответвление вашего репозитория (Forking)**. Вы, вероятно, захотите, чтобы люди сделали _ответвление (fork)_ вашего проекта. Ответвление означает создание копии вашего репозитория в их профиле GitHub.
-1. **Клонировать**. Оттуда они будут клонировать проект на свой локальный компьютер.
-1. **Создать ветку**. Вы можете попросить их создать _ветку_ для своей работы.
-1. **Сосредоточить свои изменения на одной области**. Попросите участников концентрировать свой вклад на чем-то одном - так шансы, что вы сможете провести _слияние кода_ с их работой, будут выше. Представьте, что они написали исправление ошибки, добавили новую функцию и обновили несколько тестов - что, если вы хотите или можете принять только 2 из 3 или 1 из 3 изменений?
-
-✅ Придумайте ситуацию, в которой ветки особенно важны для написания и распространения хорошего кода. Какие варианты использования приходят вам на ум?
-
-> Примечание: будьте тем изменением, которое вы хотите увидеть в мире, и также создавайте ответвления для своей собственной работы. Любые совершаемые вами коммиты будут выполняться в той ветке, в которой вы в настоящее время находитесь. Используйте `git status`, чтобы узнать, какая это ветка.
-
-Давайте рассмотрим рабочий процесс соавтора. Предположим, что соавтор уже _сделал ответвление_ и _склонировал_ ваш репозиторий, поэтому у него на локальном компьютере есть репозиторий Git, готовый к работе:
-
-1. **Создание ветки**. Используйте команду `git branch` для создания ветки, которая будет содержать изменения, которые вы хотите внести:
-
-   ```bash
-   git branch [название-ветки]
-   ```
-
-1. **Переход в рабочую ветку**. Переключитесь на указанную ветку и обновите рабочую папку с помощью команды `git switch`:
-
-   ```bash
-   git switch [branch-name]
-   ```
-
-1. **Написание кода**. На этом этапе вы хотите добавить свои изменения. Не забудьте сообщить об этом Git с помощью следующих команд:
-
-   ```bash
-   git add .
-   git commit -m "мои изменения"
-   ```
-
-   Убедитесь, что вы написали хорошее сообщение для своего коммита, понятное как для себя, так и для владельца репозитория, которому вы помогаете.
-
-1. **Совместите свою работу с веткой `main`**. В какой-то момент вы закончили работу и хотите совместить свою работу с работой над веткой `main`. Ветка `main` за это время могла измениться, поэтому убедитесь, что вы сначала обновили ее до последней версии с помощью следующих команд:
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-   На этом этапе вы хотите убедиться, что любые _конфликты_, ситуации, когда Git не может легко _комбинировать_ изменения, происходят в вашей рабочей ветке. Поэтому выполните следующие команды:
-
-   ```bash
-   git switch [название-ветки]
-   git merge main
-   ```
-
-   Это внесет все изменения из main в вашу ветку, и, надеюсь, вы сможете продолжить. Если нет, VS Code сообщит вам, где Git _не может самостоятельно решить конфликт_, и вы просто измените затронутые файлы, чтобы указать, какой контент является наиболее точным.
-
-1. **Отправьте свою работу на GitHub**. Отправка вашей работы на GitHub означает две вещи. Отправьте свою ветку (push) в репозиторий, а затем откройте пул реквест (сокращенно PR).
-
-   ```bash
-   git push --set-upstream origin [название-ветки]
-   ```
-
-   Приведенная выше команда создает ветку в вашем, ответвленном от основного, репозитории.
-
-1. **Открытие PR**. Далее, вы хотите открыть PR. Вы делаете это, перейдя к ответвленному репозиторию на GitHub. Вы увидите подсказку на GitHub, где вам предложат, хотите ли вы создать новый PR. Вы нажимаете на это указание, и попадаете в интерфейс, где вы можете изменить заголовок сообщения к пул реквесту, можете дать ему более подходящее описание. Теперь владелец репозитория, от которого вы сделали ответвление, увидит этот PR, и (_скрестим пальцы_) он одобрит и примет ваш PR в свой репозиторий. Теперь вы соавтор, ура :)
-
-1. **Чистка (Clean up)**. Хорошей практикой считается _чистка_ после успешного слияния PR. Вы хотите очистить как локальную ветку, так и ветку, которую вы отправили на GitHub. Сначала удалим ее локально с помощью следующей команды:
-
-   ```bash
-   git branch -d [название-ветки]
-   ```
-
-   Убедитесь, что вы перешли на страницу GitHub для ответвленного репозитория и удалили удаленную ветку, которую вы только что отправили на GitHub.
-
-`Pull request` (дословно: запрос на стягивание) кажется глупым термином, потому что на самом деле вы хотите отправить (push) свои изменения в проект. Но владелец проекта или основная команда должны рассмотреть ваши изменения перед слиянием их с основной ветвью проекта ("main"), поэтому вы действительно запрашиваете разрешение у владедьца о стягивании ваших изменений.
-
-Pull request - это место, где можно сравнить и обсудить изменения, представленные в ветке, проверками, комментариями, интегрированными тестами и т.д. Хороший pull request следует примерно тем же правилам, что и сообщение к коммиту. Вы можете добавить ссылку на вопрос (issue) в систему отслеживания проблем, например, когда вы работаете над устранением проблемы/бага. Это делается с помощью символа `#`, за которым следует номер вашего issue. Например, `# 97`.
-
-🤞Скрестив пальцы, все проверки проходят, и владелец (владельцы) проекта проводят слияние ваших изменений в проект🤞
-
-Обновите текущую локальную рабочую ветку всеми новыми коммитами из соответствующей удаленной ветки на GitHub с помощью следующей команды:
-
-`git pull`
-
-## Как внести свой вклад в открытый исходный код
-
-Во-первых, давайте найдем репозиторий на GitHub, который вас интересует и в который вы хотели бы внести изменения. Вам неоходимо скопировать его содержимое на свой компьютер.
-
-✅ Хороший способ найти репозитории, удобные для новичков, - это [поиск по тегу 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
-
-![Copy a repo locally](../images/clone_repo.png)
-
-Есть несколько способов копирования кода. Один из способов - «клонировать» содержимое репозитория, используя HTTPS, SSH или используя GitHub CLI (интерфейс командной строки).
-
-Откройте свой терминал и клонируйте репозиторий вот так:
-`git clone https://github.com/ProjectURL`
-
-Для работы над проектом перейдите в правильную папку:
-`cd ProjectURL`
-
-Вы также можете открыть весь проект, используя [Codespaces](https://github.com/features/codespaces), встроенный редактор кода / облачная среда разработки GitHub или [GitHub Desktop](https://desktop.github.com/).
-
-Наконец, вы можете загрузить код в заархивированной папке.
-
-### Еще несколько интересных вещей о GitHub
-
-Вы можете отметить, посмотреть и / или «разветвить» любой публичный репозиторий на GitHub. Вы можете найти свои отмеченные репозитории в раскрывающемся меню в правом верхнем углу. Это как закладка, но для кода.
-
-В проектах есть средство отслеживания проблем, в основном на GitHub на вкладке «Проблемы» (Issues), если не указано иное, где люди обсуждают проблемы, связанные с проектом. А на вкладке «Pull Requests» люди обсуждают и просматривают изменения, которые происходят.
-
-Проекты также могут обсуждаться на форумах, в списках рассылки или в чатах, таких как Slack, Discord или IRC.
-
-✅ Осмотрите свой новый репозиторий GitHub и попробуйте несколько вещей, например, отредактируйте настройки, добавьте информацию в репозиторий и создайте проект (например, доску Канбан). Вы можете многое сделать!
-
----
-
-## 🚀 Челлендж
-
-Объединитесь с другом, чтобы работать над кодом друг друга. Совместно создавайте проект, разветвляйте код, создавайте ветви и объединяйте изменения.
-
-## Постлекционный квиз
-
-[Постлекционный квиз](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
-
-## Обзор и самообучение
-
-Подробнее об [участие в разработке программного обеспечения с открытым исходным кодом](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution).
-
-[Шпаргалка по Git](https://training.github.com/downloads/github-git-cheat-sheet/).
-
-Практика, практика, практика. GitHub предлагает отличные способы обучения, доступные через [lab.github.com](https://lab.github.com/):
-
-- [Первая неделя на GitHub](https://lab.github.com/githubtraining/first-week-on-github)
-
-Вы также можете найти более продвинутые лаборатории для практики.
-
-## Задание
-
-Завершите [первую неделю в учебной лаборатории GitHub](https://lab.github.com/githubtraining/first-week-on-github)
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ta.md b/1-getting-started-lessons/2-github-basics/translations/README.ta.md
deleted file mode 100644
index f4be0b1e..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.ta.md
+++ /dev/null
@@ -1,325 +0,0 @@
-# கிட்ஹப் அறிமுகம்
-
-இந்த பாடம் கிட்ஹப் அடிப்படைகளை உள்ளடக்கியது, உங்கள் குறியீட்டில் மாற்றங்களை நடத்த மற்றும் நிர்வகிக்க ஒரு தளம்.
-
-![Iகிட்ஹப் அறிமுகம்](/sketchnotes/webdev101-github.png)
-> ஸ்கெட்ச்நோட் [டோமோமி இமுரா](https://twitter.com/girlie_mac)
-
-
-##  விரிவுரைக்கு முந்தைய வினாடி வினா
-[ விரிவுரைக்கு முந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=ta)
-
-## அறிமுகம்
-
-இந்த பாடத்தில், நாங்கள் உள்ளடக்குவோம்:
-
-- உங்கள் இயந்திரத்தில் நீங்கள் செய்யும் வேலையைக் கண்காணித்தல்
-- மற்றவர்களுடன் திட்டங்களில் வேலை செய்தல்
-- திறந்த மூல மென்பொருள் பங்களிக்க எப்படி
-
-### முன் நிபந்தனைகள்
-
-நீங்கள் தொடங்குவதற்கு முன், கிட் நிறுவப்பட்டதா என்பதை நீங்கள் சரிபார்க்க வேண்டும். முனைய வகை:  
-`git --version`
-
-கிட் நிறுவப்படவில்லை என்றால், [கிட் பதிவிறக்க](https://git-scm.com/downloads) . பின்னர், முனையத்தில் உங்கள் உள்ளூர் கிட் சுயவிவரத்தை அமை:
-
-* `git config --global user.name "your-name"`
-* `git config --global user.email "your-email"`
-
-கிட் ஏற்கனவே உள்ளமைக்கப்பட்டதா என்பதை சரிபார்க்க நீங்கள் தட்டச்சு செய்யலாம்:
-`git config --list`
-
-நீங்கள் ஒரு கிட்ஹப் கணக்கு, ஒரு குறியீட்டு ஆசிரியர் (விஷுவல் ஸ்டுடியோ குறியீடு போன்றவை) வேண்டும், மேலும் உங்கள் முனையத்தைத் திறக்க வேண்டும் (அல்லது: கட்டளை செயலழைப்பு).
-
-நீங்கள் ஏற்கனவே இல்லை என்றால் [github.com](https://github.com/) செல்லவும் மற்றும் ஒரு கணக்கை உருவாக்கவும், அல்லது உள்நுழைந்து உங்கள் சுயவிவரத்தை நிரப்பவும். 
-
-
-✅  கிட்ஹப் உலகின் ஒரே குறியீடு களஞ்சியம் அல்ல; மற்றவர்கள் இருக்கிறார்கள், ஆனால் கிட்ஹப் நன்கு அறியப்பட்டவர்
-
-### முன்னேற்பாடு செய்தல்
-
-உங்கள் உள்ளூர் இயந்திரத்தில் (மடிக்கணினி அல்லது பிசி) ஒரு குறியீட்டு திட்டத்துடன் ஒரு கோப்புறை மற்றும் கிட்ஹப்பில் ஒரு பொது களஞ்சியம் ஆகிய இரண்டும் உங்களுக்குத் தேவைப்படும், இது மற்றவர்களின் திட்டங்களுக்கு எவ்வாறு பங்களிக்க வேண்டும் என்பதற்கு ஒரு எடுத்துக்காட்டாக இருக்கும். 
-
----
-
-## குறியீடு மேலாண்மை
-
-சில குறியீட்டு திட்டத்துடன் உள்நாட்டில் ஒரு கோப்புறை உள்ளது என்று வைத்துக்கொள்வோம், மேலும் உங்கள் முன்னேற்றத்தை கிட் - பதிப்பு கட்டுப்பாட்டு அமைப்பு பயன்படுத்தி கண்காணிக்க த் தொடங்க வேண்டும். சிலர் கிட் பயன்படுத்தி உங்கள் எதிர்கால சுய ஒரு காதல் கடிதம் எழுத ஒப்பிட்டு. நாட்கள் அல்லது வாரங்கள் அல்லது மாதங்களுக்குப் பிறகு உங்கள் ஒப்புக்கொள்ளும் செய்திகளைப் படிக்கும்போது, நீங்கள் ஏன் ஒரு முடிவை எடுத்தீர்கள், அல்லது ஒரு மாற்றத்தை "திரும்பப் பெறுகிறீர்கள்" என்பதை நீங்கள் நினைவுகூர முடியும் - அதாவது, நீங்கள் நல்ல "செய்திகளைச் செய்யுங்கள்" என்று எழுதும்போது.
-
-### பணி: ஒரு களஞ்சியத்தை உருவாக்கவும் மற்றும் குறியீட்டை செய்யவும்
-
-1.  **கிட்ஹப் இல் களஞ்சியத்தை உருவாக்கவும்** கிட்ஹப், களஞ்சியங்கள் தாவலை, அல்லது வழிசெலுத்தல் பட்டியில் மேல் வலது இருந்து, **புதிய ரெப்போ ** பொத்தானை கண்டுபிடிக்க.
-
-   1. உங்கள் களஞ்சியத்திற்கு (கோப்புறை) ஒரு பெயரைக் கொடுங்கள்
-   1. தேர்ந்தெடுக்கவும் **create repository**.
-
-1. **உங்கள் பணி கோப்புறைக்கு செல்லவும்**. உங்கள் முனையத்தில், கோப்புறைக்கு மாறவும் (கோப்பகம் என்றும் அழைக்கப்படுகிறது) நீங்கள் கண்காணிக்கத் தொடங்க விரும்புகிறீர்கள். மாதிப் படிவம்:
-
-   ```bash
-   cd [உங்கள் கோப்புறையின் பெயர்]
-   ```
-
-1. **ஒரு கிட் களஞ்சியத்தை துவக்கு**. உங்கள் திட்ட வகை:
-
-   ```bash
-   git init
-   ```
-
-1. **நிலையை சரிபார்க்கவும்**. உங்கள் களஞ்சிய வகையின் நிலையை சரிபார்க்க:
-
-   ```bash
-   git status
-   ```
-
-   வெளியீடு இந்த மாதிரி ஏதாவது இருக்க முடியும்:
-
-   ```output
-   Changes not staged for commit:
-   (use "git add <file>..." to update what will be committed)
-   (use "git checkout -- <file>..." to discard changes in working directory)
-
-        modified:   file.txt
-        modified:   file2.txt
-   ```
-   பொதுவாக ஒரு `git status` கட்டளை, கோப்புகளில் _சேமிக்கதயாராக உள்ளது_ ரெப்போஅல்லது நீங்கள் தொடர்ந்து இருக்க விரும்பும் மாற்றங்களைக் கொண்டுள்ளது போன்ற விஷயங்களைஉங்களுக்குச் சொல்கிறது.
-
-1. **கண்காணிப்பு அனைத்து கோப்புகளை சேர்க்க**
-   இது ஸ்டேஜிங் கோப்புகள் / ஸ்டேஜிங் பகுதியில் கோப்புகளைச் சேர்ப்பது என்றும் அழைக்கப்படுகிறது.
-
-   ```bash
-   git add .
-   ```
-`git add` பிளஸ் `.` வாதம் உங்கள் கோப்புகள் அனைத்தும் கண்காணிக்க மாறும் என்பதைக் குறிக்கிறது.
-
-1. **கண்காணிப்புக்காக தேர்ந்தெடுக்கப்பட்ட கோப்புகளைச் சேர்க்கவும்**
-
-   ```bash
-   git add [கோப்பு அல்லது கோப்புறை பெயர்]
-   ```
-
-   ஒரே நேரத்தில் அனைத்து கோப்புகளையும் செய்ய விரும்பாத போது, தேர்ந்தெடுக்கப்பட்ட கோப்புகளை மட்டுமே ஸ்டேஜிங் பகுதியில் சேர்க்க இது உதவுகிறது.
-
-1. **அனைத்து கோப்புகளையும் நிலைநீக்கு**
-
-   ```bash
-   git reset
-   ```
-
-    இந்த கட்டளை அனைத்து கோப்புகளையும் ஒரே நேரத்தில் நிலைநீக்க உதவுகிறது.
-
-
-1. **ஒரு குறிப்பிட்ட கோப்பை நிலைநீக்கு**
-
-   ```bash
-   git reset [கோப்பு அல்லது கோப்புறை பெயர்]
-   ```
-
-    அடுத்த கமிட் செய்ய விரும்பாத ஒரு குறிப்பிட்ட கோப்பை மட்டும் ஒரே நேரத்தில் கட்டமைக்க இந்த கட்டளை நமக்கு உதவுகிறது.
-
-1. **உங்கள் வேலையை த் தொடருதல்**. இந்த கட்டத்தில் நீங்கள் _ஸ்டேஜிங் பகுதி_ என்று அழைக்கப்படும் கோப்புகளை சேர்த்துள்ளீர்கள். உங்கள் கோப்புகளை கிட் கண்காணிக்கும் இடம். மாற்றத்தை நிரந்தரமாக்க, கோப்புகளை _கமிட்_ செய்ய வேண்டும். அவ்வாறு செய்ய நீங்கள் `git commit` கட்டளையுடன் ஒரு _கமிட்_ உருவாக்குகிறீர்கள். ஒரு _கமிட்_ உங்கள் ரெப்போ வரலாற்றில் ஒரு சேமிப்பு புள்ளி யை குறிக்கிறது. _கமிட்_ உருவாக்க பின்வருவனவை தட்டச்சு செய்யவும்:
-
-
-   ```bash
-   git commit -m "first commit"
-   ```
-
-    இது உங்கள் கோப்புகள் அனைத்தையும் ஒப்புக்கொள்கிறது, "முதலில் ஒப்புக்கொள்ளுங்கள்" என்ற செய்தியைச் சேர்க்கிறது. எதிர்காலத்தில் செய்திகளைச் செய்ய நீங்கள் என்ன வகையான மாற்றத்தை செய்தீர்கள் என்பதை தெரிவிக்க உங்கள் விளக்கத்தில் இன்னும் விளக்கமாக இருக்க விரும்புகிறீர்கள்.
-
-1. **உங்கள் உள்ளூர் கிட் ரெப்போவை கிட்ஹப் உடன் இணைக்கவும்**. ஒரு கிட் ரெப்போ உங்கள் இயந்திரத்தில் நல்லது, ஆனால் ஒரு கட்டத்தில் நீங்கள் எங்காவது உங்கள் கோப்புகளை காப்புப்பிரதி எடுக்க விரும்புகிறீர்கள், மேலும் உங்கள் ரெப்போவில் உங்களுடன் வேலை செய்ய மற்ற நபர்களை அழைக்கவும் விரும்புகிறீர்கள். அவ்வாறு செய்ய ஒரு பெரிய இடம் கிட்ஹப் ஆகும். நாம் ஏற்கனவே கிட்ஹப்பில் ஒரு ரெப்போவை உருவாக்கியுள்ளோம் என்பதை நினைவில் கொள்ளுங்கள், எனவே நாம் செய்ய வேண்டிய ஒரே விஷயம் கிட்ஹப் உடன் எங்கள் உள்ளூர் கிட் ரெப்போவை இணைக்க வேண்டும். `git remote add` என்ற கட்டளை அதைச் செய்யும். பின்வரும் கட்டளையை தட்டச்சு செய்யவும்:
-
-   > குறிப்பு, நீங்கள் கட்டளையை தட்டச்சு செய்வதற்கு முன், உங்கள் கிட்ஹப் ரெப்போ பக்கத்திற்கு சென்று களஞ்சியத்தை கண்டுபிடிக்கவும். நீங்கள் கீழே உள்ள கட்டளையில் பயன்படுத்துவீர்கள். ```https://github.com/username/repository_name.git``` என்பதை உங்கள் கிட்ஹப் யுஆர்எல் மூலம் மாற்றவும்.
-
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
- இது ஒரு _தொலை__ அல்லது இணைப்பை உருவாக்குகிறது, "தோற்றம்" என்று பெயரிடப்பட்டது, நீங்கள் முன்பு உருவாக்கிய கிட்ஹப் களஞ்சியத்தை சுட்டிக்காட்டுகிறது.
-
- 1. **கீதுப் க்கு உள்ளூர் கோப்புகளை அனுப்பவும்** இதுவரை நீங்கள் உள்ளூர் ரெப்போ மற்றும் கிட்ஹப் ரெப்போ இடையே ஒரு _இணைப்பு_ உருவாக்கியுள்ளீர்கள். பின்வரும் கட்டளை `git push`உடன் இந்த கோப்புகளை கிட்ஹப் க்கு அனுப்புவோம், இது போன்றது: 
-   
-   > குறிப்பு, உங்கள் கிளை பெயர் முன்னிருப்பாக வேறுபட்டிருக்கலாம் ```main```.
-
-   ```bash
-   git push -u origin main
-   ```
-
-      இது உங்கள் "main" கிளையில் உள்ள உங்கள் உறுதிகளை கிட்ஹப் க்கு அனுப்புகிறது.
-
-2. **மேலும் மாற்றங்களைச் சேர்க்க**. நீங்கள் மாற்றங்களைதொடர்ந்து செய்ய விரும்பினால், அவற்றை கிட்ஹப் க்கு தள்ளவிரும்பினால், பின்வரும் மூன்று கட்டளைகளைப் பயன்படுத்த வேண்டும்:
-
-   ```bash
-   git add .
-   git commit -m "உங்கள் ஒப்புக்கொள்ளும் செய்தியை இங்கே தட்டச்சு செய்யவும்"
-   git push
-   ```
-   > உதவிக்குறிப்பு, நீங்கள் கிட்ஹப்பில் காண்பிக்க விரும்பாத கோப்புகளைத் தடுக்க ஒரு `.gitignore` கோப்பை நீங்கள் ஏற்றுக்கொள்ள விரும்பலாம் - அதே கோப்புறையில் நீங்கள் சேமித்து வைக்கும் குறிப்புகள் கோப்பு போல, ஆனால் ஒரு பொது களஞ்சியத்தில் இடமில்லை. [.gitignore templates](https://github.com/github/gitignore) இல் `.gitignore` கோப்புகளுக்கான வார்ப்புருக்களை நீங்கள் காணலாம்
-
-#### செய்திகளை ஒப்புக்கொள்
-
-
-ஒரு பெரிய கிட் கமிட் சப்ஜெக்ட் லைன் பின்வரும் வாக்கியத்தை நிறைவு செய்யும்:
-பயன்படுத்தப்பட்டால், இந்த உறுதி <உங்கள் பொருள் வரி இங்கே>
-
-பொருள் கட்டாயபயன்படுத்த, தற்போதைய: "மாற்றம்" "மாற்ற" அல்லது "மாற்றங்கள்". 
-பொருள் போன்ற, உடலில் (விரும்பினால்) மேலும் கட்டாய பயன்படுத்த, தற்போதைய பதற்றம். உடல் மாற்றம் உந்துதல் சேர்க்க வேண்டும் மற்றும் முந்தைய நடத்தை இந்த மாறாக வேண்டும். நீங்கள் `ஏன்` விளக்குகிறீர்கள், `எப்படி` அல்ல.
-
-✅ கிட்ஹப் சுற்றி உலாவ சில நிமிடங்கள் எடுத்துக் கொள்ளுங்கள். நீங்கள் ஒரு பெரிய ஒப்புக்கொள்ளசெய்தி கண்டுபிடிக்க முடியும்? நீங்கள் ஒரு மிகவும் குறைந்த ஒரு கண்டுபிடிக்க முடியும்? ஒரு கமிட் செய்தியில் தெரிவிக்க மிகவும் முக்கியமான மற்றும் பயனுள்ள தகவல் என்று நீங்கள் நினைக்கிறீர்கள்?
-
-### பணி: ஒத்துழைக்க
-
-கிட்ஹப்பில் விஷயங்களை வைப்பதற்கான முக்கிய காரணம் மற்ற டெவலப்பர்களுடன் ஒத்துழைப்பதை சாத்தியமாக்குகிறது.
-
-## மற்றவர்களுடன் திட்டங்களில் வேலை செய்தல்
-
-உங்கள் களஞ்சியத்தில், பரிந்துரைக்கப்பட்ட சமூக தரங்களுடன் உங்கள் திட்டம் எவ்வாறு ஒப்பிடுகிறது என்பதைப் பார்க்க `நுண்ணறிவு > சமூகம்` செல்லவும்.
-
-   இங்கே உங்கள் கிட்ஹப் ரெப்போ மேம்படுத்த முடியும் என்று சில விஷயங்கள் உள்ளன:
-   - **விளக்கம்**. உங்கள் திட்டத்திற்கான விளக்கத்தைச் சேர்த்தீர்களா?
-   - **ரீட்மே**. நீங்கள் ஒரு ரீட்மேசேர்த்தீர்களா? கிட்ஹப் ஒரு [ரீட்மே](https://docs.github.com/articles/about-readmes/) எழுதுவதற்கான வழிகாட்டலை வழங்குகிறது
-    - **பங்களிப்பு வழிகாட்டுதல்**. உங்கள் திட்டத்தில் [பங்களிப்பு வழிகாட்டுதல்கள்](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/) உள்ளதா, 
-   - **நடத்தை விதிகள்**. அ [நடத்தை விதிகள்](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/), 
-   - **உரிமம்**. ஒருவேளை மிக முக்கியமாக, ஒரு [உரிமம்](https://docs.github.com/articles/adding-a-license-to-a-repository/)?
-
-
-இந்த வளங்கள் அனைத்தும் புதிய குழு உறுப்பினர்களுக்கு பயனளிக்கும். உங்கள் குறியீட்டைப் பார்ப்பதற்கு முன்பு புதிய பங்களிப்பாளர்கள் பார்க்கும் விஷயங்கள் பொதுவாக உள்ளன, உங்கள் திட்டம் அவர்கள் தங்கள் நேரத்தை செலவழிக்க சரியான இடம் தானா என்பதைக் கண்டறிய.
-
-✅ ரீட்மே கோப்புகள், அவை தயாரிக்க நேரம் எடுத்துக்கொண்டாலும், பெரும்பாலும் பிஸியான பராமரிப்பாளர்களால் புறக்கணிக்கப்படுகின்றன. குறிப்பாக விளக்கப்பட்ட ஒரு உதாரணத்தை நீங்கள் கண்டுபிடிக்க முடியுமா? குறிப்பு: நீங்கள் முயற்சி செய்ய விரும்பும் சில [நல்ல ரீ.ஈ.டி.எம்.இ.க்களை உருவாக்க உதவும் கருவிகள்](https://www.makeareadme.com/) உள்ளன.
-
-### பணி: சில குறியீட்டை ஒன்றுசேர்
-
-பங்களிப்பு ஆவணங்கள் மக்கள் திட்டத்திற்கு பங்களிக்க உதவுகின்றன. நீங்கள் என்ன வகையான பங்களிப்புகளைத் தேடுகிறீர்கள் மற்றும் செயல்முறை எவ்வாறு செயல்படுகிறது என்பதை இது விளக்குகிறது. பங்களிப்பாளர்கள் கீதுப் மீது உங்கள் ரெப்போபங்களிக்க முடியும் படிகள் ஒரு தொடர் மூலம் செல்ல வேண்டும்:
-
-1. **உங்கள் ரெப்போவை ஃபோர்கிங்** ஒருவேளை நீங்கள் மக்கள் உங்கள் திட்டத்தை _ஃபோர்க்_ வேண்டும். ஃபோர்கிங் என்பது அவர்களின் கிட்ஹப் சுயவிவரத்தில் உங்கள் களஞ்சியத்தின் பிரதியை உருவாக்குவதாகும்.
-1. **குளோன்**. அங்கிருந்து அவர்கள் தங்கள் உள்ளூர் இயந்திரத்திற்கு திட்டத்தை குளோன் செய்வார்கள். 
-1. **ஒரு கிளை உருவாக்க**. நீங்கள் அவர்களின் வேலைக்கு ஒரு _கிளை_ உருவாக்க அவர்களை கேட்க வேண்டும். 
-1. **ஒரு பகுதியில் தங்கள் மாற்றத்தை கவனம் செலுத்தவும்**. பங்களிப்பாளர்களை ஒரு நேரத்தில் ஒரு விஷயத்தில் தங்கள் பங்களிப்புகளை ஒருமுகப்படுத்தும்படி கேளுங்கள் - அந்த வழியில் நீங்கள் அவர்களின் வேலையில் _ஒன்றிணைக்க_ வாய்ப்புகளை அதிகமாக உள்ளது. அவர்கள் ஒரு பிழை சரி எழுத கற்பனை, ஒரு புதிய அம்சம் சேர்க்க, மற்றும் பல சோதனைகள் புதுப்பிக்க - நீங்கள் விரும்பினால் என்ன, அல்லது மட்டுமே 3 வெளியே 2 செயல்படுத்த முடியும், அல்லது 3 மாற்றங்கள் 1?
-
-✅ நல்ல குறியீட்டை எழுதுவதற்கும் அனுப்புவதற்கும் கிளைகள் குறிப்பாக முக்கியமான ஒரு சூழ்நிலையை கற்பனை செய்து பாருங்கள். வழக்குகள் என்ன பயன் என்று நீங்கள் நினைக்கலாம்?
-
-> குறிப்பு, நீங்கள் உலகில் பார்க்க விரும்பும் மாற்றமாக இருங்கள், உங்கள் சொந்த வேலைக்கும் கிளைகளை உருவாக்குங்கள். நீங்கள் செய்யும் எந்தவொரு உறுதிப்படமும் நீங்கள் தற்போது "சரிபார்க்கப்பட்ட" கிளையில் செய்யப்படும். எந்த கிளை என்று பார்க்க `git status` பயன்படுத்தவும்.
-
-பங்களிப்பாளர் பணிப்பாய்வின் மூலம் செல்லலாம். பங்களிப்பாளர் ஏற்கனவே _ஃபோர்க்_ மற்றும் _குளோன்_ ரெப்போவை வைத்திருக்கிறார் என்று வைத்துக்கொள்ளுங்கள், எனவே அவர்கள் தங்கள் உள்ளூர் இயந்திரத்தில் வேலை செய்ய தயாராக ஒரு கிட் ரெப்போவை வைத்திருக்கிறார்கள்:
-
-1. **ஒரு கிளை உருவாக்க**. `git branch` என்ற கட்டளையைப் பயன்படுத்தி, அவர்கள் பங்களிக்க வேண்டிய மாற்றங்களைக் கொண்ட ஒரு கிளையை உருவாக்கவும்:
-
-   ```bash
-   git branch [கிளை பெயர்]
-   ```
-
-1. **வேலை செய்யும் கிளைக்கு மாறவும்**. குறிப்பிட்ட கிளைக்கு மாறி, பணி கோப்பகத்துடன் புதுப்பிக்கவும் `git switch`:
-
-   ```bash
-   git switch [கிளை பெயர்]
-   ```
-
-1. **வேலை செய்யுங்கள்**. இந்த கட்டத்தில் நீங்கள் உங்கள் மாற்றங்களை சேர்க்க விரும்புகிறீர்கள். பின்வரும் கட்டளைகளுடன் அதைப் பற்றி கிட் சொல்ல மறக்க வேண்டாம்:
-
-   ```bash
-   git add .
-   git commit -m "என் மாற்றங்கள்"
-   ```
-
-   உங்கள் நலனுக்காகவும், நீங்கள் உதவி செய்யும் ரெப்போவின் பராமரிப்பாளராகவும், உங்கள் உறுதிக்கு ஒரு நல்ல பெயரைக் கொடுப்பதை உறுதி செய்யுங்கள்.
-
-1.**உங்கள் வேலையை `main` கிளையுடன் இணைக்கவும்**. ஒரு கட்டத்தில் நீங்கள் வேலை செய்து விட்டீர்கள், உங்கள் வேலையை `main` கிளையுடன் இணைக்க விரும்புகிறீர்கள். `main` கிளை இதற்கிடையில் மாறியிருக்கலாம், எனவே பின்வரும் கட்டளைகளுடன் சமீபத்தியதை முதலில் புதுப்பிக்கவும்:
-
-   ```bash
-   git switch main
-   git pull
-
-   ```
-
-   இந்த கட்டத்தில், உங்கள் பணிக்கிளையில் மாற்றங்கள் எளிதாக _இணைவுகள்_ செய்ய முடியாத சூழ்நிலைகளில் ஏதேனும் _இணை_, இருப்பதை உறுதி செய்ய விரும்புகிறீர்கள். எனவே பின்வரும் கட்டளைகளை இயக்கவும்:
-
-   ```bash
-   git switch [கிளை பெயர்]
-   git merge main
-   ```
-
-
-இது உங்கள் கிளையில் `main` இருந்து அனைத்து மாற்றங்களையும் கொண்டு வரும் மற்றும் வட்டம் நீங்கள் தொடர முடியும். இல்லையெனில்,கிட்  _confused_ எங்கே என்று விஎஸ் குறியீடு உங்களுக்கு சொல்லும், மேலும் எந்த உள்ளடக்கம் மிகவும் துல்லியமானது என்று சொல்ல பாதிக்கப்பட்ட கோப்புகளை மாற்றவும்.
-
-1. 1. **உங்கள் வேலையை கிட்ஹப்**க்கு அனுப்பவும். உங்கள் வேலையை கிட்ஹப் க்கு அனுப்புவது என்பது இரண்டு விஷயங்களைக் குறிக்கிறது. உங்கள் கிளையை உங்கள் ரெப்போவுக்குத் தள்ளி, பின்னர் ஒரு பேஆர், புல் கோரிக்கையைத் திறக்கவும்.
-
-   ```bash
-   git push --set-upstream origin [கிளை பெயர்]
-   ```
-   மேலே கட்டளை உங்கள் முட்கரண்டி ரெப்போ கிளை உருவாக்குகிறது.
-
-1. **ஒரு பேஆர்** திறக்கவும். அடுத்து, நீங்கள் ஒரு பேஆர் ஐ திறக்க விரும்புகிறீர்கள். நீங்கள் கிட்ஹப் மீது ஃபோர்க்செய்யப்பட்ட ரெப்போவுக்கு வழிசெலுத்துவதன் மூலம் அதைச் செய்கிறீர்கள். நீங்கள் ஒரு புதிய பேஆர் ஐ உருவாக்க விரும்புகிறீர்களா என்று கேட்கும் கிட்ஹப்பில் ஒரு அறிகுறியைப் பார்ப்பீர்கள், அதை கிளிக் செய்து, செய்தி தலைப்பை மாற்றக்கூடிய ஒரு இடைமுகத்திற்கு நீங்கள் அழைத்துச் செல்லப்படுகிறீர்கள், அதற்கு மிகவும் பொருத்தமான விளக்கத்தை க்கொடுங்கள். இப்போது நீங்கள் ஃபோர்க் செய்த ரெப்போவின் பராமரிப்பாளர் இந்த பேஆர் ஐப் பார்ப்பார், _விரல்கள் கடந்து_ அவர்கள் பாராட்டுவார்கள் மற்றும் உங்கள் பேஆர் ஐ இணைப்பார்கள். நீங்கள் இப்போது ஒரு பங்களிப்பாளராக இருக்கிறீர்கள், நீங்கள் :)
-
-1. **சுத்தம்**. நீங்கள் வெற்றிகரமாக ஒரு பேஆர் ஐ இணைத்த பிறகு _சுத்தம்_ நல்ல நடைமுறையாகக் கருதப்படுகிறது. உங்கள் உள்ளூர் கிளை மற்றும் நீங்கள் கிட்ஹப் க்கு தள்ளிய கிளை இரண்டையும் சுத்தம் செய்ய விரும்புகிறீர்கள். முதலில் பின்வரும் கட்டளையுடன் அதை உள்நாட்டில் நீக்குவோம்: 
-
-   ```bash
-   git branch -d [கிளை பெயர்]
-   ```
-
-   நீங்கள் அடுத்த ஃபோர்க்செய்யப்பட்ட ரெப்போவிற்கு கிட்ஹப் பக்கம் செல்வதை உறுதி செய்து, நீங்கள் அதை தள்ளிய தொலைதூர கிளையை அகற்றவும்.
-
-`புல் கோரிக்கை` ஒரு முட்டாள்தனமான சொல் போல் தெரிகிறது, ஏனென்றால் உண்மையில் நீங்கள் திட்டத்தில் உங்கள் மாற்றங்களை தள்ள விரும்புகிறீர்கள். ஆனால் பராமரிப்பாளர் (திட்ட உரிமையாளர்) அல்லது முக்கிய குழு திட்டத்தின் "முக்கிய" கிளையுடன் இணைப்பதற்கு முன் உங்கள் மாற்றங்களை கருத்தில் கொள்ள வேண்டும், எனவே நீங்கள் உண்மையில் ஒரு பராமரிப்பவரிடமிருந்து ஒரு மாற்ற முடிவைக் கோருகிறீர்கள்.  
-
-ஒரு இழு கோரிக்கை மதிப்புரைகள், கருத்துக்கள், ஒருங்கிணைந்த சோதனைகள் மற்றும் பலவற்றுடன் ஒரு கிளையில் அறிமுகப்படுத்தப்பட்ட வேறுபாடுகளை ஒப்பிட்டு விவாதிக்க ும் இடம். ஒரு நல்ல இழுப்பு கோரிக்கை ஒரு ஒப்புக்கொள்ளும் செய்தி போன்ற கிட்டத்தட்ட அதே விதிகளைப் பின்பற்றுகிறது. எடுத்துக்காட்டாக, உங்கள் வேலை ஒரு சிக்கலைத் சரிசெய்யும்போது, சிக்கல் டிராக்கரில் உள்ள ஒரு பிரச்சினைக்கு நீங்கள் ஒரு குறிப்பைச் சேர்க்கலாம். இது ஒரு `#` பயன்படுத்தி செய்யப்படுகிறது, அதைத் தொடர்ந்து உங்கள் பிரச்சினையின் எண்ணிக்கை. உதாரணமாக `#97`.
-
-🤞அனைத்து காசோலைகளும் கடந்து, திட்ட உரிமையாளர்(கள்) உங்கள் மாற்றங்களை திட்டத்தில் இணைக்க வேண்டும் என்று விரல்கள் கடந்து விட்டன🤞
-
-கிட்ஹப்பில் உள்ள தொடர்புடைய தொலைநிலை கிளையிலிருந்து அனைத்து புதிய ஒப்புக்களுடன் உங்கள் தற்போதைய உள்ளூர் பணிகிளையைப் புதுப்பிக்கவும்:
-
-`git pull`
-
-## திறந்த மூலத்திற்கு எவ்வாறு பங்களிக்க வேண்டும்
-
-முதலில், உங்களுக்கு ஆர்வமுள்ள கிட்ஹப்பில் ஒரு களஞ்சியத்தை (அல்லது **ரெப்போ**) காணலாம், அதற்கு நீங்கள் ஒரு மாற்றத்தை பங்களிக்க விரும்புகிறீர்கள். அதன் உள்ளடக்கங்களை உங்கள் இயந்திரத்தில் நகலெடுக்க விரும்புகிறீர்கள்..
-
-✅  'தொடக்க நட்பு' ரெப்போஸைக் கண்டுபிடிக்க ஒரு நல்ல வழி ['நல்ல முதல் பிரச்சினை' என்ற குறிச்சொல்மூலம் தேடுவதாகும்](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
-
-![உள்ளூரில் ஒரு ரெப்போவை நகலெடுக்கவும்](../images/clone_repo.png)
-
-குறியீட்டை நகலெடுக்க பல வழிகள் உள்ளன. ஒரு வழி களஞ்சியத்தின் உள்ளடக்கங்களை "குளோன்" செய்வது, HTTPஎஸ், எஸ்எஸ்ஹெச், அல்லது கிட்ஹப் சிஎல்ஐ (கட்டளை வரி இடைமுகம்) பயன்படுத்தி. 
-
-உங்கள் முனையத்தைத் திறந்து களஞ்சியத்தை இவ்வாறு குளோன் செய்யுங்கள்:
-`git clone https://github.com/புரொஜக்ட்யுஆர்எல்`
-
-திட்டத்தில் வேலை செய்ய, சரியான கோப்புறைக்கு மாறவும்:
-`cd புரொஜக்ட்யுஆர்எல்`
-
-நீங்கள் [கோட்ஸ்பேஸ்](https://github.com/features/codespaces), கிட்ஹப்பின் உட்பொதிக்கப்பட்ட குறியீடு ஆசிரியர் / கிளவுட் மேம்பாட்டு சூழல் அல்லது [கிட்ஹப் டெஸ்க்டாப்](https://desktop.github.com/) பயன்படுத்தி முழு திட்டத்தையும் திறக்கலாம்
-
-இறுதியாக, நீங்கள் ஒரு ஜிப் செய்யப்பட்ட கோப்புறையில் குறியீட்டைப் பதிவிறக்கலாம்.
-
-### கிட்ஹப் பற்றி இன்னும் சில சுவாரஸ்யமான விஷயங்கள்
-
-நீங்கள் கீதுப்-இல் உள்ள எந்தவொரு பொது களஞ்சியத்தையும் நட்சத்திர, பார்வை மற்றும் /அல்லது "முட்கரண்டி" செய்யலாம். மேல்-வலது கீழ்-கீழ் மெனுவில் உங்கள் நட்சத்திரகளஞ்சியங்களை நீங்கள் காணலாம். இது புக்மார்க்கிங் போன்றது, ஆனால் குறியீட்டுக்கு.
-
-திட்டங்கள் ஒரு சிக்கல் டிராக்கர் வேண்டும், பெரும்பாலும் "சிக்கல்கள்" தாவலில் கிட்ஹப் இல்லையெனில் சுட்டிக்காட்டப்படாவிட்டால், அங்கு மக்கள் திட்டம் தொடர்பான சிக்கல்களைவிவாதிக்கிறார்கள். மற்றும் புல் கோரிக்கைகள் தாவல் மக்கள் விவாதிக்க மற்றும் முன்னேற்றத்தில் இருக்கும் மாற்றங்களை மதிப்பாய்வு எங்கே உள்ளது.
-
-திட்டங்கள் மன்றங்கள், அஞ்சல் பட்டியல்கள் அல்லது ஸ்லாக், டிஸ்ட்டர் அல்லது ஐஆர்சி போன்ற அரட்டை சேனல்களிலும் விவாதம் நடத்தலாம்.
-
-✅ உங்கள் புதிய கிட்ஹப் ரெப்போவைச் சுற்றி பாருங்கள் மற்றும் சில விஷயங்களை முயற்சிக்கவும், எடிட்டிங் அமைப்புகள், உங்கள் ரெப்போவில் தகவலைச் சேர்த்தல், மற்றும் ஒரு திட்டத்தை உருவாக்குதல் (ஒரு கன்பன் பலகை போன்றது). நீங்கள் செய்ய முடியும் நிறைய இருக்கிறது!
-
----
-
-## 🚀 அறைகூவல் 
-
-ஒருவருக்கொருவர் குறியீட்டில் வேலை செய்ய ஒரு நண்பருடன் ஜோடி சேரவும். ஒரு திட்டத்தை கூட்டாக உருவாக்கவும், ஃபோர்க் குறியீடு, கிளைகளை உருவாக்கவும், மாற்றங்களை இணைக்கவும்.
-
-## விரிவுரைக்குப் பிந்தைய வினாடி வினா
-[விரிவுரைக்குப் பிந்தைய வினாடி வினா](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=ta)
-
-## ஆய்வு & சுய ஆய்வு
-
-மேலும் வாசிக்க [திறந்த மூல மென்பொருளுக்கு பங்களிப்பு](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution). 
-
-[கிட் ஏமாற்றுதாள்](https://training.github.com/downloads/github-git-cheat-sheet/).
-
-பயிற்சி, பயிற்சி, பயிற்சி. கிட்ஹப் [lab.github.com](https://lab.github.com/) வழியாக கிடைக்கும் சிறந்த கற்றல் பாதைகளைக் கொண்டுள்ளது:
-
-- [கிது முதல் வாரம்](https://lab.github.com/githubtraining/first-week-on-github)
-
-
-நீங்கள் இன்னும் மேம்பட்ட ஆய்வகங்கள் காண்பீர்கள். 
-
-##  வகுத்தமைத்தல் 
-
-முழுமையான [கிட்ஹப் பயிற்சி ஆய்வகத்தில் முதல் வாரம்](https://lab.github.com/githubtraining/first-week-on-github)
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md b/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md
deleted file mode 100644
index c98c3d29..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.zh-cn.md
+++ /dev/null
@@ -1,318 +0,0 @@
-# GitHub 介绍
-
-这节课涵盖了 GitHub 的基础知识，这是一个可以用来存放代码和管理代码变更的平台。
-
-![Intro to GitHub](/sketchnotes/webdev101-github.png)
-> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 课前小测
-[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=zh_cn)
-
-## 大纲
-
-这节课我们将会介绍：
-
-- 在你的电脑上追踪你的工作
-- 与他人协同开发项目
-- 如何参与开源软件贡献
-
-### 开始之前
-
-开始之前，你需要确保安装了 Git，在终端（译注：即上一节课中介绍的命令行）中输入：
-`git --version`
-
-如果没有安装 Git，请先[下载并安装 Git](https://git-scm.com/downloads)。然后用如下命令设置你的本地 Git 使用者配置文件：
-* `git config --global user.name "your-name"`
-* `git config --global user.email "your-email"`
-
-要检查 Git 使用者是否配置完成，可以输入：
-`git config --list`
-
-你还需要一个 GitHub 账户，一个代码编辑器（比如 Visual Studio Code），并且要打开你的终端（或者其他命令行）。
-
-如果你没有现成的 Github 账号，去 [github.com](https://github.com/) 创建一个。如果已经有账号，就登录进去并且完成个人资料的配置。
-
-✅ GitHub 并不是世界上唯一的代码仓库，但是最知名的。
-
-### 课前准备
-
-你需要在本地（你的笔记本或 PC）创建一个项目文件夹，还需要在 GitHub 上创建一个公开的仓库（译注：后文会有指引），作为本节课中向其他人的项目提贡献的示例。
-
----
-
-## 代码管理
-
-假如你在本地有一个代码项目的文件夹，你希望开始使用 Git （版本控制系统）来追踪你的进度。有的人将使用 Git 比作给未来的你自己写一封情书，在数日、数周乃至数月后阅读你的提交信息（commit messages）时，你就可以想起你做出某个决定的原因，或者回滚（rollback）一次变更 —— 前提是你写了不错的提交信息。
-
-### 任务：创建仓库并提交代码
-
-1. **在 GitHub 上创建仓库**。进入 GitHub.com，在 “Repositories” 标签或者右上角导航栏找到 **New repository** 按钮。
-
-   1. 给你的仓库取个名字；
-   1. 点击 **Create repository**。
-
-1. **前往你的工作目录**。在你的终端中，通过输入下方命令切换到你希望开始追踪的文件夹（即目录）：
-
-   ```bash
-   cd [文件名称/目录路径]
-   ```
-
-1. **初始化一个 Git 仓库**。在你的项目下输入：
-
-   ```bash
-   git init
-   ```
-
-1. **检查状态**。要检查你的仓库状态，输入：
-
-   ```bash
-   git status
-   ```
-
-   输出看起来将会像这样：
-
-   ```output
-   Changes not staged for commit:
-   (use "git add <file>..." to update what will be committed)
-   (use "git checkout -- <file>..." to discard changes in working directory)
-
-        modified:   file.txt
-        modified:   file2.txt
-   ```
-
-   一般来说 `git status` 命令会告诉你诸如什么文件已经 _被保存到_ 仓库内或者有一些你可能想要保留的变更之类的事。
-
-1. **追踪所有文件**
-   这个操作也叫做暂存（stage）文件或者将文件添加到暂存区（staging area）。
-
-   ```bash
-   git add .
-   ```
-
-   `git add` 命令加上 `.` 参数将会追踪你的所有文件和变更。
-
-1. **只追踪选定的文件**
-
-   ```bash
-   git add [文件或文件夹名]
-   ```
-
-   如果你不想一次性将所有文件添加到暂存区，可以用这个命令仅仅添加选定的文件。
-
-1. **取消所有文件的追踪**
-
-   ```bash
-   git reset
-   ```
-
-   这条命令可以帮我们取消暂存（unstage）所有文件。
-
-1. **取消特定文件的追踪**
-
-   ```bash
-   git reset [文件或文件夹名]
-   ```
-
-   如果你在下次提交中不希望提交某个已经暂存的文件，可以用这条命令取消它的暂存。
-
-1. **保存你的工作**。现在你应该已经将文件添加到了所谓 _暂存区_ 中，这是 Git 追踪你的文件的地方。为了永久地保存变更，你需要 _提交（commit）_ 这些文件。你可以用 `git commit` 命令创建一次 _提交_。一次 _提交_ 代表你的仓库历史中的一个存档点。输入下方命令来创建一次 _提交_：
-
-   ```bash
-   git commit -m "first commit"
-   ```
-
-   这会提交你暂存区中的所有文件，并带上一条提交信息 —— “first commit”。在以后的提交信息中你会想要加入更加准确的描述，比如一些表示你这次变更的类型的信息。
-
-1. **将你的本地仓库连接到 GitHub**。现在 Git 仓库已经能在你的本地机器上正常运作，但是有时候你会想要将你的文件备份到别处，或者希望邀请其他人来一起参与这个仓库的协作。GitHub 就是一个可以满足你要求的好地方。我们此前已经在 GitHub 上创建了一个仓库，现在只需要将本地 Git 仓库连接到 GitHub 就可以了，用 `git remote add` 命令就可以做到。输入下面的命令：
-
-   > 注意，在你输入命令前，需要前往你的 GitHub 仓库而页面来找到仓库的地址（URL），用它来替换命令中 `username/repository_name` 这一部分。
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
-   这会创建一个被命名为 “origin” 的 _远程仓库位置（remote）_，也可以理解为一个连接，指向你早先创建的 GitHub 仓库。
-
-1. **将本地文件上传至 GitHub**。现在你已经创建了一个本地仓库和 GitHub 仓库间的 _连接_。让我们通过 `git push` 命令将这些文件上传至 GitHub，就像这样：
-
-   ```bash
-   git push -u origin main
-   ```
-
-   这样就会把你的提交上传到 GitHub 上你的 “main” 分支了。
-
-1. **添加更多的变更**。如果你想继续搞点变更并且将它们传到 GitHub 上，你只需要使用下面的三行命令：
-
-   ```bash
-   git add .
-   git commit -m "在这里填写你的提交信息"
-   git push
-   ```
-
-   > 提示，你可能还需要建立一个 `.gitignore` 文件来防止 Git 追踪一些文件并且让它们不会被上传到 GitHub，比如一些你写在本地仓库但并不想放到公开仓库的笔记文件。你可以在 [.gitignore templates](https://github.com/github/gitignore) 找到一些现成的 `.gitignore` 文件模板。
-
-#### 提交信息（Commit Messages）
-
-一条好的 Git 提交信息标题（subject line）可以理解为下方句子的填空：
-如果生效，这次提交将会 <你的提交信息标题>
-
-在标题内，使用祈使语气和现在时态，即使用 “change” 而非 “changed” 或 “changes”。 
-同理，在正文（body，可选）中也要用祈使语气和现在时态。正文中需要包括更改的动机，并对比与更改前后行为的变化。确保你说明的是`为什么`，而不是`怎么做`。
-
-✅ 花几分钟逛逛 GitHub。你能找到感觉非常棒的提交信息吗？你可以找到非常简洁的提交信息吗？你认为在一条提交信息中，传达什么信息是最重要和有用的？
-
-### 任务：协作
-
-将项目放到 GitHub 的主要原因是让和其他开发者协作开发成为可能。
-
-## 和其他人协作开发项目
-
-在你的仓库中，前往 `Insights > Community` 来查看你的项目和推荐的社区规范的对比。
-
-   这里有一些你可以改进你的项目仓库的点：
-   - **项目描述（Description）**。你为你的项目添加了描述吗？
-   - **README**。你有添加 README 吗？GitHub 提供了撰写 [README](https://docs.github.com/articles/about-readmes/) 的指南。
-   - **贡献指南（Contributing guideline）**。你的项目是否有[贡献指南](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)？
-   - **行为准则（Code of Conduct）**。添加一份 [行为准则](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)
-   - **开源协议（License）**。或许是最重要的，添加一个[开源协议](https://docs.github.com/articles/adding-a-license-to-a-repository/)
-
-
-所有这些资源对于新加入的团队成员都是很有好处的，这些一般是新的贡献者在看你的代码前会更先去看的东西，以确认你的项目是否值得他们在这上面花费时间。
-
-✅ 尽管很多人都准备了 README 文件，但常常会因为太忙而疏于维护。你能找到一个这样的例子吗？注：这里有一些可以[用于创建优秀的 README 的工具](https://www.makeareadme.com/)，你或许愿意试试。
-
-### 任务：合并（Merge）一些代码
-
-贡献文档帮助人们对项目做贡献，其中说明了你正需要什么样的贡献以及贡献的过程该是怎样的。贡献者需要完成一系列步骤才能在 GitHub 上参与你项目的贡献：
-
-
-1. **复刻（Fork）你的仓库**。你可能希望人们 _复刻_ 你的项目。复刻意味着在他们自己的 GitHub 账户下创建你的项目的一份副本。
-1. **克隆（Clone）**。在这里他们将会将项目克隆到他们的本地机器上。
-1. **创建一个分支（Branch）**。你可能希望他们能创建一个 _分支_ 来进行他们的工作。
-1. **集中进行一个区域的修改**。要求贡献者每次贡献只专注做一件事，这样你才更可能 _合并_ 他们的工作。想象一下如果他们修了一个 BUG，添加了一个新特性，然后更新了几个测试，而你其实只想要其中的一个或两个更改时该怎么办？
-
-✅ 想一想分支在什么情况下对于编写和发布优质的代码非常重要？你能想到哪些使用实例？
-
-> 注意，要以身作则，对你自己的工作也要创建分支。任何提交都需要在当前“检出（checked out）”的分支上进行。使用 `git status` 来查看是哪一个分支。
-
-让我们走一遍贡献者的工作流程。假设贡献者已经 _复刻_ 并 _克隆_ 了仓库，他们在本地机器已经有了一个可以工作的仓库：
-
-1. **创建一个分支**。使用命令 `git branch` 来创建一个他们希望用来包含计划进行的变更的分支：
-
-   ```bash
-   git branch [分支名]
-   ```
-
-1. **切换到工作分支**。使用 `git switch` 来切换到指定分支并且更新工作目录中的文件：
-
-   ```bash
-   git switch [分支名]
-   ```
-
-1. **干活**。现在你可以添加你的变更了，别忘了用下面的命令告诉 Git 你所做的工作：
-
-   ```bash
-   git add .
-   git commit -m "变更内容"
-   ```
-
-   确保你的提交有一个好名字，不论是对你自己还是你正在帮助的仓库维护者来说都有好处。
-
-1. **将你的工作合入 `main` 分支**。在完成工作后，你打算将你的工作和 `main` 分支上的合并。`main` 分支可能同时有了一些新的变更，所以要先用以下命令确保将其更新至最新版本：
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-   这时你想确认是否存在 _冲突（conflicts）_，即 Git 没法简单地将这些变化 _合入_ 你的分支的情况。为此运行下面的命令：
-
-   ```bash
-   git switch [分支名]
-   git merge main
-   ```
-
-   这将会把所有 `main` 分支上的变更带入到你的分支上。运气好的话一切都会自动搞定，否则 VS Code 会告诉你哪些文件 Git _不确定_ 该如何合并，你只需要手动修改对应文件来解决冲突即可。
-
-1. **将你的工作上传至 GitHub**。将你的工作上传至 GitHub 意味着两件事：把你的分支上传到你自己的仓库，然后开启一个 PR（Pull Request）：
-
-   ```bash
-   git push --set-upstream origin [分支名]
-   ```
-
-   上述命令在你复刻的仓库中创建了一个分支。
-
-1. **开启一个 PR**。接下来，你打算开启一个 PR。前往 GitHub 上你打算贡献的仓库，你将会看到一个消息条询问你是否想要创建一个新的 PR，点击后即可进入创建 PR 的界面。在这里你可以更改提交标题，给出更准确的描述。创建 PR 后，仓库维护者将会看到这个，如果 _一切顺利_ 的话他们会表示感谢并且 _合并_ 你的 PR。你现在就是一位贡献者啦！ :)
-
-1. **清理**。成功合入一个 PR 后，做做 _清理_ 是一个好习惯。你会想要清理本地和你上传到 GitHub 的分支。首先让我们通过下面的命令来删除本地的分支：
-
-   ```bash
-   git branch -d [分支名]
-   ```
-
-   接下来请确保前往 GitHub 中对应仓库的页面并删除你刚才上传的分支。
-
-`Pull request` 这个术语看起来有些憨，因为你确实打算把你的变更提交到这个项目中。但是在将你的变更合入到项目的 `main` 分支前，维护者（项目拥有者）或者核心团队需要考虑和检查你的变更，这意味着你实际上是在请求（request）维护者的变更决定。
-
-Pull Request 是一个可以用来比较和讨论一个分支引入的改动的地方，并有代码审查、评论、集成测试等功能。优质的 Pull Request 严格遵照与提交信息相同的规则。如果你的工作是为了修复一个 Issues 面板中的事项，你可以在 PR 中提及这个事项。具体做法是写一个 `#` 加上事项的编号，比如 `#97`。
-
-🤞如果一切顺利，所有的检查都通过后项目拥有者就会将你的变更合入项目🤞
-
-使用这个命令即可将 GitHub 上对应远程分支的所有新提交更新到当前本地的工作分支上：
-
-`git pull`
-
-## 如何参与开源贡献
-
-首先，让我们在 GitHub 上找到一个你感兴趣且愿意参与贡献的仓库（**repo**），你会复制一份它的内容到你的机器上。
-
-✅ 一个寻找对入门者友好的仓库的好办法是[搜索 “good-first-issue” 标签](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
-
-![Copy a repo locally](../images/clone_repo.png)
-
-有很多种复制代码的方法，其中一种就是“克隆”仓库的内容，可以用 HTTPS、SSH 或者 GitHub CLI（Command Line Interface）来做到。
-
-打开你的终端并且用类似下方的命令来克隆仓库：
-`git clone https://github.com/ProjectURL`
-
-切换到正确的工作目录：
-`cd ProjectURL`
-
-你也可以用 [Codespaces](https://github.com/features/codespaces) 来打开整个项目，这是 GitHub 内置的代码编辑器和云开发环境，或者用 [GitHub Desktop](https://desktop.github.com/)。
-
-当然，你也可以直接下载代码的压缩包。
-
-### 更多 GitHub 的有趣小知识
-
-你可以收藏（star）、关注（watch）和复刻（fork）GitHub 上的任何公开仓库。可以在右上角的下拉菜单找到你收藏的仓库，这就像书签一样，但收藏的是代码。
-
-项目都有一个事项面板（issue tracker），用于让人们讨论和这个项目相关的事项，事项面板基本都在 GitHub 的 “Issues” 标签页中，偶尔也会指明在其他地方。而 “Pull Requests” 标签页则是人们讨论和检查正在进行的变更的地方。
-
-项目也可能会在论坛、邮件列表或者如 Slack、Discord、IRC 这样的聊天频道进行讨论。
-
-✅ 看看你新建立的 GitHub 仓库，尝试做一些其他事，比如编辑设置、为仓库增加信息、创建一个 Project（类似看板），有很多可以尝试的东西！
-
----
-
-## 🚀 挑战
-
-找朋友一起编辑彼此的代码。协作创建一个项目、复刻代码、创建分支，然后合并变更。
-
-## 课后小测
-[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=zh_cn)
-
-## 复习 & 自学
-
-了解更多 [如何提交贡献](https://opensource.guide/zh-hans/how-to-contribute/#%E5%A6%82%E4%BD%95%E6%8F%90%E4%BA%A4%E8%B4%A1%E7%8C%AE)。
-
-[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/)。
-
-练习，练习，再练习。GitHub 在 [lab.github.com](https://lab.github.com/) 提供了很棒的学习路径：
-
-- [在 GitHub 的第一周](https://lab.github.com/githubtraining/first-week-on-github)
-
-你还可以在上面找到更多高阶的实验内容。
-
-## 作业 
-
-完成 [在 GitHub 的第一周](https://lab.github.com/githubtraining/first-week-on-github)
diff --git a/1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md b/1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md
deleted file mode 100644
index 375a432c..00000000
--- a/1-getting-started-lessons/2-github-basics/translations/README.zh-tw.md
+++ /dev/null
@@ -1,319 +0,0 @@
-# GitHub 簡介
-
-這堂課程講述一個提供加設與管理程式碼的平台 ── Github的基本功能。
-
-![GitHub 簡介](/sketchnotes/webdev101-github.png)
-> 由[Tomomi Imura](https://twitter.com/girlie_mac) 繪製
-
-## 課前測驗
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3?loc=zh_tw)
-
-## 大綱
-
-在這堂課中，包含：
-
-- 追蹤裝置上的工作專案
-- 與其他人共同開發專案
-- 如何貢獻網路上的開源軟體
-
-### 開始之前
-
-在你開始課程之前，你需要安裝 Git 這套套件。在你的終端機上輸入：
-`git --version`
-
-若你的裝置上沒有安裝 Git，[請下載並安裝 Git](https://git-scm.com/downloads)。 安裝完之後，請設定裝置本地 Git 的使用者設定。
-* `git config --global user.name "your-name"`
-* `git config --global user.email "your-email"`
-
-要確認 Git 使用者設定是否完成，你可以輸入：
-`git config --list`
-
-此外，你需要一組 GitHub 的帳戶、一款文字編輯器 (如：Visual Studio Code) 與你的終端機 (或 command prompt)。
-
-若你缺少 GitHub 帳戶，請前往 [github.com](https://github.com/)建立並登入一組帳戶，遵循指示完成資料的填寫。 
-
-✅ GitHub 不是唯一的程式碼數據庫，但 GitHub 是家喻戶曉的。
-
-### 課前準備
-
-你需要在裝置(筆電或電腦)上建立程式專案的資料夾，與 GitHub 公共的數據庫(Public Repository)。之後的例子會使用到此公共數據庫來與他人分享程式碼。
-
----
-
-## 程式碼管理
-
-假設你的本地端資料夾存放著一些程式專案，你想利用 Git 來作專案追蹤與版本控制，甚至是對未來的你寫一封情書。在一天、一週甚至是一個月後閱讀你的提交紀錄，了解當初你的決定，回想之前的更動。前提是當初你有寫一條完整的提交紀錄。
-
-### 課題：建立數據庫並提交程式碼
-
-1. **在 GitHub 上建立數據庫** 在 GitHub.com 上，在 "Repositories" 的標籤或導航欄的右上方，找到 **new repo** 的按鈕。
-
-   1. 為你的數據庫資料夾取個名字。
-   1. 選擇 **建立數據庫(create repository)**.
-
-1. **調查本地的專案資料夾** 在終端機中開啟儲存程式碼的資料夾，在你想追蹤的目錄下輸入：
-
-   ```bash
-   cd [資料夾名稱]
-   ```
-
-1. **初始化 git 數據庫(repo)** 在目錄下輸入：
-
-   ```bash
-   git init
-   ```
-
-1. **檢查狀態** 若想檢查目前數據庫的狀態，輸入：
-
-   ```bash
-   git status
-   ```
-
-   它會輸出類似以下的訊息：
-
-   ```output
-   Changes not staged for commit:
-   (use "git add <file>..." to update what will be committed)
-   (use "git checkout -- <file>..." to discard changes in working directory)
-
-        modified:   file.txt
-        modified:   file2.txt
-   ```
-
-   指令 `git status` 會回報那些檔案已經準備 _被存到_ 數據庫或是被更動過但不想更新上去。
-
-1. **開始追蹤所有檔案**
-   新增檔案到暫存區(staging area)。
-
-   ```bash
-   git add .
-   ```
-
-   `git add` 加上路徑 `.` 表示追蹤該路徑下所有的檔案。 
-
-1. **只追蹤選擇的檔案**
-
-   ```bash
-   git add [檔案或資料夾路徑]
-   ```
-
-   上述指令幫助你只追蹤被選取的檔案，允許使用者分批提交。
-
-1. **取消追蹤所有檔案**
-
-   ```bash
-   git reset
-   ```
-
-   上述指令能取消追蹤(unstage)暫存區的檔案。
-
-1. **取消追蹤特定的檔案**
-
-   ```bash
-   git reset [檔案或資料夾路徑]
-   ```
-
-   上述指令只取消追蹤單一檔案，在下一次提交時不被圈選在裡面。
-
-1. **保存工作狀態** 現在，已經有一些檔案被標記在 _暫存區(staging area)_。 Git 會追蹤區域內的檔案。若要保存這些檔案的狀態，你需要 _提交(commit)_ 這些檔案。 _提交_ 會記錄當下數據庫中檔案的狀態到歷史紀錄中。 你需要指令`git commit` 完成這項工作。
-
-   ```bash
-   git commit -m "first commit"
-   ```
-
-   這會提交暫存區內的檔案，"first commit"即提交紀錄。提交紀錄最好能識別出這次的提交主要做了那些更動。
-
-1. **連接本地數據庫到 GitHub 遠端數據庫** 現在 Git 數據庫已經成功運行在你的本地裝置上，但有時候你希望能將檔案備份到其他地方，或是邀請他人參與這項程式專案。 GitHub 便是一個好地方。先前我們已經建立遠端數據庫在 GitHub 上，現在我們只要連接本地數據庫到 GitHub上。指令 `git remote add` 能完成這項課題：
-
-   > 注意，在輸入指令前，你需要取得 GitHub 遠端數據庫的 URL 位置。請將下列的 `repository_name` 替換為你的遠端數據庫路徑。
-
-   ```bash
-   git remote add origin https://github.com/username/repository_name.git
-   ```
-
-   這會在 GitHub 遠端數據庫上建立一個名叫 "origin" 的 _遠端位置(remote)_ ，或稱 _連接(connection)_。
-
-1. **上傳本地檔案到 GitHub** 現在已經建好了遠端與本地的 _連接_。 利用指令 `git push` 可以將本地檔案上傳到遠端數據庫當中： 
-
-   ```bash
-   git push -u origin main
-   ```
-
-   所有的提交都會加到 GitHub 上 "main" 的分支當中。
-
-1. **增加更多的更動** 若之後再對程式碼有所更動、提交並上傳到 GitHub 上，只要輸入：
-
-   ```bash
-   git add .
-   git commit -m "type your commit message here"
-   git push
-   ```
-
-   > 提示：建立 `.gitignore` 檔案可以讓你自動排除的特定檔案項目不被 GitHub 追蹤。好比是有一個在同一個目錄下的筆記檔不想被上傳到遠端數據庫。以下是 `.gitignore` 的參考版型： [.gitignore 參考版型](https://github.com/github/gitignore)。
-
-#### 提交紀錄(Commit Messages)
-
-一條好的 Git 提交標題行最好滿足下列條件：
-提交完後，提交紀錄會顯示 <你的標題>
-
-標題使用祈使語句，如使用 "change" 而非 "changed" 或 "changes"。
-同理地，內文(選擇性)也使用祈使語句。內文須包含改動的動機與改動前後的差異。你需要解釋「為什麼改」而非「怎麼改」。
-
-✅ 花點時間在 GitHub 上閒晃。你能找到很棒的提交紀錄嗎? 你能找到簡潔的提交紀錄嗎? 哪些資訊是你認為一個提交紀錄要有的重要資訊?
-
-### 課題：多人合作
-
-另一個將專案上傳到 GitHub 的主要原因是讓其他開發者能參與其中。
-
-## 與其他人共同開發專案
-
-在你的遠端資料庫中，前往 `Insights > Community` 來對比你的專案與其他推薦社群專案。
-
-   以下是一些你的 GitHub 數據庫需要精進的地方：
-   - **專案描述(Description)** 你有為你的專案新增描述嗎?
-   - **README** 你有新增 README 嗎? GitHub 提供編寫 README 的指引與參考： [README](https://docs.github.com/articles/about-readmes/)
-   - **開發指引(Contributing guideline)** 你的專案內有[開發指引](https://docs.github.com/articles/setting-guidelines-for-repository-contributors/)嗎?
-   - **行為準則(Code of Conduct)** [行為準則](https://docs.github.com/articles/adding-a-code-of-conduct-to-your-project/)
-   - **授權條款License** 這或許是最重要的：[授權條款](https://docs.github.com/articles/adding-a-license-to-a-repository/)
-
-
-這些資源對剛加入到專案的新成員有所幫助。這些是新的合作夥伴比看程式碼還優先查詢的地方。完善它們能有效縮減他人消化的時間。
-
-✅ README 檔，雖然多數人都會配置，但忙碌的開發者都會疏於管理。 你能在社群中找到相關的例子嗎? 這邊有[關於建立 READMEs 的有利工具](https://www.makeareadme.com/)可以嘗試。
-
-### 課題：合併程式碼
-
-開發指引文件幫助他人了解如何共同開發專案。它提供專案需要被貢獻的部分與該如何運作。共同開發者需要經過下列步驟來與他人在 GitHub 共同開發專案：
-
-1. **分叉(Fork)專案** 你或許希望別人能 _分叉(fork)_ 你的專案。 分叉代表別人建立一份你的專案副本到他人的 GitHub 數據庫中。
-1. **複製(Clone)** 複製專案到他人的本地裝置中。
-1. **建立分支(branch)** 依照工作需求建立 _分支(branch)_。 
-1. **專注在他人投入的工作範圍** 要求他人只專注在單一課題上，這樣能提升他們工作 _合併(merge)_ 的機會。想像他們在修正錯誤，同時又新增新功能、更新測試機制......這時如果你只想合併其中的一個、或者是兩個功能呢? 
-
-✅ 想像一個情況：一個重要的分支是編輯與分享的主軸，它能被如何應用?
-
-> 注意，在做更動前，記得建立新的分支。任何提交都會在你所在的分支上，指令 `git status` 可以檢查你現在所在的分支。
-
-現在，我們以共同開發者的角度來看。假設開發者已經 _分支_ 且 _複製_ 了他人的數據庫到自己的 Git 數據庫上，準備開始編輯檔案：
-
-1. **建立新的分支** 利用指令 `git branch` 來建立新的分支，只做相關的工作改動。
-
-   ```bash
-   git branch [分支名稱]
-   ```
-
-1. **切換到該工作分支** 使用指令 `git switch` 來切換到特定分支，更新分支的檔案狀態：
-
-   ```bash
-   git switch [分支名稱]
-   ```
-
-1. **程式設計** 記得追蹤你所更改的地方，利用下列的指令來告訴 Git：
-
-   ```bash
-   git add .
-   git commit -m "my changes"
-   ```
-
-   請確保提交都有適當的名稱，對管理者與你自己都有好處。
-
-1. **將工作分支與 `main` 分支進行合併** 當工作完成時，你會需要將工作分支與 `main` 分支進行合併。 `main` 分支可能會被他人更新，在合併之前記得更新主分支：
-
-   ```bash
-   git switch main
-   git pull
-   ```
-
-   這項步驟可能會面臨到 _衝突(conflicts)_，代表 Git 無法將本地的更動作 _合併(combine)_ 。此時你需要執行下列的指令：
-
-   ```bash
-   git switch [分支名稱]
-   git merge main
-   ```
-
-   這會將所有 `main` 分支的改動加入到你的本地目錄中。若出現狀況，VS Code會告訴你 Git 會對衝突的檔案感到 _困惑(confused)_， 你需要判斷哪一項檔案或程式碼才是最適當的選擇。
-
-1. **將你的成果上傳到 GitHub** 這代表著兩件事：將分支推到你的遠端數據庫以及準備建立 Pull Request(PR)。
-
-   ```bash
-   git push --set-upstream origin [分支名稱]
-   ```
-
-   上述的指令會在分叉的數據庫中新增分支。
-
-1. **建立 PR** 藉由造訪分叉的數據庫中建立 PR，GitHub 會指示你是否要建立 PR，之後要填寫提交紀錄以及編寫詳細的說明。讓管理者了解你做了哪些更動並進行 _交叉比對(fingers crossed)_。 他們會感激你的貢獻並 _合併(merge)_ 你的 PR。完成這步後，你就成為了專案貢獻者，恭喜！
-
-1. **清理專案** 在 PR 被成功合併後， _清除專案(clean up)_ 會是一個好習慣。 你需要清除你的本地分支以及你的遠端數據庫分支。首先，你可以利用下列的指令清除本地分支： 
-
-   ```bash
-   git branch -d [分支名稱]
-   ```
-
-   之後，請確保在 GitHub 頁面上刪除遠端分支。
-
-`Pull request` 要求更新更動到「自己」的專案數據庫，這看起來很蠢。但管理者與核心組員必須謹慎地考量你的更動才能合併到專案的主分支中。這便是向管理者請求上傳許可。
-
-一個 PR 提供比對以及討論的地方，解釋分支的意義、確認程式的合理性、留言與測試……等等。一個好的 PR 必須參照前述所說的提交紀錄準則。若你的 PR 有解決特定的 issue，記得標記在 PR 當中。使用 `#` 接在數字前面來標記 issue 編號，如 `#97`。
-
-🤞 交叉比對每個程式環節都正確無誤後，專案管理者才合併你所作的更動 🤞
-
-若要從 GitHub 遠端數據庫更新到目前的本地工作分支，使用：
-
-`git pull`
-
-## 如何貢獻網路上的開源軟體
-
-首先，尋找一個你感興趣的數據庫，你會複製一份副本到自己的裝置上。
-
-✅ 對新手而言，尋找「適合新手」的數據庫可以[搜尋 'good-first-issue' 標籤](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/)。
-
-![複製數據庫到本地](../images/clone_repo.png)
-
-有許多方式來複製數據庫。 一種是利用 "clone" 整個數據庫的內容。可以使用 HTTPS、SSH 或是 GitHub CLI (Command Line Interface)。 
-
-打開終端機並輸入下列指令來複製數據庫：
-`git clone https://github.com/ProjectURL`
-
-複製完後記得切換到正確的資料夾當中：
-`cd ProjectURL`
-
-你也可以利用[Codespaces](https://github.com/features/codespaces)來打開專案，一款嵌入在 GitHub 中的雲端開發環境，或是使用[GitHub Desktop](https://desktop.github.com/)。
-
-最後，你也可以下載數據庫的壓縮檔。
-
-### 有關 GitHub 的小知識
-
-你可以為別人打星星(star)、追蹤(watch)或分叉(fork)任何一個 GitHub 上的共享數據庫。打上星星的數據庫會出現在右上方的導航欄中。就像是書籤，但是是給程式碼用的。
-
-專案內會有 issue 追蹤器。大多數的 issue 會在 GitHub "Issue" 的標籤內(有些Issue會由作者另外說明)，供大家進行討論。 Pull Requests 標籤內會有正在討論與審核的程式更動。
-
-專案也會有討論區、寄信功能以及聊天室如 Slack、Discord 或 IRC。
-
-✅ 花點時間觀察你的新專案，試著更新設定、新增描述、或架構成一個大型專案(像個大看板一樣！)。你可以創造出任何東西！
-
----
-
-## 🚀 挑戰
-
-找朋友一起編輯彼此的程式。共同建立一項專案、分叉程式、建立分支、合併更動。
-
-## 課後測驗
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4?loc=zh_tw)
-
-## 複習與自學
-
-了解更多：
-
-[貢獻開源軟體](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution)
-
-[Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/)
-
-練習，練習，再練習！ GitHub 有提供很好的學習管道：[lab.github.com](https://lab.github.com/)
-
-- [第一週在 GitHub 上](https://lab.github.com/githubtraining/first-week-on-github)
-
-你能找到更資深的實驗內容。 
-
-## 作業
-
-完成[第一週在 GitHub 上](https://lab.github.com/githubtraining/first-week-on-github)
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.es.md b/1-getting-started-lessons/3-accessibility/translations/README.es.md
deleted file mode 100644
index e4a4e11b..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.es.md
+++ /dev/null
@@ -1,215 +0,0 @@
-# Creación de páginas web accesibles
-
-![Todo sobre accesibilidad](/sketchnotes/webdev101-a11y.png)
-> Dibujo por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## [Cuestionario](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
-
-> El poder de la Web está en su universalidad. El acceso de todas las personas independientemente de su discapacidad es un aspecto fundamental.
->
-> \- Sir Timothy Berners-Lee, director del W3C e inventor de la World Wide Web
-
-Esta cita destaca perfectamente la importancia de crear sitios web accesibles. Una aplicación a la que no pueden acceder todos es, por definición, excluyente. Como desarrolladores web, siempre debemos tener en cuenta la accesibilidad. Al tener este enfoque desde el principio, estará todo bien encaminado para garantizar que todos puedan acceder a las páginas que crea. En esta lección, aprenderás sobre las herramientas que pueden ayudarlo a asegurarse de que sus activos web sean accesibles y cómo construir teniendo en cuenta la accesibilidad. 
-
-## Herramientas para usar
-
-### Lectoras de pantalla
-
-Una de las herramientas de accesibilidad más conocidas son los lectores de pantalla.
-
-[Lectores de pantalla](https://es.wikipedia.org/wiki/Lector_de_pantalla) son clientes de uso común para personas con problemas de visión. A medida que dedicamos tiempo a asegurarnos de que un navegador transmita correctamente la información que deseamos compartir, también debemos asegurarnos de que un lector de pantalla haga lo mismo.
-
-En su forma más básica, un lector de pantalla leerá una página de arriba a abajo de forma audible. Si la página es todo texto, el lector transmitirá la información de manera similar a un navegador. Por supuesto, las páginas web rara vez son puramente texto; contendrán enlaces, gráficos, color y otros componentes visuales. Debemos tener cuidado para garantizar que un lector de pantalla lea correctamente esta información.
-
-Todo desarrollador web debería estar familiarizado con un lector de pantalla. Como se destacó anteriormente, es el cliente que utilizarán sus usuarios. De la misma manera que estás familiarizado con el funcionamiento de un navegador, debes aprender cómo funciona un lector de pantalla. Afortunadamente, los lectores de pantalla están integrados en la mayoría de los sistemas operativos y muchos navegadores contienen extensiones para emular un lector de pantalla.
-
-✅ Prueba una extensión o herramienta del navegador de lector de pantalla. Uno que solo funciona en Windows es [JAWS](https://webaim.org/articles/jaws/). Los navegadores también tienen herramientas integradas que se pueden utilizar para este propósito; consulta estas [herramientas de navegador Edge centradas en accesibilidad](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
-
-### Chequear contrastes
-
-Los colores en los sitios web deben elegirse cuidadosamente para responder a las necesidades de los usuarios daltónicos o de las personas que tienen dificultades para ver colores de bajo contraste.
-
-✅ Prueba un sitio web que te guste usar para el uso del color con una extensión de navegador como
- [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). ¿Qué aprendiste?
-
-### Lighthouse
-
-En el área de herramientas para desarrolladores en tu navegador, encontrarás la herramienta Lighthouse. Esta herramienta es importante para obtener una primera visión de la accesibilidad (así como otros análisis) de un sitio web. Si bien es importante no depender exclusivamente de Lighthouse, una puntuación del 100% es muy útil como referencia.
-
-✅ Busca Lighthouse en el panel de herramientas de desarrollo de su navegador y ejecuta un análisis en cualquier sitio. ¿Qué descubres?
-
-## Diseñar para la accesibilidad
-
-La accesibilidad es un tema relativamente extenso. Para ayudarte, existen numerosos recursos disponibles.
-
-- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
-
-Si bien no podremos cubrir todos los aspectos de la creación de sitios accesibles, a continuación se muestran algunos de los principios básicos que querrá implementar. Diseñar una página accesible desde el principio es **siempre** más fácil que agarrar una página existente y hacerla accesible.
-
-## Buenos principios de visualización
-
-### Paletas de colores seguros
-
-La gente ve el mundo de diferentes formas, y esto incluye los colores. Al seleccionar un esquema de color para tu sitio, debes asegurarte de que sea accesible para todos. Una [herramiento genial para generar paletas de colores es Color Safe](http://colorsafe.co/).
-
-✅ Identifica un sitio web que sea muy problemático en el uso del color. ¿Por qué?
-
-### Resaltar correctamente el texto
-
-Resaltar texto por color, [peso de fuente](https://developer.mozilla.org/docs/Web/CSS/font-weight) u otra [decoración de texto](https://developer.mozilla.org/docs/Web/CSS/text-decoration) no informa inherentemente a un lector de pantalla de su importancia. Una palabra puede estar en negrita porque es una palabra clave o porque es la primera palabra, y el diseñador decidió que debería estar en negrita.
-
-Cuando sea necesario resaltar una frase en particular, utilice los elementos `<strong>` o `<em>`. Estos te indicarán a un lector de pantalla que esos elementos son importantes.
-
-### Usa el HTML correcto
-
-Con CSS y JavaScript es posible que muchos elementos se parezcan a cualquier tipo de control. `<span>` podría usarse para crear un `<button>`, y `<b>` podría convertirse en un enlace. Si bien esto podría considerarse más fácil de diseñar, es desconcertante para un lector de pantalla. Utiliza el HTML apropiado al crear controles en una página. Si deseas un enlace, usa `<a>`. Usar el HTML correcto para el control correcto se llama hacer uso de **HTML semántico**.
-
-✅ Vaya a cualquier sitio web y vea si los diseñadores y desarrolladores están usando HTML correctamente. ¿Puedes encontrar un botón que debería ser un enlace? Sugerencia: haga clic derecho y elige 'View Page Source' en tu navegador para ver el código subyacente.
-
-### Usa buenas pistas visuales
-
-CSS ofrece un control completo sobre el aspecto de cualquier elemento de una página. Puedes crear cuadros de texto sin contorno o hipervínculos sin subrayado. Desafortunadamente, eliminar esas pistas puede hacer que sea más difícil para alguien que depende de ellas poder reconocer el tipo de control.
-
-## La importancia del texto del enlace
-
-Los hipervínculos son fundamentales para navegar por la web. Como resultado, garantizar que un lector de pantalla pueda leer correctamente los enlaces permite a todos los usuarios navegar por su sitio.
-
-### Lectores de pantalla y enlaces
-
-Como era de esperar, los lectores de pantalla leen el texto del enlace de la misma forma que leerían cualquier otro texto de la página. Teniendo esto en cuenta, el texto que se muestra a continuación puede parecer perfectamente aceptable.
-
-> El pequeño pingüino, a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo. [Haga clic aquí](https://en.wikipedia.org/wiki/Little_penguin) para obtener más información.
-
-> El pequeño pingüino, a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo. Visita https://en.wikipedia.org/wiki/Little_penguin para obtener más información.
-
-> **NOTA** Mientras estás a punto de leer, **nunca** debes crear enlaces que se parezcan al anterior.
-
-Recuerda, los lectores de pantalla son una interfaz diferente de los navegadores con diferentes características.
-
-### El problema con el uso de URLs
-
-Los lectores de pantalla leen el texto. Si aparece un URL en el texto, el lector de pantalla leerá el URL. En términos generales, un URL no transmite información significativa y puede sonar molesto. Es posible que hayas experimentado esto si tu teléfono alguna vez leyó de manera audible un mensaje de texto con un URL.
-
-### El problema con "haga clic aquí"
-
-Los lectores de pantalla también tienen la capacidad de leer solo los enlaces en una página, de la misma manera que una persona con visión escanea una página en busca de enlaces. Si el texto del vínculo es siempre "haga clic aquí", todo lo que el usuario oirá es "haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, haga clic aquí, ..." Todos los enlaces ahora son indistinguibles entre sí.
-
-### Buen texto de enlace
-
-Un buen texto de enlace describe brevemente lo que está al otro lado del enlace. En el ejemplo anterior, hablando de pequeños pingüinos, el enlace es a la página de Wikipedia sobre la especie. La frase *pequeños pingüinos* sería un texto de enlace perfecto, ya que deja en claro lo que alguien aprenderá si hace clic en el enlace: pequeños pingüinos.
-
-> El [pingüino pequeño](https://en.wikipedia.org/wiki/Little_penguin), a veces conocido como el pingüino de hadas, es el pingüino más pequeño del mundo.
-
-✅ Navega la web unos minutos hasta encontrar páginas que utilicen estrategias de enlace poco conocidas. Compáralos con otros sitios que demuestren mejores enlaces. ¿Qué aprendiste?
-
-#### Notas sobre motores de búsqueda (search engines)
-
-Además de la ventaja de que ahora tu sitio sea accesible para todos, también ayudas a los motores de búsqueda a navegar mejor tu sitio. Los motores de búsqueda utilizan el texto del enlace para conocer los temas de las páginas. ¡Así que usar un buen texto de enlace ayuda a todos!
-
-### ARIA
-
-Imagina la siguiente página:
-
-| Producto     | Descripción        | Orden        |
-| ------------ | ------------------ | ------------ |
-| Widget       | [Descripción]('#') | [Orden]('#') |
-| Super widget | [Descripción]('#') | [Orden]('#') |
-
-En este ejemplo, duplicar el texto de descripción y orden tiene sentido para alguien que usa un navegador. Sin embargo, alguien que use un lector de pantalla solo escuchará las palabras *descripción* y *orden* repetidas sin contexto.
-
-Para apoyar este tipo de escenarios, HTML apoya un conjunto de atributos conocidos como [Aplicaciones de Internet enriquecidas accesibles (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Estos atributos te permiten proporcionar información adicional a los lectores de pantalla.
-
-> **NOTA**: Al igual que muchos aspectos de HTML, la compatibilidad con el navegador y el lector de pantalla pueden variar. Sin embargo, la mayoría de los clientes de la línea principal apoyan atributos ARIA.
-
-Puedes usar `aria-label` para describir el enlace cuando el formato de la página no te lo permite. La descripción del widget podría establecerse como
-
-``` html
-<a href="#" aria-label="Widget description">descripción</a>
-```
-
-✅ En general, el uso de HTML semántico como se describe arriba reemplaza el uso de ARIA, pero a veces no existe un equivalente semántico para varios widgets HTML. Un buen ejemplo es una barra de progreso. No hay un equivalente HTML para una barra de progreso, por lo que identifica el `<div>` genérico para este elemento con un rol y valores de aria adecuados. La [documentación de MDN sobre ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contiene más información útil.
-
-```html
-<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-</div>
-```
-
-## Imágenes
-
-No hace falta decir que los lectores de pantalla no pueden leer automáticamente lo que hay en una imagen. Asegurarse de que las imágenes sean accesibles no requiere mucho trabajo; de eso se trata el atributo `alt`. Todas las imágenes deben tener un `alt` para describir lo que son.
-
-✅ Como era de esperar, los motores de búsqueda tampoco pueden comprender que hay en una imagen. También usan texto alternativo. Una vez más, ¡asegurarse de que su página sea accesible proporciona bonificaciones adicionales!
-
-## El teclado
-
-Algunos usuarios no pueden usar un mouse o trackpad, sino que dependen de las interacciones del teclado para pasar de un elemento al siguiente. Es importante que tu sitio web presente tu contenido en un orden lógico para que un teclado pueda acceder a cada elemento a medida que el usuario avanza por un documento. Si construyes tus páginas web con HTML semántico y usas CSS para diseñar tu diseño visual, tu sitio debe ser navegable por teclado, pero es importante comprobar este aspecto manualmente. Obtén más información sobre las [estrategias de navegación por teclado](https://webaim.org/techniques/keyboard/).
-
-✅ Ve a cualquier sitio web e intenta navegar por él, utilizando solo la tecla de tabulación. ¿Qué funciona, qué no funciona? ¿Por qué?
-
-## Resumen
-
-Una web accesible para algunos no es una verdadera "red mundial". La mejor manera de garantizar que los sitios que creas sean accesibles, es incorporar las mejores prácticas de accesibilidad desde el principio. Si bien hay pasos adicionales involucrados, incorporar estas habilidades en tu flujo de trabajo ahora significará que todas las páginas que creas sean accesibles.
-
-🚀 Desafío: toma este HTML y vuelve a escribirlo para que sea lo más accesible posible, dados los temas que aprendiste.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Ejemplo
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Tortuga Ipsum</p>
-      <p class="site-subtitle">El club de fans de tortugas más importante del mundo</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Recursos</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"Me gustan las tortugas"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Tortuga">Info básico de tortugas</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Tortugas_(chocolate)">Tortugas de chocolate</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Bienvenida a la Tortuga Ipsum. 
-            <a href="">Haz clic aquí</a> para aprender más.
-        </p>
-        <p class="article-text">
-          Tortuga ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Regístrese para recibir 'Noticias Tortuga'</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Índice</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Ejemplo Semántico</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; Instrument 2016</span>
-    </div>
-  </body>
-</html>
-```
-
-## [Post-lectura prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
-
-## Revisión y auto-estudio
-
-Muchos gobiernos tienen leyes sobre los requisitos de accesibilidad. Lee sobre las leyes de accesibilidad de tu país de origen. ¿Qué está cubierto y qué no? Un ejemplo es [este sitio web de gobierno](https://accessibility.blog.gov.uk/).
-
-** Tarea **: [Analizar un sitio web no accesible](assignment.es.md)
-
-Créditos: [Tortuga Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
-
-> Autor: Christopher Harrison
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.fr.md b/1-getting-started-lessons/3-accessibility/translations/README.fr.md
deleted file mode 100644
index d5e5d4fc..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.fr.md
+++ /dev/null
@@ -1,230 +0,0 @@
-# Création de Pages Web Accessibles
-
-! [Tout sur l'accessibilité](/sketchnotes/webdev101-a11y.png)
-> SketchNote par[Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz préalable
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=fr)
-
-> La puissance du Web est dans son universalité. L'accès par tout le monde indépendamment d'invalidité est un aspect essentiel.
->
-> \- Sir Timothy Berners-Lee, directeur du W3C et inventeur du World Wide Web
-
-Cette citation met parfaitement l'accent sur l'importance de créer des sites Web accessibles. Une application qui ne peut pas être accessible par tous est par définition exclusionnaire. En tant que développeurs Web, nous devrions toujours avoir l'accessibilité à l'esprit. En ayant cet objectif dès le début, vous serez déjà bien lancé sur la façon de vous assurer que tout le monde peut accéder aux pages que vous créez. Dans cette leçon, vous découvrirez les outils pouvant vous aider à vous assurer que vos éléments Web sont accessibles et comment développer avec l'accessibilité à l'esprit. 
-
-> Vous pouvez accéder à cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)!
-
-## Outils à utiliser
-
-### Lecteurs d'écran (Screen readers)
-
-L'un des outils d'accessibilité les plus connus sont les lecteurs d'écran.
-
-[Les lecteurs d'écran](https://en.wikipedia.org/wiki/Screen_reader) sont des clients couramment utilisés pour ceux qui ont des déficiences visuelles. De la même manière que nous passons du temps à nous assurer qu'un navigateur transmette correctement les informations que nous souhaitons partager, nous devons également le faire pour un lecteur d'écran.
-
-À la base, un lecteur d'écran lira une page de haut en bas de manière audible. Si votre page ne contient que du texte, le lecteur transmettra les informations de la même manière qu'un navigateur. Bien sûr, les pages Web sont rarement purement textuelles ; elles contiendront des liens, des graphiques, des couleurs et d'autres composants visuels. Il faut veiller à ce que ces informations soient lues correctement par un lecteur d'écran.
-
-Chaque développeur Web doit se familiariser avec un lecteur d'écran. Comme souligné ci-dessus, c'est le client que vos utilisateurs utiliseront. De la même manière que vous connaissez le fonctionnement d'un navigateur, vous devez apprendre comment fonctionne un lecteur d'écran. Heureusement, les lecteurs d'écran sont intégrés à la plupart des systèmes d'exploitation.
-
-Certains navigateurs disposent également d'outils et d'extensions intégrés qui peuvent lire le texte à voix haute ou même fournir des fonctionnalités de navigation de base, telles que [ces outils de navigateur Edge axés sur l'accessibilité](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Ce sont également des outils d'accessibilité importants, mais ils fonctionnent très différemment des lecteurs d'écran et ils ne doivent pas être confondus avec des outils de test de lecteurs d'écran.
-
-✅ Essayez un lecteur d'écran et un lecteur de texte de navigateur. Sous Windows, [Narrateur](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) est inclus par défaut, et [JAWS](https:// webaim.org/articles/jaws/) et [NVDA](https://www.nvaccess.org/about-nvda/) peuvent également être installés. Sur macOS et iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) est installé par défaut.
-
-### Zoom
-
-Un autre outil couramment utilisé par les personnes malvoyantes est le zoom. Le type de zoom le plus basique est le zoom statique, contrôlé par `Ctrl + signe plus (+)` ou en diminuant la résolution de l'écran. Ce type de zoom entraîne le redimensionnement de la page entière, il est donc important d'utiliser un [design responsive](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) pour offrir une bonne expérience utilisateur à des niveaux de zoom accrus .
-
-Un autre type de zoom repose sur un logiciel spécialisé pour agrandir une zone de l'écran et effectuer un panoramique, un peu comme avec une vraie loupe. Sous Windows, [Loupe](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198 ) est intégré, et [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) est un logiciel de grossissement tiers avec plus de fonctionnalités et une plus grande base d'utilisateurs. MacOS et iOS ont tous deux un logiciel de grossissement intégré appelé [Zoom](https://www.apple.com/accessibility/mac/vision/).
-
-### Contrôleurs de contraste
-
-Les couleurs sur les sites Web doivent être soigneusement choisies pour répondre aux besoins des utilisateurs daltoniens ou des personnes qui ont des difficultés à voir les couleurs à faible contraste.
-
-✅ Testez un site Web que vous aimez utiliser pour l'utilisation des couleurs avec une extension de navigateur telle que [le vérificateur de couleurs de WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Qu'apprenez-vous?
-
-### Lighthouse
-
-Dans la zone des outils de développement de votre navigateur, vous trouverez l'outil Lighthouse. Cet outil est important pour obtenir une première vue de l'accessibilité (ainsi que d'autres analyses) d'un site Web. Bien qu'il soit important de ne pas se fier exclusivement à Lighthouse, un score de 100 % est très utile comme référence.
-
-✅ Trouvez Lighthouse dans le panneau des outils de développement de votre navigateur et lancez une analyse sur n'importe quel site. Que découvrez vous ?
-
-## Concevoir pour l'accessibilité
-
-L'accessibilité est un sujet relativement vaste. Pour vous aider, de nombreuses ressources sont disponibles.
-
-- [Accessible U - Université du Minnesota](https://accessibility.umn.edu/your-role/web-developers)
-
-Bien que nous ne puissions pas couvrir tous les aspects de la création de sites accessibles, vous trouverez ci-dessous quelques-uns des principes fondamentaux que vous voudrez mettre en œuvre. Concevoir une page accessible dès le départ est **toujours** plus facile que de revenir à une page existante pour la rendre accessible.
-
-## Bons principes d'affichage
-
-### Palettes de couleurs sûres
-
-Les gens voient le monde de différentes manières, et cela inclut les couleurs. Lorsque vous sélectionnez un schéma de couleurs pour votre site, vous devez vous assurer qu'il est accessible à tous. Un excellent [outil pour générer des palettes de couleurs est Color Safe](http://colorsafe.co/).
-
-✅ Identifiez un site Web qui est très problématique dans son utilisation de la couleur. Pourquoi?
-
-### Utilisez le bon code HTML
-
-Avec CSS et JavaScript, il est possible de faire ressembler n'importe quel élément à n'importe quel type de contrôle. `<span>` pourrait être utilisé pour créer un `<button>`, et `<b>` pourrait devenir un hyperlien. Bien que cela puisse être considéré comme plus facile à styliser, cela ne transmet rien à un lecteur d'écran. Utilisez le code HTML approprié lors de la création de contrôles sur une page. Si vous voulez un lien hypertexte, utilisez `<a>`. Utiliser le bon code HTML pour le bon contrôle s'appelle utiliser le HTML sémantique.
-
-✅ Allez sur n'importe quel site Web et voyez si les concepteurs et les développeurs utilisent correctement le HTML. Pouvez-vous trouver un bouton qui devrait être un lien ? Astuce : faites un clic droit et choisissez « Afficher la source de la page » dans votre navigateur pour consulter le code sous-jacent.
-
-### Créer une hiérarchie d'en-têtes descriptive
-
-Les utilisateurs de lecteurs d'écran [se fient fortement aux titres](https://webaim.org/projects/screenreadersurvey8/#finding) pour trouver des informations et parcourir une page. La rédaction d'un contenu de titre descriptif et l'utilisation de balises de titre sémantique sont importantes pour créer un site facilement navigable pour les utilisateurs de lecteurs d'écran.
-
-### Utilisez de bons indices visuels
-
-CSS offre un contrôle complet sur l'apparence de n'importe quel élément d'une page. Vous pouvez créer des zones de texte sans contour ou des liens hypertexte sans soulignement. Malheureusement, la suppression de ces indices peut rendre plus difficile, pour quelqu'un qui en dépend, la capacité de reconnaître le type de contrôle.
-
-## L'importance du texte de lien
-
-Les hyperliens sont essentiels à la navigation sur le Web. Par conséquent, s'assurer qu'un lecteur d'écran peut lire correctement les liens permet à tous les utilisateurs de naviguer sur votre site.
-
-### Lecteurs d'écran et liens
-
-Comme on peut s'y attendre, les lecteurs d'écran lisent le texte de lien de la même manière qu'ils liraient n'importe quel autre texte de la page. Dans cet esprit, le texte présenté ci-dessous peut sembler parfaitement acceptable.
-
-> Le petit pingouin, parfois appelé pingouin fée, est le plus petit pingouin du monde. [Cliquez ici](https://en.wikipedia.org/wiki/Little_penguin) pour plus d'informations.
-
-> Le petit pingouin, parfois appelé pingouin fée, est le plus petit pingouin du monde. Visitez https://en.wikipedia.org/wiki/Little_penguin pour plus d'informations.
-
-> **REMARQUE** Au moment où vous êtes sur le point de lire, vous ne devez **jamais** créer des liens qui ressemblent à ceux ci-dessus.
-
-N'oubliez pas que les lecteurs d'écran sont une interface différente des navigateurs avec un ensemble de fonctionnalités différent.
-
-### Le problème avec l'utilisation de l'URL
-
-Les lecteurs d'écran lisent le texte. Si une URL apparaît dans le texte, le lecteur d'écran lira l'URL. De manière générale, l'URL ne transmet pas d'informations significatives et peut sembler ennuyeuse. Vous avez peut-être vécu cela si votre téléphone a déjà lu de manière audible un message texte avec une URL.
-
-### Le problème avec "cliquez ici"
-
-Les lecteurs d'écran ont également la possibilité de lire uniquement les hyperliens sur une page, de la même manière qu'une personne voyante numériserait une page à la recherche de liens. Si le texte du lien est toujours « cliquez ici », tout ce que l'utilisateur entendra est « cliquez ici, cliquez ici, cliquez ici, cliquez ici, cliquez ici, ... ». Tous les liens sont désormais indiscernables les uns des autres.
-
-### Bon texte de lien
-
-Un bon texte de lien décrit brièvement ce qui se trouve de l'autre côté du lien. Dans l'exemple ci-dessus parlant de petits pingouins, le lien renvoie à la page Wikipedia sur l'espèce. L'expression *petits pingouins* constituerait un texte de lien parfait car elle indique clairement ce que quelqu'un apprendra s'il clique sur le lien - petits pingouins.
-
-> Le [petit pingouin](https://en.wikipedia.org/wiki/Little_penguin), parfois appelé pingouin féerique, est le plus petit pingouin du monde.
-
-✅ Surfez sur le Web pendant quelques minutes pour trouver des pages qui utilisent des stratégies de liens obscures. Comparez-les avec d'autres sites mieux liés. Qu'apprenez-vous?
-
-#### Notes du moteur de recherche
-
-En plus de garantir que votre site est accessible à tous, vous aiderez également les moteurs de recherche à naviguer sur votre site. Les moteurs de recherche utilisent le texte du lien pour apprendre les sujets des pages. Donc, utiliser un bon texte de lien aide tout le monde !
-
-### ARIA
-
-Imaginez la page suivante :
-
-| Produit      | Description        | Commande        |
-| ------------ | ------------------ | --------------- |
-| Widget       | [Description]('#') | [Commande]('#') |
-| Super widget | [Description]('#') | [Commande]('#') |
-
-Dans cet exemple, la duplication du texte de la description et de l'ordre a du sens pour une personne utilisant un navigateur. Cependant, une personne utilisant un lecteur d'écran n'entendrait que les mots *description* et *ordre* répétés sans contexte.
-
-Pour prendre en charge ces types de scénarios, HTML prend en charge un ensemble d'attributs appelés [Applications Internet riches accessibles (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Ces attributs vous permettent de fournir des informations supplémentaires aux lecteurs d'écran.
-
-> **REMARQUE** : Comme de nombreux aspects du code HTML, la prise en charge du navigateur et du lecteur d'écran peut varier. Cependant, la plupart des clients principaux prennent en charge les attributs ARIA.
-
-Vous pouvez utiliser `aria-label` pour décrire le lien lorsque le format de la page ne vous le permet pas. La description du widget peut être définie comme: 
-
-``` html
-<a href="#" aria-label="Widget description">description</a>
-```
-
-✅ En général, l'utilisation du balisage sémantique comme décrit ci-dessus remplace l'utilisation d'ARIA, mais parfois il n'y a pas d'équivalent sémantique pour divers widgets HTML. Un bon exemple est un arbre. Il n'y a pas d'équivalent HTML pour un arbre, vous identifiez donc le `<div>` générique pour cet élément avec un rôle et des valeurs aria appropriés. La [documentation MDN sur ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contient des informations plus utiles.
-
-```html
-<h2 id="tree-label">File Viewer</h2>
-<div role="tree" aria-labelledby="tree-label">
-  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
-</div>
-```
-
-## Images
-
-Il va sans dire que les lecteurs d'écran ne sont pas en mesure de lire automatiquement le contenu d'une image. S'assurer que les images sont accessibles ne demande pas beaucoup de travail - c'est l'objet de l'attribut `alt`. Toutes les images significatives devraient avoir un "alt" pour décrire ce qu'elles sont. Les images purement décoratives doivent avoir leur attribut `alt` défini sur une chaîne vide : `alt=""`. Cela empêche les lecteurs d'écran d'annoncer inutilement l'image décorative.
-
-✅ Comme vous pouvez vous y attendre, les moteurs de recherche sont également incapables de comprendre ce qu'il y a dans une image. Ils utilisent également du texte alternatif. Encore une fois, s'assurer que votre page est accessible offre des bonus supplémentaires !
-
-## Le clavier
-
-Certains utilisateurs sont incapables d'utiliser une souris ou un trackpad, se fiant plutôt aux interactions du clavier pour passer d'un élément à l'autre. Il est important que votre site Web présente votre contenu dans un ordre logique afin qu'un utilisateur du clavier puisse accéder à chaque élément interactif lorsqu'il se déplace vers le bas d'un document. Si vous créez vos pages Web avec un balisage sémantique et utilisez CSS pour styliser leur mise en page visuelle, votre site doit être navigable au clavier, mais il est important de tester cet aspect manuellement. En savoir plus sur [les stratégies de navigation au clavier](https://webaim.org/techniques/keyboard/).
-
-✅ Allez sur n'importe quel site Web et essayez de le parcourir en utilisant uniquement votre clavier. Qu'est-ce qui marche, qu'est-ce qui ne marche pas ? Pourquoi?
-
-## Résumé
-
-Un web accessible à certains n'est pas vraiment un « world-wide web ». Le meilleur moyen de garantir l'accessibilité des sites que vous créez est d'intégrer les meilleures pratiques d'accessibilité dès le départ. Bien qu'il y ait des étapes supplémentaires, l'intégration de ces compétences dans votre flux de travail signifie maintenant que toutes les pages que vous créez seront accessibles.
-
----
-
-## 🚀 Challenge
-
-Prenez ce code HTML et réécrivez-le pour qu'il soit aussi accessible que possible, compte tenu des stratégies que vous avez apprises.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Example
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## Quiz de validation des connaissances
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=fr)
-
-## Révision et auto-apprentissage
-
-De nombreux gouvernements ont des lois concernant les exigences d'accessibilité. Renseignez-vous sur les lois d'accessibilité de votre pays d'origine. Qu'est-ce qui est couvert et qu'est-ce qui ne l'est pas ? Un exemple est [ce site Web du gouvernement](https://accessibility.blog.gov.uk/).
-
-## Mission
- 
-[Analyser un site Web non accessible](assignment.fr.md)
-
-Crédits : [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) par Instrument
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.hi.md b/1-getting-started-lessons/3-accessibility/translations/README.hi.md
deleted file mode 100644
index fc799f5e..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.hi.md
+++ /dev/null
@@ -1,227 +0,0 @@
-# सुलभ वेबपृष्ठ बनाना
-
-![पहुँच के बारे में सब कुछ](/sketchnotes/webdev101-a11y.png)
-> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=hi)
-
-> वेब की शक्ति अपनी सार्वभौमिकता में है। विकलांगता की परवाह किए बिना सभी तक पहुंच एक आवश्यक पहलू है।
->
-> \- सर टिमोथी बर्नर्स-ली, W3C निदेशक और वर्ल्ड वाइड वेब के आविष्कारक
-
-यह उद्धरण सुलभ वेबसाइट बनाने के महत्व पर पूरी तरह से प्रकाश डालता है। एक एप्लिकेशन जिसे सभी द्वारा एक्सेस नहीं किया जा सकता है वह परिभाषा बहिष्करण द्वारा है। वेब डेवलपर्स के रूप में हमें हमेशा ध्यान में रखना चाहिए। शुरू से इस पर ध्यान केंद्रित करने से आप अपने तरीके से अच्छी तरह से सुनिश्चित कर पाएंगे कि हर कोई आपके द्वारा बनाए गए पृष्ठों तक पहुंच बना सके। इस पाठ में, आप उन टूल्स के बारे में जानेंगे जो यह सुनिश्चित करने में आपकी मदद कर सकते हैं कि आपकी वेब एसेट्स सुलभ हैं और एक्सेसिबिलिटी को ध्यान में रखते हुए कैसे बनाया जाए। 
-
-## उपयोग करने के उपकरण
-
-### स्क्रीन रीडर
-
-सबसे प्रसिद्ध पहुँच उपकरणों में से एक स्क्रीन रीडर हैं।
-
-[स्क्रीन रीडर](https://en.wikipedia.org/wiki/Screen_reader) आमतौर पर दृष्टि हानि वाले लोगों के लिए उपयोग किए जाते हैं। जैसा कि हम एक ब्राउज़र सुनिश्चित करने में समय बिताते हैं, हम जो जानकारी साझा करना चाहते हैं, उसे ठीक से बता देते हैं, हमें यह भी सुनिश्चित करना चाहिए कि स्क्रीन रीडर भी ऐसा ही करे।
-
-इसके सबसे मूल में, एक स्क्रीन रीडर ऊपर से नीचे तक एक पृष्ठ को श्रव्य रूप से पढ़ेगा। यदि आपका पृष्ठ सभी पाठ है, तो पाठक एक ब्राउज़र में इसी तरह से जानकारी को बताएगा। बेशक, वेब पेज शायद ही कभी विशुद्ध रूप से टेक्स्ट होते हैं; वे लिंक, ग्राफिक्स, रंग, और अन्य दृश्य घटक शामिल होंगे। यह सुनिश्चित करने के लिए ध्यान रखा जाना चाहिए कि यह जानकारी स्क्रीन रीडर द्वारा सही ढंग से पढ़ी जाए।
-
-प्रत्येक वेब डेवलपर को स्क्रीन रीडर के साथ खुद को परिचित करना चाहिए। जैसा कि ऊपर प्रकाश डाला गया है, यह वह क्लाइंट है जिसे आपके उपयोगकर्ता उपयोग करेंगे। बहुत कुछ उसी तरह से जिससे आप परिचित हैं कि ब्राउज़र कैसे संचालित होता है, आपको यह सीखना चाहिए कि स्क्रीन रीडर कैसे संचालित होता है। सौभाग्य से, स्क्रीन रीडर अधिकांश ऑपरेटिंग सिस्टम में निर्मित होते हैं।
-
-कुछ ब्राउज़रों में अंतर्निहित टूल और एक्सटेंशन भी होते हैं, जो टेक्स्ट को जोर से पढ़ सकते हैं या कुछ बुनियादी नौवहन सुविधाएँ भी प्रदान कर सकते हैं, जैसे कि [ये एक्सेसिबिलिटी-केंद्रित एज ब्राउज़र टूल](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features)। ये महत्वपूर्ण एक्सेसिबिलिटी टूल भी हैं, लेकिन स्क्रीन रीडर्स से बहुत अलग तरीके से काम करते हैं और स्क्रीन रीडर टेस्टिंग टूल्स के लिए इनसे गलती नहीं होनी चाहिए।
-
-✅ स्क्रीन रीडर और ब्राउज़र टेक्स्ट रीडर आज़माएं। विंडोज पर [नैरेटर](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c17bf109bdb1) डिफ़ॉल्ट रूप से शामिल है, और [JAWS](https://webaim.org/articles/jaws/) और [NVDA](https://www.nvaccess.org/about-nvda/) भी इंस्टॉल किए जा सकते हैं। MacOS और iOS पर, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) डिफ़ॉल्ट रूप से स्थापित है।
-
-### ज़ूम
-
-आमतौर पर दृष्टि दोष वाले लोगों द्वारा उपयोग किया जाने वाला एक अन्य उपकरण जूमिंग है। जूमिंग का सबसे मूल प्रकार स्थिर ज़ूम है, जिसे 'कंट्रोल + प्लस साइन (+)' या स्क्रीन रिज़ॉल्यूशन कम करके नियंत्रित किया जाता है। इस प्रकार का ज़ूम पूरे पृष्ठ को आकार देने का कारण बनता है, इसलिए एक अच्छा उपयोगकर्ता अनुभव प्रदान करने के लिए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) का उपयोग करना महत्वपूर्ण है बढ़े हुए ज़ूम स्तर पर।
-
-एक अन्य प्रकार का ज़ूम स्क्रीन और पैन के एक क्षेत्र को बढ़ाने के लिए विशेष सॉफ़्टवेयर पर निर्भर करता है, बहुत कुछ वास्तविक आवर्धक कांच का उपयोग करने जैसा। विंडोज पर, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1bc-d3bd-8615-0e5e32204198) में बनाया गया है और [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) अधिक सुविधाओं और एक बड़ा उपयोगकर्ता आधार के लिए एक तृतीय-पक्ष आवर्धन सॉफ्टवेयर है। दोनों macOS और iOS में एक अंतर्निहित आवर्धन सॉफ्टवेयर होता है जिसे [ज़ूम](https://www.apple.com/accessibility/mac/vision/) कहा जाता है।
-### कंट्रास्ट चेकर्स 
-
-कलर-ब्लाइंड यूजर्स या ऐसे लोग जिन्हें कम कंट्रास्ट कलर देखने में दिक्कत होती है, उनकी जरूरतों का जवाब देने के लिए वेब साइट्स पर रंगों को सावधानी से चुना जाना चाहिए।
-
-✅ ब्राउज़र एक्सटेंशन के साथ रंग उपयोग के लिए उपयोग की जाने वाली वेब साइट का परीक्षण करें, जैसे कि [WCAG का कलर चेकर](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US)। आप क्या सीखते हैं?
-
-### लाइटहाउस
-
-अपने ब्राउज़र के डेवलपर टूल क्षेत्र में, आपको लाइटहाउस टूल मिलेगा। वेब साइट की पहुंच (साथ ही अन्य विश्लेषण) का पहला दृश्य प्राप्त करने के लिए यह उपकरण महत्वपूर्ण है। हालांकि यह विशेष रूप से लाइटहाउस पर भरोसा नहीं करना महत्वपूर्ण है, एक आधार रेखा के रूप में 100% स्कोर बहुत मददगार है।
-
-✅ अपने ब्राउज़र के डेवलपर टूल पैनल में लाइटहाउस ढूंढें और किसी भी साइट पर विश्लेषण चलाएं। आपको क्या मिला ?
-
-## पहुंच के लिए डिजाइनिंग
-
-पहुँच एक अपेक्षाकृत बड़ा विषय है। आपकी सहायता करने के लिए, कई संसाधन उपलब्ध हैं।
-
-- [सुलभ यू - मिनेसोटा विश्वविद्यालय](https://accessibility.umn.edu/your-role/web-wevelopmentation)
-
-हालांकि हम सुलभ साइटों को बनाने के हर पहलू को कवर नहीं कर पाएंगे, नीचे कुछ मुख्य सिद्धांत हैं जिन्हें आप लागू करना चाहते हैं। प्रारंभ से एक सुलभ पृष्ठ डिजाइन करना **हमेशा** सुलभ है और इसे सुलभ बनाने के लिए मौजूदा पृष्ठ पर वापस जाना आसान है।
-
-## अच्छे प्रदर्शन के सिद्धांत
-
-### रंग सुरक्षित पट्टियाँ
-
-लोग दुनिया को विभिन्न तरीकों से देखते हैं, और इसमें रंग शामिल हैं। अपनी साइट के लिए एक रंग योजना का चयन करते समय, आपको यह सुनिश्चित करना चाहिए कि यह सभी के लिए सुलभ हो। रंग पट्टियाँ बनाने के लिए एक महान [टूल कलर सेफ है](http://colorsafe.co/)।
-
-✅ एक वेब साइट की पहचान करें जो रंग के उपयोग में बहुत समस्याग्रस्त है। क्यों?
-
-### सही HTML का उपयोग करें
-
-सीएसएस और जावास्क्रिप्ट के साथ किसी भी तत्व को किसी भी प्रकार के नियंत्रण की तरह बनाना संभव है। `<span>` का उपयोग एक `<button>` बनाने के लिए किया जा सकता है, और `<b>` हाइपरलिंक बन सकता है। हालांकि यह शैली के लिए आसान माना जा सकता है, यह एक स्क्रीन रीडर के लिए कुछ भी नहीं बताता है। पृष्ठ पर नियंत्रण बनाते समय उपयुक्त HTML का उपयोग करें। यदि आप हाइपरलिंक चाहते हैं, तो `<a>` का उपयोग करें। सही नियंत्रण के लिए सही HTML का उपयोग करना शब्दार्थ HTML का उपयोग करना कहलाता है।
-
-✅ किसी भी वेब साइट पर जाएं और देखें कि डिजाइनर और डेवलपर HTML का सही उपयोग कर रहे हैं या नहीं। क्या आपको एक बटन मिल सकता है जो एक लिंक होना चाहिए? संकेत: अंतर्निहित कोड देखने के लिए अपने ब्राउज़र में राइट क्लिक करें और 'व्यू पेज सोर्स' चुनें।
-
-### एक वर्णनात्मक शीर्षक पदानुक्रम बनाएँ
-
-स्क्रीन रीडर उपयोगकर्ता [शीर्षकों पर बहुत भरोसा करते हैं](https://webaim.org/projects/screenreadersurvey8/#finding) जानकारी खोजने और एक पृष्ठ के माध्यम से नेविगेट करने के लिए। वर्णनात्मक शीर्षक सामग्री लिखना और अर्थ हेडिंग टैग का उपयोग करना स्क्रीन रीडर उपयोगकर्ताओं के लिए आसानी से नेविगेट करने योग्य साइट बनाने के लिए महत्वपूर्ण है।
-
-### अच्छे दृश्य सुराग का उपयोग करें
-
-सीएसएस एक पृष्ठ पर किसी भी तत्व के देखो पर पूर्ण नियंत्रण प्रदान करता है। आप बिना किसी आउटलाइन या बिना हाइपरलिंक के टेक्स्ट बॉक्स बना सकते हैं। दुर्भाग्यवश उन सुरागों को हटाना किसी ऐसे व्यक्ति के लिए अधिक चुनौतीपूर्ण हो सकता है जो उन पर निर्भर करता है जो नियंत्रण के प्रकार को पहचानने में सक्षम हो।
-
-## लिंक टेक्स्ट का महत्व
-
-हाइपरलिंक्स वेब नेविगेट करने के लिए मुख्य हैं। नतीजतन, स्क्रीन रीडर सुनिश्चित करना लिंक को ठीक से पढ़ सकता है, जिससे सभी उपयोगकर्ता आपकी साइट को नेविगेट कर सकते हैं।
-
-### स्क्रीन रीडर और लिंक
-
-जैसा कि आप उम्मीद करेंगे, स्क्रीन रीडर्स लिंक टेक्स्ट को उसी तरह से पढ़ेंगे जैसे वे पृष्ठ पर किसी अन्य टेक्स्ट को पढ़ते हैं। इसे ध्यान में रखते हुए, नीचे प्रदर्शित टेक्स्ट पूरी तरह स्वीकार्य लग सकता है।
-
-> छोटा पेंगुइन, जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है। अधिक जानकारी के लिए [यहां क्लिक करें](https://en.wikipedia.org/wiki/Little_penguin)।
-
-> छोटा पेंगुइन, जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है। अधिक जानकारी के लिए https://en.wikipedia.org/wiki/Little_penguin पर जाएं।
-> ** नोट ** जैसा कि आप पढ़ने वाले हैं, आपको ** कभी भी ** लिंक नहीं बनाना चाहिए जो ऊपर की तरह दिखते हों।
-
-याद रखें, स्क्रीन रीडर एक अलग सेट के साथ ब्राउज़रों से अलग इंटरफ़ेस हैं।
-
-### URL का उपयोग करने में समस्या
-
-स्क्रीन रीडर पाठ पढ़ते हैं। यदि टेक्स्ट में URL दिखाई देता है, तो स्क्रीन रीडर URL को पढ़ेगा। सामान्यतया, URL सार्थक जानकारी नहीं देता है, और कष्टप्रद ध्वनि कर सकता है। यदि आपका फ़ोन कभी श्रव्य रूप से URL के साथ टेक्स्ट संदेश पढ़ता है, तो आपको इसका अनुभव हो सकता है।
-
-### "यहाँ क्लिक करें" के साथ समस्या
-
-स्क्रीन पाठकों के पास एक पृष्ठ पर केवल हाइपरलिंक पढ़ने की क्षमता होती है, उसी तरह एक दृष्टिहीन व्यक्ति लिंक के लिए एक पेज स्कैन करेगा। यदि लिंक टेक्स्ट हमेशा "यहां क्लिक करें" है, तो सभी उपयोगकर्ता सुनेंगे "यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें, यहां क्लिक करें ..." सभी लिंक अब एक दूसरे से अप्रभेद्य हैं।
-
-### अच्छा लिंक टेक्स्ट
-
-अच्छा लिंक टेक्स्ट संक्षेप में बताता है कि लिंक के दूसरी तरफ क्या है। उपरोक्त उदाहरणों में छोटे पेंगुइन के बारे में बात करते हुए, लिंक प्रजाति के बारे में विकिपीडिया पृष्ठ पर है। वाक्यांश *थोड़ा पेंगुइन* सही लिंक टेक्स्ट के लिए बना देगा क्योंकि यह स्पष्ट करता है कि कोई व्यक्ति इस बारे में सीखेगा कि क्या वे लिंक पर क्लिक करते हैं - छोटे पेंगुइन।
-
-> [छोटा पेंगुइन](https://en.wikipedia.org/wiki/Little_penguin), जिसे कभी-कभी परी पेंगुइन के रूप में जाना जाता है, दुनिया का सबसे छोटा पेंगुइन है।
-
-✅ उन पृष्ठों को खोजने के लिए कुछ मिनटों के लिए वेब सर्फ करें जो अस्पष्ट लिंकिंग रणनीतियों का उपयोग करते हैं। अन्य, बेहतर-लिंक्ड साइटों के साथ उनकी तुलना करें। आप क्या सीखते हैं?
-
-#### खोज इंजन नोट्स 
-
-अपनी साइट को सुनिश्चित करने के लिए एक अतिरिक्त बोनस के रूप में सभी के लिए सुलभ है, आप खोज इंजन को आपकी साइट पर भी नेविगेट करने में मदद करेंगे। खोज इंजन पृष्ठों के विषयों को जानने के लिए लिंक पाठ का उपयोग करते हैं। इसलिए अच्छे लिंक टेक्स्ट का उपयोग करना सभी की मदद करता है!
-
-### ARIA
-
-निम्नलिखित पृष्ठ की कल्पना करें:
-
-| Product      | Description        | Order        |
-| ------------ | ------------------ | ------------ |
-| Widget       | [Description]('#') | [Order]('#') |
-| Super widget | [Description]('#') | [Order]('#') |
-
-इस उदाहरण में, वर्णन और आदेश के पाठ की नकल करना किसी ब्राउज़र का उपयोग करने वाले व्यक्ति के लिए समझ में आता है। हालाँकि, स्क्रीन रीडर का उपयोग करने वाला कोई व्यक्ति केवल संदर्भ के बिना *विवरण* और *आदेश* दोहराता है।
-
-इस प्रकार के परिदृश्यों का समर्थन करने के लिए, HTML [एक्सेसिबल रिच इंटरनेट एप्लिकेशन (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) नामक विशेषताओं का एक सेट का समर्थन करता है। ये विशेषताएँ आपको स्क्रीन पाठकों को अतिरिक्त जानकारी प्रदान करने की अनुमति देती हैं।
-
-> ** नोट **: HTML के कई पहलुओं की तरह, ब्राउज़र और स्क्रीन रीडर समर्थन भिन्न हो सकते हैं। हालांकि, अधिकांश मेनलाइन क्लाइंट ARIA विशेषताओं का समर्थन करते हैं।
-
-जब पृष्ठ का प्रारूप आपको अनुमति नहीं देता है, तो लिंक का वर्णन करने के लिए आप `aria-label` का उपयोग कर सकते हैं। विजेट के लिए विवरण के रूप में सेट किया जा सकता है
-
-``` html
-<a href="#" aria-label="Widget description">description</a>
-```
-
-✅ सामान्य तौर पर, ऊपर वर्णित शब्दार्थ मार्कअप का उपयोग ARIA के उपयोग को बढ़ा देता है, लेकिन कभी-कभी विभिन्न HTML विजेट के लिए कोई शब्दार्थ समतुल्य नहीं होता है। एक अच्छा उदाहरण एक पेड़ है। एक पेड़ के लिए कोई HTML समतुल्य नहीं है, इसलिए आप इस तत्व के लिए एक उचित भूमिका और aria मान के साथ जेनेरिक `<div>` की पहचान करते हैं। [ARIA पर MDN प्रलेखन](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) में अधिक उपयोगी जानकारी है।
-
-```html
-<h2 id="tree-label">File Viewer</h2>
-<div role="tree" aria-labelledby="tree-label">
-  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
-</div>
-```
-
-## इमेजिस
-
-यह बिना कहे चला जाता है कि स्क्रीन रीडर स्वचालित रूप से पढ़ने में असमर्थ हैं कि एक छवि में क्या है। यह सुनिश्चित करना कि छवियां सुलभ हैं, बहुत काम नहीं करता है - यह वही है जो `alt` गुणकी विशेषता है। सभी सार्थक चित्रों में यह बताने के लिए कि वे क्या हैं, एक `alt` गुण होना चाहिए।
-छवियां जो विशुद्ध रूप से सजावटी हैं, उनके पास एक खाली स्ट्रिंग के लिए उनके `alt` विशेषता होनी चाहिए:`alt=""`। यह स्क्रीन पाठकों को अनावश्यक रूप से सजावटी छवि की घोषणा करने से रोकता है।
-
-✅ जैसा कि आप उम्मीद कर सकते हैं, खोज इंजन भी यह समझने में असमर्थ हैं कि एक छवि में क्या है। वे ऑल्ट टेक्स्ट का भी इस्तेमाल करते हैं। तो एक बार फिर, सुनिश्चित करना कि आपका पृष्ठ सुलभ है, अतिरिक्त बोनस प्रदान करता है!
-
-## थे कीबोर्ड
-
-कुछ उपयोगकर्ता माउस या ट्रैकपैड का उपयोग करने में असमर्थ हैं, इसके बजाय एक तत्व से दूसरे तक टैब के लिए कीबोर्ड इंटरैक्शन पर निर्भर हैं। आपकी वेब साइट के लिए यह महत्वपूर्ण है कि आप अपनी सामग्री को तार्किक क्रम में प्रस्तुत करें ताकि एक कीबोर्ड उपयोगकर्ता प्रत्येक इंटरैक्टिव तत्व तक पहुँच सके क्योंकि वे एक दस्तावेज़ को स्थानांतरित करते हैं।यदि आप अपने वेब पेजों को सिमेंटिक मार्कअप के साथ बनाते हैं और उनके विज़ुअल लेआउट को स्टाइल करने के लिए CSS का उपयोग करते हैं, तो आपकी साइट कीबोर्ड-नेवीगेबल होनी चाहिए, लेकिन इस पहलू को मैन्युअल रूप से जांचना महत्वपूर्ण है। [कीबोर्ड नेविगेशन रणनीतियों](https://webaim.org/techniques/keyboard/) के बारे में अधिक जानें।
-
-✅ किसी भी वेब साइट पर जाएं और केवल अपने कीबोर्ड का उपयोग करके इसके माध्यम से नेविगेट करने का प्रयास करें। क्या काम करता है, क्या काम नहीं करता है? क्यों?
-
-## सारांश
-
-कुछ के लिए सुलभ वेब वास्तव में 'विश्वव्यापी वेब' नहीं है। आपके द्वारा बनाई जा सकने वाली साइटों को सुनिश्चित करने का सबसे अच्छा तरीका शुरू से ही सुलभता सर्वोत्तम प्रथाओं को शामिल करना है। जबकि अतिरिक्त चरण शामिल हैं, इन कौशल को अपने वर्कफ़्लो में शामिल करने का मतलब होगा कि आपके द्वारा बनाए गए सभी पृष्ठ सुलभ होंगे।
-
----
-
-## 🚀 चुनौती
-
-इस HTML को ले लो और इसे फिर से संभव के रूप में सुलभ होने के लिए फिर से लिखना, आपके द्वारा सीखी गई रणनीतियों को देखते हुए।
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Example
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-कई सरकारों के पास सुलभता आवश्यकताओं के संबंध में कानून हैं। अपने देश की पहुंच कानूनों पर पढ़ें। क्या शामिल है, और क्या नहीं है? एक उदाहरण है [यह सरकारी वेब साइट](https://accessibility.blog.gov.uk/).
-
-## असाइनमेंट
- 
-[एक गैर-सुलभ वेब साइट का विश्लेषण करें](assignment.hi.md)
-
-क्रेडिट:  [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) साधन द्वारा
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.id.md b/1-getting-started-lessons/3-accessibility/translations/README.id.md
deleted file mode 100644
index 7cfa95f2..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.id.md
+++ /dev/null
@@ -1,223 +0,0 @@
-# Membuat Halaman Web yang Dapat Diakses (oleh Semua Orang)
-
-![Semua Tentang Aksesibilitas](/sketchnotes/webdev101-a11y.png)
-> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuis Pra-Kuliah
-
-[Kuis pra-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=id)
-
-> Kekuatan Web ada dalam universalitasnya. Akses oleh semua orang tanpa memandang disabilitas merupakan aspek penting.
->
-> \- Sir Timothy Berners-Lee, Direktur W3C dan penemu World Wide Web
-
-Kutipan ini dengan sempurna menyoroti pentingnya membuat situs web yang dapat diakses. Sebuah aplikasi yang tidak dapat diakses oleh semua adalah menurut definisi pengecualian. Sebagai pengembang web, kami harus selalu memikirkan aksesibilitas. Dengan memiliki fokus ini sejak awal Anda akan berada di jalur yang benar untuk memastikan semua orang dapat mengakses halaman yang Anda buat. Dalam pelajaran ini, Anda akan mempelajari tentang alat yang dapat membantu Anda memastikan bahwa aset web Anda dapat diakses dan cara membangun dengan mempertimbangkan aksesibilitas.
-
-## Alat yang digunakan
-
-### Pembaca layar (Screen readers)
-
-Salah satu alat aksesibilitas paling terkenal adalah pembaca layar.
-
-[Pembaca layar](https://en.wikipedia.org/wiki/Screen_reader) adalah klien yang biasa digunakan untuk mereka yang memiliki gangguan penglihatan. Saat kami menghabiskan waktu untuk memastikan browser menyampaikan informasi yang ingin kami bagikan dengan benar, kami juga harus memastikan pembaca layar melakukan hal yang sama.
-
-Pada dasarnya, pembaca layar akan membaca halaman dari atas ke bawah dengan suara. Jika halaman Anda semuanya teks, pembaca akan menyampaikan informasi dengan cara yang mirip dengan browser. Tentu saja, halaman web jarang hanya berupa teks; mereka akan berisi tautan, grafik, warna, dan komponen visual lainnya. Perhatian harus diberikan untuk memastikan bahwa informasi ini dibaca dengan benar oleh pembaca layar.
-
-Setiap pengembang web harus membiasakan diri dengan pembaca layar. Seperti yang disorot di atas, itu adalah klien yang akan digunakan pengguna Anda. Sama seperti saat Anda memahami cara kerja browser, Anda juga harus mempelajari cara kerja pembaca layar. Untungnya, pembaca layar sudah terpasang di sebagian besar sistem operasi, dan banyak browser berisi ekstensi untuk meniru pembaca layar.
-
-✅ Coba ekstensi atau alat browser pembaca layar. Salah satu yang hanya berfungsi di Windows adalah [JAWS](https://webaim.org/articles/jaws/). Peramban (browser) juga memiliki alat bawaan yang dapat digunakan untuk tujuan ini; lihat [alat browser Edge yang berfokus pada aksesibilitas ini](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
-
-### Pemeriksa kontras
-
-Warna di situs web perlu dipilih dengan cermat untuk menjawab kebutuhan pengguna buta warna atau orang yang kesulitan melihat warna kontras rendah.
-
-✅ Uji situs web yang Anda sukai untuk penggunaan warna dengan ekstensi browser seperti [pemeriksa warna WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Apa yang Anda pelajari?
-
-### Lighthouse
-
-Di area alat pengembang di browser Anda, Anda akan menemukan alat Lighthouse. Alat ini penting untuk mendapatkan tampilan pertama aksesibilitas (serta analisis lain) dari situs web. Meskipun penting untuk tidak mengandalkan Lighthouse secara eksklusif, skor 100% sangat membantu sebagai dasar.
-
-✅ Temukan Lighthouse di panel alat pengembang browser Anda dan jalankan analisis di situs mana pun. apa yang kamu temukan?
-
-## Mendesain untuk aksesibilitas
-
-Aksesibilitas adalah topik yang relatif besar. Untuk membantu Anda, ada banyak sumber daya yang tersedia.
-
-- [Accessible U - Universitas Minnesota](https://accessibility.umn.edu/your-role/web-developers)
-
-Meskipun kami tidak dapat mencakup setiap aspek dalam membuat situs yang dapat diakses, berikut adalah beberapa prinsip inti yang ingin Anda terapkan. Mendesain halaman yang dapat diakses dari awal **selalu** lebih mudah daripada kembali ke halaman yang ada untuk membuatnya dapat diakses.
-
-## Prinsip tampilan yang bagus
-
-### Palet warna yang aman
-
-Orang melihat dunia dengan cara yang berbeda, dan ini termasuk warna. Saat memilih skema warna untuk situs Anda, Anda harus memastikannya dapat diakses oleh semua orang. Salah satu [alat hebat untuk menghasilkan palet warna adalah Color Safe](http://colorsafe.co/).
-
-✅ Identifikasi situs web yang sangat bermasalah dalam penggunaan warna. Mengapa?
-Properly highlight text
-
-### Sorot teks dengan benar
-
-Highlighting text by color, [font weight (berat font)](https://developer.mozilla.org/docs/Web/CSS/font-weight), atau [dekorasi teks lainnya](https://developer.mozilla.org/docs/Web/CSS/text-decoration) tidak secara langsung memberi tahu pembaca layar tentang kepentingannya. Sebuah kata dapat dicetak tebal karena merupakan kata kunci, atau karena kata pertama dan perancang memutuskan kata tersebut harus dicetak tebal.
-
-Saat frasa tertentu perlu disorot, gunakan elemen `<strong>` atau `<em>`. Ini akan menunjukkan kepada pembaca layar bahwa item tersebut penting.
-
-### Gunakan HTML yang benar
-
-Dengan CSS dan JavaScript, memungkinkan banyak elemen terlihat seperti jenis kontrol apa pun. `<span>` bisa digunakan untuk membuat sebuah `<button>`, dan `<b>` bisa menjadi hyperlink. Meskipun ini mungkin dianggap lebih mudah untuk diatur, ini membingungkan pembaca layar. Gunakan HTML yang sesuai saat membuat kontrol di halaman. Jika Anda menginginkan hyperlink, gunakan `<a>`. Menggunakan HTML yang tepat untuk kontrol yang tepat disebut dengan menggunakan HTML Semantik.
-
-✅ Kunjungi situs web mana saja dan lihat apakah perancang dan pengembang menggunakan HTML dengan benar. Dapatkah Anda menemukan tombol yang seharusnya menjadi tautan? Petunjuk: klik kanan dan pilih 'View Page Source' di browser Anda untuk melihat kode yang mendasarinya.
-
-### Gunakan petunjuk visual yang baik
-
-CSS menawarkan kontrol penuh atas tampilan elemen apa pun di halaman. Anda dapat membuat kotak teks tanpa kerangka atau hyperlink tanpa garis bawah. Sayangnya, menghapus petunjuk tersebut dapat membuat seseorang yang bergantung padanya lebih sulit untuk mengenali jenis kontrol tersebut.
-
-## Pentingnya teks tautan
-
-Hyperlink adalah inti untuk menavigasi web. Hasilnya, memastikan pembaca layar dapat membaca tautan dengan benar memungkinkan semua pengguna menavigasi situs Anda.
-
-### Pembaca layar dan tautan
-
-Seperti yang Anda harapkan, pembaca layar membaca teks link dengan cara yang sama seperti membaca teks lain di halaman. Dengan pemikiran ini, teks yang ditunjukkan di bawah ini mungkin terasa sangat dapat diterima.
-
-> Penguin kecil, terkadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia. [Klik disini](https://en.wikipedia.org/wiki/Little_penguin) untuk informasi lebih lanjut.
-
-> Penguin kecil, terkadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia. Kunjungi https://en.wikipedia.org/wiki/Little_penguin untuk informasi lebih lanjut.
-
-> **CATATAN** Saat akan membaca, Anda **jangan pernah** membuat tautan seperti di atas.
-
-Ingat, pembaca layar adalah antarmuka yang berbeda dari browser dengan sekumpulan fitur yang berbeda.
-
-### Masalah dengan menggunakan URL
-
-Pembaca layar membaca teks. Jika URL muncul di teks, pembaca layar akan membaca URL tersebut. Secara umum, URL tidak menyampaikan informasi yang berarti, dan dapat terdengar mengganggu. Anda mungkin pernah mengalami ini jika ponsel Anda pernah membaca pesan teks dengan URL.
-
-### Masalah dengan "klik di sini"
-
-Pembaca layar juga memiliki kemampuan untuk membaca hanya hyperlink pada halaman, sama seperti orang awam yang memindai halaman untuk mencari link. Jika teks tautan selalu "klik di sini", yang akan didengar pengguna hanyalah "klik di sini, klik di sini, klik di sini, klik di sini, klik di sini, ..." Semua tautan sekarang tidak dapat dibedakan satu sama lain.
-
-### Teks tautan yang bagus
-
-Teks tautan yang bagus menjelaskan secara singkat apa yang ada di sisi lain tautan. Dalam contoh di atas yang berbicara tentang penguin kecil, tautannya menuju ke halaman Wikipedia tentang spesies tersebut. Frasa *penguin kecil* akan menjadi teks tautan yang sempurna karena menjelaskan apa yang akan dipelajari seseorang jika mereka mengeklik tautan - penguin kecil.
-
-> [Penguin kecil](https://en.wikipedia.org/wiki/Little_penguin), kadang dikenal sebagai penguin peri, adalah penguin terkecil di dunia.
-
-✅ Jelajahi web selama beberapa menit untuk menemukan halaman yang menggunakan strategi penautan yang tidak jelas. Bandingkan mereka dengan situs lain yang ditautkan lebih baik. Apa yang kamu pelajari?
-
-#### Catatan mesin pencari
-
-Sebagai bonus tambahan untuk memastikan situs Anda dapat diakses oleh semua, Anda juga akan membantu mesin pencari menavigasi situs Anda. Mesin pencari menggunakan teks link untuk mempelajari topik halaman. Jadi, menggunakan teks tautan yang bagus membantu semua orang!
-
-### ARIA
-
-Bayangkan halaman berikut:
-
-| Produk       | Deskripsi        | Pesan        |
-| ------------ | ---------------- | ------------ |
-| Widget       | [Deskripsi]('#') | [Pesan]('#') |
-| Widget super | [Deskripsi]('#') | [Pesan]('#') |
-
-Dalam contoh ini, menduplikasi teks deskripsi dan urutan masuk akal bagi seseorang yang menggunakan browser. Namun, seseorang yang menggunakan pembaca layar hanya akan mendengar kata *deskripsi* dan *pesan* diulang tanpa konteks.
-
-Untuk mendukung jenis skenario ini, HTML mendukung sekumpulan atribut yang dikenal sebagai [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) (Aplikasi Internet Kaya yang Dapat Diakses). Atribut ini memungkinkan Anda memberikan informasi tambahan kepada pembaca layar.
-
-> **CATATAN**: Seperti banyak aspek HTML, dukungan browser dan pembaca layar mungkin berbeda. Namun, sebagian besar klien pasaran mendukung atribut ARIA.
-
-Anda dapat menggunakan `aria-label` untuk mendeskripsikan link jika format halaman tidak mengizinkan Anda. Deskripsi untuk widget dapat disetel sebagai
-
-``` html
-<a href="#" aria-label="Deskripsi widget">deskripsi</a>
-```
-
-✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi terkadang tidak ada padanan semantik untuk berbagai widget HTML. Contoh yang bagus adalah Progressbar. Tidak ada HTML yang setara untuk bilah kemajuan, jadi Anda mengidentifikasi `<div>` generik untuk elemen ini dengan peran yang tepat dan nilai aria. [Dokumentasi MDN tentang ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) berisi informasi yang lebih berguna.
-
-```html
-<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-</div>
-```
-
-## Gambar-gambar
-
-Tak perlu dikatakan pembaca layar tidak dapat secara otomatis membaca apa yang ada dalam gambar. Memastikan gambar dapat diakses tidak membutuhkan banyak pekerjaan - itulah yang dimaksud dengan atribut `alt`. Semua gambar harus memiliki `alt` untuk mendeskripsikan gambar tersebut.
-
-✅ Seperti yang Anda duga, mesin telusur juga tidak dapat memahami apa yang ada di gambar. Mereka juga menggunakan teks alt. Jadi sekali lagi, memastikan halaman Anda dapat diakses memberikan bonus tambahan!
-
-## Keyboard
-
-Beberapa pengguna tidak dapat menggunakan mouse atau trackpad, sebagai gantinya mengandalkan interaksi keyboard untuk tab dari satu elemen ke elemen berikutnya. Situs web Anda harus menyajikan konten Anda dalam urutan logis sehingga keyboard dapat mengakses setiap elemen saat pengguna bergerak ke bawah dokumen. Jika Anda membangun halaman web Anda dengan markup semantik dan menggunakan CSS untuk mengatur tata letak visualnya, situs Anda harus dapat dinavigasi dengan keyboard, tetapi penting untuk menguji aspek ini secara manual. Pelajari lebih lanjut tentang [strategi navigasi keyboard](https://webaim.org/techniques/keyboard/).
-
-✅ Buka situs web mana pun dan coba menavigasi hanya dengan menggunakan tombol tab Anda. Apa yang berhasil, apa yang tidak berhasil? Mengapa?
-
-## Ringkasan
-
-Web yang dapat diakses oleh beberapa orang bukanlah benar-benar 'web di seluruh dunia'. Cara terbaik untuk memastikan situs yang Anda buat dapat diakses adalah dengan menerapkan praktik terbaik aksesibilitas sejak awal. Meskipun ada langkah tambahan yang terlibat, menggabungkan keterampilan ini ke dalam alur kerja Anda sekarang berarti semua halaman yang Anda buat dapat diakses.
-
----
-
-## 🚀 Tantangan
-
-Ambil HTML ini dan tulis ulang agar dapat diakses semaksimal mungkin, dengan strategi yang Anda pelajari.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Example
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## Kuis Pasca Kuliah
-
-[Kuis pasca kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=id)
-
-## Review & Belajar Mandiri
-
-Banyak pemerintah memiliki undang-undang tentang persyaratan aksesibilitas. Baca tentang undang-undang aksesibilitas negara asal Anda. Apa yang tercakup, dan apa yang tidak? Contohnya adalah [situs web pemerintah ini](https://accessibility.blog.gov.uk/).
-
-## Tugas
-
-[Analisis situs web yang tidak dapat diakses](assignment.id.md)
-
-Kredit: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) oleh Instrumen
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.it.md b/1-getting-started-lessons/3-accessibility/translations/README.it.md
deleted file mode 100644
index 436b28ea..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.it.md
+++ /dev/null
@@ -1,228 +0,0 @@
-# Creare Pagine Web Accessibili
-
-![Tutto quanto riguarda l'Accessibilità](/sketchnotes/webdev101-a11y.png)
-> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pre-Lezione
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=it)
-
-> La forza del Web è nella usa universalità. L'accesso garantito a tutti a prescindere dalla disabilità è us aspetto essenziale.
->
-> \- Sir Timothy Berners-Lee, Direttore W3C e Inventore del World Wide Web
-
-Questa frase evidenzia perfettamente l'importanza di crerare siti web accessibili. Una applicazione che non può essere acceduta da tutti diventa per definizione esclusivista. Come sviluppatori web si dovrebbe sempre tenere a mente l'accessibilità. Focalizzandosi su questo fin dal principio si sarà sulla buona strada per garantire a chiunque l'accesso alle pagine che si sono create. In questa lezione, si apprenderanno gli strumenti che possono aiutare a rendere le proprie risorse web accessibili e che siano costruite con in mente l'accessibilità.
-
-## Strumenti da usare
-
-### Lettori di schermo
-
-Uno dei più noti strumenti di accessibilità sono i lettori di schermo (screen reader)
-
-I [lettori di schermo](https://www.wikiwand.com/it/Screen_reader) sono strumenti client comunemente usati per persone con menomazioni visive. Poiché dedichiamo tempo a garantire che un browser trasmetta correttamente le informazioni che desideriamo condividere, dobbiamo anche assicurarci che uno screen reader faccia lo stesso.
-
-Nella sua forma più elementare, uno screen reader leggerà una pagina dall'alto verso il basso in modo udibile. Se una pagina è tutta testo, il lettore trasmetterà le informazioni in modo simile a un browser. Naturalmente, le pagine web sono raramente puramente testuali; contengono collegamenti, grafica, colore e altri componenti visivi. È necessario prestare attenzione per garantire che queste informazioni vengano lette correttamente da uno screen reader.
-
-Ogni sviluppatore web dovrebbe acquisire familiarità con uno screen reader. Come evidenziato sopra, è il client che gli utenti dello sviluppatore  utilizzeranno. Allo stesso modo in cui si ha familiarità con il funzionamento di un browser, si dovrebbe imparare come funziona uno screen reader. Fortunatamente, gli screen reader sono integrati nella maggior parte dei sistemi operativi.
-
-Alcuni browser hanno anche strumenti incorporati ed estensioni che possono leggere il testo ad alta voce o persino fornire alcune funzionalità di navigazione di base, come [questi strumenti orientati all'accessibilità del browser Edge](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features) . Anche questi sono importanti strumenti di accessibilità, ma funzionano in modo molto diverso dagli screen reader e non dovrebbero essere scambiati per strumenti di test per uno screen reader.
-
-✅ Provare un lettore di schermo e un lettore di testo del browser. In Windows, l'[Assistente vocale](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) (Narrator) è incluso per impostazione predefinita e anche [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) possono essere installati Su macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) è installato per impostazione predefinita.
-
-### Zoom
-
-Un altro strumento comunemente utilizzato dalle persone con problemi di vista è lo zoom. Il tipo più semplice di zoom è lo zoom statico, controllato tramite `Control + segno più (+)` o diminuendo la risoluzione dello schermo. Questo tipo di zoom provoca il ridimensionamento dell'intera pagina, quindi l'utilizzo [di una progettazione responsive](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) della pagina è importante per fornire una buona esperienza utente a livelli di zoom aumentati.
-
-Un altro tipo di zoom si basa su un software specializzato per ingrandire un'area dello schermo e fare una panoramica, proprio come usare una vera lente di ingrandimento. Su Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) è integrato e   [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) è un software di ingrandimento di terze parti con più funzionalità e una base di utenti più ampia. Sia macOS che iOS hanno un software di ingrandimento integrato chiamato [Zoom](https://www.apple.com/accessibility/mac/vision/).
-
-### Verificatori di contrasto
-
-I colori sui siti web devono essere scelti con cura per rispondere alle esigenze degli utenti daltonici o delle persone che hanno difficoltà a vedere i colori a basso contrasto.
-
-✅ Provare un sito web che  piace usare per l'utilizzo del colore con un'estensione del browser come [il controllo del colore WCAG](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Cosa si è appreso?
-
-### Lo strumento Faro (Lighthouse)
-
-Nell'area degli strumenti per sviluppatori del browser, si troverà lo strumento Lighthouse. Questo strumento è importante per ottenere una prima visione dell'accessibilità (così come altre analisi) di un sito web. Sebbene sia importante non fare affidamento esclusivamente su Lighthouse, un punteggio del 100% è molto utile come riferimento.
-
-✅ Trovare Lighthouse nel pannello degli strumenti per sviluppatori del proprio browser ed eseguire un'analisi su qualsiasi sito. Cosa si è scoperto?
-
-## Progettare per l'accessibilità
-
-L'accessibilità è un argomento relativamente ampio. A supporto, sono disponibili numerose risorse.
-
-- [Accessibile U - Università del Minnesota](https://accessibility.umn.edu/your-role/web-developers)
-
-Sebbene non si sarà in grado di coprire ogni aspetto della creazione di siti accessibili, di seguito sono riportati alcuni dei principi fondamentali che si vorranno 	implementare. Progettare una pagina accessibile dall'inizio è **sempre** più facile che tornare a una pagina esistente per renderla accessibile.
-
-## Buoni principi di visualizzazione
-
-### Tavolozze di colori sicuri
-
-Le persone vedono il mondo in modi diversi, e questo include i colori. Quando si seleziona una combinazione di colori per il proprio sito, ci si dovrebbe assicurare che sia accessibile a tutti. Un ottimo [strumento per generare tavolozze di colori è Color Safe](http://colorsafe.co/).
-
-✅ Identificare un sito web che è molto problematico nel suo uso del colore. Perché?
-
-### Usa l'HTML corretto
-
-Con CSS e JavaScript è possibile far sembrare qualunque elemento come un qualsiasi tipo di controllo. `<span>` potrebbe essere usato per creare un  `<button>`, e `<b>` potrebbe diventare un collegamento ipertestuale. Sebbene questo possa essere considerato più facile da definire, non trasmette nulla a uno screen reader. Occorre usare l'HTML appropriato quando si creano i controlli su una pagina. Se si vuole un collegamento ipertestuale usare `<a>`. L'utilizzo dell'HTML corretto per il controllo corretto è chiamato fare uso dell'HTML semantico.
-
-✅ Portarsi su qualsiasi sito web e controllare se i progettisti e gli sviluppatori stanno usando l'HTML correttamente. Si riesce a trovare un pulsante che dovrebbe essere un collegamento? Suggerimento: fare clic con il tasto destro e scegliere "Visualizza sorgente pagina" nel browser per esaminare il codice relativo.
-
-### Creare una gerarchia descrittiva delle intestazioni
-
-Gli utenti di screen reader [fanno molto affidamento sui titoli](https://webaim.org/projects/screenreadersurvey8/#finding) per trovare informazioni e navigare in una pagina. La scrittura di contenuto di intestazione descrittiva e l'utilizzo di tag di intestazione semantici sono importanti per creare un sito facilmente navigabile per gli utenti di lettori di schermo.
-
-### Usare buoni indizi visivi
-
-CSS offre il controllo completo sull'aspetto di qualsiasi elemento in una pagina. È possibile creare caselle di testo senza un contorno o collegamenti ipertestuali senza una sottolineatura. Sfortunatamente rimuovere questi indizi può rendere più difficile per qualcuno che dipende da loro essere in grado di riconoscere il tipo di controllo.
-
-## L'importanza del testo del collegamento
-
-I collegamenti ipertestuali sono fondamentali per la navigazione sul Web. Di conseguenza, assicurarsi che uno screen reader possa leggere correttamente i collegamenti consente a tutti gli utenti di navigare nel proprio sito.
-
-### Lettori di schermo e collegamenti
-
-Come ci si potrebbe aspettare, gli screen reader leggono il testo del collegamento nello stesso modo in cui leggono qualsiasi altro testo nella pagina. Tenedo presente questo, il testo mostrato di seguito potrebbe sembrare perfettamente accettabile.
-
-> Il pinguino minore, a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo. [Fare clic qui](https://en.wikipedia.org/wiki/Little_penguin) per ulteriori informazioni.
-
-> Il Il pinguino minore, a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo. Visitare https://en.wikipedia.org/wiki/Little_penguin per ulteriori informazioni.
-
-> **NOTA** Come si leggerà di seguito, non si dovrebbero **mai** creare collegamenti che assomigliano all'esempio precedente
-
-Si ricordi che gli screen reader sono un'interfaccia diversa dai browser con un diverso insieme di funzionalità.
-
-### Il problema con l'utilizzo dell'URL
-
-I lettori di schermo leggono il testo. Se nel testo viene visualizzato un URL, lo screen reader leggerà l'URL. In generale, l'URL non trasmette informazioni significative e può sembrare al suono fastidioso. Si potrebbe averlo riscontrato se il proprio telefono ha mai letto in modo udibile un messaggio di testo con un URL.
-
-### Il problema con "clicca qui"
-
-I lettori di schermo hanno anche la capacità di leggere solo i collegamenti ipertestuali su una pagina, molto nello stesso modo in cui una persona vedente scorrerebbe una pagina per cercare collegamenti. Se il testo del link è sempre "clicca qui", tutto ciò che l'utente sentirà sarà "clicca qui, clicca qui, clicca qui, clicca qui, clicca qui, ..." Tutti i collegamenti sono ora indistinguibili l'uno dall'altro.
-
-### Buon testo del collegamento
-
-Un buon testo del collegamento descrive brevemente cosa c'è dall'altra parte del collegamento. Nell'esempio sopra che parla di piccoli pinguini, il collegamento è alla pagina di Wikipedia sulla specie. La frase *piccoli pinguini* renderebbe il testo del collegamento perfetto in quanto chiarisce ciò che qualcuno imparerà se fa clic sul collegamento: piccoli pinguini.
-
-> Il [pinguino minore](https://www.wikiwand.com/it/Eudyptula_minor), a volte noto come il pinguino delle fate, è il più piccolo pinguino del mondo.
-
-✅ Navigare sul Web per alcuni minuti per trovare pagine che utilizzano oscure strategie di collegamento. Confrontarle con altri siti con collegamenti migliori. Cosa si è appreso?
-
-#### Note sui motori di ricerca
-
-Come bonus aggiuntivo per garantire che il proprio sito sia accessibile a tutti, si dovranno aiutare anche i motori di ricerca a navigare nel sito. I motori di ricerca utilizzano il testo del collegamento per apprendere gli argomenti delle pagine. Quindi usare un buon testo per i link aiuta tutti!
-
-### ARIA
-
-Si Immagini la pagina seguente:
-
-| Prodotto         | Descrizione        | Ordine        |
-| ---------------- | ------------------ | ------------- |
-| Widget           | [Descrizione]('#') | [Ordine]('#') |
-| DMX Super Widget | [Descrizione]('#') | [Ordine]('#') |
-
-In questo esempio, la duplicazione del testo della descrizione e dell'ordine ha senso per qualcuno che utilizza un browser. Tuttavia, qualcuno che utilizza uno screen reader ascolterebbe solo le parole *descrizione* e *ordine* ripetute senza contesto.
-
-Per supportare questi tipi di scenari, HTML supporta una serie di attributi noti come [ARIA (Accessible Rich Internet Applications)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Questi attributi consentono di fornire informazioni aggiuntive agli screen reader.
-
-> **NOTA**: come molti aspetti dell'HTML, il supporto del browser e dello screen reader può variare. Tuttavia, la maggior parte dei client principali supporta gli attributi ARIA.
-
-E' possibile utilizzare `aria-label` per descrivere il collegamento quando il formato della pagina non lo consente. La descrizione del widget potrebbe essere impostata come
-
-```html
-<a href="#" aria-label="Widget description">description</a>
-```
-
-✅ In generale, l'uso del markup semantico come descritto sopra sostituisce l'uso di ARIA, ma a volte non esiste un equivalente semantico per diversi widget HTML. Un buon esempio è una struttura ad albero. Non esiste un equivalente HTML per una struttura ad albero, quindi si identifica il generico  `<div>` per questo elemento con un ruolo e valori aria appropriati. La [documentazione MDN su ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contiene ulteriori utili informazioni.
-
-```html
-<h2 id="tree-label">File Viewer</h2>
-<div role="tree" aria-labelledby="tree-label">
-  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
-</div>
-```
-
-## Immagini
-
-Inutile dire che gli screen reader non sono in grado di leggere automaticamente il contenuto di un'immagine. Assicurarsi che le immagini siano accessibili non richiede molto lavoro: è ciò di cui tratta l'attributo `alt` . Tutte le immagini significative dovrebbero avere un `alt` per descrivere cosa sono. Le immagini che sono puramente decorative dovrebbero avere il loro attributo `alt` impostato su una stringa vuota: `alt = ""`. Ciò impedisce ai lettori di schermo di annunciare inutilmente l'immagine decorativa.
-
-✅ Come ci si potrebbe aspettare, anche i motori di ricerca non sono in grado di capire cosa c'è in un'immagine. Anch'essi usano il testo alternativo. Quindi, ancora una volta, assicurandosi che la propria pagina sia accessibile fornisce bonus aggiuntivi!
-
-## La tastiera
-
-Alcuni utenti non sono in grado di utilizzare un mouse o un trackpad, affidandosi invece alle interazioni della tastiera per passare da un elemento all'altro. È importante che il proprio sito web presenti i contenuti in ordine logico in modo che un utente usando la tastiera possa accedere a ogni elemento interattivo mentre si sposta nel flusso di un documento. Se si creano le proprie pagine web con markup semantico e si utilizza CSS per definire lo stile del layout visivo, il proprio sito dovrebbe essere navigabile da tastiera, ma è importante testare manualmente questo aspetto. Per saperne di più su ulteriori informazioni sulle [strategie di navigazione da tastiera](https://webaim.org/techniques/keyboard/).
-
-✅ Andare su qualsiasi sito web e provare a navigarlo utilizzando solo la tastiera. Cos'è che funziona e cos'è che non funziona? Perché?
-
-## Riepilogo
-
-Un Web accessibile ad alcuni non è un vero "world-wide web". Il modo migliore per garantire che i siti che si creano siano accessibili è incorporare le migliori pratiche di accessibilità sin dall'inizio. Sebbene siano necessari passaggi aggiuntivi, incorporare queste abilità nel flusso di lavoro ora significa che tutte le pagine che si creeranno  saranno accessibili.
-
----
-
-## 🚀 Sfida
-
-Prendere questo HTML e riscriverlo per essere il più accessibile possibile, date le strategie che sono state apprese.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Example
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum.
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## Quiz post-lezione
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=it)
-
-## Revisione e auto apprendimento
-
-Molti governi hanno leggi riguardanti i requisiti di accessibilità. Consultare le leggi sull'accessibilità del proprio paese d'origine. Cosa è coperto e cosa no? Un esempio è [questo sito web del governo inglese](https://accessibility.blog.gov.uk/).
-
-## Assegnazione
-
-[Analizzare un sito web non accessibile](assignment.it.md)
-
-Crediti: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) da Instrument
\ No newline at end of file
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ja.md b/1-getting-started-lessons/3-accessibility/translations/README.ja.md
deleted file mode 100644
index 8fe0ab87..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.ja.md
+++ /dev/null
@@ -1,229 +0,0 @@
-# アクセシブルな Web ページの作成
-
-![All About Accessibility](/sketchnotes/webdev101-a11y.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## レッスン前の小テスト
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=ja)
-
-> Web の力は、その普遍性にあります。障害の有無に関わらず、誰もがアクセスできることが重要です。
->
-> \- Sir Timothy Berners-Lee, W3C 理事、World Wide Web の発明者
-
-この引用は、アクセシブルな Web サイトを作成することの重要性を完璧に強調しています。すべての人がアクセスできないアプリケーションは、定義上、排除的なものです。Web 開発者として、私たちは常にアクセシビリティを念頭に置くべきです。最初からこのことに焦点を当てることで、あなたが作成したページに誰もがアクセスできるようにすることができるようになります。このレッスンでは、Web 資産がアクセシブルであることを確実にするのに役立つツールと、アクセシビリティを念頭に置いて構築する方法について学びます。
-
-## 使用するツール
-
-### スクリーンリーダー
-
-よく知られているアクセシビリティツールの一つにスクリーンリーダーがあります。
-
-[スクリーンリーダー](https://ja.wikipedia.org/wiki/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%83%AA%E3%83%BC%E3%83%80%E3%83%BC)は、視覚障害のある方のために一般的に使用されているクライアントです。ブラウザが共有したい情報を適切に伝えることに時間を費やしているので、スクリーンリーダーも同じように情報を伝えるようにしなければなりません。
-
-スクリーンリーダーは、最も基本的には、ページを上から下まで音声で読み上げます。あなたのページがすべてテキストである場合、リーダーはブラウザと同様の方法で情報を伝えます。もちろん、ウェブページが純粋なテキストであることはほとんどなく、リンク、グラフィック、カラー、その他の視覚的な要素が含まれます。これらの情報がスクリーンリーダーに正しく読まれるように注意を払わなければなりません。
-
-すべてのウェブ開発者は、スクリーンリーダーに慣れる必要があります。上で強調したように、ユーザーが利用するのはクライアントです。ブラウザの操作方法を熟知しているのと同じように、スクリーンリーダーの操作方法を学ぶべきです。幸いなことに、スクリーンリーダーはほとんどのオペレーティングシステムに組み込まれています。
-
-ブラウザの中には、テキストを音読したり、基本的なナビゲーション機能を提供したりするツールや拡張機能を内蔵しているものもありますが、[これらはアクセシビリティに焦点を当てたEdgeブラウザツール](https://support.microsoft.com/ja-jp/microsoft-edge/microsoft-edge-%E3%81%AE%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E6%A9%9F%E8%83%BD-4c696192-338e-9465-b2cd-bd9b698ad19a)のようなものです。これらも重要なアクセシビリティツールですが、スクリーンリーダーとは機能が大きく異なるため、スクリーンリーダーのテストツールと勘違いしてはいけません。
-
-✅ スクリーンリーダーやブラウザのテキストリーダーを試してみましょう。Windows ではデフォルトで [Narrator](https://support.microsoft.com/ja-jp/windows/%E3%83%8A%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E3%81%AE%E8%A9%B3%E7%B4%B0%E3%81%AA%E3%82%AC%E3%82%A4%E3%83%89-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) が搭載されており、[JAWS](https://webaim.org/articles/jaws/) や [NVDA](https://www.nvaccess.org/about-nvda/) もインストールできます。macOS と iOS では、[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) がデフォルトでインストールされています。
-
-### ズーム
-
-視覚障害のある人がよく使うもう一つのツールは、ズームです。ズームの最も基本的なタイプは静的ズームで、`コントロール + プラス記号 (+)` で制御するか、画面の解像度を下げることで制御します。このタイプのズームではページ全体のサイズが変更されるため、[レスポンシブデザイン](https://developer.mozilla.org/ja/docs/Learn/CSS/CSS_layout/Responsive_Design)を使用することは、ズームレベルを上げても良いユーザー体験を提供するために重要です。
-
-もう一つのタイプのズームは、特殊なソフトウェアを使用して、実際の虫眼鏡を使用するのと同じように、画面のある領域を拡大してパンすることを目的としています。Windows では、[Magnifier](https://support.microsoft.com/ja-jp/windows/%E7%94%BB%E9%9D%A2%E4%B8%8A%E3%81%AE%E9%A0%85%E7%9B%AE%E3%82%92%E8%A6%8B%E3%82%84%E3%81%99%E3%81%8F%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AB-%E6%8B%A1%E5%A4%A7%E9%8F%A1%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B-414948ba-8b1c-d3bd-8615-0e5e32204198) が内蔵されており、[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) は、より多くの機能を持ち、より多くのユーザーベースを持つサードパーティ製の拡大表示ソフトウェアです。macOS と iOS の両方には、[Zoom](https://www.apple.com/accessibility/mac/vision/) と呼ばれる拡大鏡ソフトが内蔵されています。
-
-### コントラストチェッカー
-
-Webサイトの色は、色覚障害者やコントラストの低い色が見えにくい人のニーズに応えるために、慎重に選ぶ必要があります。
-
-✅ [WCAG のカラーチェッカー](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=ja-JP)などのブラウザ拡張機能を使って、色使いを楽しむ Web サイトをテストしてみましょう。何がわかりますか？
-
-### Lighthouse
-
-ブラウザの開発者ツールエリアには、Lighthouse ツールがあります。このツールは、Web サイトのアクセシビリティ (他の分析と同様に) を最初に見るために重要です。Lighthouse だけに頼らないことが重要ですが、100% のスコアはベースラインとして非常に役立ちます。
-
-✅ ブラウザの開発者ツールパネルで Lighthouse を見つけて、任意のサイトで分析を実行してください。何を発見しましたか？
-
-## アクセシビリティを考慮した設計
-
-アクセシビリティは比較的大きなテーマです。あなたを助けるために、多くのリソースが用意されています。
-
-- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
-
-アクセシブルなサイトを作成するためのすべての側面をカバーすることはできませんが、以下は、あなたが実装したいと思う中核的な原則のいくつかです。アクセシブルなページを最初からデザインすることは、既存のページに戻ってアクセシブルにするよりも**常に**簡単です。
-
-## 良い表示の原則
-
-### カラーセーフパレット
-
-人はさまざまな方法で世界を見ていますが、これには色も含まれます。サイトの配色を選択する際には、誰もがアクセスできるようにする必要があります。[カラーパレットを生成するための素晴らしいツールの1つが Color Safe ](http://colorsafe.co/)です。
-
-✅ 色の使用に非常に問題のある Web サイトを特定してください。なぜですか？
-
-### 正しい HTML を使用する
-
-CSS と JavaScript を使えば、あらゆる要素をあらゆるタイプのコントロールのように見せることができます。`<span>` を使って `<button>` を作成したり、`<b>` をハイパーリンクにしたりすることができます。この方がスタイルを整えるのは簡単だと思われるかもしれませんが、スクリーンリーダーには何も伝わりません。ページ上でコントロールを作成する際には、適切な HTML を使用してください。ハイパーリンクが必要な場合は、`<a>` を使用します。適切なコントロールに適切なHTML を使うことをセマンティック HTML の利用といいます。
-
-✅ 任意の Web サイトに行って、デザイナーや開発者が HTML を適切に使用しているかどうかを確認してください。リンクであるはずのボタンを見つけることができますか？ヒント: 右クリックして、ブラウザで「View Page Source」を選択して、基礎となるコードを見てみましょう。
-
-### 記述的な見出しの階層を作成する
-
-スクリーンリーダーのユーザーは、情報を見つけたり、ページをナビゲートしたりするために、[見出しに大きく依存しています](https://webaim.org/projects/screenreadersurvey8/#finding)。記述的な見出しコンテンツを書き、意味的な見出しタグを使用することは、スクリーンリーダーのユーザーがナビゲートしやすいサイトを作成するために重要です。
-
-### 視覚的な手がかりを上手に使う
-
-CSS は、ページ上のあらゆる要素の外観を完全に制御することができます。アウトラインのないテキストボックスやアンダーラインのないハイパーリンクを作成することができます。残念ながら、これらの手がかりを削除すると、それらに依存している人がコントロールの種類を認識することが難しくなる可能性があります。
-
-## リンクテキストの重要性
-
-ハイパーリンクは、ウェブをナビゲートするための核となるものです。その結果、スクリーンリーダーがリンクを適切に読めるようにすることで、すべてのユーザーがサイトをナビゲートできるようになります。
-
-### スクリーンリーダーとリンク
-
-ご想像の通り、スクリーンリーダーはリンクテキストをページ上の他のテキストと同じように読みます。このことを念頭に置いて、以下に示すテキストは完全に許容できると感じるかもしれません。
-
-> 妖精ペンギンと呼ばれることもあるコガタペンギンは、世界最小のペンギンです。[詳しくはこちら](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3) をご覧ください。
-
-> 妖精ペンギンと呼ばれることもあるリトルペンギンは、世界最小のペンギンです。詳しくは https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3 をご覧ください。
-
-> **注** 今から読むように、上記のようなリンクは絶対に作っては**いけません**。
-
-スクリーンリーダーは、ブラウザとは異なる機能のセットを持つ別のインターフェイスであることを覚えておいてください。
-
-### URL を使用する場合の問題点
-
-スクリーンリーダーはテキストを読みます。本文中に URL が表示されている場合、スクリーンリーダーはその URL を読みます。一般的に、URL は意味のある情報を伝えず、迷惑に聞こえることがあります。あなたの携帯電話が URL 付きのテキストメッセージを音声で読んだことがある場合は、このような経験をしたことがあるかもしれません。
-
-### "こちらをクリック" の問題点
-
-スクリーンリーダーは、目の不自由な人がページをスキャンしてリンクを探すのと同じように、ページ上のハイパーリンクだけを読む機能も持っています。リンクテキストが常に「ここをクリックしてください」となっている場合、ユーザーは「ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、ここをクリックしてください、...」としか聞こえません。すべてのリンクは互いに区別がつかなくなりました。
-
-### 良いリンクテキスト
-
-良いリンクの文章は、リンクの向こう側に何があるのかを簡潔に説明します。上記の例では、コガタペンギンについて話していますが、リンク先はその種についての Wikipedia のページになっています。*コガタペンギン* というフレーズは、リンクをクリックした場合に何を学ぶのかが明確になるので、完璧なリンクテキストになります。
-
-> 妖精ペンギンとして知られることもある[コガタペンギン](https://ja.wikipedia.org/wiki/%E3%82%B3%E3%82%AC%E3%82%BF%E3%83%9A%E3%83%B3%E3%82%AE%E3%83%B3)は、世界で最も小さいペンギンです。
-
-✅ 数分間 Web サーフィンをして、不明瞭なリンク戦略を使用しているページを見つけましょう。他の、より良いリンクを貼られているサイトと比較してみてください。あなたは何を学びますか？
-
-#### 検索エンジンの注意事項
-
-あなたのサイトが誰でもアクセスできるようにすることで、検索エンジンがあなたのサイトをナビゲートするのにも役立ちます。検索エンジンは、ページのトピックを学習するためにリンクテキストを使用します。ですから、良いリンクテキストを使用することは誰にでも役立ちます。
-
-### ARIA
-
-次のページを想像してみてください。
-
-| Product      | Description        | Order        |
-| ------------ | ------------------ | ------------ |
-| Widget       | [Description]('#') | [Order]('#') |
-| Super widget | [Description]('#') | [Order]('#') |
-
-この例では、description と order のテキストを複製しても、ブラウザを使っている人にとっては意味があります。しかし、スクリーン・リーダーを使っている人には、文脈なしに繰り返される *description* と *order* という単語しか聞こえません。
-
-これらのタイプのシナリオをサポートするために、HTML は[アクセシブル・リッチ・インターネット・アプリケーション (ARIA)](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA)として知られている一連の属性をサポートしています。これらの属性により、スクリーンリーダーに追加の情報を提供することができます。
-
-> **NOTE**: HTML の多くの側面と同様に、ブラウザやスクリーンリーダーのサポートは異なるかもしれません。しかし、ほとんどのメインラインのクライアントは ARIA 属性をサポートしています。
-
-ページのフォーマットでリンクを記述できない場合、`aria-label` を使ってリンクを記述することができます。ウィジェットの説明は
-
-``` html
-<a href="#" aria-label="Widget description">description</a>
-```
-
-✅ 一般的には、上記のようにセマンティックマークアップを使用することで ARIA の使用が優先されますが、様々な HTML ウィジェットにはセマンティックに相当するものが存在しないことがあります。良い例がツリーです。ツリーには HTML と同等のものがないので、適切なロールとアリアの値でこの要素の一般的な `<div>` を識別します。[ARIA に関する MDN のドキュメント](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA)には、より有用な情報が含まれています。
-
-```html
-<h2 id="tree-label">File Viewer</h2>
-<div role="tree" aria-labelledby="tree-label">
-  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
-</div>
-```
-
-## 画像
-
-言うまでもなく、スクリーンリーダーは画像の中にあるものを自動的に読み取ることができません。画像を確実にアクセスできるようにするには、それほどの労力は必要ありません - それが `alt` 属性のすべてです。意味のある画像はすべて、その画像が何であるかを説明するための `alt` を持つべきです。
-純粋に装飾的な画像は `alt` 属性に空の文字列を設定しなければなりません。`alt=""`です。これにより、スクリーンリーダが装飾的な画像を不必要に知らせることを防ぐことができます。
-
-✅ さすがに検索エンジンも画像の中身を理解することができません。彼らもまた、alt　テキストを使用しています。ですから、もう一度言いますが、あなたのページがアクセス可能であることを確認することは、追加のボーナスを提供します。
-
-## キーボード
-
-マウスやトラックパッドを使用できないユーザーの中には、1つの要素から次の要素へとタブを移動するためにキーボードのインタラクションに頼っている人もいます。キーボードを使用するユーザーがドキュメントの下に移動しながら各インタラクティブ要素にアクセスできるように、Web サイトのコンテンツを論理的な順序で表示することが重要です。Web ページをセマンティック マークアップで構築し、CSS を使用して視覚的なレイアウトをスタイル化している場合、サイトはキーボード ナビゲーションが可能なはずですが、この点を手動でテストすることが重要です。[キーボードナビゲーション戦略](https://webaim.org/techniques/keyboard/)の詳細については、こちらをご覧ください。
-
-✅ 任意のウェブサイトにアクセスして、キーボードだけを使ってナビゲートしてみてください。何がうまくいき、何がうまくいかないのでしょうか？なぜでしょうか？
-
-## まとめ
-
-ある人にとってアクセシブルな Web は、真の意味での「ワールドワイドな Web」ではありません。作成するサイトがアクセシブルであることを保証する最善の方法は、アクセシビリティのベストプラクティスを最初から取り入れることです。余分なステップがありますが、これらのスキルをワークフローに組み込むことで、作成するすべてのページがアクセシブルになることを意味します。
-
----
-
-## 🚀 チャレンジ
-
-この HTML を手に取り、学んだ戦略を踏まえて、できるだけアクセスしやすいように書き換えてください。
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Example
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## レッスン後の小テスト
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=ja)
-
-## 復習と自己学習
-
-多くの政府には、アクセシビリティの要件に関する法律があります。あなたの国のアクセシビリティに関する法律をお読みください。何が適用され、何が適用されないのか？例としては、[この政府の Web サイト](https://accessibility.blog.gov.uk/)があります。
-
-## 課題
- 
-[アクセスできない Web サイトを分析する](assignment.ja.md)
-
-Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ko.md b/1-getting-started-lessons/3-accessibility/translations/README.ko.md
deleted file mode 100644
index dc6c4f91..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.ko.md
+++ /dev/null
@@ -1,220 +0,0 @@
-# 접근 가능한 웹 페이지 생성하기
-
-![All About Accessibility](/sketchnotes/webdev101-a11y.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 강의 전 퀴즈
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=ko)
-
-> 웹의 힘은 보편성에 있습니다. 장애에 관계없이 모든 사람이 접근하는 것은 필수 요소입니다.
->
-> \- Sir Timothy Berners-Lee, W3C Director and inventor of the World Wide Web
-
-이 인용문은 접근 가능한 웹 사이트를 만든다는 것의 중요성을 완벽하게 강조합니다. 모든 사람이 접근할 수 없는 애플리케이션은 정의에 따라 제외됩니다. 웹 개발자로서 우리는 항상 접근성을 염두에 두어야합니다. 처음부터 이 곳에 초점을 두면 모든 사람이 자신이 만든 페이지에 접근할 수 있도록 하는 데 도움이 됩니다. 이 강의에서는 웹 어셋에 접근할 수 있는지 확인하는 데 도움이 되는 도구와 접근성을 염두에 두고 빌드하는 방법에 대해 알아 봅니다.
-
-## 사용 도구
-
-### 스크린 리더
-
-가장 잘 알려진 접근성 도구 중 하나는 스크린 리더입니다.
-
-[스크린 리더](https://en.wikipedia.org/wiki/Screen_reader)는 시각 장애가 있는 사람들을 위해 일반적으로 사용되는 클라이언트입니다. 브라우저에서 공유하려는 정보를 올바르게 전달하는지 확인하는 데 시간을 할애 할 때 스크린 리더도 동일한 작업을 수행하도록 해야합니다.
-
-가장 기본적인 스크린 리더는 페이지를 위에서 아래로 소리내며 읽습니다. 페이지가 모두 텍스트인 경우 리더는 브라우저와 유사한 방식으로 정보를 전달합니다. 물론 웹 페이지는 문자 그대로가 아닌 텍스트가 있습니다. 여기에는 링크, 그래픽, 색상 및 기타 시각적 구성 요소가 포함됩니다. 스크린 리더가 정보를 올바르게 읽을 수 있도록 주의를 기울여야 합니다.
-
-모든 웹 개발자는 스크린 리더에 익숙해야합니다. 위에서 강조한 것처럼 사용자가 활용할 클라이언트입니다. 브라우저가 작동하는 방식에 익숙한 것과 마찬가지로 스크린 리더가 작동하는 방식을 배워야합니다. 다행히 스크린 리더는 대부분의 운영체제에 내장되어 있으며, 많은 브라우저에는 스크린 리더를 모방하는 확장이 포함되어 있습니다.
-
-✅ 스크린 리더 브라우저 확장이나 도구를 시도해보세요.[JAWS](https://webaim.org/articles/jaws/)는 윈도우에서만 작동합니다. 브라우저에는 이러한 목적으로 사용할 수 있는 내장 도구도 있습니다; [these accessibility-focused Edge browser tools](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features) 확인합니다.
-
-### Contrast checkers
-
-웹 사이트의 색상은 색맹 혹은 저대비 색상을 보기 어려운 사람들의 요구에 맞게 신중하게 선택해야 합니다.
-
-✅ [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US)와 같은 브라우저 확장 프로그램을 사용하여 어떤 색상을 쓰는 지 웹 사이트를 테스트합니다. 무엇을 배울 수 있나요?
-
-### Lighthouse
-
-브라우저의 개발자 도구에서 Lighthouse 도구를 찾을 수 있습니다. 이 도구는 웹 사이트의 접근성(기타 분석)을 처음으로 파악하는 데 중요합니다. Lighthouse에만 의존하지 않는 것은 중요하지만, 100점을 기준으로 보면 매우 유용합니다.
-
-✅ 브라우저의 개발자 도구 패널에서 Lighthouse를 찾아 모든 사이트에서 분석을 실행하세요. 무엇을 발견했나요?
-
-## 접근성을 위한 디자인
-
-접근성은 비교적 큰 주제입니다. 도움을 주기 위한 다양한 리소스들이 있습니다.
-
-- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
-
-접근 가능한 사이트를 만드는 모든 사항을 다룰 수 없지만, 이는 구현하려는 핵심 원칙 중 일부입니다. 처음부터 접근 가능한 페이지를 기획하는 것은 접근할 수 있도록 기존 페이지로 돌아가는 것보다 **항상** 쉽습니다.
-
-## 좋은 디스플레이 원칙
-
-### 색상 안전 팔레트
-
-사람들은 세상을 다른 방식으로 봅니다. 여기에는 색상도 포함됩니다. 사이트에 대한 색상 스키마를 선택할 때 모든 사람이 접근할 수 있는지 확인해야 합니다. [색상 팔레트를 생성하는 한 가지 훌륭한 도구는 Color Safe](http://colorsafe.co/)입니다.
-
-✅ 색상을 사용할 때 매우 문제가 있는 웹 사이트를 식별하십시오. 왜 해야될까요?
-
-### 텍스트를 적절하게 강조하기
-
-색상, [font weight](https://developer.mozilla.org/docs/Web/CSS/font-weight) 또는 기타 [text decoration](https://developer.mozilla.org/docs/Web/CSS/text-decoration)으로 텍스트를 강조하는 것은 본질적으로 스크린 리더에 중요하다고 알리지 않습니다. 단어는 키워드이기 때문에 굵게 표시되었거나 첫 번째 단어 혹은 디자이너가 굵게 표시해야한다고 결정했기 때문입니다.
-
-특정 구문을 강조 표시해야 하는 경우에는, `<strong>` 또는 `<em>` 요소를 사용하세요. 이는 스크린 리더에 해당 항목이 중요함을 나타냅니다.
-
-### 올바른 HTML 사용하기
-
-CSS와 JavaScript를 사용하면 많은 요소가 모든 유형를 제어할 수 있는 것처럼 보일 수 있습니다. `<span>` 은`<button>` 을 만드는 데 사용할 수 있으며, `<b>` 는 하이퍼 링크가 될 수 있습니다. 스타일링이 더 쉽다고 생각될 수 있지만, 스크린 리더에게는 당황스럽습니다. 페이지에 컨트롤을 만들 때는 적절한 HTML을 사용하십시오. 하이퍼 링크를 원하면 `<a>` 를 사용하세요. 올바른 제어를 위해 올바른 HTML을 사용하는 것은 Semantic HTML이라고 의미합니다.
-
-✅ 웹 사이트로 이동하여 디자이너와 개발자가 HTML을 올바르게 사용하고 있는지 확인하십시오. 링크의 역할을 하는 버튼을 찾을 수 있나요? Hint: 기반 코드를 보려면 브라우저에서 마우스 우측 버튼을 클릭하고 'View Page Source'를 선택하십시오.
-
-### 좋은 시각적 단서를 사용하기
-
-CSS는 페이지에 있는 모든 요소의 형태를 완벽하게 제어합니다. 윤곽선없이 텍스트 상자를 만들거나 밑줄없이 하이퍼 링크를 만들 수 있습니다. 불행히도 이러한 단서를 제거하면 그 단서를 의존하는 사람이 제어 유형을 인식하는 것이 더 어려워질 수 있습니다.
-
-## 링크 텍스트의 중요성
-
-하이퍼 링크는 웹 탐색의 핵심 기능입니다. 결과적으로 스크린 리더가 링크를 제대로 읽을 수 있도록 한다면 모든 사용자가 사이트를 탐색할 수 있습니다.
-
-### 스크린 리더 및 링크
-
-예상대로 스크린 리더는 페이지 내부의 다른 텍스트를 읽는 것과 같은 방식으로 링크 텍스트를 읽습니다. 이를 염두하고 아래 설명된 텍스트는 완벽하게 수용 가능하다고 느낄 수 있습니다.
-
-> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. [Click here](https://en.wikipedia.org/wiki/Little_penguin) for more information.
-
-> The little penguin, sometimes known as the fairy penguin, is the smallest penguin in the world. Visit https://en.wikipedia.org/wiki/Little_penguin for more information.
-
-> **NOTE** 읽으려고 한다면, 위와 같은 링크는 **절대** 만들지 않아야 합니다.
-
-다시 말하지만, 스크린 리더는 브라우저마다 기능이 다른 인터페이스입니다.
-
-### URL 사용 문제점
-
-스크린 리더는 텍스트를 읽습니다. 텍스트에 URL이 표시되면, 스크린 리더가 URL을 읽습니다. 일반적으로 URL은 의미있는 정보를 전달하지 않으며, 불편하게 들릴 수 있습니다. 스마트폰에서 URL이 포함된 문자 메시지를 음성으로 읽은 적이 있다면 이 문제를 경험했을 수 있습니다.
-
-### "click here"의 문제점
-
-스크린 리더는 또한 시력이 있는 사람이 페이지에서 링크를 찾는 것과 동일한 방식으로 페이지의 하이퍼 링크만 읽을 수 있습니다. 링크 텍스트가 항상 "click here"인 경우 사용자는 "click here, click here, click here, click here, click here, ..." 라는 소리를 들을 수 있습니다. 이는 모든 링크를 서로 구별할 수 없습니다.
-
-### 좋은 링크 텍스트
-
-좋은 링크 텍스트는 링크의 다른 측면에 있는 내용을 간략하게 설명합니다. 작은 펭귄에 대해 이야기하는 예시에서 링크는 종에 대한 Wikipedia 페이지로 연결됩니다. *little penguins* 라는 문구는 누군가가 링크를 클릭하면 무엇을 배울 수 있는지를 명확하게 해주기 때문에 완벽한 링크 텍스트가 됩니다.-little penguins.
-
-> The [little penguin](https://en.wikipedia.org/wiki/Little_penguin), sometimes known as the fairy penguin, is the smallest penguin in the world.
-
-✅ 모호한 연결 전략을 사용하는 페이지를 찾으려면 몇 분 동안 웹을 검색하십시오. 연결이 더 좋은 다른 사이트와 비교하십시오. 무엇을 배울 수 있나요?
-
-#### 검색 엔진 노트
-
-모든 사람이 사이트에 접근할 수 있도록 하면 추가 보너스로 검색 엔진이 사이트를 탐색하는데도 도움이 됩니다. 검색 엔진은 링크 텍스트를 사용하여 페이지 주제를 학습합니다. 따라서 좋은 링크 텍스트를 사용하면 모두에게 도움이 됩니다!
-
-### ARIA
-
-다음 페이지를 상상해보시기 바랍니다:
-
-| Product      | Description        | Order        |
-| ------------ | ------------------ | ------------ |
-| Widget       | [Description]('#') | [Order]('#') |
-| Super widget | [Description]('#') | [Order]('#') |
-
-이 예시에서는 설명 텍스트와 순서를 복사하는 것이 브라우저를 사용하는 사람에게 의미가 있습니다. 그러나 스크린 리더를 사용하는 사람은 문맥없이 반복되는 *설명* 및 *순서* 라는 단어만 듣게됩니다.
-
-이러한 유형의 시나리오를 지원하기 위해 HTML은 [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)라는 속성 집합을 지원합니다. 이러한 속성을 사용하면 스크린 리더에 추가 정보를 제공할 수 있습니다.
-
-> **NOTE**: HTML의 여러 측면과 마찬가지로, 브라우저 및 스크린 리더 지원은 다를 수 있습니다. 그러나 대부분의 주요 클라이언트는 ARIA 속성을 지원합니다.
-
-페이지 형식이 허용하지 않는 경우에는 `aria-label`을 사용하여 링크에 설명할 수 있습니다. 위젯에 대한 설명은 다음과 같이 설정할 수 있습니다
-
-``` html
-<a href="#" aria-label="Widget description">description</a>
-```
-
-✅ 일반적으로, 위에서 설명한 시맨틱 마크업을 사용하는 것은 ARIA의 사용을 대체하지만, 때때로 다양한 HTML 위젯에 해당하는 시맨틱이 없습니다. 좋은 예는 Progressbar입니다. 진행률 표시줄에 해당하는 HTML이 없으므로 적절한 역할 및 aria 값을 사용하여 일반 `<div>`를 식별합니다. [AMDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)에 더 유용한 정보가 포함되어 있습니다.
-
-```html
-<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-</div>
-```
-
-## 이미지
-
-스크린 리더는 이미지에 있는 내용을 자동으로 읽을 수 없습니다. 이미지에 접근할 수 있는지 확인하는 데 많은 작업이 필요하지 않습니다. 바로 `alt` 속성이 끝입니다. 모든 이미지에는 이미지를 설명하는 `alt`가 있어야합니다.
-
-✅ 예상대로, 검색 엔진은 이미지의 내용을 이해할 수 없습니다. 그래서 대체 텍스트를 사용합니다. 다시 한 번, 페이지에 접근할 수 있는지 확인하면 추가 보너스가 제공됩니다!
-
-## 키보드
-
-일부 사용자는 마우스 또는 트랙패드를 사용할 수 없으며, 대신 키보드로 의존하여 한 요소에서 다음 요소로 이동합니다. 사용자가 문서를 아래로 이동할 때 키보드가 각 요소에 접근할 수 있도록 웹 사이트에서 콘텐츠를 논리적 순서로 표시하는 것이 중요합니다. 시맨틱 마크업으로 웹 페이지를 만들고 CSS를 사용하여 시각적 레이아웃 스타일을 지정하는 경우, 사이트에서 키보드로 탐색할 수 있어야 하지만, 이 사항은 수동으로 테스트하는 것이 중요합니다. [keyboard navigation strategies](https://webaim.org/techniques/keyboard/)에 대해 자세히 알아보세요.
-
-✅ 웹 사이트로 이동하여 탭 키만 사용하여 탐색해보십시오. 작동하는 것과 작동하지 않는 것은 무엇입니까? 왜 그럴까요?
-
-## 요약
-
-일부가 접근할 수 있는 웹은 진정한 'world-wide web'이 아닙니다. 만든 사이트에 접근할 수 있도록 하는 가장 좋은 방법은 처음부터 접근성 모범 사례를 통합하는 것입니다. 추가 단계가 포함되어 있지만 이러한 기술을 워크 플로우에 통합하면 만드는 모든 페이지에 접근할 수 있습니다.
-
----
-
-## 🚀 도전
-
-이 HTML을 가져와서 학습한 내용에 따라 가능한 하나의 접근을 할 수 있도록 다시 작성하십시오.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Example
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## 강의 후 퀴즈
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-많은 정부 기관에는 접근성 요구사항에 관한 법률이 있습니다. 자신의 나라에 해당하는 접근성 법률을 읽어보십시오. 보장되거나 안되는 항목은 무엇입니까? [this government web site](https://accessibility.blog.gov.uk/) 예시 입니다.
-
-## 과제
- 
-[Analyze a non-accessible web site](../assignment.md)
-
-크레딧: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) by Instrument
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.ms.md b/1-getting-started-lessons/3-accessibility/translations/README.ms.md
deleted file mode 100644
index a37537d5..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.ms.md
+++ /dev/null
@@ -1,220 +0,0 @@
-# Membuat Halaman Web yang Boleh Diakses
-
-![Semua Tentang Kebolehcapaian](/sketchnotes/webdev101-a11y.png)
-> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuiz Pra Kuliah
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
-
-> Kekuatan Web berada dalam kesejagatannya. Akses oleh semua orang tanpa mengira kecacatan adalah aspek penting.
->
-> \- Sir Timothy Berners-Lee, Pengarah W3C dan penemu World Wide Web
-
-Petikan ini dengan jelas menunjukkan pentingnya membuat laman web yang boleh diakses. Aplikasi yang tidak dapat diakses oleh semua orang adalah definisi pengecualian. Sebagai pembangun laman web, kita harus sentiasa mempunyai fikiran aksesibiliti. Dengan fokus ini dari awal, anda akan dapat memastikan semua orang dapat mengakses halaman yang anda buat. Dalam pelajaran ini, anda akan mengetahui tentang alat yang dapat membantu anda memastikan bahawa aset web anda dapat diakses dan bagaimana membina dengan mempertimbangkan kebolehcapaian.
-
-## Alat untuk digunakan
-
-### Pembaca skrin
-
-Salah satu alat kebolehcapaian yang terkenal ialah pembaca skrin.
-
-[Pembaca Skrin](https://en.wikipedia.org/wiki/Screen_reader) adalah pelanggan yang biasa digunakan untuk mereka yang mengalami masalah penglihatan Semasa kita menghabiskan masa untuk memastikan penyemak imbas menyampaikan maklumat yang ingin kita kongsi dengan betul, kita juga harus memastikan pembaca skrin melakukan perkara yang sama.
-
-Pada asasnya, pembaca skrin akan membaca halaman dari atas ke bawah dengan didengar. Sekiranya halaman anda semua teks, pembaca akan menyampaikan maklumat dengan cara yang serupa dengan penyemak imbas. Sudah tentu, laman web jarang hanya teks; mereka akan mengandungi pautan, grafik, warna, dan komponen visual lain. Perhatian mesti diambil untuk memastikan bahawa maklumat ini dibaca dengan betul oleh pembaca skrin.
-
-Setiap pembangun web harus membiasakan diri dengan pembaca skrin. Seperti yang dinyatakan di atas, ini adalah pelanggan yang akan digunakan pengguna anda Sama seperti anda mengetahui bagaimana penyemak imbas beroperasi, anda harus mengetahui cara pembaca skrin beroperasi. Nasib baik pembaca skrin dimasukkan ke dalam kebanyakan sistem operasi, dan banyak penyemak imbas mengandungi sambungan untuk meniru pembaca skrin.
-
-✅ Cuba pelanjutan atau alat penyemak imbas pembaca skrin. Yang hanya berfungsi pada Windows ialah [JAWS](https://webaim.org/articles/jaws/). Penyemak imbas juga mempunyai alat bawaan yang dapat digunakan untuk tujuan ini; cuba [alat penyemak imbas Edge yang berfokus kebolehaksesan ini](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features).
-
-### Pemeriksa Kontras
-
-Warna di laman web perlu dipilih dengan teliti untuk menjawab keperluan pengguna buta warna atau orang yang mengalami kesukaran untuk melihat warna kontras rendah.
-
-✅ Uji laman web yang anda gemari untuk penggunaan warna dengan pelanjutan penyemak imbas seperti [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Apakah anda telah belajar?
-
-### Lighthouse
-
-Di kawasan alat pembangun penyemak imbas (developer tool area) anda, anda akan menemui alat Lighthouse. Alat ini penting untuk mendapatkan pandangan pertama mengenai kebolehaksesan (serta analisis lain) dari laman web. Walaupun penting untuk tidak bergantung sepenuhnya pada Lighthouse, skor 100% sangat membantu sebagai asas.
-
-✅ Cari Lighthouse pada panel alat pembangun penyemak imbas anda dan jalankan analisis di mana-mana laman web. Apakah yang anda telah cari?
-
-## Reka bentuk untuk kebolehcapaian
-
-Kebolehcapaian adalah topik yang agak besar. Untuk membantu anda, terdapat banyak sumber yang ada.
-
-- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
-
-Walaupun kami tidak dapat merangkumi setiap aspek dalam membuat laman web yang dapat diakses, berikut adalah beberapa prinsip utama yang ingin anda laksanakan. Merancang halaman yang dapat diakses dari awal **selalu** lebih mudah daripada kembali ke halaman yang ada untuk menjadikannya mudah diakses.
-
-## Prinsip paparan yang baik
-
-### Palet warna selamat
-
-Orang melihat dunia dengan cara yang berbeza, dan ini termasuk warna. Semasa memilih skema warna untuk laman web anda, anda harus memastikannya dapat diakses oleh semua orang. Salah satu alat yang hebat [untuk menghasilkan palet warna ialah Warna Selamat](http://colorsafe.co/).
-
-✅ Kenalpasti laman web yang sangat bermasalah dalam penggunaan warnanya. Kenapa?
-
-### Sorot teks dengan betul
-
-Menonjolkan teks mengikut warna, [font weight](https://developer.mozilla.org/docs/Web/CSS/font-weight), atau [text decoration](https://developer.mozilla.org/docs/Web/CSS/text-decoration) tidak memberitahu pembaca skrin mengenai kepentingannya. Sesuatu perkataan boleh dicetak tebal kerana itu adalah kata kunci, atau kerana kata pertama dan pereka memutuskan bahawa perkataan itu harus tebal.
-
-Apabila frasa tertentu perlu diserlahkan, gunakan elemen `<strong>` atau `<em>`. Ini akan menunjukkan kepada pembaca skrin bahawa item tersebut penting.
-
-### Guna HTML dengan betul
-
-Dengan CSS dan JavaScript, elemen boleh kelihatan seperti jenis kawalan. `<span>` dapat digunakan untuk membuat `<button>`, dan `<b>` dapat menjadi hyperlink. Walaupun ini mungkin dianggap lebih mudah untuk digayakan, membingungkan pembaca skrin. Gunakan HTML yang sesuai semasa membuat kawalan pada halaman. Sekiranya anda mahukan hyperlink, gunakan `<a>`. Menggunakan HTML yang betul untuk kawalan yang tepat disebut menggunakan HTML Semantik.
-
-✅ Pergi ke mana-mana laman web dan lihat apakah pereka dan pembangun menggunakan HTML dengan betul. Bolehkah anda mencari butang yang seharusnya menjadi pautan? Petunjuk: klik kanan dan pilih 'Lihat Sumber Halaman' di penyemak imbas anda untuk melihat kod yang mendasari.
-
-### Gunakan petunjuk visual yang baik
-
-CSS menawarkan kawalan penuh terhadap penampilan elemen apa pun pada halaman Anda boleh membuat kotak teks tanpa garis besar atau pautan hiper tanpa garis bawah. Malangnya, menghapus petunjuk itu boleh menjadikannya lebih mencabar bagi seseorang yang bergantung kepada mereka untuk dapat mengenali jenis kawalan.
-
-## Kepentingan teks pautan
-
-Hyperlink adalah teras untuk menavigasi web. Hasilnya, memastikan pembaca skrin dapat membaca pautan dengan betul membolehkan semua pengguna menavigasi laman web anda.
-
-### Pembaca skrin dan pautan
-
-Seperti yang anda harapkan, pembaca skrin membaca teks pautan dengan cara yang sama seperti mereka membaca teks lain di halaman. Dengan ini, teks yang ditunjukkan di bawah mungkin dapat diterima dengan baik.
-
-> Penguin kecil, kadang-kadang dikenali sebagai penguin peri, adalah penguin terkecil di dunia. [Tekan sini](https://en.wikipedia.org/wiki/Little_penguin) untuk maklumat lanjut.
-
-> Penguin kecil, kadang-kadang dikenali sebagai penguin peri, adalah penguin terkecil di dunia. Layari https://en.wikipedia.org/wiki/Little_penguin untuk maklumat lanjut.
-
-> **CATATAN** Semasa hendak membaca, anda seharusnya **tidak pernah** membuat pautan yang kelihatan seperti di atas.
-
-Ingat, pembaca skrin adalah antara muka yang berbeza dari penyemak imbas dengan set ciri yang berbeza.
-
-### Masalah dengan menggunakan URL
-
-Pembaca skrin membaca teks. Sekiranya URL muncul dalam teks, pembaca skrin akan membaca URL tersebut. Secara umum, URL tidak menyampaikan maklumat yang bermakna, dan boleh menyakitkan hati. Anda mungkin pernah mengalami ini jika telefon anda pernah membaca pesanan teks dengan URL.
-
-### Masalah dengan "klik di sini"
-
-Pembaca skrin juga mempunyai kemampuan untuk membaca hanya pautan hiper pada halaman, dengan cara yang sama orang yang melihat akan mengimbas halaman untuk mendapatkan pautan. Sekiranya teks pautan selalu "klik di sini", semua pengguna akan mendengar adalah "klik di sini, klik di sini, klik di sini, klik di sini, klik di sini, ..." Semua pautan kini tidak dapat dibezakan antara satu sama lain.
-
-### Teks pautan yang baik
-
-Teks pautan yang baik menerangkan secara ringkas apa yang terdapat di seberang pautan. Dalam contoh di atas yang membicarakan penguin kecil, pautan adalah ke halaman Wikipedia mengenai spesies tersebut. Frasa *penguin kecil* akan menghasilkan teks pautan yang sempurna kerana ia menjelaskan apa yang akan dipelajari oleh seseorang jika mereka mengklik pautan itu - penguin kecil.
-
-> [penguin kecil](https://en.wikipedia.org/wiki/Little_penguin), kadang-kadang dikenali sebagai penguin peri, adalah penguin terkecil di dunia.
-
-✅ Melayari laman web selama beberapa minit untuk mencari halaman yang menggunakan strategi penghubung yang tidak jelas. Bandingkan dengan laman web lain yang mempunyai hubungan lebih baik. Apa yang anda pelajari?
-
-#### Nota enjin carian
-
-Sebagai bonus tambahan untuk memastikan laman web anda dapat diakses oleh semua orang, anda juga akan membantu enjin carian menavigasi laman web anda. Enjin carian menggunakan teks pautan untuk mempelajari topik halaman. Oleh itu, menggunakan teks pautan yang baik membantu semua orang!
-
-### ARIA
-
-Bayangkan halaman berikut:
-
-| Produk       | Penerangan        | Pesanan        |
-| ------------ | ----------------- | -------------- |
-| Widget       | [Penerangan]('#') | [Pesanan]('#') |
-| Super widget | [Penerangan]('#') | [Pesanan]('#') |
-
-Dalam contoh ini, mendua teks keterangan dan urutan masuk akal bagi seseorang yang menggunakan penyemak imbas. Walau bagaimanapun, seseorang yang menggunakan pembaca skrin hanya akan mendengar kata-kata *Penerangan* dan *Pesanan* diulang tanpa konteks.
-
-Untuk menyokong jenis senario ini, HTML menyokong sekumpulan atribut yang dikenali sebagai [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Atribut ini membolehkan anda memberikan maklumat tambahan kepada pembaca skrin.
-
-> **CATATAN**: Seperti banyak aspek HTML, sokongan penyemak imbas dan pembaca skrin mungkin berbeza. Walau bagaimanapun, kebanyakan pelanggan utama menyokong atribut ARIA.
-
-Anda boleh menggunakan `aria-label` untuk menerangkan pautan apabila format halaman tidak membenarkan anda. Keterangan untuk widget dapat ditetapkan sebagai
-
-``` html
-<a href="#" aria-label="Widget description">description</a>
-```
-
-✅ Secara umum, menggunakan markup Semantik seperti yang dijelaskan di atas menggantikan penggunaan ARIA, tetapi kadang-kadang tidak ada yang setara dengan semantik untuk pelbagai widget HTML. Contoh yang baik ialah Progressbar. Tidak ada setara HTML untuk bar kemajuan, jadi anda mengenal pasti generik `<div>` untuk elemen ini dengan peranan dan nilai aria yang betul. [MDN documentation on ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) mengandungi maklumat yang lebih berguna.
-
-```html
-<div id="percent-loaded" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
-</div>
-```
-
-## Gambar
-
-Sudah tentu, pembaca skrin tidak dapat membaca secara automatik apa yang terdapat dalam gambar. Memastikan gambar dapat diakses tidak memerlukan banyak kerja - itulah atribut `alt`. Semua gambar harus mempunyai `alt` untuk menggambarkan apa itu.
-
-✅ Seperti yang anda jangkakan, enjin carian juga tidak dapat memahami apa yang ada dalam gambar. Mereka juga menggunakan teks alt. Oleh itu, sekali lagi, memastikan halaman anda dapat diakses memberikan bonus tambahan!
-
-## Papan Kekunci
-
-Sebilangan pengguna tidak dapat menggunakan tetikus atau pad jejak, sebaliknya bergantung pada interaksi papan kekunci ke tab dari satu elemen ke elemen yang lain. Penting bagi laman web anda untuk menyajikan kandungan anda mengikut urutan logik agar papan kekunci dapat mengakses setiap elemen ketika pengguna menurunkan dokumen. Sekiranya anda membina laman web anda dengan penanda semantik dan menggunakan CSS untuk menggayakan susun atur visual mereka, laman web anda harus dilayari papan kekunci, tetapi penting untuk menguji aspek ini secara manual. Ketahui lebih lanjut mengenai [Strategi Papan Kekunci](https://webaim.org/techniques/keyboard/).
-
-✅ Pergi ke mana-mana laman web dan cuba menavigasinya melalui hanya menggunakan kunci tab anda. Apa yang berfungsi, apa yang tidak berfungsi? Kenapa?
-
-## Rumusan
-
-Web yang boleh diakses oleh sesetengah orang bukan benar-benar 'web seluruh dunia'. Kaedah terbaik untuk memastikan laman web yang anda buat dapat diakses adalah dengan menggabungkan amalan terbaik kebolehcapaian sejak awal. Walaupun ada langkah tambahan yang diperlukan, memasukkan kemahiran ini ke dalam aliran kerja anda sekarang akan bermakna semua halaman yang anda buat akan dapat diakses.
-
----
-
-## 🚀 Cabaran
-
-Ambil HTML ini dan tulis semula agar dapat diakses semaksimum mungkin, mengingat strategi yang anda pelajari.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Example
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## Kuiz Pasca Kuliah
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
-
-## Mengkaji dan belajar sendiri
-
-Banyak kerajaan mempunyai undang-undang mengenai syarat aksesibilitas. Baca undang-undang kebolehcapaian negara asal anda. Apa yang dilindungi, dan apa yang tidak? Contohnya ialah [laman kerajaan](https://accessibility.blog.gov.uk/).
-
-## Tugasan
-
-[Menganalisis laman web yang tidak dapat diakses](../assignment.md)
-
-Kredit: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) karya Instrument
\ No newline at end of file
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.nl.md b/1-getting-started-lessons/3-accessibility/translations/README.nl.md
deleted file mode 100644
index d6131de1..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.nl.md
+++ /dev/null
@@ -1,229 +0,0 @@
-# Toegankelijke webpagina's maken
-
-![Alles over toegankelijkheid](/sketchnotes/webdev101-a11y.png)
-> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz voorafgaand aan de lezing
-[Quiz voorafgaand aan de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
-
-> De kracht van het web zit in zijn universaliteit. Toegang voor iedereen, ongeacht hun handicap, is een essentieel aspect.
->
-> \- Sir Timothy Berners-Lee, W3C-directeur en uitvinder van het World Wide Web
-
-Deze quote benadrukt perfect het belang van het creëren van toegankelijke websites. Een applicatie die niet voor iedereen toegankelijk is, is per definitie uitsluiting. Als webontwikkelaars moeten we altijd rekening houden met toegankelijkheid. Door deze focus vanaf het begin te hebben, bent u goed op weg om ervoor te zorgen dat iedereen toegang heeft tot de pagina's die u maakt. In deze les leert u over de tools die u kunnen helpen ervoor te zorgen dat uw webitems toegankelijk zijn en hoe u kunt bouwen met toegankelijkheid in gedachten. 
-
-## Tools om te gebruiken
-
-### Schermlezers
-
-Een van de bekendste toegankelijkheidstools zijn schermlezers.
-
-[Schermlezers](https://nl.wikipedia.org/wiki/Schermlezer) zijn veelgebruikte clients voor mensen met een visuele beperking. Omdat we er tijd voor besteden om ervoor te zorgen dat een browser de informatie die we willen delen correct overbrengt, moeten we er ook voor zorgen dat een schermlezer hetzelfde doet.
-
-In de basis leest een schermlezer een pagina hoorbaar van boven naar beneden. Als uw pagina alleen uit tekst bestaat, zal de lezer de informatie op dezelfde manier overbrengen naar een browser. Webpagina's zijn natuurlijk zelden louter tekst; ze bevatten links, afbeeldingen, kleur en andere visuele componenten. Er moet voor worden gezorgd dat deze informatie correct wordt gelezen door een schermlezer.
-
-Elke webontwikkelaar moet vertrouwd raken met een schermlezer. Zoals hierboven aangegeven, is het de client die uw gebruikers zullen gebruiken. Net zoals u bekend bent met hoe een browser werkt, moet u leren hoe een schermlezer werkt. Gelukkig zijn schermlezers in de meeste besturingssystemen ingebouwd.
-
-Sommige browsers hebben ook ingebouwde tools en extensies die tekst hardop kunnen voorlezen of zelfs enkele basisnavigatiefuncties bieden, zoals [deze op toegankelijkheid gerichte Edge-browserhulpmiddelen](https://support.microsoft.com/nl-nl/microsoft-edge/toegankelijkheidsfuncties-in-microsoft-edge-4c696192-338e-9465-b2cd-bd9b698ad19a). Dit zijn ook belangrijke toegankelijkheidstools, maar ze werken heel anders dan schermlezers en ze mogen niet worden aangezien voor testtools voor schermlezers.
-
-✅ Probeer een schermlezer en browsertekstlezer. Op Windows is [Narrator](https://support.microsoft.com/nl-nl/windows/volledige-handleiding-voor-verteller-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) standaard inbegrepen, en [JAWS](https://webaim.org/articles/jaws/) en [NVDA](https://www.nvaccess.org/about-nvda/) kunnen ook worden geïnstalleerd. Op macOS en iOS is [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) standaard geïnstalleerd.
-
-### Zoom
-
-Een ander hulpmiddel dat vaak wordt gebruikt door mensen met een visuele beperking, is zoomen. De meest basale manier van zoomen is statische zoom, bestuurd via `Control + plusteken (+)` of door de schermresolutie te verlagen. Dit type zoom zorgt ervoor dat het formaat van de hele pagina wordt aangepast, dus het gebruik van [responsive design](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) is belangrijk om een goede gebruikerservaring te bieden bij verhoogde zoomniveaus.
-
-Een ander type zoom is afhankelijk van gespecialiseerde software om een deel van het scherm te vergroten en te pannen, net zoals bij het gebruik van een echt vergrootglas. Op Windows is [Magnifier](https://support.microsoft.com/nl-nl/windows/vergrootglas-gebruiken-voor-een-betere-zichtbaarheid-op-het-scherm-414948ba-8b1c-d3bd-8615-0e5e32204198) ingebouwd en [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) is vergrotingssoftware van derden met meer functies en een groter gebruikersbestand. Zowel macOS als iOS hebben ingebouwde vergrotingssoftware genaamd [Zoom](https://www.apple.com/nl/accessibility/vision/).
-
-### Contrast checkers
-
-Kleuren op websites moeten zorgvuldig worden gekozen om tegemoet te komen aan de behoeften van kleurenblinde gebruikers of mensen die moeite hebben met het zien van kleuren met een laag contrast.
-
-✅ Test een website die u graag gebruikt voor kleurgebruik met een browserextensie zoals [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). Wat leer je?
-
-### Lighthouse
-
-In het ontwikkelaarstoolgedeelte van uw browser vindt u de Lighthouse-tool. Deze tool is belangrijk om een eerste beeld te krijgen van de toegankelijkheid (en ook andere analyses) van een website. Hoewel het belangrijk is om niet uitsluitend op Lighthouse te vertrouwen, is een score van 100% erg nuttig als uitgangspunt.
-
-✅ Zoek Lighthouse in het ontwikkelaarstoolpaneel van uw browser en voer een analyse uit op elke site. wat ontdek je?
-
-## Ontwerpen voor toegankelijkheid
-
-Toegankelijkheid is een relatief groot onderwerp. Om u te helpen, zijn er tal van bronnen beschikbaar.
-
-- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
-
-Hoewel we niet elk aspect van het maken van toegankelijke sites kunnen behandelen, staan hieronder enkele van de kernprincipes die u wilt implementeren. Het ontwerpen van een toegankelijke pagina vanaf het begin is **altijd** gemakkelijker dan teruggaan naar een bestaande pagina om deze toegankelijk te maken.
-
-## Goede weergaveprincipes
-
-### Kleur veilige paletten
-
-Mensen zien de wereld op verschillende manieren, inclusief kleuren. Wanneer u een kleurenschema voor uw site selecteert, moet u ervoor zorgen dat het voor iedereen toegankelijk is. Een geweldig [hulpmiddel voor het genereren van kleurenpaletten is Color Safe](http://colorsafe.co/).
-
-✅ Identificeer een website die erg problematisch is in het gebruik van kleur. Waarom?
-
-### Gebruik de juiste HTML
-
-Met CSS en JavaScript is het mogelijk om elk element eruit te laten zien als elk type besturingselement. `<span>` kan worden gebruikt om een `<button>` te maken en `<b>` kan een hyperlink worden. Hoewel dit misschien als gemakkelijker te stylen wordt beschouwd, brengt het niets over op een schermlezer. Gebruik de juiste HTML bij het maken van besturingselementen op een pagina. Als u een hyperlink wilt, gebruik dan `<a>`. Het gebruik van de juiste HTML voor de juiste besturing wordt het gebruik van Semantische HTML genoemd.
-
-✅ Ga naar een website en kijk of de ontwerpers en ontwikkelaars HTML correct gebruiken. Kunt u een button vinden die een link zou moeten zijn? Tip: klik met de rechtermuisknop en kies 'View Page Source' in uw browser om de onderliggende code te bekijken.
-
-### Maak een beschrijvende kophiërarchie
-
-Gebruikers van schermlezers [zijn sterk afhankelijk van koppen](https://webaim.org/projects/screenreadersurvey8/#finding) om informatie te vinden en door een pagina te navigeren. Het schrijven van beschrijvende koptekst en het gebruik van semantische koptags zijn belangrijk voor het maken van een gemakkelijk navigeerbare site voor gebruikers van schermlezers.
-
-### Gebruik goede visuele aanwijzingen
-
-CSS biedt volledige controle over het uiterlijk van elk element op een pagina. U kunt tekstvakken zonder omtreklijn of hyperlinks zonder onderstreping maken. Helaas kan het verwijderen van die aanwijzingen het voor iemand die van hen afhankelijk is, uitdagender maken om het type controle te herkennen.
-
-## Het belang van linktekst
-
-Hyperlinks zijn essentieel voor het navigeren op internet. Als gevolg hiervan kunnen alle gebruikers door uw site navigeren door ervoor te zorgen dat een schermlezer links correct kan lezen.
-
-### Schermlezers en links
-
-Zoals u zou verwachten, lezen schermlezers linktekst op dezelfde manier als andere tekst op de pagina. Met dit in gedachten kan de onderstaande tekst volkomen acceptabel aanvoelen.
-
-> De Dwergpinguïn, ook wel bekend als de sprookjespinguïn, is de kleinste pinguïn ter wereld. [Klik hier](https://nl.wikipedia.org/wiki/Dwergpingu%C3%AFn) voor meer informatie.
-
-> De Dwergpinguïn, ook wel bekend als de sprookjespinguïn, is de kleinste pinguïn ter wereld. Bezoek https://nl.wikipedia.org/wiki/Dwergpingu%C3%AFn voor meer informatie.
-
-> **OPMERKING** Zoals u gaat lezen, moet u **nooit** links maken die er als hierboven uitzien.
-
-Onthoud dat schermlezers een andere interface zijn dan browsers met een andere set functies.
-
-### Het probleem met het gebruik van de URL
-
-Schermlezers lezen de tekst. Als er een URL in de tekst voorkomt, leest de schermlezer de URL. Over het algemeen geeft de URL geen zinvolle informatie over en kan deze vervelend klinken. Mogelijk heeft u dit ondervonden als uw telefoon ooit een sms-bericht met een URL hoorbaar heeft gelezen.
-
-### Het probleem met "klik hier"
-
-Schermlezers hebben ook de mogelijkheid om alleen de hyperlinks op een pagina te lezen, net zoals een ziende een pagina zou scannen op links. Als de linktekst altijd "klik hier" is, hoort de gebruiker alleen "klik hier, klik hier, klik hier, klik hier, klik hier, ..." Alle links zijn nu niet meer van elkaar te onderscheiden.
-
-### Goede linktekst
-
-Een goede linktekst beschrijft in het kort wat er aan de andere kant van de link staat. In het bovenstaande voorbeeld over Dwergpinguïns, is de link naar de Wikipedia-pagina over de soort. De zin *Dwergpinguïns* zou zorgen voor perfecte linktekst, omdat het duidelijk maakt wat iemand zal leren als ze op de link klikken - Dwergpinguïns.
-
-> De [Dwergpinguïn](https://nl.wikipedia.org/wiki/Dwergpingu%C3%AFn), ook wel bekend als de sprookjespinguïn, is de kleinste pinguïn ter wereld.
-
-✅ Surf een paar minuten op internet om pagina's te vinden die obscure koppelingsstrategieën gebruiken. Vergelijk ze met andere, beter gekoppelde sites. Wat leer je?
-
-#### Aantekeningen bij zoekmachines
-
-Als extra bonus om ervoor te zorgen dat uw site voor iedereen toegankelijk is, helpt u zoekmachines ook bij het navigeren op uw site. Zoekmachines gebruiken linktekst om de onderwerpen van pagina's te leren. Het gebruik van goede linkteksten helpt dus iedereen!
-
-### ARIA
-
-Stelt u de volgende pagina voor:
-
-| Product      | beschrijving        | Volgorde        |
-| ------------ | ------------------- | --------------- |
-| Widget       | [beschrijving]('#') | [Volgorde]('#') |
-| Super widget | [beschrijving]('#') | [Volgorde]('#') |
-
-In dit voorbeeld is het zinvol om de tekst van de beschrijving en volgorde te dupliceren voor iemand die een browser gebruikt. Iemand die een schermlezer gebruikt, hoort echter alleen de woorden *beschrijving* en *volgorde* herhaald zonder context.
-
-Om dit soort scenario's te ondersteunen, ondersteunt HTML een set attributen die bekend staan als [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Met deze attributen kunt u aanvullende informatie verstrekken aan schermlezers.
-
-> **OPMERKING**: Zoals veel aspecten van HTML, kan de ondersteuning van browser en schermlezer variëren. De meeste mainline-clients ondersteunen echter ARIA-attributen.
-
-U kunt `aria-label` gebruiken om de link te beschrijven als het formaat van de pagina dat niet toestaat. De beschrijving voor widget kan worden ingesteld als
-
-``` html
-<a href="#" aria-label="Widget description">beschrijving</a>
-```
-
-✅ Over het algemeen vervangt het gebruik van semantische opmaak zoals hierboven beschreven het gebruik van ARIA, maar soms is er geen semantisch equivalent voor verschillende HTML-widgets. Een goed voorbeeld is een boom. Er is geen HTML-equivalent voor een boomstructuur, dus identificeert u de generieke `<div>` voor dit element met een juiste rol en aria-waarden. De [MDN-documentatie over ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) bevat meer nuttige informatie.
-
-```html
-<h2 id="tree-label">File Viewer</h2>
-<div role="tree" aria-labelledby="tree-label">
-  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
-</div>
-```
-
-## Afbeeldingen
-
-Het spreekt voor zich dat schermlezers niet automatisch kunnen lezen wat er in een afbeelding staat. Ervoor zorgen dat afbeeldingen toegankelijk zijn, kost niet veel werk - daar gaat het bij het `alt`-attribuut om. Alle betekenisvolle afbeeldingen moeten een `alt` hebben om te beschrijven wat ze zijn.
-Voor afbeeldingen die puur decoratief zijn, moet het `alt`-attribuut worden ingesteld op een lege tekenreeks: `alt=""`. Hiermee wordt voorkomen dat schermlezers de decoratieve afbeelding onnodig aankondigen.
-
-✅ Zoals u zou verwachten, kunnen zoekmachines ook niet begrijpen wat er in een afbeelding staat. Ze gebruiken ook alt-tekst. Dus nogmaals, ervoor zorgen dat uw pagina toegankelijk is, levert extra bonussen op!
-
-## Het toetsenbord
-
-Sommige gebruikers kunnen geen muis of trackpad gebruiken, maar vertrouwen op toetsenbordinteracties om van het ene element naar het andere te gaan. Het is belangrijk dat uw website uw inhoud in een logische volgorde presenteert, zodat een toetsenbordgebruiker toegang heeft tot elk interactief element terwijl ze door een document bladeren. Als u uw webpagina's bouwt met semantische opmaak en CSS gebruikt om hun visuele lay-out op te maken, moet uw site toetsenbord-navigeerbaar zijn, maar het is belangrijk om dit aspect handmatig te testen. Meer informatie over [strategieën voor toetsenbordnavigatie](https://webaim.org/techniques/keyboard/).
-
-✅ Ga naar een website en probeer er doorheen te navigeren met alleen uw toetsenbord. Wat werkt, wat werkt niet? Waarom?
-
-## Overzicht
-
-Een web dat voor sommigen toegankelijk is, is niet echt een 'world-wide web'. De beste manier om ervoor te zorgen dat de sites die u maakt, toegankelijk zijn, is door vanaf het begin de best practices voor toegankelijkheid op te nemen. Hoewel er extra stappen bij betrokken zijn, betekent het opnemen van deze vaardigheden in uw workflow dat alle pagina's die u maakt, toegankelijk zijn.
-
----
-
-## 🚀 Uitdaging
-
-Neem deze HTML en herschrijf deze zodat deze zo toegankelijk mogelijk is, gezien de strategieën die u hebt geleerd.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Example
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## Quiz na de lezing
-[Quiz na de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
-
-## Beoordeling en zelfstudie
-
-Veel regeringen hebben wetten met betrekking tot toegankelijkheidseisen. Lees de toegankelijkheidswetten van uw thuisland. Wat wordt er gedekt en wat niet? Een voorbeeld is [deze overheidswebsite](https://accessibility.blog.gov.uk/).
-
-## Toewijzing
- 
-[Analyseer een niet-toegankelijke website](assignment.nl.md)
-
-Credits: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) door instrument
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.pt.md b/1-getting-started-lessons/3-accessibility/translations/README.pt.md
deleted file mode 100644
index 207933cf..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.pt.md
+++ /dev/null
@@ -1,228 +0,0 @@
-# Criando  Webpages Acessíveis
-
-![Tudo sobre acessibilidade](/sketchnotes/webdev101-a11y.png)
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pré-Aula 
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5)
-
-> O poder da Web está em sua universalidade. O acesso de todos, independentemente de deficiências, é um aspecto essencial. 
->
-> \- Senhor Timothy Berners-Lee, Diretor da W3C e inventor da World Wide Web
-
-Esta citação destaca perfeitamente a importância de criar sites acessíveis. Um aplicativo que não pode ser acessado por todos é, por definição, excludente. Como pessoas desenvolvedoras da web, devemos sempre ter a acessibilidade em mente. Tendo esse foco desde o início, você estará no caminho certo para garantir que todos possam acessar as páginas que você cria. Nesta lição, você aprenderá sobre as ferramentas que podem te ajudar a garantir que seus programas da web sejam acessíveis e como construir tendo a acessibilidade em mente.
-
-## Ferramentas para uso
-
-### Leitores de Tela
-
-Uma das ferramentas de acessibilidade mais conhecidas são os leitores de tela.
-
-[Leitores de Tela](https://pt.wikipedia.org/wiki/Leitor_de_tela) são clientes comumente usados por pessoas com deficiência visual. Como gastamos tempo garantindo que um navegador transmita adequadamente as informações que desejamos compartilhar, também devemos garantir que um leitor de tela faça o mesmo.
-
-Basicamente, um leitor de tela lê uma página de cima para baixo de forma audível. Se sua página for totalmente de texto, o leitor transmitirá as informações de maneira semelhante a um navegador. Claro, as páginas da web raramente são puramente texto; elas conterão links, gráficos, cores e outros componentes visuais. Deve-se ter cuidado para garantir que essas informações sejam lidas corretamente por um leitor de tela.
-
-Toda pessoa desenvolvedora da web deve se familiarizar com um leitor de tela. Conforme destacado acima, é o cliente que seus usuários utilizarão. Da mesma forma que você está se familiarizando com o funcionamento de um navegador, deve aprender como funciona um leitor de tela. Felizmente, os leitores de tela são integrados à maioria dos sistemas operacionais.
-
-Alguns navegadores também possuem ferramentas e extensões integradas que podem ler texto em voz alta ou até mesmo fornecer alguns recursos básicos de navegação, como [essas ferramentas do navegador Edge com foco em acessibilidade](https://support.microsoft.com/help/4000734/microsoft-edge-accessibility-features). Essas também são ferramentas de acessibilidade importantes, mas funcionam de maneira muito diferente dos leitores de tela e não devem ser confundidas com ferramentas de teste de leitores de tela.
-
-✅ Experimente um leitor de tela e um leitor de texto do navegador. No Windows [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1) é includso por padrão. [JAWS](https://webaim.org/articles/jaws/) e [NVDA](https://www.nvaccess.org/about-nvda/) também podem ser instalados. No macOS e iOS, [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) vem instalado por padrão.
-
-### Zoom
-
-Outra ferramenta normalmente usada por pessoas com deficiência visual é o zoom. O tipo mais básico de zoom é o zoom estático, controlado por `Ctrl + sinal de mais (+)` ou diminuindo a resolução da tela. Este tipo de zoom faz com que a página inteira seja redimensionada, portanto, usar [design responsivo](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design) é importante para fornecer uma boa experiência do usuário em níveis de zoom aumentados.
-
-Outro tipo de zoom depende de um software especializado para ampliar uma área da tela e panoramizar, de maneira muito parecida com o uso de uma lente de aumento real. No Windows, [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) vem de fábrica, e o [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) é um software de ampliação de terceiros com mais recursos e uma base de usuários maior. Tanto o macOS quanto o iOS têm um software de ampliação integrado chamado [Zoom](https://www.apple.com/accessibility/mac/vision/).
-
-### Verificadores de contraste
-
-As cores nos sites precisam ser cuidadosamente escolhidas para atender às necessidades de usuários daltônicos ou pessoas que têm dificuldade em ver cores de baixo contraste.
-
-✅ Teste um site que você goste de usar com uma extensão de navegador para verificar o contraste das cores, como por exemplo o [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=en-US). O que você aprendeu?
-
-### Lighthouse
-
-Na área de ferramenta do desenvolvedor do seu navegador, você encontrará a ferramenta Lighthouse. Esta ferramenta é importante para obter uma primeira visão da acessibilidade (bem como outras análises) de um site. Embora seja importante não depender exclusivamente do Lighthouse, uma pontuação de 100% é muito útil como base.
-
-✅ Encontre o Lighthouse no painel Dev Tools do seu navegador e execute uma análise em qualquer site. o que você descobriu?
-
-## Criando Designs para acessibilidade
-
-Acessibilidade é um tópico relativamente amplo. Para te ajudar, existem vários recursos disponíveis.
-
-- [Accessible U - University of Minnesota](https://accessibility.umn.edu/your-role/web-developers)
-
-Embora não possamos cobrir todos os aspectos da criação de sites acessíveis, a seguir estão alguns dos princípios básicos que você deseja implementar. Projetar uma página acessível desde o início é **sempre** mais fácil do que voltar a uma página existente para torná-la acessível.
-
-## Boas práticas de display
-
-### Paletas de cores seguras
-
-As pessoas veem o mundo de maneiras diferentes, e isso inclui cores. Ao selecionar um esquema de cores para o seu site, você deve garantir que ele seja acessível a todos. Uma ótima [ferramenta para gerar paletas de cores é Color Safe](http://colorsafe.co/).
-
-✅ Identifique um site que seja muito problemático no uso de cores. Porque esse site é problemático?
-
-### Use o HTML correto
-
-Com CSS e JavaScript é possível fazer com que qualquer elemento se pareça com qualquer tipo de controle. `<span>` poderia ser usado para criar um `<button>`, e `<b>` poderia se tornar um hiperlink. Embora isso possa ser considerado mais fácil de estilizar, não transmite nada para um leitor de tela. Use o HTML apropriado ao criar controles em uma página. Se você quiser um hiperlink, use `<a>`. Usar o HTML certo para o controle certo é chamado de usar HTML semântico.
-
-✅ Vá a qualquer site e veja se os designers e desenvolvedores estão usando HTML corretamente. Você consegue encontrar um botão que deveria ser um link? Dica: clique com o botão direito e escolha 'Exibir código-fonte da página' em seu navegador para ver o código subjacente.
-
-### Crie uma hierarquia descritiva de títulos
-
-Pessoas usuárias de leitores de tela [dependem muito de títulos](https://webaim.org/projects/screenreadersurvey8/#finding) para encontrar informações e navegar por uma página. Escrever conteúdo de título descritivo e usar tags de título semântico são importantes para criar um site facilmente navegável para usuários de leitores de tela.
-
-### Use boas dicas visuais
-
-CSS oferece controle completo sobre a aparência de qualquer elemento em uma página. Você pode criar caixas de texto sem contorno ou hiperlinks sem sublinhado. Infelizmente, remover esses sinais pode tornar mais difícil para alguém que depende deles ser capaz de reconhecer o tipo de controle.
-
-## A importância do texto do link
-
-Os hiperlinks são essenciais para navegar na web. Como resultado, garantir que um leitor de tela possa ler os links corretamente permite que todos os usuários naveguem em seu site sem problemas.
-
-### Leitores de tela e links
-
-Como seria de se esperar, os leitores de tela lêem o texto do link da mesma forma que leriam qualquer outro texto na página. Com isso em mente, o texto demonstrado abaixo pode parecer perfeitamente aceitável.
-
-> O pequeno pinguim, também conhecido como pinguim fada, é o menor pinguim do mundo. [Clique aqui](https://en.wikipedia.org/wiki/Little_penguin)  para mais informações.
-
-> O pequeno pinguim, também conhecido como pinguim fada, é o menor pinguim do mundo. Visite https://en.wikipedia.org/wiki/Little_penguin para mais informações.
-
-> **NOTA** Como você está prestes a ler, **nunca** deve-se criar links que se pareçam com o acima.
-
-Lembre-se de que os leitores de tela são uma interface diferente de navegadores com um conjunto diferente de recursos.
-
-### O problema de usar o URL
-
-Leitores de tela leem o texto. Se um URL aparecer no texto, o leitor de tela lerá o URL. De modo geral, a URL não transmite informações significativas e pode parecer irritante. Você pode ter experimentado isso se o seu telefone já leu de forma audível uma mensagem de texto com um URL.
-
-### O problema com "clique aqui"
-
-Os leitores de tela também têm a capacidade de ler apenas os hiperlinks em uma página, da mesma forma que uma pessoa com visão examinaria uma página em busca de links. Se o texto do link for sempre "clique aqui", tudo o que o usuário ouvirá é "clique aqui, clique aqui, clique aqui, clique aqui, clique aqui, ..." Todos os links agora são indistinguíveis uns dos outros.
-
-### Bom texto de link 
-
-Um bom texto de link descreve resumidamente o que está do outro lado do link. No exemplo acima, falando sobre pequenos pinguins, o link é para a página da Wikipedia sobre a espécie. A frase *pequenos pinguins* seria um texto de link perfeito, pois deixa claro o que alguém encontrará se clicar no link - pequenos pinguins.
-
-> O [pequeno pinguim](https://en.wikipedia.org/wiki/Little_penguin), às vezes conhecido como pinguim fada, é o menor pinguim do mundo.
-
-✅ Navegue na web por alguns minutos para encontrar páginas que usam estratégias de links obscuras. Compare-os com outros sites com links melhores. O que voce aprende?
-
-#### Notas sobre Mecanismos de Pesquisa
-
-Como um bônus adicional por garantir que seu site seja acessível a todes, você também ajudará os mecanismos de pesquisa a navegar em seu site. Os mecanismos de pesquisa usam o texto do link para aprender quais são os tópicos das páginas. Portanto, usar um bom texto de link ajuda a todos!
-
-### ARIA
-
-Imagine a seguinte página:
-
-| Produto      | Descrição        | Pedido        |
-| ------------ | ---------------- | ------------- |
-| Widget       | [Descrição]('#') | [Pedido]('#') |
-| Super widget | [Descrição]('#') | [Pedido]('#') |
-
-Neste exemplo, duplicar o texto de descrição e ordem faz sentido para alguém que usa um navegador. No entanto, alguém usando um leitor de tela ouviria apenas as palavras *descrição* e *pedido* repetidas sem contexto.
-
-Para oferecer suporte a esses tipos de cenários, o HTML oferece suporte a um conjunto de atributos conhecido como [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA). Esses atributos permitem fornecer informações adicionais aos leitores de tela.
-
-> **NOTA**:  Como muitos aspectos do HTML, o suporte ao navegador e ao leitor de tela pode variar. No entanto, a maioria dos clientes principais oferece suporte a atributos ARIA.
-
-Você pode usar `aria-label` para descrever o link quando o formato da página não permitir. A descrição do widget pode ser definida como
-
-``` html
-<a href="#" aria-label="descrição do widget">descrição</a>
-```
-
-✅ Em geral, o uso da marcação semântica conforme descrito acima substitui o uso de ARIA, mas às vezes não há equivalente semântico para vários widgets HTML. Um bom exemplo é uma Tree. Não há HTML equivalente para uma Tree, então você identifica o `<div>` genérica para este elemento com um papel apropriado e valores de aria. A [documentação MDN sobre ARIA](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) contém mais informações úteis.
-
-```html
-<h2 id="tree-label">Visualizador de arquivos</h2>
-<div role="tree" aria-labelledby="tree-label">
-  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
-</div>
-```
-
-## Imagens
-
-Nem é preciso dizer que os leitores de tela não conseguem ler automaticamente o que há em uma imagem. Garantir que as imagens sejam acessíveis não dá muito trabalho - é disso que se trata o atributo `alt`. Todas as imagens significativas devem ter um `alt` para descrever o que são.
-Imagens que são puramente decorativas devem ter seu atributo `alt` definido como uma string vazia:` alt = "" `. Isso evita que os leitores de tela anunciem desnecessariamente a imagem decorativa.
-
-✅ Como você pode esperar, os mecanismos de pesquisa também não conseguem entender o que está em uma imagem. Eles também usam texto alternativo. Portanto, mais uma vez, garantir que sua página esteja acessível fornece bônus adicionais!
-
-## O teclado
-
-Alguns usuários não conseguem usar um mouse ou trackpad, em vez disso, contam com as interações do teclado para passar de um elemento para o próximo. É importante que o seu site apresente o seu conteúdo em ordem lógica para que um usuário do teclado possa acessar cada elemento interativo à medida que avança em um documento. Se você construir suas páginas da web com marcação semântica e usar CSS para estilizar seu layout visual, seu site deve ser navegável pelo teclado, mas é importante testar esse aspecto manualmente. Aprenda mais sobre [ v](https://webaim.org/techniques/keyboard/).
-
-✅ Vá a qualquer site da web e tente navegar por ele usando apenas o teclado. O que funciona, o que não funciona? Porque?
-
-## Resumo
-
-Uma web acessível a alguns não é uma verdadeira 'rede mundial'. A melhor maneira de garantir que os sites que você cria sejam acessíveis é incorporar as práticas recomendadas de acessibilidade desde o início. Embora haja etapas extras envolvidas, incorporar essas habilidades em seu fluxo de trabalho agora significará que todas as páginas que você criar estarão acessíveis.
----
-
-## 🚀 Desafio
-
-Pegue este HTML e reescreva-o para ser o mais acessível possível, de acordo com as estratégias que você aprendeu.
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Examplo
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Tartaruga Ipsum</p>
-      <p class="site-subtitle">O Fan Club Premier Mundial de tartarugas</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Recursos</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"Eu gosto de tartarugas"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Informações básicas sobre tartarugas</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Tartarugas Chocolate</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## Quiz Pós-Aula
-[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6)
-
-## Revisão e autoestudo
-
-Muitos governos têm leis relacionadas aos requisitos de acessibilidade. Leia sobre as leis de acessibilidade do seu país. O que é coberto e o que não é? Um exemplo é [esse site de govermo](https://accessibility.blog.gov.uk/).
-
-## Lição de casa
- 
-[Analise um site não acessível](assignment.pt.md)
-
-Créditos: [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample) por Instrument
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md b/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md
deleted file mode 100644
index 0084744c..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.zh-cn.md
+++ /dev/null
@@ -1,228 +0,0 @@
-# 创造无障碍网页
-
-![All About Accessibility](/sketchnotes/webdev101-a11y.png)
-> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 课前小测
-[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=zh_cn)
-
-> 互联网的力量存在于其普适性中，让包括残障人士在内的每个人都能访问互联网，是其中不可或缺的一方面。
->
-> —— Timothy Berners-Lee， W3C（万维网联盟）主席、万维网发明者
-
-这段引言恰当地强调了创造无障碍网页的重要性。一个无法被所有人顺畅访问的应用按照定义来说是排他的，作为 Web 开发者我们应该始终将无障碍性牢记在心中。从一开始就关注到这一点，可以让你在确保每个人都能顺利访问你创造的页面这一方面做得很优秀。这节课中，你会了解到一些能帮助你确保你的网站资源无障碍的工具，也会学到该怎样将无障碍性牢记在心中。
-
-## 相关工具
-
-### 屏幕阅读器（Screen readers）
-
-屏幕阅读器可以说是最知名的无障碍工具之一。
-
-[屏幕阅读器](https://zh.wikipedia.org/wiki/%E8%9E%A2%E5%B9%95%E9%96%B1%E8%AE%80%E5%99%A8)在视力障碍者中被广泛使用。就像我们会花时间来确保浏览器正确地传达了我们想要分享的信息， 我们也必须要确保屏幕阅读器也可以达到同样的效果。
-
-一般来说，屏幕阅读器会从上到下用语音阅读一个页面。如果你的页面全是文字，阅读器传达信息的方式和浏览器会是基本相似的。当然，网页几乎不会只有文字，还会包含链接、图像、颜色以及其他视觉组件。我们也必须得确保这些信息可以被屏幕阅读器正确阅读。
-
-每一位 Web 开发者都需要去熟悉屏幕阅读器。正如上面强调的一样，这是你的用户会用到的一种客户端。就像你很熟悉浏览器的操作一样，你也应该去学习如何操作屏幕阅读器。幸运的是，多数操作系统都内置了屏幕阅读器。
-
-一些浏览器也有内置的工具和扩展程序，可以读出文字甚至提供一些基本的导航功能，比如[这些以无障碍为目的的 Edge 浏览器工具](https://support.microsoft.com/zh-cn/microsoft-edge/microsoft-edge-%E4%B8%AD%E7%9A%84%E8%BE%85%E5%8A%A9%E5%8A%9F%E8%83%BD-4c696192-338e-9465-b2cd-bd9b698ad19a)。这些也是重要的无障碍工具，但是工作方式和屏幕阅读器非常不同，所以不该被错误地用来作为屏幕阅读器的测试工具。
-
-✅ 试用一下屏幕阅读器和浏览器文本阅读器。在 Windows 系统中默认带有[讲述人](https://support.microsoft.com/zh-cn/windows/%E8%AE%B2%E8%BF%B0%E4%BA%BA%E5%AE%8C%E6%95%B4%E6%8C%87%E5%8D%97-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)，也可以安装 [JAWS](https://webaim.org/articles/jaws/) 和 [NVDA](https://www.nvaccess.org/about-nvda/)。在 macOS 和 iOS 中默认装有[旁白](https://support.apple.com/zh-cn/guide/voiceover/welcome/10)。
-
-### 缩放（Zoom）
-
-另一个视力障碍者常用的工具是缩放。最基本的缩放功能是静态缩放，通过 `Control + 加号（+）` 或者降低屏幕分辨率达成。这样的缩放会导致整个页面尺寸被调整，所以使用[响应式设计（responsive design）](https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Responsive_Design)对于提高了缩放级别的情况下的用户体验非常重要。
-
-另一类缩放需要借助特定的软件来放大屏幕上的部分区域，就像一个真正的放大镜一样。在 Windows 上内置了[放大镜](https://support.microsoft.com/zh-cn/windows/%E4%BD%BF%E7%94%A8%E6%94%BE%E5%A4%A7%E9%95%9C%E5%8F%AF%E4%BD%BF%E5%B1%8F%E5%B9%95%E4%B8%8A%E7%9A%84%E5%86%85%E5%AE%B9%E6%9B%B4%E6%98%93%E4%BA%8E%E6%9F%A5%E7%9C%8B-414948ba-8b1c-d3bd-8615-0e5e32204198)，也可以使用 [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) 这样有更多特性和更大用户群体的第三方软件。在 macOS 和 iOS 上则内置了[放大器](https://www.apple.com.cn/accessibility/vision/)
-
-### 对比度检查器（Contrast checkers）
-
-我们要谨慎地挑选网页上的配色，以照顾到色盲人群和难以区分低对比度颜色的用户的需要。
-
-✅ 用类似 [WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=zh-CN) 这样的浏览器插件来检测一下你喜爱的网站的颜色使用情况。你学到了什么？
-
-### Lighthouse
-
-在浏览器开发者工具中，你可以找到 Lighthouse 工具。这个工具可以让你一睹一个网站的无障碍性（以及其他性能分析）。尽管并不建议完全依赖 Lighthouse，但将 100% 满分作为一个基础将会很有用。
-
-✅ 在你的浏览器开发者工具中找到 Lighthouse 栏，然后用它分析任何一个网站。你发现了什么？
-
-## Designing for accessibility
-
-无障碍性（accessibility）是一个相对比较大的主题，为了帮助你更深入地了解，这里许多你可以参考的资源。
-
-- [Accessible U - 明尼苏达大学](https://accessibility.umn.edu/your-role/web-developers)
-
-尽管我们没法在这里涵盖创建一个无障碍网站的方方面面，但下面还是提供了一些你会想要去实践的核心信条。从一开始就设计一个无障碍页面**总是**比回过头来让一个已经存在的页面变得无障碍会更容易。
-
-## 不错的展示原则
-
-### 使用安全色色板
-
-每个人看待世界的方式都不尽相同，当然也包括颜色。当你为你的站点选择一套配色时，应该确保其对所有人都是无障碍的。这里有一个非常棒的[生成安全色色板的工具](http://colorsafe.co/)。
-
-✅ 举出一个配色非常糟糕的网站的例子。你认为它糟糕在哪？
-
-### 正确使用 HTML
-
-使用 CSS 和 JavaScript 有能力让任何元素看起来在控制效果上是任何一种类型的元素。比如 `<span>` 可以被用来创建出一个 `<button>`，而 `<b>` 则可能会被弄成一个超链接。尽管有人可能认为这样会更加容易调整样式，但是它不会传达任何有效信息给屏幕阅读器。请使用合适的 HTML 来建立对于页面的控制效果，比如你想要一个超链接，请使用 `<a>` 标签。用正确的 HTML 来实现正确的控制效果，这就叫做实践了“语义化 HTML”（Semantic HTML）。
-
-✅ 去任意一个网站看看设计师和开发者是否合理使用了 HTML。你能不能找出一个本该是链接的按钮？提示：在浏览器中右键点击并且选择“查看网页源代码”来查看底层代码（译注：此处使用“检查”/“审查元素”来观察或许会更加合适）。
-
-### 建立描述性的标题层级
-
-屏幕阅读器使用者为了寻找信息和在页面中导航，会[非常依赖页面中的标题](https://webaim.org/projects/screenreadersurvey8/#finding)。使用描述性的标题内容和语义化的标题标签，对于创建一个对屏幕阅读器使用者友好的网站是非常重要的。
-
-### 使用良好的视觉线索
-
-CSS 让你可以完全随意地控制页面中任何元素的外观。你可以创建一个没有轮廓的文本框或者一个没有下划线的超链接。但不幸的是，移除这些视觉线索会让一些习惯依靠这些线索的使用者难以认出它们的控制功能。
-
-## 链接文本的重要性
-
-对于网页导航来说，超链接非常关键。因此，确保屏幕阅读器可以准确阅读链接才能保证所有用户都可以顺利地在你的网站导航。
-
-### 屏幕阅读器与链接
-
-可想而知，屏幕阅读器会像阅读页面中其他文本一样阅读链接的文本。将这点牢记在心后，可以看看下面两种看起来似乎还能接受的写法。
-
-> 小蓝企鹅，有时也被称作仙企鹅，是世界上最小的企鹅。[点击这里](https://zh.wikipedia.org/wiki/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)来查看更多信息。
-
-> 小蓝企鹅，有时也被称作仙企鹅，是世界上最小的企鹅。访问 https://zh.wikipedia.org/wiki/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D 来查看更多信息。
-
-> **注意** 下文即将提到，你应该 **避免** 使用上面这两种写法。
-
-记住，屏幕阅读器和浏览器功能上有一些差异，是不同的交互媒介。
-
-### 使用 URL 的问题
-
-屏幕阅读器会阅读文本，如果 URL 出现在了文本里，屏幕阅读器就会直接读出这段 URL。一般来说，URL 直接传递的信息都意义不大，而且听起来会很吵。如果你曾经在手机中将一段包含 URL 的文字用语音播放出来，就可能有类似体会。
-
-### 使用“点击这里”的问题
-
-屏幕阅读器也有只阅读页面中超链接的功能，就仿佛一个有视力的人扫视页面来找到所有链接一样。如果所有的链接文本都是“点击这里”，用户听到的就会一直是“点击这里，点击这里，点击这里，点击这里，点击这里……”，完全无法区分各个链接。
-
-### 优秀的链接文本
-
-优秀的链接文本会简要地描述链接另一侧是什么。在上面谈论小蓝企鹅的例子中，链接到的是关于这个物种的维基百科页面。使用*小蓝企鹅*作为链接文本将会非常合适，因为它能清楚地告诉人们如果他们点击了这个链接会了解到什么 —— 小蓝企鹅。
-
-> [小蓝企鹅](https://zh.wikipedia.org/wiki/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)，有时也被称作仙企鹅，是世界上最小的企鹅。
-
-✅ 上网随便逛几分钟，找一找使用了难以理解的链接策略的网页。对比一下其他有更好的链接的网站，你有何体会？
-
-#### 关于搜索引擎
-
-保证你的网站对所有人都无障碍还能带来一个额外的好处：可以帮助搜索引擎导航你的网站。搜索引擎会使用链接文本来了解页面的主题，所以使用好的链接文本其实利人利己！
-
-### ARIA
-
-想象一个下面这样的网页：
-
-| 产品         | 详情        | 预订        |
-| ------------ | ----------- | ----------- |
-| 小玩意       | [详情]('#') | [预订]('#') |
-| 超棒的小玩意 | [详情]('#') | [预订]('#') |
-
-在这个例子中，复制“详情”和“预订”这两个文本对于使用浏览器的用户来说是没有理解障碍的。然而，使用屏幕阅读器的用户则只会听到对 *详情* 和 *预订* 这两个词的两次毫无上下文的复读。
-
-为了处理这类情况，HTML 支持一些被称为 [Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA) 的属性。这些属性让你可以为屏幕阅读提供一些额外的信息。
-
-> **注意**：正如 HTML 的其他方面一样，浏览器和屏幕阅读器对 ARIA 的支持情况可能会不同，但是多数主流客户端都是支持 ARIA 属性的。
-
-当页面格式不允许你直接用文本描述链接时，你可以使用 `aria-label` 属性来对链接进行描述。对于一个小玩意的详情描述可以被设置为：
-
-``` html
-<a href="#" aria-label="小玩意的详情">详情</a>
-```
-
-✅ 一般来说，使用此前提到的语义化标签会比使用 ARIA 更好，但是有时确实存在没法找到合适的语义标签来描述一些 HTML 元素。比如“树”，没有和“树”语义等价的 HTML 标签，所以你可以给这个元素选用一般的 `<div>` 标签，然后加上合理的 role 和 aria 属性值。[MDN ARIA 文档](https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA)有更多有用的相关信息。
-
-```html
-<h2 id="tree-label">文件查看器</h2>
-<div role="tree" aria-labelledby="tree-label">
-  <div role="treeitem" aria-expanded="false" tabindex="0">上传</div>
-</div>
-```
-
-## 图像
-
-毫无疑问，屏幕阅读器是没法自动阅读图像内容的，但是让图像变得无障碍并不会很麻烦 —— 这正是 `alt` 属性所做的事。所有有意义的图像都应该有一个 `alt` 属性来描述它们的内容是什么。纯装饰性的图像应该有一个被设为空字符串的 `alt` 属性：`alt=""`，这样可以防止屏幕阅读器画蛇添足地描述这些装饰性图像。
-
-✅ 没错，搜索引擎也无法理解图片的内容，它们也会使用 alt 属性中的文本。这又一次证明，确保你的页面无障碍可以带来额外的好处！
-
-## 键盘
-
-一些用户没法使用鼠标或者触控板，而是只能依赖键盘交互来从一个元素切换到下一个元素。在你的网站上以有逻辑的顺序来展示内容是很重要的，这样一来键盘用户可以在往下浏览页面时访问到每一个可交互元素。如果你用你语义化标签来构建页面并且用 CSS 来控制它们的视觉外观，你的页面就应该会是可用键盘导航的，但是最好还是手动测试一遍。可在[键盘导航策略](https://webaim.org/techniques/keyboard/)了解更多关于这方面的内容。
-
-✅ 前往任意一个网站然后尝试只使用你的键盘来导航。哪些可以正常使用？哪些不可以？为什么？
-
-## 总结
-
-只有部分人才能顺利访问的网页算不上真正的万维网（world-wide web）。确保你创造的网站无障碍地最好方式就是从一开始就贯彻无障碍的最佳实践。尽管这可能会引入额外的步骤，但现在就将这些技术包含在你的工作流程中将意味着你创造的所有页面都会是无障碍的。
-
----
-
-## 🚀 挑战
-
-利用你学到的策略，尽可能将下方的 HTML 代码重写为无障碍的。
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Example
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## 课后小测
-[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=zh_cn)
-
-## 复习 & 自学
-
-许多政府有关于无障碍要求的法律，阅读一下你的国家与无障碍相关的法律。它涉及了哪些方面，又有哪些方面没有涉及？[这个政府网站](https://accessibility.blog.gov.uk/)是一个例子。
-
-## 作业
- 
-[分析一个非无障碍网站](assignment.zh-cn.md)
-
-参考：[Turtle Ipsum](https://github.com/Instrument/semantic-html-sample)，作者：Instrument
diff --git a/1-getting-started-lessons/3-accessibility/translations/README.zh-tw.md b/1-getting-started-lessons/3-accessibility/translations/README.zh-tw.md
deleted file mode 100644
index 2291fffc..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/README.zh-tw.md
+++ /dev/null
@@ -1,231 +0,0 @@
-# 建立無障礙網頁
-
-![關於網頁親和力](/sketchnotes/webdev101-a11y.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
-
-## 課前測驗
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/5?loc=zh_tw)
-
-> 網路的強大在於它的普遍性。無論用戶是否有殘疾，讓大家無差別地使用網路是必要的。
->
-> The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
->
-> \- Tim Berners-Lee 爵士 ── 全球資訊網協會總監暨網際網路創立者
-
-這段話完美地詮釋建立無障礙網頁的重要性。應用程式若無法服務所有人是建立在排他性設計。身為一位網頁開發員，我們需要時刻警惕著網頁親和力。從此時開始，你接下來創建的網頁要能服務給任何人。在這堂課中，你會學習開發無障礙網頁相關的工具與觀念。
-
-## 相關工具
-
-### 螢幕報讀器 (Screen readers)
-
-螢幕報讀器可說是最知名的無障礙工具之一。
-
-[螢幕報讀器](https://zh.wikipedia.org/wiki/%E8%9E%A2%E5%B9%95%E9%96%B1%E8%AE%80%E5%99%A8)已被廣泛地幫助視覺障礙者。就像我們花了不少時間確保瀏覽器能呈現網頁內容，我們也要確保螢幕報讀器能完整地實現相同的工作。
-
-基本上，螢幕報讀器會一行一行地報讀網頁的內容。若網頁都是以文字建構而成，那螢幕報讀器就能達到與瀏覽器相同的功效。當然，網頁不可能只有文字：裡面可能會有連結、圖像、顏色或是其他視覺物件。我們必須確保螢幕報讀器也能呈現出上述物件。
-
-任何一位網頁開發者需要熟悉螢幕報讀器。它們是用戶的好幫手，就像你的瀏覽器一樣，你需要學習螢幕報讀器是如何運作的。幸運的是，它們都內建在大部分的作業系統當中。
-
-有些瀏覽器內建相關工具與擴充插件，報讀出文字甚至是可互動物件：例如[這些以網頁親和力為目標的 Edge 瀏覽器工具](https://support.microsoft.com/zh-tw/microsoft-edge/microsoft-edge-%E7%9A%84%E5%8D%94%E5%8A%A9%E5%B7%A5%E5%85%B7%E5%8A%9F%E8%83%BD-4c696192-338e-9465-b2cd-bd9b698ad19a)。 它們是重要的輔助工具，或許與螢幕報讀器有所差異，但基本上能測試螢幕報讀器的基本功能。
-
-✅ 嘗試使用螢幕報讀器或瀏覽器朗讀工具。 在 Windows 中，[Narrator](https://support.microsoft.com/zh-tw/windows/%E5%AE%8C%E6%95%B4%E7%9A%84%E6%9C%97%E8%AE%80%E7%A8%8B%E5%BC%8F%E6%8C%87%E5%8D%97-e4397a0d-ef4f-b386-d8ae-c172f109bdb1)內建在系統中，使用者也可以選擇[JAWS](https://webaim.org/articles/jaws/)與[NVDA](https://www.nvaccess.org/about-nvda/)等額外安裝程式。 macOS 與 iOS 平台上則內建[VoiceOver](https://support.apple.com/guide/voiceover/welcome/10)。
-
-### 放大器
-
-另一項為視覺障礙者提供的輔助程式為放大器。最常見的定點放大功能，可以藉由 `Control + 加號(+)` 或降低螢幕解析度來完成。這個步驟會重新縮放整個網頁，確保網頁的[互動式設計](https://developer.mozilla.org/docs/Learn/CSS/CSS_layout/Responsive_Design)是縮放頁面重要的一環。
-
-其他放大功能會專注在小部分的區域上，這些額外軟體提供類似於實體放大器的功能。 Windows 內建[放大器](https://support.microsoft.com/zh-tw/windows/%E4%BD%BF%E7%94%A8%E6%94%BE%E5%A4%A7%E9%8F%A1%E4%BB%A5%E8%AE%93%E8%9E%A2%E5%B9%95%E4%B8%8A%E7%9A%84%E5%85%A7%E5%AE%B9%E6%9B%B4%E5%AE%B9%E6%98%93%E7%9C%8B%E5%88%B0-414948ba-8b1c-d3bd-8615-0e5e32204198)功能；第三方程式[ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/)則受到廣泛用戶的使用。 macOS 與 iOS 內建[Zoom](https://www.apple.com/accessibility/mac/vision/)軟體。
-
-### 對比度檢查器
-
-我們必須謹慎地挑選網頁的顏色對比度，讓色盲人士或低視能障礙者有辦法閱讀文章。
-
-✅ 利用相關的瀏覽器擴充插件來測試看看你所喜愛的網頁，例如[WCAG's color checker](https://microsoftedge.microsoft.com/addons/detail/wcag-color-contrast-check/idahaggnlnekelhgplklhfpchbfdmkjp?hl=zh-tw)。 你學到了什麼?
-
-### Lighthouse
-
-在瀏覽器的開發者工具中，你能找到一款工具名為 Lighthouse。這項工具可以有效的確認網頁親和力。這邊不強制網頁都要經過 Lighthouse 審核，但 100% 的分數是網頁完美的基礎。
-
-✅ 在你的瀏覽器開發工具中找尋 Lighthouse ，對任何網頁做分析。 你發現了什麼?
-
-## 提升網頁親和力
-
-網頁親和力是項相對龐大的主體。要尋求幫助，網路上有許多資源可以參考。
-
-- [Accessible U - 明尼蘇達大學](https://accessibility.umn.edu/your-role/web-developers)
-
-我們無法在此說明建立無障礙網頁的所有重點，但下列是開發時重要的核心觀念。從零開始就留意網頁親和力**一定會比**從完成的網頁來增進網頁親和力來的容易。
-
-## 良好的呈現方式
-
-### 安全的配色
-
-每個人的觀點都有所不同，包含觀看顏色。如何選擇配色也是網頁親和力的課題之一。下列是一款實用的[安全配色生產工具](http://colorsafe.co/).
-
-✅ 舉出在配色上有問題的一個網頁，告訴大家為什麼?
-
-### 使用合理的 HTML 語法
-
-在 CSS 與 JavaScript 的支援下，我們無法判斷網頁物件的控制目的。 好比 `<span>` 也可以建立 `<button>`， `<b>` 可以代表超連結。 在造型變化上或許較為容易，但可能會對螢幕報讀器產生混淆。我們必須確保對應的控制有相同的標籤，例如超連結只使用 `<a>`。這才能完整的表現 HTML 的語義化。
-
-✅ 去任何一個網頁分析開發員與設計員是否使用正確的 HTML 語法。 你能找到語法將連結取代成按鈕嗎? 小提示：在瀏覽器中點擊「右鍵」 > 「檢視網頁原始碼」來確認程式碼。
-
-### 建立分級的描述性標題的
-
-螢幕報讀器使用者[非常仰賴文字標題](https://webaim.org/projects/screenreadersurvey8/#finding)，確認並查詢網頁資訊。使用描述性標題並有層次的標籤分別得以創建出較易閱讀的網頁。
-
-### 使用合理的視覺指引
-
-CSS 提供完整的網頁造型控制，你可以讓文字框框線隱藏或是讓超連結去除底線。然而去除這些視覺指引會造成視覺障礙者閱讀上的困擾，難以辨別它們原本的功能性。
-
-## 連結文字的重要性
-
-超連結是網頁中重點物件。請確保螢幕報讀器能正確的辨識網頁中的超連結。
-
-### 螢幕報讀器處理連結
-
-可想而知，螢幕報讀器對於連結與文字的朗讀方式是相同的。因此，判斷下列文章例子，哪個對於網頁親和力上較為合理?
-
-> 小藍企鵝，又稱做仙企鵝，是世界上最小的企鵝。[點擊這裡](https://zh.wikipedia.org/zh-tw/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)了解更多資訊。
-
-> 小藍企鵝，又稱做仙企鵝，是世界上最小的企鵝。造訪 https://zh.wikipedia.org/zh-tw/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D 了解更多資訊。
-
-> **注意** 讀完之後，請盡量**避免**上方的連結例子。
-
-記得，螢幕報讀器處理物件的方式會與瀏覽器有所不同。
-
-### 使用 URL 的問題
-
-螢幕報讀器會朗讀文字。如果 URL 出現在文章中，它也會被裝置朗讀。綜觀來說，朗讀 URL 不含有任何意義，而且聽來不悅耳。你可能曾在手機上聽過含有網址的文章朗讀。
-
-### 使用「點擊這裡」的問題
-
-螢幕報讀器有能力去處理超連結文字，就像我們尋找網頁中的連結一樣。想像所有的超連結文字都表示成「點擊這裡」，用戶就會重複聽到「點擊這裡！點擊這裡！點擊這裡！點擊這裡......」，會造成別人的困擾。
-
-### 合理的連結文字
-
-合理的連結文字為連結與文字找到了平衡。像上方例子中的小藍企鵝，連結是導向維基百科的物種頁面。文字*小藍企鵝*就會是完美的連結文字，讓用戶了解點擊後會取得關於小藍企鵝的相關資訊。
-
-> [小藍企鵝](https://zh.wikipedia.org/zh-tw/%E5%B0%8F%E8%97%8D%E4%BC%81%E9%B5%9D)，又稱做仙企鵝，是世界上最小的企鵝。
-
-✅ 花點時間逛逛網頁，觀察它們如何設定連結的導向。比較較合適的連結文字，你學到了什麼?
-
-#### 關於搜尋引擎
-
-網頁中的搜尋引擎對網頁親和力有加分的效果，搜尋引擎也能從連結找到你的網頁，了解網頁的主題。所以連結文字對大家都有幫助！
-
-### ARIA
-
-想像下方的網頁：
-
-| 產品     | 描述        | 數量        |
-| -------- | ----------- | ----------- |
-| 物品     | [描述]('#') | [數量]('#') |
-| 超優物品 | [描述]('#') | [數量]('#') |
-
-在這項舉例中，瀏覽器用戶可以清楚地辨別重複性的「描述」與「數量」；但對於螢幕報讀器用戶而言，他們只能重複地聽取*「描述」與「數量」*這兩個單詞。
-
-為了處理這種情況，HTML 提供一套屬性名為[Accessible Rich Internet Applications (ARIA)](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)。它能為螢幕報讀器附加額外的朗讀資訊。
-
-> **注意**： 就如 HTML 的各式物件，瀏覽器與螢幕報讀器能支援的項目也不盡相同。然而，客群主體基本上都支援 ARIA 屬性。
-
-若網頁不支援部分格式語法，你可以使用 `aria-label` 來描述連結。就如下方物件被標註上 "Widget description" 的標籤。
-
-``` html
-<a href="#" aria-label="Widget description">description</a>
-```
-
-✅ 總體而言，使用語義化標籤得以取代 ARIA 功能，但是這些標籤無法全面性地覆蓋 HTML 的各式物件。樹(Tree)就是一種例子。沒有 HTML 物件能處理一棵樹，所以你可以在 `<div>` 元素中加上 aria 數值。[關於 ARIA 的 MDN 技術文件](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)說明許多有用的資訊。
-
-```html
-<h2 id="tree-label">File Viewer</h2>
-<div role="tree" aria-labelledby="tree-label">
-  <div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
-</div>
-```
-
-## 圖片
-
-螢幕報讀器用戶無法直接的了解圖片內容。為了確保圖片也能服務給視覺障礙者，這就是 `alt` 屬性存在的目的。所有重要的圖片都需要有 `alt` 描述圖片的內容。
-裝飾性圖片的 `alt` 欄位就需要留空字串：`alt=""`。 這樣能避免螢幕報讀器朗讀不必要的裝飾性圖片敘述。
-
-✅ 你可能會猜到，搜尋引擎也有可能無法辨別圖片。它們也是使用 alt 敘述。因此，無障礙網頁有許多加分要素！
-
-## 鍵盤輸入
-
-有些用戶無法使用滑鼠或觸控板，他們需要使用鍵盤中的 "tab" 鍵來切換網頁元素，讓網頁物件能順序性地排列與互動就很重要。如果網頁有語義化標籤並以CSS造型化視覺畫面，網頁基本上就能以鍵盤來切換，當然手動測試還是必要的。了解更多關於[鍵盤調查的策略](https://webaim.org/techniques/keyboard/)。
-
-✅ 前往任何一個網頁，試著只以鍵盤瀏覽網頁。哪些能成功運作，你又遭遇了哪些困難? 你有辦法解釋嗎?
-
-## 結論
-
-能連上網頁並不是網際網路的真諦。從現在起確保網頁能以無障礙的方式呈現。雖然還有很多未被提及的開發資訊，熟習你知道的無障礙開發知識一定會對網頁有所幫助。
-
----
-
-## 🚀 挑戰
-
-看看下列的 HTML 程式碼。利用你所學到的知識，試著增進它的網頁親和力。
-
-```html
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>
-      Example
-    </title>
-    <link href='../assets/style.css' rel='stylesheet' type='text/css'>
-  </head>
-  <body>
-    <div class="site-header">
-      <p class="site-title">Turtle Ipsum</p>
-      <p class="site-subtitle">The World's Premier Turtle Fan Club</p>
-    </div>
-    <div class="main-nav">
-      <p class="nav-header">Resources</p>
-      <div class="nav-list">
-        <p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
-        <p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
-      </div>
-    </div>
-    <div class="main-content">
-      <div>
-        <p class="page-title">Welcome to Turtle Ipsum. 
-            <a href="">Click here</a> to learn more.
-        </p>
-        <p class="article-text">
-          Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
-        </p>
-      </div>
-    </div>
-    <div class="footer">
-      <div class="footer-section">
-        <span class="button">Sign up for turtle news</span>
-      </div><div class="footer-section">
-        <p class="nav-header footer-title">
-          Internal Pages
-        </p>
-        <div class="nav-list">
-          <p class="nav-item nav-item-bull"><a href="../">Index</a></p>
-          <p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
-        </div>
-      </div>
-      <p class="footer-copyright">&copy; 2016 Instrument</span>
-    </div>
-  </body>
-</html>
-```
-
-## 課後測驗
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/6?loc=zh_tw)
-
-## 複習與自學
-
-許多政府機關立法要求無障礙需求。查詢你的國家是否有這些法規。它們涉及了那些，那些又沒包含在其中? 看看[英國政府機關網頁](https://accessibility.blog.gov.uk/)的例子。
-
-## 作業
- 
-[分析一個非無障礙網頁](assignment.zh-tw.md)
-
-參考出處： [Turtle Ipsum](https://github.com/Instrument/semantic-html-sample)
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.es.md b/1-getting-started-lessons/3-accessibility/translations/assignment.es.md
deleted file mode 100644
index 9ee2f5ac..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.es.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Analizar un sitio web no accesible
-
-## Instrucciones
-
-Identifica un sitio web que creas que NO es accesible y crea un plan de acción para mejorar su accesibilidad. Tu primer tarea será identificar este sitio, detallar las formas en que crees que es inaccesible sin usar herramientas analíticas y luego someterlo a un análisis Lighthouse. Toma los resultados de este análisis y describe un plan detallado con un mínimo de diez puntos que muestre cómo se podría mejorar el sitio.
-
-## Rúbrica
-
-| Criterios       | Ejemplar                                                                                                                                                      | Adecuado                    | Necesita mejorar           |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
-| informe del estudiante | incluye párrafos sobre cómo el sitio es inadecuado, el informe Lighthouse capturado como un pdf, una lista de diez puntos para mejorar, con detalles sobre cómo mejorarlo | falta el 20% de lo requerido | falta el 50% de lo requerido
- |
\ No newline at end of file
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.fr.md b/1-getting-started-lessons/3-accessibility/translations/assignment.fr.md
deleted file mode 100644
index a3ede430..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.fr.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Analyser un site inaccessible
-
-## Instructions
-
-Identifiez un site Web qui, selon vous, n'est PAS accessible et créez un plan d'action pour améliorer son accessibilité.
-Votre première tâche serait d'identifier ce site, de détailler les façons dont vous pensez qu'il est inaccessible sans utiliser d'outils d'analyse, puis de le soumettre à une analyse Lighthouse. Capturez un pdf des résultats de cette analyse et décrivez un plan détaillé avec un minimum de dix points montrant comment le site pourrait être amélioré.
-
-## Tableau pour tester l'accessibilité du site
-
-| Critère | Exemplaire | Adéquat | Besoin d'amélioration |
-|----------|-----------|----------|----------------|
-|          | manque de <10% de ce qui est requis | manque de 20% de ce qui est requis | manque de 50% de ce qui est requis |
-
-----
-Rapport de l'étudiant : comprend des paragraphes sur l'accessibilité du site, le rapport Lighthouse capturé en pdf, une liste de dix points à améliorer, avec des détails sur la façon de l'améliorer.
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.hi.md b/1-getting-started-lessons/3-accessibility/translations/assignment.hi.md
deleted file mode 100644
index 00234889..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.hi.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# एक गैर-सुलभ वेब साइट का विश्लेषण करें
-
-## अनुदेश
-
-एक ऐसी वेब साइट की पहचान करें जिसे आप मानते हैं कि वह सुलभ नहीं है, और उसकी पहुँच में सुधार के लिए एक कार्य योजना बनाएँ. आपका पहला काम इस साइट की पहचान करना होगा, उन तरीकों को विस्तार से बताएं जो आपको लगता है कि यह विश्लेषणात्मक उपकरणों का उपयोग किए बिना दुर्गम है, और फिर इसे लाइटहाउस विश्लेषण के माध्यम से डालें. इस विश्लेषण के परिणामों को लें और कम से कम दस बिंदुओं के साथ एक विस्तृत योजना की रूपरेखा दिखाएं कि साइट को कैसे बेहतर बनाया जा सकता है.
-
-## सरनामा
-
-|मानदंड|उदाहरणात्मक|पर्याप्त|सुधार की जरूरत|
-|--------------|------|---------------------------|---------------------------|
-| छात्र की रिपोर्ट | साइट कैसे अपर्याप्त है, इस पर पैराग्राफ शामिल हैं, पीडीएफ के रूप में कैप्चर की गई लाइटहाउस रिपोर्ट, सुधार करने के लिए दस बिंदुओं की एक सूची, इसे कैसे सुधारें, इस पर विवरण के साथ। | आवश्यक का 20% गायब है | आवश्यक का 50% गायब है |
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.id.md b/1-getting-started-lessons/3-accessibility/translations/assignment.id.md
deleted file mode 100644
index 921995e1..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.id.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Analisis situs web yang tidak dapat diakses
-
-## Instruksi
-
-Identifikasi situs web yang Anda yakini TIDAK dapat diakses, dan buat rencana tindakan untuk meningkatkan aksesibilitasnya. Tugas pertama Anda adalah mengidentifikasi situs ini, merinci cara yang menurut Anda tidak dapat diakses tanpa menggunakan alat analitik, dan kemudian memasukkannya melalui analisis Lighthouse. Ambil hasil analisis ini dan uraikan rencana rinci dengan minimal sepuluh poin yang menunjukkan bagaimana situs dapat ditingkatkan.
-
-## Rubrik
-
-| Kriteria      | Teladan                                                                                                                                                                                    | Memenuhi Syarat                 | Perlu Perbaikan                 |
-|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------|---------------------------------|
-| laporan siswa | termasuk paragraf tentang bagaimana situs tersebut tidak memadai, laporan Lighthouse diambil sebagai pdf, daftar sepuluh poin untuk diperbaiki, dengan rincian tentang cara memperbaikinya | kurang 20% dari yang dibutuhkan | kurang 50% dari yang dibutuhkan |
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.it.md b/1-getting-started-lessons/3-accessibility/translations/assignment.it.md
deleted file mode 100644
index 0a88ed99..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.it.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Analizzare un sito web non accessibile
-
-## Istruzioni
-
-Identificare un sito web che si ritiene NON accessibile e creare un piano d'azione per migliorarne l'accessibilità. Il primo compito sarà identificare questo sito, dettagliare i modi in cui si ritiene che sia inaccessibile senza utilizzare strumenti analitici e quindi sottoporlo a un'analisi Lighthouse. Prendere i risultati di questa analisi e delineare un piano dettagliato con un minimo di dieci punti che mostrano come il sito potrebbe essere migliorato.
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
-| rapporto dello studente | include paragrafi su come il sito è inadeguato, il report Lighthouse catturato come pdf, un elenco di dieci punti da migliorare, con dettagli su come migliorarlo | manca il 20% del richiesto | manca il 50% del richiesto |
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.ja.md b/1-getting-started-lessons/3-accessibility/translations/assignment.ja.md
deleted file mode 100644
index 5c95a401..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.ja.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# アクセスできない Web サイトを分析する
-
-## 説明書
-
-あなたがアクセシブルではないと思う Web サイトを特定し、そのアクセシビリティを改善するためのアクションプランを作成してください。あなたの最初のタスクは、このサイトを特定し、分析ツールを使用せずにアクセスできないと思う方法を詳細に説明し、Lighthouse 分析にかけることです。この分析結果をもとに、サイトがどのように改善されるかを示す最低10点の詳細な計画を作成してください。
-
-## ルーブリック
-
-| 基準       | 模範的な例                                                                                                                                                      | 適切な                    | 改善が必要           |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
-| student report | サイトがどのように不十分であるかについての段落、PDFとしてキャプチャ灯台のレポート、それを改善する方法の詳細と、改善すべき10のポイントのリストが含まれています。 | 必要な 20% が欠落している | 必要な 50% が欠落している |
\ No newline at end of file
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.ko.md b/1-getting-started-lessons/3-accessibility/translations/assignment.ko.md
deleted file mode 100644
index 87cd7d23..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.ko.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 접근성이 좋지 않은 웹 사이트 분석하기
-
-## 설명
-
-여러분이 접근할 수 없다고 생각하는 사이트를 식별해보고, 접근성을 개선할 수 있는 실행 계획을 만들어봅니다. 여러분의 첫 과제는 사이트를 식별하고 분석 도구를 사용하지 않고 사이트에 접근할 수 없는 방법을 자세히 설명한 다음, Lighthouse 분석을 통해 그 사이트를 확인하는 것입니다. 분석의 결과를 가지고 사이트를 개선할 수 있는 10가지 포인트를 가진 세부 계획을 개략적으로 설명해봅니다.
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
-학생 보고서 | 보고서에 Lighthouse의 진단 결과 캡쳐본이 pdf파일로 첨부되었고, 10가지의 개선점과 함께 개선방안을 포함한 단락들이 포함된 경우 | 필수조건이 20%정도 부족한 경우 | 필수조건이 50%정도 부족한 경우
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.ms.md b/1-getting-started-lessons/3-accessibility/translations/assignment.ms.md
deleted file mode 100644
index c5658da5..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.ms.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Menganalisis laman web yang tidak dapat diakses
-
-## Arahan 
-
-Kenal pasti laman web yang anda percaya TIDAK dapat diakses, dan buat rancangan tindakan untuk meningkatkan aksesibilitasnya. Tugas pertama anda adalah mengenal pasti laman web ini, memperincikan cara-cara yang anda fikir tidak dapat diakses tanpa menggunakan alat analitik, dan kemudian memasukkannya melalui analisis Lighthouse. Ikuti hasil analisis ini dan gariskan rancangan terperinci dengan minimum sepuluh mata yang menunjukkan bagaimana laman web ini dapat diperbaiki.
-
-## Rubrik
-
-| Kriteria       | Exemplary                                                                                                                                                      | Mencukupi                    | Usaha Lagi           |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
-| laporan pelajar | merangkumi perenggan tentang bagaimana laman web ini tidak mencukupi, laporan Lighthouse diambil sebagai pdf, senarai sepuluh markah untuk diperbaiki, dengan perincian mengenai cara memperbaikinya | hilang 20% ​​dari yang diperlukan | hilang 50% dari yang diperlukan |
\ No newline at end of file
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.nl.md b/1-getting-started-lessons/3-accessibility/translations/assignment.nl.md
deleted file mode 100644
index 6136278b..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.nl.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Analyseer een niet-toegankelijke website
-
-## Instructies
-
-Identificeer een website waarvan u denkt dat deze NIET toegankelijk is, en maak een actieplan om de toegankelijkheid ervan te verbeteren. Uw eerste taak zou zijn om deze site te identificeren, de manieren te beschrijven waarop u denkt dat deze ontoegankelijk is zonder analytische tools te gebruiken, en deze vervolgens door een Lighthouse-analyse te laten gaan. Neem de resultaten van deze analyse en maak een gedetailleerd plan met minimaal tien punten waaruit blijkt hoe de site kan worden verbeterd.
-
-## Rubriek
-
-| Criteria       | Voorbeeldig                                                                                                                                                      | Voldoende                    | Moet worden verbeterd           |
-| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- | --------------------------- |
-| studentenrapport | bevat paragrafen over hoe de site ontoereikend is, het Lighthouse-rapport vastgelegd als pdf, een lijst met tien punten die verbeterd kunnen worden, met details over hoe deze te verbeteren | ontbreekt 20% van de vereiste | ontbreekt 50% van de vereiste |
\ No newline at end of file
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.pt.md b/1-getting-started-lessons/3-accessibility/translations/assignment.pt.md
deleted file mode 100644
index 64c2380f..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.pt.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Analise um site não acessível
-
-## Instruções
-
-Identifique um site que você acredita que NÃO está acessível e crie um plano de ação para melhorar sua acessibilidade. 
-Sua primeira tarefa seria identificar este site, detalhar as maneiras pelas quais você acha que ele é inacessível sem o uso de ferramentas analíticas e, em seguida, submetê-lo a uma análise Lighthouse. P
-egue os resultados desta análise e esboce um plano detalhado com um mínimo de dez pontos mostrando como o site poderia ser melhorado.
-
-## Rubrica
-
-| Critérios | Exemplar | Adequado | Precisa Melhorar |
-| -------------- | -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------- | --------------------------- | --------------------------- |
-| relatório | inclui parágrafos sobre como o site é inadequado, o relatório Lighthouse capturado em pdf, uma lista de dez pontos a melhorar, com detalhes sobre como melhorá-lo | faltando 20% do exigido | faltando 50% do exigido |
\ No newline at end of file
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.ru.md b/1-getting-started-lessons/3-accessibility/translations/assignment.ru.md
deleted file mode 100644
index 5d716f92..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.ru.md
+++ /dev/null
@@ -1,16 +0,0 @@
-# Проанализировать сайт не оптимизированный для людей с ограниченными возможностями
-
-## Инструкции
-
-Определите веб-сайт, который, по вашему мнению, НЕ оптимизирован для людей с ограниченными возможностями, и составьте план действий по его оптимизации.
-Ваша задача - идентифицировать такой сайт, подробно описать способы, которыми, по вашему мнению, он недоступен без использования аналитических инструментов, а затем отправить его на анализ Lighthouse. Сделайте PDF-файл с результатами этого анализа и наметьте подробный план с минимум десятью пунктами, показывающими, как можно улучшить сайт.
-
-## Таблица для проверки доступности сайта (accessibility)
-
-| Критерии | Образцовый                           | Адекватный                         | Нуждается в улучшении              |
-| -------- | ------------------------------------ | ---------------------------------- | ---------------------------------- |
-|          | отсутствует <10% того, что требуется | не хватает 20% того, что требуется | не хватает 50% того, что требуется |
-
----
-
-Ваш отчет должен содержать следующее: включает параграфы о том, насколько недоступен сайт, отчет Lighthouse, записанный в формате PDF, список из десяти пунктов, которые следует улучшить, с подробностями о том, как его улучшить.
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.zh-cn.md b/1-getting-started-lessons/3-accessibility/translations/assignment.zh-cn.md
deleted file mode 100644
index f60ee6d2..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.zh-cn.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 分析一个非无障碍网站
-
-## 说明
-
-找到一个你认为无障碍性做得不好的网站，制定一个提升其无障碍性的计划表。你的第一个任务是找到这样一个网站，并在不借助分析工具的前提下详细指出你认为它无障碍做得不好的方面，然后再使用 Lighthouse 分析工具来分析它。借助分析的结果，制定一个包含至少十点的改进该网站的详细计划。
-
-## 评价表
-
-| 指标 | 优秀 | 良好 | 尚可进步 |
-| --- | --- | --- | --- |
-| 书面报告 | 解释了这个网站做得不好的地方，将 Lighthouse 报告打印为 PDF 文件，至少十点可改进之处，每点详细说明了改进策略 | 缺少上述 20% 内容 | 缺少上述 50% 内容 |
diff --git a/1-getting-started-lessons/3-accessibility/translations/assignment.zh-tw.md b/1-getting-started-lessons/3-accessibility/translations/assignment.zh-tw.md
deleted file mode 100644
index ac89b664..00000000
--- a/1-getting-started-lessons/3-accessibility/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 分析一個非無障礙網頁
-
-## 說明
-
-辨別一個你認為對視覺障礙者不友善的網頁，列出網頁改進的策略。你需要先發掘各個網頁，不使用分析工具的情況下判斷網頁的親和力，再套用到 Lighthouse 審核工具。將網頁的審核結果轉化成至少十點的改進計畫。
-
-## 學習評量
-
-| 作業內容 | 優良                                                                                | 普通            | 待改進          |
-| -------- | ----------------------------------------------------------------------------------- | --------------- | --------------- |
-| 書面報告 | 文章解釋為何網頁需要被改進，將 Lighthouse 結果轉成 pdf 檔，列出十點詳細的改進計畫。 | 缺少 20% 的內容 | 缺少 50% 的內容 |
\ No newline at end of file
diff --git a/1-getting-started-lessons/translations/README.es.md b/1-getting-started-lessons/translations/README.es.md
deleted file mode 100644
index 2259d390..00000000
--- a/1-getting-started-lessons/translations/README.es.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Primeros pasos con el Desarrollo Web
-
-En esta sección del plan de estudios, se te presentarán conceptos importantes para convertirte en un desarrollador profesional.
-
-### Temas
-
-1. [Introducción a los lenguajes de programación y herramientas del oficio](../1-intro-to-programming-languages/translations/README.es.md)
-2. [Introducción a GitHub](../2-github-basics/translations/README.es.md)
-3. [Conceptos básicos de Accesibilidad](../3-accessibility/translations/README.es.md)
-
-### Créditos
-
-Introducción a lenguajes de programación y herramientas del oficio fue escrito con ♥️ por [Jasmine Greenaway](https://twitter.com/paladique)
-
-Introducción a GitHub fue escrito con ♥️ por [Floor Drees](https://twitter.com/floordrees)
-
-Conceptos básicos de Accesibilidad fue escrito con ♥️ por [Christopher Harrison](https://twitter.com/geektrainer)
diff --git a/1-getting-started-lessons/translations/README.fr.md b/1-getting-started-lessons/translations/README.fr.md
deleted file mode 100644
index 1856a130..00000000
--- a/1-getting-started-lessons/translations/README.fr.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Premiers pas avec le développement Web
-
-Dans cette section du programme, vous serez initié à des concepts importants pour devenir un développeur professionnel non basés sur des projets.
-
-### Thèmes
-
-1. [Introduction aux langages de programmation et aux outils du métier](../1-intro-to-programming-languages/translations/README.fr.md)
-2. [Bases de GitHub](../2-github-basics/translations/README.fr.md)
-3. [Bases de l'accessibilité](../3-accessibility/translations/README.fr.md)
-
-### Crédits
-
-Les bases de l'accessibilité ont été écrites avec ♥ ️ par [Christopher Harrison](https://twitter.com/geektrainer)
-
-L'introduction à GitHub a été écrite avec ♥ ️ par [Floor Drees](https://twitter.com/floordrees)
-
-L'introduction aux langages de programmation et aux outils du métier a été écrite avec ♥ ️ par [Jasmine Greenaway](https://twitter.com/paladique)
diff --git a/1-getting-started-lessons/translations/README.hi.md b/1-getting-started-lessons/translations/README.hi.md
deleted file mode 100644
index 785b4612..00000000
--- a/1-getting-started-lessons/translations/README.hi.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# वेब डेवलपमेंट के साथ शुरुआत करना
-
-पाठ्यक्रम के इस खंड में, आपको पेशेवर डेवलपर बनने के लिए महत्वपूर्ण गैर-परियोजना आधारित अवधारणाओं से परिचित कराया जाएगा।
-
-### विषय
-
-1. [प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय](../1-intro-to-programming-languages/translations/README.hi.md)
-2. [गिटहब की मूल बातें](../2-github-basics/translations/README.hi.md)
-3. [पहुँच की मूल बातें](../3-accessibility/translations/README.hi.md)
-
-### क्रेडिट
-
-एक्सेसिबिलिटी की मूल बातें [क्रिस्टोफर हैरिसन](https://twitter.com/geektrainer) द्वारा ♥️ से लिखा गया था।
-
-GitHub का परिचय [फ्लोर ड्रेस](https://twitter.com/floordrees) द्वारा ♥️ से लिखा गया था।
-
-प्रोग्रामिंग भाषाओं और व्यापार के उपकरण का परिचय  [जस्मिने ग्रीनवे](https://twitter.com/paladique) द्वारा ♥️ से लिखा गया था।
diff --git a/1-getting-started-lessons/translations/README.id.md b/1-getting-started-lessons/translations/README.id.md
deleted file mode 100644
index e870e1b5..00000000
--- a/1-getting-started-lessons/translations/README.id.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Memulai Pengembangan Web
-
-Di bagian kurikulum ini, Anda akan diperkenalkan dengan konsep berbasis non-proyek yang penting untuk menjadi pengembang profesional.
-
-### Topik
-
-1. [Pengantar Bahasa Pemrograman dan Alat Keterampilan](../1-intro-to-programming-languages/translations/README.id.md)
-2. [Dasar-dasar GitHub](../2-github-basics/translations/README.id.md)
-3. [Dasar-dasar Aksesibilitas](../3-accessibility/translations/README.id.md)
-
-### Kredit
-
-Dasar-dasar Aksesibilitas ditulis dengan ♥ ️oleh [Christopher Harrison](https://twitter.com/geektrainer)
-
-Pengantar GitHub ditulis dengan ♥ ️oleh [Floor Drees](https://twitter.com/floordrees)
-
-Pengantar Bahasa Pemrograman dan Alat Keterampilan ditulis dengan ♥ ️oleh [Jasmine Greenaway](https://twitter.com/paladique)
diff --git a/1-getting-started-lessons/translations/README.it.md b/1-getting-started-lessons/translations/README.it.md
deleted file mode 100644
index b50497f8..00000000
--- a/1-getting-started-lessons/translations/README.it.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Iniziare con lo Sviluppo Web
-
-In questa sezione del curriculum, vi saranno introdotti concetti non relativi al progetto importanti per diventare uno sviluppatore professionista.
-
-### Argomenti
-
-1. [Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari](../1-intro-to-programming-languages/translations/README.it.md)
-2. [Concetti base di GitHub](../2-github-basics/translations/README.it.md)
-3. [Concetti base di Accessibilità](../3-accessibility/translations/README.it.md)
-
-### Riconoscimenti
-
-Concetti Base di Accessibilità è stato scritto con il ♥️ da [Christopher Harrison](https://twitter.com/geektrainer)
-
-Introduzione a GitHub è stato scritto con il ♥️ da [Floor Drees](https://twitter.com/floordrees)
-
-Introduzione ai Linguaggi di Programmazione e agli Strumenti Necessari sono stati scritti con il  ♥️ da [Jasmine Greenaway](https://twitter.com/paladique)
diff --git a/1-getting-started-lessons/translations/README.ja.md b/1-getting-started-lessons/translations/README.ja.md
deleted file mode 100644
index 85a8ce5f..00000000
--- a/1-getting-started-lessons/translations/README.ja.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Web 開発を始めるにあたって
-
-このセクションでは、プロの開発者になるために重要なプロジェクトベースではない概念を紹介します。
-
-### トピック
-
-1. [プログラミング言語と開発ツール入門](../1-intro-to-programming-languages/translations/README.ja.md)
-2. [GitHub の基本](../2-github-basics/translatiions/README.ja.md)
-3. [アクセシビリティの基本](../3-accessibility/translations/README.ja.md)
-
-### Credits
-
-Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer)
-
-Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees)
-
-Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique)
diff --git a/1-getting-started-lessons/translations/README.ko.md b/1-getting-started-lessons/translations/README.ko.md
deleted file mode 100644
index 7419e0a4..00000000
--- a/1-getting-started-lessons/translations/README.ko.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 웹 개발 시작하기
-
-커리큘럼의 해당 세션에서는 프로젝트 기반이 아닌 전문 개발자가 되는 데 중요한 개념을 소개합니다.
-
-### 토픽
-
-1. [프로그래밍 언어 및 도구 소개](../1-intro-to-programming-languages/translations/README.ko.md)
-2. [GitHub의 기초](../2-github-basics/translations/README.ko.md)
-3. [접근성의 기초](../3-accessibility/translations/README.ko.md)
-
-### 크레딧
-
-Basics of Accessibility was written with ♥️ by [Christopher Harrison](https://twitter.com/geektrainer)
-
-Introduction to GitHub was written with ♥️ by [Floor Drees](https://twitter.com/floordrees)
-
-Introduction to Programming Languages and Tools of the Trade was written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique)
diff --git a/1-getting-started-lessons/translations/README.ms.md b/1-getting-started-lessons/translations/README.ms.md
deleted file mode 100644
index cf515f1f..00000000
--- a/1-getting-started-lessons/translations/README.ms.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Mulai dengan Pembangunan Web
-
-Dalam bahagian kurikulum ini, anda akan diperkenalkan kepada konsep bukan projek yang penting untuk menjadi pembangun profesional.
-
-### Topik
-
-1. [Pengenalan Bahasa Pengaturcaraan dan Alat Perdagangan](../1-intro-to-programming-languages/translations/README.ms.md)
-2. [Pengetahuan Asas tentang GitHub](../2-github-basics/translations/README.ms.md)
-3. [Asas Kebolehcapaian](../3-accessibility/translations/README.ms.md)
-
-### Kredit
-
-Asas Kebolehcapaian ditulis dengan ♥️ karya [Christopher Harrison](https://twitter.com/geektrainer)
-
-Pengetahuan Asas tentang GitHub ditulis dengan ♥️ karya [Floor Drees](https://twitter.com/floordrees)
-
-Pengenalan Bahasa Pengaturcaraan dan Alat Perdagangan ditulis dengan ♥️ karya [Jasmine Greenaway](https://twitter.com/paladique)
diff --git a/1-getting-started-lessons/translations/README.nl.md b/1-getting-started-lessons/translations/README.nl.md
deleted file mode 100644
index 811e2f97..00000000
--- a/1-getting-started-lessons/translations/README.nl.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Aan de slag met webontwikkeling
-
-In dit deel van het curriculum maakt u kennis met niet-projectgebaseerde concepten die belangrijk zijn om een professionele ontwikkelaar te worden.
-
-### Onderwerpen
-
-1. [Inleiding tot programmeertalen en tools van het vak](../1-intro-to-programming-languages/translations/README.nl.md)
-2. [Basisprincipes van GitHub](../2-github-basics/translations/README.nl.md)
-3. [Basisprincipes van toegankelijkheid](../3-accessibility/translations/README.nl.md)
-
-### Credits
-
-Basisprincipes van toegankelijkheid is geschreven met ♥ door [Christopher Harrison](https://twitter.com/geektrainer)
-
-Inleiding tot GitHub is geschreven met ♥ ️door [Floor Drees](https://twitter.com/floordrees)
-
-Inleiding tot programmeertalen en tools van het vak is geschreven met ♥ ️door [Jasmine Greenaway](https://twitter.com/paladique)
diff --git a/1-getting-started-lessons/translations/README.np.md b/1-getting-started-lessons/translations/README.np.md
deleted file mode 100644
index edb0b183..00000000
--- a/1-getting-started-lessons/translations/README.np.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# वेब विकासको साथ सुरू गर्दै
-
-पाठ्यक्रमको यस खण्डमा, तपाईंलाई व्यावसायिक विकासकर्ता बन्न महत्त्वपूर्ण गैर-प्रोजेक्ट-आधारित अवधारणाहरूसँग परिचय गराइनेछ।
-
-### विषयहरू
-
-1. [प्रोग्रामिङ भाषाहरू र व्यापारका उपकरणहरूको परिचय](../1-intro-to-programming-languages/translations/README.np.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/1-getting-started-lessons/translations/README.pb.md b/1-getting-started-lessons/translations/README.pb.md
deleted file mode 100644
index 74facadb..00000000
--- a/1-getting-started-lessons/translations/README.pb.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# ਵੈੱਬ ਵਿਕਾਸ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰਨਾ
-
-ਕੋਰਸ ਦੇ ਇਸ ਭਾਗ ਵਿੱਚ, ਤੁਹਾਨੂੰ ਇੱਕ ਪੇਸ਼ੇਵਰ ਵਿਕਾਸਕਾਰ ਬਣਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਗੈਰ-ਪ੍ਰੋਜੈਕਟ ਅਧਾਰਤ ਸੰਕਲਪਾਂ ਨਾਲ ਜਾਣੂ ਕਰਵਾਇਆ ਜਾਵੇਗਾ।
-
-### ਵਿਸ਼ਾ
-
-1. [ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਵਪਾਰਕ ਸਾਧਨਾਂ ਦੀ ਜਾਣ-ਪਛਾਣ](../1-intro-to-programming-languages/translations/README.en.md)
-2. [GitHub ਬੇਸਿਕਸ](../2-github-basics/translations/README.en.md)
-3. [ਪਹੁੰਚਯੋਗਤਾ ਮੂਲ ਗੱਲਾਂ](../3-accessibility/translations/README.en.md)
-
-### ਕ੍ਰੈਡਿਟ
-
-ਪਹੁੰਚਯੋਗਤਾ ਦੀਆਂ ਬੁਨਿਆਦੀ ਗੱਲਾਂ [ਕ੍ਰਿਸਟੋਫਰ ਹੈਰੀਸਨ](https://twitter.com/geektrainer) ਦੁਆਰਾ ♥️ ਦੁਆਰਾ ਲਿਖੀਆਂ ਗਈਆਂ ਸਨ।
-
-GitHub ਦੀ ਜਾਣ-ਪਛਾਣ [floordress](https://twitter.com/floordtrees) ਦੁਆਰਾ ♥️ ਦੁਆਰਾ ਲਿਖੀ ਗਈ ਸੀ।
-
-ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਅਤੇ ਵਪਾਰਕ ਸਾਧਨਾਂ ਦੀ ਜਾਣ-ਪਛਾਣ [ਜੈਸਮੀਨ ਗ੍ਰੀਨਵੇ] (https://twitter.com/paladique) ਦੁਆਰਾ ♥️ ਦੁਆਰਾ ਲਿਖੀ ਗਈ ਸੀ।
\ No newline at end of file
diff --git a/1-getting-started-lessons/translations/README.pt.md b/1-getting-started-lessons/translations/README.pt.md
deleted file mode 100644
index 280c6430..00000000
--- a/1-getting-started-lessons/translations/README.pt.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Getting Started with Web Development
-
-Nesta seção do currículo, você será introduzida a conceitos não baseados em projetos mas que são importantes para se tornar um desenvolvedor profissional.
-
-### Tópicos
-
-1. [Introdução a Linguagens de Programação e Ferramentas](../1-intro-to-programming-languages/translations/README.pt.md)
-2. [GitHub Básico](../2-github-basics/translations/README.pt.md)
-3. [Acesibilidade Básica](../3-accessibility/translations/README.pt.md)
-
-### Créditos
-
-Básico em Acessibilidade foi escrito com ♥️ por [Christopher Harrison](https://twitter.com/geektrainer)
-
-Introdução ao GitHub foi escrito com ♥️ por [Floor Drees](https://twitter.com/floordrees)
-
-Introdução a Linguagens de Programação e Ferramentas foi escrito com ♥️ por [Jasmine Greenaway](https://twitter.com/paladique)
diff --git a/1-getting-started-lessons/translations/README.ru.md b/1-getting-started-lessons/translations/README.ru.md
deleted file mode 100644
index 6accaa04..00000000
--- a/1-getting-started-lessons/translations/README.ru.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# Начало работы в веб-разработке
-
-В этом разделе учебной программы вы познакомитесь с непроектными концепциями, важными для того, чтобы стать профессиональным разработчиком.
-
-### Темы
-
-1. [Введение в языки программирования и профессиональные инструменты](../1-intro-to-programming-languages/translations/README.ru.md)
-2. [Введение в GitHub](../2-github-basics/translations/README.ru.md)
-3. [Основы доступности (Accessibility)](../3-accessibility/README.md)
-
-### Авторы
-
-Введение в языки программирования и профессиональные инструменты написано с ♥️ [Jasmine Greenaway](https://twitter.com/paladique)
-
-Введение в GitHub написано с ♥️ [Floor Drees](https://twitter.com/floordrees)
-
-Основы доступности (Accessibility) написано с ♥️ [Christopher Harrison](https://twitter.com/geektrainer)
diff --git a/1-getting-started-lessons/translations/README.ta.md b/1-getting-started-lessons/translations/README.ta.md
deleted file mode 100644
index 2395045c..00000000
--- a/1-getting-started-lessons/translations/README.ta.md
+++ /dev/null
@@ -1,18 +0,0 @@
-# இணைய அபிவிருத்தியுடன் தொடங்குதல்
-
-பாடத்திட்டத்தின் இந்தப் பிரிவில், தொழில்முறை மேம்பாட்டாளராக ஆவதற்கு முக்கியமான திட்ட அடிப்படையிலான கருத்துக்கள் உங்களுக்கு அறிமுகப்படுத்தப்படும்.
-
-### தலைப்புகள்
-
-1. [வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம்](../1-intro-to-programming-languages/README.md)
-2. [கிட்ஹப் அறிமுகம்](../2-github-basics/README.md)
-3. [அணுகல்தன்மையின் அடிப்படைகள்](../3-accessibility/README.md)
-
-### கடன்கள்
-
-வர்த்தகத்தின் நிரலாக்க மொழிகள் மற்றும் கருவிகள் அறிமுகம் ♥️ எழுதியவர் [ஜாஸ்மின் கிரீன்வே](https://twitter.com/paladique/)
-
-கிட்ஹப் அறிமுகம் ♥️ எழுதியவர் [ஃப்ளோர் டிரீஸ்](https://twitter.com/floordrees/)
-
-அணுகல்தன்மையின் அடிப்படைகள் ♥️ எழுதியவர் [கிறிஸ்டோபர் ஹாரிசன்](https://twitter.com/geektrainer/)
-
diff --git a/1-getting-started-lessons/translations/README.uk.md b/1-getting-started-lessons/translations/README.uk.md
deleted file mode 100644
index f12ccddf..00000000
--- a/1-getting-started-lessons/translations/README.uk.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# Початок роботи з веб-розробкою
-
-У цьому розділі навчальної програми ви познайомитеся з концепціями важливими для того, щоб стати професійним розробником, які не опираються на проектах.
-
-### Теми
-
-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/1-getting-started-lessons/translations/README.zh-cn.md b/1-getting-started-lessons/translations/README.zh-cn.md
deleted file mode 100644
index 397cf758..00000000
--- a/1-getting-started-lessons/translations/README.zh-cn.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 开始 Web 开发
-
-在课程的这一部分，我们会通过不编写代码的方式介绍一些概念，这些概念对于成为一位专业的开发者非常重要。
-
-### 主题
-
-1. [编程语言概述与工具介绍](../1-intro-to-programming-languages/translations/README.zh-cn.md)
-2. [GitHub 基础知识](../2-github-basics/translations/README.zh-cn.md)
-3. [无障碍性基础知识](../3-accessibility/translations/README.zh-cn.md)
-
-### 鸣谢
-
-无障碍性基础知识由 [Christopher Harrison](https://twitter.com/geektrainer) 用 ♥️ 编写
-
-GitHub 基础知识由 [Floor Drees](https://twitter.com/floordrees) 用 ♥️ 编写
-
-编程语言概述与工具介绍由 [Jasmine Greenaway](https://twitter.com/paladique) 用 ♥️ 编写
diff --git a/1-getting-started-lessons/translations/README.zh-tw.md b/1-getting-started-lessons/translations/README.zh-tw.md
deleted file mode 100644
index f17c7e23..00000000
--- a/1-getting-started-lessons/translations/README.zh-tw.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# 網頁開發入門
-
-這段課程會說明重要的程式開發觀念，不會以程式碼為導向，讓你成為出色的開發人員。
-
-### 主題
-
-1. [程式語言概論與必備工具](../1-intro-to-programming-languages/translations/README.zh-tw.md)
-2. [GitHub 簡介](../2-github-basics/translations/README.zh-tw.md)
-3. [建立無障礙網頁](../3-accessibility/translations/README.zh-tw.md)
-
-### 參與人員
-
-文章「無障礙網頁」是由 [Christopher Harrison](https://twitter.com/geektrainer) 用滿滿的 ♥️ 來編寫。
-
-文章「GitHub 簡介」是由 [Floor Drees](https://twitter.com/floordrees) 用滿滿的 ♥️ 來編寫。
-
-文章「建立無障礙網頁」是由  [Jasmine Greenaway](https://twitter.com/paladique) 用滿滿的 ♥️ 來編寫。
diff --git a/2-js-basics/1-data-types/translations/README.de.md b/2-js-basics/1-data-types/translations/README.de.md
deleted file mode 100644
index d005c393..00000000
--- a/2-js-basics/1-data-types/translations/README.de.md
+++ /dev/null
@@ -1,197 +0,0 @@
-# JavaScript-Grundlagen: Datentypen
-
-[![Datentypen in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Datentypen in JavaScript")
-
-## [Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
-
-Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet.
-
-Beginnen wir mit Variablen und den Datentypen, die sie füllen!
-
-## Variablen
-
-Variablen speichern Werte, die im gesamten Code verwendet und geändert werden können.
-
-Das Erstellen und **Deklarieren** einer Variablen hat die folgende Syntax **[keyword] [name]**. Es besteht aus zwei Teilen:
-
-- **Keyword**. Schlüsselwörter können `let` oder `var` sein.
-
-    > Hinweis: Das Schlüsselwort `let` wurde in ES6 eingeführt und gibt Ihrer Variablen einen sogenannten "Block Scope". Es wird empfohlen, `let` over` var` zu verwenden. Wir werden uns in zukünftigen Teilen eingehender mit Blockbereichen befassen.
-- **Der Variablenname**, dies ist ein Name, den Sie selbst wählen.
-
-### Aufgabe - Arbeiten mit Variablen
-
-1. **Deklariere eine Variable**. Deklarieren wir eine Variable mit dem Schlüsselwort `let`:
-
-
-    ```javascript
-    let myVariable;
-    ```
-
-   `myVariable` wurde jetzt mit dem Schlüsselwort `let` deklariert. Es hat derzeit keinen Wert.
-
-1. **Weisen Sie einen Wert zu**. Speichern Sie einen Wert in einer Variablen mit dem Operator `=`, gefolgt vom erwarteten Wert.
-
-    ```javascript
-    myVariable = 123;
-    ```
-
-   > Hinweis: Die Verwendung von `=` in dieser Lektion bedeutet, dass wir einen "Zuweisungsoperator" verwenden, mit dem ein Wert auf eine Variable gesetzt wird. Es bedeutet nicht Gleichheit.
-
-    `myVariable` wurde jetzt mit dem Wert 123 *initialisiert*.
-
-
-1. **Refactor**. Ersetzen Sie Ihren Code durch die folgende Anweisung.
-
-    ```javascript
-    let myVariable = 123;
-    ```
-
-    Das Obige wird als _explizite Initialisierung_ bezeichnet, wenn eine Variable deklariert und gleichzeitig ein Wert zugewiesen wird.
-
-1. **Ändern Sie den Variablenwert**. Ändern Sie den Variablenwert folgendermaßen:
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   Sobald eine Variable deklariert ist, können Sie ihren Wert an jeder Stelle in Ihrem Code mit dem Operator `=` und dem neuen Wert ändern.
-
-    ✅ Probieren Sie es aus! Sie können JavaScript direkt in Ihren Browser schreiben. Öffnen Sie ein Browserfenster und navigieren Sie zu Developer Tools. In der Konsole finden Sie eine Eingabeaufforderung. Geben Sie `let myVariable = 123` ein, drücken Sie die Eingabetaste und geben Sie `myVariable` ein. Was geschieht? Beachten Sie, dass Sie in den folgenden Lektionen mehr über diese Konzepte erfahren werden.
-
-## Konstanten
-
-Die Deklaration und Initialisierung einer Konstante folgt denselben Konzepten wie eine Variable, mit Ausnahme des Schlüsselworts `const`. Konstanten werden normalerweise mit allen Großbuchstaben deklariert.
-
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-Konstanten ähneln Variablen mit zwei Ausnahmen:
-
-- **Muss einen Wert haben**. Konstanten müssen initialisiert werden, sonst tritt beim Ausführen von Code ein Fehler auf.
-- **Referenz kann nicht geändert werden**. Die Referenz einer Konstante kann nach der Initialisierung nicht mehr geändert werden. Andernfalls tritt beim Ausführen von Code ein Fehler auf. Schauen wir uns zwei Beispiele an:
-- **Einfacher Wert**. Folgendes ist NICHT erlaubt:
-
-   
-      ```javascript
-      const PI = 3;
-      PI = 4; // not allowed
-      ```
- 
-   - **Objektreferenz ist geschützt**. Folgendes ist NICHT erlaubt.
-
-   
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // not allowed
-      ```
-
-    - **Objektwert ist nicht geschützt**. Folgendes ist erlaubt:
-
-    
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // allowed
-      ```
-
-      Oben ändern Sie den Wert des Objekts, aber nicht die Referenz selbst, wodurch es zulässig wird.
-
-   > Beachten Sie, dass ein `const` bedeutet, dass die Referenz vor einer Neuzuweisung geschützt ist. Der Wert ist jedoch nicht änderbar und kann sich ändern, insbesondere wenn es sich um ein komplexes Konstrukt wie ein Objekt handelt.
-
-## Datentypen
-
-Variablen können viele verschiedene Arten von Werten wie Zahlen und Text speichern. Diese verschiedenen Arten von Werten werden als **Datentyp** bezeichnet. Datentypen sind ein wichtiger Bestandteil der Softwareentwicklung, da sie Entwicklern helfen, Entscheidungen darüber zu treffen, wie der Code geschrieben und wie die Software ausgeführt werden soll. Darüber hinaus verfügen einige Datentypen über einzigartige Funktionen, mit denen zusätzliche Informationen in einen Wert umgewandelt oder extrahiert werden können.
-
-✅ Datentypen werden auch als JavaScript-Datenprimitive bezeichnet, da es sich um die Datentypen der niedrigsten Ebene handelt, die von der Sprache bereitgestellt werden. Es gibt 6 primitive Datentypen: Zeichenfolge, Zahl, Bigint, Boolescher Wert, undefiniert und Symbol. Nehmen Sie sich eine Minute Zeit, um zu visualisieren, was jedes dieser Grundelemente darstellen könnte. Was ist ein `zebra`? Wie wäre es mit `0`? `true`?
-
-### Zahlen
-
-Im vorherigen Abschnitt war der Wert von `myVariable` ein Datentyp für Zahlen.
-
-`let myVariable = 123;`
-
-Variablen können alle Arten von Zahlen speichern, einschließlich Dezimalstellen oder negativer Zahlen. Zahlen können auch mit arithmetischen Operatoren verwendet werden, die im [nächsten Abschnitt](#rechenzeichen) behandelt werden.
-
-### Rechenzeichen
-
-Es gibt verschiedene Arten von Operatoren, die beim Ausführen von arithmetischen Funktionen verwendet werden können. Einige sind hier aufgeführt:
-
-| Symbol | Beschreibung                                                | Beispiel                            |
-| ------ | ----------------------------------------------------------- | ----------------------------------- |  |
-| `+`    | **Addition**: Berechnet die Summe zweier Zahlen             | `1 + 2 // erwartete Antwort ist 3`  |
-| `-`    | **Subtraktion**: Berechnet die Differenz zweier Zahlen      | `1 - 2 // erwartete Antwort ist -1` |
-| `*`    | **Multiplikation**: Berechnet das Produkt zweier Zahlen     | `1 * 2 // erwartete Antwort ist 2`  |
-| `/`    | **Division**: Berechnet den Quotienten aus zwei Zahlen      | `1/2 // erwartete Antwort ist 0.5`  |
-| %%     | **Rest**: Berechnet den Rest aus der Division zweier Zahlen | `1 % 2 // erwartete Antwort ist 1`  |
-
-
-✅ Probieren Sie es aus! Versuchen Sie eine arithmetische Operation in der Konsole Ihres Browsers. Überraschen Sie die Ergebnisse?
-
-### Strings
-
-Zeichenfolgen sind Zeichensätze, die zwischen einfachen oder doppelten Anführungszeichen stehen.
-
-- `'Das ist eine Saite'`
-- `"Dies ist auch eine Zeichenfolge"`
-- `let myString = 'Dies ist ein in einer Variablen gespeicherter Zeichenfolgenwert';`
-
-Denken Sie daran, beim Schreiben einer Zeichenfolge Anführungszeichen zu verwenden. Andernfalls geht JavaScript davon aus, dass es sich um einen Variablennamen handelt.
-
-### Formatieren von Zeichenfolgen
-
-Zeichenfolgen sind Textzeichenfolgen und müssen von Zeit zu Zeit formatiert werden.
-
-Verwenden Sie den Operator `+`, um zwei oder mehr Zeichenfolgen zu **verketten** oder miteinander zu verbinden.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
-```
-.
-✅ Warum ist in JavaScript `1 + 1 = 2`, aber `'1' + '1' = 11?` Denken Sie darüber nach. Was ist mit `'1' + 1`?
-
-** Vorlagenliterale ** sind eine weitere Möglichkeit, Zeichenfolgen zu formatieren, außer dass anstelle von Anführungszeichen das Backtick verwendet wird. Alles, was kein einfacher Text ist, muss in die Platzhalter `${ }` eingefügt werden. Dies schließt alle Variablen ein, die Zeichenfolgen sein können.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello, World!
-```
-
-Sie können Ihre Formatierungsziele mit beiden Methoden erreichen, aber Vorlagenliterale berücksichtigen alle Leerzeichen und Zeilenumbrüche.
-
-✅ Wann würden Sie ein Vorlagenliteral im Vergleich zu einer einfachen Zeichenfolge verwenden?
-
-### Boolesche Werte
-
-Boolesche Werte können nur zwei Werte sein: `true` oder `false`. Boolesche Werte können dabei helfen, Entscheidungen darüber zu treffen, welche Codezeilen ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind. In vielen Fällen helfen [Operatoren](#rechenzeichen) beim Festlegen des Werts eines Booleschen Werts, und Sie werden häufig feststellen und schreiben, dass Variablen initialisiert oder ihre Werte mit einem Operator aktualisiert werden.
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ Eine Variable kann als "wahr" betrachtet werden, wenn sie als boolescher Wert "wahr" ausgewertet wird. Interessanterweise sind in JavaScript [alle Werte wahr, sofern sie nicht als falsch definiert sind](https://developer.mozilla.org/docs/Glossary/Truthy).
-
---- ---.
-
-## 🚀 Herausforderung
-
-JavaScript ist bekannt für seine überraschende Art, gelegentlich mit Datentypen umzugehen. Recherchiere ein bisschen über diese 'Fallstricke'. Zum Beispiel: Groß- und Kleinschreibung kann beißen! Versuchen Sie dies in Ihrer Konsole: `let age = 1; let Age = 2; age == Age` (löst `false` auf - warum?). Welche anderen Fallstricke können Sie finden?
-
-## [Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
-
-## Review & Selbststudium
-
-Schauen Sie sich [diese Liste der JavaScript-Übungen](https://css-tricks.com/snippets/javascript/) an und probieren Sie eine aus. Was hast du gelernt?
-
-## Zuordnung
-
-[Praxis für Datentypen](assignment.de.md)
diff --git a/2-js-basics/1-data-types/translations/README.es.md b/2-js-basics/1-data-types/translations/README.es.md
deleted file mode 100644
index bea702ae..00000000
--- a/2-js-basics/1-data-types/translations/README.es.md
+++ /dev/null
@@ -1,192 +0,0 @@
-# Conceptos básicos de JavaScript: tipos de datos
-
-![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png)
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-[![Declaracion de Variables](https://img.youtube.com/vi/mUvddpeBCAs/0.jpg)](https://youtube.com/watch?v=mUvddpeBCAs "Declaracion de Variables")
-
-[![Tipos de datos en JavaScript](https://img.youtube.com/vi/fuksTtTga90/0.jpg)](https://youtube.com/watch?v=fuksTtTga90 "Tipos de datos en JavaScript")
-
-## [Pre-lectura prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
-
-Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web.
-
-¡Comencemos con las variables y los tipos de datos que las pueblan!
-
-## Variables
-
-Las variables almacenan valores que se pueden usar y cambiar a lo largo de su código.
-
-Crear y **declarar** una variable tiene la siguiente sintaxis **[keyword] [name]**. Está compuesto por dos partes:
-
-- **Keyword**. Las palabras clave pueden ser `let` o `var`.
-
-    > Tenga en cuenta que la palabra clave `let` se introdujo en ES6 y le da a su variable un llamado _alcance de bloque_ (block scope). Se recomienda utilizar `let` sobre `var`. Cubriremos los alcances de bloque con más profundidad en partes futuras.
-- **El nombre de la variable**, este es un nombre que elige usted mismo.
-
-### Tarea - trabajar con variables
-
-1. **Declara una variable**. Declaremos una variable usando la palabra clave `let`:
-
-    ```javascript
-    let myVariable;
-    ```
-
-   `myVariable` ahora se ha declarado usando la palabra clave `let`. Actualmente no tiene ningún valor.
-
-1. **Asignar un valor**. Almacene un valor en una variable con el operador `=`, seguido del valor esperado.
-
-    ```javascript
-    myVariable = 123;
-    ```
-
-   > Nota: el uso de `=` en esta lección significa que hacemos uso de un "operador de asignación", que se utiliza para establecer un valor en una variable. No denota igualdad.
-
-    `myVariable` ahora se ha *inicializado* con el valor 123.
-
-1. **Refactorizar código**. Reemplace su código con la siguiente declaración.
-
-    ```javascript
-    let myVariable = 123;
-    ```
-
-    Lo anterior se denomina _inicialización explícita_ cuando se declara una variable y se le asigna un valor al mismo tiempo.
-
-1. **Cambiar el valor de la variable**. Cambie el valor de la variable de la siguiente manera:
-
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   Una vez que se declara una variable, puede cambiar su valor en cualquier punto de su código con el operador `=` y el nuevo valor.
-
-    ✅ ¡Pruébalo! Puede escribir JavaScript directamente en su navegador. Abra una ventana del navegador y navegue hasta Herramientas de desarrollo. En la consola, encontrará un mensaje; escriba `let myVariable = 123`, presione retorno, luego escriba `myVariable`. ¿Lo que pasa? Tenga en cuenta que aprenderá más sobre estos conceptos en lecciones posteriores.
-
-## Constantes
-
-La declaración e inicialización de una constante sigue los mismos conceptos que una variable, con la excepción de la palabra clave `const`. Las constantes se declaran normalmente con todas las letras mayúsculas.
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-Las constantes son similares a las variables, con dos excepciones:
-
-- **Deben tener un valor**. Las constantes deben inicializarse o se producirá un error al ejecutar el código.
-- **La referencia no se puede cambiar**. La referencia de una constante no se puede cambiar una vez inicializada, o se producirá un error al ejecutar el código. Veamos dos ejemplos:
-    - **Valor simple**. NO se permite lo siguiente:
-
-   
-      ```javascript
-      const PI = 3;
-      PI = 4; // no permitido
-      ```
- 
-   - **La referencia del objeto está protegida**. NO se permite lo siguiente.
-   
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // no permitido
-      ```
-
-    - **El valor del objeto no está protegido**. Se permite lo siguiente:
-    
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // permitido
-      ```
-
-      Arriba está cambiando el valor del objeto pero no la referencia en sí, lo que lo permite.
-
-   > Tenga en cuenta que `const` significa que la referencia está protegida contra la reasignación. Sin embargo, el valor no es _inmutable_ y puede cambiar, especialmente si es una construcción compleja como un objeto.
-
-## Tipos de datos
-
-Las variables pueden almacenar muchos tipos diferentes de valores, como números y texto. Estos diversos tipos de valores se conocen como **tipo de datos**. Los tipos de datos son una parte importante del desarrollo de software porque ayudan a los desarrolladores a tomar decisiones sobre cómo se debe escribir el código y cómo se debe ejecutar el software. Además, algunos tipos de datos tienen características únicas que ayudan a transformar o extraer información adicional en un valor.
-
-✅ Los tipos de datos también se conocen como primitivas de datos de JavaScript, ya que son los tipos de datos de nivel más bajo que proporciona el lenguaje. Hay 6 tipos de datos primitivos: cadena, número, bigint, booleano, indefinido y símbolo. Tómese un minuto para visualizar lo que podría representar cada una de estas primitivas. ¿Qué es una `cebra`? ¿Qué tal `0`? ¿`true`?
-
-### Números
-
-En la sección anterior, el valor de "myVariable" era un tipo de datos numérico.
-
-`let myVariable = 123;`
-
-Las variables pueden almacenar todo tipo de números, incluidos decimales o números negativos. Los números también se pueden usar con operadores aritméticos, que se tratan en la [siguiente sección](#operadores-aritméticos).
-
-### Operadores aritméticos
-
-Hay varios tipos de operadores que se pueden utilizar al realizar funciones aritméticas, y algunos se enumeran aquí:
-
-| Símbolo | Descripción                                                           | Ejemplo                                |
-| ------- | --------------------------------------------------------------------- | -------------------------------------- |
-| `+`     | **Suma**: Calcula la suma de dos números                              | `1 + 2 //la respuesta esperada es 3`   |
-| `-`     | **Resta**: Calcula la diferencia de dos números                       | `1 - 2 //la respuesta esperada es -1`  |
-| `*`     | **Multiplicación**: Calcula el producto de dos números                | `1 * 2 //la respuesta esperada es 2`   |
-| `/`     | **División**: Calcula el cociente de dos números                      | `1 / 2 //la respuesta esperada es 0.5` |
-| `%`     | **Restante**: Calcula el resto a partir de la división de dos números | `1 % 2 //la respuesta esperada es 1`   |
-
-✅ ¡Pruébalo! Pruebe una operación aritmética en la consola de su navegador. ¿Te sorprenden los resultados?
-
-### String
-
-Las cadenas (Strings) son conjuntos de caracteres que residen entre comillas simples o dobles.
-
-- `'Esto es un String'`
-- `"Esto también es un String"`
-- `let myString = 'Este es un valor del String almacenado en una variable';`
-
-Recuerde utilizar comillas al escribir un String, de lo contrario JavaScript asumirá que es un nombre de variable.
-
-### Formateo de Strings
-
-Los Strings son textuales y requerirán formato de vez en cuando.
-
-Para **concatenar** dos o más Strings, o unirlas, use el operador `+`.
-
-```javascript
-let myString1 = "Hola";
-let myString2 = "Mundo";
-
-myString1 + myString2 + "!"; //¡Hola, mundo!
-myString1 + " " + myString2 + "!"; //¡Hola, mundo!
-myString1 + ", " + myString2 + "!"; //¡Hola, mundo!
-
-```
-
-✅ ¿Por qué `1 + 1 = 2` en JavaScript, pero `'1' + '1' = 11?` Piense en ello. ¿Qué pasa con `'1' + 1`?
-
-**Los literales de plantilla** son otra forma de formatear Strings, excepto que en lugar de comillas, se usa la comilla invertida. Todo lo que no sea texto sin formato debe colocarse dentro de los marcadores de posición `${ }`. Esto incluye cualquier variable que pueda ser Strings.
-
-
-```javascript
-let myString1 = "Hola";
-let myString2 = "Mundo";
-
-`${myString1} ${myString2}!` //¡Hola, mundo!
-`${myString1}, ${myString2}!` //¡Hola, mundo!
-```
-
-Puede lograr sus objetivos de formato con cualquier método, pero los literales de plantilla respetarán los espacios y saltos de línea.
-
-✅ ¿Cuándo usaría una plantilla literal frente a un String simple?
-
-### Booleanos
-
-Los booleanos pueden tener solo dos valores: `true` o `false`. Los valores booleanos pueden ayudar a tomar decisiones sobre qué líneas de código deben ejecutarse cuando se cumplen ciertas condiciones. En muchos casos, [operadores](#operadores-aritméticos) ayudan a establecer el valor de un booleano y, a menudo, notará y escribirá variables que se inicializan o que sus valores se actualizan con un operador.
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ Una variable se puede considerar 'verdadera' si se evalúa como un valor booleano 'verdadero'. Curiosamente, en JavaScript, [todos los valores son verdaderos a menos que se definan como falsos](https://developer.mozilla.org/docs/Glossary/Truthy).
-
-🚀 Desafío: JavaScript es conocido por sus sorprendentes formas de manejar tipos de datos en ocasiones. Investiga un poco sobre estos "errores". Por ejemplo: ¡la sensibilidad a mayúsculas y minúsculas puede morder! Pruebe esto en su consola: `let age = 1; let Age = 2; age == Age` (resuelve `false` - ¿por qué?). ¿Qué otras trampas puedes encontrar?
-
-## [Post-lectura prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
-
-## Revisión y autoestudio
-
-Eche un vistazo a [esta lista de ejercicios de JavaScript](https://css-tricks.com/snippets/javascript/) y pruebe uno. ¿Qué aprendiste?
-
-**Tarea**: [Práctica de tipos de datos](assignment.es.md)
diff --git a/2-js-basics/1-data-types/translations/README.fr.md b/2-js-basics/1-data-types/translations/README.fr.md
deleted file mode 100644
index 5a85c7e8..00000000
--- a/2-js-basics/1-data-types/translations/README.fr.md
+++ /dev/null
@@ -1,201 +0,0 @@
-# Bases de JavaScript: Types de Données
-
-![Bases de JavaScript - Types de Données](/sketchnotes/webdev101-js-datatypes.png)
-> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz préalable
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=fr)
-
-Cette leçon couvre les bases de JavaScript, le language qui permet l'interactivité sur le web.
-
-> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-variables/?WT.mc_id=academic-77807-sagibbon)!
-
-[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-> 🎥 Cliquez sur l'image ci-dessus pour voir une vidéo sur les types de données et des variables
-
-Commençons par les variables et les types de données qui les composent!
-
-## Variables
-
-Les variables stockent des valeurs qui peuvent être utilisées et changées tout au long de votre code.
-
-Créer et **déclarer** une variable se fait avec la syntaxe suivante **[mot-clé] [nom]**. Elle est composée de deux parties:
-
-- **Mot-clé**. Le mot-clé peut être `let` ou `var`.  
-
-   > Note: Le mot-clé `let` a été introduit par ES6 et donne à votre variable une _portée de bloc_. Il vous est recommandé d'utiliser `let` plutôt que `var`. Nous allons couvrir les portées de bloc de manière plus approfondie dans l'une des partie suivantes.
-- **Le nom de la variable**. Ceci est un nom que vous choisissez.
-
-### Tâche - travailler avec les variables
-
-1. **Déclarer une variable**. Déclarons une variable en utilisant le mot-clé `let`:
-
-    ```javascript
-    let myVariable;
-    ```
-
-   `myVariable` a maintenant été déclarée en utilisant le mot-clé `let`. Elle n'a actuellement pas de valeur.
-
-1. **Assigner une valeur**. Stocker une valeur dans une variable avec l'opérateur `=`, suivi de la valeur souhaitée.
-
-    ```javascript
-    myVariable = 123;
-    ```
-
-   > Note: L'utilisation de `=` dans cette leçon signifie que nous utilisons un "opérateur d'assignation", utilisé pour donner une valeur à une variable. Il ne dénote pas une égalité.
-
-   `myVariable` a maintenant été *initialisée* avec la valeur 123.
-
-1. **Refactoriser**. Remplacer votre code par l'instruction suivante.
-
-    ```javascript
-    let myVariable = 123;
-    ```
-
-    Ceci est appelé une _initialisation explicite_ lorsqu'une variable est déclarée et se voit assigner une valeur en même temps.
-
-1. **Changer la valeur de la variable**. Changez la valeur de la variable de la façon suivante :
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   Après qu'une variable ait été déclarée, vous pouvez changer sa valeur à tout moment dans votre code avec l'opérateur `=` et la nouvelle valeur.
-
-   ✅ Essayez ! Vous pouvez écrire du JavaScript directement dans votre navigateur. Ouvrez une fenêtre du navigateur et allez dans les Outils de Développement. Dans la console, vous trouverez une invite ; tapez `let myVariable = 123`, pressez la touche Retour Chariot, puis tapez `myVariable`. Que se passe-t-il ? Note: Vous en apprendrez plus sur ces concepts dans les leçons suivantes.
-
-## Constantes
-
-La déclaration et l'initialisation d'une constante suit les même concepts que pour une variable, à l'exception du mot-clé `const`. Les constantes sont généralement déclarées en majuscules.
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-Les constantes sont similaires aux variables, avec deux exceptions:
-
-- **Doivent avoir une valeur**. Les constantes doivent être initialisées, ou une erreur se produira à l'exécution du code.
-- **La référence ne peut pas être changée**. La référence d'une constante ne peut pas être changée une fois initialisée, ou une erreur se produira à l'exécution du code. Voyons deux exemples:
-   - **Valeur simple**. Ceci N'EST PAS autorisé:
-   
-      ```javascript
-      const PI = 3;
-      PI = 4; // not allowed
-      ```
- 
-   - **La référence à un objet est protégée**. Ceci N'EST PAS autorisé:
-   
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // not allowed
-      ```
-
-    - **La valeur d'une objet n'est pas protégée**. Ceci EST autorisé:
-    
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // allowed
-      ```
-
-      Ci-dessus vous changez la valeur de l'objet mais pas la référence elle-même, ce qui rend le changement autorisé.
-
-   > Note: Un `const` signifie que la référence est protégée contre une réassignation. La valeur n'est toutefois pas _immutable_ et peut changer, en particulier s'il s'agit d'une structure complexe telle qu'un objet.
-
-## Types de Données
-
-Les variables peuvent stocker différents types de valeurs, tels que des nombres et du texte. Ces différents types de valeurs sont connus sous le nom de **type de donnée**. Les types de données sont un composant important du développement logiciel car il aide les développeurs à décider comment le code devrait être écrit et comment le logiciel devrait s'exécuter. De plus, certains types de données viennent avec des fonctionnalités uniques qui aident à transformer ou extraire des informations supplémentaires d'une valeur.
-
-✅ On fait aussi référence aux types de données sous le nom de primitives de données en JavaScript, puisqu'ils sont les types de données du plus bas niveau fournis par le langage. Il y a 6 types de données primitifs : string (chaîne de caractères), number (numérique), bigint (entier long), boolean (booléen), undefined (indéfini) et symbol (symbole). Prenez un instant pour visualiser ce que chacune de ces primitives peut représenter. Qu'est-ce qu'un `zèbre` ? Et `0` ? `true` ?
-
-### Nombres
-
-Dans la section précédente, la valeur de `myVariable` était de type numérique.
-
-`let myVariable = 123;`
-
-Les variables peuvent stocker tous les types de nombres, y compris les décimaux et les nombres négatifs. Les nombres peuvent également être utilisés en combinaison avec les opérateurs arithmétiques, couverts dans la [prochaine section](#opérateurs-arithmétiques).
-
-### Opérateurs Arithmétiques
-
-Il y a plusieurs types d'opérateurs à utiliser lors de l'exécution de fonctions arithmétiques, et certains sont listés ici :
-
-| Symbol | Description                                                           | Example                               |
-| ------ | --------------------------------------------------------------------- | ------------------------------------- |
-| `+`    | **Addition**: Calcule la somme de deux nombres                        | `1 + 2 //la réponse attendue est 3`   |
-| `-`    | **Soustraction**: Calcule la différence entre deux nombres            | `1 - 2 //la réponse attendue est -1`  |
-| `*`    | **Multiplication**: Calcule le produit de deux nombres                | `1 * 2 //la réponse attendue est 2`   |
-| `/`    | **Division**: Calcule le quotient de deux nombres                     | `1 / 2 //la réponse attendue est 0.5` |
-| `%`    | **Reste**: Calcule le reste de la division entière entre deux nombres | `1 % 2 //la réponse attendue est 1`   |
-
-✅ Essayez ! Essayez une opération arithmétique dans la console de votre navigateur. Les résultats vous surprennent-ils ?
-
-### Chaînes de caractères
-
-Les chaînes sont des séries de caractères qui résident entre une paire d'apostrophes ou de guillements.
-
-- `'Ceci est une chaîne'`
-- `"Ceci est également une chaîne"`
-- `let myString = 'Ceci est une chaîne stockée dans une variable';`
-
-Souvenez-vous d'utiliser guillements ou apostrophes en écrivant une chaîne, sinon JavaScript supposera qu'il s'agit du nom d'une variable.
-
-### Formater les Chaînes
-
-Les chaînes sont du texte, et vont nécessiter d'être mises en forme de temps à autres.
-
-Pour **concatener** deux chaînes ou plus, ou pour les joindre, utilisez l'opérateur `+`.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
-```
-
-✅ Pourquoi est-ce que `1 + 1 = 2` en JavaScript, mais `'1' + '1' = 11` ? Réflechissez-y. Et qu'en est-il de `'1' + 1` ?
-
-Les **modèles littéraux** sont une autre façon de mettre en forme les chaînes, si ce n'est que l'accent grave est utilisé au lieu des guillements ou apostrophes. Tout ce qui n'est pas du texte brut doit être placé à l'intérieur d'une balise `${ }`. Ceci inclut toute variable qui soit une chaîne.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello, World!
-```
-
-Vous pouvez atteindre vos buts de formatage avec l'une ou l'autre méthode, mais les modèles littéraux vont respecter tout espace et retour à la ligne.
-
-✅ Quand utiliseriez-vous un modèle littéral plutôt qu'une chaîne brute ?
-
-### Booléens
-
-Les booléens n'ont que deux valeurs possibles : `true` (vrai) ou `false` (faux). Les booléens peuvent contribuer à décider quelles lignes de code devraient s'exécuter lorsque certaines conditions sont remplies. Dans de nombreux cas, des [opérateurs](#opérateurs-arithmétiques) aident à définir la valeur d'un booléen et vous rencontrerez et écrirez souvent des variables initialisées ou dont la valeur est mise à jour à l'aide d'un opérateur.
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ Une variable peut être considérée comme 'vraie' (truthy) si elle s'évalue comme `true` (vrai) en booléen. De façon intéressante, en JavaScript, [toute valeur est vraie à moins qu'elle ne soit explicitement définie comme fausse](https://developer.mozilla.org/fr/docs/Glossary/Truthy).
-
----
-
-## 🚀 Défi
-
-JavaScript est célèbre pour sa manière occasionnellement surprenante de gérer les types de données. Effectuez quelques recherches sur ces pièges. Par exemple : la sensibilité à la casse peut vous causer soucis ! Essayez ceci dans votre console : `let age = 1; let Age = 2; age == Age` (renvoie `false` (faux) -- pourquoi ?). Quels autres pièges pouvez-vous trouver ?
-
-## Quiz de validation des connaissances
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=fr)
-
-## Révision et auto-apprentissage
-
-Regardez [cette liste d'exercices en JavaScript](https://css-tricks.com/snippets/javascript/) et essayez-en un. Qu'avez-vous appris ?
-
-## Consigne
-
-[Exercice sur les types de données](assignment.fr.md)
diff --git a/2-js-basics/1-data-types/translations/README.hi.md b/2-js-basics/1-data-types/translations/README.hi.md
deleted file mode 100644
index 5285ddd5..00000000
--- a/2-js-basics/1-data-types/translations/README.hi.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# जावास्क्रिप्ट मूल बातें: डेटा प्रकार
-
-![जावास्क्रिप्ट मूल बातें: डेटा प्रकार](/sketchnotes/webdev101-js-datatypes.png)
-> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=hi)
-
-इस पाठ में जावास्क्रिप्ट की मूल बातें शामिल हैं, वह भाषा जो वेब पर अन्तरक्रियाशीलता प्रदान करती है।
-
-[![जावास्क्रिप्ट में डेटा प्रकार](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "जावास्क्रिप्ट में डेटा प्रकार")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-
-चलो वेरिएबल्स और डेटा प्रकारों के साथ शुरू करते हैं जो उन्हें आबाद करते हैं!
-
-## वेरिएबल्स
-
-वेरिएबल्स उन मूल्यों को संग्रहीत करते हैं जिन्हें आपके कोड में उपयोग और बदला जा सकता है।
-
-बनाना और **घोषित करना** एक चर में निम्नलिखित सिंटैक्स है **[कीवर्ड] [नाम]**। यह दो भागों से बना है:
-
-- **कीवर्ड**. कीवर्ड `let` या `var` हो सकते हैं।  
-
-   > ध्यान दें, वे कीवर्ड `let` को ES6 में पेश किया गया था और आपके वैरिएबल को तथाकथित _block scope_ देता है। यह अनुशंसा की जाती है कि आप `let` over` var` का उपयोग करें। हम भविष्य के भागों में ब्लॉक स्कोप को अधिक गहराई से कवर करेंगे।
-- **वेरिएबल्स नाम**, यह एक ऐसा नाम है जिसे आप स्वयं चुनते हैं।
-
-### कार्य - वेरिएबल्स के साथ काम करना
-
-1. **एक वेरिएबल की घोषणा**। चलो `let` कीवर्ड का उपयोग करते हुए एक चर घोषित करते हैं:
-
-    ```javascript
-    let myVariable;
-    ```
-
-   `myVariable` अब `let` कीवर्ड का उपयोग करके घोषित किया गया है। वर्तमान में इसका कोई मूल्य नहीं है।
-
-1. **एक मान असाइन करें**। वैरिएबल में `=` ऑपरेटर के साथ एक वैल्यू स्टोर करें, उसके बाद अपेक्षित वैल्यू।
-
-    ```javascript
-    myVariable = 123;
-    ```
-
-   > नोट: इस पाठ में `=` का उपयोग करने का अर्थ है कि हम एक "असाइनमेंट ऑपरेटर" का उपयोग करते हैं, जिसका उपयोग वैरिएबल पर मान सेट करने के लिए किया जाता है। यह समानता को निरूपित नहीं करता है।
-
-   `myVariable` अब मूल्य 123 के साथ * प्रारंभ * कर दिया गया है।
-
-1. **रिफैक्टर**। निम्नलिखित कथन के साथ अपना कोड बदलें।
-
-    ```javascript
-    let myVariable = 123;
-    ```
-
-    उपरोक्त को _explicit initialization_ कहा जाता है जब एक चर घोषित किया जाता है और एक ही समय में एक मान निर्दिष्ट किया जाता है।
-
-1. **वेरिएबल का मान बदलें**। वेरिएबल के मान को निम्न तरीके से बदलें:
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   एक बार एक वेरिएबल्स घोषित होने के बाद, आप अपने कोड के किसी भी बिंदु पर इसके मूल्य को `=` ऑपरेटर और नए मूल्य के साथ बदल सकते हैं।
-
-   ✅ कोशिश करो! आप अपने ब्राउज़र में जावास्क्रिप्ट सही लिख सकते हैं। ब्राउज़र विंडो खोलें और डेवलपर टूल पर नेविगेट करें. कंसोल में, आपको एक संकेत मिलेगा; टाइप करें `myVariable = 123`, फिर वापसी दबाएँ, फिर` myVariable` टाइप करें। क्या होता है? ध्यान दें, आप बाद के पाठों में इन अवधारणाओं के बारे में अधिक जानेंगे।
-
-## कोन्सटांत्स 
-
-एक निरंतरता की घोषणा और आरंभीकरण वैसा ही होता है जैसा कि वैरिएबल के रूप में, कॉन्स्टैल्स के अपवाद के साथ होता है। स्थिरांक आमतौर पर सभी बड़े अक्षरों के साथ घोषित किए जाते हैं।
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-कांस्टेंट  दो अपवादों के साथ, वेरिएबल समान हैं:
-
-- **मान होना चाहिए**। कांस्टेंट को प्रारंभ किया जाना चाहिए, या कोड चलाते समय कोई त्रुटि होगी।
-- **संदर्भ नहीं बदला जा सकता है**. एक कांस्टेंट के संदर्भ को एक बार प्रारंभ करने के बाद नहीं बदला जा सकता है, या कोड चलाते समय एक त्रुटि उत्पन्न होगी। आइए दो उदाहरण देखें:
-   - **साधारण मूल्य**. निम्नलिखित की अनुमति नहीं है:
-   
-      ```javascript
-      const PI = 3;
-      PI = 4; // not allowed
-      ```
- 
-   - **ऑब्जेक्ट संदर्भ संरक्षित है**.निम्नलिखित की अनुमति नहीं है।
-   
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // not allowed
-      ```
-
-    - **ऑब्जेक्ट संदर्भ संरक्षित नहीं है**. निम्नलिखित की अनुमति है:
-    
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // allowed
-      ```
-
-      ऊपर आप ऑब्जेक्ट के मूल्य को बदल रहे हैं, लेकिन स्वयं संदर्भ को नहीं, जो इसे अनुमति देता है।
-
-   > ध्यान दें, एक `const` का अर्थ है कि संदर्भ को पुन: असाइनमेंट से सुरक्षित किया गया है। मान __अडिग__ नहीं है, हालांकि और बदल सकता है, खासकर अगर यह एक ऑब्जेक्ट की तरह एक जटिल निर्माण है।
-
-## डाटा प्रकार
-
-वेरिएबल्स कई अलग-अलग प्रकार के मानों को संग्रहीत कर सकती हैं, जैसे संख्याएं और पाठ। इन विभिन्न प्रकार के मूल्यों को **डेटा प्रकार** के रूप में जाना जाता है। डेटा प्रकार सॉफ्टवेयर विकास का एक महत्वपूर्ण हिस्सा है क्योंकि यह डेवलपर्स को निर्णय लेने में मदद करता है कि कोड को कैसे लिखा जाना चाहिए और सॉफ्टवेयर को कैसे चलाना चाहिए। इसके अलावा, कुछ डेटा प्रकारों में विशिष्ट विशेषताएं होती हैं जो मूल्य में अतिरिक्त जानकारी को बदलने या निकालने में मदद करती हैं।
-
-✅ डेटा प्रकारों को जावास्क्रिप्ट डेटा प्राइमेटिव के रूप में भी जाना जाता है, क्योंकि वे भाषा द्वारा प्रदान किए जाने वाले निम्नतम-स्तरीय डेटा प्रकार हैं। 6 आदिम डेटा प्रकार हैं: स्ट्रिंग, संख्या, बिगिन्ट, बूलियन, अपरिभाषित और प्रतीक। यह देखने के लिए एक मिनट लें कि इनमें से प्रत्येक आदिम क्या प्रतिनिधित्व कर सकता है। एक `ज़ेबरा` क्या है? `0` ? `true`?
-
-### नंबर्स 
-
-पिछले खंड में, `myVariable` का मान एक संख्या डेटा प्रकार था।
-
-`let myVariable = 123;`
-
-चर सभी प्रकार की संख्याओं को संग्रहीत कर सकते हैं, जिसमें दशमलव या नकारात्मक संख्याएं शामिल हैं। संख्याओं का उपयोग अंकगणितीय संचालकों के साथ भी किया जा सकता है, जिन्हें [अगले भाग](#अंकगणितीय-आपरेटर) में शामिल किया गया है।
-
-### अंकगणितीय आपरेटर
-
-अंकगणितीय कार्यों को करते समय कई प्रकार के ऑपरेटरों का उपयोग करना होता है, और कुछ यहां सूचीबद्ध हैं:
-
-| प्रतीक | विवरण                                      | उदाहरण                          |
-| ---- | ----------------------------------------- | ------------------------------ |
-| `+`  | **जोड़**: दो संख्याओं के योग की गणना करता है           | `1 + 2 //अपेक्षित उत्तर 3 है`       |
-| `-`  | **Subtraction**: दो संख्याओं के अंतर की गणना करता है | `1 - 2 //अपेक्षित उत्तर -1 है`      |
-| `*`  | **गुणा**: दो नंबरों के उत्पाद की गणना करता है          | `1 * 2 //अपेक्षित उत्तर 2 है`       |
-| `/`  | **विभाजन**: दो संख्याओं के भागफल की गणना करता है       | `1 / 2 //अपेक्षित उत्तर 0. है`      |
-| `%`  | **शेष**: दो संख्याओं के विभाजन से शेष की गणना करता है    | `1 % 2 //expected answer is 1` |
-
-✅ कोशिश करो! अपने ब्राउज़र के कंसोल में एक अंकगणितीय ऑपरेशन आज़माएँ। क्या परिणाम आपको आश्चर्यचकित करते हैं?
-
-### स्ट्रिंग्स
-
-स्ट्रिंग्स ऐसे पात्रों के समूह हैं जो एकल या दोहरे उद्धरणों के बीच रहते हैं।
-
-- `'This is a string'`
-- `"This is also a string"`
-- `let myString = 'This is a string value stored in a variable';`
-
-एक स्ट्रिंग लिखते समय उद्धरणों का उपयोग करना याद रखें, अन्यथा जावास्क्रिप्ट यह मान लेगा कि यह एक वेरीअबल नाम है।
-
-### स्वरूपण स्ट्रिंग्स
-
-स्ट्रिंग्स पाठात्मक हैं, और समय-समय पर प्रारूपण की आवश्यकता होगी।
-
-दो या अधिक स्ट्रिंग्स को मिलाएं या उन्हें **एक साथ जोड़ने** के लिए, '+' ऑपरेटर का उपयोग करें।
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
-```
-
-✅ जावास्क्रिप्ट में `1 + 1 = 2` क्यों करता है, लेकिन `'1' + '1' = 11?` इसके बारे में सोचो। `'1' + 1` के बारे में क्या?
-
-**टेम्पलेट लिटेरल्स** स्ट्रिंग्स को फॉर्मेट करने का एक और तरीका है, उद्धरणों के बजाय, बैकटिक का उपयोग किया जाता है। जो कुछ भी सादा पाठ नहीं है, उसे प्लेसहोल्डर्स `$ {}` के अंदर रखा जाना चाहिए। इसमें कोई भी चर शामिल है जो तार हो सकते हैं।
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello, World!
-```
-
-आप या तो विधि के साथ अपने स्वरूपण लक्ष्यों को प्राप्त कर सकते हैं, लेकिन टेम्पलेट शाब्दिक किसी भी स्थान और लाइन ब्रेक का सम्मान करेंगे।
-
-✅ आप टेम्प्लेट शाब्दिक लिटेरल्स सादे स्ट्रिंग का उपयोग कब करेंगे?
-
-### बूलियन्स 
-
-बूलियन केवल दो मूल्य हो सकते हैं: `true` या `false`। बूलियंस निर्णय लेने में मदद कर सकते हैं कि किन शर्तों को पूरा करने पर कोड की लाइनें चलनी चाहिए। कई मामलों में, [ऑपरेटर](#अंकगणितीय-आपरेटर) एक बूलियन का मूल्य निर्धारित करने में सहायता करते हैं और आप अक्सर वैरिएबल या उनके मूल्यों को एक ऑपरेटर के साथ अपडेट किए जाने पर ध्यान देंगे और लिखेंगे।
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ एक चर को 'सत्य' माना जा सकता है यदि यह एक बूलियन `true` का मूल्यांकन करता है। दिलचस्प रूप से, जावास्क्रिप्ट में, [सभी मूल्य सत्य हैं जब तक कि मिथ्या के रूप में परिभाषित नहीं किया जाता](https://developer.mozilla.org/docs/Glossary/Truthy) 
-
----
-
-## 🚀 चुनौती
-
-जावास्क्रिप्ट मौके पर डेटाटिप्स को संभालने के अपने आश्चर्यजनक तरीकों के लिए कुख्यात है।इन 'gotchas' पर थोड़ा शोध करें। For example: case sensitivity can bite! इसे अपने कंसोल में आज़माएँ: `let age = 1; let Age = 2; age == Age` (`false` हल करता है - क्यों?). आपको अन्य क्या मिल सकते हैं?
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-[जावास्क्रिप्ट अभ्यासों की यह सूची](https://css-tricks.com/snippets/javascript/) पर एक नज़र डालें और एक कोशिश करें। आपने क्या सीखा?
-
-## असाइनमेंट
-
-[डेटा प्रकार अभ्यास](assignment.hi.md)
diff --git a/2-js-basics/1-data-types/translations/README.id.md b/2-js-basics/1-data-types/translations/README.id.md
deleted file mode 100644
index 4499966c..00000000
--- a/2-js-basics/1-data-types/translations/README.id.md
+++ /dev/null
@@ -1,201 +0,0 @@
-# Dasar-dasar JavaScript: Tipe Data
-
-![Dasar-dasar JavaScript - Tipe data](/sketchnotes/webdev101-js-datatypes.png)
-
-> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuis Pra-Kuliah
-
-[Kuis pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=id)
-
-Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web.
-
-[![Jenis data di JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Jenis data di JavaScript")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-Mari kita mulai dengan variabel dan tipe data yang mengisinya!
-
-## Variabel
-
-Variabel menyimpan nilai yang dapat digunakan dan diubah di seluruh kode Anda.
-
-Membuat dan **mendeklarasikan** variabel memiliki sintaks berikut **[kata kunci] [nama]**. Itu terdiri dari dua bagian:
-
-- **Kata kunci (Keywords)**. Kata kunci bisa `let` atau `var`.
-
-  > Catatan, Mereka kata kunci `let` diperkenalkan di ES6 dan memberi variabel Anda apa yang disebut _block scope_. Anda disarankan untuk menggunakan `let` di atas `var`. Kita akan membahas cakupan blok lebih mendalam di bagian mendatang.
-
-- **Nama variabel**, ini adalah nama yang Anda pilih sendiri.
-
-### Tugas - bekerja dengan variabel
-
-1. **Deklarasikan variabel**. Mari kita deklarasikan variabel menggunakan kata kunci `let`:
-
-   ```javascript
-   let variabelSaya;
-   ```
-
-   `variabelSaya` sekarang telah dideklarasikan menggunakan kata kunci `let`. Saat ini tidak memiliki nilai.
-
-1. **Tetapkan nilai**. Simpan nilai dalam variabel dengan operator `=`, diikuti dengan nilai yang diharapkan.
-
-   ```javascript
-   variabelSaya = 123;
-   ```
-
-   > Catatan: penggunaan `=` dalam pelajaran ini berarti kita menggunakan "operator penugasan (assignment operator)", yang digunakan untuk menetapkan nilai ke variabel. Itu _tidak menunjukkan kesetaraan_.
-
-   `variabelSaya` sekarang telah _diinisialisasi (initialized)_ dengan nilai 123.
-
-1. **Refaktor**. Ganti kode Anda dengan pernyataan berikut.
-
-   ```javascript
-   let variabelSaya = 123;
-   ```
-
-   Di atas disebut inisialisasi _explisit_ saat variabel dideklarasikan dan diberi nilai pada saat yang sama.
-
-1. **Ubah nilai variabel**. Ubah nilai variabel dengan cara berikut:
-
-   ```javascript
-   variabelSaya = 321;
-   ```
-
-   Setelah variabel dideklarasikan, Anda dapat mengubah nilainya di titik mana pun dalam kode Anda dengan operator `=` dan nilai baru.
-
-   ✅ Cobalah! Anda dapat menulis JavaScript langsung di browser Anda. Buka jendela browser dan arahkan ke Alat Pengembang. Di konsol, Anda akan menemukan prompt; ketik `let variabelSaya = 123`, tekan enter, lalu ketik `variabelSaya`. Apa yang terjadi? Catatan, Anda akan mempelajari lebih lanjut tentang konsep ini di pelajaran berikutnya.
-
-## Konstanta (Constants)
-
-Deklarasi dan inisialisasi konstanta mengikuti konsep yang sama sebagai variabel, dengan pengecualian kata kunci `const`. Konstanta biasanya dideklarasikan dengan semua huruf besar.
-
-```javascript
-const VARIABEL_SAYA = 123;
-```
-
-Konstanta mirip dengan variabel, dengan dua pengecualian:
-
-- **Harus punya nilai**. Konstanta harus diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode.
-- **Referensi tidak dapat diubah**. Referensi konstanta tidak dapat diubah setelah diinisialisasi, atau kesalahan akan terjadi saat menjalankan kode. Mari kita lihat dua contoh:
-
-  - **Nilai sederhana**. Berikut ini TIDAK diperbolehkan:
-
-    ```javascript
-    const PI = 3;
-    PI = 4; // tidak diperbolehkan
-    ```
-
-  - **Referensi objek dilindungi**. Berikut ini TIDAK diperbolehkan.
-
-    ```javascript
-    const obj = { a: 3 };
-    obj = { b: 5 }; // tidak diperbolehkan
-    ```
-
-  - **Nilai objek tidak dilindungi**. Berikut diperbolehkan:
-
-    ```javascript
-    const obj = { a: 3 };
-    obj.a = 5; // diperbolehkan
-    ```
-
-    Di atas Anda mengubah nilai objek tetapi bukan referensi itu sendiri, yang membuatnya diizinkan.
-
-  > Catatan, `const` berarti referensi dilindungi dari penugasan ulang. Nilainya tidak _immutable_ dan bisa berubah, terutama jika itu adalah konstruksi kompleks seperti sebuah objek.
-
-## Tipe Data
-
-Variabel dapat menyimpan berbagai jenis nilai, seperti angka dan teks. Berbagai jenis nilai ini dikenal sebagai **tipe data**. Tipe data adalah bagian penting dari pengembangan perangkat lunak karena membantu pengembang membuat keputusan tentang bagaimana kode harus ditulis dan bagaimana perangkat lunak harus dijalankan. Selain itu, beberapa tipe data memiliki fitur unik yang membantu mengubah atau mengekstrak informasi tambahan dalam sebuah nilai.
-
-✅ Tipe Data juga disebut sebagai data primitif JavaScript, karena mereka adalah tipe data tingkat terendah yang disediakan oleh bahasa. Ada 6 tipe data primitif: string, number, bigint, boolean, undefined, dan symbol. Luangkan waktu sebentar untuk memvisualisasikan apa yang mungkin diwakili oleh masing-masing primitif ini. Apa itu `zebra`? Bagaimana dengan `0`? `true`?
-
-### Angka (Numbers)
-
-Pada bagian sebelumnya nilai `variabelSaya` adalah tipe data angka.
-
-`let variabelSaya = 123;`
-
-Variabel dapat menyimpan semua jenis angka, termasuk desimal atau angka negatif. Angka juga dapat digunakan dengan operator aritmatika, yang dibahas di [bagian selanjutnya](#Operator-Aritmatika).
-
-### Operator Aritmatika
-
-Ada beberapa jenis operator untuk digunakan saat menjalankan fungsi aritmatika, dan beberapa di antaranya tercantum di sini:
-
-| Simbol | Deskripsi                                           | Contoh                                     |
-| ------ | --------------------------------------------------- | ------------------------------------------ |
-| `+`    | **Penjumlahan**: Menghitung jumlah dari dua angka   | `1 + 2 //hasil yang diharapkan adalah 3`   |
-| `-`    | **Pengurangan**: Menghitung selisih dua angka       | `1 - 2 //hasil yang diharapkan adalah -1`  |
-| `*`    | **Perkalian**: Menghitung hasil kali dua angka      | `1 * 2 //hasil yang diharapkan adalah 2`   |
-| `/`    | **Pembagian**: Menghitung hasil bagi dari dua angka | `1 / 2 //hasil yang diharapkan adalah 0.5` |
-| `%`    | **Sisa**: Menghitung sisa dari pembagian dua angka  | `3 % 2 //hasil yang diharapkan adalah 1`   |
-
-✅ Cobalah! Coba operasi aritmatika di konsol browser Anda. Apakah hasilnya mengejutkan Anda?
-
-### String
-
-String adalah kumpulan karakter yang berada di antara tanda kutip tunggal atau ganda.
-
-- `'Ini string'`
-- `"Ini juga string"`
-- `let myString = 'Ini adalah nilai string yang disimpan dalam variabel';`
-
-Ingatlah untuk menggunakan tanda kutip saat menulis string, atau JavaScript akan menganggapnya sebagai nama variabel.
-
-### Memformat String
-
-String bersifat tekstual, dan akan membutuhkan pemformatan dari waktu ke waktu.
-
-Untuk **menggabungkan (concatenate)** dua string atau lebih, atau menggabungkannya, gunakan operator `+`.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-```
-
-✅ Mengapa `1 + 1 = 2` di JavaScript, tetapi`'1' + '1' = 11?`Pikirkanlah. Bagaimana dengan `'1' + 1`?
-
-**Template literals** adalah cara lain untuk memformat string, kecuali sebagai pengganti tanda kutip, digunakan backtick. Apa pun yang bukan teks biasa harus ditempatkan di dalam placeholder `${ }`. Ini termasuk variabel apa pun yang mungkin berupa string.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!`; //Hello World!
-```
-
-Anda dapat mencapai tujuan pemformatan Anda dengan salah satu metode, tetapi template literal akan menghormati spasi dan jeda baris apa pun.
-
-✅ Kapan Anda akan menggunakan template literal dibanding string biasa?
-
-### Boolean
-
-Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean dapat membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi. Dalam banyak kasus, [operator](#Operator-Aritmatika) membantu pengaturan nilai Boolean dan Anda akan sering melihat dan menulis variabel yang diinisialisasi atau nilainya diperbarui dengan operator.
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ Variabel dapat dianggap 'benar (truthy)' jika dievaluasi ke boolean `true`. Menariknya, di JavaScript, [semua nilai adalah benar (truthy) kecuali jika didefinisikan sebagai salah](https://developer.mozilla.org/docs/Glossary/Truthy).
-
----
-
-## 🚀 Tantangan
-
-JavaScript terkenal karena cara yang mengejutkan dalam menangani tipe data pada kesempatan tertentu. Lakukan sedikit riset tentang 'kejutaan' ini. Misalnya: sensitivitas kasus bisa menggigit! Coba ini di konsol Anda: `let usia = 1; let Usia = 2; usia == Usia` (meghasilkan `false` - kenapa?). Kejutan lain apa yang bisa kamu temukan?
-
-## Kuis Pasca-Kuliah
-
-[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=id)
-
-## Review & Belajar Mandiri
-
-Lihat [daftar latihan JavaScript ini](https://css-tricks.com/snippets/javascript/) dan coba salah satunya. Apa yang kamu pelajari?
-
-## Tugas
-
-[Praktek Tipe Data](assignment.id.md)
diff --git a/2-js-basics/1-data-types/translations/README.it.md b/2-js-basics/1-data-types/translations/README.it.md
deleted file mode 100644
index 37c2fcb8..00000000
--- a/2-js-basics/1-data-types/translations/README.it.md
+++ /dev/null
@@ -1,197 +0,0 @@
-# Nozioni di base su JavaScript: tipi di dato
-
-![Nozioni di base su JavaScript: tipi di dati](/sketchnotes/webdev101-js-datatypes.png)
-> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz pre-lezione
-[Quiz pre-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=it)
-
-Questa lezione copre le basi di JavaScript, il linguaggio che fornisce l'interattività sul web.
-
-[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-Si comincia con le variabili e i tipi di dato che le popolano!
-
-## Variabili
-
-Le variabili memorizzano valori che possono essere utilizzati e modificati in tutto il codice.
-
-La creazione e la **dichiarazione** di una variabile hanno la seguente sintassi **[parola chiave] [nome]**. È composto da due parti:
-
-- **Parola chiave**. Le parole chiave possono essere `let` o `var`.
-
-   > Nota, la parola chiave `let` è stata introdotta in ES6 e assegna alla variabile un cosiddetto _ambito di blocco_. Si consiglia di preferire `let` a `var`. Si trattereranno i blocchi di ambito in modo più approfondito nelle parti future.
-- **Il nome della variabile**, questo è un nome che sceglie lo sviluppatore
-
-### Compito - Lavorare con le variabili
-
-1. **Dichiarare una variabile**. Si dichiari una variabile utilizzando la parola chiave `let` :
-
-   ```javascript
-   let myVariable;
-   ```
-
-   `myVariable` è stata ora dichiarata utilizzando la parola chiave `let` . Attualmente non ha un valore.
-
-1. **Assegnare un valore**. Memorizzare un valore in una variabile con l 'operatore `=` , seguito dal valore atteso.
-
-   ```javascript
-   myVariable = 123;
-   ```
-
-   > Nota: l'uso di `=` in questa lezione significa che si utilizza un "operatore di assegnazione", utilizzato per assegnare un valore a una variabile. Non denota uguaglianza.
-
-   `myVariable` è stata ora *inizializzata* con il valore 123.
-
-1. **Esecuzione del refactoring**. Sostituire il proprio codice con la seguente dichiarazione.
-
-   ```javascript
-   let myVariable = 123;
-   ```
-
-   Quanto sopra è chiamato _inizializzazione esplicita_ quando una variabile viene dichiarata e viene assegnato un valore allo stesso tempo.
-
-1. **Modificare il valore della variabile**. Si modifica il valore della variabile nel modo seguente:
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   Una volta dichiarata una variabile, è possibile modificarne il valore in qualsiasi punto del codice con l'operatore `=` e il nuovo valore.
-
-   ✅ Proviamolo! Si può scrivere JavaScript direttamente nel proprio browser. Aprire una finestra del browser e andare a Developer Tools (Strumenti per Sviluppatori). Nella console si troverà un prompt; digitare `let myVariable = 123`, premere Invio, quindi digitare `myVariable`. Che cosa accade? Nota, si apprenderà di più su questi concetti nelle lezioni successive.
-
-## Costanti
-
-La dichiarazione e l'inizializzazione di una costante segue gli stessi concetti di una variabile, a eccezione della parola chiave `const` . Le costanti sono generalmente dichiarate con tutte le lettere maiuscole.
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-Le costanti sono simili alle variabili, con due eccezioni:
-
-- **Devono avere un valore**. Le costanti devono essere inizializzate o si verificherà un errore durante l'esecuzione del codice.
-- **Il riferimento non può essere modificato**. Il riferimento di una costante non può essere modificato una volta inizializzato o si verificherà un errore durante l'esecuzione del codice. Si considerino due esempi:
-  - **Valore semplice**. Quanto segue NON è consentito:
-
-      ```javascript
-      const PI = 3;
-      PI = 4; // non consentito
-      ```
-
-  - **Il riferimento all'oggetto è protetto**. Quanto segue NON è consentito:
-
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // non consentito
-      ```
-
-  - **Il valore dell'oggetto NON è protetto**. Quanto segue E' consentito:
-
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // consentito
-      ```
-
-      Sopra si sta modificando il valore dell'oggetto ma non il riferimento stesso, il che lo rende consentito.
-
-   > Nota, `const` indica che il riferimento è protetto dalla riassegnazione. Il valore però non è _immutabile_ e può cambiare, soprattutto se si tratta di un costrutto complesso come un oggetto.
-
-## Tipi di Dato
-
-Le variabili possono memorizzare molti tipi diversi di valore, come numeri e testo. Questi vari tipi di valore sono noti come **tipo di dato**. I tipi di dato sono una parte importante dello sviluppo del software perché aiutano gli sviluppatori a prendere decisioni su come si dovrebbe scrivere il codice e su come si dovrebbe eseguire il software. Inoltre, alcuni tipi di dato hanno caratteristiche uniche che aiutano a trasformare o estrarre informazioni aggiuntive in un valore.
-
-✅ I tipi di dato sono indicati anche come dati primitivi di JavaScript, poiché sono i tipi di dato di livello più basso forniti dal linguaggio. Esistono 6 tipi di dato primitivi: string, number, bigint, boolean, undefined e symbol. Si preda un minuto per visualizzare ciò che ciascuno di questi primitivi potrebbe rappresentare. Cos'è una `zebra`? Va bene `0`? `true`?
-
-### Numeri
-
-Nella sezione precedente, il valore di `myVariable` era un tipo di dato number (numero).
-
-`let myVariable = 123;`
-
-Le variabili possono memorizzare tutti i tipi di numero, inclusi decimali o numeri negativi. I numeri possono anche essere usati con operatori aritmetici, trattati nella [prossima sezione](#Operatori-aritmetici).
-
-### Operatori aritmetici
-
-Esistono diversi tipi di operatori da utilizzare quando si eseguono funzioni aritmetiche e alcuni sono elencati qui:
-
-| Simbolo | Descrizione                                               | Esempio                           |
-| ------- | --------------------------------------------------------- | --------------------------------- |
-| `+`     | **Addizione**: calcola la somma di due numeri             | `1 + 2 // la risposta attesa è 3` |
-| `-`     | **Sottrazione**: calcola la differenza tra due numeri     | `1-2 // la risposta attesa è -1`  |
-| `*`     | **Moltiplicazione**: calcola il prodotto di due numeri    | `1 * 2 // la risposta attesa è 2` |
-| `/`     | **Divisione**: calcola il quoziente di due numeri         | `1/2 // la risposta attesa è 0,5` |
-| `%`     | **Resto**: calcola il resto dalla divisione di due numeri | `1 % 2 // la risposta attesa è 1` |
-
-✅ Proviamolo! Provare un'operazione aritmetica nella console del proprio browser. I risultati sorprendono?
-
-### Stringhe
-
-Le stringhe sono insiemi di caratteri che risiedono tra virgolette singole o doppie.
-
-- `'Questa è una stringa'`
-- `"Anche questa è una stringa"`
-- `let myString = 'Questo è un valore string memorizzato in una variabile';`
-
-Ricordare di usare le virgolette quando si scrive una stringa, altrimenti JavaScript presumerà che sia un nome di variabile.
-
-### Formattazione delle stringhe
-
-Le stringhe sono testuali e richiedono una formattazione di volta in volta.
-
-Per **concatenare** due o più stringhe o unirle insieme, utilizzare l'operatore `+`.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
-```
-
-✅ Perchè `1 + 1 = 2 in` JavaScript, ma `'1' + '1' = 11?` Ci si rifletta. Che dire di `"1" + 1`?
-
-I **template literal** sono un altro modo per formattare le stringhe, tranne per il fatto che al posto delle virgolette viene utilizzato il carattere backtick (\`). Tutto ciò che non è testo normale deve essere inserito nei segnaposto `${}`. Questo include tutte le variabili che possono essere stringhe.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello, World!
-```
-
-Si possono raggiungere i propri obiettivi di formattazione con entrambi i metodi, ma i template literal rispetteranno eventuali spazi e interruzioni di riga.
-
-✅ Quando si dovrebbe usare un template literal rispetto a una semplice stringa?
-
-### Booleani
-
-I  booleani possono avere solo due valori: vero (`true`) o falso (`false`). I booleani possono aiutare a prendere decisioni su quali righe di codice devono essere eseguite quando vengono soddisfatte determinate condizioni. In molti casi, [gli operatori](#Operatori-aritmetici) assistono nell'impostazione del valore di un Booleano e spesso si noteranno e scriveranno variabili inizializzate o i loro valori aggiornati con un operatore.
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ Una variabile può essere considerata "veritiera" se restituisce un valore booleano `true`. È interessante notare che in JavaScript [tutti i valori sono veritieri a meno che non siano definiti falsi](https://developer.mozilla.org/docs/Glossary/Truthy).
-
----
-
-## 🚀 Sfida
-
-JavaScript è noto per i suoi modi sorprendenti di gestire talvolta i tipi di dato. Effettuare un po' di ricerca su questi "trabocchetti". Ad esempio: la distinzione tra maiuscole e minuscole può mordere! Provare questo nella propria console: `let age = 1; let Age = 2; age == Age` (risulta `false` - perché?). Quali altri trabocchetti si riescono a trovare?
-
-## quiz post-lezione
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=it)
-
-## Revisione e auto apprendimento
-
-Esaminare [questo elenco di esercizi JavaScript](https://css-tricks.com/snippets/javascript/) e provarne uno. Che cosa si è imparato?
-
-## Assegnazione
-
-[Esercizi sui tipi di dato](assignment.it.md)
diff --git a/2-js-basics/1-data-types/translations/README.ja.md b/2-js-basics/1-data-types/translations/README.ja.md
deleted file mode 100644
index dff6ffab..00000000
--- a/2-js-basics/1-data-types/translations/README.ja.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# JavaScript の基本: データ型
-
-![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## レッスン前の小テスト
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=ja)
-
-このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。
-
-[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-
-まず、変数とそれを埋めるデータ型について説明しましょう!
-
-## 変数
-
-変数には、コード全体で使用したり変更したりできる値が格納されています。
-
-変数の作成と **宣言** には、次のような構文 **[キーワード] [名前]** があります。の2つの部分で構成されています。
-
-- **キーワード**。キーワードは `let` または `var` です。
-
-   > 注: `let` というキーワードは ES6 で導入されたもので、変数に _ブロックスコープ_ と呼ばれるものを与えます。`var` よりも `let` を使うことをお勧めします。ブロックスコープについては、今後のパートで詳しく説明します。
-- **変数名**、これは自分で選んだ名前です。
-
-### タスク - 変数を使って作業する
-
-1. **変数の宣言**. `let` キーワードを使って変数を宣言してみましょう。
-
-    ```javascript
-    let myVariable;
-    ```
-
-   `myVariable` は `let` キーワードを使用して宣言されました。これは現在のところ値を持っていません。
-
-1. **値を代入します**。値を `=` 演算子で変数に格納し、その後に期待される値を指定します。
-
-    ```javascript
-    myVariable = 123;
-    ```
-
-   > 注: このレッスンで `=` を使うということは、変数に値を設定するために使われる「代入演算子」を使うことを意味します。これは平等を示すものではありません。
-
-   `myVariable` は値 123 で *初期化* されました。
-
-1. **リファクタ**。コードを以下の文に置き換えてください。
-
-    ```javascript
-    let myVariable = 123;
-    ```
-
-    上記のように変数が宣言され、同時に値が代入されることを _明示的初期化_ といいます。
-
-1. **変数の値を変更します**。以下の方法で変数値を変更します。
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   一度変数が宣言されると、`=` 演算子と新しい値を使って、コードのどの時点でもその値を変更することができます。
-
-   ✅ お試しください ブラウザで JavaScript を書くことができます。ブラウザのウィンドウを開き、開発者ツールに移動します。コンソールにプロンプトが表示されるので、`let myVariable = 123` と入力して return を押し、`myVariable` と入力します。どうなりますか？これらの概念については、後のレッスンで詳しく説明します。
-
-## 定数
-
-定数の宣言と初期化は、`const` キーワードを除いて、変数と同じ概念に従います。定数は通常、すべて大文字で宣言されます。
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-定数は変数と似ていますが、2つの例外があります。
-
-- **値を持つ必要があります**。定数を初期化しておかないと、コード実行時にエラーが発生します。
-- **参照は変更できません**。定数の参照は、一度初期化すると変更できません。そうしないと、コードを実行するときにエラーが発生します。2つの例を見てみましょう。
-   - **単純な値**です。以下は許可されていません。
-   
-      ```javascript
-      const PI = 3;
-      PI = 4; // 不許可
-      ```
- 
-   - **オブジェクト参照は保護されています**。以下は許可されていません。
-   
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // 不許可
-      ```
-
-    - **オブジェクトの値は保護されていません**。以下は許可されています。
-    
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // 許可
-      ```
-
-      上記ではオブジェクトの値を変更していますが、参照自体は変更できません。
-
-   > 注: `const` は参照が再割り当てから保護されていることを意味します。しかし、値は _不変_ ではなく、特にオブジェクトのような複雑な構造体であれば、変更される可能性があります。
-
-## データ型
-
-変数は、数値やテキストなど、多くの異なるタイプの値を格納することができます。これらのさまざまなタイプの値は、**データ型**として知られています。データ型は、開発者がコードをどのように書くべきか、ソフトウェアをどのように実行するべきかを決定するのに役立つため、ソフトウェア開発において重要な役割を果たします。さらに、データ型の中には、値の中の付加的な情報を変換したり抽出したりするのに役立つ独自の機能を持つものもあります。
-
-✅ データ型は、言語によって提供される最低レベルのデータ型であるため、JavaScript のデータプリミティブとも呼ばれています。プリミティブデータ型には、string、number、bigint、boolean、undefined、symbol の6つのデータ型があります。これらのプリミティブのそれぞれが何を表しているかを可視化してみましょう。`zebra` は何でしょうか？ `0` はどうでしょうか？ `true` はどうでしょうか?
-
-### 数値
-
-前のセクションでは、`myVariable` の値は数値データ型でした。
-
-`let myVariable = 123;`
-
-変数は、小数や負の数を含むあらゆるタイプの数値を格納することができます。数値は、[次のセクション](#算術演算子)で説明する算術演算子と一緒に使用することもできます。
-
-### 算術演算子
-
-算術関数を実行する際に使用する演算子にはいくつかの種類があり、ここではいくつかを紹介します。
-
-| シンボル | 説明                                            | 例                                    |
-| -------- | ----------------------------------------------- | ------------------------------------- |
-| `+`      | **加算**: 2つの数値の和を計算します。           | `1 + 2 //期待される答えは 3 です。`   |
-| `-`      | **減算**: 2つの数値の差を計算します。           | `1 - 2 //期待される答えは -1 です。`  |
-| `*`      | **乗算**: 2つの数値の積を計算します。           | `1 * 2 //期待される答えは 2 です。`   |
-| `/`      | **除算**: 2つの数値の商を計算します。           | `1 / 2 //期待される答えは 0.5 です。` |
-| `%`      | **余り**: 2つの数値の割り算から余りを計算します | `1 % 2 //期待される答えは 1 です。`   |
-
-✅ 試してみましょう! ブラウザのコンソールで算術を試してみてください。驚きの結果が出ましたか？
-
-### 文字列
-
-文字列は、一重引用符または二重引用符の間に存在する文字の集合です。
-
-- `'This is a string'`
-- `"This is also a string"`
-- `let myString = 'This is a string value stored in a variable';`
-
-文字列を書くときには引用符を使うことを忘れないでください。そうしないと、JavaScript はそれを変数名とみなします。
-
-### 文字列のフォーマット
-
-文字列はテキストであり、時々フォーマットが必要になります。
-
-2 つ以上の文字列を **連結** したり、結合したりするには、`+` 演算子を使用します。
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
-```
-
-✅ JavaScript では `1 + 1 = 2` なのに、`'1' + '1' = 11` なのはなぜでしょうか? `'1' + 1` はどうでしょうか？
-
-**テンプレートリテラル** は文字列をフォーマットするもう一つの方法ですが、引用符の代わりにバックスティックを使用します。プレーンテキストではないものはすべてプレースホルダー `${ }` の中に入れなければなりません。これには、文字列である可能性のある変数も含まれます。
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello, World!
-```
-
-どちらの方法でも書式設定の目標を達成することができますが、テンプレートリテラルはスペースや改行を尊重します。
-
-✅ テンプレートリテラルとプレーンな文字列を使用するのはいつですか？
-
-### ブール値
-
-ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。多くの場合、[演算子](#算術演算子) がブール値の設定を支援し、変数が初期化されたり、演算子で値が更新されたりしていることに気付いたり、書いたりすることが多いでしょう。
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ 変数の評価値がブール値 `true` であれば、変数は 'truthy' とみなされます。興味深いことに、JavaScript では、[falsy として定義されていない限り、すべての値は truthy です](https://developer.mozilla.org/ja/docs/Glossary/Truthy)。
-
----
-
-## 🚀 チャレンジ
-
-JavaScript は、たまにデータ型を扱う際の意外な方法で悪名高いです。これらの 'gotchas' について少し調べてみてください。例えば: 大文字小文字の区別でつまずくことがあります! コンソールで以下のようにしてみてください。`let age = 1; let Age = 2; age == Age` (解決は `false` -- なぜ?) 他にどのような gotchas があるでしょうか?
-
-## レッスン後の小テスト
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=ja)
-
-## 復習と自己学習
-
-この [JavaScript の練習問題リスト](https://css-tricks.com/snippets/javascript/)を見て、1つ試してみてください。何を学びましたか？
-
-## 課題
-
-[データ型の練習](assignment.ja.md)
diff --git a/2-js-basics/1-data-types/translations/README.ko.md b/2-js-basics/1-data-types/translations/README.ko.md
deleted file mode 100644
index 87d28740..00000000
--- a/2-js-basics/1-data-types/translations/README.ko.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# JavaScript 기초: 데이터 타입
-
-![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 강의 전 퀴즈
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=ko)
-
-해당 강의에서는 웹에서 상호작용을 제공하는 언어인 JavaScript의 기초를 다룹니다. 
-
-[![Variables](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Variables in JavaScript")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-
-변수와 변수를 채워주는 데이터 타입부터 시작합니다!
-
-## 변수
-
-변수는 코드에서 사용하며 변경할 수 있는 값을 저장합니다.
-
-변수를 만들고 **선언** 하는 구문은 **[keyword] [name]** 입니다. 두 부분으로 이루어집니다:
-
-- **키워드**. 키워드는 `let` 또는 `var`로 지정할 수 있습니다.  
-
-   > Note, 키워드 `let`은 ES6에서 도입되었으며 변수에 _block scope_ 를 제공합니다. `var`보다` let`을 사용하는 것이 좋습니다. 향후 부분에서 블록 범위를 더 자세히 다룰 것입니다.
-- **변수 이름**, 스스로 선택한 이름입니다.
-
-### 작업 - 변수와 작업하기
-
-1. **변수 선언하기**. `let` 키워드를 사용하여 변수를 선언해봅시다:
-
-    ```javascript
-    let myVariable;
-    ```
-
-   이제 `myVariable`이 `let` 키워드를 사용하여 선언되었습니다. 현재는 값을 가지고 있지 않습니다.
-
-1. **값 할당하기**. `=` 연산자로 변수에 값을 저장합니다, 예상 값이 따릅니다.
-
-    ```javascript
-    myVariable = 123;
-    ```
-
-   > Note: 이 강의에서 `=`을 사용한다는 것은 변수에 값을 지정하는 데 사용되는 "할당 연산자" 로 사용되는 것을 의미합니다. 같다는 의미가 아닙니다.
-
-   `myVariable`는 이제 123 값으로 *초기화* 되었습니다.
-
-1. **리펙토링**. 코드를 다음 구문으로 바꿉니다.
-
-    ```javascript
-    let myVariable = 123;
-    ```
-
-    위는 변수가 선언되면서 동시에 값이 할당되는 순간을 _명시적 초기화_ 라고 합니다.
-
-1. **변수 값 변경하기**. 다음과 같이 변수 값을 변경합니다:
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   변수가 선언되면, `=` 연산자와 새 값을 사용하여 코드에서 언제든지 값을 변경할 수 있습니다.
-
-   ✅ 시도해보세요! 브라우저에서 바로 JavaScript를 작성할 수 있습니다. 브라우저 창을 열고 개발자 도구로 이동합니다. 콘솔에서, 프롬프트를 찾을 수 있습니다; `let myVariable = 123` 을 입력하고 Return 키를 누른 다음, `myVariable`을 입력합니다. 무슨 일이 일어났나요? 이후 강의에서 이러한 개념에 대해 자세히 알아볼 것 입니다.
-
-## 상수
-
-상수를 선언하고 초기화하는 것은 `const` 키워드를 제외하면 변수와 동일한 개념을 따릅니다. 상수는 일반적으로 모두 대문자로 선언됩니다.
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-상수는 변수와 유사하지만, 두 차이점이 있습니다:
-
-- **반드시 값이 있어야 합니다**. 상수는 초기화를 하지 않는다면, 코드 실행 중에 오류가 발생합니다.
-- **참조는 변경 불가합니다**. 상수 참조는 초기화된 후에는 변경할 수 없으며, 코드 실행 중에 오류가 발생합니다. 두 가지 예를 살펴 보겠습니다:
-   - **Simple value**. 허용하지 않습니다:
-   
-      ```javascript
-      const PI = 3;
-      PI = 4; // not allowed
-      ```
- 
-   - **객체 참고는 보호됩니다**. 허용하지 않습니다:
-   
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // not allowed
-      ```
-
-    - **객체 값은 보호되지 않습니다**. 허용합니다:
-    
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // allowed
-      ```
-
-      위는 객체의 값을 변경하지만 참조 자체는 변경하지 않으므로, 허용됩니다.
-
-   > Note, `const`는 참조가 다시 할당되지 않도록 보호한다는 점을 의미합니다. 값은 _immutable_ 이 아니며 객체와 같은 복잡한 구조인 경우, 변경될 수 있습니다.
-
-## 데이터 타입
-
-변수는 숫자 및 텍스트와 같은, 다양한 타입의 값을 저장할 수 있습니다. 이러한 다양한 타입의 값을 **데이터 타입**이라고 합니다. 데이터 타입은 개발자가 코드 작성 방법과 소프트웨어 실행 방법에 대한 결정을 내리는 데 도움이 되므로 소프트웨어 개발의 중요한 부분입니다. 또한 일부 데이터 타입에는 값에서 추가 정보를 변환하거나 추출하는 데 도움이 되는 기능이 있습니다.
-
-✅ 데이터 타입은 언어에서 제공하는 저수준 데이터 타입이기 때문에 JavaScript data primitives 라고 합니다. 6개의 기본 데이터 유형이 있습니다: 문자열, 숫자, bigint, 논리 자료형, undefined 그리고 심볼. 몇 분을 투자하여 각 기본 요소가 무엇을 나타낼 수 있는지 시각화하십시오. `zebra`은 무엇입니까? `0`? `true`는 어떤가요?
-
-### 숫자
-
-이전 세션에서, `myVariable`의 값은 숫자 데이터 유형입니다.
-
-`let myVariable = 123;`
-
-변수는 소수 또는 음수를 포함하여 모든 유형의 숫자를 저장할 수 있습니다. 숫자는 [next section](#산술-연산자)에서 다룰 산술 연산자와 함께 사용할 수도 있습니다.
-
-### 산술 연산자
-
-산술 함수를 수행할 때 사용할 여러 유형의 연산자가 있으며, 일부는 다음과 같습니다:
-
-| Symbol | Description                                                              | Example                          |
-| ------ | ------------------------------------------------------------------------ | -------------------------------- |
-| `+`    | **Addition**: Calculates the sum of two numbers                          | `1 + 2 //expected answer is 3`   |
-| `-`    | **Subtraction**: Calculates the difference of two numbers                | `1 - 2 //expected answer is -1`  |
-| `*`    | **Multiplication**: Calculates the product of two numbers                | `1 * 2 //expected answer is 2`   |
-| `/`    | **Division**: Calculates the quotient of two numbers                     | `1 / 2 //expected answer is 0.5` |
-| `%`    | **Remainder**: Calculates the remainder from the division of two numbers | `1 % 2 //expected answer is 1`   |
-
-✅ 시도해보세요! 브라우저의 콘솔에서 산술 연산을 시도하십시오. 놀라운 결과인가요?
-
-### 문자열
-
-문자열은 작은 따옴표 또는 큰 따옴표 사이에 있는 문자의 세트입니다.
-
-- `'This is a string'`
-- `"This is also a string"`
-- `let myString = 'This is a string value stored in a variable';`
-
-문자열을 만들 때 따옴표를 사용해야합니다. 그렇지 않으면 JavaScript가 변수명으로 간주합니다.
-
-### 문자열 서식
-
-문자열은 텍스트이며, 때때로 포맷팅이 필요합니다.
-
-둘 이상의 문자열을 **연결**하거나 결합하려면 `+` 연산자를 사용하세요.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
-```
-
-✅ 왜 JavaScript에서 `1 + 1 = 2`이지만, `'1'+ '1'= 11` 일까요?  `'1' + 1`은 어떻습니까?
-
-**템플릿 리터럴** 따옴표 대신 backtick이 사용된다는 점을 제외하면, 문자열을 형식화하는 또 다른 방법입니다. 일반 텍스트가 아닌 모든 것은 placeholders `${ }`안에 배치해야합니다. 여기에는 문자열일 수도 있는 모든 변수가 포함됩니다.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello World!
-```
-
-어느 방법이든지 포맷팅 목표를 달성할 수 있지만, 템플릿 리터럴은 모든 공백과 줄 바꿈을 고려합니다.
-
-✅ 템플릿 리터럴과 일반적인 문자열은 언제 사용합니까?
-
-### 논리 자료형
-
-논리 자료형은 `true` 또는 `false` 두 가지 값만 가능합니다. 논리 자료형은 특정 조건이 충족되며 실행할 코드 라인을 결정하는 순간 도움이 될 수 있습니다. 대부분의 경우, [operators](#산술-연산자)는 논리 연산자 값을 설정하는 데 도움이 되며, 변수 초기화되거나 해당 값이 연산자로 업데이트되는 것을 알고 쓰는 경우가 많습니다.
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ 변수가 논리 자료형이 `true`로 설정되면 '참'으로 간주될 수 있습니다. 흥미롭게도, JavaScript에서는 [거짓으로 정의되지 않는다면 모든 값은 참입니다](https://developer.mozilla.org/docs/Glossary/Truthy).
-
----
-
-## 🚀 도전
-
-JavaScript는 때때로 놀라운 방법으로 데이터 타입을 처리하는 것으로 유명합니다. 'gotchas'에 대해 약간 알아보세요. 예시: 대소문자 구분은 물릴 수 있습니다! 콘솔에서 다음을 시도하십시오: `let age = 1; let Age = 2; age == Age` (resolves `false` -- why?). 다른 문제를 찾을 수 있습니까?
-
-## 강의 후 퀴즈
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-[이 JavaScript 실습 목록](https://css-tricks.com/snippets/javascript/)을 살펴보고 시도해보십시오. 무엇을 배울 수 있나요?
-
-## 과제
-
-[Data Types Practice](../assignment.md)
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/README.ms.md b/2-js-basics/1-data-types/translations/README.ms.md
deleted file mode 100644
index 965a83a4..00000000
--- a/2-js-basics/1-data-types/translations/README.ms.md
+++ /dev/null
@@ -1,197 +0,0 @@
-# Asas JavaScript: Jenis Data
-
-![Asas JavaScript: Jenis Data](/sketchnotes/webdev101-js-datatypes.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuiz Pra Kuliah
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
-
-Pelajaran ini merangkumi asas-asas JavaScript, bahasa yang menyediakan interaktiviti di web.
-
-[![Jenis Data Dalam JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Data types in JavaScript")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-Marilah kita mulakan dengan pemboleh ubah dan jenis data yang mengisinya!
-
-## Pemboleh Ubah
-
-Pemboleh ubah menyimpan nilai yang boleh digunakan dan diubah di seluruh kod anda.
-
-Membuat dan **menyatakan** pemboleh ubah mempunyai sintaks berikut **[kata kunci] [nama]**. Ia terdiri daripada dua bahagian:
-
-- **Kata Kunci**. Kata kunci seperti `let` atau `var`.
-
-   > Perhatikan, kata kunci seperti `let` diperkenalkan dalam ES6 dan memberikan pemboleh ubah anda apa yang disebut _block lingkup_. Sebaiknya gunakan `let` over` var`. Kami akan merangkumi skop blok dengan lebih mendalam di bahagian-bahagian masa depan.
-- **Nama pemboleh ubah**, ini adalah nama yang anda pilih sendiri.
-
-### Tugasan - bekerja dengan pemboleh ubah
-
-1. **Menyatakan pemboleh ubah**. Marilah nyatakan pemboleh ubah menggunakan kata kunci `let`:
-
-    ```javascript
-    let myVariable;
-    ```
-
-    `myVariable` kini telah dinyatakan menggunakan kata kunci` let`. Pada masa ini tidak mempunyai nilai.
-
-1. **Berikan nilai**. Simpan nilai dalam pemboleh ubah dengan pengendali `=`, diikuti dengan nilai yang diharapkan.
-
-    ```javascript
-    myVariable = 123;
-    ```
-
-    > Catatan: penggunaan `=` dalam pelajaran ini berarti kita menggunakan "pengendali tugasan", yang digunakan untuk menetapkan nilai ke pemboleh ubah. Itu tidak menunjukkan persamaan.
-
-    `myVariable` kini telah *diinisialisasi* dengan nilai 123.
-
-1. **Pemfaktor**. Gantikan kod anda dengan pernyataan berikut.
-
-    ```javascript
-    let myVariable = 123;
-    ```
-    Perkara di atas dipanggil _inisialisasi eksplisit_ apabila pemboleh ubah diisytiharkan dan diberikan nilai pada masa yang sama.
-
-1. **Tukar nilai pemboleh ubah**. Tukar nilai pemboleh ubah dengan cara berikut:
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   Setelah pemboleh ubah diisytiharkan, anda boleh mengubah nilainya pada bila-bila masa dalam kod anda dengan pengedali `=` dan nilai baru.
-
-   ✅ Cubalah! Anda boleh menulis JavaScript di penyemak imbas anda. Buka tetingkap penyemak imbas dan arahkan ke Alat Pembangun. Dalam konsol, anda akan menemui arahan; taip `let myVariable = 123`, tekan return, kemudian taip `myVariable`. Apa yang berlaku? Perhatikan, anda akan mengetahui lebih lanjut mengenai konsep ini dalam pelajaran seterusnya.
-
-## Pemalar
-
-Pengisytiharan dan permulaan pemalar mengikuti konsep yang sama dengan pemboleh ubah, dengan menggunakan `const`. Pemalar biasanya dinyatakan dengan semua huruf besar.
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-Pemalar serupa dengan pemboleh ubah, dengan dua pengecualian:
-
-- **Mesti ada nilai**. Pemalar mesti diinisialisasi, atau kesalahan akan berlaku semasa menjalankan kod.
-- **Rujukan tidak boleh diubah**. Rujukan pemalar tidak dapat diubah setelah diinisialisasi, atau kesalahan akan terjadi ketika menjalankan kod. Marilah kita lihat dua contoh:
-    - **Menyimpan nilai**. Perkara berikut TIDAK dibenarkan:
-
-      ```javascript
-      const PI = 3;
-      PI = 4; // tidak dibenarkan
-      ```
-
-    - **Rujukan objek dilindungi**. Perkara berikut TIDAK dibenarkan:
-
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // tidak dibenarkan
-      ```
-
-
-    - **Rujukan objek tidak dilindungi**. Perkara berikut dibenakan: 
-
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // allowed
-      ```
-
-      Di atas anda mengubah nilai objek tetapi bukan rujukan itu sendiri, yang membuatnya dibenarkan.
-
-    > Perhatikan, `const` bermaksud rujukan dilindungi dari penugasan semula. Nilainya tidak _tidak berubah_ dan ia juga boleh berubah, terutamanya jika konstruk kompleks seperti objek.
-
-## Jenis Data
-
-Pemboleh ubah boleh menyimpan pelbagai jenis nilai, seperti nombor dan teks. Pelbagai jenis nilai ini dikenali sebagai **jenis data**. Jenis data adalah bahagian penting dalam pembangunan perisian kerana ia membantu pembangun membuat keputusan mengenai bagaimana kod itu harus ditulis dan bagaimana perisian itu harus dijalankan. Tambahan pula, beberapa jenis data mempunyai ciri unik yang membantu mengubah atau mengekstrak maklumat tambahan dalam suatu nilai.
-
-✅ Jenis Data juga disebut sebagai primitif data JavaScript, kerana ia adalah jenis data tahap terendah yang disediakan oleh bahasa. Terdapat 6 jenis data primitif: rentetan, nombor, bigint, boolean, tidak ditentukan, dan simbol. Luangkan masa sebentar untuk menggambarkan apa yang diwakili oleh setiap primitif ini. Apa itu `zebra`? Bagaimana dengan `0`? `benar`?
-
-### Nombor
-
-Pada bahagian sebelumnya, nilai `myVariable` adalah jenis data nombor.
-
-`let myVariable = 123;`
-
-Pemboleh ubah boleh menyimpan semua jenis nombor, termasuk nombor perpuluhan atau nombor negatif. Nombor juga boleh digunakan dengan pengendali aritmetik, yang terdapat dalam [bahagian seterusnya](#Pengendali-Aritmetik).
-
-### Pengendali Aritmetik
-
-Terdapat beberapa jenis operator yang boleh digunakan semasa menjalankan fungsi aritmetik, dan ada yang disenaraikan di sini:
-
-| Simbol | Penerangan                                         | Contoh                      |
-| ------ | -------------------------------------------------- | --------------------------- |
-| `+`    | **Penambahan**: Mengira jumlah dua nombor          | `1 + 2 // jawapan ialah 3`  |
-| `-`    | **Penolakan**: Mengira perbezaan dua nombor        | `1 - 2 // jawapan ialah -1` |
-| `*`    | **Pendaraban**: Mengira hasil dua nombor           | `1 * 2 // jawapan ialah 2`  |
-| `/`    | **Pembahagian**: Mengira hasil bagi dua nombor     | `1 / 2 //jawapan ialah 0.5` |
-| `%`    | **Baki**: Mengira baki dari pembahagian dua nombor | `1 % 2 //jawapan ialah 1`   |
-
-✅ Cubalah! Cuba operasi aritmetik di konsol penyemak imbas anda. Adakah hasilnya mengejutkan anda?
-
-### String
-
-String adalah kumpulan watak yang berada di antara tanda petik tunggal atau ganda.
-
-- `'Ini adalah string'`
-- `"Ini pun juga string"`
-- `let myString = 'Ini adalah nilai string yang disimpan dalam pemboleh ubah';`
-
-Ingatlah untuk menggunakan tanda kutip semasa menulis string, jika tidak, JavaScript akan menganggapnya adalah nama yang berubah-ubah.
-
-### Memformat String
-
-String bersifat teks, dan memerlukan format dari semasa ke semasa.
-
-Untuk **menggabungkan** dua atau lebih string, gunakan pengendali `+`.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
-```
-
-✅ Mengapakah `1 + 1 = 2` dalam JavaScript, tetapi `'1' + '1' = 11?` Cuba fikirkan. Bagaimanakah dengan `'1' + 1`?
-
-**Literal templat** adalah cara lain untuk memformat rentetan, kecuali tanda petik, tanda belakang digunakan. Apa-apa yang bukan teks biasa mesti diletakkan di dalam pemegang tempat `$ {}`. Ini merangkumi sebarang pemboleh ubah yang mungkin adalah string.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello, World!
-```
-
-Anda boleh mencapai matlamat pemformatan anda dengan mana-mana kaedah, tetapi templat literal akan menghormati ruang dan jeda baris.
-
-✅ Bilakah anda menggunakan templat literal berbanding string biasa?
-
-### Booleans
-
-Booleans boleh hanya dua nilai: `benar` atau `salah`. Booleans dapat membantu membuat keputusan mengenai garis kod mana yang harus dijalankan apabila syarat tertentu dipenuhi. Dalam banyak kes, [pengendali](#Pengendali-Aritmetik) membantu menetapkan nilai Boolean dan anda sering akan melihat dan menulis pemboleh ubah yang dimulakan atau nilainya dikemas kini dengan operator.
-
-- `let myTrueBool = betul`
-- `let myFalseBool = salah`
-
-✅ Pemboleh ubah boleh dianggap 'benar' jika dinilai menjadi `benar` boolean. Menariknya, dalam JavaScript, [semua nilai adalah benar kecuali ditakrifkan sebagai palsu](https://developer.mozilla.org/docs/Glossary/Truthy).
-
---- 
-
-## 🚀 Cabaran
-
-JavaScript terkenal kerana kaedahnya yang mengagumkan dalam mengendalikan jenis data sesekali. Lakukan sedikit kajian mengenai 'gotchas' ini. Contohnya: kepekaan kes boleh menggigit! Cubalah ini di konsol anda: `let age = 1; biarkan Umur = 2; age == Age` (menyelesaikan `false` - mengapa?). Apa lagi gotchas yang anda dapati?
-
-## Kuiz Pasca Kuliah
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
-
-## Mengkaji dan belajar sendiri
-
-Lihat [latihan JavaScript](https://css-tricks.com/snippets/javascript/) dan cubalah. Apa yang anda telah belajar?
-
-## Tugasan
-
-[Latihan Jenis Data](../assignment.md)
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/README.nl.md b/2-js-basics/1-data-types/translations/README.nl.md
deleted file mode 100644
index 7e2839b5..00000000
--- a/2-js-basics/1-data-types/translations/README.nl.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# JavaScript Basics: Gegevenstypen
-
-![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png)
-> Sketchnote door [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz voorafgaand aan de lezing
-[Quiz voorafgaand aan de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
-
-Deze les behandelt de basisprincipes van JavaScript, de taal die voor interactiviteit op internet zorgt.
-
-[![Gegevenstypen in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "Gegevenstypen in JavaScript")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-
-Laten we beginnen met variabelen en de gegevenstypen waarmee ze worden gevuld!
-
-## Variabelen
-
-Variabelen slaan waarden op die in uw code kunnen worden gebruikt en gewijzigd.
-
-Het creëren en **declareren** van een variabele heeft de volgende syntaxis **[sleutelwoord] [naam]**. Het bestaat uit twee delen:
-
-- **Sleutelwoord**. Sleutelwoorden kunnen `let` of `var` zijn.  
-
-   > Let op, het sleutelwoord `let` is geïntroduceerd in ES6 en geeft uw variabele een zogenaamde _block scope_. Het wordt aanbevolen om `let` over `var` te gebruiken. In toekomstige delen gaan we dieper in op block scopes.
-- **De variabelenaam**, dit is een naam die u zelf kiest.
-
-### Taak - werken met variabelen
-
-1. **Declareer een variabele**. Laten we een variabele declareren met het sleutelwoord `let`:
-
-    ```javascript
-    let myVariable;
-    ```
-
-   `myVariable` is nu gedeclareerd met het `let` sleutelwoord. Het heeft momenteel geen waarde.
-
-1. **Wijs een waarde toe**. Sla een waarde op in een variabele met de operator `=`, gevolgd door de verwachte waarde.
-
-    ```javascript
-    myVariable = 123;
-    ```
-
-   > Let op: het gebruik van `=` in deze les betekent dat we gebruik maken van een "toewijzingsoperator", die wordt gebruikt om een waarde aan een variabele te geven. Het duidt niet op gelijkheid.
-
-   `myVariable` is nu *geïnitialiseerd* met de waarde 123.
-
-1. **Refactor**. Vervang uw code door de volgende verklaring.
-
-    ```javascript
-    let myVariable = 123;
-    ```
-
-    Het bovenstaande wordt een _expliciete initialisatie_ genoemd wanneer een variabele wordt gedeclareerd en tegelijkertijd een waarde krijgt toegewezen.
-
-1. **Wijzig de variabele waarde**. Wijzig de waarde van de variabele op de volgende manier:
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   Zodra een variabele is gedeclareerd, kunt u de waarde ervan op elk moment in uw code wijzigen met de operator `=` en de nieuwe waarde.
-
-   ✅ Probeer het! U kunt JavaScript rechtstreeks in uw browser schrijven. Open een browservenster en ga naar Developer Tools. In de console vind u een prompt; typ `let myVariable = 123`, druk op Return en typ vervolgens `myVariable`. Wat gebeurt er? Let op, in de volgende lessen leert u meer over deze concepten.
-
-## Constanten
-
-Declaratie en initialisatie van een constante volgt dezelfde concepten als een variabele, met uitzondering van het sleutelwoord `const`. Constanten worden doorgaans gedeclareerd met alleen hoofdletters.
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-Constanten zijn vergelijkbaar met variabelen, met twee uitzonderingen:
-
-- **Moet waarde hebben**. Constanten moeten worden geïnitialiseerd, anders treedt er een fout op bij het uitvoeren van code.
-- **Referentie kan niet worden gewijzigd**. De referentie van een constante kan niet worden gewijzigd nadat deze is geïnitialiseerd, anders treedt er een fout op bij het uitvoeren van code. Laten we naar twee voorbeelden kijken:
-   - **Eenvoudige waarde**. Het volgende is NIET toegestaan:
-   
-      ```javascript
-      const PI = 3;
-      PI = 4; // niet toegestaan
-      ```
- 
-   - **Objectreferentie is beveiligd**. Het volgende is NIET toegestaan.
-   
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // niet toegestaan
-      ```
-
-    - **Objectwaarde is niet beschermd**. Het volgende is toegestaan:
-    
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // toegestaan
-      ```
-
-      Hierboven verandert u de waarde van het object maar niet de referentie zelf, waardoor het toegestaan is.
-
-   > Let op: een 'const' betekent dat de referentie is beschermd tegen opnieuw toewijzen. De waarde is echter niet _onveranderlijk_ en kan veranderen, vooral als het een complexe constructie is, zoals een object.
-
-## Gegevenstypen
-
-Variabelen kunnen veel verschillende soorten waarden opslaan, zoals getallen en tekst. Deze verschillende soorten waarden staan bekend als het **gegevenstype**. Gegevenstypen zijn een belangrijk onderdeel van softwareontwikkeling omdat het ontwikkelaars helpt beslissingen te nemen over hoe de code moet worden geschreven en hoe de software moet worden uitgevoerd. Bovendien hebben sommige gegevenstypen unieke kenmerken die helpen bij het transformeren of extraheren van aanvullende informatie in een waarde.
-
-✅ Gegevenstypen worden ook wel JavaScript-gegevensprimitieven genoemd, omdat dit de gegevenstypen op het laagste niveau zijn die door de taal worden geleverd. Er zijn 6 primitieve gegevenstypen: string, number, bigint, boolean, undefined, en symbol. Neem even de tijd om te visualiseren wat elk van deze primitieven zou kunnen vertegenwoordigen. Wat is een `zebra`? Hoe zit het met `0`? `true`?
-
-### Getallen
-
-In de vorige sectie was de waarde van `myVariable` een gegevenstype met een getal.
-
-`let myVariable = 123;`
-
-Variabelen kunnen alle soorten getallen opslaan, inclusief decimalen of negatieve getallen. Getallen kunnen ook worden gebruikt met rekenkundige operatoren, behandeld in de [volgende sectie](#Rekenkundige-operatoren).
-
-### Rekenkundige operatoren
-
-Er zijn verschillende soorten operatoren die kunnen worden gebruikt bij het uitvoeren van rekenkundige functies, en sommige worden hier vermeld:
-
-| Symbool | beschrijving                                                  | Voorbeeld                          |
-| ------- | ------------------------------------------------------------- | ---------------------------------- |
-| `+`     | **Toevoeging**: Berekent de som van twee getallen             | `1 + 2 //verwacht antwoord is 3`   |
-| `-`     | **Aftrekken**: Berekent het verschil tussen twee getallen     | `1 - 2 //verwacht antwoord is -1`  |
-| `*`     | **Vermenigvuldiging**: Berekent het product van twee getallen | `1 * 2 //verwacht antwoord is 2`   |
-| `/`     | **Divisie**: Berekent het quotiënt van twee getallen          | `1 / 2 //verwacht antwoord is 0.5` |
-| `%`     | **Rest**: Berekent de rest uit de deling van twee getallen    | `1 % 2 //verwacht antwoord is 1`   |
-
-✅ Probeer het! Probeer een rekenkundige bewerking in de console van uw browser. Verrassen de resultaten u?
-
-### Strings
-
-Strings zijn sets van tekens die tussen enkele of dubbele aanhalingstekens staan.
-
-- `'Dit is een string'`
-- `"Dit is ook een string"`
-- `let myString = 'Dit is een tekenreekswaarde die is opgeslagen in een variabele';`
-
-Denk eraan om aanhalingstekens te gebruiken bij het schrijven van een string, anders neemt JavaScript aan dat het een variabelenaam is.
-
-### Strings formatteren
-
-Strings zijn tekstueel en moeten van tijd tot tijd worden opgemaakt.
-
-Gebruik de operator `+` om twee of meer strings **samen te voegen**.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
-```
-
-✅ Waarom is `1 + 1 = 2` in JavaScript, maar `'1' + '1' = 11?` Denk er eens over na. Hoe zit het met `'1' + 1`?
-
-**Template literals** zijn een andere manier om strings op te maken, behalve dat in plaats van aanhalingstekens de backtick wordt gebruikt. Alles wat geen platte tekst is, moet tussen tijdelijke aanduidingen `${}` worden geplaatst. Dit omvat alle variabelen die strings kunnen zijn.
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello, World!
-```
-
-U kunt uw opmaakdoelen met beide methoden bereiken, maar template literals respecteren alle spaties en regeleinden.
-
-✅ Wanneer zou u een template literal versus een gewone string gebruiken?
-
-### Booleans
-
-Booleans kunnen slechts twee waarden zijn: `true` of `false`. Booleans kunnen helpen bij het nemen van beslissingen over welke regels code moeten worden uitgevoerd wanneer aan bepaalde voorwaarden is voldaan. In veel gevallen helpen [operatoren](#Rekenkundige-operatoren) bij het instellen van de waarde van een Boolean waarde en u zult vaak merken en variabelen schrijven die geïnitialiseerd worden of dat hun waarden worden bijgewerkt met een operator.
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ Een variabele kan als 'waar' worden beschouwd als deze resulteert in een boolean waarde `true`. Interessant is dat in JavaScript [alle waarden waarheidsgetrouw zijn, tenzij ze als onjuist zijn gedefinieerd](https://developer.mozilla.org/nl/docs/Glossary/Truthy).
-
----
-
-## 🚀 Uitdaging
-
-JavaScript is berucht om zijn verrassende manieren om af en toe met gegevenstypen om te gaan. Doe een beetje onderzoek naar deze 'valstrikken'. Bijvoorbeeld: hoofdlettergevoeligheid kan bijten! Probeer dit in uw console: `let age = 1; let Age = 2; age == Age` (lost `false` op - waarom?). Welke andere valstrikken kunt u vinden?
-
-## Quiz na de lezing
-[Quiz na de lezing](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
-
-## Beoordeling en zelfstudie
-
-Bekijk [deze lijst met JavaScript-oefeningen](https://css-tricks.com/snippets/javascript/) en probeer er een. Wat heeft u geleerd?
-
-## Toewijzing
-
-[Gegevenstypen Oefening](assignment.nl.md)
diff --git a/2-js-basics/1-data-types/translations/README.pt.md b/2-js-basics/1-data-types/translations/README.pt.md
deleted file mode 100644
index 64fdbe0c..00000000
--- a/2-js-basics/1-data-types/translations/README.pt.md
+++ /dev/null
@@ -1,197 +0,0 @@
-# Noções básicas de JavaScript: Tipos de dados
-
-![Noções básicas de JavaScript: Tipos de dados](/sketchnotes/webdev101-js-datatypes.png)
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pré-Aula
-[Quiz Pré-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7)
-
-Esta lição cobre o básico do JavaScript, a linguagem que fornece interatividade na web.
-
-[![Variáveis](https://img.youtube.com/vi/u_aLTZHsclg/0.jpg)](https://youtube.com/watch?v=u_aLTZHsclg "Variáveis")
-
-[![Data Types](https://img.youtube.com/vi/ylaZV-UKTe4/0.jpg)](https://youtube.com/watch?v=ylaZV-UKTe4 "Data Types")
-
-
-Vamos começar com variáveis e os tipos de dados que as preenchem!
-
-## Variáveis
-
-Variáveis armazenam valores que podem ser usados e alterados em todo o código.
-
-A criação e **declaração** de uma variável tem a seguinte sintaxe **[palavra-chave] [nome]**. É composto de duas partes:
-
-- **Palavra-chave**. Palavras-chave podem ser `let` ou` var`.  
-
-> Nota, a palavra-chave `let` foi introduzida no ES6 e dá a sua variável o chamado _block scope_ ou escopos do bloco. É recomendado que você use `let` sobre `var`. Abordaremos os escopos do bloco mais detalhadamente em partes futuras.
-- **O nome da variável**, este é um nome que você escolhe.
-
-### Tarefa - trabalhando com variáveis
-
-1. **Declare uma variável**. Vamos declarar uma variável usando a palavra-chave `let`:
-
-    ```javascript
-    let minhaVariavel;
-    ```
-
-   `minhaVariavel` agora foi declarada usando a palavra-chave`let`. Atualmente não tem um valor.
-
-1. **Atribua um valor**. Armazene um valor em uma variável com o operador `=`, seguido pelo valor esperado.
-    ```javascript
-    minhaVariavel = 123;
-    ```
-
-   > Nota: o uso de `=` nesta lição significa que fazemos uso de um "operador de atribuição", usado para definir um valor para uma variável. Não denota igualdade.
-
-   `minhaVariavel` agora foi *inicializada* com o valor 123.
-
-1. **Refatorar**. Substitua seu código pela seguinte instrução.
-
-    ```javascript
-    let minhaVariavel = 123;
-    ```
-
-    O acima é chamado de _inicialização explícita_ quando uma variável é declarada e recebe um valor ao mesmo tempo.
-
-1. **Altere o valor da variável**. Altere o valor da variável da seguinte maneira:
-
-   ```javascript
-   minhaVariavel = 321;
-   ```
-
-   Uma vez que uma variável é declarada, você pode alterar seu valor em qualquer ponto do seu código com o operador `=` e o novo valor.
-
-   ✅ Tente isso! Você pode escrever JavaScript diretamente no seu navegador. Abra uma janela do navegador e navegue até Ferramentas do desenvolvedor. No console, você encontrará um prompt; digite `let myVariable = 123`, pressione return e, em seguida, digite` myVariable`. O que acontece? Observe que você aprenderá mais sobre esses conceitos nas lições subsequentes.
-
-## Constantes
-
-A declaração e a inicialização de uma constante seguem os mesmos conceitos de uma variável, com exceção da palavra-chave `const`. Normalmente, as constantes são declaradas com todas as letras maiúsculas.
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-As constantes são semelhantes às variáveis, com duas exceções: 
-
-- **Deve ter um valor**. As constantes devem ser inicializadas ou ocorrerá um erro ao executar o código.
-- **A referência não pode ser alterada**. A referência de uma constante não pode ser alterada depois de inicializada, ou ocorrerá um erro ao executar o código. Vejamos dois exemplos:
-   - **Valor simples**. O seguinte NÃO é permitido:
-   
-      ```javascript
-      const PI = 3;
-      PI = 4; // NÃO é permitido
-      ```
- 
-   - **A referência do objeto está protegida**. O seguinte NÃO é permitido.
-   
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // NÃO é permitido
-      ```
-
-    - **O valor do objeto não está protegido**. O seguinte é permitido:
-    
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // permitido
-      ```
-
-      Acima você está alterando o valor do objeto, mas não a referência em si, o que o torna permitido.
-
-   > Nota, um `const` significa que a referência está protegida contra reatribuição. O valor não é _imutável_ e pode mudar, especialmente se for uma construção complexa como um objeto.
-
-## Tipos de Dados
-
-As variáveis podem armazenar muitos tipos diferentes de valores, como números e texto. Esses vários tipos de valores são conhecidos como **tipo de dados**. Os tipos de dados são uma parte importante do desenvolvimento de software porque ajudam as pessoas desenvolvedoras a tomar decisões sobre como o código deve ser escrito e como o software deve ser executado. Além disso, alguns tipos de dados têm recursos exclusivos que ajudam a transformar ou extrair informações adicionais em um valor.
-
-✅ Os tipos de dados também são chamados de primitivos de dados JavaScript, pois são os tipos de dados de nível mais baixo fornecidos pela linguagem. Existem 6 tipos de dados primitivos: string, number, bigint, boolean, undefined, e symbol. Reserve um minuto para visualizar o que cada uma dessas primitivas pode representar. O que é uma `zebra`? Que tal `0`? `true`?
-
-### Números (Numbers)
-
-Na seção anterior, o valor de `myVariable` era um tipo de dado numérico.
-
-`let myVariable = 123;`
-
-As variáveis podem armazenar todos os tipos de números, incluindo decimais ou números negativos. Os números também podem ser usados com operadores aritméticos, abordados na [próxima seção](#Operadores-aritméticos).
-
-### Operadores aritméticos
-
-Existem vários tipos de operadores para usar ao executar funções aritméticas, e alguns estão listados aqui:
-
-| Símbolo | Descrição                                                | Examplo                             |
-| ------- | -------------------------------------------------------- | ----------------------------------- |
-| `+`     | **Adição**: Calcula a soma de dois números               | `1 + 2 //a resposta esperada é 3`   |
-| `-`     | **Subitração**: Calcula a diferença de dois números      | `1 - 2 //a resposta esperada é -1`  |
-| `*`     | **Multiplicação**: Calcula o produto de dois números     | `1 * 2 //a resposta esperada é 2`   |
-| `/`     | **Divisão**: Calcula o quociente de dois números         | `1 / 2 //a resposta esperada é 0.5` |
-| `%`     | **Restante**: Calcula o resto da divisão de dois números | `1 % 2 //a resposta esperada é 1`   |
-
-✅ Tente isso! Tente uma operação aritmética no console do seu navegador. Os resultados surpreendem você?
-
-### Strings
-
-Strings são conjuntos de caracteres que residem entre aspas simples ou duplas.
-
-- `'Isso é uma string'`
-- `"Isso também é uma string"`
-- `let myString = 'Este é um valor de string armazenado em uma variável';`
-
-Lembre-se de usar aspas ao escrever uma string, caso contrário, o JavaScript assumirá que é um nome de variável.
-
-### Formatando Strings
-
-Strings são textuais e requerem formatação de vez em quando.
-
-Para **concatenar** duas ou mais strings, ou juntá-las, use o operador `+`.
-
-```javascript
-let myString1 = "Olá";
-let myString2 = "Mundo";
-
-myString1 + myString2 + "!"; //OláMundo!
-myString1 + " " + myString2 + "!"; //Olá Mundo!
-myString1 + ", " + myString2 + "!"; //Olá, Mundo!
-
-```
-
-✅ Por que `1 + 1 = 2` em JavaScript, mas` '1' + '1' = 11? `Pense nisso. Que tal `'1' + 1`?
-
-**Template literals (Literais de modelo)** são outra maneira de formatar strings, exceto em vez de aspas, o crase é usado. Qualquer coisa que não seja texto simples deve ser colocado dentro dos espaços reservados `$ {}`. Isso inclui todas as variáveis que podem ser strings.
-
-```javascript
-let myString1 = "Olá";
-let myString2 = "Mundo";
-
-`${myString1} ${myString2}!` //Olá Mundo!
-`${myString1}, ${myString2}!` //Olá, Mundo!
-```
-
-Você pode atingir seus objetivos de formatação com qualquer um dos métodos, mas os Template literals respeitarão todos os espaços e quebras de linha.
-
-✅ Quando você usaria um literal de modelo em vez de uma string simples?
-
-### Booleanos
-
-Os booleanos podem ter apenas dois valores: `true` ou` false`. Os booleanos podem ajudar a tomar decisões sobre quais linhas de código devem ser executadas quando certas condições são atendidas. Em muitos casos, [operadores](#Operadores-aritméticos) auxiliam na configuração do valor de um booleano e você freqüentemente notará e escreverá variáveis sendo inicializadas ou seus valores sendo atualizados com um operador.
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ Uma variável pode ser considerada 'true' se for avaliada como um booleano `true`. Curiosamente, em JavaScript, [todos os valores são verdadeiros, a menos que definidos como falsos](https://developer.mozilla.org/docs/Glossary/Truthy).
-
----
-
-## 🚀 Desafio
-
-JavaScript é notório por suas maneiras surpreendentes de lidar com tipos de dados ocasionalmente. Pesquise sobre essas 'pegadinhas'. Por exemplo: a diferenciação de maiúsculas e minúsculas pode afetar! Tente isto em seu console: `let age = 1; deixe Idade = 2; age == Age` (resolve `false` - por quê?). Que outras dicas você pode encontrar?
-
-## Quiz Pós-Aula
-[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8)
-
-## Revisão e autoestudo
-
-Dê uma olhada [nessa lista de exercícios de JavaScript](https://css-tricks.com/snippets/javascript/) e tente resolver um exercício. O que você aprendeu?
-
-## Tarefa
-
-[Prática de Tipos de Dados](assignment.pt.md)
diff --git a/2-js-basics/1-data-types/translations/README.zh-cn.md b/2-js-basics/1-data-types/translations/README.zh-cn.md
deleted file mode 100644
index 1cbd07c4..00000000
--- a/2-js-basics/1-data-types/translations/README.zh-cn.md
+++ /dev/null
@@ -1,197 +0,0 @@
-# JavaScript 基础：数据类型
-
-![JavaScript Basics - Data types](/sketchnotes/webdev101-js-datatypes.png)
-> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 课前小测
-[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=zh_cn)
-
-这节课将会介绍 JavaScript 的基础知识，正是它为网页提供了可交互性。
-
-[![Variables in JavaScript](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript 中的数据类型")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-让我们从它最基础的组成部分 —— “变量”和“数据类型”学起吧！
-
-## 变量（Variables）
-
-变量用于存储会在你的代码中被使用和被改变的值。
-
-创建和**声明**变量的语句是：**[关键字] [变量名]**，其由两部分组成：
-
-- **关键字（Keyword）**。关键字可以是 `let` 或者 `var`。
-
-   > 注意，`let` 关键字在 ES6 标准才被引入，会给你的变量一个 _块级作用域（block scope）_。一般建议使用 `let` 而非 `var`。我们将会在未来的章节中深入介绍块级作用域。
-- **变量名（The variable name）**。你可以自己给变量起个名字。
-
-### 任务：使用变量
-
-1. **声明一个变量**。让我们用 `let` 关键字声明一个变量：
-
-    ```javascript
-    let myVariable;
-    ```
-
-   `myVariable` 现在就被用 `let` 关键字声明好了，但目前还没有被赋予一个值。
-
-1. **赋值**。使用 `=` 运算符跟上一个期望的值来将一个值存储到变量中。
-
-    ```javascript
-    myVariable = 123;
-    ```
-
-   > 注意：这节课中使用的 `=` 均意味着我们使用了一个“赋值运算符”，用于给变量设置一个值。它并不表示相等。
-
-   `myVariable` 现在就已经被用 123 这个值 _初始化了（initialized）_。
-
-1. **重构语句**。将你的代码换位下面的语句：
-
-    ```javascript
-    let myVariable = 123;
-    ```
-
-    上面的写法被称为 _显式初始化（explicit initialization）_，即在声明一个变量的同时为它赋予一个初始值。
-
-1. **修改变量的值**。用下面的方式修改变量的值：
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   在变量声明之后，你可以在你代码中的任何地方通过 `=` 运算符跟上新的值来修改它的值。
-
-   ✅ 亲手尝试一下！你现在就可以在浏览器里写 JavaScript 代码。打开一个浏览器窗口，然后打开开发者工具。在控制台（console）中你可以看到一个命令提示符，输入 `let myVariable = 123`，按下回车键，然后再输入 `myVariable`。会发生什么？你在之后的课程中会了解到更多相关概念。
-
-## 常量（Constants）
-
-声明和初始化一个常量和变量基本类似，只不过要用 `const` 关键字。常量一般会使用全大写字母的方式命名。
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-常量和变量很相似，但有两点区别：
-
-- **必须有一个值**。常量必须被初始化，否则会在运行代码时报错。
-- **引用（Reference）无法被修改**。初始化后变量的引用就无法再被修改，否则会在运行代码时报错。让我们看两个例子：
-   - **简单数值**。下方做法是不被允许的：
-   
-      ```javascript
-      const PI = 3;
-      PI = 4; // 报错
-      ```
- 
-   - **对象引用会受保护**。下方做法是不被允许的：
-   
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // 报错
-      ```
-
-    - **对象的值不会受保护**。下方做法**是**被允许的：
-    
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // 允许
-      ```
-
-      上例中你修改的是对象的值而非其引用本身，所以是允许的。
-
-   > 注意，`const` 意味着引用是没法被重新赋值的，但是它的值并非是 _不可变的（immutable）_，你可以修改它的值，特别是在假如它是诸如对象这样的复杂结构的情况下。
-
-## 数据类型（Data Types）
-
-变量可以可以存储许多不同类型的值，比如数字或者文本。这些值的各种类型被称为**数据类型**。数据类型是软件开发中重要的组成部分，因为它会有助于开发者决定代码编写和软件运行的方式。更重要的是，一些数据类型有着可以帮助转换或者附加额外信息给变量的独特特性。
-
-✅ 数据类型有时也特指 JavaScript 基本类型（primitives），它们是这个语言提供的最底层的数据类型。JavaScript 有六种基本数据类型：string、number、bigint、boolean、undefined 和 symbol。你认为 `'zebra'` 属于哪种数据类型？`0` 和 `true` 呢？
-
-### 数值（Numbers）
-
-在之前的部分中，`myVariable` 的值属于数值数据类型。
-
-`let myVariable = 123;`
-
-变量可以存储所有类型的数值，包括小数或者负数。数值也可以搭配算术运算符使用，将在[下一部分](#算术运算符(Arithmetic-Operators))介绍。
-
-### 算术运算符（Arithmetic Operators）
-
-有许多种可以用在算术功能的运算符，下面列出了一部分：
-
-| 符号 | 描述                           | 例子                  |
-| ---- | ------------------------------ | --------------------- |
-| `+`  | **加法**：计算两个数的和       | `1 + 2 // 结果是 3`   |
-| `-`  | **减法**：计算两个数的差       | `1 - 2 // 结果是 -1`  |
-| `*`  | **乘法**：计算两个数的积       | `1 * 2 // 结果是 2`   |
-| `/`  | **除法**：计算两个数的商       | `1 / 2 // 结果是 0.5` |
-| `%`  | **取余**：计算两个数相除的余数 | `1 % 2 // 结果是 1`   |
-
-✅ 亲手试试！在你的浏览器控制台中尝试一下算术运算。结果是否和你期望的相同？
-
-### 字符串（Strings）
-
-字符串是由单引号或双引号包围的字符集合。
-
-- `'这是一个字符串'`
-- `"这也是一个字符串"`
-- `let myString = '这是一个存储在变量中的字符串值';`
-
-记得用引号来书写字符串，否则 JavaScript 会误以为它是一个变量名。
-
-### 格式化字符串
-
-字符串是文本，自然会有格式化的需求。
-
-要 **连接（concatenate）** 两个或更多字符串，或者说把它们结合到一起，可以用 `+` 运算符。
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
-```
-
-✅ 在 JavaScript 中，为什么 `1 + 1 = 2` 但 `'1' + '1' = 11`？仔细想想。如果是 `'1' + 1` 呢？
-
-**模板字符串（Template literals）** 是另一种格式化字符串的方式，使用反引号（backtick）而非引号。 任何非纯文本的内容都要放到 `${ }` 占位符内，可以是任何可能是字符串的变量。
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello, World!
-```
-
-两种方式都可以达到格式化字符串的目的，但是格式化字符串会保留所有的空格和换行。
-
-✅ 你会在什么时候使用模板字符串？什么时候使用纯文本字符串？
-
-### 布尔值（Booleans）
-
-布尔值只可能是这两个值：`true` 或 `false`。布尔值可以用于决定特定条件被满足时该运行哪些代码。多数情况下，[运算符](#算术运算符(Arithmetic-Operators))都可以设置布尔值，你会常常看到或者自己写出一些被通过运算符初始化或更新为布尔值。
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ 如果一个变量的计算结果是 `true`，我们就把它称为“真值（truthy）”。一个有意思的事是，在 JavaScript 中，[所有值都是真值，除非它们被定义为假值（falsy)](https://developer.mozilla.org/zh-CN/docs/Glossary/Truthy)。
-
----
-
-## 🚀 挑战
-
-JavaScript 偶尔会因为其对于数据类型令人意外的处理方式而被人诟病。你可以对这些“陷阱”做一点调查，比如大小写敏感性带来的问题，在控制台中试试 `let age = 1; let Age = 2; age == Age`（结果是 `false`，为什么？）。你还能找到哪些陷阱？
-
-## 课后小测
-[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=zh_cn)
-
-## 复习 & 自学
-
-看看这个[JavaScript 练习列表](https://css-tricks.com/snippets/javascript/)并尝试其中一个。你学到了什么？
-
-## 作业
-
-[数据类型练习](assignment.zh-cn.md)
diff --git a/2-js-basics/1-data-types/translations/README.zh-tw.md b/2-js-basics/1-data-types/translations/README.zh-tw.md
deleted file mode 100644
index e61f0f53..00000000
--- a/2-js-basics/1-data-types/translations/README.zh-tw.md
+++ /dev/null
@@ -1,199 +0,0 @@
-# JavaScript 入門 - 資料型態
-
-![JavaScript 入門 - 資料型態](/sketchnotes/webdev101-js-datatypes.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
-
-## 課前測驗
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/7?loc=zh_tw)
-
-這堂課會講述 Javascript 的基礎 ── 一款建立互動性網頁的程式語言。
-
-[![JavaScript 的資料型態](https://img.youtube.com/vi/JNIXfGiDWM8/0.jpg)](https://youtube.com/watch?v=JNIXfGiDWM8 "JavaScript 的資料型態")
-
-[![Data Types in JavaScript](https://img.youtube.com/vi/AWfA95eLdq8/0.jpg)](https://youtube.com/watch?v=AWfA95eLdq8 "Data Types in JavaScript")
-
-讓我們從程式語言的基礎 ── 「變數」與「資料型態」開始吧！
-
-## 變數 (Variable)
-
-變數會依照程式碼調整並儲存數值。
-
-建立並**宣告**變數的語法有一定的格式： **[關鍵字(keyword)] [變數名稱(name)]**。下列開始分別敘述：
-
-- **關鍵字 (Keyword)** 關鍵字可以是 `let` 或者是 `var`。  
-
-   > 注意，關鍵字 `let` 在 ES6 被導入進去，為變數限制 _區塊範疇(block scope)_。 建議上使用 `let` 勝過於 `var`。我們在往後的章節會講述什麼是區塊範疇。
-
-- **變數名稱 (Variable Name)** 你可以自己定義變數名稱。
-
-### 課題：變數的操作
-
-1. **宣告變數** 利用關鍵字 `let` 來宣告新的變數：
-
-    ```javascript
-    let myVariable;
-    ```
-
-   `myVariable` 已經被關鍵字 `let` 宣告出來了。它現在並沒有被賦予數值。
-
-1. **賦予數值** 以運算子 `=` 來為變數新增數值，後面加上預期的數字。
-
-    ```javascript
-    myVariable = 123;
-    ```
-
-   > 注意：本堂課程中的運算子 `=` 只作為「指派運算子」，處理賦予數值的功用。它與「等於」並沒有關係。
-
-   變數 `myVariable` 現在已經被*初始化*為數值 123。
-
-1. **代碼重構 (Refactor)** 改寫你的程式碼為：
-
-    ```javascript
-    let myVariable = 123;
-    ```
-
-    合併「宣告變數」與「賦予數值」為一條程式碼的步驟稱為 _顯式初始化 (explicit initialization)_。
-
-1. **更改變數數值** 透過下列的方式更改參數數值：
-
-   ```javascript
-   myVariable = 321;
-   ```
-
-   一旦變數被宣告後，你在任何往後的程式碼利用運算子 `=` 賦予新的數值。
-
-   ✅ 動手試試看！ 在瀏覽器中撰寫 JavaScript：開啟瀏覽器並前往開發者工具，你會在 Console 頁面找到命令提示字元。輸入 `let myVariable = 123` 並按下 Enter。輸入 `myVariable`。它出現了什麼? 往後，你會學到更多這些觀念的課程。
-
-## 常數 (Constants)
-
-宣告與初始化常數的行為與變數相似，只差在關鍵字 `const`。通常常數會以全大寫的方式命名。
-
-```javascript
-const MY_VARIABLE = 123;
-```
-
-常數與變數非常類似，主要的兩大差別為：
-
-- **一定要附帶數值** 常數一定要被初始化過，否則在執行程式時會產生錯誤。
-- **參考(Reference)不能被改變** 變數與常數都能根據其他變數或常數作為定義，但是常數的參考在初始化後，就不能再被更改，否則在執行程式時會產生錯誤。我們來看下列兩種例子：
-   - **簡單數值** 下列程式碼是不被允許的：
-   
-      ```javascript
-      const PI = 3;
-      PI = 4; // 錯誤
-      ```
- 
-   - **有限存取的參考物件** 下列程式碼是不被允許的：
-   
-      ```javascript
-      const obj = { a: 3 };
-      obj = { b: 5 } // 錯誤
-      ```
-
-    - **參考物件** 下列程式碼是「允許」的：
-    
-      ```javascript
-      const obj = { a: 3 };
-      obj.a = 5;  // OK
-      ```
-
-      上述只改變物件的數值而非物件本身，這是可以被允許的。
-
-   > 注意，`const` 代表參考物件在重新賦值上有存取的限制。數值並不是永遠 _不可變的_，如果數值是規劃在其他物件上的話。
-
-## 資料型態 (Data types)
-
-變數可以儲存不一樣的數值型態，好比是數字或是文字。這些多樣的數值型態被稱為**資料型態**。資料型態是軟體開發上重要的環節，它能幫助開發者釐清程式該如何被填寫以及運作。除此之外，有些獨特的資料型態能改變或賦加而外的數值資訊。
-
-✅ 資料型態也存在於 JavaScript 的原始結構中，它們是程式語言中最低階的描述方式。六種資料型態：string、number、bigint、boolean、undefined 和 symbol。 花點時間了解它們的含義。資料 `zebra` 屬於哪一類? 那 `0` 呢? `true` 呢?
-
-### 數字 (Numbers)
-
-在前一個段落中，`myVariable`的數值屬於數字型。
-
-`let myVariable = 123;`
-
-變數能儲存所有類型的數字，包含小數點與負數。數字也可以被套用在四則運算上，這被放在[下一個段落](#算術運算子-(Arithmetic-Operators))中。
-
-### 算術運算子 (Arithmetic Operators)
-
-這些是做四則運算時會使用到的算術運算子，下列舉出了幾項例子：
-
-| 符號 | 描述                          | 舉例                  |
-| ---- | ----------------------------- | --------------------- |
-| `+`  | **加法**： 對兩數做相加       | `1 + 2 // 答案為 3`   |
-| `-`  | **減法**： 對兩數做相減       | `1 - 2 // 答案為 -1`  |
-| `*`  | **乘法**： 對兩數做相乘       | `1 * 2 // 答案為 2`   |
-| `/`  | **除法**： 對兩數做相除       | `1 / 2 // 答案為 0.5` |
-| `%`  | **餘數**： 取得兩數相除的餘數 | `1 % 2 // 答案為 1`   |
-
-✅ 試試看！在瀏覽器命令欄中使用算數運算子。你得到了什麼結果?
-
-### 字串 (Strings)
-
-字串由多組字元組成，會以單引號或雙引號匡列起來。
-
-- `'這是一組字串'`
-- `"這也是一組字串"`
-- `let myString = '這是被存在變數中的字串';`
-
-記得使用引號來編寫字串，否則 JavaScript 會把字串內容當作是變數名稱。
-
-### 字串格式化
-
-
-字串由文字組成，自然需要隨時間而做修正。
-
-要**串接**兩個以上的字串，可以使用運算子 `+`。
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-myString1 + myString2 + "!"; //HelloWorld!
-myString1 + " " + myString2 + "!"; //Hello World!
-myString1 + ", " + myString2 + "!"; //Hello, World!
-
-```
-
-✅ 在 JavaScript 中，為什麼 `1 + 1 = 2`，但是 `'1' + '1' = 11` 呢? 想想看。那 `'1' + 1` 呢?
-
-**樣板字面值(Template literals)**是另一種格式化字串的方式，它不使用引號，而是使用反引號。任何非純文字字串必須放在 `${ }` 中。這會包入字串型態的任何變數。
-
-```javascript
-let myString1 = "Hello";
-let myString2 = "World";
-
-`${myString1} ${myString2}!` //Hello World!
-`${myString1}, ${myString2}!` //Hello, World!
-```
-
-這樣就可以達到字串格式化的目的，但要注意樣板字面會遵守變數中的空格與分行符號。
-
-✅ 什麼情況下該使用樣板字面，或者是純文字字串呢?
-
-### 布林 (Booleans)
-
-布林有兩種數值：`true` 或 `false`，使用在程式碼做條件決定的時候。在多數情況下，[運算子](#算術運算子-(Arithmetic-Operators))可以套用在布林上，你會在初始化或更新數值時使用。
-
-- `let myTrueBool = true`
-- `let myFalseBool = false`
-
-✅ 布林值 `true` 亦有廣義的 'truthy' 數值。有趣的是，在 JavaScript 中，[除非被定義為 falsy，其餘的數值都會被當作是 truthy](https://developer.mozilla.org/docs/Glossary/Truthy)。
-
----
-
-## 🚀 挑戰
-
-JavaScript 在處理資料結構時有許多種方法，有些場合為人詬病。在這方面做一些調查，例如：大小寫敏感性的問題！在命令欄中輸入看看： `let age = 1; let Age = 2; age == Age`，輸出結果是 `false`，為什麼? 你能找到其他問題嗎?
-
-## 課後測驗
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/8?loc=zh_tw)
-
-## 複習與自學
-
-試試看[這些 JavaScript 練習題](https://css-tricks.com/snippets/javascript/)。 你學到了什麼?
-
-## 作業
-
-[練習資料型態](assignment.zh-tw.md)
diff --git a/2-js-basics/1-data-types/translations/assignment.az.md b/2-js-basics/1-data-types/translations/assignment.az.md
deleted file mode 100644
index f2b5adf4..00000000
--- a/2-js-basics/1-data-types/translations/assignment.az.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Məlumat növləri üzrə məşqlər
-
-## Təlimatlar
-
-Təsəvvür edin ki, bir alış-veriş səbəti düzəldin. Alış-veriş təcrübənizi tamamlamaq üçün lazım olan məlumat növləri haqqında bəzi sənədləri yazın. Seçimlərinizə necə gəldiniz?
-
-## Ünvan kitabçası
-
-Meyarlar | Əla | adekvat | Təkmilləşdirmələr lazımdır
-  --- | --- | --- | - |
-  || Altı məlumat növü onların istifadəsini sənədləşdirərək ətraflı şəkildə sadalanır və araşdırılır | Dörd növ məlumat tədqiq edilir | İki növ məlumat tədqiq edilir |
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/assignment.de.md b/2-js-basics/1-data-types/translations/assignment.de.md
deleted file mode 100644
index 052cd99e..00000000
--- a/2-js-basics/1-data-types/translations/assignment.de.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Datentypen üben
-
-## Anleitung
-
-Stellen Sie sich vor, Sie bauen einen Einkaufswagen. Schreiben Sie eine Dokumentation zu den Datentypen, die Sie benötigen, um Ihr Einkaufserlebnis zu vervollständigen. Wie sind Sie zu Ihren Entscheidungen gekommen?
-
-## Rubrik
-
-Kriterien | Vorbildlich | Angemessen | Muss verbessert werden
---- | --- | --- | - |
-|| Die sechs Datentypen werden aufgelistet und detailliert untersucht, wobei ihre Verwendung dokumentiert wird. | Vier Datentypen werden untersucht. | Zwei Datentypen werden untersucht. |
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/assignment.es.md b/2-js-basics/1-data-types/translations/assignment.es.md
deleted file mode 100644
index 55672c2d..00000000
--- a/2-js-basics/1-data-types/translations/assignment.es.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Práctica de tipos de datos
-
-## Instrucciones
-
-Imagina que estás construyendo un carrito de compras. Escriba documentación sobre los tipos de datos que necesitaría para completar su experiencia de compra. ¿Cómo llegó a sus elecciones?
-
-## Rúbrica
-
-Criterios | Ejemplar | Adecuado | Necesita mejorar
---- | --- | --- | - |
-|| Los seis tipos de datos se enumeran y exploran en detalle, documentando su uso | Se exploran cuatro tipos de datos | Se exploran dos tipos de datos |
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/assignment.fr.md b/2-js-basics/1-data-types/translations/assignment.fr.md
deleted file mode 100644
index 5a4291cc..00000000
--- a/2-js-basics/1-data-types/translations/assignment.fr.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Types de données Pratique
-
-## Instructions
-
-Imaginez que vous construisez un panier d'achat. Écrivez une documentation sur les types de données dont vous auriez besoin pour compléter votre expérience d'achat. Comment êtes vous arrivé à vos choix?
-
-## Rubrique
-
-Critères |Exemplaire |Adéquat | Besoin d'amélioration
---- |--- |--- |- |
-|| Les six types de données sont listés et explorés en détail, documentant leur utilisation | Quatre types de données sont explorés | Deux types de données sont explorés |
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/assignment.hi.md b/2-js-basics/1-data-types/translations/assignment.hi.md
deleted file mode 100644
index 6ddd4a14..00000000
--- a/2-js-basics/1-data-types/translations/assignment.hi.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# डेटा प्रकार अभ्यास
-
-## अनुदेश
-
-कल्पना कीजिए कि आप एक शॉपिंग कार्ट बना रहे हैं। डेटा प्रकारों पर कुछ दस्तावेज लिखें, जिन्हें आपको अपने खरीदारी के अनुभव को पूरा करने की आवश्यकता होगी। आप अपनी पसंद पर कैसे पहुंचे?
-
-## सरनामा
-
-| मानदंड | उदाहरणात्मक                                                                        | पर्याप्त                    | सुधार की जरूरत             |
-| ------ | ---------------------------------------------------------------------------------- | --------------------------- | -------------------------- |
-|        | छह डेटा प्रकार सूचीबद्ध हैं और विस्तार से पता लगाया है, उनके उपयोग का दस्तावेजीकरण | चार डेटाप्रकार की खोज की है | दो डेटाप्रकार की खोज की है |
diff --git a/2-js-basics/1-data-types/translations/assignment.id.md b/2-js-basics/1-data-types/translations/assignment.id.md
deleted file mode 100644
index c02a8eff..00000000
--- a/2-js-basics/1-data-types/translations/assignment.id.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Praktek Tipe Data
-
-## Instruksi
-
-Bayangkan Anda sedang membuat keranjang belanja. Tulislah beberapa dokumentasi tentang tipe data yang Anda perlukan untuk melengkapi pengalaman berbelanja Anda. Bagaimana Anda sampai pada pilihan Anda?
-
-## Rubrik
-
-| Kriteria | Contoh                                                                                 | Memenuhi Syarat              | Perlu Perbaikan            |
-|----------|----------------------------------------------------------------------------------------|------------------------------|----------------------------|
-|          | Enam tipe data didaftar dan dieksplorasi secara rinci, mendokumentasikan penggunaannya | Empat tipe data dieksplorasi | Dua tipe data dieksplorasi |
diff --git a/2-js-basics/1-data-types/translations/assignment.it.md b/2-js-basics/1-data-types/translations/assignment.it.md
deleted file mode 100644
index be3bebf2..00000000
--- a/2-js-basics/1-data-types/translations/assignment.it.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Esercizi sui Tipi di Dato
-
-## Istruzioni
-
-Si immagini di costruire un carrello della spesa. Si scriva della documentazione sui tipi di dati necessari per completare la propria esperienza di acquisto. Come si è pervenuti alle proprie scelte?
-
-## Rubrica
-
-Criteri | Ottimo | Adeguato | Necessari miglioramenti
- --- | --- | --- | - |
- || I sei tipi di dato sono elencati ed esplorati in dettaglio, documentando il loro utilizzo | Vengono esplorati quattro tipi di dati | Vengono esplorati due tipi di dati |
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/assignment.ja.md b/2-js-basics/1-data-types/translations/assignment.ja.md
deleted file mode 100644
index 1ade0bff..00000000
--- a/2-js-basics/1-data-types/translations/assignment.ja.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# データ型の練習
-
-## 説明書
-
-あなたがショッピングカートを構築していると想像してください。ショッピング体験を完成させるために必要なデータ型について、いくつかの文書を書いてください。どのようにして選択にたどり着いたのでしょうか？
-
-## ルーブリック
-
-基準 | 模範的な例 | 適切な | 改善が必要
---- | --- | --- | -- |
-||6つのデータタイプをリストアップして詳細に調査し、その使用法を文書化しています。|4つのデータ型が探索されています。|2つのデータタイプが探索されています。|
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/assignment.ko.md b/2-js-basics/1-data-types/translations/assignment.ko.md
deleted file mode 100644
index ef19a326..00000000
--- a/2-js-basics/1-data-types/translations/assignment.ko.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 데이터 타입 연습
-
-## 설명
-
-쇼핑 카트를 만든다고 상상해봅시다. 필요한 데이터 타입들에 대한 문서를 작성해봅시다. 어떻게 그런 타입들을 고르게 됐습니까?
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 6가지 데이터 타입을 나열하고 자세히 살펴본 뒤 용도를 문서화한 경우 | 4가지 데이터 타입을 탐구한 답안 | 2가지 데이터 타입을 탐구한 경우
diff --git a/2-js-basics/1-data-types/translations/assignment.ms.md b/2-js-basics/1-data-types/translations/assignment.ms.md
deleted file mode 100644
index 6ac6ef2e..00000000
--- a/2-js-basics/1-data-types/translations/assignment.ms.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Latihan Jenis Data
-
-## Arahan
-
-Bayangkan anda sedang membina keranjang belanja. Tulis beberapa dokumentasi mengenai jenis data yang anda perlukan untuk melengkapkan pengalaman membeli-belah anda. Bagaimana anda sampai pada pilihan anda?
-
-## Rubrik
-
-Kriteria | Contoh | Mencukupi | Usaha Lagi
---- | --- | --- | -- |
-||Enam jenis data disenaraikan dan diterokai secara terperinci, mendokumentasikan penggunaannya|Empat jenis data diterokai|Duo jenis data diterokai|
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/assignment.nl.md b/2-js-basics/1-data-types/translations/assignment.nl.md
deleted file mode 100644
index 841db475..00000000
--- a/2-js-basics/1-data-types/translations/assignment.nl.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Gegevenstypen Oefening
-
-## Instructies
-
-Stelt u voor dat u een winkelwagentje aan het bouwen bent. Schrijf wat documentatie over de gegevenstypen die u nodig zou hebben om uw winkelervaring te voltooien. Hoe bent u tot uw keuzes gekomen?
-
-## Rubriek
-
-Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd
---- | --- | --- | -- |
-||De zes gegevenstypen worden opgesomd en in detail onderzocht, waarbij het gebruik ervan wordt gedocumenteerd|Vier gegevenstypen worden onderzocht|Twee gegevenstypen worden onderzocht|
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/assignment.pt.md b/2-js-basics/1-data-types/translations/assignment.pt.md
deleted file mode 100644
index 19a8b9de..00000000
--- a/2-js-basics/1-data-types/translations/assignment.pt.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Prática de Tipos de Dados
-
-## Instruções
-
-Imagine que você está construindo um carrinho de compras. Escreva alguma documentação sobre os tipos de dados de que você precisa para completar sua experiência de compra. Como você fez suas escolhas?
-
-## Rubrica
-
-Critérios | Exemplar | Adequado | Precisa de melhorias
---- | --- | --- | - |
-|| Os seis tipos de dados são listados e explorados em detalhes, documentando seu uso | Quatro tipos de dados são explorados | Dois tipos de dados são explorados |
\ No newline at end of file
diff --git a/2-js-basics/1-data-types/translations/assignment.zh-cn.md b/2-js-basics/1-data-types/translations/assignment.zh-cn.md
deleted file mode 100644
index af0ee9aa..00000000
--- a/2-js-basics/1-data-types/translations/assignment.zh-cn.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 数据类型练习
-
-## 说明
-
-想象你正在搭建一个购物车。写一个文档，描述一下为了完成你的购物之旅你可能会用到哪些数据类型。你是如何得出这些选择的？
-
-## 评价表
-
-| 指标 | 优秀 | 良好 | 尚可进步 |
-| --- | --- | --- | --- |
-| | 六种数据类型都被列出并且详细进行了说明，还说明了它们会被如何使用 | 举了四种数据类型 | 举了两种数据类型 |
diff --git a/2-js-basics/1-data-types/translations/assignment.zh-tw.md b/2-js-basics/1-data-types/translations/assignment.zh-tw.md
deleted file mode 100644
index 0fd84cce..00000000
--- a/2-js-basics/1-data-types/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 練習資料型態
-
-## 簡介
-
-想像你要建立一條購物清單，寫下你需要使用的資料型態。你是怎麼做出這些選擇的?
-
-## 學習評量
-
-| 作業內容 | 優良                               | 普通                               | 待改進                             |
-| -------- | ---------------------------------- | ---------------------------------- | ---------------------------------- |
-|          | 使用六種資料型態並解釋用途以及用法 | 使用四種資料型態並解釋用途以及用法 | 使用兩種資料型態並解釋用途以及用法 |
diff --git a/2-js-basics/2-functions-methods/translations/README.de.md b/2-js-basics/2-functions-methods/translations/README.de.md
deleted file mode 100644
index 586a6a31..00000000
--- a/2-js-basics/2-functions-methods/translations/README.de.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# JavaScript-Grundlagen: Methoden und Funktionen
-
-[![Methoden und Funktionen](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methoden und Funktionen")
-
-## [Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
-
-Wenn wir darüber nachdenken, Code zu schreiben, möchten wir immer sicherstellen, dass unser Code lesbar ist. Während dies nicht intuitiv klingt, wird Code viel öfter gelesen als geschrieben. Ein Kernwerkzeug in der Toolbox eines Entwicklers, um wartbaren Code sicherzustellen, ist die **Funktion**.
-
-## Funktionen
-
-Eine Funktion ist im Kern ein Codeblock, den wir bei Bedarf ausführen können. Dies ist perfekt für Szenarien, in denen wir dieselbe Aufgabe mehrmals ausführen müssen. Anstatt die Logik an mehreren Orten zu duplizieren (was eine Aktualisierung zu gegebener Zeit erschweren würde), können wir sie an einem Ort zentralisieren und jederzeit aufrufen, wenn die Operation ausgeführt werden muss - Sie können sogar Funktionen von anderen Funktionen aus aufrufen!.
-
-Ebenso wichtig ist die Fähigkeit, eine Funktion zu benennen. Obwohl dies trivial erscheinen mag, bietet der Name eine schnelle Möglichkeit, einen Codeabschnitt zu dokumentieren. Sie können sich dies als Beschriftung auf einer Schaltfläche vorstellen. Wenn ich auf eine Schaltfläche mit der Aufschrift "Timer abbrechen" klicke, weiß ich, dass die Uhr nicht mehr läuft.
-
-## Eine Funktion erstellen und aufrufen
-
-Die Syntax für eine Funktion sieht folgendermaßen aus:
-
-
-```javascript
-function nameOfFunction() { // function definition
- // function definition/body
-}
-```
-
-Wenn ich eine Funktion zum Anzeigen einer Begrüßung erstellen wollte, könnte dies folgendermaßen aussehen:
-
-```javascript
-function displayGreeting() {
-  console.log('Hello, world!');
-}
-```
-
-Wann immer wir unsere Funktion aufrufen (oder aufrufen) möchten, verwenden wir den Namen der Funktion, gefolgt von `()`. Es ist erwähnenswert, dass unsere Funktion definiert werden kann, bevor oder nachdem wir uns entscheiden, sie aufzurufen. Der JavaScript-Compiler findet es für Sie.
-
-
-```javascript
-// calling our function
-displayGreeting();
-```
-
-> **HINWEIS:** Es gibt eine spezielle Art von Funktion, die als **Methode** bekannt ist und die Sie bereits verwendet haben! Tatsächlich haben wir dies in unserer obigen Demo gesehen, als wir `console.log` verwendet haben. Was eine Methode von einer Funktion unterscheidet, ist, dass eine Methode an ein Objekt angehängt ist (in unserem Beispiel `console`), während eine Funktion frei schwebend ist. Sie werden hören, dass viele Entwickler diese Begriffe synonym verwenden.
-
-### Best Practices für Funktionen
-
-Es gibt eine Handvoll Best Practices, die beim Erstellen von Funktionen berücksichtigt werden müssen
-
-- Verwenden Sie wie immer beschreibende Namen, damit Sie wissen, was die Funktion tun wird
-- Verwenden Sie **camelCasing**, um Wörter zu kombinieren
-- Konzentrieren Sie Ihre Funktionen auf eine bestimmte Aufgabe
-
-## Informationen an eine Funktion übergeben
-
-Um eine Funktion wiederverwendbarer zu machen, möchten Sie häufig Informationen an sie weitergeben. Wenn wir unser Beispiel `displayGreeting` oben betrachten, wird nur **Hallo, Welt!** angezeigt. Nicht die nützlichste Funktion, die man erstellen könnte. Wenn wir es etwas flexibler gestalten möchten, z. B. jemandem erlauben, den Namen der zu begrüßenden Person anzugeben, können wir einen **Parameter** hinzufügen. Ein Parameter (manchmal auch als **Argument** bezeichnet) sind zusätzliche Informationen, die an eine Funktion gesendet werden.
-
-Die Parameter sind im Definitionsteil in Klammern aufgeführt und werden wie folgt durch Kommas getrennt:
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-Wir können unser `displayGreeting` aktualisieren, um einen Namen zu akzeptieren und diesen anzeigen zu lassen.
-
-
-```javascript
-function displayGreeting(name) {
-  const message = `Hello, ${name}!`;
-  console.log(message);
-}
-```
-
-Wenn wir unsere Funktion aufrufen und den Parameter übergeben möchten, geben wir ihn in Klammern an.
-
-```javascript
-displayGreeting('Christopher');
-// zeigt "Hallo Christopher!" wenn ausgeführt
-```
-
-## Standardwerte
-
-Wir können unsere Funktion noch flexibler gestalten, indem wir weitere Parameter hinzufügen. Aber was ist, wenn nicht jeder Wert angegeben werden soll? In Übereinstimmung mit unserem Begrüßungsbeispiel könnten wir den Namen nach Bedarf belassen (wir müssen wissen, wen wir begrüßen), aber wir möchten, dass die Begrüßung selbst nach Wunsch angepasst wird. Wenn jemand es nicht anpassen möchte, geben wir stattdessen einen Standardwert an. Um einem Parameter einen Standardwert zuzuweisen, setzen wir ihn ähnlich wie einen Wert für eine Variable - `parameterName = 'defaultValue'`. Um ein vollständiges Beispiel zu sehen:
-
-
-```javascript
-function displayGreeting(name, salutation='Hello') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-When we call the function, we can then decide if we want to set a value for `salutation`.
-
-```javascript
-displayGreeting('Christopher');
-// zeigt "Hallo Christopher!"
-
-displayGreeting('Christopher', 'Hi');
-// zeigt "Hi Christopher!"
-```
-
-## Rückgabewerte
-
-Bisher wurde die von uns erstellte Funktion immer an die [Konsole](https://developer.mozilla.org/docs/Web/API/console) ausgegeben. Manchmal kann dies genau das sein, wonach wir suchen, insbesondere wenn wir Funktionen erstellen, die andere Dienste aufrufen. Was aber, wenn ich eine Hilfsfunktion erstellen möchte, um eine Berechnung durchzuführen und den Wert zurückzugeben, damit ich ihn an anderer Stelle verwenden kann?
-
-Wir können dies tun, indem wir einen **Rückgabewert** verwenden. Ein Rückgabewert wird von der Funktion zurückgegeben und kann in einer Variablen genauso gespeichert werden, wie wir einen Literalwert wie eine Zeichenfolge oder eine Zahl speichern könnten.
-
-Wenn eine Funktion etwas zurückgibt, wird das Schlüsselwort `return` verwendet. Das Schlüsselwort `return` erwartet einen Wert oder eine Referenz dessen, was wie folgt zurückgegeben wird:
-
-
-```javascript
-return myVariable;
-```  
-
-Wir könnten eine Funktion erstellen, um eine Begrüßungsnachricht zu erstellen und den Wert an den Anrufer zurückzugeben:
-
-```javascript
-function createGreetingMessage(name) {
-  const message = `Hello, ${name}`;
-  return message;
-}
-```
-
-Beim Aufruf dieser Funktion speichern wir den Wert in einer Variablen. Dies ist fast die gleiche Art und Weise, wie wir eine Variable auf einen statischen Wert setzen würden (wie `const name = 'Christopher'`).
-
-```javascript
-const greetingMessage = createGreetingMessage('Christopher');
-```
-
-## Funktionen als Parameter für Funktionen
-
-Im Laufe Ihrer Programmierkarriere werden Sie auf Funktionen stoßen, die Funktionen als Parameter akzeptieren. Dieser nette Trick wird häufig verwendet, wenn wir nicht wissen, wann etwas eintreten oder abgeschlossen sein wird, aber wir wissen, dass wir als Reaktion darauf eine Operation ausführen müssen.
-
-Betrachten Sie als Beispiel [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), das einen Timer startet und nach dessen Ausführung Code ausführt. Wir müssen ihm sagen, welchen Code wir ausführen wollen. Klingt nach einem perfekten Job für eine Veranstaltung!
-
-Wenn Sie den folgenden Code ausführen, wird nach 3 Sekunden die Meldung **3 Sekunden sind verstrichen** angezeigt.
-
-
-```javascript
-function displayDone() {
-  console.log('3 seconds has elapsed');
-}
-// Der Timer-Wert wird in Millisekunden angegeben
-setTimeout(3000, displayDone);
-```
-
-### Anonyme Funktionen
-
-Schauen wir uns noch einmal an, was wir gebaut haben. Wir erstellen eine Funktion mit einem Namen, der einmal verwendet wird. Wenn unsere Anwendung komplexer wird, können wir uns vorstellen, viele Funktionen zu erstellen, die nur einmal aufgerufen werden. Das ist nicht ideal. Wie sich herausstellt, müssen wir nicht immer einen Namen angeben!
-
-Wenn wir eine Funktion als Parameter übergeben, können wir die Erstellung einer Funktion im Voraus umgehen und stattdessen eine als Teil des Parameters erstellen. Wir verwenden das gleiche Schlüsselwort `function`, aber stattdessen erstellen wir es als Parameter.
-
-Schreiben wir den obigen Code neu, um eine anonyme Funktion zu verwenden:
-
-```javascript
-setTimeout(3000, function() {
-  console.log('3 seconds has elapsed');
-});
-```
-
-Wenn Sie unseren neuen Code ausführen, werden Sie feststellen, dass wir die gleichen Ergebnisse erhalten. Wir haben eine Funktion erstellt, mussten ihr aber keinen Namen geben!
-
-### Fettpfeilfunktionen
-
-Eine in vielen Programmiersprachen (einschließlich JavaScript) übliche Abkürzung ist die Möglichkeit, eine sogenannte **arrow** - oder **fat arrow** -Funktion zu verwenden. Es wird ein spezieller Indikator für `=>` verwendet, der wie ein Pfeil aussieht - daher der Name! Mit `=>` können wir das Schlüsselwort `function` überspringen.
-
-Lassen Sie uns unseren Code noch einmal umschreiben, um eine Fettpfeilfunktion zu verwenden:
-
-
-```javascript
-setTimeout(3000, () => {
-  console.log('3 seconds has elapsed');
-});
-```
-
-### Wann wird jede Strategie angewendet?
-
-Sie haben jetzt gesehen, dass wir drei Möglichkeiten haben, eine Funktion als Parameter zu übergeben, und fragen sich möglicherweise, wann sie jeweils verwendet werden sollen. Wenn Sie wissen, dass Sie die Funktion mehrmals verwenden, erstellen Sie sie wie gewohnt. Wenn Sie es nur für einen Ort verwenden, ist es im Allgemeinen am besten, eine anonyme Funktion zu verwenden. Ob Sie eine Fat-Arrow-Funktion oder die traditionellere `function` Syntax verwenden, liegt bei Ihnen, aber Sie werden feststellen, dass die meisten modernen Entwickler `=>` bevorzugen.
-
-
----
-
-## 🚀 Herausforderung
-
-Können Sie den Unterschied zwischen Funktionen und Methoden in einem Satz artikulieren? Versuche es!
-
-## [Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
-
-## Review & Selbststudium
-
-Es lohnt sich, [etwas mehr über Pfeilfunktionen zu lesen](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), da diese zunehmend in Codebasen verwendet werden. Üben Sie, eine Funktion zu schreiben und sie dann mit dieser Syntax neu zu schreiben.
-
-## Zuordnung
-
-[Spaß mit Funktionen](assignment.de.md)
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/README.es.md b/2-js-basics/2-functions-methods/translations/README.es.md
deleted file mode 100644
index 7ed8ad5d..00000000
--- a/2-js-basics/2-functions-methods/translations/README.es.md
+++ /dev/null
@@ -1,189 +0,0 @@
-
-![JavaScript Basics - Functions](/sketchnotes/webdev101-js-functions.png)
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-# Conceptos básicos de JavaScript: función y funciones
-
-[![función y funciones](https://img.youtube.com/vi/DdCRhOQibMo/0.jpg)](https://youtube.com/watch?v=DdCRhOQibMo "función y funciones")
-
-## [Pre-lectura prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
-
-Cuando necesite su código para realizar una tarea, utilizará una función. Analicemos las diferencias.
-
-## Funciones
-
-Una función es un bloque de código destinado a realizar una tarea. Usted crea una función usando la palabra clave `function`, un nombre, un conjunto de parámetros y la definición de la función también conocida como funciones _body_. La sintaxis de una función se parece a la siguiente:
-
-```javascript
-function name(param, param2, param3) { // definición de función
- // definición de función/body
-}
-```
-
-## Funciones
-
-En esencia, una función es un bloque de código que podemos ejecutar bajo demanda. Esto es perfecto para escenarios en los que necesitamos realizar la misma tarea varias veces; en lugar de duplicar la lógica en varias ubicaciones (lo que dificultaría la actualización cuando llegue el momento), podemos centralizarla en una ubicación y llamarla cuando necesitemos que se realice la operación; ¡incluso puede llamar a funciones desde otras funciones!
-
-Igual de importante es la capacidad de nombrar una función. Si bien esto puede parecer trivial, el nombre proporciona una forma rápida de documentar una sección de código. Podría pensar en esto como una etiqueta en un botón. Si hago clic en un botón que dice "Cancelar temporizador", sé que dejará de correr el reloj.
-
-## Creando y llamando a una función
-
-La sintaxis de una función se parece a la siguiente:
-
-```javascript
-function nameOfFunction() { // definición de función
- // Código de la función
-}
-```
-
-Si quisiera crear una función para mostrar un saludo, podría verse así:
-
-```javascript
-function displayGreeting() {
-  console.log('¡Hola, mundo!');
-}
-```
-
-Siempre que queremos llamar (o invocar) nuestra función, usamos el nombre de la función seguido de `()`. Vale la pena señalar el hecho de que nuestra función se puede definir antes o después de que decidamos llamarla; el compilador de JavaScript lo encontrará por usted.
-
-```javascript
-// llamando nuestra función
-displayGreeting();
-```
-
-> **NOTA:** Existe un tipo especial de función conocida como **método**, que ya ha estado utilizando. De hecho, vimos esto en nuestra demostración anterior cuando usamos `console.log`. Lo que hace que un método sea diferente de una función es que un método está adjunto a un objeto (`consola` en nuestro ejemplo), mientras que una función es flotante libre. Escuchará que muchos desarrolladores usan estos términos indistintamente.
-
-### Mejores prácticas de función
-
-Hay algunas prácticas recomendadas que se deben tener en cuenta al crear funciones:
-
-- Como siempre, use nombres descriptivos para que sepa lo que hará la función
-- Usa **camelCasing** para combinar palabras
-- Mantenga sus funciones enfocadas en una tarea específica
-
-## Pasar información a una función
-
-Para que una función sea más reutilizable, a menudo querrá pasarle información. Si consideramos nuestro ejemplo de `displayGreeting` anterior, solo mostrará **¡Hola, mundo!**. No es la función más útil que uno podría crear. Si queremos hacerlo un poco más flexible, como permitir que alguien especifique el nombre de la persona a saludar, podemos agregar un **parámetro**. Un parámetro (también llamado a veces **argumento**), es información adicional enviada a una función.
-
-Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-Podemos actualizar nuestro `displayGreeting` para aceptar un nombre y mostrarlo.
-
-```javascript
-function displayGreeting(name) {
-  const message = `¡Hola, ${name}!`;
-  console.log(message);
-}
-```
-
-Cuando queremos llamar a nuestra función y pasar el parámetro, lo especificamos entre paréntesis.
-
-```javascript
-displayGreeting('Paco');
-// dice "¡Hola, Paco!" cuando ejecutas el comando 
-```
-
-## Valores predeterminados
-
-Podemos hacer que nuestra función sea aún más flexible agregando más parámetros. Pero, ¿y si no queremos que se especifiquen todos los valores? Siguiendo con nuestro ejemplo de saludo, podríamos dejar el nombre según sea necesario (necesitamos saber a quién saludamos), pero queremos permitir que el saludo en sí se personalice como desee. Si alguien no quiere personalizarlo, proporcionamos un valor predeterminado en su lugar. Para proporcionar un valor predeterminado a un parámetro, lo configuramos de la misma manera que configuramos un valor para una variable: `parameterName = 'defaultValue'`. Para ver un ejemplo completo:
-
-```javascript
-function displayGreeting(name, salutation='Hola') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-Cuando llamamos a la función, podemos decidir si queremos establecer un valor para el "saludo".
-
-```javascript
-displayGreeting('Paco');
-// dice "Hola, Paco"
-
-displayGreeting('Paco', 'Hola');
-// dice "Hola, Paco"
-```
-### Parámetro
-
-Los parámetros se enumeran en la parte de definición entre paréntesis y están separados por comas así:
-
-```javascript
-(param, param2, param3)
-```
-
-### Parámetro
-
-Hasta ahora, la función que construimos siempre saldrá a la [consola](https://developer.mozilla.org/docs/Web/API/console). A veces, esto puede ser exactamente lo que estamos buscando, especialmente cuando creamos funciones que llamarán a otros servicios. Pero, ¿qué pasa si quiero crear una función auxiliar para realizar un cálculo y devolver el valor para poder usarlo en otro lugar?
-
-Podemos hacer esto usando un **valor de retorno**. La función devuelve un valor de retorno y se puede almacenar en una variable de la misma manera que podríamos almacenar un valor literal como una cadena o un número.
-
-Aquí define qué tarea debe realizar la función. Una función puede devolver algo o no. Si una función devuelve algo, entonces se usa la palabra clave `return`. La palabra clave `return` espera un valor o referencia de lo que se devuelve así:
-
-
-```javascript
-return myVariable;
-```  
-
-Un ejemplo más completo puede verse así:
-
-```javascript
-function add(firstValue, secondValue) {
-  let sum = firstValue + secondValue;
-  return sum;
-}
-```
-
-En el código anterior, se devuelve la variable `sum`.
-
-### Invocación
-
-Cuando _invocas_ una función, la llamas con 0...N conjuntos de argumentos. Los valores de los argumentos se vinculan a los parámetros correspondientes a su posición. La función `add()` introducido se puede invocar de la siguiente manera:
-
-
-```javascript
-let result = add(1, 3);
-console.log(result); // imprime 4
-```
-
-Los argumentos `1` y `3` están vinculados a los parámetros `firstValue` y `secondValue` debido al orden en el que se definen los parámetros.
-
-JavaScript es bastante flexible cuando se trata de invocaciones. No está obligado a proporcionar argumentos para todos los parámetros, el código se ejecutará de todos modos. Sin embargo, dependiendo de lo que le pase, es posible que el código no se comporte como se esperaba.
-
-> Desafío, intente llamar al función `add()` así `add(1)` y vea qué sucede
-
-### Valores predeterminados
-
-También existe el concepto de _ valores predeterminados_ en los parámetros. Esto significa que si no se pasa un argumento a un parámetro durante la invocación, el parámetro asumirá el valor predeterminado. Considere el siguiente código usando un valor predeterminado:
-
-
-```javascript
-function add5(firstValue, secondValue = 5) {
-  return firstValue + secondValue;
-}
-```
-
-La invocación de la función anterior podría verse así:
-
-```javascript
-add5 (4) // devuelve 9
-add5 (4,2) // devuelve 6
-```
-
-Cualquier parámetro con valores predeterminados debe estar al final de la lista de parámetros. La razón es que JavaScript intenta hacer coincidir argumentos con parámetros y los parámetros con valores predeterminados pueden omitirse en la invocación.
-
-🚀 Desafío:
-
-
-## [Prueba de validación de conocimientos](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
-
-## Revisión y autoestudio
-
-Vale la pena [leer un poco más sobre las funciones de flecha](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), ya que se utilizan cada vez más en bases de código. Practique escribir una función y luego reescribirla con esta sintaxis.
-
-**Tarea**: [Práctica de tipos de datos](assignment.es.md)
-
diff --git a/2-js-basics/2-functions-methods/translations/README.fr.md b/2-js-basics/2-functions-methods/translations/README.fr.md
deleted file mode 100644
index e170129d..00000000
--- a/2-js-basics/2-functions-methods/translations/README.fr.md
+++ /dev/null
@@ -1,196 +0,0 @@
-# Les bases du JavaScript : Méthodes et fonctions
-
-![Les bases de JavaScript - Fonctions](/sketchnotes/webdev101-js-functions.png)
-> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz préalable
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=fr)
-
-Lorsque nous pensons à écrire du code, nous voulons toujours nous assurer que notre code est lisible. Bien que cela puisse paraître contre-intuitif, le code est lu bien plus souvent qu'il n'est écrit. Un outil essentiel dans la boîte à outils d'un développeur pour garantir un code maintenable est la **fonction**.
-
-[![Méthodes et fonctions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
-
-> 🎥 Cliquez sur l'image ci-dessus pour voir une vidéo sur les méthodes et les fonctions.
-
-> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-functions/?WT.mc_id=academic-77807-sagibbon)!
-
-## Fonctions
-
-À la base, une fonction est un bloc de code que nous pouvons exécuter à la demande. C'est parfait pour les scénarios où nous devons effectuer la même tâche plusieurs fois; plutôt que de dupliquer la logique à plusieurs endroits (ce qui rendrait difficile la mise à jour le moment venu), nous pouvons la centraliser à un seul endroit et l'appeler chaque fois que nous avons besoin d'effectuer l'opération - vous pouvez même appeler des fonctions à partir d'autres fonctions !
-
-La possibilité de nommer une fonction est tout aussi importante. Bien que cela puisse sembler trivial, le nom fournit un moyen rapide de documenter une section de code. On pourrait penser à l'étiquette d'un bouton. Si je clique sur un bouton qui indique "Annuler le chronomètre", je sais qu'il va arrêter le chronomètre.
-
-## Créer et appeler une fonction
-
-La syntaxe d'une fonction ressemble à ce qui suit :
-
-```javascript
-function nameOfFunction() { // Définition de la fonction
- // Code de la fonction
-}
-```
-
-Si je voulais créer une fonction pour afficher une salutation, elle pourrait ressembler à ceci :
-
-```javascript
-function displayGreeting() {
-  console.log('Hello, world!');
-}
-```
-
-Chaque fois que nous voulons appeler (ou invoquer) notre fonction, nous utilisons le nom de la fonction suivi de `()`. Il est important de noter que notre fonction peut être définie avant ou après que nous ayons décidé de l'appeler; le compilateur JavaScript la trouvera pour vous.
-
-```javascript
-// Appel de notre fonction
-displayGreeting();
-```
-
-> **NOTE:** Il existe un type spécial de fonction appelé **méthode**, que vous avez déjà utilisé ! En fait, nous l'avons vu dans notre démonstration ci-dessus lorsque nous avons utilisé `console.log`. Ce qui différencie une méthode d'une fonction, c'est qu'une méthode est attachée à un objet (`console` dans notre exemple), alors qu'une fonction est flottante. Vous entendrez de nombreux développeurs utiliser ces termes de manière interchangeable.
-
-### Bonnes pratiques des fonctions
-
-Il existe une poignée de bonnes pratiques à garder à l'esprit lors de la création de fonctions
-
-- Comme toujours, utilisez des noms descriptifs afin de savoir ce que fera la fonction.
-- Utilisez le **camelCase** pour combiner les mots.
-- Faites en sorte que vos fonctions se concentrent sur une tâche spécifique
-
-## Transmettre des informations à une fonction
-
-Pour rendre une fonction plus réutilisable, vous voudrez souvent lui passer des informations. Si nous considérons notre exemple `displayGreeting` ci-dessus, il affichera seulement **Hello, world!**. Ce n'est pas la fonction la plus utile que l'on puisse créer. Si on veut la rendre un peu plus flexible, comme permettre à quelqu'un de spécifier le nom de la personne à saluer, on peut ajouter un **paramètre**. Un paramètre (aussi parfois appelé **argument**), est une information supplémentaire envoyée à une fonction.
-
-Les paramètres sont énumérés dans la partie définition entre parenthèses et sont séparés par des virgules comme suit :
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-Nous pouvons mettre à jour notre `displayGreeting` pour accepter un nom et l'afficher.
-
-```javascript
-function displayGreeting(name) {
-  const message = `Hello, ${name}!`;
-  console.log(message);
-}
-```
-
-Lorsque nous voulons appeler notre fonction et passer le paramètre, nous le spécifions dans la parenthèse.
-
-```javascript
-displayGreeting('Christopher');
-// Affiche "Hello, Christopher!"
-```
-
-## Valeurs par défaut
-
-Nous pouvons rendre notre fonction encore plus flexible en ajoutant d'autres paramètres. Mais que faire si nous ne voulons pas exiger que chaque valeur soit spécifiée ? Pour reprendre l'exemple de notre message d'accueil, nous pourrions laisser le nom comme paramètre obligatoire (nous devons savoir qui nous accueillons), mais nous voulons permettre à l'accueil lui-même d'être personnalisé à volonté. Si quelqu'un ne veut pas le personnaliser, nous fournissons une valeur par défaut à la place. Pour fournir une valeur par défaut à un paramètre, nous le définissons de la même manière que nous définissons une valeur pour une variable - `parameterName = 'defaultValue'`. Pour voir un exemple complet :
-
-```javascript
-function displayGreeting(name, salutation='Hello') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-Lorsque nous appelons la fonction, nous pouvons alors décider si nous voulons définir une valeur pour `salutation`.
-
-```javascript
-displayGreeting('Christopher');
-// Affiche "Hello, Christopher"
-
-displayGreeting('Christopher', 'Hi');
-// Affiche "Hi, Christopher"
-```
-
-## Valeurs de retour
-
-Jusqu'à présent, la fonction que nous avons créée s'affiche toujours dans la [console](https://developer.mozilla.org/docs/Web/API/console). Parfois, c'est exactement ce que nous recherchons, notamment lorsque nous créons des fonctions qui appelleront d'autres services. Mais que faire si je veux créer une fonction d'aide pour effectuer un calcul et renvoyer la valeur afin de pouvoir l'utiliser ailleurs ?
-
-Nous pouvons le faire en utilisant une **valeur de retour**. Une valeur de retour est renvoyée par la fonction et peut être stockée dans une variable de la même manière qu'une valeur littérale telle qu'une chaîne ou un nombre.
-
-Si une fonction renvoie quelque chose, le mot-clé `return` est utilisé. Le mot-clé `return` attend une valeur ou une référence de ce qui est retourné comme ceci :
-
-```javascript
-return myVariable;
-```  
-
-Nous pouvons créer une fonction pour créer un message d'accueil et renvoyer la valeur à l'appelant.
-
-```javascript
-function createGreetingMessage(name) {
-  const message = `Hello, ${name}`;
-  return message;
-}
-```
-
-Lorsque nous appelons cette fonction, nous stockons la valeur dans une variable. C'est à peu près la même chose que de définir une variable à une valeur statique (comme `const name = 'Christopher'`).
-
-```javascript
-const greetingMessage = createGreetingMessage('Christopher');
-```
-
-## Fonctions comme paramètres de fonctions
-
-Au fur et à mesure que vous progressez dans votre carrière de programmeur, vous rencontrerez des fonctions qui acceptent des fonctions comme paramètres. Cette astuce est couramment utilisée lorsque nous ne savons pas quand quelque chose va se produire ou se terminer, mais que nous savons que nous devons effectuer une opération en réponse.
-
-Prenons l'exemple de [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), qui lance une minuterie et exécute un code lorsqu'elle est terminée. Nous devons lui indiquer quel code nous voulons exécuter. C'est le travail idéal pour une fonction !
-
-Si vous exécutez le code ci-dessous, après 3 secondes, vous verrez le message **3 secondes se sont écoulées**.
-
-```javascript
-function displayDone() {
-  console.log('3 secondes se sont écoulées');
-}
-// Valeur du délai en millisecondes
-setTimeout(displayDone, 3000);
-```
-
-### Fonctions anonymes
-
-Regardons à nouveau ce que nous avons construit. Nous créons une fonction avec un nom qui ne sera utilisé qu'une seule fois. Au fur et à mesure que notre application devient plus complexe, nous pouvons nous voir créer un grand nombre de fonctions qui ne seront appelées qu'une seule fois. Ce n'est pas l'idéal. Il s'avère que nous n'avons pas toujours besoin de fournir un nom !
-
-Lorsque nous passons une fonction en paramètre, nous pouvons éviter d'en créer une à l'avance et en construire une en tant que partie du paramètre. Nous utilisons le même mot-clé `function`, mais nous le construisons comme un paramètre.
-
-Réécrivons le code ci-dessus pour utiliser une fonction anonyme :
-
-```javascript
-setTimeout(function() {
-  console.log('3 secondes se sont écoulées');
-}, 3000);
-```
-
-Si vous exécutez notre nouveau code, vous remarquerez que nous obtenons les mêmes résultats. Nous avons créé une fonction, mais nous n'avons pas eu besoin de lui donner un nom !
-
-### Fonctions fléchées
-
-Un raccourci commun à de nombreux langages de programmation (y compris JavaScript) est la possibilité d'utiliser ce que l'on appelle une fonction **fléchée**. Elle utilise un indicateur spécial, `=>`, qui ressemble à une flèche - d'où son nom ! En utilisant `=>`, nous sommes en mesure de sauter le mot-clé `function`.
-
-Réécrivons notre code une fois de plus pour utiliser une fonction fléchée :
-
-```javascript
-setTimeout(() => {
-  console.log('3 secondes se sont écoulées');
-}, 3000);
-```
-
-### Quand utiliser chaque stratégie
-
-Vous avez maintenant vu que nous avons trois façons de passer une fonction en paramètre et vous vous demandez peut-être quand utiliser chacune d'entre elles. Si vous savez que vous utiliserez la fonction plus d'une fois, créez-la normalement. Si vous ne l'utilisez qu'à un seul endroit, il est généralement préférable d'utiliser une fonction anonyme. C'est à vous de décider si vous utilisez une fonction fléchée ou la syntaxe plus traditionnelle `function`, mais vous remarquerez que la plupart des développeurs modernes préfèrent `=>`.
-
----
-
-## 🚀 Défi
-
-Pouvez-vous expliquer en une phrase la différence entre les fonctions et les méthodes ? Essayez de le faire !
-
-## Quiz de validation des connaissances
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=fr)
-
-## Révision et étude personnelle
-
-Cela vaut la peine de [lire un peu plus sur les fonctions fléchées](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), car elles sont de plus en plus utilisées dans les bases de code. Entraînez-vous à écrire une fonction, puis à la réécrire avec cette syntaxe.
-
-## Affectation
-
-[S'amuser avec les fonctions](assignment.fr.md)
diff --git a/2-js-basics/2-functions-methods/translations/README.hi.md b/2-js-basics/2-functions-methods/translations/README.hi.md
deleted file mode 100644
index 027ad2b5..00000000
--- a/2-js-basics/2-functions-methods/translations/README.hi.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# जावास्क्रिप्ट मूल बातें: मेथड्स और फंक्शन्स
-
-![जावास्क्रिप्ट मूल बातें - कार्य](/sketchnotes/webdev101-js-functions.png)
-> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=hi)
-
-जब हम कोड लिखने के बारे में सोचते हैं, तो हम हमेशा यह सुनिश्चित करना चाहते हैं कि हमारा कोड पढ़ने योग्य हो। हालांकि यह तर्कविरूद्ध लगता है, लेकिन कोड को लिखे जाने की तुलना में कई गुना अधिक पढ़ा जाता है। एक डेवलपर टूलबॉक्स में एक कोर टूल, जिसमें यह सुनिश्चित करने के लिए कि कोड योग्य है **फ़ंक्शन** है।
-
-[![मेथड्स एंड फ़ंक्शंस ](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "मेथड्स और फ़ंक्शंस")
-
-> मेथड्स और फ़ंक्शंस के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
-
-
-## फ़ंक्शंस 
-
-इसके मूल में, एक फ़ंक्शन कोड का एक ब्लॉक है जिसे हम मांग पर निष्पादित कर सकते हैं। यह उन परिदृश्यों के लिए एकदम सही है जहाँ हमें एक ही कार्य को कई बार करने की आवश्यकता होती है; कई स्थानों पर तर्क की नकल करने के बजाय (जो समय आने पर इसे अपडेट करना कठिन बना देगा), हम इसे एक स्थान पर केंद्रीकृत कर सकते हैं, और जब भी हमें ऑपरेशन की आवश्यकता हो, तब कॉल कर सकते हैं - आप अन्य फंक्शन्स से भी एक फंक्शन को कॉल कर सकते हैं!
-
-एक फंक्शन का नाम रखने की क्षमता भी इतनी ही महत्वपूर्ण है। हालांकि यह भ्रामक प्रतीत हो सकता है, लेकिन नाम कोड के एक सेक्शन का दस्तावेजीकरण करने का एक त्वरित तरीका प्रदान करता है। आप इसे एक बटन पर एक लेबल के रूप में सोच सकते हैं। अगर मैं एक बटन पर क्लिक करता हूं जिसमें लिखा है "टाइमर रद्द करें", मुझे पता है कि यह घड़ी को चलाने से रोकने वाला है।
-
-## फंक्शन बनाना और कॉल करना
-
-किसी फ़ंक्शन का सिंटैक्स निम्न जैसा दिखता है:
-
-```javascript
-function nameOfFunction() { // function definition
- // function definition/body
-}
-```
-
-अगर मैं ग्रीटिंग प्रदर्शित करने के लिए कोई फ़ंक्शन बनाना चाहता हूं, तो यह इस तरह दिख सकता है:
-
-```javascript
-function displayGreeting() {
-  console.log('Hello, world!');
-}
-```
-
-जब भी हम अपने फ़ंक्शन को कॉल करना (या इनवोक करना) चाहते हैं, हम फ़ंक्शन के नाम के बाद `()` का उपयोग करते हैं। यह ध्यान देने योग्य है कि हमारे फ़ंक्शन को कॉल करने का निर्णय लेने से पहले या बाद में परिभाषित किया जा सकता है; जावास्क्रिप्ट कंपाइलर इसे आपके लिए खोजेगा।
-
-```javascript
-// calling our function
-displayGreeting();
-```
-
-> **नोट:** एक विशेष प्रकार का फ़ंक्शन है जिसे **मेथड** के रूप में जाना जाता है, जिसका आप पहले से ही उपयोग कर रहे हैं! वास्तव में, हमने इसे ऊपर अपने डेमो में देखा था जब हमने `console.log` का उपयोग किया था। जो चीज मेथड को फंक्शन से अलग बनाती है वो है की मेथड एक ऑब्जेक्ट से जुड़ी होती है (हमारे उदाहरण में `console`), जबकि एक फ़ंक्शन फ्री-फ़्लोटिंग है। आप कई डेवलपर्स से इन शब्दों का इस्तेमाल परस्पर करते सुनेंगे।
-
-### सर्वोत्तम फ़ंक्शन प्रथाएं
-
-फ़ंक्शन का निर्माण करते समय ध्यान में रखने के लिए सर्वोत्तम अभ्यास हैं
-
-- हमेशा की तरह, वर्णनात्मक नामों का उपयोग करें ताकि आप जान सकें कि फ़ंक्शन क्या करेगा
-- शब्दों को संयोजित करने के लिए **camelCasing** का उपयोग करें
-- अपने कार्यों को किसी विशिष्ट कार्य पर केंद्रित रखें
-
-## किसी फ़ंक्शन के लिए जानकारी पास करना
-
-किसी फ़ंक्शन को अधिक पुन: प्रयोज्य बनाने के लिए आप अक्सर उसमें जानकारी देना चाहेंगे। अगर हम ऊपर अपने `displayGreeting` उदाहरण पर विचार करते हैं, तो यह केवल **Hello, world** प्रदर्शित करेगा। सबसे उपयोगी फ़ंक्शन कोई नहीं बना सकता है। यदि हम इसे थोड़ा और लचीला बनाना चाहते हैं, जैसे किसी व्यक्ति को बधाई देने के लिए व्यक्ति का नाम निर्दिष्ट करने की अनुमति देना, हम एक **पैरामीटर** जोड़ सकते हैं। एक पैरामीटर (जिसे कभी-कभी **आर्गुमेंट** भी कहा जाता है), एक फ़ंक्शन को भेजी जाने वाली अतिरिक्त जानकारी है।
-
-पैरामीटर को कोष्ठक के भीतर परिभाषा भाग में सूचीबद्ध किया जाता है और अल्पविराम को अलग किया जाता है:
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-हम एक नाम को स्वीकार करने के लिए अपने `displayGreeting` को अपडेट कर सकते हैं और उसे प्रदर्शित कर सकते हैं।
-
-```javascript
-function displayGreeting(name) {
-  const message = `Hello, ${name}!`;
-  console.log(message);
-}
-```
-
-जब हम अपने फ़ंक्शन को कॉल करना चाहते हैं और पैरामीटर में पास करते हैं, तो हम इसे कोष्ठक में निर्दिष्ट करते हैं।
-
-```javascript
-displayGreeting('Christopher');
-// displays "Hello, Christopher!" when run
-```
-
-## डिफॉल्ट मान
-
-हम अधिक मापदंडों को जोड़कर अपने कार्य को और अधिक लचीला बना सकते हैं। लेकिन क्या होगा अगर हम हर मूल्य को निर्दिष्ट करने की आवश्यकता नहीं चाहते हैं? अपने ग्रीटिंग उदाहरण के साथ रखते हुए, हम आवश्यकता के अनुसार नाम छोड़ सकते हैं (हमें यह जानना होगा कि हम किसका अभिवादन कर रहे हैं), लेकिन हम चाहते हैं कि ग्रीटिंग को वांछित रूप में अनुकूलित किया जाए। यदि कोई इसे अनुकूलित नहीं करना चाहता है, तो हम इसके बजाय एक डिफ़ॉल्ट मान प्रदान करते हैं। एक पैरामीटर को एक डिफ़ॉल्ट मान प्रदान करने के लिए, हम इसे उसी तरह से सेट करते हैं जिस तरह से हम एक चर के लिए मान सेट करते हैं - `parameterName = 'defaultValue'`। एक पूर्ण उदाहरण देखने के लिए:
-
-```javascript
-function displayGreeting(name, salutation='Hello') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-जब हम फ़ंक्शन को कॉल करते हैं, तो हम यह तय कर सकते हैं कि क्या हम `सैल्यूटेशन` के लिए कोई मूल्य निर्धारित करना चाहते हैं।
-
-```javascript
-displayGreeting('Christopher');
-// displays "Hello, Christopher"
-
-displayGreeting('Christopher', 'Hi');
-// displays "Hi, Christopher"
-```
-
-## आउटपुट लौटाएं
-
-अब तक हमने जो फ़ंक्शन बनाया है वह हमेशा [कंसोल](https://developer.mozilla.org/docs/Web/API/console) पर आउटपुट करेगा। कभी-कभी यह ठीक वही हो सकता है जिसकी हम तलाश कर रहे हैं, खासकर जब हम फ़ंक्शन बनाते हैं जो अन्य सेवाओं को कॉल करेगा। लेकिन क्या होगा अगर मैं गणना करने और मान प्रदान करने के लिए एक सहायक फ़ंक्शन बनाना चाहता हूं तो मैं इसे कहीं और उपयोग कर सकता हूं?
-
-हम **रिटर्न वैल्यू** का उपयोग करके ऐसा कर सकते हैं। एक वापसी मान फ़ंक्शन द्वारा लौटाया जाता है, और इसे एक चर में संग्रहीत किया जा सकता है, जैसे कि हम एक स्ट्रिंग या संख्या जैसे शाब्दिक मूल्य को संग्रहीत कर सकते हैं।
-
-यदि कोई फ़ंक्शन कुछ वापस करता है तो कीवर्ड `return` का उपयोग किया जाता है। `return` कीवर्ड को इस तरह से लौटाए जाने के मूल्य या संदर्भ की उम्मीद है:
-
-```javascript
-return myVariable;
-```  
-
-हम एक बधाई संदेश बनाने के लिए एक फ़ंक्शन बना सकते हैं और कॉलर को वापस मान दे सकते हैं
-
-```javascript
-function createGreetingMessage(name) {
-  const message = `Hello, ${name}`;
-  return message;
-}
-```
-
-इस फ़ंक्शन को कॉल करते समय हम एक वैरिएबल में मान संग्रहीत करेंगे। यह उसी तरह है जैसे हम एक वैरिएबल को स्थिर मान (जैसे `const name ='Christopher'`) में सेट करते हैं।
-
-```javascript
-const greetingMessage = createGreetingMessage('Christopher');
-```
-
-## फंक्शन्स के लिए पैरामीटर के रूप में कार्य
-
-जैसे ही आप अपने प्रोग्रामिंग करियर में आगे बढ़ते हैं, आप ऐसे फंक्शन में आएंगे, जो फंक्शन्स को पैरामीटर के रूप में स्वीकार करते हैं। इस साफ-सुथरी चाल का इस्तेमाल आमतौर पर तब किया जाता है जब हम नहीं जानते कि कब कुछ होने वाला है या पूरा हो रहा है, लेकिन हम जानते हैं कि हमें प्रतिक्रिया में एक ऑपरेशन करने की जरूरत है।
-
-एक उदाहरण के रूप में, [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) पर विचार करें, जो एक टाइमर शुरू करता है और पूरा होने पर कोड निष्पादित करेगा। हमें यह बताना होगा कि हम किस कोड को निष्पादित करना चाहते हैं। एक समारोह के लिए एक सही काम की तरह लगता है!
-
-यदि आप नीचे दिए गए कोड को चलाते हैं, तो 3 सेकंड के बाद आपको संदेश दिखाई देगा **3 सेकंड में** समाप्त हो गया है।
-
-```javascript
-function displayDone() {
-  console.log('3 seconds has elapsed');
-}
-// timer value is in milliseconds
-setTimeout(displayDone, 3000);
-```
-
-### अनाम फंक्शन्स 
-
-आइए एक और नज़र डालें कि हमने क्या बनाया है। हम एक नाम के साथ एक फ़ंक्शन बना रहे हैं जिसका उपयोग एक बार किया जाएगा। जैसे-जैसे हमारा आवेदन अधिक जटिल होता जाता है, हम स्वयं को बहुत सारे कार्य बनाते हुए देख सकते हैं, जिसे केवल एक बार ही कहा जाएगा। यह आदर्श नहीं है। जैसा कि यह पता चला है, हमें हमेशा एक नाम प्रदान करने की आवश्यकता नहीं है!
-
-जब हम एक फ़ंक्शन को एक पैरामीटर के रूप में पारित कर रहे हैं, तो हम पहले से एक बनाने के लिए बाईपास कर सकते हैं और इसके बजाय एक पैरामीटर के हिस्से के रूप में निर्माण कर सकते हैं। हम उसी  `function` कीवर्ड का उपयोग करते हैं, लेकिन इसके बजाय हम इसे एक पैरामीटर के रूप में बनाते हैं।
-
-अनाम फ़ंक्शन का उपयोग करने के लिए ऊपर दिए गए कोड को फिर से लिखें:
-
-```javascript
-setTimeout(function() {
-  console.log('3 seconds has elapsed');
-}, 3000);
-```
-
-यदि आप हमारा नया कोड चलाते हैं, तो आपको वही परिणाम मिलेंगे। हमने एक फ़ंक्शन बनाया है, लेकिन इसे कोई नाम नहीं देना है!
-
-### फैट एरो फंक्शन्स 
-
-बहुत सारी प्रोग्रामिंग भाषाओं में एक शॉर्टकट (जावास्क्रिप्ट सहित) एक का उपयोग करने की क्षमता है जिसे **एरो** या **फैट एरो** फ़ंक्शन कहा जाता है। यह `=>` के एक विशेष संकेतक का उपयोग करता है, जो एक तीर की तरह दिखता है - इस प्रकार नाम! `=>` का उपयोग करके, हम `function` कीवर्ड को छोड़ सकते हैं।
-
-चलो एक फैट एरो फंक्शन्स का उपयोग करने के लिए हमारे कोड को एक बार फिर से लिखें:
-
-```javascript
-setTimeout(() => {
-  console.log('3 seconds has elapsed');
-}, 3000);
-```
-
-### प्रत्येक रणनीति का उपयोग कब करें
-
-अब आपने देखा है कि हमारे पास फंक्शन को एक पैरामीटर के रूप में पास करने के तीन तरीके हैं और प्रत्येक का उपयोग करते समय सोच सकते हैं। यदि आप जानते हैं कि आप एक से अधिक बार फ़ंक्शन का उपयोग कर रहे हैं, तो इसे सामान्य रूप से बनाएं। यदि आप इसे केवल एक स्थान के लिए उपयोग कर रहे हैं, तो यह आमतौर पर एक अनाम फ़ंक्शन का उपयोग करने के लिए सबसे अच्छा है।आप फैट एरो फंक्शन्स या अधिक पारंपरिक `फ़ंक्शन` सिंटैक्स का उपयोग करते हैं या नहीं, आप पर निर्भर है, लेकिन आप देखेंगे कि अधिकांश आधुनिक डेवलपर्स` => `पसंद करते हैं।
-
----
-
-## 🚀 चुनौती
-
-क्या आप एक वाक्य में कार्यों और विधियों के बीच के अंतर को स्पष्ट कर सकते हैं? कोशिश तो करो!
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-यह लायक है [एरो फ़ंक्शंस पर थोड़ा और पढ़ना](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), क्योंकि वे कोड बेस में उपयोग किए जा रहे हैं। एक फ़ंक्शन लिखने का अभ्यास करें, और फिर इस सिंटैक्स के साथ इसे फिर से लिखना।
-
-## असाइनमेंट
-
-[फन विथ फंशन्स ](assignment.hi.md)
diff --git a/2-js-basics/2-functions-methods/translations/README.id.md b/2-js-basics/2-functions-methods/translations/README.id.md
deleted file mode 100644
index 79c10f4f..00000000
--- a/2-js-basics/2-functions-methods/translations/README.id.md
+++ /dev/null
@@ -1,194 +0,0 @@
-# Dasar-dasar JavaScript: Metode dan Fungsi
-
-![Dasar-dasar JavaScript - Fungsi](/sketchnotes/webdev101-js-functions.png)
-
-> Catatan sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuis Pra-Kuliah
-
-[Kuis pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=id)
-
-Ketika kita berpikir tentang menulis kode, kita selalu ingin memastikan kode kita dapat dibaca. Meskipun ini terdengar berlawanan dengan intuisi, kode dibaca lebih banyak kali daripada yang tertulis. Salah satu alat inti dalam kotak alat pengembang untuk memastikan kode yang dapat dipelihara adalah **function (fungsi)**.
-
-[![Metode dan Fungsi](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Metode dan Fungsi")
-
-## Fungsi
-
-Pada intinya, fungsi adalah sekumpulan kode yang dapat kita jalankan sesuai permintaan. Ini sempurna untuk skenario di mana kita perlu melakukan tugas yang sama beberapa kali; daripada menduplikasi logika di beberapa lokasi (yang akan menyulitkan pembaruan saat waktunya tiba), kita dapat memusatkannya di satu lokasi, dan memanggilnya kapan pun kita membutuhkan operasi dilakukan - Anda bahkan dapat memanggil fungsi dari fungsi lain!.
-
-Sama pentingnya adalah kemampuan untuk menamai suatu fungsi. Meskipun ini mungkin tampak sepele, nama tersebut memberikan cara cepat untuk mendokumentasikan bagian kode. Anda bisa menganggap ini sebagai label pada sebuah tombol. Jika saya mengklik tombol yang bertuliskan "Batalkan pengatur waktu", saya tahu itu akan berhenti menjalankan jam.
-
-## Membuat dan memanggil suatu fungsi
-
-Sintaks untuk suatu fungsi terlihat seperti berikut:
-
-```javascript
-function nameOfFunction() {
-  // definisi fungsi
-  // definisi fungsi/tubuh
-}
-```
-
-Jika saya ingin membuat fungsi untuk menampilkan salam, mungkin akan terlihat seperti ini:
-
-```javascript
-function tampilkanSapaan() {
-  console.log("Hello, world!");
-}
-```
-
-Kapanpun kita ingin memanggil (atau memanggil) fungsi kita, kita menggunakan nama fungsi yang diikuti dengan `()`. Perlu diperhatikan fakta bahwa fungsi kita dapat didefinisikan sebelum atau sesudah kita memutuskan untuk memanggilnya; kompilator JavaScript (JavaScript compiler) akan menemukannya untuk Anda.
-
-```javascript
-// memanggil fungsi kita
-tampilkanSapaan();
-```
-
-> **CATATAN:** Ada jenis fungsi khusus yang dikenal sebagai **method**, yang telah Anda gunakan! Faktanya, kita melihat ini di demo kita di atas ketika kita menggunakan `console.log`. Apa yang membuat metode berbeda dari fungsi adalah metode dilampirkan ke objek (`konsol` dalam contoh kita), sementara fungsi mengambang bebas. Anda akan mendengar banyak pengembang menggunakan istilah ini secara bergantian.
-
-### Praktik terbaik fungsi
-
-Ada beberapa praktik terbaik yang perlu diperhatikan saat membuat fungsi
-
-- Seperti biasa, gunakan nama deskriptif agar Anda tahu fungsinya
-- Gunakan **camelCasing** untuk menggabungkan kata-kata
-- Jaga agar fungsi Anda tetap fokus pada tugas tertentu
-
-## Memasukkan informasi ke suatu fungsi
-
-Agar suatu fungsi lebih dapat digunakan kembali, Anda sering kali ingin menyampaikan informasi ke dalamnya. Jika kita mempertimbangkan contoh `tampilkanSapaan` di atas, itu hanya akan menampilkan **Halo, dunia!**. Bukan fungsi paling berguna yang bisa dibuat seseorang. Jika kita ingin membuatnya sedikit lebih fleksibel, seperti mengizinkan seseorang untuk menentukan nama orang yang akan disapa, kita dapat menambahkan **parameter**. Parameter (juga terkadang disebut **argumen**), adalah informasi tambahan yang dikirim ke suatu fungsi.
-
-Parameter dicantumkan di bagian definisi dalam tanda kurung dan dipisahkan dengan koma seperti ini:
-
-```javascript
-function nama(param, param2, param3) {}
-```
-
-Kita dapat memperbarui `tampilkanSapaan` kita untuk menerima sebuah nama dan menampilkannya.
-
-```javascript
-function tampilkanSapaan(nama) {
-  const pesan = `Hello, ${nama}!`;
-  console.log(pesan);
-}
-```
-
-Ketika kita ingin memanggil fungsi kita dan memasukkan parameternya, kita tentukan di dalam tanda kurung.
-
-```javascript
-tampilkanSapaan("Christopher");
-// Menampilkan "Hello, Christopher!" ketika dijalankan
-```
-
-## Nilai dasar (Nilai Default)
-
-Kita dapat membuat fungsi kita lebih fleksibel dengan menambahkan lebih banyak parameter. Tetapi bagaimana jika kita tidak ingin setiap nilai ditentukan? Sesuai dengan contoh sapaan kita, kita bisa membiarkan nama sesuai kebutuhan (kita perlu tahu siapa yang kita sapa), tapi kita ingin membiarkan sapaan itu sendiri disesuaikan sesuai keinginan. Jika seseorang tidak ingin menyesuaikannya, kita memberikan nilai default sebagai gantinya. Untuk memberikan nilai default ke parameter, kita menyetelnya dengan cara yang sama seperti kita menyetel nilai untuk variabel - `namaParameter = 'nilaiDefault'`. Berikut contoh lengkapnya:
-
-```javascript
-function tampilkanSapaan(nama, salam = "Hello") {
-  console.log(`${salam}, ${nama}`);
-}
-```
-
-Ketika kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai dari `salam`.
-
-```javascript
-tampilkanSapaan("Christopher");
-// menampilkan "Hello, Christopher"
-
-tampilkanSapaan("Christopher", "Hi");
-// menampilkan "Hi, Christopher"
-```
-
-## Nilai Kembali (Return values)
-
-Hingga saat ini fungsi yang kita buat akan selalu menghasilkan [konsol](https://developer.mozilla.org/docs/Web/API/console). Terkadang ini persis seperti yang kita cari, terutama saat kita membuat fungsi yang akan memanggil layanan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan kalkulasi dan memberikan nilai kembali sehingga saya dapat menggunakannya di tempat lain?
-
-Kita bisa melakukan ini dengan menggunakan **nilai kembali (return value)**. Nilai kembali dikembalikan oleh fungsi, dan dapat disimpan dalam variabel sama seperti kita dapat menyimpan nilai literal seperti string atau angka.
-
-Jika suatu fungsi mengembalikan sesuatu maka kata kunci `return` digunakan. Kata kunci `return` mengharapkan nilai atau referensi dari apa yang dikembalikan seperti:
-
-```javascript
-return variabelSaya;
-```
-
-Kita bisa membuat fungsi untuk membuat pesan ucapan dan mengembalikan nilainya ke pemanggil
-
-```javascript
-function buatPesanSapaan(nama) {
-  const pesan = `Hello, ${nama}`;
-  return pesan;
-}
-```
-
-Saat memanggil fungsi ini, kita akan menyimpan nilai dalam variabel. Ini hampir sama dengan cara kita menetapkan variabel ke nilai statis (seperti `const nama = 'Christopher'`).
-
-```javascript
-const pesanSapaan = buatPesanSapaan("Christopher");
-```
-
-## Fungsi sebagai parameter untuk fungsi
-
-Saat Anda maju dalam karir pemrograman Anda, Anda akan menemukan fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tanggapan.
-
-Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulai timer dan akan mengeksekusi kode setelah selesai. Kita perlu memberi tahu kode apa yang ingin kita jalankan. Kedengarannya seperti pekerjaan yang sempurna untuk suatu fungsi!
-
-Jika Anda menjalankan kode di bawah ini, setelah 3 detik Anda akan melihat pesan **3 detik telah berlalu**.
-
-```javascript
-function tampilkanSelesai() {
-  console.log("3 detik telah berlalu");
-}
-// nilai timer dalam milidetik
-setTimeout(3000, tampilkanSelesai);
-```
-
-### Fungsi anonim
-
-Mari kita lihat lagi apa yang telah kita bangun. Kita membuat fungsi dengan nama yang akan digunakan satu kali. Saat aplikasi kita menjadi lebih kompleks, kita dapat melihat diri kita sendiri membuat banyak fungsi yang hanya akan dipanggil sekali. Ini tidak ideal. Ternyata, kita tidak selalu perlu memberi nama!
-
-Saat kita mengirimkan fungsi sebagai parameter, kita dapat mengabaikan pembuatannya terlebih dahulu dan sebagai gantinya membuatnya sebagai bagian dari parameter. Kita menggunakan kata kunci `function` yang sama, tetapi kita membuatnya sebagai parameter.
-
-Mari tulis ulang kode di atas untuk menggunakan fungsi anonim:
-
-```javascript
-setTimeout(3000, function () {
-  console.log("3 detik telah berlalu");
-});
-```
-
-Jika Anda menjalankan kode baru kita, Anda akan melihat kita mendapatkan hasil yang sama. Kita telah membuat fungsi, tetapi tidak harus memberinya nama!
-
-### Fungsi panah gemuk
-
-Satu pintasan yang umum di banyak bahasa pemrograman (termasuk JavaScript) adalah kemampuan untuk menggunakan apa yang disebut fungsi **panah (arrow)** atau **panah gemuk (fat arrow)**. Ini menggunakan indikator khusus `=>`, yang terlihat seperti panah - demikian namanya! Dengan menggunakan `=>`, kita dapat melewati kata kunci `function`.
-
-Mari kita tulis ulang kode kita sekali lagi untuk menggunakan fungsi panah gemuk:
-
-```javascript
-setTimeout(3000, () => {
-  console.log("3 detik telah berlalu");
-});
-```
-
-### Kapan menggunakan setiap strategi
-
-Anda sekarang telah melihat bahwa kita memiliki tiga cara untuk meneruskan fungsi sebagai parameter dan mungkin bertanya-tanya kapan harus menggunakannya. Jika Anda tahu Anda akan menggunakan fungsi tersebut lebih dari sekali, buatlah seperti biasa. Jika Anda akan menggunakannya hanya untuk satu lokasi, biasanya yang terbaik adalah menggunakan fungsi anonim. Apakah Anda menggunakan fungsi panah gemuk atau tidak atau sintaks `function` yang lebih tradisional terserah Anda, tetapi Anda akan melihat sebagian besar pengembang modern lebih memilih`=>`.
-
----
-
-## 🚀 Tantangan
-
-Bisakah Anda mengartikulasikan dalam satu kalimat perbedaan antara fungsi dan metode? Cobalah!
-
-## Kuis Pasca-Kuliah
-
-[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=id)
-
-## Review & Belajar Mandiri
-
-Layak [membaca lebih banyak tentang fungsi panah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), karena semakin sering digunakan dalam basis kode. Berlatihlah menulis fungsi, lalu menulis ulang dengan sintaks ini.
-
-## Tugas
-
-[Bersenang-senang dengan Fungsi](./assignment.id.md)
diff --git a/2-js-basics/2-functions-methods/translations/README.it.md b/2-js-basics/2-functions-methods/translations/README.it.md
deleted file mode 100644
index 71c0f896..00000000
--- a/2-js-basics/2-functions-methods/translations/README.it.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# Nozioni di base su JavaScript: Metodi e Funzioni
-
-![Nozioni di base su JavaScript - Funzioni](/sketchnotes/webdev101-js-functions.png)
-> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz pre-lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=it)
-
-Quando si pensa di scrivere codice, ci si vuole sempre assicurare che il proprio codice sia leggibile. Anche se questo sembra controintuitivo, il codice viene letto molte più volte di quanto non venga scritto. Uno strumento base nella cassetta degli attrezzi dello sviluppatore è la **funzione**
-
-[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
-
-## Funzioni
-
-Essenzialmente, una funzione è un blocco di codice che si può eseguire su richiesta. Questo è perfetto per gli scenari in cui si deve eseguire la stessa attività più volte; invece di duplicare la logica in più posizioni (il che renderebbe difficile l'aggiornamento quando arriva il momento), è possibile centralizzarla in una posizione e chiamarla ogni volta che serve eseguire quell'operazione - è possibile persino chiamare funzioni da altre funzioni!.
-
-Altrettanto importante è la capacità di nominare una funzione. Anche se questo potrebbe sembrare banale, il nome fornisce un modo rapido per documentare una sezione di codice. Si potrebbe pensare a questo come un'etichetta su un pulsante. Se clicco su un pulsante che dice "Annulla timer", so che interromperà il conteggio del tempo.
-
-## Creare e chiamare una funzione
-
-La sintassi di una funzione è simile alla seguente:
-
-```javascript
-function nameOfFunction() { // definizione della funzione
- // definizione della funzione/corpo
-}
-```
-
-Se si volesse creare una funzione per visualizzare un saluto, potrebbe assomigliare a questo:
-
-```javascript
-function displayGreeting() {
-  console.log('Hello, world!');
-}
-```
-
-Ogniqualvolta si voglia chiamare (o invocare) una funzione, si usa il nome della funzione seguito da `()`. Vale la pena notare il fatto che la funzione può essere definita prima o dopo aver deciso di chiamarla; il compilatore JavaScript la troverà da solo.
-
-```javascript
-// chiamata della funzione
-displayGreeting();
-```
-
-> Esiste un tipo speciale di funzione, noto come metodo, che già si sta usando! In effetti questo si è visto nella demo di cui sopra quando si è usato  `console.log`. Quello che rende un metodo diverso da una funzione è che il metodo è attaccato a un oggetto (la console nell'esempio), mentre una funzione è libera.Si sentiranno molti sviluppatori usare questi termini in modo intercambiabile.
-
-### Migliori pratiche per la funzione
-
-Ci sono alcune buone pratiche da tenere a mente quando si creano funzioni
-
-- Come sempre, usare nomi descrittivi in modo da sapere cosa farà la funzione
-- Usare la notazione a cammello (camelCase) per combinare le parole
-- Mantenere le proprie funzioni concentrate su un'attività specifica
-
-## Passare di informazioni a una funzione
-
-Per rendere una funzione più riutilizzabile spesso si vorrà passarle delle informazioni. Se si considera la funzione di esempio `displayGreeting` qui sopra, visualizzerà solamente `Hello, world!`.Non è la funzione più utile che si possa creare. Se la si vuole rendere un poco più flessibile, tipo consentire a qualcuno di specificare il nome della persona da salutare, si può aggiungere un **parametro**. Un parametro (talvota chiamato anche **argomento**), è una informazione addizionale inviata alla funzione.
-
-I parametri sono elencati nella parte di definizione tra parentesi e sono separati da virgole in questo modo:
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-E' possibile aggiornare la funzione `displayGreeting` in modo che accetti un nome e lo visualizzi.
-
-```javascript
-function displayGreeting(name) {
-  const message = `Hello, ${name}!`;
-  console.log(message);
-}
-```
-
-Quando si vuole chiamare la funzione e passare il parametro, lo si specifica tra parentesi.
-
-```javascript
-displayGreeting('Christopher');
-// visualizza "Hello, Christopher!" quando eseguita
-```
-
-## Valori predefiniti
-
-E' possibile rendere la funzione ancora più flessibile aggiungendo più parametri. Ma cosa succede se non si vuole richiedere che ogni valore sia specificato? Continuando con l'esempio di saluto, si potrebbe lasciare il nome come richiesto (serve sapere chi si sta salutando), ma si vuole personalizzare coma desiderato anche il saluto. Se qualcuno non vuole personalizzarlo, si fornisce invece un valore predefinito. Per fornire a un parametro un valore predefinito, lo si imposta in modo praticamente uguale a come si assegna un valore a una variabile - `nomeParametro = 'valorePredefinito'`. Ecco un esempio completo:
-
-```javascript
-function displayGreeting(name, salutation='Hello') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-Quando si chiama la funzione, è possibile poi decidere se si vuole impostare un valore per `salutation`.
-
-```javascript
-displayGreeting('Christopher');
-// visualizza "Hello, Christopher"
-
-displayGreeting('Christopher', 'Hi');
-// visualizza "Hi, Christopher"
-```
-
-## Valori restituiti
-
-Fino ad ora la funzione costruita mostrerà sempre il suo risultato alla [console](https://https://developer.mozilla.org/it/docs/Web/API/Console). A volte questo può essere esattamente quello che si sta cercando, specialmente quando si creano funzioni che chiameranno altri servizi. Ma cosa succede se si vuole creare una funzione di supporto per eseguire un calcolo e ritornare il valore in modo da poterlo utilizzare altrove?
-
-Si può fare utilizzando un **valore di ritorno**. Un valore di ritorno viene restituito dalla funzione e può essere memorizzato in una variabile proprio come si potrebbe memorizzare un valore letterale come una stringa o un numero.
-
-Se una funzione ritorna qualcosa allora si deve usare la parola chiave `return`. La parola chiave `return` si attende un valore o un riferimento a ciò che viene ritornato, in questo modo:
-
-```javascript
-return myVariable;
-```
-
-Si potrebbe creare una funzione per creare un messaggio di saluto e restituire il valore al chiamante
-
-```javascript
-function createGreetingMessage(name) {
-  const message = `Hello, ${name}`;
-  return message;
-}
-```
-
-Quando si chiama questa funzione, il valore verrà memorizzato in una variabile. E' praticamente lo stesso modo nel quale si imposterebbe una variabile a un valore statico (tipo `const name = 'Christopher'`).
-
-```javascript
-const greetingMessage = createGreetingMessage('Christopher');
-```
-
-## Funzioni come parametri per funzioni
-
-Man mano che si progredisce nella propria carriera di programmatore, ci si imbatterà in funzioni che accettano funzioni come parametri. Questo trucco è comunemente usato quando non si sa quando qualcosa accadrà o sarà completata, ma si sa che si deve eseguire un'operazione in risposta.
-
-Come esempio si consideri [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), che fa partire un timer ed eseguirà del codice il tempo viene esaurito. Occorre dirgli quale codice si vuole eseguire. Sembra un lavoro perfetto per una funzione!
-
-Se si esegue il codice qui sopra, dopo 3 secondi si vedrà il messaggio **3 seconds has elapsed** (sono trascorsi 3 secondi).
-
-
-```javascript
-function displayDone() {
-  console.log('3 seconds has elapsed');
-}
-// il valore del timer è in millisecondi
-setTimeout(displayDone, 3000);
-```
-
-### Funzioni anonime
-
-Si dia un'altra occhiata a ciò che è stato costruito. Si sta creando una funzione con un nome che verrà utilizzata una volta. Man mano che la propria applicazione diventa più complessa, si può prevedere che verranno create molte funzioni che verranno chiamate solo una volta. Questo non è l'ideale. A quanto pare, non è sempre necessario fornire un nome!
-
-Quando si passa una funzione come parametro, è possibile evitare di crearla in anticipo e invece costruirne una come parte del parametro. Si usa la stessa parola chiave `function`, ma invece la si costruisce come parametro.
-
-Il codice qui sopra viene riscritto per utilizzare una funzione anonima:
-
-```javascript
-setTimeout(function() {
-  console.log('3 seconds has elapsed');
-}, 3000);
-```
-
-Se si esegue adesso  il nuovo codice si noterà che vengono ottenuti gli stessi risultati. E' stata creata una funzione, ma non si è dovuto darle un nome!
-
-### Funzioni fat arrow
-
-Una scorciatoia comune in molti linguaggi di programmazione (incluso JavaScript) è la possibilità di utilizzare quella che viene chiamata una funzione **freccia** o funzione **fat arrow** . Utilizza un indicatore speciale,  `=>`, che assomiglia a una freccia, da cui il nome! Usando `=>`, è possibile saltare la parola chiave `function` .
-
-Ora il codice viene riscritto ancora una volta (refattorizzato) per utilizzare una funzione fat arrow:
-
-```javascript
-setTimeout(() => {
-  console.log('3 seconds has elapsed');
-}, 3000);
-```
-
-### Quando utilizzare ciascuna strategia
-
-Ora che si è visto che ci sono tre modi per passare una funzione come parametro ci si potrebbe chiedere quando usare ciascuno di essi. Se si sa che funzione verrà utilizzata più di una volta, si crea  normalmente. Se la si utilizzerà solo per una posizione, in genere è meglio utilizzare una funzione anonima. Se si usa o meno una funzione fat arrow o la sintassi più tradizionale `function` dipende dallo sviluppatore, ma si noterà che la maggior parte degli sviluppatori moderni preferisce `=>`.
-
----
-
-## 🚀 Sfida
-
-Si riesce ad articolare in una frase la differenza tra funzioni e metodi? Fare un tentativo!
-
-## Quiz post-lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=it)
-
-## Revisione e auto apprendimento
-
-Vale la pena [leggere un poco di più sulle funzioni arrow](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), poiché sono sempre più utilizzate nelle basi di codice. Esercitarsi a scrivere una funzione, quindi riscriverla con questa sintassi.
-
-## Compito
-
-[Divertimento con le funzioni](assignment.it.md)
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/README.ja.md b/2-js-basics/2-functions-methods/translations/README.ja.md
deleted file mode 100644
index c3d895dc..00000000
--- a/2-js-basics/2-functions-methods/translations/README.ja.md
+++ /dev/null
@@ -1,192 +0,0 @@
-# JavaScript の基本: メソッドと関数
-
-![JavaScript Basics - Functions](/sketchnotes/webdev101-js-functions.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## レッスン前の小テスト
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=ja)
-
-コードを書くことを考えるとき、私たちは常にコードが読みやすいようにしたいと考えています。直感的ではないように聞こえるかもしれませんが、コードは書かれた回数よりも何度も読まれます。コードを確実にメンテナンスできるようにするための開発者のツールボックスの中心的なツールの一つが **関数** です。
-
-[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
-
-## 関数
-
-コアとなるのは、関数は必要に応じて実行できるコードのブロックです。これは、同じタスクを何度も実行する必要がある場合に最適です。ロジックを複数の場所に複製するのではなく (時間が来たときに更新するのが困難になります)、1つの場所に集中させ、実行する操作が必要なときにいつでも呼び出すことができます - 他の関数から関数を呼び出すこともできます!
-
-他の関数から関数を呼び出すこともできます！同じくらい重要なのは、関数に名前を付ける機能です。これは些細なことのように思われるかもしれませんが、名前をつけることでコードのセクションを簡単に文書化することができます。これはボタンのラベルのようなものと考えることができます。もし "Cancel timer" と書かれたボタンをクリックすると、それが時計の動作を止めようとしていることがわかります。
-
-## 関数の作成と呼び出し
-
-関数の構文は次のようになります:
-
-```javascript
-function nameOfFunction() { // 関数の定義
- // 関数の定義/中身
-}
-```
-
-挨拶を表示する関数を作ろうと思ったら、こんな感じになるかもしれません:
-
-```javascript
-function displayGreeting() {
-  console.log('Hello, world!');
-}
-```
-
-関数を直接呼び出したい (または別スレッド、別コンテキストの関数を呼び出したい) ときはいつでも、関数名の後に `()` をつけます。関数を呼び出す前に定義しても後に定義してもよいという事実は注目に値します; JavaScript コンパイラがそれを見つけてくれます。
-
-```javascript
-// 関数の呼び出し
-displayGreeting();
-```
-
-> **注:** **メソッド** として知られている特殊なタイプの関数がありますが、これはすでに使ったことがあるでしょう！実際、上のデモではこれを見ました。実際、上のデモでは `console.log` を使っています。メソッドが関数と異なるのは、メソッドがオブジェクト (この例では `console`) にアタッチされているのに対し、関数はフリーフローティングです。多くの開発者がこれらの用語を互換性を持って使っているのを耳にするでしょう。
-
-### 関数のベストプラクティス
-
-機能を作成する際に留意すべきベストプラクティスがいくつかあります。
-
-- いつものように、関数が何をするのかがわかるように、記述的な名前を使用します
-- **キャメルケーシング** を使用して単語を組み合わせます
-- 関数を特定のタスクに集中させます
-
-## 関数への情報の受け渡し
-
-関数をより再利用可能なものにするためには、情報を渡したいことがよくあります。上の `displayGreeting` の例を考えてみると、**Hello, world!** しか表示されません。これでは、作成できる関数の中で最も有用なものとは言えません。挨拶する相手の名前を指定できるようにするなど、もう少し柔軟にしたい場合は、**パラメータ** を追加することができます。パラメータ (**引数** と呼ばれることもあります) は、関数に送られる追加情報です。
-
-パラメータは定義部分に括弧内に記載されており、以下のようにカンマで区切られています:
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-名前を受け付けてそれを表示するように `displayGreeting` を更新することができます。
-
-```javascript
-function displayGreeting(name) {
-  const message = `Hello, ${name}!`;
-  console.log(message);
-}
-```
-
-関数を呼び出してパラメータを渡すときは、括弧内で指定します。
-
-```javascript
-displayGreeting('Christopher');
-// 実行時に "Hello, Christopher!" と表示される
-```
-
-## 初期値
-
-より多くのパラメータを追加することで、関数をさらに柔軟にすることができます。しかし、すべての値を指定する必要がない場合はどうでしょうか？挨拶の例に倣って、名前は必須のままにしておくこともできますが (誰に挨拶しているのかを知る必要があります)、挨拶自体は必要に応じてカスタマイズできるようにしたいと考えています。誰かがカスタマイズしたくない場合は、代わりにデフォルト値を指定します。パラメータにデフォルト値を設定するには、変数に値を設定するのと同じ方法 - `parameterName = 'defaultValue'` でパラメータを設定します。完全な例を見るには、以下を参照してください。
-
-```javascript
-function displayGreeting(name, salutation='Hello') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-関数を呼び出すときに、`salutation` に値を設定するかどうかを決めることができます。
-
-```javascript
-displayGreeting('Christopher');
-// "Hello, Christopher" と表示されます。
-
-displayGreeting('Christopher', 'Hi');
-// "Hi, Christopher" と表示されます。
-```
-
-## 戻り値
-
-今までは、私たちが作った関数は常に [console](https://developer.mozilla.org/ja/docs/Web/API/console) に出力されていました。特に他のサービスを呼び出す関数を作成する場合には、これがまさに求めているものになることがあります。しかし、計算を実行するヘルパー関数を作成して値を返し、それを他の場所で使えるようにしたい場合はどうしたらいいでしょうか？
-
-これを行うには、**戻り値** を使用します。戻り値は関数から返され、文字列や数値などのリテラル値を格納するのと同じように変数に格納することができます。
-
-関数が何かを返す場合は、キーワード `return` が使用されます。キーワード `return` は、以下のように返されるものの値や参照を期待しています:
-
-```javascript
-return myVariable;
-```  
-
-挨拶メッセージを作成して、その値を呼び出し元に返す関数を作成することができます。
-
-```javascript
-function createGreetingMessage(name) {
-  const message = `Hello, ${name}`;
-  return message;
-}
-```
-
-この関数を呼び出すときには、変数に値を格納します。これは、(`const name = 'Christopher'` のように) 変数に静的な値を設定するのと同じ方法です。
-
-```javascript
-const greetingMessage = createGreetingMessage('Christopher');
-```
-
-## 関数のパラメータとしての関数
-
-プログラミングのキャリアを積んでいくと、関数をパラメータとして受け入れる関数に出くわすようになります。この巧妙なトリックは、何かがいつ発生するか、または完了するかわからないが、レスポンスとして操作を実行する必要があることがわかっている場合によく使われます。
-
-例として、タイマーを開始し、タイマーが完了したらコードを実行する [setTimeout](https://developer.mozilla.org/ja/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) を考えてみましょう。どのようなコードを実行したいかを伝える必要があります。関数としては完璧な仕事のように聞こえます。
-
-以下のコードを実行すると、3秒後に **3秒が経過しました** というメッセージが表示されます。
-
-```javascript
-function displayDone() {
-  console.log('3秒が経過しました');
-}
-// タイマーの値はミリ秒単位
-setTimeout(displayDone, 3000);
-```
-
-### 匿名関数
-
-もう一度、作ったものを見てみましょう。一度だけ使用される名前の関数を作成しています。アプリケーションが複雑になるにつれて、一度しか呼ばれない関数をたくさん作ることになるでしょう。これは理想的ではありません。しかし、常に名前を指定する必要はありません。
-
-パラメータとして関数を渡すときは、事前に関数を作成する必要はなく、代わりにパラメータの一部として関数を作成することができます。同じ `function` キーワードを使用しますが、代わりにパラメータとしてビルドします。
-
-上のコードを書き換えて、匿名の関数を使用してみましょう。
-
-```javascript
-setTimeout(function() {
-  console.log('3秒が経過しました');
-}, 3000);
-```
-
-新しいコードを実行すると、同じ結果が得られることに気づくでしょう。関数を作りましたが、名前をつける必要はありませんでした。
-
-### ファットアロー関数
-
-多くのプログラミング言語 (JavaScript を含む) に共通するショートカットは、**アロー** または **ファットアロー** 関数と呼ばれるものを使用することです。これは、矢印のように見える `=>` という特殊なインジケータを使用します。`=>` を使うことで、`function` キーワードを省略することができます。
-
-ファットアロー関数を使って、もう一度コードを書き換えてみましょう。
-
-```javascript
-setTimeout(() => {
-  console.log('3 seconds has elapsed');
-}, 3000);
-```
-
-### それぞれの戦略を使うとき
-
-関数をパラメータとして渡すには3つの方法があることがわかりましたが、それぞれをいつ使うか迷っているかもしれません。関数を複数回使用することがわかっているのであれば、通常通りに作成してください。1 つの場所だけで使用する場合は、一般的には匿名関数を使用するのがベストです。太いアロー関数を使うか、より伝統的な `function` 構文を使うかはあなた次第ですが、最近の開発者の多くは `=>` を好んでいることに気づくでしょう。
-
----
-
-## 🚀 チャレンジ
-
-関数とメソッドの違いを一文で表現できますか？試してみてください。
-
-## レッスン後の小テスト
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=ja)
-
-## 復習と自己学習
-
-コードベースで使われることが多くなってきているアロー関数については、[もう少し読み込んでみる](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)価値があると思います。この構文で関数を書いて、それを書き換える練習をしてみましょう。
-
-## 課題
-
-[関数で楽しむ](assignment.ja.md)
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/README.ko.md b/2-js-basics/2-functions-methods/translations/README.ko.md
deleted file mode 100644
index 53387ce7..00000000
--- a/2-js-basics/2-functions-methods/translations/README.ko.md
+++ /dev/null
@@ -1,192 +0,0 @@
-# JavaScript 기초: 메소드와 함수
-
-![JavaScript Basics - Functions](/sketchnotes/webdev101-js-functions.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 강의 전 퀴즈
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=ko)
-
-코드 작성에 대해 생각할 때 항상 코드를 읽을 수 있도록 해야합니다. 직설적이지 않지만, 코드는 작성된 것보다 더 많이 읽힙니다. 개발자의 툴 박스에서 유지관리 가능한 코드를 보장하는 핵심 도구는 **함수**입니다.
-
-[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
-
-## 함수
-
-핵심으로, 함수는 요청 시 실행할 수 있는 코드 블록입니다. 동일한 작업을 여러 번 수행하는 시나리오에 적합합니다; 로직을 여러 위치에 복사하는 대신(특정 시기에 업데이트하기 어렵게 만들 수 있음), 한 위치에 로직을 집중하고, 작업이 필요할 때마다 호출할 수 있습니다. 다른 함수에서 함수를 호출할 수도 있습니다!.
-
-함수의 이름을 지정하는 능력도 중요합니다. 사소할 수 있지만, 이름은 코드 문서화를 빠르게 해줍니다. 버튼의 레이블로 생각할 수도 있습니다. "타이머 취소"라는 버튼을 클릭하면, 시계가 중지된다는 것을 알 수 있습니다.
-
-## 함수 만들고 호출하기
-
-함수 구문은 다음과 같습니다:
-
-```javascript
-function nameOfFunction() { // function definition
- // function definition/body
-}
-```
-
-인사말 출력하는 함수를 만들고 싶다면, 다음과 같이 보일 수 있습니다:
-
-```javascript
-function displayGreeting() {
-  console.log('Hello, world!');
-}
-```
-
-함수를 호출(또는 invoke)할 때마다, 함수 이름 뒤에 `()`를 사용합니다. 함수를 호출하기 전후에 정의할 수 있다는 사실에 주목할 가치가 있습니다; JavaScript 컴파일러가 찾을 것입니다.
-
-```javascript
-// calling our function
-displayGreeting();
-```
-
-> **NOTE:** 이미 사용하고 있는 **메소드**라는 특별한 타입의 함수가 있습니다! 실제로, 데모에서 `console.log`를 사용할 때 보았습니다. 메소드가 함수와 다른 점은 메소드가 객체(`console`)에 연결되어있는 반면에, 함수는 free floating 상태라는 것입니다. 많은 개발자들이 같은 의미로 사용하는 걸 듣게 될 것입니다.
-
-### 좋은 함수 예시
-
-함수를 만들 때 알아야 할 몇 가지 좋은 사례가 있습니다
-
-- 항상 그렇듯이, 설명이 포함된 이름을 사용해서 함수가 수행하는 작업을 알 수 있습니다
-- **camelCasing** 를 사용하여 단어 결합
-- 특정 작업에 맞춘 함수 유지
-
-## 함수에 정보 전달하기
-
-함수를 더 재사용하기 위해 종종 정보를 전달하고 싶을 것입니다. 아래의 `displayGreeting` 예시를 고려하면 **Hello, world!** 만 출력됩니다. 만들 수 있는 가장 유용한 함수는 아닙니다. 인사할 사람의 이름을 정하는 것 처럼 더 유연하게 만들고 싶다면, 매개 변수를 추가할 수 있습니다. 매개 변수(**인수**)는 함수에 전달되는 추가 정보입니다.
-
-매개 변수는 괄호 안에 나열되며 쉼표로 구분됩니다.
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-`displayGreeting` 함수를 업데이트해서 이름을 받아 출력할 수 있습니다.
-
-```javascript
-function displayGreeting(name) {
-  const message = `Hello, ${name}!`;
-  console.log(message);
-}
-```
-
-함수를 호출하고 매개 변수를 전달하려면, 괄호 안에 지정합니다.
-
-```javascript
-displayGreeting('Christopher');
-// displays "Hello, Christopher!" when run
-```
-
-## 기본 값
-
-더 많은 매개 변수를 추가하여 힘수를 유연하게 만들 수 있습니다. 그러나 모든 값을 지정하지 않으려면 어떻게 해야할까요? 인사 예시를 유지하면서 필요하면 이름을 남길 수 있지만 (인사말하는 사람을 알아야 합니다), 원하는대로 인사를 커스터마이징할 수 있습니다. 누군가 커스터마이징을 원하지 않는 경우에는 대신 기본값을 제공합니다. 매개 변수에 기본값을 제공하기 위해서는 변수에 대한 값을 지정하는 것과 같은 방식으로 설정합니다 - `parameterName = 'defaultValue'`. 전체 예시를 보십시오:
-
-```javascript
-function displayGreeting(name, salutation='Hello') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-함수를 호출할 때, `salutation`에 대한 값을 설정할 것인지 결정할 수 있습니다.
-
-```javascript
-displayGreeting('Christopher');
-// displays "Hello, Christopher"
-
-displayGreeting('Christopher', 'Hi');
-// displays "Hi, Christopher"
-```
-
-## 반환 값
-
-지금까지 만든 함수는 항상 [console](https://developer.mozilla.org/docs/Web/API/console)에 출력됩니다. 특히 다른 서비스를 호출할 함수를 만들 때도 이것이 찾고 있을 수 있습니다. 하지만 계산을 하고 값을 다른 곳에 다시 제공하고자 헬퍼 함수를 만들고 싶으면 어떻게 해야합니까?
-
-**반환 값**을 사용하면 할 수 있습니다. 반환 값은 함수에 의해 반환되며, 문자열이나 숫자와 같은 리터럴 값을 저장할 수 있고 똑같은 변수에 저장할 수 있습니다.
-
-함수가 무언가 반환하면 `return` 키워드가 사용됩니다. `return` 키워드는 다음과 같이 반환되는 항목의 값 또는 참조를 예상합니다:
-
-```javascript
-return myVariable;
-```  
-
-인사 메시지를 만들고 호출하는 곳에 값을 반환해주는 함수를 만들 수 있습니다.
-
-```javascript
-function createGreetingMessage(name) {
-  const message = `Hello, ${name}`;
-  return message;
-}
-```
-
-이 함수를 호출하면 값을 변수에 저장합니다. 변수를 정적 값(`const name = 'Christopher'`)으로 지정하는 것과 거의 동일합니다.
-
-```javascript
-const greetingMessage = createGreetingMessage('Christopher');
-```
-
-## 함수의 파라미터에서 함수
-
-프로그래밍 경력을 쌓으면서, 함수를 매개 변수로 받는 함수를 보게 될 것 입니다. 이 깔끔한 트릭은 일반적으로 어떤 일이 발생되거나 완료되는 때를 알지 못하지만, 이에 반응하여 작업해야 한다는 것을 알고있을 때 사용됩니다.
-
-예시로, 타이머를 시작하고 완료되면 코드를 실행하는 [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)을 고려해보세요. 실행하려는 코드를 먼저 알려줘야 합니다. 함수에 대한 완벽한 직업인 것 같습니다!
-
-아래 코드를 실행하면, 3초 후에 **3 seconds has elapsed**는 메시지가 표시됩니다.
-
-```javascript
-function displayDone() {
-  console.log('3 seconds has elapsed');
-}
-// timer value is in milliseconds
-setTimeout(3000, displayDone);
-```
-
-### 익명 함수
-
-우리가 만든 것을 다시 보겠습니다. 한 번 사용할 이름으로 함수를 만들고 있습니다. 애플리케이션이 점점 복잡해지면서 한 번만 호출되는 함수를 많이 생성하는 것을 볼 수 있습니다. 이상적이지 않습니다. 결과적으로 항상 이름을 제공 할 필요가 없습니다!
-
-함수를 매개 변수로 전달할 때 미리 하나를 생성하지 않고 대신 매개 변수의 일부로 만들 수 있습니다. 동일한 `function` 키워드를 사용하지만 대신 매개 변수로 작성합니다.
-
-익명 함수를 사용하도록 위 코드를 다시 작성해 보겠습니다:
-
-```javascript
-setTimeout(3000, function() {
-  console.log('3 seconds has elapsed');
-});
-```
-
-새 코드를 실행해도 동일한 결과를 얻을 수 있습니다. 함수를 만들었지만, 이름을 지정할 필요가 없어졌습니다!
-
-### 화살표 함수
-
-많은 프로그래밍 언어(JavaScript 등)에서 흔히 볼 수 있는 한 가지 단축키는 **화살표** 또는 **fat 화살표** 함수를 사용하는 능력입니다. 화살표처럼 보이는 `=>`의 특수 인디케이터를 사용합니다. `=>` 를 사용하면, `function` 키워드를 건너 뛸 수 있습니다.
-
-화살표 함수를 사용하기 위해 코드를 다시 작성해봅니다:
-
-```javascript
-setTimeout(3000, () => {
-  console.log('3 seconds has elapsed');
-});
-```
-
-### 각 strategy를 사용하는 경우
-
-이제 매개 변수로 함수에 전달하는 세 가지 방법이 있으며 각자 언제 사용하는 지 궁금할 것입니다. 함수를 두번 이상 사용한다는 것을 알고 있다면 정상적으로 만들게 됩니다. 한 위치에만 사용하는 경우, 일반적으로 익명 함수를 사용하는 것이 가장 좋습니다. 화살표 함수를 사용하거나 더 전통적인 `함수` 구문을 사용하거나 안하거나 대부분의 요즘 개발자들이 `=>`를 선호한다는 것을 알게 될 것입니다.
-
----
-
-## 🚀 도전
-
-함수와 메소드의 차이점을 한 문장으로 표현할 수 있나요? 시도해보세요!
-
-## 강의 후 퀴즈
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-화살표 함수는 코드 베이스에서 점점 많이 사용되고 있으므로, [읽어 볼 가치](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)가 있습니다. 함수 작성을 연습한 다음에 syntax로 다시 작성하십시오.
-
-## 과제
-
-[Fun with Functions](../assignment.md)
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/README.ms.md b/2-js-basics/2-functions-methods/translations/README.ms.md
deleted file mode 100644
index 5258fcbb..00000000
--- a/2-js-basics/2-functions-methods/translations/README.ms.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# Asas JavaScript: Kaedah dan Fungsi
-
-![Asas JavaScript - Fungsi](/sketchnotes/webdev101-js-functions.png)
-> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuiz Pra Kuliah
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
-
-Apabila kita berfikir tentang menulis kod, kita selalu ingin memastikan kod kita dapat dibaca. Walaupun ini terdengar berlawanan dengan intuisi, kod dibaca lebih banyak kali daripada yang ditulis. Satu alat inti dalam kotak alat pemaju untuk memastikan kod yang dapat dikendalikan adalah **fungsi**.
-
-[![Kaedah dan Fungsi](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "Methods and Functions")
-
-> Klik gambar di atas untuk video mengenai kaedah dan fungsi.
-
-## Fungsi
-
-Pada intinya, fungsi adalah sekumpulan kod yang dapat kita laksanakan berdasarkan permintaan. Ini sesuai untuk senario di mana kita perlu melakukan tugas yang sama berkali-kali; daripada menggandakan logik di beberapa lokasi (yang akan menjadikannya sukar untuk dikemas kini apabila tiba masanya), kita dapat memusatkannya di satu lokasi, dan memanggilnya setiap kali kita memerlukan operasi yang dilakukan - anda bahkan dapat memanggil fungsi dari fungsi lain !.
-
-Sama pentingnya ialah kemampuan menamakan fungsi. Walaupun ini kelihatan remeh, namanya memberikan cara cepat untuk mendokumentasikan bahagian kod. Anda boleh menganggap ini sebagai label pada butang. Sekiranya saya mengklik pada butang yang berbunyi "Batalkan pemasa", saya tahu ia akan berhenti menjalankan jam.
-
-## Membuat dan memanggil fungsi
-
-Sintaks untuk fungsi kelihatan seperti berikut:
-
-```javascript
-function nameOfFunction() { // definisi fungsi
- // definisi fungsi dan badannya
-}
-```
-
-Sekiranya saya ingin membuat fungsi untuk memaparkan ucapan, mungkin seperti ini:
-
-```javascript
-function displayGreeting() {
-  console.log('Hello, world!');
-}
-```
-
-Setiap kali kita mahu memanggil (atau memanggil) fungsi kita, kita menggunakan nama fungsi diikuti oleh `()`. Perlu diperhatikan bahawa fungsi kita dapat ditentukan sebelum atau selepas kita memutuskan untuk menyebutnya; penyusun JavaScript akan mencarinya untuk anda.
-
-```javascript
-// memanggil fungsi
-displayGreeting();
-```
-
-> **CATATAN:** Terdapat jenis fungsi khas yang dikenali sebagai
-**kaedah**, yang sudah anda gunakan! Sebenarnya, kami melihat ini dalam demo kami di atas semasa kami menggunakan `console.log`. Apa yang membuat kaedah berbeza dari fungsi adalah metode yang dilampirkan ke objek (`console` dalam contoh kami), sementara fungsi bebas mengambang. Anda akan mendengar banyak pembangun menggunakan istilah ini secara bergantian.
-
-### Amalan terbaik untuk fungsi
-
-Terdapat sebilangan kecil amalan terbaik yang perlu diingat semasa membuat fungsi
-
-- Seperti biasa, gunakan nama deskriptif sehingga anda tahu fungsi apa yang akan dilakukan
-- Gunakan **camelCasing** untuk menggabungkan perkataan
-- Pastikan fungsi anda tertumpu pada tugas tertentu
-
-## Menyampaikan maklumat ke fungsi
-
-Untuk menjadikan fungsi lebih boleh digunakan semula, anda selalunya ingin menyampaikan maklumat ke dalamnya. Sekiranya kita mempertimbangkan contoh `displayGreeting` di atas, ia hanya akan memaparkan **Hello, world!**. Bukan fungsi paling berguna yang dapat dibuat oleh seseorang. Sekiranya kita ingin menjadikannya sedikit lebih fleksibel, seperti membiarkan seseorang menentukan nama orang yang disambut, kita dapat menambahkan **parameter**. Parameter (kadang-kadang disebut **argumen**), adalah maklumat tambahan yang dikirim ke fungsi.
-
-Parameter disenaraikan di bahagian definisi dalam kurungan dan dipisahkan koma seperti:
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-Kami boleh mengemas kini `displayGreeting` kami untuk menerima nama dan memaparkannya.
-
-```javascript
-function displayGreeting(name) {
-  const message = `Hello, ${name}!`;
-  console.log(message);
-}
-```
-
-Apabila kita mahu memanggil fungsi kita dan meneruskan parameter, kita menentukannya dalam kurungan.
-
-```javascript
-displayGreeting('Christopher');
-// memapar "Hello, Christopher!" apabila memproseskannya
-```
-
-## Nilai lalai
-
-Kita dapat menjadikan fungsi kita lebih fleksibel dengan menambahkan lebih banyak parameter. Tetapi bagaimana jika kita tidak mahu setiap nilai ditentukan? Sesuai dengan contoh ucapan kami, kami dapat meninggalkan nama seperti yang diperlukan (kami harus tahu siapa yang kami sapa), tetapi kami ingin membiarkan ucapan itu disesuaikan sesuai keinginan. Sekiranya seseorang tidak mahu menyesuaikannya, kami memberikan nilai lalai. Untuk memberikan nilai lalai ke parameter, kami menetapkannya dengan cara yang sama dengan menetapkan nilai untuk pemboleh ubah - `parameterName = 'defaultValue' `. Untuk melihat contoh penuh:
-
-```javascript
-function displayGreeting(name, salutation='Hello') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-Apabila kita memanggil fungsi tersebut, kita kemudian dapat memutuskan apakah kita ingin menetapkan nilai untuk `salam `.
-
-```javascript
-displayGreeting('Christopher');
-// memapar "Hello, Christopher"
-
-displayGreeting('Christopher', 'Hi');
-// memapar "Hi, Christopher"
-```
-
-## Nilai Pulangan
-
-Sehingga kini fungsi yang kami bina akan selalu dikeluarkan ke [console](https://developer.mozilla.org/docs/Web/API/console). Kadang kala inilah yang sebenarnya kita cari, terutamanya ketika kita membuat fungsi yang akan memanggil perkhidmatan lain. Tetapi bagaimana jika saya ingin membuat fungsi pembantu untuk melakukan pengiraan dan memberikan nilai kembali supaya saya dapat menggunakannya di tempat lain?
-
-Kita boleh melakukan ini dengan menggunakan **nilai kembali**. Nilai kembali akan dikembalikan oleh fungsi, dan dapat disimpan dalam pemboleh ubah sama seperti kita dapat menyimpan nilai literal seperti rentetan atau angka.
-
-Sekiranya fungsi mengembalikan sesuatu maka kata kunci `return` digunakan. Kata kunci `return` menjangkakan nilai atau rujukan tentang apa yang dikembalikan seperti itu:
-
-```javascript
-return myVariable;
-```  
-
-Kami dapat membuat fungsi untuk membuat pesan ucapan dan mengembalikan nilainya kembali ke pemanggil
-
-```javascript
-function createGreetingMessage(name) {
-  const message = `Hello, ${name}`;
-  return message;
-}
-```
-
-Apabila memanggil fungsi ini, kita akan menyimpan nilainya dalam pemboleh ubah. Ini sama dengan cara kita menetapkan pemboleh ubah ke nilai statik (seperti `const name = 'Christopher' `).
-
-```javascript
-const greetingMessage = createGreetingMessage('Christopher');
-```
-
-## Berfungsi sebagai parameter untuk fungsi 
-
-Semasa anda maju dalam kerjaya pengaturcaraan anda, anda akan menemui fungsi yang menerima fungsi sebagai parameter. Trik rapi ini biasanya digunakan ketika kita tidak tahu kapan sesuatu akan terjadi atau selesai, tetapi kita tahu kita perlu melakukan operasi sebagai tindak balas.
-
-Sebagai contoh, pertimbangkan [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), yang memulakan pemasa dan akan melaksanakan kod apabila selesai. Kita perlu memberitahu apa kod yang ingin kita laksanakan. Kedengarannya pekerjaan yang sempurna untuk fungsi!
-
-Sekiranya anda menjalankan kod di bawah ini, setelah 3 saat anda akan melihat mesej **3 saat telah berlalu**.
-
-```javascript
-function displayDone() {
-  console.log('3 seconds has elapsed');
-}
-// timer value is in milliseconds
-setTimeout(displayDone, 3000);
-```
-
-### Fungsi tanpa nama
-
-Mari kita lihat lagi apa yang telah kita bina. Kami membuat fungsi dengan nama yang akan digunakan sekali sahaja. Oleh kerana aplikasi kita semakin rumit, kita dapat melihat diri kita membuat banyak fungsi yang hanya akan dipanggil sekali. Ini tidak sesuai. Ternyata, kita tidak selalu perlu memberikan nama!
-
-Ketika kita meneruskan fungsi sebagai parameter, kita dapat memotong membuatnya terlebih dahulu dan sebaliknya membangunnya sebagai bagian dari parameter. Kami menggunakan kata kunci `function` yang sama, tetapi sebaliknya kami membuatnya sebagai parameter.
-
-Marilah tulis semula kod di atas untuk menggunakan fungsi tanpa nama:
-
-```javascript
-setTimeout(function() {
-  console.log('3 seconds has elapsed');
-}, 3000);
-```
-
-Sekiranya anda menjalankan kod baru kami, anda akan melihat bahawa kami mendapat hasil yang sama. Kami telah membuat fungsi, tetapi tidak perlu memberikan nama!
-
-### Fungsi panah gemuk
-
-Salah satu jalan pintas yang biasa digunakan dalam banyak bahasa pengaturcaraan (termasuk JavaScript) adalah kemampuan untuk menggunakan apa yang disebut fungsi **panah** atau **panah lemak**. Ia menggunakan penunjuk khas `=>`, yang kelihatan seperti anak panah - dengan demikian namanya! Dengan menggunakan `=>`, kita dapat melangkau kata kunci `function`.
-
-Mari tulis semula kod kami sekali lagi untuk menggunakan fungsi anak panah lemak:
-
-```javascript
-setTimeout(() => {
-  console.log('3 saat telah berlalu');
-}, 3000);
-```
-
-### Bila menggunakan strategi masing-masing
-
-Anda sekarang telah melihat kita mempunyai tiga cara untuk meneruskan fungsi sebagai parameter dan mungkin tertanya-tanya kapan menggunakannya. Sekiranya anda tahu anda akan menggunakan fungsi lebih dari sekali, buat seperti biasa. Sekiranya anda menggunakannya hanya untuk satu lokasi, biasanya lebih baik menggunakan fungsi tanpa nama. Sama ada anda menggunakan fungsi anak panah lemak atau sintaks `function` yang lebih tradisional bergantung kepada anda, tetapi anda akan perhatikan bahawa kebanyakan pembangun moden lebih suka `=>`.
-
---- 
-
-## 🚀 Cabaran
-
-Bolehkah anda menyatakan dalam satu ayat perbezaan antara fungsi dan kaedah? Mencubanya!
-
-## Kuiz Pasca Kuliah
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
-
-## Mengkaji & Belajar Sendiri 
-
-Perlu [membaca sedikit lebih banyak mengenai fungsi anak panah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), kerana ia semakin banyak digunakan dalam pangkalan kod. Berlatih menulis fungsi, dan kemudian menulis semula dengan sintaks ini.
-
-## Tugasan
-
-[Seronok dengan Fungsi](assignment.ms.md)
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/README.pt.md b/2-js-basics/2-functions-methods/translations/README.pt.md
deleted file mode 100644
index ee9602fa..00000000
--- a/2-js-basics/2-functions-methods/translations/README.pt.md
+++ /dev/null
@@ -1,194 +0,0 @@
-# Noções básicas de JavaScript: métodos e funções
-
-![Noções básicas de JavaScript - Funções](/sketchnotes/webdev101-js-functions.png)
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pré-Aula
-[Quiz Pré-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9)
-
-Quando pensamos em escrever código, sempre queremos garantir que nosso código seja legível. Embora isso pareça contra-intuitivo, o código é lido muito mais vezes do que escrito. Uma ferramenta central na caixa de ferramentas de uma pessoa desenvolvedora para garantir código sustentável é a **função**.
-
-[![Métodos e Funções](https://img.youtube.com/vi/aAfSVldL6Vk/0.jpg)](https://youtube.com/watch?v=aAfSVldL6Vk "Métodos e Funções")
-
-> Clique na imagem acima para ver um vídeo sobre métodos e funções.
-
-
-## Funções
-
-Em sua essência, uma função é um bloco de código que podemos executar sob demanda. Isso é perfeito para cenários em que precisamos realizar a mesma tarefa várias vezes; em vez de duplicar a lógica em vários locais (o que tornaria difícil atualizá-la quando chegar a hora), podemos centralizá-la em um local e chamá-la sempre que precisarmos que a operação seja realizada - você pode até chamar funções de outras funções !.
-
-Também importante é a capacidade de nomear uma função. Embora isso possa parecer trivial, o nome fornece uma maneira rápida de documentar uma seção de código. Você pode pensar nisso como um rótulo em um botão. Se eu clicar em um botão que diz "Cancelar cronômetro", sei que o relógio vai parar de funcionar.
-
-## Criar e chamar uma Função
-
-A sintaxe de uma função é semelhante a esta:
-
-```javascript
-function nameOfFunction() { // definição de função
- // definição de função/corpo
-}
-```
-
-Se eu quisesse criar uma função para exibir uma saudação, poderia ser assim:
-
-```javascript
-function displayGreeting() {
-  console.log('Olá, mundo!');
-}
-```
-
-Sempre que quisermos chamar (ou invocar) nossa função, usamos o nome da função seguido por `()`. É importante notar o fato de que nossa função pode ser definida antes ou depois de decidirmos chamá-la; o compilador JavaScript encontrará ela para você.
-
-```javascript
-// calling our function
-displayGreeting();
-```
-
-> **NOTA:** Existe um tipo especial de função conhecido como **método**, que você já está usando! Na verdade, vimos isso em nossa demonstração acima, quando usamos `console.log`. O que torna um método diferente de uma função é que um método é anexado a um objeto (`console` em nosso exemplo), enquanto uma função está flutuando livremente. Você ouvirá muitas pessoas desenvolvedoras usarem esses termos alternadamente.
-
-### Práticas recomendadas de função
-
-Existem várias práticas recomendadas para se ter em mente ao criar funções
-
-- Como sempre, use nomes descritivos para sabermos o que a função fará
-- Use **camelCasing** para combinar palavras
-- Mantenha suas funções focadas em uma tarefa específica
-
-## Passando informações para uma função
-
-Para tornar uma função mais reutilizável, você frequentemente desejará passar informações para ela. Se considerarmos nosso exemplo `displayGreeting` acima, ele exibirá apenas **Olá, mundo!**. Não é a função mais útil que se poderia criar. Se quisermos torná-lo um pouco mais flexível, como permitir que alguém especifique o nome da pessoa a ser cumprimentada, podemos adicionar um **parâmetro**. Um parâmetro (às vezes também chamado de **argumento**), é uma informação adicional enviada para uma função.
-
-Os parâmetros são listados na parte de definição entre parênteses e são separados por vírgulas, assim:
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-Podemos atualizar nosso `displayGreeting` para aceitar um nome e exibi-lo.
-
-```javascript
-function displayGreeting(name) {
-  const message = `Hello, ${name}!`;
-  console.log(message);
-}
-```
-
-Quando queremos chamar nossa função e passar o parâmetro, especificamos entre parênteses.
-
-```javascript
-displayGreeting('Christopher');
-// displays "Hello, Christopher!" when run
-```
-
-## Valores padrão
-
-Podemos tornar nossa função ainda mais flexível adicionando mais parâmetros. Mas e se não quisermos que todos os valores sejam especificados? Seguindo nosso exemplo de saudação, poderíamos deixar o nome conforme necessário (precisamos saber quem estamos saudando), mas queremos permitir que a própria saudação seja personalizada conforme desejado. Se alguém não quiser personalizá-lo, fornecemos um valor padrão. Para fornecer um valor padrão a um parâmetro, nós o definimos da mesma forma que definimos um valor para uma variável - `parameterName = 'defaultValue'`. Para ver um exemplo completo:
-
-```javascript
-function displayGreeting(name, salutation='Hello') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-Quando chamamos a função, podemos decidir se queremos definir um valor para `salutation`.
-
-```javascript
-displayGreeting('Christopher');
-// displays "Hello, Christopher"
-
-displayGreeting('Christopher', 'Hi');
-// displays "Hi, Christopher"
-```
-
-## Valores de retorno
-
-Até agora, a função que construímos sempre será enviada para o [console](https://developer.mozilla.org/docs/Web/API/console). Às vezes, isso pode ser exatamente o que estamos procurando, especialmente quando criamos funções que chamarão outros serviços. Mas e se eu quiser criar uma função auxiliar para realizar um cálculo e fornecer o valor de volta para que eu possa usá-lo em outro lugar?
-
-Podemos fazer isso usando um **valor de retorno**. Um valor de retorno é retornado pela função e pode ser armazenado em uma variável da mesma forma que podemos armazenar um valor literal, como uma string ou número.
-
-Se uma função retornar algo, então a palavra-chave `return` é usada. A palavra-chave `return` espera um valor ou referência do que está sendo retornado assim:
-
-```javascript
-return myVariable;
-```  
-
-Poderíamos criar uma função para criar uma mensagem de saudação e retornar o mensagem para a pessoa usuária.
-
-```javascript
-function createGreetingMessage(name) {
-  const message = `Hello, ${name}`;
-  return message;
-}
-```
-
-Ao chamar esta função, armazenaremos o valor em uma variável. É quase da mesma forma que definiríamos uma variável com um valor estático (como `const name = 'Christopher'`).
-
-```javascript
-const greetingMessage = createGreetingMessage('Christopher');
-```
-
-##  Funções como parâmetros para funções
-
-Conforme você progride em sua carreira de programação, encontrará funções que aceitam funções como parâmetros. Esse truque interessante é normalmente usado quando não sabemos quando algo vai ocorrer ou se completar, mas sabemos que precisamos realizar uma operação em resposta.
-
-Como exemplo, considere [setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout), que inicia um cronômetro e executará o código quando ele for concluído. Precisamos dizer a ele qual código queremos executar. Parece um trabalho perfeito para uma função!
-
-Se você executar o código abaixo, após 3 segundos verá a mensagem **3 segundos decorreram**.
-
-```javascript
-function displayDone() {
-  console.log('3 seconds has elapsed');
-}
-// timer value is in milliseconds
-setTimeout(displayDone, 3000);
-```
-
-### Funções Anônimas
-
-Vamos dar outra olhada no que construímos. Estamos criando uma função com um nome que será usado uma vez. Conforme nossa aplicação fica mais complexa, podemos nos ver criando uma série de funções que serão chamadas apenas uma vez. Isso não é o ideal. Acontece que nem sempre precisamos fornecer um nome!
-
-Quando passamos uma função como parâmetro, podemos pular a criação de uma com antecedência e, em vez disso, construir uma como parte do parâmetro. Usamos a mesma palavra-chave `function`, mas em vez disso, a construímos como um parâmetro.
-
-Vamos reescrever o código acima para usar uma função anônima:
-
-```javascript
-setTimeout(function() {
-  console.log('3 seconds has elapsed');
-}, 3000);
-```
-
-Se você executar nosso novo código, notará que obtemos os mesmos resultados. Criamos uma função, mas não precisamos dar um nome a ela!
-
-### Arrow Functions
-
-Um atalho comum em muitas linguagens de programação (incluindo JavaScript) é a capacidade de usar o que é chamado de função **arrow** ou **arrow function**. Ela usa um indicador especial de `=>`, que se parece com uma flecha (arrow, em inglês) - daí o nome! Usando `=>`, podemos pular a palavra-chave `function`.
-
-Vamos reescrever nosso código mais uma vez para usar arrow function:
-
-```javascript
-setTimeout(() => {
-  console.log('3 seconds has elapsed');
-}, 3000);
-```
-
-### Quando usar cada estratégia
-
-Agora você viu que temos três maneiras de passar uma função como parâmetro e você pode estar se perguntando quando usar cada uma delas. Se você sabe que usará a função mais de uma vez, crie-a normalmente. Se você for usá-lo apenas para um local, geralmente é melhor usar uma função anônima. Sobre usar Arrow Functions ou a sintaxe mais tradicional de `function` é com você, mas você notará que a maioria das pessoas desenvolvedoras modernas prefere` => `.
-
----
-
-## 🚀 Desafio
-
-Você pode articular em uma frase a diferença entre funções e métodos? Tente!
-
-## Quiz Pós-Aula
-[Quiz Pós-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10)
-
-## Revisão e autoestudo
-
-Vale a pena [ler um pouco mais sobre arrow functions](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions), como elas são cada vez mais usados em bases de código. Pratique escrever uma função e, em seguida, reescrevê-la com esta sintaxe.
-##  Tarefa
-
-[Diversão com funções](assignment.pt.md)
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/README.zh-cn.md b/2-js-basics/2-functions-methods/translations/README.zh-cn.md
deleted file mode 100644
index 1e94b2cb..00000000
--- a/2-js-basics/2-functions-methods/translations/README.zh-cn.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# JavaScript 基础：方法和函数
-
-![JavaScript Basics - Functions](/sketchnotes/webdev101-js-functions.png)
-> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 课前小测
-[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=zh_cn)
-
-当我们思考如何去写代码的时候，我们总是希望确保自己的代码是可读的。尽管听起来有些违反直觉，代码被阅读的次数会远多于它被写下的次数。**函数（function）** 正是开发者的工具箱里用于确保代码可维护的一件利器。
-
-[![Methods and Functions](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "方法和函数")
-
-> 点击上方图片来观看一个有方法和函数的视频。
-
-
-## 函数（Functions）
-
-本质上，函数就是一块我们可以按需执行的代码。这在我们需要多次执行同一个任务的场景下很有用，比起将逻辑复制到很多个位置（这会导致在以后很难去同时更新所有位置），我们可以将其集中在同一个位置，在需要这套逻辑被执行的任何时候都可以来调用它 —— 你甚至可以在其他的函数中调用函数！
-
-合理命名一个函数同样是很重要的能力。尽管听起来微不足道，但函数命名相当于是一种给一部分代码写简易文档的快捷做法。可以用网页上按钮的标签来类比这件事，如果我点击了一个叫做“停止计时”的按钮，我能够很轻易地知道它可以用来停止一个时钟的运行。
-
-## 创建和调用函数
-
-函数的语法一般长这样：
-
-```javascript
-function nameOfFunction() { // 函数定义
- // 函数定义 / 函数体
-}
-```
-
-如果你想创建一个用来打招呼的函数，它可以是这样：
-
-```javascript
-function displayGreeting() {
-  console.log('Hello, world!');
-}
-```
-
-如果想要调用（call / invoke）一个函数，用函数的名称跟上 `()` 即可。值得注意的是，函数定义在其调用位置之前或之后都是可以的，JavaScript 编译器会替你找到函数定义的位置。
-
-```javascript
-// 调用我们的函数
-displayGreeting();
-```
-
-> **注意：**有一类特殊的函数被称作**方法（method）**，你其实已经使用过它了！上面的示例中的 `console.log` 就是一个例子。方法和函数的区别在于，方法依附于一个对象上（比如例子中的 `console`），而函数是自由自在的。但你以后会看到很多开发者有时也会将这两个术语混用。
-
-### 函数的最佳实践
-
-这里有一些在你创建函数时可以牢记在心的最佳实践：
-
-- 坚持使用描述性的命名，这样可以更容易知道这个函数是做什么的
-- 使用**小驼峰命名法（camelCasing）**来组合单词（译注：小驼峰，即除了第一个单词首位小写外，其它单词都首位大写）
-- 让你的函数专注于一件特定的任务
-
-## 向函数传递信息
-
-为了使函数可以更便于重复利用，你常会希望传递一些信息给它。考虑上面 `displayGreeting` 这个例子，它只会显示 **Hello, world!**，但它其实可以被创造得更加有用一些。如果我们想让它更加灵活一些，比如允许指定想要打招呼的人的名字，我们可以为函数添加一个**参数（parameter / argument）**。参数，就是传给函数的额外信息。
-
-参数会列在函数定义这一部分，用括号括起来并且用逗号分隔，比如：
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-我们可以更新以下我们的 `displayGreeting` 来接收一个名字并将其显示出来。
-
-```javascript
-function displayGreeting(name) {
-  const message = `Hello, ${name}!`;
-  console.log(message);
-}
-```
-
-当我们想要在调用函数时指定参数，将其放在括号中即可。
-
-```javascript
-displayGreeting('Christopher');
-// 在运行时会显示 “Hello, Christopher!”
-```
-
-## 默认值（Default values）
-
-我们可以通过为函数添加更多参数来使它更加灵活，但是如果我们并不希望每次调用都需要指定所有参数该怎么办？继续用我们的打招呼示例，我们可以让名字是必选的（我们需要知道该向谁打招呼），但打招呼的语句本身可以随意定制。如果有人不想自定义打招呼的语句，我们就会提供一个默认值（又称缺省值）。为了给参数提供一个默认值，写法和给变量赋值很像 —— `parameterName = 'defaultValue'`。完整例子如下：
-
-```javascript
-function displayGreeting(name, salutation='Hello') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-当我们调用函数时，可以自由决定是否要指定 `salutation` 的值。
-
-```javascript
-displayGreeting('Christopher');
-// 显示 “Hello, Christopher”
-
-displayGreeting('Christopher', 'Hi');
-// 显示 “Hi, Christopher”
-```
-
-## 返回值（Return values）
-
-目前为止我们创建的函数都只会输出到[控制台（console）](https://developer.mozilla.org/zh-CN/docs/Web/API/console)。有时这就是我们想要的效果，特别是当我们创建调用其他服务的函数时。但如果我想要创建一个辅助函数来计算一个值并且返回出去用在别处该怎么办？
-
-我们可以用**返回值**来做到这件事。返回值由函数返回，并且可以像字面量（如字符串或数值）一样存储在一个变量中。
-
-如果一个函数有返回值，就会在函数体中用到 `return` 关键字。`return` 关键字可以指定期望被返回的值或引用，就像下面这样：
-
-```javascript
-return myVariable;
-```  
-
-我们可以创建一个函数来构造一个打招呼的消息，然后将这个消息的值返回给调用者
-
-```javascript
-function createGreetingMessage(name) {
-  const message = `Hello, ${name}`;
-  return message;
-}
-```
-
-调用函数时可以将返回值存在变量里，和将一个静态值存入变量的办法一样（如 `const name = 'Christopher'`）。
-
-```javascript
-const greetingMessage = createGreetingMessage('Christopher');
-```
-
-## 将函数作为函数参数
-
-在你的编程生涯中，你会遇到一些可以接受函数作为参数的函数。这个优雅的小技巧会经常被用到，比如我们不知道一些事会在什么时候发生或完成，但我们知道在那个时候需要执行一个操作作为响应的情况。
-
-举个例子，对于 [setTimeout](https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)，其会开启一个计时器，在倒计时结束时执行代码。我们需要告诉它我们希望它执行什么代码。这听起来正是函数该做到的事！
-
-如果你执行下方的代码，三秒后你就可以看到 **3 秒过去了** 这条消息。
-
-```javascript
-function displayDone() {
-  console.log('3 秒过去了');
-}
-// 计时器的时间单位是毫秒
-setTimeout(displayDone, 3000);
-```
-
-### 匿名函数（Anonymous functions）
-
-再回过头看看我们创建的函数，我们创建了一个名字只被使用了一次的函数。当我们的应用程序变得愈发复杂，我们会发现我们创建了大量只被调用了一次的函数。这样实在不太好，其实我们并不总是需要为函数提供一个名字！
-
-当我们将一个函数作为参数传入时，我们可以绕过提前创建它的步骤，直接在参数的部分来创建它。我们还是使用相同的 `function` 关键字，只不过是将其作为一个参数来创建。
-
-让我们将上面的代码用匿名函数重写一次：
-
-```javascript
-setTimeout(function() {
-  console.log('3 秒过去了');
-}, 3000);
-```
-
-运行我们的新代码，你会注意到结果和之前完全一样。我们成功创建了一个函数，而不必给它命名！
-
-### 箭头函数（Fat arrow functions）
-
-在很多编程语言（包括 JavaScript）中都有一种称为**箭头**（arrow / fat arrow）函数的快捷写法。它会用到一个特殊的 `=>` 标志，看起来就像一个箭头 —— 它的名字就是这么来的！使用 `=>`，我们就可以跳过 `function` 关键字。
-
-让我们用箭头函数再一次重写上面的代码：
-
-```javascript
-setTimeout(() => {
-  console.log('3 秒过去了');
-}, 3000);
-```
-
-### 何时使用上述每种策略
-
-你现在已经见到了三种将函数作为参数传给另一个函数的写法，可能很好奇该在什么时候选用哪一种。如果你知道你会多次用到这个函数，就照常创建它。如果你只会在一处用到它，一般最好使用匿名函数。使用箭头函数还是传统的 `function` 语法取决于你自己，但你会注意到多数现代开发者更喜欢用 `=>`。
-
----
-
-## 🚀 挑战
-
-你能用一句话清楚说明函数和方法的区别吗？试一试！
-
-## 课后小测
-[课后小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=zh_cn)
-
-## 复习 & 自学
-
-箭头函数在代码库中正在被越来越多地使用，[多了解一下箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions)会非常有好处。试着写一个函数，然后用箭头函数语法重写它。
-
-## 作业
-
-[试玩函数](assignment.zh-cn.md)
diff --git a/2-js-basics/2-functions-methods/translations/README.zh-tw.md b/2-js-basics/2-functions-methods/translations/README.zh-tw.md
deleted file mode 100644
index 2100a9e9..00000000
--- a/2-js-basics/2-functions-methods/translations/README.zh-tw.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# JavaScript 入門 - 函式與方法
-
-![JavaScript 入門 - 函式](/sketchnotes/webdev101-js-functions.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
-
-## 課前測驗
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/9?loc=zh_tw)
-
-撰寫程式碼時，我們必須確保程式碼的閱讀性。聽來不太直覺，理解程式碼的時間遠比撰寫時間來的久。裡面最需要被管理的程式項目就是**函式**。
-
-[![函式與方法](https://img.youtube.com/vi/XgKsD6Zwvlc/0.jpg)](https://youtube.com/watch?v=XgKsD6Zwvlc "函式與方法")
-
-> 點擊上方圖片觀看關於函式的影片。
-
-
-## 函式 (Function)
-
-函式是程式碼區塊，會在程式執行時被呼叫運行。有些時候我們需要重複性的執行同一項作業，比起複製整個邏輯到其他區塊，函式是較完美的處理方式。不只方便維護，也可以在任何地方、任何時間被其他函式呼叫執行。
-
-另一項重點是函式的名稱，聽來不太重要，但它能直接地解釋程式碼的內容。你可以想像它是按鈕上的文字，若按鈕上寫著「停止計時」，你會預期按壓按鈕後會終止計時器的運作。
-
-## 建立並呼叫函式
-
-函式的語法格式如下：
-
-```javascript
-function nameOfFunction() { // 函式的定義
- // 函式的說明與內容
-}
-```
-
-如果你想建立一個打招呼的函式，它可能會以下列的格式呈現：
-
-```javascript
-function displayGreeting() {
-  console.log('Hello, world!');
-}
-```
-
-如果你想呼叫這個函式，我們使用函式的名稱加上 `()`。我們不需要考慮函式是在被呼叫地方的前面或後面才被定義出來，JavaScript 的編譯器會幫你尋找它的定義為置。
-
-```javascript
-// 呼叫函式
-displayGreeting();
-```
-
-> **注意** 另一個你正使用的函式類型稱做 **方法(method)**。事實上，我們能在執行 `console.log` 的 demo 時能找到它。它與函式的差異在於它需要接續在物件後面，在這個例子中就是 `console`，而函式並沒有強制要求的。你會發現許多開發者在兩者之間做切換。
-
-### 函式的重點觀念
-
-在建立函式時，你需要注意一些重點：
-
-- 我們反覆提到的，函式的名字要能了解函式的主要功能。
-- 使用**駝峰式大小寫(camelCasing)**來連接單字。
-- 單一函式只專一在單一功能。
-
-## 向含式傳遞資料
-
-為了讓函式能被重複利用，你會需要餵給函式不同的資料。以上述 `displayGreeting` 的例子中，它只能輸出文字 **Hello, world!**。這並不是個實用的函式。要增加函式的彈性，例如打招呼的對象，我們可以增加新的**參數(parameter/argument)**。它提供額外的資料給函式使用。
-
-參數會寫在定義函式的地方，以括號與逗號標記與分隔：
-
-```javascript
-function name(param, param2, param3) {
-
-}
-```
-
-現在我們更新函式 `displayGreeting`，讓它支援打招呼的對象：
-
-```javascript
-function displayGreeting(name) {
-  const message = `Hello, ${name}!`;
-  console.log(message);
-}
-```
-
-當我們要呼叫函式時，輸入需要的參數在括號中：
-
-```javascript
-displayGreeting('Christopher');
-// 呼叫完，印出字串 "Hello, Christopher!" 
-```
-
-## 預設值(Default values)
-
-我們利用參數增加了函式的彈性。但如果我們不想每次都要指定參數給函式使用呢? 繼續之前的例子，保留對象的名稱外，我們增加招呼語的種類。我們可以定義招呼語的預設值，若使用者沒有指定哪一種招呼語時，就使用預設值。它的方法就與賦予變數數值一樣 ── `parameterName = 'defaultValue'`。例如：
-
-```javascript
-function displayGreeting(name, salutation='Hello') {
-  console.log(`${salutation}, ${name}`);
-}
-```
-
-當我們呼叫函式時，我們可以選擇是否要指定招呼語到 `salutation` 中。
-
-```javascript
-displayGreeting('Christopher');
-// 輸出字串 "Hello, Christopher"
-
-displayGreeting('Christopher', 'Hi');
-// 輸出字串 "Hi, Christopher"
-```
-
-## 回傳值(Return values)
-
-目前為止，我們的函式只能輸出字串到[console](https://developer.mozilla.org/docs/Web/API/console)上。這或許是我們希望的結果，尤其是需要呼叫其他服務的時候。萬一今天我想建立一個額外的函式負責做資料處理與運算呢?
-
-此時，我們可以利用**回傳值**。回傳值由函式輸出，就像變數一樣儲存像是字串或是數字的結果。
-
-如果函式有定義回傳值，那就需要使用關鍵字 `return` 。關鍵字 `return` 需要附帶回傳的數值或是參考物件在後方，如：
-
-```javascript
-return myVariable;
-```  
-
-我們建立一個函式專門建立招呼訊息並回傳給呼叫者：
-
-```javascript
-function createGreetingMessage(name) {
-  const message = `Hello, ${name}`;
-  return message;
-}
-```
-
-當函式被呼叫時，變數會儲存函式回傳的數值。這就像我們給變數定值一樣： `const name = 'Christopher'`。
-
-```javascript
-const greetingMessage = createGreetingMessage('Christopher');
-```
-
-## 將函式作為函式參數使用
-
-在你的程式旅程中，你會見到有函式將其他函式當作參數使用。這個俐落的手法常被用在一種情況：我們不知道 A 事件什麼時候發生與完成，但我們要在 A 事件後執行 B 事件。
-
-舉例來說，考慮函式[setTimeout](https://developer.mozilla.org/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)，它會啟動計時機制，並在倒數完後執行下一個程式。我們需要告訴函式哪一個函式要在時間到後執行，一個完美的例子！
-
-執行下方的程式，三秒鐘之後你會看到訊息**已經過三秒鐘**。
-
-```javascript
-function displayDone() {
-  console.log('已經過三秒鐘');
-}
-// 計時單位為毫秒。
-setTimeout(displayDone, 3000);
-```
-
-### 不記名函式(Anonymous functions)
-
-回顧我們所建的函式，這些函式都只被執行了一次。當程式越來越複雜，我們可能建了許多的函式，但他們可能都只被呼叫了一次。這並不是理想的方式，那不如，不要給它函式名稱！
-
-我們可以傳遞函式作為參數使用，也可以直接在參數裡建立新的函式。同樣使用關鍵字 `function`，但我們寫在參數欄當中。
-
-試著以不記名函式的方式改寫程式碼：
-
-```javascript
-setTimeout(function() {
-  console.log('3 seconds has elapsed');
-}, 3000);
-```
-
-執行上述程式後可以得到相同的結果。我們建立了一個函式，一個沒有名字的函式！
-
-### 箭頭函式(Fat arrow functions)
-
-許多程式語言，包含 JavaScript，都有一個常見的快捷語法稱作**箭頭(arrow/fat arrow)**函式。 它使用 `=>` 表示法，就像是箭頭一樣，如同它的名稱！使用 `=>` 可以省略關鍵字 `function`。
-
-再一次改寫程式碼，這次我們使用箭頭函式：
-
-```javascript
-setTimeout(() => {
-  console.log('3 seconds has elapsed');
-}, 3000);
-```
-
-### 使用不同策略的時機
-
-現在你已經學會了三種將函式作為參數的方法了。你可能會好奇使用它們的時機點為何。如果你知道你會重複使用一個函式，請使用正常的方法；如果你知道函式只用在特定的函式內一次，這就是用無記名函式的時機；箭頭函式與傳統 `function` 語法則是取決與你自己，但多數的開發者比較偏好使用 `=>`。
-
----
-
-## 🚀 挑戰
-
-你能用一句話清楚地說明這些函式與方法的差別嗎? 試試看吧！
-
-## 課後測驗
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/10?loc=zh_tw)
-
-## 複習與自學
-
-這很值得去閱讀[關於箭頭函式的資料](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，它們越來越常被用在程式碼上。試著寫個函式，再改寫成箭頭語法。
-
-## 作業
-
-[把玩函式](assignment.zh-tw.md)
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/assignment.az.md b/2-js-basics/2-functions-methods/translations/assignment.az.md
deleted file mode 100644
index 239d7683..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.az.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Funksiyalarla Əylən
-
-## Təlimatlar
-
-Fərqli funksiyalar yaradın, həm nəyisə qaytaran funksiyalar, həm də heç nə qaytarmayan funksiyalar.
-
-Defolt dəyərləri olan parametrlər və parametrlərin qarışığı olan bir funksiya yarada bildiyinizə baxın.
-
-## Rubrika
-
-| Meyarlar | Nümunəvi | Müvafiq | Təkmilləşdirmə Ehtiyacı var |
-| -------- | ------------------------------------------------- ----------------------------------- | ------------------------------------------------- -------------- | ----------------- |
-| | Həll müxtəlif parametrlərə malik iki və ya daha çox yaxşı işləyən funksiya ilə təklif olunur | İşçi həll bir funksiya və bir neçə parametr ilə təklif olunur | Həlldə səhvlər var |
diff --git a/2-js-basics/2-functions-methods/translations/assignment.de.md b/2-js-basics/2-functions-methods/translations/assignment.de.md
deleted file mode 100644
index 71f5ee61..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.de.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Spaß mit Funktionen
-
-## Anleitung
-
-Erstellen Sie verschiedene Funktionen, sowohl Funktionen, die etwas zurückgeben, als auch Funktionen, die nichts zurückgeben.
-
-Überprüfen Sie, ob Sie eine Funktion erstellen können, die eine Mischung aus Parametern und Parametern mit Standardwerten enthält.
-
-## Rubrik
-
-| Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf |
-| -------- | -------------------------------------------------- ------------------------------------ | -------------------------------------------------- -------------- | ----------------- |
-| | Die Lösung wird mit zwei oder mehr leistungsfähigen Funktionen mit verschiedenen Parametern angeboten Arbeitslösung wird mit einer Funktion und wenigen Parametern angeboten Lösung hat Fehler |
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/assignment.es.md b/2-js-basics/2-functions-methods/translations/assignment.es.md
deleted file mode 100644
index 9a30c22e..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.es.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Diversión con funciones
-
-## Instrucciones
-
-Cree diferentes funciones, tanto funciones que devuelvan algo como funciones que no devuelvan nada.
-
-Vea si puede crear una función que tenga una combinación de parámetros y parámetros con valores predeterminados.
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | ------------------------------------ | -------------- | ----------------- |
-| | La solución se ofrece con dos o más funciones de buen rendimiento con diversos parámetros | La solución de trabajo se ofrece con una función y pocos parámetros | La solución tiene errores |
diff --git a/2-js-basics/2-functions-methods/translations/assignment.fr.md b/2-js-basics/2-functions-methods/translations/assignment.fr.md
deleted file mode 100644
index 6fbd7f00..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.fr.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Du fun avec les fonctions
-
-## Instructions
-
-Créez différentes fonctions, à la fois des fonctions qui renvoient quelque chose et des fonctions qui ne renvoient rien.
-
-Voyez si vous pouvez créer une fonction qui a un mélange de paramètres et de paramètres avec des valeurs par défaut.
-
-## Rubrique
-
-| Critères | Exemplaire | Adéquat | Besoin d'amélioration |
-| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
-| | La solution est proposée avec deux ou plusieurs fonctions performantes avec divers paramètres | La solution de travail est offerte avec une fonction et peu de paramètres | La solution a des bugs |
diff --git a/2-js-basics/2-functions-methods/translations/assignment.hi.md b/2-js-basics/2-functions-methods/translations/assignment.hi.md
deleted file mode 100644
index d7f77d61..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.hi.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# कार्य के साथ मज़ा
-
-## अनुदेश
-
-अलग-अलग फ़ंक्शंस बनाएं, दोनों फ़ंक्शंस जो कुछ लौटाते हैं और फ़ंक्शंस जो कुछ भी वापस नहीं करते हैं।
-
-देखें कि क्या आप एक फ़ंक्शन बना सकते हैं जिसमें डिफ़ॉल्ट मानों के साथ मापदंडों और मापदंडों का मिश्रण है.
-
-## सरनामा
-
-| मानदंड | उदाहरणात्मक                                                                                         | पर्याप्त                                                           | सुधार की जरूरत      |
-| ------ | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------- |
-|        | समाधान को विभिन्न मापदंडों के साथ दो या अधिक अच्छी तरह से निष्पादित कार्यों के साथ पेश किया जाता है | कार्य समाधान को एक फ़ंक्शन और कुछ मापदंडों के साथ पेश किया जाता है | समाधान में बग्स हैं |
diff --git a/2-js-basics/2-functions-methods/translations/assignment.id.md b/2-js-basics/2-functions-methods/translations/assignment.id.md
deleted file mode 100644
index 4ed72824..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.id.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Bersenang-senang dengan Fungsi
-
-## Instruksi
-
-Buat fungsi yang berbeda, baik fungsi yang mengembalikan sesuatu maupun fungsi yang tidak mengembalikan apa pun.
-
-Lihat apakah Anda dapat membuat fungsi yang memiliki campuran parameter dan parameter dengan nilai default.
-
-## Rubrik
-
-| Kriteria | Contoh                                                                                            | Memenuhi Syarat                                                   | Perlu Perbaikan     |
-|----------|---------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|---------------------|
-|          | Solusi ditawarkan dengan dua atau lebih fungsi yang berkinerja baik dengan parameter yang beragam | Solusi kerja ditawarkan dengan satu fungsi dan beberapa parameter | Solusi memiliki bug |
diff --git a/2-js-basics/2-functions-methods/translations/assignment.it.md b/2-js-basics/2-functions-methods/translations/assignment.it.md
deleted file mode 100644
index 251dc10d..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.it.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Divertimento con le funzioni
-
-## Istruzioni
-
-Creare diverse funzioni, sia funzioni che restituiscono qualcosa che funzioni che non restituiscono nulla.
-
-Provare a creare una funzione che abbia un mix di parametri e parametri con valori predefiniti.
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
-|          | La soluzione è offerta con due o più funzioni con buone prestazioni con diversi parametri | La soluzione funzionante è offerta con una funzione e pochi parametri | La soluzione ha bug |
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/assignment.ja.md b/2-js-basics/2-functions-methods/translations/assignment.ja.md
deleted file mode 100644
index 0c865e4c..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.ja.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 関数で楽しむ
-
-## 説明書
-
-何かを返す関数と何も返さない関数の両方の異なる関数を作成します。
-
-デフォルト値を持つパラメータとパラメータが混在した関数を作成できるかどうかを見てみましょう。
-
-## ルーブリック
-
-| 基準 | 模範的な例                                                                              | 適切な                                                         | 改善が必要 |
-| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
-|          | ソリューションは、多様なパラメータを持つ2つ以上の関数で提供されます。 | ワーキングソリューションは、1つの関数と少数のパラメータで提供されます。 | ソリューションにはバグがあります。 |
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/assignment.ko.md b/2-js-basics/2-functions-methods/translations/assignment.ko.md
deleted file mode 100644
index 8bdc391f..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.ko.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 함수와 놀기
-
-## 설명
-
-무언가를 반환하는 함수와 아무것도 반환하지 않는 또 다른 함수를 만들어봅니다.
-
-기본값이 없는 매개 변수와 있는 매개 변수를 잘 혼합해 함수를 만들 수 있는지를 확인합니다.
-
-## 평가 기준
-
-기준 | <br>모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 다양한 매개 변수를 가진 두개 이상의 잘 동작하는 함수를 포함한 답안 | 소수의 매개변수를 가진 한개의 함수를 포함한 답안 | 버그가 있는 답안
diff --git a/2-js-basics/2-functions-methods/translations/assignment.ms.md b/2-js-basics/2-functions-methods/translations/assignment.ms.md
deleted file mode 100644
index e8529f9c..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.ms.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Seronok dengan Fungsi
-
-## Arahan
-
-Buat fungsi yang berbeza, kedua fungsi yang mengembalikan sesuatu dan fungsi yang tidak mengembalikan apa-apa.
-
-Lihat apakah anda dapat membuat fungsi yang memiliki gabungan parameter dan parameter dengan nilai lalai.
-
-## Rubrik
-
-| Kriteria | Contoh                                                                             | Mencukupi                                                         | Usaha Lagi |
-| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
-|          | Penyelesaian ditawarkan dengan dua atau lebih fungsi yang berfungsi dengan baik dengan pelbagai parameter | Penyelesaian kerja ditawarkan dengan satu fungsi dan beberapa parameter | Penyelesaian mempunyai pepijat |
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/assignment.nl.md b/2-js-basics/2-functions-methods/translations/assignment.nl.md
deleted file mode 100644
index 7199c167..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.nl.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Plezier met functies
-
-## Instructies
-
-Maak verschillende functies, zowel functies die iets retourneren als functies die niets retourneren.
-
-Kijk of u een functie kunt maken met een combinatie van parameters en parameters met standaardwaarden.
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                                                              | Voldoende                                                         | Moet worden verbeterd |
-| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
-|          | Oplossing wordt geboden met twee of meer goed presterende functies met diverse parameters | Werkoplossing wordt aangeboden met één functie en enkele parameters | Oplossing heeft bugs |
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/assignment.pt.md b/2-js-basics/2-functions-methods/translations/assignment.pt.md
deleted file mode 100644
index d5455901..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.pt.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Diversão com funções
-
-## Instruções
-
-Crie funções diferentes, ambas funções que retornam algo e funções que não retornam nada.
-Veja se você pode criar uma função que possui uma combinação de parâmetros e parâmetros com valores padrão.
-
-## Rubrica
-
-| Critério | Exemplar                                                                              | Adequada                                                         | Precisa de melhorias |
-| -------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------- |
-|          | A solução é oferecida com duas ou mais funções de bom desempenho com diversos parâmetros | A solução é oferecida com uma função e alguns parâmetros | A solução tem bugs |
\ No newline at end of file
diff --git a/2-js-basics/2-functions-methods/translations/assignment.zh-cn.md b/2-js-basics/2-functions-methods/translations/assignment.zh-cn.md
deleted file mode 100644
index 42f5e3e8..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.zh-cn.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 试玩函数
-
-## 说明
-
-创建一个会返回什么东西的函数，再创建一个不会返回任何东西的函数。
-
-试试看让它们有多种参数，并且让其中一部分参数有默认值。
-
-## 评价表
-
-| 指标 | 优秀 | 良好 | 尚可进步 |
-| --- | --- | --- | --- |
-| | 给出了两个或更多运行良好的函数，并且有多种多样的参数 | 只有一个可以正常运行的函数，参数也不多 | 有 Bug |
diff --git a/2-js-basics/2-functions-methods/translations/assignment.zh-tw.md b/2-js-basics/2-functions-methods/translations/assignment.zh-tw.md
deleted file mode 100644
index bff30afa..00000000
--- a/2-js-basics/2-functions-methods/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 把玩函式
-
-## 簡介
-
-建立不同的函式，有的回傳數值，有的不回傳數值。
-
-看看你是否能讓函式有多樣的參數輸入與參數預設值。
-
-## 學習評量
-
-| 作業內容 | 優良                                       | 普通                       | 待改進         |
-| -------- | ------------------------------------------ | -------------------------- | -------------- |
-|          | 建立兩個以上多樣參數輸入且功能豐富的函式。 | 建立一個有參數輸入的函式。 | 函式出現問題。 |
diff --git a/2-js-basics/3-making-decisions/translations/README.de.md b/2-js-basics/3-making-decisions/translations/README.de.md
deleted file mode 100644
index b3d8188f..00000000
--- a/2-js-basics/3-making-decisions/translations/README.de.md
+++ /dev/null
@@ -1,169 +0,0 @@
-# JavaScript-Grundlagen: Entscheidungen treffen
-
-[![Entscheidungen treffen](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Entscheidungen treffen")
-
-## [Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
-
-Wenn Sie Entscheidungen treffen und die Reihenfolge steuern, in der Ihr Code ausgeführt wird, ist Ihr Code wiederverwendbar und robust. Dieser Abschnitt behandelt die Syntax zur Steuerung des Datenflusses in JavaScript und ihre Bedeutung bei Verwendung mit booleschen Datentypen.
-
-## Eine kurze Zusammenfassung der Booleschen Werte
-
-Boolesche Werte können nur zwei Werte sein: `true` oder `false`. Boolesche Werte helfen bei der Entscheidung, welche Codezeilen ausgeführt werden sollen, wenn bestimmte Bedingungen erfüllt sind.
-
-Stellen Sie Ihren Booleschen Wert wie folgt auf wahr oder falsch ein:
-
-`let myTrueBool = true`
-`let myFalseBool = false`
-
-✅ Boolesche sind nach dem englischen Mathematiker, Philosophen und Logiker George Boole (1815–1864) benannt.
-
-## Vergleichsoperatoren und Boolesche Werte
-
-Operatoren werden verwendet, um Bedingungen durch Vergleiche zu bewerten, die einen Booleschen Wert erzeugen. Das Folgende ist eine Liste von Operatoren, die häufig verwendet werden.
-
-| Symbol | Beschreibung | Beispiel |
-| ------ | ------------ |-------------------------------------------------- -------------------------------------------------- ------- | ------------------ |
-| `<` | **Größer als**: Vergleicht zwei Werte und gibt den booleschen Datentyp "true" zurück, wenn der Wert auf der rechten Seite größer als der linke ist `5 < 6 // true` |
-| `<=` | **Größer oder gleich**: Vergleicht zwei Werte und gibt den booleschen Datentyp `true` zurück, wenn der Wert auf der rechten Seite größer oder gleich dem linken | ist `5 <= 6 // true` |
-| `>` | **Kleiner als**: Vergleicht zwei Werte und gibt den booleschen Datentyp `true` zurück, wenn der Wert auf der linken Seite größer als der rechte ist `5 > 6 // false` |
-| `=>` | **Kleiner oder gleich**: Vergleicht zwei Werte und gibt den booleschen Datentyp `true` zurück, wenn der Wert auf der linken Seite größer oder gleich dem rechten | ist `5 => 6 // false` |
-| `===` | **Strikte Gleichheit**: Vergleicht zwei Werte und gibt den booleschen Datentyp `true` zurück, wenn die Werte rechts und links gleich sind UND denselben Datentyp haben. | `5 === 6 // false` |
-| `!==` | **Ungleichung**: Vergleicht zwei Werte und gibt den entgegengesetzten Booleschen Wert zurück, den ein strikter Gleichheitsoperator | zurückgeben würde `5 !== 6 // true` |
-
-✅ Überprüfen Sie Ihr Wissen, indem Sie einige Vergleiche in die Konsole Ihres Browsers schreiben. Überraschen Sie zurückgegebene Daten?
-
-## If-Anweisung
-
-Die if-Anweisung führt Code zwischen ihren Blöcken aus, wenn die Bedingung erfüllt ist.
-
-```javascript
-if (condition){
-    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
-}
-```
-
-Logische Operatoren werden häufig verwendet, um die Bedingung zu bilden.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
-    console.log("Getting a new laptop!");
-}
-```
-
-## IF..Else Anweisung
-
-Die `else`-Anweisung führt den Code zwischen ihren Blöcken aus, wenn die Bedingung falsch ist. Es ist optional mit einer `if`-Anweisung.
-
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
-    console.log("Getting a new laptop!");
-}
-else{
-    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-✅ Testen Sie Ihr Verständnis dieses Codes und des folgenden Codes, indem Sie ihn in einer Browserkonsole ausführen. Ändern Sie die Werte der Variablen currentMoney und LaptopPrice, um das zurückgegebene `console.log()` zu ändern.
-
-## Logische Operatoren und Boolesche Werte
-
-Entscheidungen erfordern möglicherweise mehr als einen Vergleich und können mit logischen Operatoren verknüpft werden, um einen Booleschen Wert zu erzeugen.
-
-
-| Symbol | Beschreibung | Beispiel |
-| ------ | ------------ |----------------------------------------- | -------------------------------------------------- --------------------- |
-| `&&` | **Logisches UND**: Vergleicht zwei Boolesche Ausdrücke. Gibt true **nur** zurück, wenn beide Seiten true | sind `(5 > 6) && (5 < 6) // Eine Seite ist falsch, die andere ist wahr. Gibt false` | zurück
-| `||` | **Logisches ODER**: Vergleicht zwei Boolesche Ausdrücke. Gibt true zurück, wenn mindestens eine Seite true ist `(5 > 6) || (5 < 6) // Eine Seite ist falsch, die andere ist wahr. Gibt true` | zurück
-| `!` | **Logisch NICHT**: Gibt den entgegengesetzten Wert eines Booleschen Ausdrucks | zurück `! (5 > 6) // 5 ist nicht größer als 6, aber "!" wird true zurückgeben` |
-
-## Bedingungen und Entscheidungen mit logischen Operatoren
-
-Logische Operatoren können verwendet werden, um Bedingungen in if..else-Anweisungen zu bilden.
-
-
-```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop-Preis bei 20 Prozent Rabatt
-
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
-    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
-    console.log("Getting a new laptop!");
-}
-else {
-    //Bedingung war wahr. Der Code in diesem Block wird ausgeführt.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-### Negationsoperator
-
-Sie haben bisher gesehen, wie Sie mit einer `if...else`-Anweisung eine bedingte Logik erstellen können. Alles, was in ein `if` geht, muss als wahr / falsch bewertet werden. Mit dem Operator `!` Können Sie den Ausdruck _negieren_. Es würde so aussehen:
-
-```javascript
-if (!condition) {
-  // wird ausgeführt, wenn die Bedingung falsch ist
-} else {
-  // wird ausgeführt, wenn die Bedingung erfüllt ist
-}
-```
-
-### Ternäre Ausdrücke
-
-`if...else` ist nicht die einzige Möglichkeit, Entscheidungslogik auszudrücken. Sie können auch einen so genannten ternären Operator verwenden. Die Syntax dafür sieht folgendermaßen aus:
-
-```javascript
-let variable = condition ? <return this if true> : <return this if false>`
-```
-
-Below is a more tangible example:
-
-```javascript
-let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
-```
-
-✅ Nehmen Sie sich eine Minute Zeit, um diesen Code einige Male zu lesen. Verstehen Sie, wie diese Operatoren arbeiten?
-
-Das Obige besagt das
-- wenn `firstNumber` größer als `secondNumber` ist
-- dann `firstNumber` zu `biggestNumber` zuweisen
-- sonst `secondNumber` zuweisen.
-  
-Der ternäre Ausdruck ist nur eine kompakte Art, den folgenden Code zu schreiben:
-
-```javascript
-let biggestNumber;
-if (firstNumber > secondNumber) {
-  biggestNumber = firstNumber;
-} else {
-  biggestNumber = secondNumber;
-}
-```
-
----
-
-## 🚀 Herausforderung
-
-Erstellen Sie ein Programm, das zuerst mit logischen Operatoren geschrieben wird, und schreiben Sie es dann mit einem ternären Ausdruck neu. Was ist Ihre bevorzugte Syntax?
-
-## [Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
-
-## Review & Selbststudium
-
-Lesen Sie mehr über die vielen Operatoren, die dem Benutzer [auf MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) zur Verfügung stehen.
-
-## Zuordnung
-
-[Operators](assignment.de.md)
diff --git a/2-js-basics/3-making-decisions/translations/README.es.md b/2-js-basics/3-making-decisions/translations/README.es.md
deleted file mode 100644
index 0f6a732d..00000000
--- a/2-js-basics/3-making-decisions/translations/README.es.md
+++ /dev/null
@@ -1,168 +0,0 @@
-# Conceptos básicos de JavaScript: tomar decisiones
-
-
-![JavaScript Basics - Making decisions](/sketchnotes/webdev101-js-decisions.png)
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
-
-Tomar decisiones y controlar el orden en que se ejecuta su código hace que su código sea reutilizable y robusto. Esta sección cubre la sintaxis para controlar el flujo de datos en JavaScript y su importancia cuando se usa con tipos de datos booleanos.
-
-[![tomar decisiones](https://img.youtube.com/vi/P0TrLOz15zk/0.jpg)](https://youtube.com/watch?v=P0TrLOz15zk "tomar decisiones")
-
-## Un breve resumen sobre los valores booleanos
-
-Los booleanos pueden tener solo dos valores: `true` o` false`. Los booleanos ayudan a tomar decisiones sobre qué líneas de código deben ejecutarse cuando se cumplen ciertas condiciones.
-
-Establezca su booleano en verdadero o falso de esta manera:
-
-
-`let myTrueBool = true`
-`let myFalseBool = false`
-
-✅ Los booleanos llevan el nombre del matemático, filósofo y lógico inglés George Boole. (1815–1864).
-
-## Operadores de comparación y valores booleanos
-
-Los operadores se utilizan para evaluar las condiciones haciendo comparaciones que crearán un valor booleano. La siguiente es una lista de operadores que se utilizan con frecuencia.
-
-| Símbolo | Descripción                                                                                                                                                                  | Ejemplo            |
-| ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`     | **Mayor que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado derecho es mayor que el del izquierdo                                    | `5 < 6 // true`    |
-| `<=`    | **Mayor o igual que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado derecho es mayor o igual que el del lado izquierdo               | `5 <= 6 // true`   |
-| `>`     | **Menor que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado izquierdo es mayor que el del derecho                                    | `5 > 6 // false`   |
-| `=>`    | **Menor o igual que**: compara dos valores y devuelve el tipo de datos booleano `true` si el valor del lado izquierdo es mayor o igual que el del lado derecho               | `5 => 6 // false`  |
-| `===`   | **Igualdad estricta**: compara dos valores y devuelve el tipo de datos booleano `true` si los valores de la derecha y la izquierda son iguales Y son del mismo tipo de datos | `5 === 6 // false` |
-| `!==`   | **Desigualdad**: compara dos valores y devuelve el valor booleano opuesto de lo que devolvería un operador de igualdad estricta                                              | `5 !== 6 // true`  |
-
-✅ Compruebe sus conocimientos escribiendo algunas comparaciones en la consola de su navegador. ¿Te sorprende algún dato devuelto?
-
-## Declaración If
-
-La sentencia if ejecutará código entre sus bloques si la condición es verdadera.
-
-```javascript
-if (condition){
-    //La condición era verdadera. Se ejecutará el código de este bloque.
-}
-```
-
-Los operadores lógicos se utilizan a menudo para formar la condición.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //La condición era verdadera. Se ejecutará el código de este bloque.
-    console.log("Getting a new laptop!");
-}
-```
-
-## IF..Else Declaración
-
-La declaración `else` ejecutará el código entre sus bloques cuando la condición sea falsa. Es opcional con una declaración `if`.
-
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //La condición era verdadera. Se ejecutará el código de este bloque.
-    console.log("Getting a new laptop!");
-}
-else{
-    //La condición era verdadera. Se ejecutará el código de este bloque.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-✅ Pruebe su comprensión de este código y del siguiente código ejecutándolo en una consola de navegador. Cambie los valores de las variables currentMoney y laptopPrice para cambiar el `console.log()` devuelto.
-
-## Operadores lógicos y booleanos
-
-Las decisiones pueden requerir más de una comparación y se pueden unir con operadores lógicos para producir un valor booleano.
-
-| Símbolo | Descripción                                                                                                  | Ejemplo                                                                           |
-| ------- | ------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- |
-| `&&`    | **AND lógico**: compara dos expresiones booleanas. Devuelve verdadero **solo** si ambos lados son verdaderos | `(5 > 6) && (5 < 6 ) //Un lado es falso, el otro es verdadero. Devuelve falso`    |
-| `||`    | **OR lógico**: compara dos expresiones booleanas. Devuelve verdadero si al menos un lado es verdadero        | `(5 > 6) || (5 < 6) //Un lado es falso, el otro es verdadero. Devuelve verdadero` |
-| `!`     | **NOT lógico**: Devuelve el valor opuesto de una expresión booleana                                          | `!(5 > 6) // 5 no es mayor que 6, pero "!" devolverá verdadero`                   |
-
-## Condiciones y decisiones con operadores lógicos
-
-Los operadores lógicos se pueden utilizar para formar condiciones en sentencias if..else.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Precio del portátil al 20% de descuento
-
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
-    //La condición era verdadera. Se ejecutará el código de este bloque.
-    console.log("Getting a new laptop!");
-}
-else {
-    //La condición era verdadera. Se ejecutará el código de este bloque.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-### Operador de negación
-
-Hasta ahora has visto cómo si puedes usar una instrucción `if...else` para crear lógica condicional. Cualquier cosa que entre en un `if` debe evaluarse como verdadero / falso. Utilizando el operador `!` Puede _negar_ la expresión. Se vería así:
-
-
-```javascript
-if (!condition) {
-  // se ejecuta si la condición es falsa
-} else {
-  // se ejecuta si la condición es verdadera
-}
-```
-
-### Expresiones ternarias
-
-`If...else` no es la única forma de expresar la lógica de decisión. También puede usar algo llamado operador ternario. La sintaxis tiene el siguiente aspecto:
-
-```javascript
-let variable = condition ? <return this if true> : <return this if false>`
-```
-
-A continuación se muestra un ejemplo más tangible:
-
-```javascript
-let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
-```
-
-✅ Tómese un minuto para leer este código varias veces. ¿Entiende cómo trabajan estos operadores?
-
-Lo anterior establece que
-- si `firstNumber` es mayor que `secondNumber`
-- luego asigne `firstNumber` a `biggestNumber`
-- de lo contrario, asigne `secondNumber`.
-  
-La expresión ternaria es solo una forma compacta de escribir el siguiente código:
-
-```javascript
-let biggestNumber;
-if (firstNumber > secondNumber) {
-  biggestNumber = firstNumber;
-} else {
-  biggestNumber = secondNumber;
-}
-```
-
-🚀 Desafío: cree un programa que se escriba primero con operadores lógicos y luego vuelva a escribirlo utilizando una expresión ternaria. ¿Cuál es tu sintaxis preferida?
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
-
-## Revisión y autoestudio
-
-Más información sobre los muchos operadores disponibles para el usuario [en MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
-
-**Asignación**: [Operadores](assignment.es.md)
-
diff --git a/2-js-basics/3-making-decisions/translations/README.fr.md b/2-js-basics/3-making-decisions/translations/README.fr.md
deleted file mode 100644
index 580808e4..00000000
--- a/2-js-basics/3-making-decisions/translations/README.fr.md
+++ /dev/null
@@ -1,177 +0,0 @@
-# Principes de base de JavaScript : Prendre des décisions
-
-![Principes de base de JavaScript : Prendre des décisions](/sketchnotes/webdev101-js-decisions.png)
-> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz préalable
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=fr)
-
-Prendre des décisions et contrôler l'ordre dans lequel votre code s'exécute rend votre code réutilisable et robuste. Cette section couvre la syntaxe pour contrôler le flux de données dans JavaScript et sa signification lorsqu'elle est utilisée avec des types de données booléens
-
-[![Prendre des décisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Prendre des décisions")
-
-> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur la prise de décisions.
-
-> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
-## Un bref récapitulatif sur les booléens
-
-Les booléens ne peuvent avoir que deux valeurs : `true` ou `false`. Les booléens aident à prendre des décisions sur les lignes de code à exécuter lorsque certaines conditions sont remplies.
-
-Définissez votre booléen sur vrai ou faux comme ceci :
-
-`let myTrueBool = true`
-`let myFalseBool = false`
-
-✅ Les booléens tirent leur nom du mathématicien, philosophe et logicien anglais George Boole (1815-1864).
-
-## Opérateurs de comparaison et booléens
-
-Les opérateurs sont utilisés pour évaluer les conditions en effectuant des comparaisons qui créeront une valeur booléenne. Voici une liste d'opérateurs fréquemment utilisés.
-
-| Symbole | Description                                                                                                                                                   | Exemple            |
-| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`    | **Inférieur à**: Compare deux valeurs et renvoie le type de données booléen `true` si la valeur à gauche est inférieure à la valeur à droite                              | `5 < 6 // true`    |
-| `<=`   | **Inférieur ou égal à**: Compare deux valeurs et renvoie le type de données booléen `true` si la valeur à gauche est inférieure ou égale à celle de droite      | `5 <= 6 // true`   |
-| `>`    | **Supérieur à**: Compare deux valeurs et renvoie le type de données booléen `true` si la valeur sur le côté gauche est plus grande que sur la droite                         | `5 > 6 // false`   |
-| `>=`   | **Supérieur ou égal à**: Compare deux valeurs et renvoie le type de données booléen `true` si la valeur à gauche est supérieure ou égale à celle de droite | `5 >= 6 // false`  |
-| `===`  | **Égalité stricte**: Compare deux valeurs et renvoie le type de données booléen `true` si les valeurs à droite et à gauche sont égales ET sont du même type de données.       | `5 === 6 // false` |
-| `!==`  | **Inégalité**: Compare deux valeurs et renvoie la valeur booléenne opposée à ce qu'un opérateur d'égalité stricte retournerait                                    | `5 !== 6 // true`  |
-
-✅ Vérifiez vos connaissances en écrivant quelques comparaisons dans la console de votre navigateur. Les données renvoyées vous surprennent-elles ?
-
-## L'instruction If
-
-L'instruction if exécutera le code entre ses blocs si la condition est vraie.
-
-```javascript
-if (condition){
-    //La condition était vraie. Le code de ce bloc s'exécutera.
-}
-```
-
-Les opérateurs logiques sont souvent utilisés pour former la condition.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //La condition était vraie. Le code de ce bloc s'exécutera.
-    console.log("Getting a new laptop!");
-}
-```
-
-## L'instruction If..Else
-
-L'instruction `else` exécutera le code entre ses blocs lorsque la condition est fausse. C'est facultatif avec une instruction `if`.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //La condition était vraie. Le code de ce bloc s'exécutera.
-    console.log("Getting a new laptop!");
-}
-else{
-    //La condition était vraie. Le code de ce bloc s'exécutera.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-✅ Testez votre compréhension de ce code et du code suivant en l'exécutant dans une console de navigateur. Modifiez les valeurs des variables currentMoney et laptopPrice pour modifier le `console.log()` renvoyé.
-
-## Opérateurs logiques et booléens
-
-Les décisions peuvent nécessiter plusieurs comparaisons et peuvent être associées à des opérateurs logiques pour produire une valeur booléenne.
-
-| Symbole | Description                                                                                     | Exemple                                                                 |
-| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| `&&`   | **ET logique** : compare deux expressions booléennes. Renvoie vrai **uniquement** si les deux côtés sont vrais | `(5 > 6) && (5 < 6 ) //Un côté est faux, l'autre est vrai. Renvoie false` |
-| `\|\|` | **OU logique** : compare deux expressions booléennes. Renvoie vrai si au moins un côté est vrai | `(5 > 6) \|\| (5 < 6) //Un côté est faux, l'autre est vrai. Renvoie vrai` |
-| `!` | **NON logique** : renvoie la valeur opposée d'une expression booléenne | `!(5 > 6) // 5 n'est pas supérieur à 6, mais "!" retournera vrai`         |
-
-## Conditions et décisions avec opérateurs logiques
-
-Les opérateurs logiques peuvent être utilisés pour former des conditions dans les instructions if..else.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Prix ​​de l'ordinateur portable à 20 pour cent de réduction
-
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
-    //La condition était vraie. Le code de ce bloc s'exécutera.
-    console.log("Getting a new laptop!");
-}
-else {
-    //La condition était vraie. Le code de ce bloc s'exécutera.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-### Opérateur de négation
-
-Vous avez vu jusqu'à présent comment vous pouvez utiliser une instruction `if...else` pour créer une logique conditionnelle. Tout ce qui est dans un `if` doit être évalué à vrai/faux. En utilisant l'opérateur `!` vous pouvez _négativiser_ l'expression. Cela ressemblerait à ceci :
-
-```javascript
-if (!condition) {
-  // s'exécute si la condition est fausse
-} else {
-  // s'exécute si la condition est vraie
-}
-```
-
-### Expressions ternaires
-
-`if...else` n'est pas la seule façon d'exprimer la logique de décision. Vous pouvez également utiliser ce qu'on appelle un opérateur ternaire. La syntaxe pour cela ressemble à ceci:
-
-```javascript
-let variable = condition ? <return this if true> : <return this if false>
-```
-
-Ci-dessous, un exemple plus concret :
-
-```javascript
-let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
-```
-
-✅ Prenez une minute pour lire ce code plusieurs fois. Comprenez-vous comment fonctionnent ces opérateurs ?
-
-Le code précèdant indique que
-- si `firstNumber` est plus grand que `secondNumber`
-- alors attribuez `firstNumber` à `biggestNumber`
-- sinon, attribuez `secondNumber`.
-  
-L'expression ternaire n'est qu'une manière compacte d'écrire le code ci-dessous :
-
-```javascript
-let biggestNumber;
-if (firstNumber > secondNumber) {
-  biggestNumber = firstNumber;
-} else {
-  biggestNumber = secondNumber;
-}
-```
-
----
-
-## 🚀 Challenge
-
-Créez un programme écrit d'abord avec des opérateurs logiques, puis réécrivez-le à l'aide d'une expression ternaire. Quelle est votre syntaxe préférée ?
-
----
-## Quiz de validation des connaissances
-[Quiz de validation des connaissancesz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=fr)
-
-## Révision et étude personnelle
-
-En savoir plus sur les nombreux opérateurs disponibles pour l'utilisateur [sur MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
-
-Parcourez le merveilleux [opérateur de recherche de Josh Comeau](https://joshwcomeau.com/operator-lookup/)!
-
-## Affectation
-
-[Les opérateurs](assignment.fr.md)
diff --git a/2-js-basics/3-making-decisions/translations/README.hi.md b/2-js-basics/3-making-decisions/translations/README.hi.md
deleted file mode 100644
index cc47a652..00000000
--- a/2-js-basics/3-making-decisions/translations/README.hi.md
+++ /dev/null
@@ -1,174 +0,0 @@
-# जावास्क्रिप्ट मूल बातें - निर्णय लेना
-
-![जावास्क्रिप्ट मूल बातें - निर्णय लेना](/sketchnotes/webdev101-js-decisions.png)
-> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=hi)
-
-निर्णय लेना और उस आदेश को नियंत्रित करना जिसमें आपका कोड चलता है, आपके कोड को पुन: प्रयोज्य और मजबूत बनाता है। यह खंड बूलियन डेटा प्रकारों के साथ उपयोग किए जाने पर जावास्क्रिप्ट में डेटा प्रवाह को नियंत्रित करने और इसके महत्व के लिए सिंटैक्स को कवर करता है
-
-[![निर्णय लेना](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "निर्णय लेना")
-
-> निर्णय लेने के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
-## बूलियन्स पर एक संक्षिप्त पुनरावृत्ति
-
-बूलियन केवल दो मूल्य हो सकते हैं: `true` या `false`। बूलियंस निर्णय लेने में मदद करते हैं कि किन शर्तों को पूरा करने पर कोड की लाइनें चलनी चाहिए।
-
-इस तरह से सही या गलत होने के लिए अपना बूलियन सेट करें:
-
-`let myTrueBool = true`
-`let myFalseBool = false`
-
-✅ बुलियन का नाम अंग्रेजी गणितज्ञ, दार्शनिक और तर्कशास्त्री जॉर्ज बोले (1815-1864) के नाम पर रखा गया है।
-
-## तुलना ऑपरेटर और बूलियन
-
-ऑपरेटर्स का उपयोग उन परिस्थितियों के मूल्यांकन के लिए किया जाता है जो एक बूलियन मूल्य बनाएंगे। निम्नलिखित ऑपरेटरों की एक सूची है जो अक्सर उपयोग की जाती हैं।
-
-| प्रतीक  | विवरण                                                                                                  | उदाहरण              |
-| ----- | ----------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`   | **से कम**: दो मानों की तुलना करता है और `true` बूलियन डेटा प्रकार लौटाता है यदि बाईं ओर का मान दाईं ओर से कम है                    | `5 < 6 // true`    |
-| `<=`  | ** से कम या इसके बराबर**: दो मानों की तुलना करता है और `true` बूलियन डेटा प्रकार लौटाता है यदि बाईं ओर का मान दाईं ओर से कम या बराबर है | `5 <= 6 // true`   |
-| `>`   | **से अधिक**: दो मानों की तुलना करता है और `true` बूलियन डेटा प्रकार लौटाता है यदि बाईं ओर का मान दाईं ओर से बड़ा है                   | `5 > 6 // false`   |
-| `>=`  | **से अधिक या बराबर**: दो मानों की तुलना करता है और `true` बूलियन डेटा प्रकार देता है यदि बाईं ओर का मान righ से बड़ा या बराबर हैt      | `5 >= 6 // false`  |
-| `===` | **सख्त समानता**: दो मूल्यों की तुलना करता है और `true` बूलियन डेटा प्रकार लौटाता है यदि दाएं और बाएं के मान समान हैं और समान डेटा प्रकार हैं। | `5 === 6 // false` |
-| `!==` | **असमानता**: दो मूल्यों की तुलना करता है और एक सख्त समानता ऑपरेटर वापस आने के विपरीत बूलियन मूल्य लौटाता है                        | `5 !== 6 // true`  |
-
-✅ अपने ब्राउज़र के कंसोल में कुछ तुलनाएँ लिखकर अपने ज्ञान की जाँच करें। क्या कोई लौटा डेटा आपको आश्चर्यचकित करता है?
-
-## ऍफ़ स्टेटमेंट 
-
-यदि ऍफ़ कथन सही है, तो स्टेटमेंट उसके ब्लॉक के बीच में कोड चलाएगा।
-
-```javascript
-if (condition){
-    //Condition was true. Code in this block will run.
-}
-```
-
-लॉजिकल ऑपरेटर्स का उपयोग अक्सर हालत बनाने के लिए किया जाता है.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Condition was true. Code in this block will run.
-    console.log("Getting a new laptop!");
-}
-```
-
-## ऍफ़..ईलस स्टेटमेंट 
-
-स्थिति के गलत होने पर `else` स्टेटमेंट उसके ब्लॉक के बीच कोड चलाएगा। यह `if` स्टेटमेंट के साथ वैकल्पिक है।
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Condition was true. Code in this block will run.
-    console.log("Getting a new laptop!");
-}
-else{
-    //Condition was true. Code in this block will run.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-✅ इस कोड और निम्न कोड को ब्राउज़र कंसोल में चलाकर अपनी समझ का परीक्षण करें। CurrentMoney और laptopPrice वैरिएबल के मानों को बदलकर लौटे `console.log()` को बदलें।
-
-## लॉजिकल ऑपरेटर्स और बुलियन
-
-निर्णयों में एक से अधिक तुलनाओं की आवश्यकता हो सकती है, और बूलियन मूल्य का उत्पादन करने के लिए तार्किक ऑपरेटरों के साथ मिलकर संघर्ष किया जा सकता है।
-
-| प्रतीक   | विवरण                                                                        | उदाहरण                                                    |
-| ------ | --------------------------------------------------------------------------- | -------------------------------------------------------- |
-| `&&`   | **लॉजिकल एंड**: दो बूलियन अभिव्यक्तियों की तुलना करता है। सच्चा रिटर्न ** केवल ** यदि दोनों पक्ष सत्य हैं | `(5 > 6) && (5 < 6 ) //एक पक्ष झूठा है, दूसरा सच है। झूठा लौटता है`  |
-| `\|\|` | **लॉजिकल और**: दो बूलियन अभिव्यक्तियों की तुलना करता है। अगर कम से कम एक पक्ष सच है, तो सच है    | `(5 > 6) \|\| (5 < 6) //एक पक्ष झूठा है, दूसरा सच है। सच लौटाता है` |
-| `!`    | **लॉजिकल नॉट**: एक बूलियन अभिव्यक्ति के विपरीत मूल्य देता है                                 | `!(5 > 6) // 5 6 से अधिक नहीं है, लेकिन "!" सच लौटेगा`             |
-
-## तार्किक संचालकों के साथ स्थितियां और निर्णय
-
-तार्किक संचालकों का उपयोग ऍफ़..ईलस स्टेटमेंट में स्थितियाँ बनाने के लिए किया जा सकता है।
-
-```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
-
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
-    //Condition was true. Code in this block will run.
-    console.log("Getting a new laptop!");
-}
-else {
-    //Condition was true. Code in this block will run.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-### नेगटिव ऑपरेटर
-
-आपने अभी तक देखा है कि अगर आप सशर्त तर्क बनाने के लिए `if...else` स्टेटमेंट का उपयोग कैसे कर सकते हैं। कुछ भी जो `if` में जाता है, उसे सही/गलत का मूल्यांकन करने की आवश्यकता होती है। '!' ऑपरेटर का उपयोग करके आप अभिव्यक्ति को _निगेट_ कर सकते हैं। ऐसा लगेगा:
-```javascript
-if (!condition) {
-  // runs if condition is false
-} else {
-  // runs if condition is true
-}
-```
-
-### टेरनरी एक्सप्रेशंस 
-
-`if...else` निर्णय तर्क व्यक्त करने का एकमात्र तरीका नहीं है। आप टर्नरी ऑपरेटर नामक किसी चीज़ का उपयोग भी कर सकते हैं। इसके लिए सिंटैक्स इस तरह दिखता है:
-
-```javascript
-let variable = condition ? <return this if true> : <return this if false>
-```
-
-नीचे एक और मूर्त उदाहरण दिया गया है:
-
-```javascript
-let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
-```
-
-✅ इस कोड को कुछ समय पढ़ने के लिए एक मिनट लें। क्या आप समझते हैं कि ये ऑपरेटर कैसे काम कर रहे हैं?
-
-उपरोक्त कहा गया है कि
-- यदि `firstNumber` `secondNumber` से बड़ा है
-- इसके बाद `firstNumber` को `biggestNumber` को असाइन करें
-- वरना `secondNumber` असाइन करें।
-  
-टर्नरी एक्सप्रेशन नीचे दिए गए कोड को लिखने का एक कॉम्पैक्ट तरीका है:
-
-```javascript
-let biggestNumber;
-if (firstNumber > secondNumber) {
-  biggestNumber = firstNumber;
-} else {
-  biggestNumber = secondNumber;
-}
-```
-
----
-
-## 🚀 चुनौती
-
-एक प्रोग्राम बनाएं, जो पहले तार्किक ऑपरेटरों के साथ लिखा गया हो, और फिर इसे एक टर्नरी अभिव्यक्ति का उपयोग करके फिर से लिखना। आपका पसंदीदा सिंटेक्स क्या है?
-
----
-## व्याख्यान उपरांत प्रश्नोत्तरी
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-उपयोगकर्ता के लिए उपलब्ध कई ऑपरेटरों के बारे में और अधिक पढ़ें [MDN पर](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)
-
-जोश कोमू के अद्भुत [ऑपरेटर लुकअप](https://joshwcomeau.com/operator-lookup/) पर जाएं!
-
-## असाइनमेंट
-
-[ऑपरेटर्स](assignment.hi.md)
diff --git a/2-js-basics/3-making-decisions/translations/README.id.md b/2-js-basics/3-making-decisions/translations/README.id.md
deleted file mode 100644
index 86e05873..00000000
--- a/2-js-basics/3-making-decisions/translations/README.id.md
+++ /dev/null
@@ -1,175 +0,0 @@
-# Dasar-dasar JavaScript: Membuat Keputusan
-
-![Dasar-dasar JavaScript - Membuat Keputusan](/sketchnotes/webdev101-js-decisions.png)
-
-> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuis Pra-Kuliah
-
-[Kuis pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=id)
-
-Membuat keputusan dan mengontrol urutan kode Anda berjalan membuat kode Anda dapat digunakan kembali dan kuat. Bagian ini membahas sintaks untuk mengontrol aliran data di JavaScript dan signifikansinya saat digunakan dengan tipe data Boolean.
-
-[![Membuat keputusan](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Membuat keputusan")
-
-## Rekap Singkat tentang Boolean
-
-Boolean hanya dapat berupa dua nilai: `true` atau `false`. Boolean membantu membuat keputusan tentang baris kode mana yang harus dijalankan ketika kondisi tertentu terpenuhi.
-
-Setel boolean Anda menjadi true atau false seperti ini:
-
-`let myTrueBool = true`
-`let myFalseBool = false`
-
-✅ Nama Boolean diambil dari ahli matematika, filsuf, dan ahli logika Inggris George Boole (1815-1864).
-
-## Operator Perbandingan dan Boolean
-
-Operator digunakan untuk mengevaluasi kondisi dengan membuat perbandingan yang akan menghasilkan nilai Boolean. Berikut ini adalah daftar operator yang sering digunakan.
-
-| Simbol | Deskripsi                                                                                                                                                                  | Contoh             |
-| ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`    | **Kurang dari**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri kurang dari kanan                                             | `5 < 6 // true`    |
-| `<=`   | **Kurang dari atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri kurang dari atau sama dengan kanan           | `5 <= 6 // true`   |
-| `>`    | **Lebih besar dari**: Membandingkan dua nilai dan mengembalikan tipe data Boolean `true` jika nilai di sisi kiri lebih besar dari kanan                                    | `5 > 6 // false`   |
-| `>=`   | **Lebih besar dari atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sisi kiri lebih besar dari atau sama dengan kanan | `5 >= 6 // false`  |
-| `===`  | **Kesetaraan ketat**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di kanan dan kiri sama DAN merupakan jenis data yang sama.            | `5 === 6 // false` |
-| `!==`  | **Ketidaksamaan**: Membandingkan dua nilai dan mengembalikan nilai Boolean yang berlawanan dari yang akan dikembalikan oleh operator persamaan ketat                       | `5 !== 6 // true`  |
-
-✅ Uji pengetahuan Anda dengan menulis beberapa perbandingan di konsol browser Anda. Apakah data yang dikembalikan mengejutkan Anda?
-
-## Pernyataan If
-
-Pernyataan if akan menjalankan kode di antara bloknya jika kondisinya benar.
-
-```javascript
-if (kondisi) {
-  //Kondisinya benar. Kode di blok ini akan berjalan.
-}
-```
-
-Operator logika sering digunakan untuk membentuk kondisi tersebut.
-
-```javascript
-let uangSekarang;
-let hargaLaptop;
-
-if (uangSekarang >= hargaLaptop) {
-  //Kondisinya benar. Kode di blok ini akan berjalan.
-  console.log("Mendapatkan laptop baru!");
-}
-```
-
-## Pernyataan IF..Else
-
-Pernyataan `else` akan menjalankan kode di antara bloknya jika kondisinya salah. Ini opsional dengan pernyataan `if`, jadi tidak semua `if` harus diikuti dengan pernyataan `else`.
-
-```javascript
-let uangSekarang;
-let hargaLaptop;
-
-if (uangSekarang >= hargaLaptop) {
-  //Kondisinya benar. Kode di blok ini akan berjalan.
-  console.log("Mendapatkan laptop baru!");
-} else {
-  //Kondisinya benar. Kode di blok ini akan berjalan.
-  console.log("Belum bisa membeli laptop baru!");
-}
-```
-
-✅ Uji pemahaman Anda tentang kode ini dan kode berikut dengan menjalankannya di konsol browser. Ubah nilai variabel uangSekarang dan hargaLaptop untuk mengubah `console.log()` yang dikembalikan.
-
-## Operator Logis dan Boolean
-
-Keputusan mungkin memerlukan lebih dari satu perbandingan, dan dapat digabungkan dengan operator logika untuk menghasilkan nilai Boolean.
-
-| Simbol | Deskripsi                                                                                                      | Contoh                                                                                 |
-| ------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-| `&&`   | **Logical AND**: Membandingkan dua ekspresi Boolean. Mengembalikan nilai benar **hanya** jika kedua sisi benar | `(5 > 6) && (5 < 6 ) //Satu sisi salah, sisi lainnya benar. Mengembalikan nilai salah` |
-| `\|\|` | **Logical OR**: Membandingkan dua ekspresi Boolean. Mengembalikan nilai benar jika setidaknya satu sisi benar  | `(5 > 6) \|\| (5 < 6) //Satu sisi salah, sisi lainnya benar. Mengembalikan nilai true` |
-| `!`    | **Logical NOT**: Menampilkan nilai kebalikan dari ekspresi Boolean                                             | `!(5 > 6) // 5 tidak lebih besar dari 6, tapi "!" akan kembali benar`                  |
-
-## Kondisi dan Keputusan dengan Operator Logis
-
-Operator logika dapat digunakan untuk membentuk kondisi dalam pernyataan if..else.
-
-```javascript
-let uangSekarang;
-let hargaLaptop;
-let hargaDiskonLaptop = hargaLaptop - hargaLaptop * 0.2; //Harga laptop diskon 20 persen
-
-if (uangSekarang >= hargaLaptop || uangSekarang >= hargaDiskonLaptop) {
-  //Kondisinya benar. Kode di blok ini akan berjalan.
-  console.log("Mendapatkan laptop baru!");
-} else {
-  //Kondisinya benar. Kode di blok ini akan berjalan.
-  console.log("Belum bisa membeli laptop baru!");
-}
-```
-
-### Operator Negasi
-
-Anda telah melihat sejauh ini bagaimana jika Anda bisa menggunakan pernyataan `if ... else` untuk membuat logika kondisional. Apa pun yang menjadi `jika` perlu dievaluasi menjadi benar / salah. Dengan menggunakan operator `!` Anda dapat _negate_ ekspresi. Ini akan terlihat seperti ini:
-
-```javascript
-if (!kondisi) {
-  // berjalan jika kondisinya false
-} else {
-  // berjalan jika kondisinya true
-}
-```
-
-### Ekspresi Terner
-
-`if ... else` bukanlah satu-satunya cara untuk mengekspresikan logika keputusan. Anda juga dapat menggunakan sesuatu yang disebut operator terner (ternary operator). Sintaksnya terlihat seperti ini:
-
-```javascript
-let variable = kondisi ? <kembalikan ini jika benar> : <kembalikan ini jika salah>`
-```
-
-Di bawah ini adalah contoh yang lebih nyata:
-
-```javascript
-let nomorPertama = 20;
-let nomorKedua = 10;
-let nomorTerbesar = nomorPertama > nomorKedua ? nomorPertama : nomorKedua;
-```
-
-✅ Luangkan waktu sebentar untuk membaca kode ini beberapa kali. Apakah Anda memahami cara kerja operator ini?
-
-Di atas menyatakan bahwa
-
-- jika `nomorPertama` lebih besar dari `nomorKedua`
-- tetapkan `nomorPertama` ke `nomorTerbesar`
-- jika tidak tetapkan `nomorKedua`.
-
-Ekspresi terner hanyalah cara ringkas untuk menulis kode di bawah ini:
-
-```javascript
-let nomorTerbesar;
-if (nomorPertama > nomorKedua) {
-  nomorTerbesar = nomorPertama;
-} else {
-  nomorTerbesar = nomorKedua;
-}
-```
-
----
-
-## 🚀 Tantangan
-
-Buat program yang ditulis pertama kali dengan operator logika, lalu tulis ulang menggunakan ekspresi terner. Apa sintaks pilihan Anda?
-
-## Kuis Pasca-Kuliah
-
-[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=id)
-
-## Review & Belajar Mandiri
-
-Baca lebih lanjut tentang banyak operator yang tersedia untuk pengguna [di MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
-
-Lihat [pencarian operator](https://joshwcomeau.com/operator-lookup/) oleh Josh Comeau yang luar biasa!
-
-## Tugas
-
-[Operator](./assignment.id.md)
diff --git a/2-js-basics/3-making-decisions/translations/README.it.md b/2-js-basics/3-making-decisions/translations/README.it.md
deleted file mode 100644
index e54cd665..00000000
--- a/2-js-basics/3-making-decisions/translations/README.it.md
+++ /dev/null
@@ -1,175 +0,0 @@
-# Nozioni di base su JavaScript: Prendere Decisioni
-
-![Nozioni di base su JavaScript - Prendere decisioni](/sketchnotes/webdev101-js-decisions.png)
-> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pre-Lezione
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=it)
-
-Prendere decisioni e controllare l'ordine in cui il proprio codice viene eseguito lo rende riutilizzabile e robusto. Questa sezione descrive la sintassi per il controllo del flusso di dati in JavaScript e il suo significato quando viene utilizzato con tipi di dato Booleani
-
-[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
-
-## Un Breve Riepilogo sui Booleani
-
-I Booleani possono avere solo due valori: `true` (vero) o `false` (falso). I booleani possono aiutare a prendere decisioni su quali righe di codice devono essere eseguite quando vengono soddisfatte determinate condizioni.
-
-Si impostano i booleani come vero o falso in questo modo:
-
-`let myTrueBool = true`
-`let myFalseBool = false` 
-
-✅ I Booleani prendono il nome dal matematico, filosofo e logico inglese George Boole (1815–1864).
-
-## Operatori di Confronto e Booleani
-
-Gli operatori vengono utilizzati per valutare condizioni effettuando confronti che creeranno un valore Booleano. Di seguito è riportato un elenco di operatori utilizzati di frequente.
-
-| Simbolo | Descrizione                                                                                                                                                                 | Esempio            |
-| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`     | **Minore di**: Confronta due valori e restituisce il tipo di dato booleano `true` se il valore sul lato sinistro è minore di quello del lato di destra                      | `5 < 6 // true`    |
-| `<=`    | **Minore di o uguale a**: Confronta due valori e restituisce il tipo di dato Booleano `true` se il valore sul lato sinistro è minore o uguale a quello di destra            | `5 <= 6 // true`   |
-| `>`     | **Maggiore di**: Confronta due valori e restituisce il tipo di dato Booleano `true` se il valore sul lato sinistro è maggiore di quello del lato destro                     | `5 > 6 // false`   |
-| `>=`    | **Maggiore di o uguale a**: Confronta due valori e restituisce il tipo di dato Booleano `true` se il valore sul lato sinistro è maggiore o uguale a quello del  lato destro | `5 >= 6 // false`  |
-| `===`   | **Uguaglianza rigorosa**: Confronta due valori e restituisce il tipo di dato Booleano `true` se i valori a destra e a sinistra sono uguali E sono lo stesso tipo di dato.   | `5 === 6 // false` |
-| `!==`   | **Disuguaglianza**: Confronta due valori e restituisce il valore Booleano opposto di quello che restituirebbe un operatore di uguaglianza rigorosa                          | `5! == 6 // true`  |
-
-✅ Verificare le proprie conoscenze scrivendo alcuni confronti nella console del browser. I dati restituiti sorprendono?
-
-## Istruzione If
-
-L'istruzione if eseguirà il codice tra i suoi blocchi se la condizione è vera.
-
-```javascript
-if (condition){
-    //Condition era vero. Verra eseguito il codice in questo blocco.
-}
-```
-
-Gli operatori logici vengono spesso utilizzati per formare la condizione.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Condition era vero. Verra eseguito il codice in questo blocco.
-    console.log("Getting a new laptop!");
-}
-```
-
-## Istruzione if..else
-
-L 'istruzione `else` eseguirà il codice tra i suoi blocchi quando la condizione è falsa. È opzionale con un'istruzione `if` .
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Condizione era vero. Verra eseguito il codice in questo blocco.
-    console.log("Getting a new laptop!");
-}
-else{
-    //Condizione era falsa. Verra eseguito il codice in questo blocco.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-✅ Verificare la comprensione di questo codice e del codice seguente eseguendolo in una console del browser. Modificare i valori delle variabili currentMoney e laptopPrice per modificare il valore restituito da `console.log()`.
-
-## Operatori Logici e Booleani
-
-Le decisioni potrebbero richiedere più di un confronto e possono essere combinate con operatori logici per produrre un valore Booleano.
-
-| Simbolo | Descrizione                                                                                                  | Esempio                                                                    |
-| ------- | ------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------- |
-| `&&`    | **AND logico**: Confronta due espressioni Booleane. Restituisce vero **solo** se entrambe le parti sono vere | `(5 > 6) && (5 < 6) // Un lato è falso, l'altro è vero. Restituisce false` |
-| `\|\|`  | **OR logico**: Confronta due espressioni Booleane. Restituisce vero se almeno una parte è vera               | `(5 > 6) || (5 < 6) // Un lato è falso, l'altro è vero. Restituisce true`  |
-| `!`     | **NOT logico**: Restituisce il valore opposto di un'espressione Booleana                                     | `!(5 > 6) // 5 non è maggiore di 6, ma "!" restituirà true`                |
-
-## Condizioni e Decisioni con Operatori Logici
-
-Gli operatori logici possono essere utilizzati per formare condizioni nelle istruzioni if..else.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
-
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
-    //Condizione era vero. Verra eseguito il codice in questo blocco.
-    console.log("Getting a new laptop!");
-}
-else {
-    //Condizion era falsa. Verra eseguito il codice in questo blocco.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-### Operatore di Negazione
-
-Finora si è visto come if può usare un'istruzione `if... else` per creare logica condizionale. Tutto ciò che va in un `if` deve essere valutato come vero / falso. Utilizzando l'operatore `!` si può _negare_ l'espressione. Sarebbe così:
-
-```javascript
-if (!condition) {
-  // si esegue se condition è falso
-} else {
-  // si esegue se condition è vero
-}
-```
-
-### Espressioni ternarie
-
-`if...else` non è l'unico modo per esprimere la logica decisionale. Si può anche usare qualcosa chiamato operatore ternario. La sintassi è simile alla seguente:
-
-```javascript
-let variable = condition ? <ritorna questo se vero> : <ritorna questo se falso>
-```
-
-Di seguito è riportato un esempio più tangibile:
-
-```javascript
-let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
-```
-
-✅ Ci si prenda un minuto per leggere questo codice alcune volte. Si capisce come lavorano questi operatori?
-
-Quanto sopra afferma che
-
-- se `firstNumber` è maggiore di `secondNumber` 
-- allora assegna `firstNumber` a `biggestNumber` 
-- altrimenti assegna `secondNumber`.
-
-L'espressione ternaria è solo un modo compatto per scrivere il codice seguente:
-
-```javascript
-let biggestNumber;
-if (firstNumber > secondNumber) {
-  biggestNumber = firstNumber;
-} else {
-  biggestNumber = secondNumber;
-}
-```
-
----
-
-## 🚀 Sfida
-
-Creare un programma che viene scritto prima con operatori logici, quindi riscriverlo utilizzando un'espressione ternaria. Qual è la propria sintassi preferita?
-
----
-## Quiz Post-Lezione
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=it)
-
-## Revisione e Auto Apprendimento
-
-Ulteriori informazioni sui numerosi operatori a disposizione dell'utente [su MDN](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators).
-
-Esaminare la meravigliosa [consultazione sugli operatori di Josh Comeau](https://joshwcomeau.com/operator-lookup/)!
-
-## Compito
-
-[Operatori](assignment.it.md)
diff --git a/2-js-basics/3-making-decisions/translations/README.ja.md b/2-js-basics/3-making-decisions/translations/README.ja.md
deleted file mode 100644
index a3a9369f..00000000
--- a/2-js-basics/3-making-decisions/translations/README.ja.md
+++ /dev/null
@@ -1,174 +0,0 @@
-# JavaScript の基本: 意思決定
-
-![JavaScript Basics - Making decisions](/sketchnotes/webdev101-js-decisions.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## レッスン前の小テスト
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=ja)
-
-意思決定を行い、コードの実行順序を制御することで、コードを再利用可能で堅牢なものにします。このセクションでは、JavaScript のデータフローを制御するための構文と、ブール値データ型で使用される場合の意味について説明します。
-
-[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
-
-## ブール値の簡単なまとめ
-
-ブール値は2つの値だけを持つことができます。`true` か `false` です。ブール値は、特定の条件が満たされたときにどの行のコードを実行するかを決定するのに役立ちます。
-
-以下のように、ブール値を true か false に設定します:
-
-`let myTrueBool = true`
-`let myFalseBool = false`
-
-✅ ブール値は、イギリスの数学者、哲学者、論理学者のジョージ・ブール (1815-1864) にちなんで名づけられました。
-
-## 比較演算子とブール値
-
-演算子は、ブール値を生成するような比較をして条件を評価するために使用されます。以下に、よく使われる演算子の一覧を示します。
-
-| シンボル | 説明                                                                                                  | 例                 |
-| -------- | ----------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`      | **小なり**: 2つの値を比較し、左側の値が右側の値よりも小さい場合は `true` のブール値を返します。       | `5 < 6 // true`    |
-| `<=`     | **小なりイコール**: 2つの値を比較し、左側の値が右側の値以下の場合は `true` のブール値を返します。     | `5 <= 6 // true`   |
-| `>`      | **大なり**: 2つの値を比較し、左側の値が右側の値よりも大きい場合は `true` のブール値を返します。       | `5 > 6 // false`   |
-| `>=`     | **大なりイコール**: 2つの値を比較し、左辺の値が右辺の値以上の場合は `true` のブール値を返します。     | `5 >= 6 // false`  |
-| `===`    | **同値**: 2つの値を比較し、右と左の値が等しく、かつ同じデータ型であれば `true` のブール値を返します。 | `5 === 6 // false` |
-| `!==`    | **非同値**: 2つの値を比較し、厳密な平等演算子が返す値の反対のブール値を返します。                     | `5 !== 6 // true`  |
-
-✅ ブラウザのコンソールに比較を書き込んで、自分の知識を確認してみてください。返ってきたデータに驚きはありませんか？
-
-## If 文
-
-if 文は、条件が true であればブロック間でコードを実行します。
-
-```javascript
-if (condition){
-    //条件は true でした。このブロック内のコードが実行されます。
-}
-```
-
-論理演算子は、条件を形成するためによく使われます。
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //条件は true でした。このブロック内のコードが実行されます。
-    console.log("新しいノートパソコンを手に入れよう!");
-}
-```
-
-## IF..Else 文
-
-`else` 文は、条件が false の場合にブロック間でコードを実行します。これは `if` 文ではオプションです。
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //条件は true でした。このブロック内のコードが実行されます。
-    console.log("新しいノートパソコンを手に入れよう!");
-}
-else{
-    //条件は false でした。このブロック内のコードが実行されます。
-    console.log("新しいノートパソコンを買う余裕はまだない!");
-}
-```
-
-✅ ブラウザのコンソールで実行して、このコードと次のコードの理解度をテストしてください。currentMoney 変数と laptopPrice 変数の値を変更して、返される `console.log()` を変更します。
-
-## 論理演算子とブール値
-
-意思決定には複数の比較が必要な場合があり、論理演算子を使ってブール値を生成することができます。
-
-| シンボル | 説明                                                                                    | 例                                                                             |
-| -------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| `&&`     | **論理積**: 2つのブール式を逆さにします。両辺が真の場合 **のみ** true を返します。      | `(5 > 6) && (5 < 6 ) //片方が false、もう片方が true です。false を返します。` |
-| `\|\|`     | **論理和**: 2つのブール式を比較します。少なくとも片方が true であれば true を返します。 | `(5 > 6) \|\| (5 < 6) //片方が false、もう片方が true です。true を返します。`   |
-| `!`      | **論理否定**: ブール式の反対の値を返します。                                            | `!(5 > 6) // 5は6より大きくないが、"!" は true を返す`                         |
-
-## 論理演算子を用いた条件と決定
-
-論理演算子は、if...else 文で条件を形成するために使用できます。
-
-```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //ノートパソコンの価格が20％オフ
-
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
-    //条件は true でした。このブロック内のコードが実行されます。
-    console.log("新しいノートパソコンを手に入れよう!");
-}
-else {
-    //条件は false でした。このブロック内のコードが実行されます。
-    console.log("新しいノートパソコンを買う余裕はまだない!");
-}
-```
-
-### 否定演算子
-
-ここまでで、条件付きロジックを作成するために `if...else` 文を使用する方法を見てきました。`if` に入るものはすべて true/false を評価する必要があります。演算子 `!` を使用すると、式を _否定_ することができます。以下のようになります。
-
-```javascript
-if (!condition) {
-  // 条件が false の場合に実行されます。
-} else {
-  // 条件が true の場合に実行されます。
-}
-```
-
-### 三項式
-
-意思決定ロジックを表現する方法は `if...else` だけではありません。三項演算子と呼ばれるものを使うこともできます。その構文は次のようになります。
-
-```javascript
-let variable = condition ? <true ならばこれを返す> : <false ならばこれを返す>`
-```
-
-以下でより具体的な例を挙げてみます。
-
-```javascript
-let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
-```
-
-✅ このコードを数回読むのに時間をかけてください。これらの演算子がどのように動作するか理解できましたか？
-
-上の例では次のようになっています。
-- `firstNumber` が `secondNumber` よりも大きければ
-- `biggestNumber` に `firstNumber` を代入し、
-- そうでなければ `secondNumber` に代入する
-  
-三項式は、以下のコードをコンパクトに書くだけです。
-
-```javascript
-let biggestNumber;
-if (firstNumber > secondNumber) {
-  biggestNumber = firstNumber;
-} else {
-  biggestNumber = secondNumber;
-}
-```
-
----
-
-## 🚀 チャレンジ
-
-最初に論理演算子を使ってプログラムを作成し、それを三項式で書き換えます。お好みの構文は？
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=ja)
-
-## 復習と自己学習
-
-ユーザーが利用できる多くの演算子についての詳細は [mdn](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators) をご覧ください。
-
-Josh Comeau の素晴らしい [operator lookup](https://joshwcomeau.com/operator-lookup/) をご覧ください!
-
-## 課題
-
-[演算子](assignment.ja.md)
diff --git a/2-js-basics/3-making-decisions/translations/README.ko.md b/2-js-basics/3-making-decisions/translations/README.ko.md
deleted file mode 100644
index 3122d283..00000000
--- a/2-js-basics/3-making-decisions/translations/README.ko.md
+++ /dev/null
@@ -1,173 +0,0 @@
-# JavaScript 기초: 결정하기
-
-![JavaScript Basics - Making decisions](/sketchnotes/webdev101-js-decisions.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 강의 전 퀴즈
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=ko)
-
-결정을 내리고 코드가 실행되는 순서를 제어하면 코드를 재사용하며 강력하게 만들 수 있습니다. 이 강의에서는 JavaScript에서 데이터 흐름을 제어하기 위한 구문과 논리 자료형 데이터 타입을 함께 사용하는 중요성을 다룹니다.
-
-[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Making Decisions")
-
-## 논리 자료형에 대한 간략한 요약
-
-논리 자료형은 `true` 또는 `false` 두 가지 값만 가능합니다. 논리 자료형은 조건이 충족하는 순간 실행하는 코드 라인을 결정하는 데 도움 줄 수 있습니다.
-
-이렇게 참 또는 거짓으로 논리 자료형을 지정합니다:
-
-`let myTrueBool = true`
-`let myFalseBool = false`
-
-✅ Booleans(=논리 자료형)은 영국의 수학자, 철학자이자 논리 학자인 George Boole (1815-1864)의 이름에서 유래되었습니다.
-
-## 비교 연산자와 논리 연산자
-
-연산자는 논리 자료형 값을 비교하여 조건을 평가하는 데 사용합니다. 자주 사용되는 연산자 목록입니다.
-
-| Symbol | Description                                                                                                                                                   | Example            |
-| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`    | **Greater than**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than the left                         | `5 < 6 // true`    |
-| `<=`   | **Greater than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the right side is larger than or equal to the left | `5 <= 6 // true`   |
-| `>`    | **Less than**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than the right                            | `5 > 6 // false`   |
-| `>=`   | **Less than or equal to**: Compares two values and returns the `true` Boolean data type if the value on the left side is larger than or equal to the right    | `5 >= 6 // false`  |
-| `===`  | **Strict equality**: Compares two values and returns the `true` Boolean data type if values on the right and left are equal AND are the same data type.       | `5 === 6 // false` |
-| `!==`  | **Inequality**: Compares two values and returns the opposite Boolean value of what a strict equality operator would return                                    | `5 !== 6 // true`  |
-
-✅ 브라우저 콘솔에서 비교문을 작성하여 복습해보십시오. 반환된 데이터가 놀랍나요?
-
-## If 문
-
-조건이 참이면 if 문은 블록 사이에서 코드를 실행합니다.
-
-```javascript
-if (condition){
-    //Condition was true. Code in this block will run.
-}
-```
-
-논리 연산자는 조건을 만들 때 종종 사용됩니다.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Condition was true. Code in this block will run.
-    console.log("Getting a new laptop!");
-}
-```
-
-## IF..Else 문
-
-`else` 문은 조건이 거짓일 때만 블록 사이에서 코드를 실행합니다. `if` 문와 함께 사용하는 것은 선택 사항입니다.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Condition was true. Code in this block will run.
-    console.log("Getting a new laptop!");
-}
-else{
-    //Condition was true. Code in this block will run.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-✅ 위 코드들을 브라우저 콘솔에서 실행하여 이해했는지 테스트하십시오. currentMoney 및 laptopPrice 변수 값이 변경하여 반환된 `console.log ()`가 변경됩니다.
-
-## 논리 연산자와 논리 자료형
-
-결정에는 두개 이상의 비교문이 필요할 수 있으며, 논리 연산자과 합쳐서 논리 자료형 값을 생성할 수 있습니다.
-
-| Symbol | Description                                                                                     | Example                                                                 |
-| ------ | ----------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
-| `&&`   | **Logical AND**: Compares two Boolean expressions. Returns true **only** if both sides are true | `(5 > 6) && (5 < 6 ) //One side is false, other is true. Returns false` |
-| `||`   | **Logical OR**: Compares two Boolean expressions. Returns true if at least one side is true     | `(5 > 6) || (5 < 6) //One side is false, other is true. Returns true`   |
-| `!`    | **Logical NOT**: Returns the opposite value of a Boolean expression                             | `!(5 > 6) // 5 is not greater than 6, but "!" will return true`         |
-
-## 논리 연산자의 조건 및 결정
-
-논리 연산자는 if..else 문에서 조건을 만들 때 사용됩니다.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
-
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
-    //Condition was true. Code in this block will run.
-    console.log("Getting a new laptop!");
-}
-else {
-    //Condition was true. Code in this block will run.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-### 부정 연산자
-
-`if...else` 문으로 사용하여 조건부 로직을 만드는 방법을 살펴 보았습니다. `if`에 들어가는 모든 것은 참/거짓으로 평가되어야 합니다. `!` 연산자를 사용하여 표현식을 _부정_ 할 수 있습니다. 이렇게 보입니다:
-
-```javascript
-if (!condition) {
-  // runs if condition is false
-} else {
-  // runs if condition is true
-}
-```
-
-### 삼항식
-
-`if...else`가 결정 로직을 표현하는 유일한 방법은 아닙니다. 삼항 연산자라는 것을 사용할 수 있습니다. 구문은 다음과 같습니다:
-
-```javascript
-let variable = condition ? <return this if true> : <return this if false>`
-```
-
-다음은 확실한 예시입니다:
-
-```javascript
-let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
-```
-
-✅ 잠시 시간을 내서 코드를 몇 번 읽으시기 바랍니다. 연산자가 어떻게 작동하는지 이해하나요?
-
-위의 내용은
-- `firstNumber`가 `secondNumber`보다 큰 경우
-- `biggestNumber`에 `firstNumber`를 할당하고
-- 그렇지 않으면 `secondNumber`를 할당한다는 내용입니다.
-  
-삼항 표현식은 아래 코드를 간단히 작성했습니다.
-
-```javascript
-let biggestNumber;
-if (firstNumber > secondNumber) {
-  biggestNumber = firstNumber;
-} else {
-  biggestNumber = secondNumber;
-}
-```
-
----
-
-## 🚀 도전
-
-논리 연산자로 프로그램을 먼저 만든 뒤, 삼항 표현식을 사용하여 다시 작성하십시오. 어떤 구문을 선호합니까?
-
-## 강의 후 퀴즈
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-[MDN에서](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators) 사용할 수 있는 많은 연산자에 대해 자세히 알아보십시오.
-
-Josh Comeau'의 wonderful [operator lookup](https://joshwcomeau.com/operator-lookup/)을 통할 수 있습니다!
-
-## 과제
-
-[Operators](../assignment.md)
diff --git a/2-js-basics/3-making-decisions/translations/README.ms.md b/2-js-basics/3-making-decisions/translations/README.ms.md
deleted file mode 100644
index d3d81c75..00000000
--- a/2-js-basics/3-making-decisions/translations/README.ms.md
+++ /dev/null
@@ -1,175 +0,0 @@
-# Asas JavaScript: Membuat Keputusan
-
-![Asas JavaScript - Membuat Keputusan](/sketchnotes/webdev101-js-decisions.png)
-> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuiz Pra Kuliah
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
-
-Membuat keputusan dan mengawal urutan kod anda berjalan menjadikan kod anda boleh digunakan semula dan kukuh. Bahagian ini merangkumi sintaks untuk mengawal aliran data dalam JavaScript dan kepentingannya apabila digunakan dengan jenis data Boolean
-
-[![Membuat Keputusan](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "Membuat Keputusan")
-
-> Klik gambar di atas untuk video mengenai membuat keputusan.
-## Secara rumus untuk mengenai Booleans
-
-Booleans boleh hanya dua nilai: `true` atau` false`. Booleans membantu membuat keputusan mengenai garis kod mana yang harus dijalankan apabila syarat tertentu dipenuhi.
-
-Tetapkan boolean anda menjadi benar atau salah seperti ini:
-
-`let myTrueBool = true`
-`let myFalseBool = false`
-
-✅ Booleans dinamai oleh ahli matematik Inggeris, ahli falsafah dan ahli logik George Boole (1815-1864).
-
-## Pengendali Perbandingan dan Booleans
-
-Pengendali digunakan untuk menilai keadaan dengan membuat perbandingan yang akan menghasilkan nilai Boolean. Berikut adalah senarai pengendali yang sering digunakan.
-
-| Simbol | Penerangan                                                                                                                                                                      | Contoh             |
-| ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`    | **Kurang daripada**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sebelah kiri kurang dari kanan                                           | `5 < 6 // true`    |
-| `<=`   | **Kurang daripada atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sebelah kiri kurang dari atau sama dengan kanan         | `5 <= 6 // true`   |
-| `>`    | **Lebih daripada**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sebelah kiri lebih besar daripada kanan                                   | `5 > 6 // false`   |
-| `>=`   | **Lebih daripada atau sama dengan**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di sebelah kiri lebih besar daripada atau sama dengan kanan | `5 >= 6 // false`  |
-| `===`  | **Persamaan yang ketat**: Membandingkan dua nilai dan mengembalikan jenis data Boolean `true` jika nilai di kanan dan kiri sama DAN adalah jenis data yang sama.                | `5 === 6 // false` |
-| `!==`  | **Ketidaksamaan**: Membandingkan dua nilai dan mengembalikan nilai Boolean yang bertentangan dengan apa yang akan dikembalikan oleh operator persamaan yang ketat               | `5 !== 6 // true`  |
-
-✅ Periksa pengetahuan anda dengan menulis beberapa perbandingan di konsol penyemak imbas anda. Adakah data yang dikembalikan mengejutkan anda?
-
-## Penyata sekiranya (if)
-
-Pernyataan _if_ akan menjalankan kod di antara bloknya jika keadaannya benar.
-
-```javascript
-if (condition){
-    //Keadaan itu benar. Kod di blok ini akan dijalankan.
-}
-```
-
-Pengendali logik sering digunakan untuk membentuk keadaan.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Keadaan itu benar. Kod di blok ini akan dijalankan.
-    console.log("Getting a new laptop!");
-}
-```
-
-## Penyata (IF.. Else)
-
-Pernyataan `else` akan menjalankan kod di antara bloknya apabila keadaannya salah. Ia pilihan dengan pernyataan `if`.
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Keadaan itu benar. Kod di blok ini akan dijalankan.
-    console.log("Getting a new laptop!");
-}
-else{
-    //Keadaan itu benar. Kod di blok ini akan dijalankan.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-✅ Uji pemahaman anda mengenai kod ini dan kod berikut dengan menjalankannya di konsol penyemak imbas. Tukar nilai pemboleh ubahMoney dan laptopPrice semasa untuk menukar `console.log ()` yang dikembalikan.
-
-## Pengendali Logik dan Booleans 
-
-Keputusan mungkin memerlukan lebih dari satu perbandingan, dan dapat disatukan dengan operator logik untuk menghasilkan nilai Boolean.
-
-| Simbol | Penerangan                                                                                                    | Contoh                                                                         |
-| ------ | ------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ |
-| `&&`   | **Logik AND**: Membandingkan dua ungkapan Boolean. Mengembalikan benar **hanya** jika kedua-dua sisi benar    | `(5 > 6) && (5 < 6 ) //Satu pihak salah, yang lain benar. Mengembalikan palsu` |
-| `\|\|` | **Logik OR**: Membandingkan dua ungkapan Boolean. Mengembalikan benar jika sekurang-kurangnya satu sisi benar | `(5 > 6) \|\| (5 < 6) //Satu pihak salah, yang lain benar. Kembali benar`      |
-| `!`    | **Logik NOT**: Mengembalikan nilai bertentangan ungkapan Boolean                                              | `!(5 > 6) // 5 tidak lebih besar daripada 6, tetapi "!" akan kembali benar`    |
-
-## Syarat dan Keputusan dengan Pengendali Logik
-
-Pengendali logik boleh digunakan untuk membentuk keadaan dalam pernyataan (if..else).
-
-```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Harga komputer riba diskaun 20 peratus
-
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
-    //Keadaan itu benar. Kod di blok ini akan dijalankan.
-    console.log("Getting a new laptop!");
-}
-else {
-    //Keadaan itu benar. Kod di blok ini akan dijalankan.
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-### Pengendali negasi
-
-Anda telah melihat sejauh mana bagaimana anda boleh menggunakan pernyataan `if ... else` untuk membuat logik bersyarat. Apa-apa yang masuk ke `if` perlu dinilai menjadi benar / salah. Dengan menggunakan operator `!` Anda boleh _negate_ ungkapan itu. Ia kelihatan seperti:
-
-```javascript
-if (!condition) {
-  // kod ini akan berjalan sekiranya keadaan salah
-} else {
-  // kod ini akan berjalan sekiranya keadaan benar
-}
-```
-
-### Ungkapan Ternary
-
-`if ... else` bukan satu-satunya cara untuk menyatakan logik keputusan. Anda juga boleh menggunakan sesuatu yang disebut pengendali ternary. Sintaks untuknya kelihatan seperti ini:
-
-```javascript
-let variable = condition ? <return this if true> : <return this if false>
-```
-
-Berikut adalah contoh yang lebih nyata:
-
-```javascript
-let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
-```
-
-✅ Luangkan masa sebentar untuk membaca kod ini beberapa kali. Adakah anda faham bagaimana pengendali ini berfungsi?
-
-Perkara di atas menyatakan bahawa
-- jika `firstNumber` lebih besar daripada` secondNumber`
-- kemudian tetapkan `firstNumber` ke` largeNumber`
-- lain tetapkan `secondNumber`.
-
-Ungkapan terner hanyalah cara ringkas untuk menulis kod di bawah:
-
-```javascript
-let biggestNumber;
-if (firstNumber > secondNumber) {
-  biggestNumber = firstNumber;
-} else {
-  biggestNumber = secondNumber;
-}
-```
-
----
-
-## 🚀 Cabaran
-
-Buat program yang ditulis terlebih dahulu dengan operator logik, dan kemudian tulis semula menggunakan ungkapan terary. Apakah sintaks pilihan anda?
-
----
-## Kuiz Pasca Kuliah
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
-
-## Mengkaji & Belajar Sendiri
-
-Baca lebih lanjut mengenai banyak pengendali yang ada pada pengguna[pada laman MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators).
-
-Lalui laman Josh Comeau tentang [pengendali](https://joshwcomeau.com/operator-lookup/)!
-
-## Tugasan
-
-[Pengendali](./assignment.ms.md)
diff --git a/2-js-basics/3-making-decisions/translations/README.pt.md b/2-js-basics/3-making-decisions/translations/README.pt.md
deleted file mode 100644
index d54349bd..00000000
--- a/2-js-basics/3-making-decisions/translations/README.pt.md
+++ /dev/null
@@ -1,177 +0,0 @@
-# Noções básicas de JavaScript: Tomando Decisões
-![Noções básicas de JavaScript - Tomando Decisões](/sketchnotes/webdev101-js-decisions.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pré-Aula
-[Quiz Pré-Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11)
-
-Tomar decisões e controlar a ordem do que é executado no seu código o torna recusável e robusto. Essa seção cobre a sintaxe para controle do fluxo de dados no JavaScript e sua significância quando usada com tipos Booleanos.
-
-[![Tomando Decisões](https://img.youtube.com/vi/jqxfynLcNIw/0.jpg)](https://youtube.com/watch?v=jqxfynLcNIw "Making Decisions")
-
-> 🎥 Clique na imagem acima para ver um video sobre tomada de decisões 
-
-> Você pode fazer essa aula em [Microsoft Learn](https://docs.microsoft.com/pt-br/learn/modules/web-development-101-if-else/?WT.mc_id=academic-77807-sagibbon)!
-
-## Uma breve recapitulação sobre Booleanos
-
-Booleanos podem ter apenas dois valores `true` ou `false` (Verdadeiro ou falso). Os booleanos ajudam a tomar decisões sobre quais linhas de código devem ser executadas quando certas condições são atendidas.
-
-Atribua valores verdadeiro ou falso no seu booleano da seguinte forma:
-
-`let meuBooleanoVerdadeiro = true`
-`let meuBooleanoFalso = false`
-
-✅ Os booleanos receberam o nome do matemático, filósofo e lógico inglês George Boole (1815–1864).
-
-## Operadores de comparação e booleanos
-
-Os operadores são usados para avaliar as condições fazendo comparações que criarão um valor booleano. A seguir está uma lista de operadores que são usados com frequência
-
-| Simbolo | Descrição                                                                                                                                                               | Exemplo            |
-| ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
-| `<`     | **Menor que**: Compara dois valores e retorna o tipo de dados Booleano `true` se o valor do lado esquerdo for menor que o direito                                       | `5 < 6 // true`    |
-| `<=`    | **Menor ou igual**: Compara dois valores e retorna o tipo de dados Booleano `true` se o valor à esquerda for menor ou igual à direita                                   | `5 <= 6 // true`   |
-| `>`     | **Maior que**: Compara dois valores e retorna o tipo de dados Booleano `true` se o valor à esquerda for menor ou igual à direita                                        | `5 > 6 // false`   |
-| `>=`    | **Maior ou igual**: Compara dois valores e retorna o tipo de dados Booleano `true` se o valor à esquerda for maior ou igual à direita                                   | `5 >= 6 // false`  |
-| `===`   | **Igualdade estrita**: Compara dois valores e retorna o tipo de dados booleano `true` se os valores à direita e à esquerda forem iguais E forem do mesmo tipo de dados. | `5 === 6 // false` |
-| `!==`   | **Desigualdade**: Compara dois valores e retorna o valor booleano oposto ao que um operador de igualdade estrita retornaria                                             | `5 !== 6 // true`  |
-
-✅ Verifique seu conhecimento escrevendo algumas comparações no console do seu navegador. Algum dado retornado o surpreende?
-
-## Instrução If
-
-A instrução if executará o código entre seus blocos se a condição for verdadeira.
-
-```javascript
-if (condição){
-    // A condição era verdadeira. O código neste bloco será executado.
-}
-```
-
-Os operadores lógicos são freqüentemente usados para formar a condição.
-
-```javascript
-let dinheiroAtual;
-let precoLaptop;
-
-if (dinheiroAtual >= precoLaptop){
-    // A condição era verdadeira. O código neste bloco será executado.
-    console.log("Comprando um novo laptop!");
-}
-```
-
-## Instrução IF..Else 
-
-A instrução `else` executará o código entre seus blocos quando a condição for falsa. É opcional com uma instrução `if`.
-
-```javascript
-let dinheiroAtual;
-let precoLaptop;
-
-if (dinheiroAtual >= precoLaptop){
-    // A condição era verdadeira. O código neste bloco será executado.
-    console.log("Comprando um novo laptop!");
-}
-else{
-    // A condição era verdadeira. O código neste bloco será executado.
-    console.log("Ainda não posso comprar um novo laptop!");
-}
-```
-
-✅ Teste sua compreensão deste código e do código a seguir, executando-o em um console de navegador. Altere os valores das variáveis dinheiroAtual e precoLaptop para alterar os retornos do `console.log ()`.
-
-## Operadores Lógicos e Booleanos
-
-As decisões podem exigir mais de uma comparação e podem ser combinadas com operadores lógicos para produzir um valor booleano.
-
-| Simbolo | Descrição                                                                                                              | Exemplo                                                                              |
-| ------- | ---------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
-| `&&`    | **AND Lógico**: Compara duas expressões booleanas. Retorna verdadeiro ** apenas ** se ambos os lados forem verdadeiros | `(5 > 6) && (5 < 6 ) //// Um lado é falso, o outro é verdadeiro. Retorna falso`      |
-| `\|\|`  | **OR Lógico**: Compara duas expressões booleanas. Retorna verdadeiro se pelo menos um lado for verdadeiro              | `(5> 6) \ | \ | (5 <6) // Um lado é falso, o outro é verdadeiro. Retorna verdadeiro` |
-| `!`     | **NOT Lógico**: Retorna o valor oposto de uma expressão booleana                                                       | `! (5> 6) // 5 não é maior que 6, mas"! " retornará verdadeiro`                      |
-
-## Codições e Decisões com Operadores Lógicos
-
-Operadores lógicos podem ser usados para formar condições em instruções if..else.
-
-```javascript
-let dinheiroAtual;
-let precoLaptop;
-let laptopComDesconto = precoLaptop - (precoLaptop * .20) //Laptop com desconto de 20%
-
-if (dinheiroAtual >= precoLaptop || dinheiroAtual >= laptopComDesconto){
-    // A condição era verdadeira. O código neste bloco será executado.
-    console.log("Comprando um novo laptop!");
-}
-else {
-    // A condição era verdadeira. O código neste bloco será executado.
-    console.log("Ainda não posso comprar um novo laptop!");
-}
-```
-
-### Operador de negação
-
-Você viu até agora como se pode usar uma instrução `if ... else` para criar lógica condicional. Tudo o que entra em um `if` precisa ser avaliado como verdadeiro / falso. Usando o operador `!` Você pode _negar_ a expressão. Seria assim:
-
-```javascript
-if (!condicao) {
-  // é executado se a condição for falsa
-} else {
-  // é executado se a condição for verdadeira
-}
-```
-
-### Expressões ternárias
-
-`if ... else` não é a única maneira de expressar a lógica de decisão. Você também pode usar algo chamado operador ternário. A sintaxe é assim:
-
-```javascript
-let variavel = condicao ? <retorne isso se verdadeiro> : <retorne isso se falso>
-```
-
-Abaixo está um exemplo mais tangível:
-
-```javascript
-let primeiroNumero = 20;
-let segundoNumero = 10
-let maiorNumero = primeiroNumero > segundoNumero ? primeiroNumero: segundoNumero;
-```
-
-✅ Reserve um minuto para ler este código algumas vezes. Você entende como esses operadores estão trabalhando?
-
-O código acima afirma que
-- Se `primeiroNumero` for maior que o `segundoNumero` 
-- então atribua `primeiroNumero` a `maiorNumero` 
-- Senão atribua `segundoNumero`. 
-  
-A expressão ternária é apenas uma forma compacta de escrever o código abaixo:
-
-```javascript
-let maiorNumero;
-if (primeiroNumero > segundoNumero) {
-  maiorNumero = primeiroNumero;
-} else {
-  maiorNumero = segundoNumero;
-}
-```
-
----
-
-## 🚀 Desafio
-
-Crie um programa que seja escrito primeiro com operadores lógicos e, em seguida, reescreva-o usando uma expressão ternária. Qual é a sua sintaxe preferida?
-
----
-## Quiz Pós-Aula
-[Quiz Pós Aula](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12)
-
-## Revisão e autoestudo
-
-Leia mais sobre os vários operadores disponíveis para o usuário [no MDN](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators).
-
-Vá até a maravilhosa [pesquisa de operador](https://joshwcomeau.com/operator-lookup/)! de Josh Comeau 
-
-## Tarefa
-
-[Operadores](assignment.pt.md)
diff --git a/2-js-basics/3-making-decisions/translations/README.zh-cn.md b/2-js-basics/3-making-decisions/translations/README.zh-cn.md
deleted file mode 100644
index b7b66f29..00000000
--- a/2-js-basics/3-making-decisions/translations/README.zh-cn.md
+++ /dev/null
@@ -1,177 +0,0 @@
-# JavaScript 基础：做出决定
-
-![JavaScript Basics - Making decisions](/sketchnotes/webdev101-js-decisions.png)
-> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 课前小测
-[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=zh_cn)
-
-对你的代码运行方式做出决定并且控制它们的顺序可以让你的代码更加可复用和稳定。这节课会介绍 JavaScript 中控制数据流的语法以及其与布尔数据类型搭配使用时的重要性。
-
-[![Making Decisions](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "做出决定")
-
-> 点击上方图片来观看一个有关做出决定的视频。
-
-## 布尔值简要回顾
-
-布尔值只有两个值：`true` 或 `false`。布尔值有助于决定在满足一定条件下应该运行哪些行的代码。
-
-可以用如下方式将你的布尔变量设为真或假：
-
-`let myTrueBool = true`
-`let myFalseBool = false`
-
-✅ 布尔值（Booleans）的命名来源于英国数学家、哲学家和逻辑学家 George Boole（1815-1864）。
-
-## 比较运算符（Comparison Operators）与布尔值
-
-一些运算符可用于表示比较的结果（会以布尔值返回）。下面是一些常用的运算符：
-
-| 符号  | 描述                                                                              | 示例               |
-| ----- | --------------------------------------------------------------------------------- | ------------------ |
-| `<`   | **小于**：比较两个值，如果左边的值小于右边的值则返回 `true`                       | `5 < 6 // true`    |
-| `<=`  | **小于或等于**：比较两个值，如果左边的值小于或等于右边的值则返回 `true`           | `5 <= 6 // true`   |
-| `>`   | **大于**：比较两个值，如果左边的值大于右边的值则返回 `true`                       | `5 > 6 // false`   |
-| `>=`  | **大于或等于**：比较两个值，如果左边的值大于或等于右边的值则返回 `true`           | `5 >= 6 // false`  |
-| `===` | **严格等于**：比较两个值，如果左边的值等于右边的值**且**数据类型相同则返回 `true` | `5 === 6 // false` |
-| `!==` | **不等于**：比较两个值，返回与“严格等于”运算结果相反的布尔值                      | `5 !== 6 // true`  |
-
-✅ 在你的浏览器控制台中亲手写一些比较来验证你的知识。有任何让你感到意外的返回结果吗？
-
-## If 语句
-
-If 语句会在条件为真的情况下运行它的块中的代码。
-
-```javascript
-if (condition){
-    // 如果 condition 为 true，这个块中的代码将会运行。
-}
-```
-
-比较/逻辑运算符常被用于构造条件式。
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    // 如果条件为 true，这个块中的代码将会运行。
-    console.log("Getting a new laptop!");
-}
-```
-
-## If..Else 语句
-
-`else` 语句会在条件为假的情况下运行它块中的代码。它可以跟在一个 `if` 语句后面。
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    // 如果条件为 true，这个块中的代码将会运行。
-    console.log("Getting a new laptop!");
-}
-else{
-    // 如果条件为 false，这个块中的代码将会运行。
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-✅ 通过在浏览器控制台运行上方和接下来的代码来检查你对它的理解是否正确。可以通过修改 currentMoney 和 laptopPrice 变量的值来尝试改变 `console.log()` 打印出的值。
-
-## 逻辑运算符（Logical Operators）与布尔值
-
-做出决定可能需要不止一次比较，可以用逻辑运算符将比较结果串在一起来产生一个布尔值。
-
-| 符号   | 描述                                                                | 示例                                                   |
-| ------ | ------------------------------------------------------------------- | ------------------------------------------------------ |
-| `&&`   | **逻辑与（AND）**：比较两个布尔表达式，只有在两边**都是真**时返回真 | `(5 > 6) && (5 < 6 ) // 一边为假，另一边为真，返回假`  |
-| `\|\|` | **逻辑或（OR）**：比较两个布尔表达式，在至少一边为真时返回真        | `(5 > 6) \|\| (5 < 6) // 一边为假，另一边为真，返回真` |
-| `!`    | **逻辑非（NOT）**：返回与一个布尔表达式相反的布尔值                 | `!(5 > 6) // 5 并不比 6 大，但 "!" 会返回真`           |
-
-## 用逻辑运算符来构造条件和决定
-
-If...else 语句中，逻辑运算符可以用来构造条件。
-
-```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) // 打八折后的笔记本电脑价格
-
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
-    // 如果条件为 true，这个块中的代码将会运行。
-    console.log("Getting a new laptop!");
-}
-else {
-    // 如果条件为 false，这个块中的代码将会运行。
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-### 取反运算符（Negation operator）
-
-你现在已经了解到如何用 `if...else` 语句来创建条件逻辑。任何传入 `if` 的东西都需要计算出一个 true 或者 false。通过 `!` 运算符你可以将表达式 _取反_。就像这样：
-
-```javascript
-if (!condition) {
-  // 如果 condition 为 false 则运行
-} else {
-  // 如果 condition 为 true 则运行
-}
-```
-
-### 三元表达式（Ternary expressions）
-
-`if...else` 并非表达决定逻辑的唯一方式，你也可以使用一个叫做三元运算符的东西。语法如下：
-
-```javascript
-let variable = condition ? <若为 true 则返回这个> : <若为 false 则返回这个>
-```
-
-下方是一个更具体的例子：
-
-```javascript
-let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
-```
-
-✅ 花一分钟多看几遍上方代码，你能想明白这些运算符是什么意思吗？
-
-上方代码表示：
-
-- 如果 `firstNumber` 大于 `secondNumber`
-- 就将 `firstNumber` 赋值给 `biggestNumber`
-- 否则将 `secondNumber` 赋值给 `biggestNumber`
-
-三元表达式其实只是下方代码的一个简单写法：
-
-```javascript
-let biggestNumber;
-if (firstNumber > secondNumber) {
-  biggestNumber = firstNumber;
-} else {
-  biggestNumber = secondNumber;
-}
-```
-
----
-
-## 🚀 挑战
-
-用逻辑运算符写一个程序，然后用三元表达式重写它。你更喜欢哪种语法？
-
----
-## 课后小测
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=zh_cn)
-
-## 复习 & 自学
-
-在 [MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators) 上了解更多开发者可以使用的运算符。
-
-试用一下由 Josh Comeau 制作的绝妙的[运算符查询器](https://joshwcomeau.com/operator-lookup/)！
-
-## 作业
-
-[运算符](assignment.zh-cn.md)
diff --git a/2-js-basics/3-making-decisions/translations/README.zh-tw.md b/2-js-basics/3-making-decisions/translations/README.zh-tw.md
deleted file mode 100644
index 4023b7ae..00000000
--- a/2-js-basics/3-making-decisions/translations/README.zh-tw.md
+++ /dev/null
@@ -1,176 +0,0 @@
-# JavaScript 入門 - 做出決定
-
-![JavaScript 入門 - 做出決定](/sketchnotes/webdev101-js-decisions.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
-
-## 課前測驗
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/11?loc=zh_tw)
-
-為程式碼做決定與控制順序以提高其重複利用性與豐富性。這堂課程提供 JavaScript 的資料流控制語法與布林資料型的重點。
-
-[![做出決定](https://img.youtube.com/vi/SxTp8j-fMMY/0.jpg)](https://youtube.com/watch?v=SxTp8j-fMMY "做出決定")
-
-> 點擊上方圖片以觀賞關於程式做決定的影片。
-
-## 回顧布林資料型
-
-布林只能有兩種數值： `true` 或 `false`。 布林幫助程式碼間在特定的條件下做出決定。
-
-設定布林值的方式如下：
-
-`let myTrueBool = true`
-`let myFalseBool = false`
-
-✅ 布林的命名來源為一位英格蘭數學家、哲學家暨邏輯學家喬治·布爾 George Boole (1815–1864)。
-
-## 關係運算子與布林
-
-運算子會被使用在執行比較上，並回傳布林值。以下是常用的運算子列表。
-
-| 符號  | 描述                                                                       | 舉例               |
-| ----- | -------------------------------------------------------------------------- | ------------------ |
-| `<`   | **小於**： 比較兩數，當左數小於右數時，回傳 `true`。                       | `5 < 6 // true`    |
-| `<=`  | **小於等於**： 比較兩數，當左數小於右數或左數等於右數時，回傳 `true`。     | `5 <= 6 // true`   |
-| `>`   | **大於**： 比較兩數，當左數大於右數時，回傳 `true`。                       | `5 > 6 // false`   |
-| `>=`  | **大於等於**： 比較兩數，當左數大於右數或左數等於右數時，回傳 `true`。     | `5 >= 6 // false`  |
-| `===` | **嚴格相等**： 比較兩數，當左數等於右數且有相同的資料型態時，回傳 `true`。 | `5 === 6 // false` |
-| `!==` | **嚴格不等於**： 比較兩數，回傳值與嚴格相等恰恰相反。                      | `5 !== 6 // true`  |
-
-✅ 藉由在瀏覽器命令欄中撰寫關係運算子來驗證你學到的知識。你有什麼意外發現嗎?
-
-## If 條件式
-
-當條件成立時，If 條件式會執行區塊內的程式碼。
-
-```javascript
-if (condition){
-    //Condition was true. Code in this block will run.
-}
-```
-
-邏輯運算子常被用在建立條件上。
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    //Condition was true. Code in this block will run.
-    console.log("Getting a new laptop!");
-}
-```
-
-## IF..Else 條件式
-
-當條件不成立時，`else` 條件式會執行區塊內的程式碼。它可以和 `if` 條件式選擇性地使用。
-
-```javascript
-let currentMoney;
-let laptopPrice;
-
-if (currentMoney >= laptopPrice){
-    // if 條件成立時，這段程式碼會被執行。
-    console.log("Getting a new laptop!");
-}
-else{
-    // else 條件成立時，這段程式碼會被執行。
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-✅ 在瀏覽器命令欄中測試你是否了解上述程式碼的意義。改變變數 currentMoney 和 laptopPrice 的數值來取得不同的回傳值 `console.log()`。
-
-## 邏輯運算子與布林
-
-有時候條件內容包含兩個以上的比較，邏輯運算子可以協助串接比較式來回傳布林值。
-
-| 符號   | 描述                                                                       | 舉例                                                      |
-| ------ | -------------------------------------------------------------------------- | --------------------------------------------------------- |
-| `&&`   | **邏輯和**： 比較兩個布林條件式，當兩者**皆**回傳 `true` 時，回傳 `true`。 | `(5 > 6) && (5 < 6 ) //左為false、右為true，回傳 false。` |
-| `\|\|` | **邏輯或**： 比較兩個布林條件式，當其中一個回傳 `true` 時，回傳 `true`。   | `(5 > 6) \|\| (5 < 6) //左為false、右為true，回傳 true。` |
-| `!`    | **邏輯非**： 回傳布林條件式的相反回傳值。                                  | `!(5 > 6) // 5 不大於 6，但 "!" 讓回傳值為 true。`        |
-
-## 邏輯運算子下的決定與條件
-
-邏輯運算子可以用在建立 if..else 條件式中的條件。
-
-```javascript
-let currentMoney;
-let laptopPrice;
-let laptopDiscountPrice = laptopPrice - (laptopPrice * .20) //Laptop price at 20 percent off
-
-if (currentMoney >= laptopPrice || currentMoney >= laptopDiscountPrice){
-    // if 條件成立時，這段程式碼會被執行。
-    console.log("Getting a new laptop!");
-}
-else {
-    // else 條件成立時，這段程式碼會被執行。
-    console.log("Can't afford a new laptop, yet!");
-}
-```
-
-### 否定運算子
-
-你已經了解如何在 `if...else` 條件式中建立條件。任何 `if` 條件需要決定它的是與否。利用運算子 `!` 來 _否定_ 結果。它以下列方式呈現：
-
-```javascript
-if (!condition) {
-  // condition 為 false 時，執行。
-} else {
-  // condition 為 true 時，執行。
-}
-```
-
-### 條件運算子
-
-`if...else` 並不是唯一表達條件式的方式。你也可以使用名為條件運算子的符號。語法如下：
-
-```javascript
-let variable = condition ? <條件成立時回傳 A> : <條件否定時回傳 B>
-```
-
-下列是較明確的例子：
-
-```javascript
-let firstNumber = 20;
-let secondNumber = 10
-let biggestNumber = firstNumber > secondNumber ? firstNumber: secondNumber;
-```
-
-✅ 花點時間閱讀這段程式碼。你能了解這些運算子的運作方式嗎?
-
-上述的狀態為：
-- 若 `firstNumber` 大於 `secondNumber` 時
-- 則賦予 `firstNumber` 數值 `biggestNumber` 
-- 否則賦予為數值 `secondNumber`。 
-  
-條件運算子的另一種表達方式為：
-
-```javascript
-let biggestNumber;
-if (firstNumber > secondNumber) {
-  biggestNumber = firstNumber;
-} else {
-  biggestNumber = secondNumber;
-}
-```
-
----
-
-## 🚀 挑戰
-
-建立一個程式，使用邏輯運算式來做判斷，再將程式碼改寫成條件運算子。你喜歡用哪一種語法?
-
----
-## 課後測驗
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/12?loc=zh_tw)
-
-## 複習與自學
-
-閱讀更多可被使用的運算子：[MDN](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators)。
-
-瀏覽 Josh Comeau 所編制的[運算子查詢表](https://joshwcomeau.com/operator-lookup/)！
-
-## 作業
-
-[運算子](assignment.zh-tw.md)
diff --git a/2-js-basics/3-making-decisions/translations/assignment.de.md b/2-js-basics/3-making-decisions/translations/assignment.de.md
deleted file mode 100644
index 99b9e556..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.de.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Operatoren
-
-## Anleitung
-
-Spielen Sie mit den Betreibern herum. Hier ist ein Vorschlag für ein Programm, das Sie implementieren können:
-
-Sie haben eine Gruppe von Studenten aus zwei verschiedenen Bewertungssystemen.
-
-### Erstbewertungssystem
-
-Ein Bewertungssystem ist definiert als Noten von 1 bis 5, wobei 3 und höher bedeutet, dass Sie den Kurs bestehen.
-
-### Zweites Bewertungssystem
-
-Das andere Notensystem hat die folgenden Noten `A, A-, B, B-, C, C-` wobei `A` die Bestnote und `C` die niedrigste bestandene Note ist.
-
-### Die Aufgabe
-
-Erstellen Sie unter Berücksichtigung des folgenden Arrays `allStudents`, das alle Schüler und ihre Noten darstellt, ein neues Array `studentsWhoPass`, das alle bestandenen Schüler enthält.
-
-> TIPP, verwenden Sie eine for-Schleife und if...else und Vergleichsoperatoren:
-
-```javascript
-let allStudents = [
-  'A',
-  'B-'
-  1,
-  4
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## Rubrik
-
-| Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf |
-| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
-| | Komplettlösung wird vorgestellt | Teillösung wird vorgestellt Lösung mit Fehlern wird vorgestellt |
\ No newline at end of file
diff --git a/2-js-basics/3-making-decisions/translations/assignment.es.md b/2-js-basics/3-making-decisions/translations/assignment.es.md
deleted file mode 100644
index 4cd57472..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.es.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# Operadores
-
-## Instrucciones
-
-Juega con los operadores. Aquí hay una sugerencia de un programa que puede implementar.
-
-Tiene un conjunto de estudiantes de dos sistemas de calificación diferentes.
-
-### Primer sistema de calificación
-
-Un sistema de calificación se define como calificaciones del 1 al 5, donde 3 y más significa que aprueba el curso.
-
-### Segundo sistema de calificación
-
-El otro sistema de calificaciones tiene las siguientes calificaciones `A, A-, B, B-, C, C-` donde `A` es la calificación más alta y `C` es la calificación más baja para aprobar.
-
-### La tarea
-
-Dada la siguiente matriz `allStudents` que representa a todos los estudiantes y sus calificaciones, construya una nueva matriz `StudentsWhoPass` que contenga a todos los estudiantes que aprobaron.
-
-> SUGERENCIA, use un bucle for y if ... else y operadores de comparación:
-
-
-```javascript
-let allStudents = [
-  'A',
-  'B-'
-  1,
-  4
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
-| | Se presenta la solución completa | Se presenta solución parcial | Se presenta solución con errores |
diff --git a/2-js-basics/3-making-decisions/translations/assignment.fr.md b/2-js-basics/3-making-decisions/translations/assignment.fr.md
deleted file mode 100644
index ddefabc0..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.fr.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Les opérateurs
-
-## Instructions
-
-Amusez vous avec les opérateurs. Voici une suggestion de programme que vous pouvez implémenter :
-
-Vous avez un ensemble d'étudiants issu de deux systèmes de notation différents.
-
-### Premier système de notation
-
-Un système de notation est défini comme des notes allant de 1 à 5, où 3 et plus signifient que vous réussissez le cours.
-
-### Deuxième système de notation
-
-L'autre système de notes a les notes suivantes `A, A-, B, B-, C, C-`, où `A` est la note la plus élevée et `C` est la note de passage la plus basse.
-
-### La tâche
-
-Étant donné le tableau suivant `allStudents` représentant tous les étudiants et leurs notes, construisez un nouveau tableau `studentsWhoPass` contenant tous les étudiants qui réussissent.
-
-> CONSEIL, utilisez une boucle for et if...else et des opérateurs de comparaison :
-
-```javascript
-let allStudents = [
-  'A',
-  'B-',
-  1,
-  4,
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## Rubrique
-
-| Critères | Exemplaire | Adéquat | Besoin d'amélioration |
-| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
-|          | La solution complète est présentée | Une solution partielle est présentée | La solution avec des bogues est présentée |
\ No newline at end of file
diff --git a/2-js-basics/3-making-decisions/translations/assignment.hi.md b/2-js-basics/3-making-decisions/translations/assignment.hi.md
deleted file mode 100644
index e393fe9b..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.hi.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# ऑपरेटर्स
-
-## अनुदेश
-
-ऑपरेटरों के साथ खेलते हैं। यहां एक प्रोग्राम के लिए एक सुझाव है जिसे आप कार्यान्वित कर सकते हैं:
-
-आपके पास दो अलग-अलग ग्रेडिंग सिस्टम के छात्रों का एक सेट है.
-
-### पहला ग्रेडिंग सिस्टम
-
-एक ग्रेडिंग सिस्टम को 1-5 से ग्रेड के रूप में परिभाषित किया गया है जहां 3 और इसके बाद के संस्करण का मतलब है कि आप पाठ्यक्रम पास करते हैं।
-
-### दूसरा ग्रेडिंग सिस्टम
-
-अन्य ग्रेड प्रणाली में निम्न ग्रेड हैं `A, A-, B, B-, C, C-` जहां `A` शीर्ष ग्रेड है और `C` सबसे कम पासिंग ग्रेड है।
-
-### काम
-
-निम्नलिखित सरणी को देखते हुए `allStudents` सभी छात्रों और उनके ग्रेड का प्रतिनिधित्व करते हैं, एक नई सरणी का निर्माण करते हैं` StudentsWhoPass` जिसमें सभी छात्र पास होते हैं।
-
-> सुझाब , for-loop और if...else और तुलना ऑपरेटरों का उपयोग करें :
-
-```javascript
-let allStudents = [
-  'A',
-  'B-'
-  1,
-  4
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                  | पर्याप्त                      | सुधार की जरूरत                        |
-| ------ | ---------------------------- | ----------------------------- | ------------------------------------- |
-|        | पूरा समाधान प्रस्तुत किया है | आंशिक समाधान प्रस्तुत किया है | बग के साथ समाधान प्रस्तुत किया गया है |
diff --git a/2-js-basics/3-making-decisions/translations/assignment.id.md b/2-js-basics/3-making-decisions/translations/assignment.id.md
deleted file mode 100644
index 58b1d288..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.id.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Operator
-
-## Instruksi
-
-Bermain-main dengan operator. Berikut adalah saran untuk program yang dapat Anda terapkan:
-
-Anda memiliki satu set siswa dari dua sistem penilaian yang berbeda.
-
-### Sistem Layanan pertama
-
-Satu sistem didefinisikan sebagai nilai dari 1-5 di mana 3 ke atas berarti Anda lulus kursus.
-
-### Sistem Produk kedua
-
-Sistem nilai lain memiliki nilai berikut `A, A-, B, B-, C, C-` di mana `A` adalah nilai tertinggi dan `C` adalah nilai kelulusan terendah.
-
-### Tugas
-
-Diberikan array `semuaPelajar` yang mewakili semua siswa dan nilai, buat array baru `pelajarYangLulus` yang berisi semua siswa yang lulus.
-
-> TIPS, gunakan for-loop dan if ... else dan operator perbandingan:
-
-```javascript
-let semuaPelajar = [
-  'A',
-  'B-'
-  1,
-  4
-  5,
-  2
-]
-
-let pelajarYangLulus = [];
-```
-
-## Rubrik
-
-| Kriteria | Contoh                   | Memenuhi                       | Perlu Perbaikan             |
-| -------- | ------------------------ | ------------------------------ | --------------------------- |
-|          | Solusi lengkap disajikan | Solusi tidak lengkap disajikan | Solusi dengan bug disajikan |
diff --git a/2-js-basics/3-making-decisions/translations/assignment.it.md b/2-js-basics/3-making-decisions/translations/assignment.it.md
deleted file mode 100644
index 01bacd13..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.it.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Operatori
-
-## Istruzioni
-
-Giocare con gli operatori. Ecco un suggerimento per un programma che si potrebbe implementare:
-
-Ci sono due gruppi di studenti per due diversi sistemi di graduatoria.
-
-### Primo sistema di graduatoria
-
-Un sistema di graduatoria è definito da voti che vanno da 1 a 5 dove 3 e superiore significa che la prova è stata completata con successo.
-
-### Secondo sistema di graduatoria
-
-L'altro sistema di graduatoria ha i seguenti valori di giudizio: `A, A-, B, B-, C, C-` dove `A` è il giudizio migliore e `C` il giudizio minimo per superare la prova.
-
-### Il compito
-
-Dato l'array seguente `allStudents` rappresentare tutti gli studenti e le loro valutazioni, costruire un nuvo array `studentsWhoPass` che contiene tutti gli studenti che hanno superato la prova.
-
-> SUGGERIMENTO, usare un ciclo for, if...else e gli operatori di confronto:
-
-```javascript
-let allStudents = [
-  'A',
-  'B-',
-  1,
-  4,
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## Rubrica
-
-| Criterio | Eccellente                      | Sufficiente                      | Necessita Miglioramenti               |
-| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
-|          | Viene presentata la soluzione completa | Viene presentata la soluzione parziale | La soluzione presentata ha bug |
\ No newline at end of file
diff --git a/2-js-basics/3-making-decisions/translations/assignment.ja.md b/2-js-basics/3-making-decisions/translations/assignment.ja.md
deleted file mode 100644
index 9a27828e..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.ja.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# 演算子
-
-## 説明書
-
-演算子で遊んでみる。あなたが実装できるプログラムの提案です。
-
-あなたは2つの異なる成績評価システムの学生のセットを持っています。
-
-### ファーストグレーディングシステム
-
-1つの成績評価システムは、1～5までの成績で、3以上の成績は合格を意味すると定義されています。
-
-### セカンドグレーディングシステム
-
-もう一つのグレードシステムは、`A, A-, B, B-, C, C-` というグレードがあり、`A` が最高グレード、`C` が最低合格グレードです。
-
-### タスク
-
-すべての学生とその成績を表す以下の配列 `allStudents` が与えられた場合、合格した学生を含む新しい配列 `studentsWhoPass` を作成します。
-
-> ヒント: for ループと if...else と比較演算子を使用します。
-
-```javascript
-let allStudents = [
-  'A',
-  'B-'
-  1,
-  4
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## ルーブリック
-
-| 基準 | 模範的な例                      | 適切な                      | 改善が必要               |
-| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
-|          | 完全なソリューションを提示 | 部分的な解決策を提示 | バグがある解決策を提示 |
diff --git a/2-js-basics/3-making-decisions/translations/assignment.ko.md b/2-js-basics/3-making-decisions/translations/assignment.ko.md
deleted file mode 100644
index d41ab565..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.ko.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# 연산자
-
-## 설명
-
-연산자를 연습해봅니다. 여러분이 구현해볼 만한 프로그램을 제안해 드립니다.
-
-서로 다른 방식으로 등급을 매기는 두 개의 시스템과 그 시스템에 속한 학생들이 있습니다.
-
-### 첫번째 등급 시스템
-
-이 등급 시스템은 1-5점으로 등급을 나눕니다. 3점 이상이면 과정을 통과했다는 의미입니다.
-
-### 두번째 등급 시스템
-
-다른 등급 시스템은 `A, A-, B, B-, C, C-` 등급이 있습니다. `A`가 가장 높은 등급이고 `C`가 가장 낮은 등급입니다.
-
-### 과제
-
-학생들과 그들의 등급의 정보가 담긴 배열 `allStudents` 이 주어집니다. 과정을 통과한 학생들을 담은 새로운 배열 `studentsWhoPass`을 만들어 주시면 됩니다.
-
-> 팁, for-loop, if...else 그리고 비교 연산자를 사용해 보시기 바랍니다.
-
-```javascript
-let allStudents = [
-  'A',
-  'B-',
-  1,
-  4,
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 완전히 정답인 경우 | 부분적으로 정답인 경우 | 버그가 있는 경우
diff --git a/2-js-basics/3-making-decisions/translations/assignment.ms.md b/2-js-basics/3-making-decisions/translations/assignment.ms.md
deleted file mode 100644
index a1efb055..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.ms.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Pengendali
-
-## Arahan
-
-Main dengan pengendali. Berikut adalah cadangan untuk program yang boleh anda laksanakan:
-
-Anda mempunyai sekumpulan pelajar dari dua sistem penggredan yang berbeza.
-
-### Sistem penggredan pertama
-
-Sistem penggredan pertama ditakrifkan sebagai gred dari 1-5 di mana 3 dan ke atas bermaksud anda lulus kursus.
-
-### Sistem penggredan kedua
-
-Sistem gred lain mempunyai gred berikut `A, A-, B, B-, C, C-` di mana `A` adalah gred teratas dan` C` adalah gred lulus terendah.
-
-### Tugasan
-
-Memandangkan susunan berikut `allStudents` yang mewakili semua pelajar dan gred mereka, bina array baru` studentsWhoPass` yang mengandungi semua pelajar yang lulus.
-
-> TIP, gunakan (for-loop) dan  (if...else) dan perbandingan pengendali:
-
-```javascript
-let allStudents = [
-  'A',
-  'B-',
-  1,
-  4,
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## Rubrik
-
-| Kriteria | Contoh                      | Mencukupi                      | Usaha Lagi              |
-| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
-|          | Penyelesaian lengkap dikemukakan | Penyelesaian separuh dikemukakan | Penyelesaian dengan pepijat dikemukakan |
\ No newline at end of file
diff --git a/2-js-basics/3-making-decisions/translations/assignment.nl.md b/2-js-basics/3-making-decisions/translations/assignment.nl.md
deleted file mode 100644
index 5e4993d7..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.nl.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Operatoren
-
-## Instructies
-
-Speel met operatoren. Hier is een suggestie voor een programma dat u kunt implementeren:
-
-U hebt een groep studenten uit twee verschillende beoordelingssystemen.
-
-### Eerste beoordelingssysteem
-
-Een beoordelingssysteem wordt gedefinieerd met cijfers van 1-5, waarbij 3 en hoger betekent dat u slaagt voor de cursus.
-
-### Tweede beoordelingssysteem
-
-Het andere cijfer systeem heeft de volgende cijfers `A, A-, B, B-, C, C-` waarbij `A` het hoogste cijfer is en `C` het laagste voldoende is.
-
-### De taak
-
-Gegeven de volgende array `allStudents` die alle studenten en hun cijfers vertegenwoordigt, construeert u een nieuwe array `studentsWhoPass` met daarin alle studenten die slagen.
-
-> TIP, gebruik een for-loop, if...else en vergelijkingsoperatoren:
-
-```javascript
-let allStudents = [
-  'A',
-  'B-',
-  1,
-  4,
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## Rubriek
-
-| Criteria | Voorbeeldig                      | Voldoende                      | Moet worden verbeterd               |
-| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
-|          | De complete oplossing wordt gepresenteerd | Gedeeltelijke oplossing wordt gepresenteerd | Oplossing met bugs wordt gepresenteerd |
diff --git a/2-js-basics/3-making-decisions/translations/assignment.pt.md b/2-js-basics/3-making-decisions/translations/assignment.pt.md
deleted file mode 100644
index 1d495c5b..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.pt.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Operadores
-
-## Instruções
-
-Brinque com os operadores. Aqui está uma sugestão para um programa que você pode implementar:
-
-Você tem um conjunto de alunos de dois sistemas de notas diferentes.
-
-### Primeiro sistema de notas
-
-Um sistema de notas é definido como notas de 1 a 5, onde 3 e acima significa que você passou no curso.
-
-### Segundo sistema de notas
-
-O outro sistema de notas tem as seguintes notas `A, A-, B, B-, C, C-` onde `A` é a nota mais alta e` C` é a nota mais baixa para passar.
-
-### A tarefa
-
-Dado o seguinte array `allStudents` representando todos os alunos e suas notas, construa um novo array` studentsWhoPass` contendo todos os alunos que passam.
-
-> DICA, use um loop for e if ... else e operadores de comparação:
-
-```javascript
-let allStudents = [
-  'A',
-  'B-',
-  1,
-  4,
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## Rubrica
-
-| Critério | Exemplar                      | Adequada                      | Precisa de melhorias               |
-| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
-|          | A solução completa foi apresentada | A solução parcial foi apresentada | A solução foi apresentada com bugs |
diff --git a/2-js-basics/3-making-decisions/translations/assignment.zh-cn.md b/2-js-basics/3-making-decisions/translations/assignment.zh-cn.md
deleted file mode 100644
index 8b985d5c..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.zh-cn.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# 运算符
-
-## 说明
-
-玩转运算符。这里有一个你可以尝试去实现的程序的建议：
-
-你有一群来自两种不同评分系统的学生。
-
-### 第一种评分系统
-
-一种评分系统的分数范围是 1-5，其中 3 及以上代表合格。
-
-### 第二种评分系统
-
-另一种评分系统有这些分数：`A, A-, B, B-, C, C-`，其中 `A` 是最好的分数，`C` 是最低的合格分数。
-
-### 任务
-
-有下方数组 `allStudents`，表示所有学生和它们的分数，构造一个包含所有合格的学生的新数组 `studentWhoPass`。
-
-> 提示：可利用 for 循环、if...else 语句和比较运算符
-
-```javascript
-let allStudents = [
-  'A',
-  'B-',
-  1,
-  4,
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## 评价表
-
-| 指标 | 优秀 | 良好 | 尚可进步 |
-| --- | --- | --- | --- |
-| | 给出了完整解答 | 给出了部分解答 | 解答中存在 Bug |
diff --git a/2-js-basics/3-making-decisions/translations/assignment.zh-tw.md b/2-js-basics/3-making-decisions/translations/assignment.zh-tw.md
deleted file mode 100644
index 0746abe3..00000000
--- a/2-js-basics/3-making-decisions/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,41 +0,0 @@
-# 運算子
-
-## 簡介
-
-把玩並熟悉運算子。以下是建議的練習程式模板：
-
-你有兩套提供給同一組學生的成績系統。
-
-### 第一套成績系統
-
-定義分數為 1 到 5。當分數 3 以上時通過測驗。
-
-### 第二套成績系統
-
-定義分數為 `A, A-, B, B-, C, C-`， `A` 為最高分而 `C` 為最低分，皆為通過測驗。
-
-### 課題
-
-使用下列矩陣 `allStudents` 表示所有學生的成績，試著建立新的矩陣 `studentsWhoPass` 包含所有通過學生的編號。
-
-> 提示，使用 for-loop 迴圈、 if...else 條件式與比較運算子：
-
-```javascript
-let allStudents = [
-  'A',
-  'B-',
-  1,
-  4,
-  5,
-  2
-]
-
-let studentsWhoPass = [];
-```
-
-## 學習評量
-
-| 作業內容 | 優良                   | 普通                     | 待改進     |
-| -------- | ---------------------- | ------------------------ | ---------- |
-|          | 提供完整的解答與解釋。 | 只提供部分的解答與解釋。 | 解答有誤。 |
-
diff --git a/2-js-basics/4-arrays-loops/translations/README.de.md b/2-js-basics/4-arrays-loops/translations/README.de.md
deleted file mode 100644
index a9cf28e4..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.de.md
+++ /dev/null
@@ -1,129 +0,0 @@
-# JavaScript-Grundlagen: Arrays und Loops
-
-
-[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
-[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
-
-
-## [Pre-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
-
-Diese Lektion behandelt die Grundlagen von JavaScript, der Sprache, die Interaktivität im Web bietet. In dieser Lektion lernen Sie Arrays und Loops kennen, mit denen Daten bearbeitet werden.
-
-## Arrays
-
-Das Arbeiten mit Daten ist eine häufige Aufgabe für jede Sprache und eine viel einfachere Aufgabe, wenn Daten in einem strukturellen Format wie Arrays organisiert sind. Bei Arrays werden Daten in einer Struktur ähnlich einer Liste gespeichert. Ein Hauptvorteil von Arrays besteht darin, dass Sie verschiedene Datentypen in einem Array speichern können.
-
-✅ Arrays sind überall um uns herum! Können Sie sich ein reales Beispiel für ein Array vorstellen, beispielsweise ein Solarpanel-Array?
-
-Die Syntax für ein Array besteht aus zwei eckigen Klammern.
-
-```javascript
-let myArray = [];
-```
-
-Dies ist ein leeres Array, aber Arrays können als bereits mit Daten gefüllt deklariert werden. Mehrere Werte in einem Array werden durch ein Komma getrennt.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-Den Array-Werten wird ein eindeutiger Wert zugewiesen, der als **Index** bezeichnet wird. Diese ganze Zahl wird basierend auf dem Abstand vom Anfang des Arrays zugewiesen. Im obigen Beispiel hat der Zeichenfolgenwert "Chocolate" den Index 0 und der Index "Rocky Road" den Wert 4. Verwenden Sie den Index in eckigen Klammern, um Array-Werte abzurufen, zu ändern oder einzufügen.
-
-✅ Überrascht es Sie, dass Arrays am Nullindex beginnen? In einigen Programmiersprachen beginnen die Indizes bei 1. Es gibt eine interessante Geschichte, die Sie [auf Wikipedia lesen](https://en.wikipedia.org/wiki/Zero-based_numbering) können.
-
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
-
-Sie können den Index nutzen, um einen Wert wie folgt zu ändern:
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //ändert "Rocky Road" in "Butter Pecan"
-```
-
-And you can insert a new value at a given index like this:
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //"Cookie Dough" hinzugefügt
-```
-
-
-✅ Eine häufigere Methode zum Übertragen von Werten in ein Array ist die Verwendung von Array-Operatoren wie array.push()
-
-Verwenden Sie die Eigenschaft `length`, um herauszufinden, wie viele Elemente sich in einem Array befinden.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
-```
-
-✅ Probieren Sie es aus! Verwenden Sie die Konsole Ihres Browsers, um ein Array Ihrer eigenen Erstellung zu erstellen und zu bearbeiten.
-
-## Schleifen
-
-Schleifen ermöglichen sich wiederholende oder **iterative** Aufgaben und können viel Zeit und Code sparen. Jede Iteration kann in ihren Variablen, Werten und Bedingungen variieren. Es gibt verschiedene Arten von Schleifen in JavaScript, und sie weisen kleine Unterschiede auf, tun jedoch im Wesentlichen dasselbe: Schleifen über Daten.
-
-### For Loop
-
-Die `for`-Schleife benötigt 3 Teile, um zu iterieren:
-     - `counter` Eine Variable, die normalerweise mit einer Zahl initialisiert wird, die die Anzahl der Iterationen zählt.
-     - `condition` Ausdruck, der Vergleichsoperatoren verwendet, um zu bewirken, dass die Schleife stoppt, wenn `true`
-     - `iteration-expression` Wird am Ende jeder Iteration ausgeführt und normalerweise zum Ändern des Zählerwerts verwendet
-  
-```javascript
-// Counting up to 10
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ Führen Sie diesen Code in einer Browserkonsole aus. Was passiert, wenn Sie kleine Änderungen am Zähler, der Bedingung oder dem Iterationsausdruck vornehmen? Können Sie es rückwärts laufen lassen und einen Countdown erstellen?
-
-### While-Schleife
-
-Im Gegensatz zur Syntax für die `for` -Schleife erfordern `while`-Schleifen nur eine Bedingung, die die Schleife stoppt, wenn `true`. Bedingungen in Schleifen hängen normalerweise von anderen Werten wie Zählern ab und müssen während der Schleife verwaltet werden. Startwerte für Zähler müssen außerhalb der Schleife erstellt werden, und alle Ausdrücke, die eine Bedingung erfüllen, einschließlich des Änderns des Zählers, müssen innerhalb der Schleife beibehalten werden.
-
-
-```javascript
-//Counting up to 10
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ Warum sollten Sie eine for-Schleife oder eine while-Schleife wählen? 17.000 Zuschauer hatten dieselbe Frage zu StackOverflow und einige der Meinungen [könnten für Sie interessant sein](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
-
-## Schleifen und Arrays
-
-Arrays werden häufig mit Schleifen verwendet, da die meisten Bedingungen die Länge des Arrays erfordern, um die Schleife zu stoppen, und der Index auch der Zählerwert sein kann.
-
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} //Endet, wenn alle Geschmacksrichtungen gedruckt sind
-```
-
-✅ Experimentieren Sie mit dem Durchlaufen eines Arrays, das Sie selbst erstellt haben, in der Konsole Ihres Browsers.
-
----
-
-## 🚀 Herausforderung
-
-Es gibt andere Möglichkeiten, Arrays als for- und while-Schleifen zu durchlaufen. Es gibt [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) und [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Schreiben Sie Ihre Array-Schleife mit einer dieser Techniken neu.
-
-## [Quiz nach der Vorlesung](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
-
-## Review & Selbststudium
-
-An Arrays in JavaScript sind viele Methoden angehängt, die für die Datenmanipulation äußerst nützlich sind. [Informieren Sie sich über diese Methoden](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) und probieren Sie einige davon aus (wie Push, Pop, Slice und Splice). auf einem Array Ihrer Kreation.
-
-## Zuordnung
-
-[Array schleifen](assignment.de.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.es.md b/2-js-basics/4-arrays-loops/translations/README.es.md
deleted file mode 100644
index 760b6650..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.es.md
+++ /dev/null
@@ -1,122 +0,0 @@
-# Conceptos básicos de JavaScript: matrices y bucles
-
-![JavaScript Basics - Arrays](/sketchnotes/webdev101-js-arrays.png)
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-
-[![Matrices](https://img.youtube.com/vi/4o64A0IewZ4/0.jpg)](https://youtube.com/watch?v=4o64A0IewZ4 "Matrices")
-[![Bucles](https://img.youtube.com/vi/9mDkAALcX9o/0.jpg)](https://www.youtube.com/watch?v=9mDkAALcX9o "Bucles")
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
-
-Esta lección cubre los conceptos básicos de JavaScript, el lenguaje que proporciona interactividad en la web. En esta lección, aprenderá sobre matrices y bucles, que se utilizan para manipular datos.
-
-## Matrices
-
-Trabajar con datos es una tarea común para cualquier lenguaje y es una tarea mucho más fácil cuando los datos están organizados en un formato estructural, como matrices. Con las matrices, los datos se almacenan en una estructura similar a una lista. Uno de los principales beneficios de las matrices es que puede almacenar diferentes tipos de datos en una matriz.
-
-✅ ¡Las matrices están a nuestro alrededor! ¿Puede pensar en un ejemplo de la vida real de una matriz, como una matriz de paneles solares?
-
-La sintaxis de una matriz es un par de corchetes.
-
-```javascript
-let myArray = [];
-```
-
-Esta es una matriz vacía, pero las matrices se pueden declarar ya pobladas con datos. Varios valores en una matriz están separados por una coma.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-A los valores de la matriz se les asigna un valor único llamado **índice**, un número entero que se asigna en función de su distancia desde el principio de la matriz. En el ejemplo anterior, el valor de cadena "Chocolate" tiene un índice de 0 y el índice de "Rocky Road" es 4. Utilice el índice entre corchetes para recuperar, cambiar o insertar valores de matriz.
-
-✅ ¿Le sorprende que las matrices comiencen en el índice cero? En algunos lenguajes de programación, los índices comienzan en 1. Hay una historia interesante en torno a esto, que puedes [leer en Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
-
-Puede aprovechar el índice para cambiar un valor, como este:
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //Se cambió "Rocky Road" a "Butter Pecan"
-```
-
-Y puede insertar un nuevo valor en un índice dado como este:
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //Añadida "Cookie Dough"
-```
-
-✅ Una forma más común de enviar valores a una matriz es mediante el uso de operadores de matriz como array.push()
-
-Para saber cuántos elementos hay en una matriz, use la propiedad `length`.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
-```
-
-✅ ¡Inténtalo tú mismo! Utilice la consola de su navegador para crear y manipular una matriz de su propia creación.
-
-## Bucles
-
-Los bucles permiten tareas repetitivas o **iterativas** y pueden ahorrar mucho tiempo y código. Cada iteración puede variar en sus variables, valores y condiciones. Hay diferentes tipos de bucles en JavaScript y tienen pequeñas diferencias, pero esencialmente hacen lo mismo: bucles sobre datos.
-
-### En bucle
-
-El ciclo `for` requiere 3 partes para iterar:
-     - `counter` Una variable que normalmente se inicializa con un número que cuenta el número de iteraciones.
-     - `condition` Expresión que usa operadores de comparación para hacer que el bucle se detenga cuando `true`
-     - `iteration-expression` Se ejecuta al final de cada iteración, generalmente se usa para cambiar el valor del contador
-
-  
-```javascript
-// Contando hasta 10
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ Ejecute este código en una consola de navegador. ¿Qué sucede cuando realiza pequeños cambios en el contador, la condición o la expresión de iteración? ¿Puedes hacer que corra al revés, creando una cuenta regresiva?
-
-### Bucle while
-
-A diferencia de la sintaxis para el ciclo `for`, los ciclos `while` solo requieren una condición que detendrá el ciclo cuando sea `true`. Las condiciones en los bucles suelen depender de otros valores, como contadores, y deben gestionarse durante el bucle. Los valores iniciales para los contadores deben crearse fuera del ciclo, y cualquier expresión que cumpla una condición, incluido el cambio del contador, debe mantenerse dentro del ciclo.
-
-```javascript
-//Contando hasta 10
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ ¿Por qué elegiría un bucle for frente a un bucle while? 17K espectadores tenían la misma pregunta sobre StackOverflow, y algunas de las opiniones [podrían ser interesantes para usted](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
-
-## Bucles y matrices
-
-Las matrices se utilizan a menudo con bucles porque la mayoría de las condiciones requieren la longitud de la matriz para detener el bucle, y el índice también puede ser el valor del contador.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} //Termina cuando se imprimen todos los sabores
-```
-
-✅ Experimente recorriendo una serie de su propia creación en la consola de su navegador.
-
-🚀 Desafío: Hay otras formas de realizar un bucle sobre arreglos además de los bucles for y while. Existen [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), y [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Vuelva a escribir su bucle de matriz utilizando una de estas técnicas.
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
-
-## Revisión y autoestudio
-
-Las matrices en JavaScript tienen muchos métodos adjuntos, extremadamente útiles para la manipulación de datos. [Lea sobre estos métodos](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) y pruebe algunos de ellos (como push, pop, slice y splice) en una matriz de su creación.
-
-**Asignación**: [Bucle de una matriz](assignment.es.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.fr.md b/2-js-basics/4-arrays-loops/translations/README.fr.md
deleted file mode 100644
index 9485e811..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.fr.md
+++ /dev/null
@@ -1,131 +0,0 @@
-# Principes de base de JavaScript : tableaux et boucles
-
-![Principes de base de JavaScript - Les tableaux](/sketchnotes/webdev101-js-arrays.png)
-> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz préalable
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=fr)
-
-Cette leçon couvre les bases de JavaScript, le langage qui offre de l'interactivité sur le Web. Dans cette leçon, vous découvrirez les tableaux et les boucles, qui sont utilisés pour manipuler des données.
-
-[![Les tableaux](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Les tableaux")
-[![Les boucles](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Les boucles")
-> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les tableaux et les boucles.
-
-> Vous pouvez suivre cette leçon sur [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
-## Les tableaux
-
-Travailler avec des données est une tâche courante pour n'importe quel langage, et c'est une tâche beaucoup plus facile lorsque les données sont organisées dans un format structurel, tel que des tableaux. Avec les tableaux, les données sont stockées dans une structure similaire à une liste. L'un des principaux avantages des tableaux est que vous pouvez stocker différents types de données dans un seul tableau.
-
-✅ Les tableaux sont partout autour de nous ! Pouvez-vous penser à un exemple réel d'un tableau, tel qu'un tableau de panneaux solaires ?
-
-La syntaxe d'un tableau est une paire de crochets.
-
-```javascript
-let myArray = [];
-```
-
-Il s'agit d'un tableau vide, mais les tableaux peuvent être déclarés déjà remplis de données. Plusieurs valeurs d'un tableau sont séparées par une virgule.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-Les valeurs du tableau se voient attribuer une valeur unique appelée **index**, un nombre entier attribué en fonction de sa distance depuis le début du tableau. Dans l'exemple ci-dessus, la valeur de chaîne "Chocolate" a un index de 0 et l'index de "Rocky Road" est de 4. Utilisez l'index avec des crochets pour récupérer, modifier ou insérer des valeurs de tableau.
-
-✅ Cela vous surprend-il que les tableaux commencent à l'index zéro ? Dans certains langages de programmation, les index commencent à 1. Il y a une histoire intéressante à ce sujet, que vous pouvez [lire sur Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
-
-Vous pouvez utiliser l'index pour modifier une valeur, comme ceci :
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //Changement de "Rocky Road" par "Butter Pecan"
-```
-
-Et vous pouvez insérer une nouvelle valeur à un index donné comme ceci :
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //Ajout de "Cookie Dough"
-```
-
-✅ Un moyen plus courant de pousser des valeurs vers un tableau consiste à utiliser des opérateurs de tableau tels que array.push()
-
-Pour savoir combien d'éléments se trouvent dans un tableau, utilisez la propriété `length`.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
-```
-
-✅ Essayez-le vous-même ! Utilisez la console de votre navigateur pour créer et manipuler un tableau de votre propre création.
-
-## Les boucles
-
-Les boucles permettent des tâches répétitives ou **itératives**, et peuvent économiser beaucoup de temps et de code. Chaque itération peut varier dans ses variables, valeurs et conditions. Il existe différents types de boucles en JavaScript, et elles ont de petites différences, mais font essentiellement la même chose : boucler sur des données.
-
-### La boucle For
-
-La boucle `for` nécessite 3 parties pour itérer :
-    - `un compteur` Une variable qui est généralement initialisée avec un nombre qui compte le nombre d'itérations.
-    - `une condition` Expression qui utilise des opérateurs de comparaison pour provoquer l'arrêt de la boucle lorsque `true`
-    - `une expression d'itération` S'exécute à la fin de chaque itération, généralement utilisé pour modifier la valeur du compteur
-  
-```javascript
-// Compter jusqu'à 10
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ Exécutez ce code dans une console de navigateur. Que se passe-t-il lorsque vous apportez de petites modifications au compteur, à la condition ou à l'expression d'itération ? Pouvez-vous le faire fonctionner à l'envers, en créant un compte à rebours ?
-
-### La boucle While
-
-Contrairement à la syntaxe de la boucle `for`, les boucles `while` ne nécessitent qu'une condition qui arrête la boucle lorsqu'elle est `true` (vrai). Les conditions dans les boucles reposent généralement sur d'autres valeurs telles que les compteurs et doivent être gérées pendant la boucle. Les valeurs de départ des compteurs doivent être créées en dehors de la boucle, et toutes les expressions répondant à une condition, y compris la modification du compteur, doivent être conservées à l'intérieur de la boucle.
-
-```javascript
-//Compter jusqu'à 10
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ Pourquoi choisiriez-vous une boucle for par rapport à une boucle while? 17K téléspectateurs ont eu la même question sur StackOverflow, et certaines des opinions [pourraient être intéressantes pour vous](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
-
-## Les boucles et les tableaux
-
-Les tableaux sont souvent utilisés avec des boucles car la plupart des conditions nécessitent la longueur du tableau pour arrêter la boucle, et l'index peut également être la valeur du compteur.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} //Se termine lorsque toutes les saveurs sont imprimées
-```
-
-✅ Exercez vous avec une boucle sur un tableau créé par vos soins dans la console de votre navigateur. 
-
----
-
-## 🚀 Défi
-
-Il existe d'autres façons d'itérer sur des tableaux autres que les boucles for et while. Il y a [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), et [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Réécrivez votre boucle de tableau en utilisant l'une de ces techniques.
-
-## Quiz de validation des connaissances
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=fr)
-
-
-## Révision et étude personnelle
-
-Les tableaux en JavaScript ont de nombreuses méthodes qui leur sont attachées, extrêmement utiles pour la manipulation de données. [Lisez ces méthodes](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) et essayez certaines d'entre elles (comme push, pop, slice et splice) sur un tableau de votre création.
-
-## Affectation
-
-[Boucler un tableau](assignment.fr.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.hi.md b/2-js-basics/4-arrays-loops/translations/README.hi.md
deleted file mode 100644
index 8abd0280..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.hi.md
+++ /dev/null
@@ -1,130 +0,0 @@
-# जावास्क्रिप्ट मूल बातें: ऐरे और लूप्स
-
-![जावास्क्रिप्ट मूल बातें - एरेस ](/sketchnotes/webdev101-js-arrays.png)
-> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=hi)
-
-इस पाठ में जावास्क्रिप्ट की मूल बातें शामिल हैं, वह भाषा जो वेब पर अन्तरक्रियाशीलता प्रदान करती है। इस पाठ में, आप ऐरे और लूप्स के बारे में जानेंगे, जिनका उपयोग डेटा में हेरफेर करने के लिए किया जाता है।
-
-[![ऐरे](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "ऐरे")
-[![लूप्स](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "लूप्स")
-
-> ऐरे और लूप्स के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
-## एरेस
-
-डेटा के साथ काम करना किसी भी भाषा के लिए एक सामान्य कार्य है, और यह एक बहुत आसान काम है जब डेटा को एक संरचनात्मक प्रारूप में व्यवस्थित किया जाता है, जैसे कि सरणियाँ। एरेस के साथ, डेटा को एक सूची के समान संरचना में संग्रहीत किया जाता है। सरणियों का एक प्रमुख लाभ यह है कि आप विभिन्न प्रकार के डेटा को एक सरणी में संग्रहीत कर सकते हैं।
-
-✅ हमारे चारों तरफ ऐरे हैं! क्या आप किसी सरणी के वास्तविक जीवन के उदाहरण के बारे में सोच सकते हैं, जैसे कि सौर पैनल एरे?
-
-एक एरे के लिए सिंटेक्स वर्ग कोष्ठक की एक जोड़ी है।
-
-```javascript
-let myArray = [];
-```
-
-यह एक खाली एरे है, लेकिन एरेस को पहले से ही डेटा के साथ आबाद घोषित किया जा सकता है। एक एरे में एकाधिक मान अल्पविराम द्वारा अलग किए गए हैं।
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-एरे मानों को एक अद्वितीय मान दिया जाता है जिसे **सूचकांक** कहा जाता है, एक पूरी संख्या जो कि एरे की शुरुआत से इसकी दूरी के आधार पर निर्दिष्ट की जाती है। ऊपर के उदाहरण में, स्ट्रिंग मूल्य "चॉकलेट" में 0 का सूचकांक है, और "रॉकी ​​रोड" का सूचकांक है। 4. एरे मानों को पुनः प्राप्त करने, बदलने या सम्मिलित करने के लिए वर्ग कोष्ठक के साथ सूचकांक का उपयोग करें।
-
-✅ क्या यह आपको आश्चर्यचकित करता है कि एरेस शून्य सूचकांक पर शुरू होती हैं? कुछ प्रोग्रामिंग भाषाओं में, अनुक्रमित 1 से शुरू होते हैं। इसके आसपास एक दिलचस्प इतिहास है, जिसे आप [विकिपीडिया पर पढ़ सकते हैं] (https://en.wikipedia.org/wiki/Zero-based_numbering)।
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
-
-आप इस तरह से मूल्य बदलने के लिए सूचकांक का लाभ उठा सकते हैं:
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
-```
-
-और आप किसी दिए गए इंडेक्स में इस तरह से एक नया मान सम्मिलित कर सकते हैं:
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
-```
-
-✅ एरे संचालकों के लिए मानों को धकेलने का एक अधिक सामान्य तरीका है सरणी संचालक जैसे array.push() का उपयोग करना
-
-एक एरे में कितने आइटम हैं, यह जानने के लिए `length` संपत्ति का उपयोग करें।
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
-```
-
-✅ इसे स्वयं आज़माएं! अपने खुद के निर्माण की एक सरणी बनाने और हेरफेर करने के लिए अपने ब्राउज़र के कंसोल का उपयोग करें।
-
-## लुपस
-
-लूप पुनरावृत्ति या **पुनरावृत्त** कार्यों के लिए अनुमति देते हैं, और बहुत समय और कोड बचा सकते हैं। प्रत्येक पुनरावृत्ति उनके वेरीअबल, मूल्यों और स्थितियों में भिन्न हो सकती है। जावास्क्रिप्ट में विभिन्न प्रकार के लूप हैं, और उनके बीच छोटे अंतर हैं, लेकिन अनिवार्य रूप से एक ही काम करते हैं: डेटा पर लूप।
-
-### फॉर लूप
-
-`For` लूप को पुनरावृति के लिए 3 भागों की आवश्यकता होती है:
-    - `counter` एक वैरिएबल है जिसे आमतौर पर एक संख्या के साथ आरंभीकृत किया जाता है जो पुनरावृत्तियों की संख्या को गिनता है।
-    - `condition` अभिव्यक्ति कि तुलना ऑपरेटरों का उपयोग करता है जब लूप को रोकने का कारण होता है `true`
-    - `iteration-expression` प्रत्येक पुनरावृत्ति के अंत में चलता है, आमतौर पर काउंटर मान को बदलने के लिए उपयोग किया जाता है
-  
-```javascript
-// Counting up to 10
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ इस कोड को ब्राउज़र कंसोल में चलाएं। जब आप काउंटर, स्थिति या पुनरावृत्ति अभिव्यक्ति में छोटे बदलाव करते हैं तो क्या होता है? क्या आप उल्टी गिनती बनाकर इसे पीछे की ओर चला सकते हैं?
-
-### व्हाइल लूप
-
-`for` लूप के लिए सिंटैक्स के विपरीत, `वाइल` लूप्स को केवल एक शर्त की आवश्यकता होती है जो लूप को रोक देगा जब `true` होगा। लूप में स्थितियां आमतौर पर काउंटर जैसे अन्य मूल्यों पर निर्भर करती हैं, और लूप के दौरान प्रबंधित की जानी चाहिए। काउंटर के लिए मान शुरू करना लूप के बाहर बनाया जाना चाहिए, और किसी भी स्थिति को पूरा करने के लिए किसी भी भाव सहित, काउंटर को लूप के अंदर बनाए रखा जाना चाहिए।
-
-```javascript
-//Counting up to 10
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ आप एक फॉर लूप और वाइल लूप क्यों चुनेंगे? 17K दर्शकों का StackOverflow पर एक ही सवाल था, और कुछ राय [आपके लिए दिलचस्प हो सकती है](https://stackoverflow.com/questions/39969145/ORE-loops-vs-for-loops-in-javascript)
-
-## लूपस और अररेस
-
-अररेस अक्सर लूपस के साथ उपयोग किया जाता है क्योंकि अधिकांश स्थितियों में लूप को रोकने के लिए अरै की लंबाई की आवश्यकता होती है, और सूचकांक भी काउंटर मूल्य हो सकता है।
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} //Ends when all flavors are printed
-```
-
-✅ अपने ब्राउजर के कंसोल में अपनी खुद की मेकिंग पर लूपिंग के साथ प्रयोग करें।
-
----
-
-## 🚀 चुनौती
-
-लूप के अलावा और अन्य अररेस पर लूपिंग के अन्य तरीके हैं। [ForEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web) हैं /JavaScript/Reference/Statements/for...of), और [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Anray/map)। इन तकनीकों में से किसी एक का उपयोग करके अपने ऐरे लूप को फिर से लिखें।
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=hi)
-
-
-## समीक्षा और स्व अध्ययन
-
-जावास्क्रिप्ट में ऐरे के पास कई तरीके हैं, जो डेटा हेरफेर के लिए बेहद उपयोगी हैं। [इन तरीकों को पढ़ें](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) और उनमें से कुछ को आज़माएं (जैसे पुश, पॉप, स्लाइस और एसप्लाइस) आपकी रचना पे।
-
-## असाइनमेंट
-
-[एक अरै लूप](assignment.hi.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.id.md b/2-js-basics/4-arrays-loops/translations/README.id.md
deleted file mode 100644
index a6f95c1c..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.id.md
+++ /dev/null
@@ -1,148 +0,0 @@
-# Dasar-dasar JavaScript: Array dan Loop
-
-![Dasar-dasar JavaScript - Array](/sketchnotes/webdev101-js-arrays.png)
-
-> Sketsa oleh [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuis Pra-Kuliah
-
-[Kuis pra-Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=id)
-
-Pelajaran ini mencakup dasar-dasar JavaScript, bahasa yang menyediakan interaktivitas di web. Dalam pelajaran ini, Anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data.
-
-
-[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays")
-[![Loop](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loop")
-
-
-## Array
-
-Bekerja dengan data adalah tugas umum untuk bahasa apa pun, dan ini jauh lebih mudah saat data diatur dalam format struktural, seperti array. Dengan array, data disimpan dalam struktur yang mirip dengan daftar. Salah satu manfaat utama dari array adalah Anda dapat menyimpan berbagai jenis data dalam satu array.
-
-✅ Array ada di sekitar kita! Dapatkah Anda memikirkan contoh array dalam kehidupan nyata, seperti array panel surya?
-
-Sintaks untuk array adalah sepasang tanda kurung siku.
-
-```javascript
-let arrayKu = [];
-```
-
-Ini adalah array kosong, tetapi array dapat dideklarasikan sudah diisi dengan data. Beberapa nilai dalam array dipisahkan dengan koma.
-
-```javascript
-let rasaRasaEsKrim = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-Nilai array diberi nilai unik yang disebut **indeks**, bilangan bulat yang ditetapkan berdasarkan jaraknya dari awal array. Dalam contoh di atas, nilai string "Chocolate" memiliki indeks 0, dan indeks "Rocky Road" adalah 4. Gunakan indeks dengan tanda kurung siku untuk mengambil, mengubah, atau menyisipkan nilai array.
-
-✅ Apakah Anda terkejut bahwa array mulai dari indeks nol? Dalam beberapa bahasa pemrograman, indeks dimulai dari 1. Ada sejarah menarik seputar ini, yang dapat Anda [baca di Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
-
-```javascript
-let rasaRasaEsKrim = [
-  "Chocolate",
-  "Strawberry",
-  "Vanilla",
-  "Pistachio",
-  "Rocky Road",
-];
-rasaRasaEsKrim[2]; //"Vanilla"
-```
-
-Anda dapat memanfaatkan indeks untuk mengubah nilai, seperti ini:
-
-```javascript
-rasaRasaEsKrim[4] = "Butter Pecan"; //Mengubah "Rocky Road" menjadi "Butter Pecan"
-```
-
-Dan Anda dapat memasukkan nilai baru pada indeks tertentu seperti ini:
-
-```javascript
-rasaRasaEsKrim[5] = "Cookie Dough"; //Ditambahkan "Cookie Dough"
-```
-
-✅ Cara yang lebih umum untuk mendorong nilai ke array adalah dengan menggunakan operator array seperti array.push()
-
-Untuk mengetahui berapa banyak item dalam sebuah array, gunakan properti `length`.
-
-```javascript
-let rasaRasaEsKrim = [
-  "Chocolate",
-  "Strawberry",
-  "Vanilla",
-  "Pistachio",
-  "Rocky Road",
-];
-rasaRasaEsKrim.length; //5
-```
-
-✅ Cobalah sendiri! Gunakan konsol browser Anda untuk membuat dan memanipulasi array kreasi Anda sendiri.
-
-## Loop
-
-Pengulangan memungkinkan untuk tugas berulang atau **iterative**, dan dapat menghemat banyak waktu dan kode. Setiap iterasi dapat bervariasi dalam variabel, nilai, dan kondisinya. Ada berbagai jenis loop dalam JavaScript, dan mereka memiliki perbedaan kecil, tetapi pada dasarnya melakukan hal yang sama: loop di atas data.
-
-### For Loop
-
-Perulangan `for` membutuhkan 3 bagian untuk melakukan iterasi: - `counter` Variabel yang biasanya diinisialisasi dengan angka yang menghitung jumlah iterasi. - `condition` Expression yang menggunakan operator perbandingan untuk menyebabkan loop berhenti ketika `true`. - `iteration-expression` Berjalan di akhir setiap iterasi, biasanya digunakan untuk mengubah nilai penghitung.
-
-```javascript
-// Menghitung hingga 10
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ Jalankan kode ini di konsol browser. Apa yang terjadi jika Anda membuat perubahan kecil pada penghitung, kondisi, atau ekspresi iterasi? Bisakah Anda membuatnya berjalan mundur, membuat hitungan mundur?
-
-### While loop
-
-Tidak seperti sintaks untuk pengulangan `for`, pengulangan `while` hanya membutuhkan kondisi yang akan menghentikan pengulangan jika `true`. Kondisi dalam pengulangan biasanya mengandalkan nilai lain seperti penghitung, dan harus dikelola selama pengulangan. Nilai awal untuk pencacah harus dibuat di luar perulangan, dan ekspresi apa pun untuk memenuhi suatu kondisi, termasuk mengubah penghitung harus dipertahankan di dalam perulangan.
-
-```javascript
-//Menghitung hingga 10
-let i = 0;
-while (i < 10) {
-  console.log(i);
-  i++;
-}
-```
-
-✅ Mengapa Anda memilih for loop vs. a while loop? Sebanyak 17 ribu penonton memiliki pertanyaan yang sama tentang StackOverflow, dan beberapa opini [mungkin menarik bagi Anda](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
-
-## Loop dan Array
-
-Array sering digunakan dengan loop karena sebagian besar kondisi memerlukan panjang array untuk menghentikan loop, dan indeks juga bisa menjadi nilai counter.
-
-```javascript
-let rasaRasaEsKrim = [
-  "Chocolate",
-  "Strawberry",
-  "Vanilla",
-  "Pistachio",
-  "Rocky Road",
-];
-
-for (let i = 0; i < rasaRasaEsKrim.length; i++) {
-  console.log(rasaRasaEsKrim[i]);
-} //Berakhir saat semua rasa dicetak
-```
-
-✅ Bereksperimenlah dengan melakukan perulangan pada array buatan Anda sendiri di konsol browser Anda.
-
----
-
-## 🚀 Tantangan
-
-Ada cara lain untuk melakukan perulangan pada array selain perulangan for dan while. Ada [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis ulang loop array Anda menggunakan salah satu dari teknik ini.
-
-## Kuis Pasca-Kuliah
-
-[Kuis pasca-kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=id)
-
-## Review & Belajar Mandiri
-
-Array dalam JavaScript memiliki banyak metode yang menyertainya, sangat berguna untuk manipulasi data. [Bacalah tentang metode ini](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) dan coba beberapa di antaranya (seperti push, pop, slice dan splice) pada array kreasi Anda.
-
-## Tugas
-
-[Loop sebuah Array](./assignment.id.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.it.md b/2-js-basics/4-arrays-loops/translations/README.it.md
deleted file mode 100644
index 046c2066..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.it.md
+++ /dev/null
@@ -1,133 +0,0 @@
-# Nozioni di base di JavaScript: Array e Cicli
-
-![Nozioni di base su JavaScript - Array](/sketchnotes/webdev101-js-arrays.png)
-> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pre-Lezione
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=it)
-
-Questa lezione tratta le basi di javascript, il linguaggio che fornisce interattività sul web. In questa lezione, si conosceranno gli array e i cicli, usati per manipolare i dati.
-
-
-[![Arrays](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Array")
-[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
-
-
-
-## Array
-
-Lavorare con i dati è un'attività comune per qualsiasi linguaggio ed è un'attività molto più semplice quando i dati sono organizzati in un formato strutturale, come gli array. Con gli array, i dati vengono memorizzati in una struttura simile a un elenco. Uno dei principali vantaggi degli array è che si possono memorizzare diversi tipi di dati in un array.
-
-✅ Gli array sono tutti intorno a noi! Si riesce a pensare a un esempio reale di un array, come un array di pannelli solari?
-
-La sintassi per un array è una coppia di parentesi quadre.
-
-```javascript
-let myArray = [];
-```
-
-Questo è un array vuoto, ma gli array possono essere dichiarati già popolati con i dati. Più valori in un array sono separati da una virgola.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-Ai valori dell'array viene assegnato un valore univoco chiamato **indice**, un numero intero che viene assegnato a un elemento in base alla sua distanza dall'inizio dell'array. Nell'esempio precedente, il valore di stringa "Chocolate" ha un indice di 0 e l'indice di "Rocky Road" è 4. Si utilizza l'indice all'interno di parentesi quadre per recuperare, modificare o inserire valori di matrice.
-
-✅ Sorprende che gli array inizino con l'indice zero? In alcuni linguaggi di programmazione, gli indici iniziano da 1. C'è una storia interessante a questo proposito, che si può [leggere su Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
-
-Si può sfruttare l'indice per modificare un valore, in questo modo:
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //Modificato "Rocky Road" in "Butter Pecan"
-```
-
-Si può inserire un nuovo valore a una data posizione in questo modo:
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //Aggiunto "Cookie Dough"
-```
-
-✅ Un modo più comune per inviare valori a un array è usare operatori di array come array.push()
-
-Per scoprire quanti elementi ci sono in un array, si usa la proprietà `length` .
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
-```
-
-Fare una prova! Si usi la console del proprio browser per creare e manipolare un array che si è creato.
-
-## Cicli
-
-I cicli consentono attività ripetitive o **iterative** e possono far risparmiare molto tempo e codice. Ogni iterazione può variare nelle proprie variabili, valori e condizioni. Esistono diversi tipi di cicli in JavaScript e presentano piccole differenze, ma essenzialmente fanno la stessa cosa: iterare sui dati.
-
-### Ciclo For
-
-Il ciclo `for` richiede 3 parti per iterare:
-
-- `counter`: Una variabile tipicamente inizializzata con un numero che conta il numero di iterazioni.
-- `condizione`: Espressione che utilizza operatori di confronto per arrestare il ciclo quando viene ritornato `true`
-- `espressione-di-iterazione`: Viene eseguita alla fine di ogni iterazione, tipicamente utilizzata per modificare il valore del contatore
-
-```javascript
-// Conta fino a 10
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ Si esegua questo codice in una console del browser. Cosa succede quando si apportano piccole modifiche al contatore, alla condizione o all'espressione di iterazione? E' possibile farlo funzionare all'indietro, creando un conto alla rovescia?
-
-### Ciclo While
-
-A differenza della sintassi per il ciclo `for` , i cicli `while` richiedono solo una condizione che interromperà il ciclo quando ritorna `true`. Le condizioni nei cicli di solito si basano su altri valori come i contatori e devono essere gestite durante il ciclo. I valori iniziali per i contatori devono essere creati all'esterno del ciclo e qualsiasi espressione per soddisfare una condizione, inclusa la modifica del contatore, deve essere mantenuta all'interno del ciclo.
-
-```javascript
-//Conta fino a 10
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ Perché si sceglierebbe un ciclo for invece di un ciclo while? 17k di di utenti di StackOverflow hanno fatto la stessa domanda e alcune opinioni [potrebbero essere interessanti](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
-
-## Cicli e Array
-
-Gli array vengono spesso utilizzati con i cicli perché la maggior parte delle condizioni verifica la lunghezza dell'array per interrompere il ciclo e l'indice può anche essere il valore del contatore.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} //Termina quando tutti i gusti sono stati stampati
-```
-
-✅ Sperimentare l'iterazione su un array di propria creazione nella console del browser.
-
----
-
-## 🚀 Sfida
-
-Esistono altri modi per eseguire un ciclo sugli array. diversi dai cicli for e while. Ci sono [forEach](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Statements/for...of) e [map](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Riscrivere il ciclo sull'array usando una di queste tecniche.
-
-## Quiz Post-Lezione
-[Quiz Post-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=it)
-
-
-## Revisione e Auto Apprendimento
-
-Gli array in JavaScript hanno molti metodi ad essi assegnati, estremamente utili per la manipolazione dei dati. [Informarsi su questi metodi](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Array) e provarne alcuni (come push, pop, slice e splice) su un array di propria creazione.
-
-## Compito
-
-[Ciclo su un Array](assignment.it.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.ja.md b/2-js-basics/4-arrays-loops/translations/README.ja.md
deleted file mode 100644
index 29389e84..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.ja.md
+++ /dev/null
@@ -1,131 +0,0 @@
-# JavaScript の基本: 配列とループ
-
-![JavaScript Basics - Arrays](/sketchnotes/webdev101-js-arrays.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## レッスン前の小テスト
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=ja)
-
-このレッスンでは、Web 上でインタラクティブな機能を提供する言語である JavaScript の基礎を学びます。このレッスンでは、データを操作するために使用される配列とループについて学びます。
-
-
-[![Array](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Array")
-[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
-
-
-## 配列
-
-データを扱うのはどの言語でも共通の作業ですが、データが配列のような構造的な形式で整理されている場合は、より簡単な作業となります。配列では、データはリストに似た構造で保存されます。配列の大きな利点の1つは、1つの配列に異なるタイプのデータを格納できることです。
-
-✅ 配列は身近なところにある!? 太陽光パネルの配列など、実際の配列の例を思い浮かべることができますか？
-
-配列の構文は角括弧のペアです。
-
-```javascript
-let myArray = [];
-```
-
-これは空の配列ですが、配列はすでにデータを埋めた状態で宣言することができます。配列内の複数の値はカンマで区切られます。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-配列の値には、**インデックス** と呼ばれる一意の値が割り当てられ、配列の先頭からの距離に基づいて整数が割り当てられます。上の例では、文字列の値 "Chocolate" のインデックスは 0 で、"Rocky Road" のインデックスは 4 です。 配列の値を取得、変更、挿入するには、角括弧付きのインデックスを使用します。
-
-✅ 配列のインデックスが 0 から始まるのは驚きですか？いくつかのプログラミング言語では、インデックスは1から始まります。これには興味深い歴史があり、[ウィキペディア](https://en.wikipedia.org/wiki/Zero-based_numbering) で読むことができます。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
-
-このように、インデックスにレバレッジをかけて値を変更することができます。
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //"Rocky Road" を "Butter Pecan" に変更
-```
-
-そして、このように与えられたインデックスに新しい値を挿入することができます。
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //"Cookie Dough" を追加しました。
-```
-
-✅ 値を配列にプッシュするより一般的な方法は、 array.push() のような配列演算子を使用することです。
-
-配列の中に何個の項目があるかを調べるには、`length` プロパティを使用します。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
-```
-
-✅ 自分で試してみましょう。ブラウザのコンソールを使って、自分で作成した配列を作成して操作してみましょう。
-
-## ループ
-
-ループは、反復または**イテレーション**のタスクを可能にし、多くの時間とコードを節約することができます。各反復は、その変数、値、条件を変えることができます。JavaScript には異なるタイプのループがあり、小さな違いはありますが、基本的には同じことをします。
-
-### For ループ
-
-`for`ループは反復するために3つの部分を必要とする。
-    - `counter` 典型的には反復回数をカウントする数値で初期化される変数
-    - `condition` 比較演算子を用いて、`false` のときにループを停止させる式
-    - `iteration-expression` 各反復の最後に実行され，通常はカウンタの値を変更するために使用されます
-  
-```javascript
-// 10までカウントアップ
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ このコードをブラウザのコンソールで実行してください。カウンタ、条件、反復式に小さな変更を加えるとどうなりますか？カウントダウンを作成して逆走させることはできますか？
-
-### While ループ
-
-`for` ループの構文とは異なり、`while` ループは `false` のときにループを停止する条件を必要とするだけです。ループ内の条件は通常、カウンタのような他の値に依存しており、ループ中に管理しなければなりません。カウンタの開始値はループの外で作成しなければならず、カウンタの変更を含めて条件を満たすための式はすべてループ内で維持しなければなりません。
-
-```javascript
-//10までカウントアップ
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ for loop と while loop のどちらかを選ぶ理由は何ですか? 同じ質問が StackOverflow で約2万回閲覧されていましたが、その意見の中には[あなたにとって興味深いものもあるかもしれません](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
-
-## ループと配列
-
-ほとんどの条件がループを止めるために配列の長さを必要とし、インデックスはカウンタの値になることもあるため、配列はループと一緒によく使われます。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} //すべてのフレーバーがプリントされた時点で終了
-```
-
-✅ ブラウザのコンソールで、自分で作った配列をループさせてみてください。
-
----
-
-## 🚀 チャレンジ
-
-配列をループする方法は for ループと while ループ以外にもあります。[forEach](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/for...of)、[map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map) があります。これらのテクニックのいずれかを使って、配列のループを書き換えてください。
-
-## レッスン後の小テスト
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=ja)
-
-
-## 復習と自己学習
-
-JavaScript の配列には多くのメソッドがあり、データ操作に非常に便利です。[これらのメソッドを読んでください](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array)。そして、あなたが作成した配列でそれらのいくつか (push, pop, slice, splice など) を試してみてください。
-
-## 課題
-
-[配列のループ](assignment.ja.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.ko.md b/2-js-basics/4-arrays-loops/translations/README.ko.md
deleted file mode 100644
index bfd97bf9..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.ko.md
+++ /dev/null
@@ -1,131 +0,0 @@
-# JavaScript 기초: 배열과 반복
-
-![JavaScript Basics - Arrays](/sketchnotes/webdev101-js-arrays.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 강의 전 퀴즈
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=ko)
-
-이 강의에서는 웹에서 상호 작용을 제공하는 언어인 JavaScript의 기본 사항을 다룹니다. 데이터를 컨트롤하는 데 사용하는 배열과 반복문에 대해 알아 봅니다.
-
-
-[![Array](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Array")
-[![Loops](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops")
-
-
-## 배열
-
-데이터 작업은 모든 언어의 일반적인 작업이며, 데이터가 배열과 같은 구조으로 구성되면 훨씬 더 쉬운 작업입니다. 배열을 사용하면, 데이터가 리스트와 유사한 구조로 저장됩니다. 배열의 주요 장점 중 하나는 한 배열에 다양한 타입의 데이터를 저장할 수 있다는 것입니다.
-
-✅ 배열은 우리 주변에 있습니다! 태양광 패널 배열과 같이 실생활의 사례를 생각할 수 있습니까?
-
-배열 구문은 대괄호 쌍으로 이루어져 있습니다.
-
-```javascript
-let myArray = [];
-```
-
-빈 배열이지만, 이미 데이터가 채워진 배열로 선언할 수 있습니다. 배열에 들어있는 여러가지 값들은 쉼표로 구분합니다.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-배열 값에는 **index**라는 고유 값이 할당됩니다. 이 값은 배열 시작부터 측정한 길이를 기준으로 할당되는 정수입니다. 예시에서, 문자열 값 "Chocolate"의 인덱스는 0이고, "Rocky Road"의 인덱스는 4입니다. 배열 값을 검색하고, 변경하거나 넣으려면 대괄호가 있는 인덱스를 사용합니다.
-
-✅ 배열이 0 인덱스에서 시작하는 것이 놀랍나요? 일부 프로그래밍 언어에서 인덱스는 1부터 시작합니다. 이와 관련된 흥미로운 기록이 있습니다, [Wikipedia에서 읽을 수 있습니다](https://en.wikipedia.org/wiki/Zero-based_numbering).
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
-
-인덱스를 활용하여 값을 변경할 수 있습니다:
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
-```
-
-그리고 주어진 인덱스에 새로운 값을 넣을 수 있습니다:
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
-```
-
-✅ 값을 배열에 밀어 넣는 것보다 일반적인 방법은 array.push()와 같이 배열 연산자를 사용하는 것입니다.
-
-배열에 있는 아이템 개수를 확인하려면, `length` 속성을 사용합니다.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
-```
-
-✅ 스스로 시도해보세요! 브라우저의 콘솔을 사용하여 직접 배열을 만들고 조작하십시오.
-
-## 반복문
-
-루프는 반복적이거나 **반복하는** 작업을 허용하며, 많은 시간과 코드를 절약할 수 있습니다. 각 iteration은 변수, 값 그리고 조건에서 다룰 수 있습니다. JavaScript에는 여러 유형의 반복문이 있으며, 약간의 차이가 있지만 기본적으로 동일한 작업을 수행합니다: 데이터 반복입니다.
-
-### For 반복문
-
-`for` 반복문으로 반복하려면 세 부분이 필요합니다:
-    - `카운터` 일반적으로 반복 횟수를 세는 숫자로 초기화되는 변수입니다.
-    - `조건` 비교 연산자를 사용하여 `true` 일 때 반복을 중단시키는 표현식
-    - `반복-표현식` 각 반복의 마무리에 실행되며, 일반적으로 값을 세면서 변경할 떄 사용됩니다
-  
-```javascript
-// Counting up to 10
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ 브라우저 콘솔에서 코드를 실행하십시오. 카운터, 조건 혹은 반복 표현식을 약간 변경하면 어떻게 되나요? 돌아와서 카운트 다운할 수 있습니까?
-
-### While 반복문
-
-`for` 반복문과 달리 `while` 반복문은 `true`일 때 반복을 중지하는 조건만 필요합니다. 반복의 조건은 일반적으로 카운터와 같이 다른 값에 의존하며, 반복하는 도중에 관리해야 합니다. 카운터의 시작 값은 반복문 밖에서 만들어야하며, 카운터 변경을 포함하여 조건을 충족하는 모든 표현식은 반복문 안에서 유지되어야 합니다.
-
-```javascript
-//Counting up to 10
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ for 반복문과 while 반복문 중에 선택하는 이유는 무엇입니까? StackOverflow에 방문한 17K 명에게 동일한 질문을 했으며, 일부 의견은 [흥미로울 수 있습니다](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
-
-## 반복문과 배열
-
-대부분의 조건문에서 반복을 그만하기 위해서는 배열 길이가 필요하고, 인덱스는 카운터 값이 될 수도 있기 때문에 배열은 반복문과 자주 사용됩니다.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} //Ends when all flavors are printed
-```
-
-✅ 브라우저 콘솔에서 직접 만든 배열을 반복하여 실험해보세요.
-
----
-
-## 🚀 도전
-
-for문과 while문 외에 배열을 반복하는 다른 방법이 있습니다. [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) 그리고 [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)도 있습니다. 해당 기술 중 하나를 사용하여 배열 반복을 다시 작성하십시오.
-
-## 강의 후 퀴즈
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=ko)
-
-
-## 리뷰 & 자기주도 학습
-
-JavaScript의 배열에는 많은 메서드를 가져서 데이터 조작에 매우 유용합니다. [이 방법에 대해 읽어보고](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) 만든 배열에서 몇 가지(push, pop, slice 그리고 splice와 같은) 방식을 시도해보십시오.
-
-## 과제
-
-[배열 순회하기](./assignment.ko.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.ms.md b/2-js-basics/4-arrays-loops/translations/README.ms.md
deleted file mode 100644
index 1ab6f0f6..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.ms.md
+++ /dev/null
@@ -1,129 +0,0 @@
-# Asas JavaScript: Array dan Loop
-
-![Asas JavaScript - Array](/sketchnotes/webdev101-js-arrays.png)
-> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuiz Pra Kuliah
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
-
-Pelajaran ini merangkumi asas-asas JavaScript, bahasa yang menyediakan interaktiviti di web. Dalam pelajaran ini, anda akan belajar tentang array dan loop, yang digunakan untuk memanipulasi data.
-
-[![Array](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "Array")
-[![Gelung](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Gelung")
-
-> Klik gambar di atas untuk video mengenai tatasusunan dan gelung.
-## Array
-
-Bekerja dengan data adalah tugas biasa untuk bahasa apa pun, dan ini adalah tugas yang lebih mudah apabila data disusun dalam format struktur, seperti array. Dengan array, data disimpan dalam struktur yang serupa dengan senarai. Satu faedah utama array ialah anda dapat menyimpan pelbagai jenis data dalam satu array.
-
-✅ Array ada di sekeliling kita! Bolehkah anda memikirkan contoh array sebenar, seperti susunan panel solar?
-
-Sintaks untuk array adalah sepasang tanda kurung persegi.
-
-```javascript
-let myArray = [];
-```
-
-Ini adalah array kosong, tetapi tatasusunan dapat dinyatakan sudah diisi dengan data. Pelbagai nilai dalam array dipisahkan dengan koma.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-Nilai array diberikan nilai unik yang disebut **indeks**, nombor bulat yang diberikan berdasarkan jaraknya dari awal array. Dalam contoh di atas, nilai rentetan "Chocolate" mempunyai indeks 0, dan indeks "Rocky Road" adalah 4. Gunakan indeks dengan tanda kurung persegi untuk mengambil, mengubah, atau memasukkan nilai array.
-
-✅ Adakah mengejutkan anda bahawa tatasusunan bermula dari indeks sifar? Dalam beberapa bahasa pengaturcaraan, indeks bermula pada 1. Ada sejarah menarik di sekitar ini, yang boleh anda [baca di Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
-
-Anda boleh memanfaatkan indeks untuk mengubah nilai, seperti ini:
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //Tukar "Rocky Road" menjadi "Butter Pecan"
-```
-
-Dan anda boleh memasukkan nilai baru pada indeks tertentu seperti ini:
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //Tambah "Cookie Dough"
-```
-
-✅ Cara yang lebih biasa untuk mendorong nilai ke array adalah dengan menggunakan pengendali array seperti array.push()
-
-Untuk mengetahui berapa banyak item dalam array, gunakan sifat `length`.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
-```
-
-✅ Cubalah sendiri! Gunakan konsol penyemak imbas anda untuk membuat dan memanipulasi pelbagai ciptaan anda sendiri.
-
-## Loop
-
-Loop membolehkan tugas berulang atau tugasan **interaktif**, dan dapat menjimatkan banyak masa dan kod. Setiap lelaran boleh berbeza-beza dalam pemboleh ubah, nilai, dan keadaannya. Terdapat pelbagai jenis loop dalam JavaScript, dan mereka mempunyai perbezaan kecil, tetapi pada dasarnya melakukan perkara yang sama: loop over data.
-
-### For Loop
-
-Gelung `for` memerlukan 3 bahagian untuk berulang:
-    - `counter` Pemboleh ubah yang biasanya diinisialisasi dengan nombor yang mengira bilangan lelaran.
-    - Ungkapan `condition` yang menggunakan operator perbandingan untuk menyebabkan gelung berhenti ketika` true`
-    - `iterasi-ekspresi` Berjalan pada akhir setiap lelaran, biasanya digunakan untuk mengubah nilai pembilang
-
-```javascript
-// Menggira hingga 10
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ Jalankan kod ini di konsol penyemak imbas. Apa yang berlaku apabila anda membuat perubahan kecil pada ungkapan pembilang, keadaan, atau lelaran? Bolehkah anda membuatnya berjalan ke belakang, membuat undur?
-
-### While loop
-
-Tidak seperti sintaks untuk `for` loop, `while` loop hanya memerlukan keadaan yang akan menghentikan loop ketika `true`. Keadaan dalam loop biasanya bergantung pada nilai lain seperti pembilang, dan mesti dikendalikan semasa gelung. Nilai permulaan untuk pembilang mesti dibuat di loop luar, dan sebarang ungkapan untuk memenuhi syarat, termasuk menukar pembilang mesti dipertahankan di dalam loop.
-
-```javascript
-//Menggira hingga 10
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ Mengapakah anda memilih gelung untuk gelung berbanding sebentar? Penonton 17K mempunyai soalan yang sama mengenai StackOverflow, dan beberapa pendapat [mungkin menarik bagi anda](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
-
-## Loop dan Array
-
-Array sering digunakan dengan loop kerana kebanyakan keadaan memerlukan panjang larik untuk menghentikan loop, dan indeks juga boleh menjadi nilai pembilang.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} //Berakhir apabila semua perisa dicetak
-```
-
-✅ Bereksperimen dengan melengkapkan pelbagai pembuatan anda sendiri di konsol penyemak imbas anda.
-
----
-
-## 🚀 Cabaran
-
-Terdapat cara lain untuk mengulangi tatasusunan selain untuk dan semasa gelung. Terdapat [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), dan [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Tulis semula array loop anda menggunakan salah satu teknik ini.
-
-## Kuiz Pasca Kuliah
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
-
-## Mengkaji and Belajar Sendiri 
-
-Array dalam JavaScript mempunyai banyak kaedah yang melekat padanya, sangat berguna untuk manipulasi data. [Baca kaedah ini](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) dan cuba beberapa di antaranya (seperti push, pop, slice dan splice) pada pelbagai ciptaan anda.
-
-## Tugasan
-
-[Loop an Array](./assignment.ms.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.pt.md b/2-js-basics/4-arrays-loops/translations/README.pt.md
deleted file mode 100644
index c44c98b0..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.pt.md
+++ /dev/null
@@ -1,133 +0,0 @@
-# Noções básicas de JavaScript: Arrays e Laços
-
-![JavaScript Basics - Arrays](/sketchnotes/webdev101-js-arrays.png)
-> Nota de esboço por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Questionário de Pré-Palestra
-[Questionário de Pré-Palestra](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13)
-
-Esta lição cobre os conceitos básicos do JavaScript, a linguagem que proporciona interactividade na web. Nesta lição, aprenderá sobre arrays e loops, que são usados para manipular dados.
-
-[![Arrays](https://img.youtube.com/vi/rlvD4Umw37U/0.jpg)](https://youtube.com/watch?v=rlvD4Umw37U "Arrays")
-
-[![Loops](https://img.youtube.com/vi/J2X-olc3Z6Y/0.jpg)](https://www.youtube.com/watch?v=J2X-olc3Z6Y "Laços")
-
-> 🎥 Clique na imagem acima para um vídeo sobre arrays e loops.
-
-> Pode seguir esta lição em [Microsoft Aprender](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon)!
-
-## Arrays
-Trabalhar com dados é uma tarefa comum para qualquer língua, e é uma tarefa muito mais fácil quando os dados são organizados num formato estrutural, tal como as matrizes. Com arrays, os dados são armazenados numa estrutura semelhante a uma lista. Uma grande vantagem dos arrays é que se pode armazenar diferentes tipos de dados numa única matriz.
-
-✅ Os arrays estão à nossa volta! Consegue pensar num exemplo da vida real de uma matriz, tal como uma matriz de painéis solares?
-
-A sintaxe de uma matriz é um par de colchetes.
-
-```javscript
-let myArray = [];
-```
-
-Esta é uma matriz vazia, mas as matrizes podem ser declaradas já povoadas com dados. Os valores múltiplos numa matriz são separados por uma vírgula.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-Aos valores da matriz é atribuído um valor único chamado **índice**, um número inteiro que é atribuído com base na sua distância desde o início da matriz. No exemplo acima, o valor da string "Chocolate" tem um índice de 0, e o índice de "Rocky Road" é 4. Use o índice com colchetes para recuperar, alterar, ou inserir valores da array.
-
-✅ Surpreende-o que as arrays comecem pelo índice zero? Em algumas linguagens de programação, os índices começam em 1. Há uma história interessante em torno disto, que pode [ler na Wikipedia](https://en.wikipedia.org/wiki/Zero-based_numbering).
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
-
-Pode aproveitar o índice para alterar um valor, como este:
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //Mudou "Rocky Road" para "Butter Pecan".
-```
-
-E pode inserir um novo valor a um determinado índice como este:
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //Acrescentada "Cookie Dough".
-```
-
-✅ Uma forma mais comum de empurrar valores para uma matriz é através da utilização de operadores de matriz como array.push()
-
-Para descobrir quantos itens estão numa matriz, utilize a propriedade `comprimento`.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
-```
-
-✅ Experimente você mesmo! Use a consola do seu navegador para criar e manipular uma série da sua própria criação.
-
-## Laços
-
-Os laços permitem tarefas repetitivas ou **iterativas**, e podem poupar muito tempo e código. Cada iteração pode variar nas suas variáveis, valores, e condições. Existem diferentes tipos de loops em JavaScript, e têm pequenas diferenças, mas essencialmente fazem a mesma coisa: loop over data.
-
-### Para Laço
-
-O laço `para` requer 3 partes para iterar:
-    - `Contador` Uma variável que é tipicamente inicializada com um número que conta o número de iterações.
-    - `condição` Expressão que utiliza operadores de comparação para fazer parar o laço quando `verdadeiro`
-    - `expressão de iteração` Funciona no final de cada iteração, normalmente utilizada para alterar o valor do contador
-  
-```javascript
-// Contagem até 10
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅Executar este código numa consola de navegação. O que acontece quando se fazem pequenas alterações ao contador, condição, ou expressão de iteração? Pode fazê-lo correr para trás, criando uma contagem decrescente?
-
-### While loop
-
-Ao contrário da sintaxe para o laço `para`, `entretanto` só requer uma condição que irá parar o laço quando `verdadeiro`. As condições em loops geralmente dependem de outros valores como contadores, e devem ser geridas durante o loop. Os valores iniciais dos contadores devem ser criados fora do laço, e quaisquer expressões para satisfazer uma condição, incluindo a mudança do contador, devem ser mantidas dentro do laço.
-
-```javascript
-//Contagem até 10
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ Porque escolheria um para loop vs. um loop de tempo? Os 17K espectadores tinham a mesma pergunta sobre o StackOverflow, e algumas das opiniões [pode ser interessante para você](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript).
-
-## Laços e Arrays
-
-As arrays são frequentemente utilizadas com loops porque a maioria das condições requer o comprimento do array para parar o loop, e o índice também pode ser o valor do contador.
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} //Termina quando todos os sabores são impressos
-```
-
-✅ Experimente fazer looping sobre um conjunto da sua própria marca na consola do seu navegador. 
-
----
-
-## 🚀 Desafio
-
-Existem outras formas de looping sobre arrays que não são para e enquanto se faz loops. Existem [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), and [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map). Reescreva o seu laço de matriz usando uma destas técnicas.
-
-## Questionário de pós-publicidade
-[Questionário de pós-publicidade](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14)
-
-
-## Revisão e Auto-estudo
-
-As arrays em JavaScript têm muitos métodos ligados a elas, extremamente úteis para a manipulação de dados. [Leia mais sobre estes métodos](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) e experimente algumas delas (como empurrar, estalar, cortar e emendar) numa variedade da sua criação.
-
-## Atribuição
-
-[Laçar um Array](assignment.pt.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.zh-cn.md b/2-js-basics/4-arrays-loops/translations/README.zh-cn.md
deleted file mode 100644
index cb930b82..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.zh-cn.md
+++ /dev/null
@@ -1,130 +0,0 @@
-# JavaScript 基础：数组和循环
-
-![JavaScript Basics - Arrays](/sketchnotes/webdev101-js-arrays.png)
-> 涂鸦笔记作者：[Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 课前小测
-[课前小测](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=zh_cn)
-
-这节课将会介绍 JavaScript 的基础知识，正是它为网页提供了可交互性。这节课中，你将学习数组和循环，它们会被用于操控数据。
-
-[![数组](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "数组")
-[![循环](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "循环")
-
-> 点击上方图片来观看一个有关数组和循环的视频。
-
-## 数组（Arrays）
-
-对于任何编程语言来说，使用数据都是很常见的工作，将数组组织在一个结构性的格式（比如数组）中则可以让这个工作更简单。通过使用数组，数据会被存放在一个类似列表的结构中。数组的一个主要优点是你可以将不同类型的数据存入同一个数组中。
-
-✅ 数组在我们的生活中随处可见！你能想到一个现实生活中的数组的例子吗，比如一个太阳能板阵列？
-
-数组的语法需要一对方括号。
-
-```javascript
-let myArray = [];
-```
-
-这是一个空数组，但数组其实可以在声明时就存入一些数据。数组中的多项数据用逗号分隔。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-数组中的值会被指定一个唯一的值，称为 **索引（index）**，它是一个整数，表示对应值在数组中的位置与数组开头的距离。在上方的例子中，字符串值 `"Chocolate"` 的索引就是 0，而 `"Rocky Road"` 的索引是 4。可以用索引加上方括号来获取、改变或者插入数组值。
-
-✅ 数组索引从 0 开始计起是否让你感觉奇怪？在有的编程语言中，索引会从 1 开始。关于这事有一段有趣的历史，你可以[在维基百科了解它](https://zh.wikipedia.org/zh-cn/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B%E7%9A%84%E7%B7%A8%E8%99%9F)。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; // "Vanilla"
-```
-
-你可以通过索引来改变数组中的值，像这样：
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; // 把 "Rocky Road" 改成 "Butter Pecan"
-```
-
-你也可以用给定索引来插入新的值，像这样：
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; // 加了一项 "Cookie Dough"
-```
-
-✅ 向数组中添加新的值有更常用的方法：使用如 array.push() 这样的数组方法
-
-为了获知数组中有多少元素，可以用 `length` 属性。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; // 5
-```
-
-✅ 亲手试一试！在你的浏览器控制台里亲手创建和操作一个你自己的数组。
-
-## 循环（Loops）
-
-数组可以用来做重复性的或者 **迭代性的（iterative）** 的工作，会省下很多时间和代码量。每一次迭代中的变量、值或者条件可能会不同。JavaScript 中有几种不同类型的循环，它们有一些小差别，但本质上都是做同一件事：遍历数据。
-
-### For 循环
-
-`for` 循环需要三个部分来进行迭代：
-    - `计数器（counter）` 一个通常用数字来初始化的变量，用于记录迭代的次数
-    - `条件式（condition）` 一个使用了比较运算符的表达式，用于在其值为 `true` 时终止循环
-    - `迭代式（iteration-expression）` 在每一次迭代的模为执行，一般用于更新计数器的值
-  
-```javascript
-// 从 0 数到 9
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ 在浏览器控制台中运行这段代码。试试调整计数器、条件式或迭代式时会发生什么。你能让它反过来运行，倒着计数吗？
-
-### While 循环
-
-和 `for` 循环不同，`while` 循环只需要一个条件式，用于在其值为 `true` 时终止循环。循环中的条件式往往需要依赖其他的值，比如计数器，计数器也必须得在循环内有所处理。计数器的起始值必须在循环外创建，任何为了达到终止条件的表达式（包括改变计数器的值）都需要在循环内维护。
-
-```javascript
-// 从 0 数到 9
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ 你在什么时候会选用 for 循环，什么时候会选用 while 循环？StackOverflow 上也有数万人有相同的问题，这里有一些[你可能感兴趣的观点](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
-
-## 循环和数组
-
-循环和数组经常结合使用，因为很多情况下都会利用数组长度来作为条件式，而索引可以作为计数器值。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} // 所有口味被打印后就会结束循环
-```
-
-✅ 在你的浏览器控制台里实验一下遍历一个你自己创建的数组。
-
----
-
-## 🚀 挑战
-
-除了 for 和 while 循环，还有一些用于遍历数组的办法。比如 [forEach](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...of) 和 [map](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。用这些办法重写一下你的数组遍历代码。
-
-## 课后小测
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=zh_cn)
-
-## 复习 & 自学
-
-JavaScript 中的数组有许多绑定在上面的方法，对于操作数据来说非常有用。[读一下这些方法](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)并且在你创建的数组上试用一下它们（比如 push、pop、slice 和 splice）。
-
-## 作业
-
-[循环和数组](assignment.zh-cn.md)
diff --git a/2-js-basics/4-arrays-loops/translations/README.zh-tw.md b/2-js-basics/4-arrays-loops/translations/README.zh-tw.md
deleted file mode 100644
index d1b3e46f..00000000
--- a/2-js-basics/4-arrays-loops/translations/README.zh-tw.md
+++ /dev/null
@@ -1,132 +0,0 @@
-# JavaScript 入門 - 矩陣與迴圈
-
-![JavaScript 入門 - 矩陣](/sketchnotes/webdev101-js-arrays.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
-
-## 課前測驗
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/13?loc=zh_tw)
-
-這堂課會包含程式語言 JavaScript，建立互動式網頁的基礎。課程中，你會學到用來操作資料的矩陣與迴圈。
-
-[![矩陣](https://img.youtube.com/vi/1U4qTyq02Xw/0.jpg)](https://youtube.com/watch?v=1U4qTyq02Xw "矩陣")
-[![迴圈](https://img.youtube.com/vi/Eeh7pxtTZ3k/0.jpg)](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "迴圈")
-
-> 點擊以上的圖片來觀賞關於矩陣與迴圈的影片。
-
-## 矩陣（Arrays）
-
-處理資料是任何程式語言中最常見的任務，如果能將程式碼有條理地編排成如矩陣的形式，處理任務來會更加輕鬆。矩陣的資料儲存格式就像串列，其中一項好處是矩陣可以儲存不同的資料型態資料。
-
-✅ 矩陣其實圍繞在我們身邊！你能想到現實中那些應用是矩陣的形式，例如太陽能板矩陣嗎？
-
-矩陣的語法需要用到中括號。
-
-```javascript
-let myArray = [];
-```
-
-上述為一個空矩陣，矩陣也能在宣告時設定內容資料，資料會以逗號來做區隔。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-```
-
-矩陣數值位置會以 **索引（index）** 來決定，標記從矩陣的開頭相隔多少元素。在上述例子中，字串 "Chocolate" 的索引為 0，"Rocky Road" 為 4。以中括號帶入索引來接收、修改或加入特定元素數值。
-
-✅ 索引從 0 開始有超出你的預料之外嗎？在部分程式語言中，索引會從 1 開始。這有一段有趣的歷史，你可以[閱讀維基百科](https://zh.wikipedia.org/wiki/%E5%BE%9E%E9%9B%B6%E9%96%8B%E5%A7%8B%E7%9A%84%E7%B7%A8%E8%99%9F)來了解它。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors[2]; //"Vanilla"
-```
-
-你可以指定索引改變其中的數值，如：
-
-```javascript
-iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"
-```
-
-或者是指定索引加入新數值，如：
-
-```javascript
-iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"
-```
-
-✅ 另一個常用加入矩陣元素的方式為使用矩陣運算子如 array.push()。
-
-要得知矩陣內有多少元素，可以使用矩陣屬性 `length`。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-iceCreamFlavors.length; //5
-```
-
-✅ 自己動手試試看！使用瀏覽器命令欄，自由地建立並操控矩陣。
-
-## 迴圈（Loops）
-
-迴圈幫助你處理重複性與 **迭代（iterative）** 任務，這可以省下許多程式碼行數與時間。每一次迭代可以有不同的變數、數值或條件。在 JavaScript 中有許多種迴圈的樣式，彼此都有些微的差異，但主要功能都一樣：對資料做迴圈。
-
-### For 迴圈（For Loop）
-
-`for` 迴圈有三個條件：
-    - `計數器（counter）` 一個初始化變數決定目前迭代的次數。
-    - `條件式（condition）` 一個以比較運算子表示的陳述式，當結果為 `true` 時終止迴圈。
-    - `迭代陳述式（iteration-expression）` 在每一次迭代完後，改變計數器的數值。
-  
-```javascript
-// 從 0 加到 10
-for (let i = 0; i < 10; i++) {
-  console.log(i);
-}
-```
-
-✅ 在瀏覽器命令欄中運行這段迴圈。在改變計數器、條件式與迭代陳述式後有什麼改變？你能讓它變成從 10 減到 0 嗎？
-
-### While 迴圈（While Loop）
-
-不同於 `for` 迴圈語法，`while` 迴圈只要求一個條件式，當條件式回傳 `true` 時即終止迴圈。迴圈中的條件是通常需要依賴像計數器的變數，這些變數必須被合理的處理。計數器的起始化需要在迴圈外面，之後的條件陳述式與計數器的變化則需要在迴圈當中。
-
-```javascript
-// 從 0 加到 10
-let i = 0;
-while (i < 10) {
- console.log(i);
- i++;
-}
-```
-
-✅ 你會選擇 for 迴圈還是 while 迴圈呢？ 一萬七千個 StackOverflow 用戶問過相同的問題，有些回應[可能會勾起你的興趣](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)。
-
-## 矩陣與迴圈
-
-矩陣通常會與迴圈一起出現，大多數的條件式需要矩陣的長度來決定迴圈次數，矩陣的索引值也與計數器的數值相同。
-
-```javascript
-let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
-
-for (let i = 0; i < iceCreamFlavors.length; i++) {
-  console.log(iceCreamFlavors[i]);
-} // 當所有冰淇淋口味表示完時，結束迴圈。
-```
-
-✅ 做個實驗，在瀏覽器命令欄中製作一個使用矩陣的迴圈。
-
----
-
-## 🚀 挑戰
-
-除了 for 迴圈與 while 迴圈外，仍有許多使用矩陣與迴圈的方法：[forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach)、[for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of) 與 [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)。用上列其中一種語法改寫你的迴圈。
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/14?loc=zh_tw)
-
-## 複習與自學
-
-在 JavaScript 中，矩陣有許多控制的方法，它們在處理資料上有很大的幫助。
-[學習這些方法](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array)，如 push、pop、slice 和 splice，試著套用在你所創造的矩陣上。 
-
-## 作業
-
-[給矩陣的迴圈](assignment.zh-tw.md)
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.de.md b/2-js-basics/4-arrays-loops/translations/assignment.de.md
deleted file mode 100644
index 88cac1a0..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.de.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Schleife ein Array
-
-## Anleitung
-
-Erstellen Sie ein Programm, das jede dritte Zahl zwischen 1 und 20 auflistet und auf der Konsole druckt.
-
-> TIPP: Verwenden Sie eine for-Schleife und ändern Sie den Iterationsausdruck
-
-## Rubrik
-
-| Kriterien | Vorbildlich | Angemessen | Verbesserungsbedarf |
-| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
-| | Programm läuft korrekt und ist kommentiert | Programm ist nicht kommentiert | Programm ist unvollständig oder fehlerhaft
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.es.md b/2-js-basics/4-arrays-loops/translations/assignment.es.md
deleted file mode 100644
index c7895eec..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.es.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Hacer bucle en una matriz
-
-## Instrucciones
-
-Cree un programa que enumere cada tercer número entre 1 y 20 e imprimalo en la consola.
-
-> SUGERENCIA: use un bucle for y modifique la expresión-iteración
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
-| | El programa se ejecuta correctamente y está comentado | Programa no comentado | El programa está incompleto o con errores |
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.fr.md b/2-js-basics/4-arrays-loops/translations/assignment.fr.md
deleted file mode 100644
index 8d7bc364..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.fr.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Boucler un tableau
-
-## Instructions
-
-Créez un programme qui liste chaque 3ème nombre entre 1 et 20 et l'affiche sur la console.
-
-> CONSEIL : utilisez une boucle for et modifiez l'expression d'itération
-
-## Rubrique
-
-| Critères | Exemplaire | Adéquat | Besoin d'amélioration |
-| -------- | ---------------------------------------- | ------------------------ | ------------------------------ |
-| | Le programme s'exécute correctement et est commenté | Le programme n'est pas commenté | Le programme est incomplet ou bogué |
\ No newline at end of file
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.hi.md b/2-js-basics/4-arrays-loops/translations/assignment.hi.md
deleted file mode 100644
index ad1f9ed7..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.hi.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# लूप अर्रे
-
-## अनुदेश
-
-एक प्रोग्राम बनाएं जो 1-20 के बीच हर तीसरे नंबर को सूचीबद्ध करता है और इसे कंसोल पर प्रिंट करता है.
-
-> सुझाब : फॉर-लूप का उपयोग करें और पुनरावृत्ति-अभिव्यक्ति को संशोधित करें
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                      | पर्याप्त                  | सुधार की जरूरत            |
-| ------ | ------------------------------------------------ | ------------------------- | ------------------------- |
-|        | प्रोग्राम सही ढंग से चलता है और टिप्पणी की गई है | प्रोग्राम टिप्पणी नहीं है | प्रोग्राम अधूरा या बगी है |
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.id.md b/2-js-basics/4-arrays-loops/translations/assignment.id.md
deleted file mode 100644
index 4973d69f..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.id.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Loop sebuah Array
-
-## Instruksi
-
-Buat program yang mencantumkan setiap nomor ke-3 antara 1-20 dan mencetaknya ke konsol.
-
-> TIPS: gunakan for-loop dan ubah ekspresi iterasi
-
-## Rubric
-
-| Kriteria | Contoh                                            | Memenuhi                      | Perlu Perbaikan                       |
-| -------- | ------------------------------------------------- | ----------------------------- | ------------------------------------- |
-|          | Program berjalan dengan benar dan diberi komentar | Program tidak diberi komentar | Program tidak lengkap atau bermasalah |
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.it.md b/2-js-basics/4-arrays-loops/translations/assignment.it.md
deleted file mode 100644
index c7bc269f..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.it.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Ciclo su un Array
-
-## Istruzioni
-
-Creare un programma che elenchi ogni terzo numero tra 1-20 e lo stampi alla console.
-
-> SUGGERIMENTO: usare un ciclo for e modificare l'espressione di iterazione
-
-## Rubrica
-
-| Criterio | Eccellente                              | Sufficiente                 | Necessita miglioramenti              |
-| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
-|          | Il programma viene eseguito correttamente ed è commentato |Il programma non è commentato | Il programma è incompleto o presenta bug |
\ No newline at end of file
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.ja.md b/2-js-basics/4-arrays-loops/translations/assignment.ja.md
deleted file mode 100644
index c190bf55..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.ja.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 配列のループ
-
-## 説明書
-
-1～20の間の数字を3つおきに（3の倍数を）すべてリストアップしてコンソールに表示するプログラムを作成します。
-
-> TIP: for-loop を使用して、反復式を変更します。
-
-## ルーブリック
-
-| 基準 | 模範的な例                               | 適切な                 | 改善が必要              |
-| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
-|          | プログラムが正常に動作し、コメントが表示される | プログラムはコメントをしていない | プログラムが不完全であるか、バグがある |
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.ko.md b/2-js-basics/4-arrays-loops/translations/assignment.ko.md
deleted file mode 100644
index 09771bcf..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.ko.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 배열 순회하기
-
-## 설명
-
-1-20 사이의 숫자 중 모든 세 번째 숫자를 나열해 콘솔에 출력하는 프로그램을 만들어봅니다.
-
-> 팁: for-loop 를 사용하고 순회 표현식을 수정해봅니다.
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
-| | 프로그램이 올바르게 동작하며 설명하는 주석이 있는 경우 | 프로그램을 설명하는 주석이 없는 경우 | 프로그램이 불완전하거나 버그가 있는 경우
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.ms.md b/2-js-basics/4-arrays-loops/translations/assignment.ms.md
deleted file mode 100644
index 3eef68c4..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.ms.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Loop an Array
-
-## Arahan 
-
-Buat program yang menyenaraikan setiap nombor ke-3 antara 1-20 dan mencetaknya ke konsol.
-
-> TIP: gunakan for-loop dan ubah ekspresi iterasi
-
-## Rubrik
-
-| Kriteria | Contoh                              | Mencukupi                | Usaha Lagi             |
-| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
-|          | Program berjalan dengan betul dan dikomentari | Program tidak dikomentari | Program tidak lengkap atau kereta |
\ No newline at end of file
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.nl.md b/2-js-basics/4-arrays-loops/translations/assignment.nl.md
deleted file mode 100644
index b45cd53d..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.nl.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Loop een Array
-
-## Instructies
-
-Maak een programma dat elk 3de nummer tussen 1 en 20 opsomt en het afdrukt naar de console.
-
-> TIP: gebruik een for-loop en pas de iteratie-uitdrukking aan
-
-## Rubriek
-
-| Criteria | Voorbeeldig                               | Voldoende                 | Moet worden verbeterd              |
-| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
-|          | Programma loopt correct en wordt becommentarieerd | Programma wordt niet becommentarieerd | Programma is onvolledig of bevat fouten |
\ No newline at end of file
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.pt.md b/2-js-basics/4-arrays-loops/translations/assignment.pt.md
deleted file mode 100644
index 500a31e4..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.pt.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Laçar um Array
-
-## Instruções
-
-Criar um programa que enumere cada 3º número entre 1-20 e imprime-o para a consola.
-
->  DICA: usar um for-loop e modificar a expressão de iteração
-
-## Rubrica
-
-| Critérios | Exemplar                               | Adequado                 | Necessidades de Melhoria              |
-| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
-|          | Programa funciona correctamente e é comentado | Programa não é comentado | Programa incompleto ou buggy
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.zh-cn.md b/2-js-basics/4-arrays-loops/translations/assignment.zh-cn.md
deleted file mode 100644
index efb5668e..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.zh-cn.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 循环和数组
-
-## 说明
-
-编写一段程序，列出 1-20 中所有 3 的倍数，将它们输出到控制台。
-
-> 提示，使用 for 循环，修改迭代表达式
-
-## 评价表
-
-| 指标 | 优秀 | 良好 | 尚可进步 |
-| --- | --- | --- | --- |
-| | 程序运行正确，并且写了注释 | 没写注释 | 程序未完成或者有 BUG |
diff --git a/2-js-basics/4-arrays-loops/translations/assignment.zh-tw.md b/2-js-basics/4-arrays-loops/translations/assignment.zh-tw.md
deleted file mode 100644
index c28ebd03..00000000
--- a/2-js-basics/4-arrays-loops/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 給矩陣的迴圈
-
-## 簡介
-
-建立一個程式，列出數字每第三個從 1 到 20 的值(3,6,9......)，並輸出在 console 上。
-
-> 提示：使用 for-loop 迴圈並改寫它的迭代陳述式。
-
-## 學習評量
-
-| 作業內容 | 優良                                   | 普通                   | 待改進         |
-| -------- | -------------------------------------- | ---------------------- | -------------- |
-|          | 程式完成簡介裡的課題並解釋程式碼意義。 | 程式完成簡介裡的課題。 | 程式出現問題。 |
diff --git a/2-js-basics/translations/README.de.md b/2-js-basics/translations/README.de.md
deleted file mode 100644
index 09f65fa6..00000000
--- a/2-js-basics/translations/README.de.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Einführung in JavaScript
-
-JavaScript ist die Sprache des Webs. In diesen vier Lektionen lernen Sie die Grundlagen.
-
-### Themen
-
-1. [Variablen und Datentypen](../1-data-types/translations/README.de.md)
-2. [Funktionen und Methoden](../2-functions-methods/translations/README.de.md)
-3. [Entscheidungen mit JavaScript treffen](../3-making-decisions/translations/README.de.md)
-4. [Arrays und Loops](../4-arrays-loops/translations/README.de.md)
-
-### Credits
-
-Diese Lektionen wurden mit ♥ ️von [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) und [Chris Noring](https://twitter.com/chris_noring) erstellt.
diff --git a/2-js-basics/translations/README.es.md b/2-js-basics/translations/README.es.md
deleted file mode 100644
index 7e9f37d7..00000000
--- a/2-js-basics/translations/README.es.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Introducción a JavaScript
-
-JavaScript es el lenguaje de la web. En estas cuatro lecciones, aprenderá sus conceptos básicos.
-
-### Temas
-
-1. [Variables y tipos de datos](../1-data-types/translations/README.es.md)
-2. [Funciones y métodos](../2-functions-methods/translations/README.es.md)
-3. [Toma de decisiones con JavaScript](../3-making-decisions/translations/README.es.md)
-4. [Matrices y bucles](../4-arrays-loops/translations/README.es.md)
-
-### Créditos
-
-Estas lecciones fueron escritas con ♥ ️ por [Jasmine Greenaway](https://twitter.com/paladique) y [Chris Noring](https://twitter.com/chris_noring)
diff --git a/2-js-basics/translations/README.fr.md b/2-js-basics/translations/README.fr.md
deleted file mode 100644
index 43c78048..00000000
--- a/2-js-basics/translations/README.fr.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Introduction à JavaScript
-
-JavaScript est le langage du Web. Dans ces quatre leçons, vous allez en apprendre les bases.
-
-### Sujets
-
-1. [Variables et Types de Données](1-data-types/transaltions/README.fr.md)
-2. [Fonctions et Méthodes](2-functions-methods/translations/README.fr.md)
-3. [Prise de Décision avec JavaScript](3-making-decisions/translations/README.fr.md)
-4. [Tableaux et Boucles](4-arrays-loops/translations/README.fr.md)
-
-### Crédits
-
-Ces leçons ont été écrites avec ♥️ par [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) et [Chris Noring](https://twitter.com/chris_noring)
\ No newline at end of file
diff --git a/2-js-basics/translations/README.hi.md b/2-js-basics/translations/README.hi.md
deleted file mode 100644
index 8b37ec42..00000000
--- a/2-js-basics/translations/README.hi.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# जावास्क्रिप्ट का परिचय
-
-जावास्क्रिप्ट वेब की भाषा है। इन चार पाठों में, आप इसकी मूल बातें जानेंगे.
-
-### विषय
-
-1. [वेरिएबल्स और डेटा प्रकार](../1-data-types/translations/README.hi.md) 
-2. [फंक्शंस और मेथड्स](../2-functions-methods/translations/README.hi.md)
-3. [जावास्क्रिप्ट के साथ निर्णय करना](../3-making-decisions/translations/README.hi.md)
-4. [अर्रेंज और लूप्स ](../4-arrays-loops/translations/README.hi.md)
-
-### आभार सूची
-
-ये पाठ ♥ से [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) और [Chris Noring](https://twitter.com/chris_noring) द्वारा लिखे गए है
diff --git a/2-js-basics/translations/README.id.md b/2-js-basics/translations/README.id.md
deleted file mode 100644
index b552456b..00000000
--- a/2-js-basics/translations/README.id.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Pengantar JavaScript
-
-JavaScript adalah bahasa web. Dalam empat pelajaran ini, Anda akan mempelajari dasar-dasarnya.
-
-### Topik
-
-1. [Variabel dan Jenis Data](../1-data-types/translations/README.id.md)
-2. [Fungsi dan Metode](../2-functions-methods/translations/README.id.md)
-3. [Membuat Keputusan dengan JavaScript](../3-making-decisions/translations/README.id.md)
-4. [Array dan Loop](../4-arrays-loops/translations/README.id.md)
-
-### Kredit
-
-Pelajaran ini ditulis dengan ♥️ ️oleh [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) dan [Chris Noring](https://twitter.com/chris_noring)
diff --git a/2-js-basics/translations/README.it.md b/2-js-basics/translations/README.it.md
deleted file mode 100644
index 5d86f87d..00000000
--- a/2-js-basics/translations/README.it.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Introduzione a JavaScript
-
-JavaScript è il linguaggio del web. In queste quattro lezioni, si impareranno le sue basi.
-
-### Argomenti
-
-1. [Variabili e Tipi di Dato](../1-data-types/translations/README.it.md)
-2. [Funzioni e Metodi](../2-functions-methods/translations/README.it.md)
-3. [Prendere Decisioni con JavaScript](../3-making-decisions/translations/README.it.md)
-4. [Array e Cicli](../4-arrays-loops/translations/README.it.md)
-
-### Crediti
-
-Queste lezioni sono state scritte con il  ♥️ da [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) e [Chris Noring](https://twitter.com/chris_noring)
\ No newline at end of file
diff --git a/2-js-basics/translations/README.ja.md b/2-js-basics/translations/README.ja.md
deleted file mode 100644
index f48342cc..00000000
--- a/2-js-basics/translations/README.ja.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# JavaScript 入門
-
-JavaScript は Web の言語です。この4つのレッスンでは、その基本を学びます。
-
-### トピック
-
-1. [変数とデータ型](../1-data-types/translations/README.ja.md)
-2. [関数とメソッド](../2-functions-methods/translations/README.ja.md)
-3. [JavaScript での意思決定](../3-making-decisions/translations/README.ja.md)
-4. [配列とループ](../4-arrays-loops/translations/README.ja.md)
-
-### Credits
-
-These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)
\ No newline at end of file
diff --git a/2-js-basics/translations/README.ko.md b/2-js-basics/translations/README.ko.md
deleted file mode 100644
index d4d0d31e..00000000
--- a/2-js-basics/translations/README.ko.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# JavaScript 소개하기
-
-JavaScript는 웹의 언어입니다. 이 네 가지 강의에서 기초를 배우게됩니다.
-
-### 주제
-
-1. [변수와 데이터 타입](../1-data-types/translations/README.ko.md)
-2. [함수와 메소드](../2-functions-methods/translations/README.ko.md)
-3. [JavaScript로 결정하기](../3-making-decisions/translations/README.ko.md)
-4. [배열과 반복](../4-arrays-loops/translations/README.ko.md)
-
-### 크레딧
-
-These lessons were written with ♥️ by [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) and [Chris Noring](https://twitter.com/chris_noring)
\ No newline at end of file
diff --git a/2-js-basics/translations/README.ms.md b/2-js-basics/translations/README.ms.md
deleted file mode 100644
index b07d07c6..00000000
--- a/2-js-basics/translations/README.ms.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Pengenalan kepada JavaScript
-
-JavaScript adalah bahasa web. Dalam empat pelajaran ini, anda akan mengetahui asasnya.
-
-### Topik
-
-1. [Pemboleh ubah dan Jenis Data](../1-data-types/translations/README.ms.md)
-2. [Fungsi dan Kaedah](../2-functions-methods/translations/README.ms.md)
-3. [Membuat Keputusan dengan JavaScript](../3-making-decisions/translations/README.ms.md)
-4. [Susunan dan Gelung](../4-arrays-loops/translations/README.ms.md)
-
-### Kredit
-
-Pelajaran ini ditulis dengan ♥️ oleh [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) dan [Chris Noring](https://twitter.com/chris_noring)
\ No newline at end of file
diff --git a/2-js-basics/translations/README.nl.md b/2-js-basics/translations/README.nl.md
deleted file mode 100644
index a657542c..00000000
--- a/2-js-basics/translations/README.nl.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Inleiding tot JavaScript
-
-JavaScript is de taal van het web. In deze vier lessen leert u de basisprincipes.
-
-### Onderwerpen
-
-1. [Variabelen en Gegevenstypen](../1-data-types/translations/README.nl.md)
-2. [Functies en Methoden](../2-functions-methods/translations/README.nl.md)
-3. [Beslissingen nemen met JavaScript](../3-making-decisions/translations/README.nl.md)
-4. [Arrays en Lussen](../4-arrays-loops/translations/README.nl.md)
-
-### Credits
-
-Deze lessen zijn geschreven met ♥ door [Jasmine Greenaway](https://twitter.com/paladique), [Christopher Harrison](https://twitter.com/geektrainer) en [Chris Noring](https://twitter.com/chris_noring)
\ No newline at end of file
diff --git a/2-js-basics/translations/README.ru.md b/2-js-basics/translations/README.ru.md
deleted file mode 100644
index 0f9d4f41..00000000
--- a/2-js-basics/translations/README.ru.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Введение в 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)
-
-### Благодарность
-
-Эти уроки были ♥️ созданы [Жасмин Гринуэй](https://twitter.com/paladique), [Кристофером Харрисоном](https://twitter.com/geektrainer) и [Крисом Норингом](https://twitter.com/chris_noring).
diff --git a/2-js-basics/translations/README.ta.md b/2-js-basics/translations/README.ta.md
deleted file mode 100644
index 023107b1..00000000
--- a/2-js-basics/translations/README.ta.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# ஜாவாஸ்கிரிப்ட் அறிமுகம்
-
-ஜாவாஸ்கிரிப்ட் என்பது இணையத்தின் மொழி. இந்த நான்கு பாடங்களில், நீங்கள் அதன் அடிப்படைகளை கற்றுக்கொள்வீர்கள்
-
-### தலைப்புகள்
-
-1. [மாறிகள் மற்றும் தரவு வகைகள்](../1-data-types/README.md)
-2. [செயல்பாடுகள் மற்றும் முறைகள்](../2-functions-methods/README.md)
-3. [ஜாவாஸ்கிரிப்ட் மூலம் முடிவுகளை எடுக்க](../3-making-decisions/README.md)
-4. [வரிசைகள் மற்றும் வளையங்கள்](../4-arrays-loops/README.md)
-
-### கடன்கள்
-
-இந்த பாடங்களை [ஜாஸ்மின் கிரீனவே](https://twitter.com/paladique/), [கிறிஸ்டோபர் ஹாரிசன்](https://twitter.com/geektrainer/) மற்றும் [கிறிஸ் நோரிங்](https://twitter.com/chris_noring/) ஆகியோர்  ♥️ எழுதப்பட்டன
\ No newline at end of file
diff --git a/2-js-basics/translations/README.uk.md b/2-js-basics/translations/README.uk.md
deleted file mode 100644
index 9580f0a7..00000000
--- a/2-js-basics/translations/README.uk.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Вступ до 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/2-js-basics/translations/README.zh-cn.md b/2-js-basics/translations/README.zh-cn.md
deleted file mode 100644
index b96fb507..00000000
--- a/2-js-basics/translations/README.zh-cn.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# JavaScript 入门
-
-JavaScript 是 Web 开发的语言。在这四节课中，你将学习它的基础知识。
-
-### 主题
-
-1. [变量和数据类型](../1-data-types/translations/README.zh-cn.md)
-2. [函数和方法](../2-functions-methods/translations/README.zh-cn.md)
-3. [在 JavaScript 中做出决定](../3-making-decisions/translations/README.zh-cn.md)
-4. [数组和循环](../4-arrays-loops/translations/README.zh-cn.md)
-
-### 鸣谢
-
-这些课程由 [Jasmine Greenaway](https://twitter.com/paladique)、[Christopher Harrison](https://twitter.com/geektrainer) 与 [Chris Noring](https://twitter.com/chris_noring) 用 ♥️ 编写
diff --git a/2-js-basics/translations/README.zh-tw.md b/2-js-basics/translations/README.zh-tw.md
deleted file mode 100644
index d6917e7b..00000000
--- a/2-js-basics/translations/README.zh-tw.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# JavaScript 入門
-
-JavaScript 編輯網頁的一種程式語言。在這四堂課中，你會學到它最基本的知識。
-
-### 主題
-
-1. [變數與資料型態](../1-data-types/translations/README.zh-tw.md)
-2. [函式與方法](../2-functions-methods/translations/README.zh-tw.md)
-3. [在 JavaScript 做出決定](../3-making-decisions/translations/README.zh-tw.md)
-4. [矩陣與迴圈](../4-arrays-loops/translations/README.zh-tw.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/translations/README.es.md b/3-terrarium/1-intro-to-html/translations/README.es.md
deleted file mode 100644
index d564dc10..00000000
--- a/3-terrarium/1-intro-to-html/translations/README.es.md
+++ /dev/null
@@ -1,222 +0,0 @@
-# Terrarium Project Parte 1: Introducción a HTML
-
-![Introducción a HTML](/sketchnotes/webdev101-html.png)
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
-
-### Introducción:
-
-HTML, o HyperText Markup Language, es el "esqueleto" de la web. Si CSS 'viste' su HTML y JavaScript le da vida, el cuerpo de su aplicación web es su HTML. La sintaxis de HTML incluso refleja esa idea, ya que incluye etiquetas "head", "body" y "footer".
-
-En esta lección, usaremos HTML para diseñar el 'esqueleto' de la interfaz de nuestro terrario virtual. Tendrá un título y tres columnas: una columna derecha e izquierda donde viven las plantas que se pueden arrastrar, y un área central que será el terrario de vidrio real. Al final de esta lección, podrá ver las plantas en las columnas, pero la interfaz se verá un poco extraña; no se preocupe, en la siguiente sección agregará estilos CSS a la interfaz para que se vea mejor.
-
-### Tarea:
-
-En su computadora, cree una carpeta llamada 'terrario' y dentro de ella, un archivo llamado 'index.html'. Puede hacer esto en Visual Studio Code después de crear su carpeta de terrario abriendo una nueva ventana de VS Code, haciendo clic en 'abrir carpeta' y navegando a su nueva carpeta. Haga clic en el botón pequeño 'archivo' en el panel del Explorador y cree el nuevo archivo:
-
-![explorador en VS Code](../../images/vs-code-index.png)
-
-
-O use estos comandos en tu git bash:
-
-`mkdir terrarium`
-`cd terrarium`
-`touch index.html`
-`code index.html` o `nano index.html`
-
-> Los archivos index.html indican a un navegador que es el archivo predeterminado en una carpeta; Las URL como `https://anysite.com/test` se pueden construir usando una estructura de carpetas que incluya una carpeta llamada `test` con `index.html` dentro; `Index.html` no tiene que aparecer en una URL.
-
----
-
-## 1. Las etiquetas DocType y html
-
-La primera línea de un archivo HTML es su doctype. Es un poco sorprendente que necesite tener esta línea en la parte superior del archivo, pero le dice a los navegadores más antiguos que el navegador necesita representar la página en un modo estándar, siguiendo la especificación html actual.
-
-> Consejo: en VS Code, puede colocar el cursor sobre una etiqueta y obtener información sobre su uso en las guías de referencia de MDN.
-
-La segunda línea debe ser la etiqueta de apertura de la etiqueta `<html>`, seguida ahora por su etiqueta de cierre. Estas etiquetas son los elementos raíz de su interfaz.
-
-### Tarea:
-
-Agrega estas líneas en la parte superior de tu archivo `index.html`:
-
-
-```HTML
-<!DOCTYPE html>
-<html></html>
-```
-
-✅ Hay algunos modos diferentes que se pueden determinar configurando DocType con una cadena de consulta: [Modo Quirks y Modo estándar](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Estos modos solían admitir navegadores realmente antiguos que no se utilizan normalmente en la actualidad (Netscape Navigator 4 e Internet Explorer 5). Puede ceñirse a la declaración de tipo de documento estándar.
-
----
-
-## 2. El 'encabezado' del documento
-
-El área 'encabezado' del documento HTML incluye información crucial sobre su página web, también conocida como [metadatos](https://developer.mozilla.org/docs/Web/HTML/Element/meta). En nuestro caso, le decimos al servidor web al que se enviará esta página para que sea renderizada cuatro cosas:
-
-- el título de la página
-- metadatos de la página que incluyen:
-    - el 'conjunto de caracteres', que indica qué codificación de caracteres se utiliza en la página
-    - información del navegador, incluido `x-ua-compatible`, que indica que el navegador IE = edge es compatible
-    - información sobre cómo debería comportarse la ventana gráfica cuando se carga. Configurar la ventana gráfica para que tenga una escala inicial de 1 controla el nivel de zoom cuando la página se carga por primera vez.
-
-### Tarea:
-
-Agregue un bloque de 'encabezado' a su documento entre las etiquetas de apertura y cierre `<html>`.
-
-```html
-<head>
-	<title>Bienvenida a mi terrario 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>
-```
-
-✅ ¿Qué pasaría si configuras una metaetiqueta de ventana gráfica como esta: `<meta name =" viewport "content =" width = 600 ">`? Obtenga más información sobre [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
-
----
-
-## 3. El `cuerpo` del documento
-
-### Etiquetas HTML
-
-En HTML, agrega etiquetas a su archivo .html para crear elementos de una página web. Cada etiqueta generalmente tiene una etiqueta de apertura y cierre, como esta: `<p>hola</p>` para indicar un párrafo. Cree su interfaz `<body>` agregando un conjunto de etiquetas dentro del par de etiquetas `<html>`; su marcado ahora se ve así:
-
-### Tarea:
-
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Bienvenida a mi terrario 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>
-```
-
-Ahora, puede comenzar a construir su página. Normalmente, usa etiquetas `<div>` para crear los elementos separados en una página. Crearemos una serie de elementos `<div>` que contendrán imágenes.
-
-### Imágenes
-
-Una etiqueta html que no necesita una etiqueta de cierre es la etiqueta `<img>`, porque tiene un elemento `src` que contiene toda la información que la página necesita para representar el elemento.
-
-Cree una carpeta en su aplicación llamada `images` y en ella, agregue todas las imágenes en la [carpeta del código fuente](../../solution/images); (hay 14 imágenes de plantas).
-
-### Tarea:
-
-Agregue esas imágenes de plantas en dos columnas entre las etiquetas `<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. Los Divs se consideran elementos de 'bloque' y los Spans están 'en línea'. ¿Qué pasaría si transformaras estos divs en tramos?
-
-Con este marcado, las plantas ahora aparecen en la pantalla. Se ve bastante mal, porque aún no están diseñados con CSS, y lo haremos en la próxima lección.
-
-Cada imagen tiene una etiqueta alt que aparecerá incluso si no puede ver o representar una imagen. Este es un elemento importante a incluir para la accesibilidad. Obtenga más información sobre accesibilidad en lecciones futuras; Por ahora, recuerde que es importante permitir que los lectores de pantalla recorran su aplicación web para que los usuarios con discapacidad visual puedan utilizar su sitio web.
-
-✅ ¿Notaste que cada imagen tiene la misma etiqueta alt? ¿Es esta una buena práctica? ¿Por qué o por qué no? ¿Puedes mejorar este código?
-
----
-
-## 4. Marcado semántico
-
-En general, es preferible usar 'semántica' al escribir HTML. Qué significa eso? Significa que utiliza etiquetas HTML de la forma en que fueron diseñadas: para representar sus datos; por lo que una etiqueta H1 siempre debe estar presente en una página
-
-Agrega la siguiente línea justo debajo de tu etiqueta de apertura `<body>`:
-
-```html
-<h1>Mi terrario</h1>
-```
-
-El uso de marcado semántico, como que los encabezados sean `<h1>` y las listas desordenadas se representen como `<ul>`, ayuda a los lectores de pantalla a navegar por una página. En general, los botones deben escribirse como `<button>` y las listas deben ser `<li>`. Si bien es _posible_ usar elementos `<span>` de estilo especial con controladores de clic para simular botones, es mejor que los usuarios con capacidades diferentes usen tecnologías para determinar en qué parte de una página reside un botón e interactuar con él, si el elemento aparece como un botón. Por esta razón, intente utilizar el marcado semántico tanto como sea posible.
-
-✅ Eche un vistazo a un lector de pantalla y [cómo interactúa con una página web](https://www.youtube.com/watch?v=OUDV1gqs9GA). ¿Puedes ver por qué tener un marcado no semántico podría confundir al usuario?
-
-## 5. El terrario
-
-La última parte de esta interfaz implica la creación de marcas que se diseñarán para crear un terrario.
-
-### Tarea:
-
-Agregue este marcado encima de la última etiqueta `</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>
-```
-
-✅ Aunque agregó este marcado a la pantalla, no ve absolutamente nada renderizado. ¿Por qué?
-
----
-
-🚀 Desafío: hay algunas etiquetas "antiguas" salvajes en HTML con las que todavía es divertido jugar, aunque no debes usar etiquetas obsoletas como [estas etiquetas](https://developer.mozilla.org/docs/Web/HTML/Element) en su marcado. Aún así, ¿puede usar la antigua etiqueta `<marquee>` para hacer que el título h1 se desplace horizontalmente? (si lo hace, no olvide quitarlo después)
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
-
-## Revisión y autoestudio
-
-HTML es el sistema de bloques de construcción 'probado y verdadero' que ha ayudado a convertir la web en lo que es hoy. Aprenda un poco sobre su historia estudiando algunas etiquetas antiguas y nuevas. ¿Puedes averiguar por qué algunas etiquetas quedaron obsoletas y otras se agregaron? ¿Qué etiquetas podrían introducirse en el futuro?
-
-** Tarea: [Practica tu HTML: crea una maqueta de blog](assignment.es.md)
\ No newline at end of file
diff --git a/3-terrarium/1-intro-to-html/translations/README.fr.md b/3-terrarium/1-intro-to-html/translations/README.fr.md
deleted file mode 100644
index 16ffc862..00000000
--- a/3-terrarium/1-intro-to-html/translations/README.fr.md
+++ /dev/null
@@ -1,233 +0,0 @@
-# Projet Terrarium Partie 1 : Introduction au HTML
-
-![Introduction au HTML](/sketchnotes/webdev101-html.png)
-> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz préalable
-
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=fr)
-
-### Introduction
-
-Le langage HTML (HyperText Markup Language) est le "squelette" du Web. Si le CSS "habille" votre HTML et JavaScript lui donne vie, HTML est le corps de votre application Web. La syntaxe du HTML reflète même cette idée, puisqu'elle comprend des balises "head", "body" et "footer".
-
-Dans cette leçon, nous allons utiliser le HTML pour mettre en page le "squelette" de l'interface de notre terrarium virtuel. Elle comportera un titre et trois colonnes : une colonne de droite et une colonne de gauche où se trouvent les plantes que l'on peut faire glisser, et une zone centrale qui sera le véritable terrarium en verre. À la fin de cette leçon, vous serez en mesure de voir les plantes dans les colonnes, mais l'interface aura un aspect un peu étrange ; ne vous inquiétez pas, dans la section suivante, vous ajouterez des styles CSS à l'interface pour l'améliorer.
-
-### Tâche
-
-Sur votre ordinateur, créez un dossier appelé "terrarium" et, à l'intérieur, un fichier appelé "index.html". Vous pouvez le faire dans Visual Studio Code après avoir créé votre dossier terrarium en ouvrant une nouvelle fenêtre VS Code, en cliquant sur "Ouvrir le dossier" et en naviguant vers votre nouveau dossier. Cliquez sur le petit bouton "file" dans le panneau de l'explorateur et créez le nouveau fichier :
-
-![explorer in VS Code](../images/vs-code-index.png)
-
-Ou alors :
-
-Utilisez ces commandes sur votre terminal git :
-* `mkdir terrarium`
-* `cd terrarium`
-* `touch index.html`
-* `code index.html` ou `nano index.html`
-
-> Les fichiers index.html indiquent au navigateur qu'il s'agit du fichier par défaut d'un dossier ; des URL telles que `https://anysite.com/test` peuvent être construites à l'aide d'une structure de dossiers comprenant un dossier appelé `test` avec `index.html` à l'intérieur ; `index.html` ne doit pas nécessairement apparaître dans une URL.
-
----
-
-## Les balises DocType et html
-
-La première ligne d'un fichier HTML est son doctype. Il est un peu surprenant que cette ligne doive figurer tout en haut du fichier, mais elle indique aux navigateurs plus anciens que le navigateur doit rendre la page en mode standard, conformément à la spécification html actuelle.
-
-> Conseil : dans VS Code, vous pouvez passer la souris sur une balise et obtenir des informations sur son utilisation dans les guides de référence MDN.
-
-La deuxième ligne doit être la balise d'ouverture de la balise `<html>`, suivie tout de suite par sa balise de fermeture `</html>`. Ces balises sont les éléments racine de votre interface.
-
-### Tâche
-
-Ajoutez ces lignes en haut de votre fichier `index.html` :
-
-```HTML
-<!DOCTYPE html>
-<html></html>
-```
-
-✅ Il existe quelques modes différents qui peuvent être déterminés en définissant le DocType avec une chaîne d'interrogation: [Quirks Mode and Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Ces modes permettaient de prendre en charge des navigateurs très anciens qui ne sont plus utilisés de nos jours (Netscape Navigator 4 et Internet Explorer 5). Vous pouvez vous en tenir à la déclaration doctype standard.
-
----
-
-## La "tête" du document
-
-La zone "head" du document HTML contient des informations essentielles sur votre page Web, également appelées [métadonnées](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Dans notre cas, nous indiquons au serveur web auquel cette page sera envoyée pour être rendue, ces quatre choses :
-
--   le titre de la page
--   les métadonnées de la page dont :
-    -   le "jeu de caractères", qui indique le codage des caractères utilisé dans la page.
-    -   des informations sur le navigateur, notamment `x-ua-compatible` qui indique que le navigateur IE=edge est pris en charge
-    -   des informations sur la façon dont la fenêtre d'affichage doit se comporter lorsqu'elle est chargée. Le fait de donner à la fenêtre d'affichage une échelle initiale de 1 permet de contrôler le niveau de zoom lors du premier chargement de la page.
-
-### Tâche
-
-Ajoutez un bloc "head" à votre document, entre les balises d'ouverture et de fermeture `<html>`.
-
-```html
-<head>
-	<title>Welcome to my Virtual Terrarium</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>
-```
-
-✅ Que se passerait-il si vous définissiez une métabalise viewport comme ceci : `<meta name="viewport" content="width=600">`? En savoir plus sur le [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
-
----
-
-## Le "corps" du document
-
-### Balises HTML
-
-En HTML, vous ajoutez des balises à votre fichier .html pour créer les éléments d'une page Web. Chaque balise a généralement une balise d'ouverture et de fermeture, comme ceci : `<p>hello</p>` pour indiquer un paragraphe. Créez le corps de votre interface en ajoutant un ensemble de balises `<body>` à l'intérieur de la paire de balises `<html>` ; votre balisage ressemble maintenant à ceci :
-
-### Tâche
-
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Welcome to my Virtual Terrarium</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>
-```
-
-Maintenant, vous pouvez commencer à construire votre page. Normalement, vous utilisez les balises `<div>` pour créer les différents éléments d'une page. Nous allons créer une série d'éléments `<div>` qui contiendront des images.
-
-### Images
-
-Une balise html qui n'a pas besoin de balise de fermeture est la balise `<img>`, car elle possède un élément `src` qui contient toutes les informations dont la page a besoin pour rendre l'élément.
-
-Créez un dossier dans votre application appelé `images` et ajoutez-y toutes les images du [dossier de code source](../solution/images) ; (il y a 14 images de plantes).
-
-### Tâche
-
-Ajoutez ces images de plantes dans deux colonnes entre les balises `<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>
-```
-
-> Note: Spans et Divs. Les divs sont considérés comme des éléments de type "bloc", tandis que les spans sont "en ligne". Que se passerait-il si vous transformiez ces divs en spans ?
-
-Avec ce balisage, les plantes apparaissent maintenant à l'écran. L'apparence est assez mauvaise, car elles n'ont pas encore été stylisées à l'aide de CSS, ce que nous ferons dans la prochaine leçon.
-
-Chaque image possède un texte alternatif qui s'affiche même si vous ne pouvez pas voir ou rendre l'image. Il s'agit d'un attribut important à inclure pour l'accessibilité. Vous en saurez plus sur l'accessibilité dans les prochaines leçons ; pour l'instant, souvenez-vous que l'attribut alt fournit des informations alternatives pour une image si, pour une raison ou une autre, un utilisateur ne peut pas la voir (en raison d'une connexion lente, d'une erreur dans l'attribut src ou si l'utilisateur utilise un lecteur d'écran).
-
-✅ Avez-vous remarqué que chaque image a la même balise alt ? Est-ce une bonne pratique ? Pourquoi ou pourquoi pas ? Pouvez-vous améliorer ce code ?
-
----
-
-## Le balisage sémantique
-
-En général, il est préférable d'utiliser une "sémantique" significative lors de l'écriture du HTML. Qu'est-ce que cela signifie ? Cela signifie que vous utilisez les balises HTML pour représenter le type de données ou d'interaction pour lequel elles ont été conçues. Par exemple, le texte du titre principal d'une page doit utiliser une balise `<h1>`.
-
-### Tâche
-
-Ajoutez la ligne suivante juste en dessous de votre balise d'ouverture `<body>` :
-
-```html
-<h1>My Terrarium</h1>
-```
-
-L'utilisation de balises sémantiques, telles que des en-têtes `<h1>` et des listes non ordonnées rendues sous la forme de `<ul>`, aide les lecteurs d'écran à naviguer dans une page. En général, les boutons doivent être écrits sous la forme `<button>` et les listes sous la forme `<li>`. S'il est _possible_ d'utiliser des éléments `<span>` spécialement stylisés avec des gestionnaires de clics pour simuler des boutons, il est préférable pour les utilisateurs handicapés d'utiliser des technologies permettant de déterminer où se trouve un bouton sur une page et d'interagir avec lui, si l'élément apparaît comme un bouton. Pour cette raison, essayez d'utiliser le balisage sémantique autant que possible.
-
-✅ Regardez un lecteur d'écran et [comment il interagit avec une page Web](https://www.youtube.com/watch?v=OUDV1gqs9GA). Pouvez-vous comprendre pourquoi un balisage non sémantique peut frustrer l'utilisateur ?
-
-## Le terrarium
-
-La dernière partie de cette interface consiste à créer des balises qui seront stylisées pour créer un terrarium.
-
-### Tâche
-
-Ajoutez cette balise au-dessus de la dernière balise `</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>
-```
-
-✅ Bien que vous ayez ajouté cette balise à l'écran, vous ne voyez absolument rien rendre. Pourquoi ?
-
----
-
-## 🚀Défi
-
-Il existe quelques "vieilles" balises sauvages en HTML avec lesquelles il est encore amusant de jouer, même si vous ne devriez pas utiliser des balises obsolètes telles que [ces balises](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) dans votre balisage. Pouvez-vous utiliser l'ancienne balise `<marquee>` pour faire défiler horizontalement le titre h1 ? (si vous le faites, n'oubliez pas de la supprimer ensuite)
-
-## Quiz de validation des connaissances
-
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=fr)
-
-## Révision et autoformation
-
-Le HTML est le système de blocs de construction qui a contribué à faire du Web ce qu'il est aujourd'hui. Apprenez-en un peu plus sur son histoire en étudiant certaines balises anciennes et nouvelles. Pouvez-vous comprendre pourquoi certaines balises ont été supprimées et d'autres ajoutées ? Quelles balises pourraient être introduites à l'avenir ?
-
-Pour en savoir plus sur la création de sites pour le web et les appareils mobiles, consultez le site [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
-
-
-## Exercice
-
-[Pratiquez votre HTML : Construisez une maquette de blog](assignment.fr.md)
diff --git a/3-terrarium/1-intro-to-html/translations/README.hi.md b/3-terrarium/1-intro-to-html/translations/README.hi.md
deleted file mode 100644
index 24b65aed..00000000
--- a/3-terrarium/1-intro-to-html/translations/README.hi.md
+++ /dev/null
@@ -1,229 +0,0 @@
-# टेरारियम प्रोजेक्ट पार्ट 1: HTML का परिचय
-
-![HTML का परिचय](/sketchnotes/webdev101-html.png)
-> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=hi)
-
-### परिचय
-
-HTML, या HyperText Markup Language, वेब का 'कंकाल' है। यदि CSS आपके HTML और 'ड्रेस अप' को जीवन में लाता है, तो HTML आपके वेब एप्लिकेशन का मुख्य भाग है। HTML का सिंटैक्स भी उस विचार को दर्शाता है, क्योंकि इसमें "head", "body" और "footer" टैग शामिल हैं।
-
-इस पाठ में, हम अपने वर्चुअल टेरारियम के इंटरफ़ेस के 'कंकाल' को लेआउट करने के लिए HTML का उपयोग करने जा रहे हैं। इसमें एक शीर्षक और तीन कॉलम होंगे: एक दाएं और बाएं स्तंभ जहां ड्रैगेबल पौधे रहते हैं, और एक केंद्र क्षेत्र जो वास्तविक ग्लास दिखने वाला टेरारियम होगा। इस पाठ के अंत तक, आप कॉलम में पौधों को देख पाएंगे, लेकिन इंटरफ़ेस थोड़ा अजीब लगेगा; चिंता न करें, अगले भाग में आप सीएसएस शैली को बेहतर बनाने के लिए इंटरफ़ेस में जोड़ देंगे।
-
-### टास्क
-
-अपने कंप्यूटर पर, 'टेरारियम' नामक एक फ़ोल्डर बनाएं और उसके अंदर, एक फ़ाइल 'index.html'। विज़ुअल स्टूडियो कोड में आप ऐसा कर सकते हैं, जब आप एक नया वीएस कोड विंडो खोलकर, 'open folder' पर क्लिक करके, और अपने नए फ़ोल्डर में नेविगेट करके अपना टेरारियम फ़ोल्डर बना सकते हैं। एक्सप्लोरर फलक में छोटे 'फ़ाइल' बटन पर क्लिक करें और नई फ़ाइल बनाएँ:
-
-![explorer in VS Code](../images/vs-code-index.png)
-
-या
-
-अपने git bash पर इन कमांड का उपयोग करें:
-* `mkdir terrarium`
-* `cd terrarium`
-* `touch index.html`
-* `code index.html` या `nano index.html`
-
-> index.html फ़ाइलें एक ब्राउज़र को इंगित करती हैं कि यह एक फ़ोल्डर में डिफ़ॉल्ट फ़ाइल है; URL जैसे `https://anysite.com/test` को एक फ़ोल्डर संरचना का उपयोग करके बनाया जा सकता है, जिसमें इसके अंदर` index` नाम के साथ `test` नामक एक फ़ोल्डर शामिल है; `index.html` को URL में नहीं दिखाना है।
-
----
-
-## DocType और html टैग
-
-HTML फ़ाइल की पहली पंक्ति इसका सिद्धांत है। यह थोड़ा आश्चर्य की बात है कि आपको इस लाइन को फ़ाइल के शीर्ष पर रखने की आवश्यकता है, लेकिन यह पुराने ब्राउज़रों को बताता है कि वर्तमान HTML विनिर्देश के बाद ब्राउज़र को मानक मोड में पृष्ठ को प्रस्तुत करना होगा।
-
-> युक्ति: वीएस कोड में, आप एक टैग पर होवर कर सकते हैं और एमडीएन संदर्भ गाइड से इसके उपयोग के बारे में जानकारी प्राप्त कर सकते हैं।
-
-दूसरी पंक्ति `<html>` टैग का शुरुआती टैग होनी चाहिए, इसके ठीक बाद इसके समापन टैग `</html>` द्वारा होना चाहिए। ये टैग आपके इंटरफ़ेस के मूल तत्व हैं।
-
-### टास्क
-
-अपने `index.html` फ़ाइल के शीर्ष पर इन पंक्तियों को जोड़ें:
-
-```HTML
-<!DOCTYPE html>
-<html></html>
-```
-
-✅ कुछ अलग तरीके हैं जो डॉक टाइप को क्वेरी स्ट्रिंग के साथ निर्धारित करके निर्धारित किए जा सकते हैं: [क्विर्क मोड और स्टैंडर्ड मोड](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). ये मोड वास्तव में पुराने ब्राउज़रों का समर्थन करते थे जो आजकल सामान्य रूप से उपयोग नहीं किए जाते हैं (नेटस्केप नेविगेटर 4 और इंटरनेट एक्सप्लोरर 5)। आप मानक सिद्धांत घोषणा से चिपक सकते हैं।
-
----
-
-## दस्तावेज़ का 'head'
-
-HTML दस्तावेज़ के 'हेड' क्षेत्र में आपके वेब पेज के बारे में महत्वपूर्ण जानकारी शामिल है, जिसे [मेटाडेटा](https://developer.mozilla.org/docs/Web/HTML/Element/meta) के रूप में भी जाना जाता है। हमारे मामले में, हम वेब सर्वर को बताते हैं कि इस पेज को किस पेज पर भेजा जाएगा, ये चार बातें:
-
-- पेज का शीर्षक
-- पृष्ठ मेटाडेटा सहित:
-    - 'वर्ण सेट', पृष्ठ में किस वर्ण एन्कोडिंग का उपयोग किया जाता है, इस बारे में बताना
-    - `x-ua-compatible` सहित ब्राउज़र जानकारी, जो इंगित करता है कि IE = एज ब्राउज़र समर्थित है
-    - लोड होने पर व्यूपोर्ट कैसे व्यवहार करना चाहिए, इसके बारे में जानकारी। जब पृष्ठ पहली बार लोड होता है तो व्यूपोर्ट के शुरुआती स्तर को नियंत्रित करने के लिए व्यूपोर्ट सेट करना 1 को नियंत्रित करता है।
-
-### टास्क
-
-'<Html>' टैग खोलने और बंद करने के बीच अपने दस्तावेज़ में एक 'हेड' ब्लॉक जोड़ें।
-
-```html
-<head>
-	<title>Welcome to my Virtual Terrarium</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>
-```
-
-✅ यदि आप व्यूपोर्ट मेटा टैग इस तरह सेट करते हैं तो क्या होगा: `<meta name="viewport" content="width=600">`? [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) के बारे में और पढ़ें।
----
-
-## दस्तावेज़ की `body`
-
-### HTML टैग्स
-
-HTML में, आप वेब पेज के तत्वों को बनाने के लिए अपने .html फ़ाइल में टैग जोड़ते हैं। प्रत्येक टैग में आमतौर पर एक उद्घाटन और समापन टैग होता है, जैसे: पैराग्राफ को इंगित करने के लिए `<p>hello</ p>`। `<Html>` टैग जोड़ी के अंदर `<body>` टैग का एक सेट जोड़कर अपने इंटरफ़ेस का शरीर बनाएं; आपका मार्कअप अब इस तरह दिखता है:
-
-### टास्क
-
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Welcome to my Virtual Terrarium</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>
-```
-
-अब, आप अपने पृष्ठ का निर्माण शुरू कर सकते हैं। आम तौर पर, आप एक पृष्ठ में अलग-अलग तत्वों को बनाने के लिए `<div>` टैग का उपयोग करते हैं। हम '<div>' तत्वों की एक श्रृंखला बनाएंगे जिसमें चित्र शामिल होंगे।
-
-### इमागेस
-
-एक html टैग जिसे एक समापन टैग की आवश्यकता नहीं है, वह है <<img> `टैग, क्योंकि इसमें एक` src` तत्व है, जिसमें आइटम को रेंडर करने के लिए पृष्ठ की सभी जानकारी शामिल है।
-
-अपने एप्लिकेशन में एक फ़ोल्डर बनाएं, जिसे `images` कहा जाता है और उस में, [स्रोत कोड फ़ोल्डर](../solution/images) में सभी छवियों को जोड़ें; (पौधों की 14 छवियां हैं)।
-
-### टास्क
-
-`<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>
-```
-
-> नोट: स्पैन बनाम डिवाज। डिव को 'ब्लॉक' तत्व माना जाता है और स्पैन को 'इनलाइन'। अगर आप इन डिवो को स्पैन में तब्दील कर देंगे तो क्या होगा?
-
-इस मार्कअप के साथ, पौधे अब स्क्रीन पर दिखाई देते हैं। यह बहुत बुरा लग रहा है, क्योंकि वे अभी तक CSS का उपयोग नहीं कर रहे हैं, और हम अगले पाठ में ऐसा करेंगे।
-
-प्रत्येक छवि में ऑल्ट टेक्स्ट होता है, भले ही आप किसी चित्र को देख या प्रस्तुत नहीं कर सकते हैं। पहुँच के लिए शामिल करने के लिए यह एक महत्वपूर्ण विशेषता है। भविष्य के पाठों में पहुंच के बारे में अधिक जानें; अभी के लिए, याद रखें कि यदि कोई उपयोगकर्ता किसी कारण से इसे नहीं देख सकता है (धीमी गति से कनेक्शन के कारण, src विशेषता में कोई त्रुटि, या यदि उपयोगकर्ता एक स्क्रीन रीडर का उपयोग करता है), तो सर्वोच्च विशेषता किसी छवि के लिए वैकल्पिक जानकारी प्रदान करती है।
-
-✅ क्या आपने देखा कि प्रत्येक छवि का एक ही ऑल्ट टैग है? क्या यह अच्छा अभ्यास है? क्यों या क्यों नहीं? क्या आप इस कोड को सुधार सकते हैं?
-
----
-
-## शब्दार्थ मार्कअप
-
-सामान्य तौर पर, HTML लिखते समय सार्थक 'शब्दार्थ' का उपयोग करना बेहतर होता है। इसका क्या मतलब है? इसका अर्थ है कि आप जिस प्रकार के डेटा या इंटरैक्शन के लिए डिज़ाइन किए गए थे, उनका प्रतिनिधित्व करने के लिए आप HTML टैग का उपयोग करते हैं। उदाहरण के लिए, किसी पृष्ठ पर मुख्य शीर्षक पाठ में `<h1>` टैग का उपयोग करना चाहिए।
-
-अपने उद्घाटन के ठीक नीचे निम्न पंक्ति जोड़ें `<body>` टैग:
-
-```html
-<h1>My Terrarium</h1>
-```
-
-सिमेंटिक मार्कअप का उपयोग करना जैसे हेडर होना `<h1>` और अनऑर्डर किए गए सूचियों को `<ul>` के रूप में प्रस्तुत किया जाना चाहिए। स्क्रीन रीडर्स को पेज के माध्यम से नेविगेट करने में मदद करता है। सामान्य तौर पर, बटन को `<button>` के रूप में लिखा जाना चाहिए और सूचियों को `<li>` होना चाहिए। हालांकि यह संभव नहीं है कि विशेष रूप से स्टाइल किए गए `<span>` 'तत्वों का उपयोग करने के लिए क्लिक हैंडलर के साथ बटन को मॉक करें, अक्षम उपयोगकर्ताओं के लिए प्रौद्योगिकियों का उपयोग करना बेहतर होता है यह निर्धारित करने के लिए कि एक पृष्ठ पर बटन कहाँ रहता है, और इसके साथ बातचीत करने के लिए, यदि तत्व एक के रूप में प्रकट होता है बटन। इस कारण से, संभव के रूप में अर्थ मार्कअप का उपयोग करने का प्रयास करें।
-
-✅ एक स्क्रीन रीडर पर नज़र डालें और [यह कैसे एक वेब पेज के साथ बातचीत करता है](https://www.youtube.com/watch?v=OUDV1gqs9GA)। क्या आप देख सकते हैं कि गैर शब्दार्थ मार्कअप होने से उपयोगकर्ता निराश हो सकता है?
-
-## टेरारियम
-
-इस इंटरफ़ेस के अंतिम भाग में मार्कअप बनाना शामिल है जिसे टेरारियम बनाने के लिए स्टाइल किया जाएगा।
-
-### टास्क:
-
-इस मार्कअप को अंतिम `</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>
-```
-
-✅ हालाँकि आपने इस मार्कअप को स्क्रीन पर जोड़ा है, फिर भी आप बिल्कुल कुछ भी प्रस्तुत नहीं करते हैं। क्यों?
-
----
-
-## 🚀चुनौती
-
-HTML में कुछ जंगली 'पुराने' टैग हैं जो अभी भी खेलने में मज़ेदार हैं, हालांकि आपको [[इन टैग्स](https://developer.mozilla.org/docs/Web/HTML/Element#Obirect_and_deprecated_elements) जैसे अस्वीकृत टैग का उपयोग नहीं करना चाहिए आपके मार्कअप में । फिर भी, आप h1 शीर्षक स्क्रॉल को क्षैतिज रूप से बनाने के लिए पुराने `<marquee>` टैग का उपयोग कर सकते हैं? (यदि आप ऐसा करते हैं, तो इसे बाद में हटाना न भूलें)
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-HTML 'ट्राइ एंड ट्रू' बिल्डिंग ब्लॉक सिस्टम है जिसने वेब को आज के समय में बनाने में मदद की है। कुछ पुराने और नए टैग का अध्ययन करके इसके इतिहास के बारे में थोड़ा जानें। क्या आप यह पता लगा सकते हैं कि कुछ टैग क्यों हटाए गए और कुछ जोड़े गए? भविष्य में कौन से टैग पेश किए जा सकते हैं?
-
-[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academy-13441-cxa) पर वेब और मोबाइल उपकरणों के लिए साइट बनाने के बारे में और जानें।
-
-## असाइनमेंट
-
-[अपने HTML का अभ्यास करें: एक ब्लॉग मॉकअप बनाएँ](assignment.hi.md)
diff --git a/3-terrarium/1-intro-to-html/translations/README.it.md b/3-terrarium/1-intro-to-html/translations/README.it.md
deleted file mode 100644
index 24747d9c..00000000
--- a/3-terrarium/1-intro-to-html/translations/README.it.md
+++ /dev/null
@@ -1,232 +0,0 @@
-# Progetto Terrario Parte 1: Introduzione all'HTML
-
-![Introduzione all'HTML](/sketchnotes/webdev101-html.png)
-> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=it)
-
-### Introduzione
-
-HTML, o HyperText Markup Language, è lo "scheletro" del web. Se CSS "veste" il proprio HTML e JavaScript lo porta in vita, HTML è il corpo della propria applicazione web. Anche La sintassi dell'HTML riflette questa idea, poiché include i tag "head" (testa), "body" (corpo) e "footer" (piè di pagina).
-
-In questa lezione si userà l'HTML per impaginare lo "scheletro" dell'interfaccia del terrario virtuale. Avrà un titolo e tre colonne: una destra e una sinistra dove vivono le piante trascinabili e un'area centrale che sarà il vero terrario dall'aspetto di un vaso di vetro. Alla fine di questa lezione, si sarà in grado di vedere le piante nelle colonne, ma l'interfaccia apparirà un po' strana; non deve preoccupare, nella prossima sezione si aggiungeranno stili CSS all'interfaccia per renderla migliore.
-
-### Attività
-
-Sul proprio computer, creare una cartella chiamata "terrarium" e al suo interno un file chiamato "index.html". Puoi farlo in Visual Studio Code dopo aver creato la cartella del terrario aprendo una nuova finestra di VS Code, facendo clic su "apri cartella" e accedendo alla nuova cartella. Fare clic sul piccolo pulsante "file" nel riquadro Explorer e creare il nuovo file:
-
-![explorer in VS Code](../images/vs-code-index.png)
-
-Oppure
-
-Usare questi comandi sul proprio git bash:
-
-* `mkdir terrarium`
-* `cd terrarium`
-* `touch index.html`
-* `code index.html` oppure `nano index.html`
-
-> I file index.html indicano a un browser che è il file predefinito in una cartella; URL come `https://anysite.com/test` potrebbero essere creati utilizzando una struttura di cartelle che includa una cartella chiamata `test` con `index.html` al suo interno; `index.html` non deve essere visualizzato in un URL.
-
----
-
-## I tag DocType e html
-
-La prima riga di un file HTML è il suo doctype. È un po' sorprendente che sia necessario avere questa riga all'inizio del file, ma indica ai browser meno recenti che il browser deve eseguire il rendering della pagina in una modalità standard, seguendo le specifiche html correnti.
-
-> Suggerimento: in VS Code, si può passare il mouse su un tag e ottenere informazioni sul suo utilizzo dalle guide di riferimento MDN.
-
-La seconda riga dovrebbe essere il tag di apertura del tag `<html>`, seguito subito dal suo tag di chiusura `</html>`. Questi tag sono gli elementi radice dell'interfaccia.
-
-### Attività
-
-Aggiungere queste righe all'inizio del file `index.html` :
-
-```HTML
-<!DOCTYPE html>
-<html></html>
-```
-
-✅ Ci sono alcune modalità differenti che possono essere determinate impostando DocType con una stringa di query: [Quirks Mode e Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). Queste modalità supportano browser molto vecchi che non vengono normalmente utilizzati al giorno d'oggi (Netscape Navigator 4 e Internet Explorer 5). Ci si può attenere alla dichiarazione doctype standard.
-
----
-
-## La "testa" del documento (tag head)
-
-L'area "head" del documento HTML include informazioni cruciali sulla propria pagina web, note anche come [metadati](https://developer.mozilla.org/docs/Web/HTML/Element/meta). In questo caso, si dice al server web a cui verrà inviata questa pagina per essere renderizzata, queste quattro cose:
-
-- il titolo della pagina
-- metadati della pagina tra cui:
-	- l'"insieme di caratteri", che indica quale codifica dei caratteri viene utilizzata nella pagina
-  - informazioni sul browser, incluso `x-ua-compatibile` che indica che il browser IE=edge è supportato
-   - informazioni su come dovrebbe comportarsi il viewport quando viene caricato. L'impostazione della visualizzazione (viewport) in modo che abbia una scala iniziale di 1 controlla il livello di zoom quando la pagina viene caricata per la prima volta.
-
-### Attività
-
-Aggiungere un blocco "head" al proprio documento tra i tag di apertura e di chiusura `<html>`.
-
-```html
-<head>
-	<title>Benvenuti al mio Terrario Virtuale</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>
-```
-
-✅ Cosa accadrebbe se il meta tag viewport viene impostato come questo: `<meta name="viewport" content="width=600">`? Ulteriori informazioni sul [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
-
----
-
-## Il corpo (`body`) del documento
-
-### Etichette HTML
-
-In HTML, si aggiungono tag al proprio file .html per creare elementi di una pagina web. Ogni tag di solito ha un tag di apertura e chiusura, come questo: `<p>ciao</p>` per indicare un paragrafo. Il corpo dell'interfaccia si crea aggiungendo una coppia di  tag `<body>` all'interno della coppia di tag `<html>`; il markup (marcatura) ora ha questo aspetto:
-
-### Attività
-
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Benvenuti al mio Terrario Virtuale</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>
-```
-
-Ora è possibile iniziare a costruire la propria pagina. Normalmente, si usano i tag `<div>` per creare elementi separati in una pagina. Verranno creati una serie di elementi `<div>` che conterranno immagini.
-
-### Immagini
-
-Un tag html che non necessita di un tag di chiusura è il tag `<img>`, perché ha un elemento `src` che contiene tutte le informazioni di cui la pagina ha bisogno per eseguire il rendering dell'elemento.
-
-Creare una cartella nella propria app chiamata `images` e in quella aggiungere tutte le immagini nella [cartella del codice sorgente](../../solution/images); (ci sono 14 immagini di piante).
-
-### Attività
-
-Aggiungere quelle immagini di piante nelle due colonne tra i tag `<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: Span contro Div. I div sono considerati elementi "blocco" e gli span sono "in linea". Cosa succederebbe se si trasformassero questi div in span?
-
-Con questo markup, le piante ora vengono visualizzate sullo schermo. Sembra piuttosto brutto, perché non hanno ancora lo stile utilizzando CSS e verrà fatto nella prossima lezione.
-
-Ogni immagine ha un testo alternativo che apparirà anche se non è possibile vedere o renderizzare un'immagine. Questo è un attributo importante da includere per l'accessibilità. Ulteriori informazioni sull'accessibilità nelle lezioni future; per ora, occorre ricordare che l'attributo alt fornisce informazioni alternative per un'immagine se un utente per qualche motivo non può visualizzarla (a causa di una connessione lenta, un errore nell'attributo src o se l'utente utilizza un lettore di schermo).
-
-✅ Si è notato che ogni immagine ha lo stesso tag alt? È una buona pratica? Se sì, perché? Se no, perché? Si può migliorare questo codice?
-
----
-
-## Markup semantico
-
-In generale, è preferibile utilizzare una "semantica" significativa quando si scrive HTML. Cosa significa? Significa che si utilizzano i tag HTML per rappresentare il tipo di dati o interazione per cui sono stati progettati. Ad esempio, il testo del titolo principale di una pagina dovrebbe utilizzare un tag `<h1>`.
-
-Aggiungere la seguente riga proprio sotto il tag di apertura ` <body> `:
-
-```html
-<h1>My Terrarium</h1>
-```
-
-L'utilizzo di markup semantico tipo avere delle intestazioni come `<h1>` e il rendering di elenchi non ordinati come `<ul>` aiuta i lettori di schermo a navigare in una pagina. In generale, i pulsanti dovrebbero essere scritti come  `<button>` e gli elenchi come `<li>`. Sebbene sia _possibile_ utilizzare elementi con uno stile speciale  `<span>` con gestori di clic per simulare i pulsanti, è meglio per gli utenti disabili utilizzare le tecnologie per determinare dove risiede un pulsante in una pagina e interagire con esso, se l'elemento appare come un pulsante. Per questo motivo, si dovebbe cercare di utilizzare il più possibile il markup semantico.
-
-✅ Si dia un'occhiata a un lettore di schermo e a [come interagisce con una pagina web](https://www.youtube.com/watch?v=OUDV1gqs9GA). Si riusce a capire perché avere un markup non semantico potrebbe frustrare l'utente?
-
-## Il terrario
-
-L'ultima parte di questa interfaccia prevede la creazione di markup che verrà disegnato per creare un terrario.
-
-### Attività:
-
-Aggiungere questo markup sopra l'ultimo 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>
-```
-
-✅ Anche se questo markup è stato aggiunto allo schermo, non si assolutamente nulla di renderizzato. Perché?
-
----
-
-## 🚀 Sfida
-
-Ci sono alcuni "vecchi" selvaggi tag in HTML con cui è ancora divertente giocare, anche se non si dovrebero usare tag deprecati come [questi tag](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) nel proprio markup. Tuttavia, si può usare il vecchio tag `<marquee>` per far scorrere orizzontalmente il titolo h1? (se viene fatto, non dimenticarsi di rimuoverlo dopo)
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=it)
-
-## Revisione e Auto Apprendimento
-
-L'HTML è il sistema di blocchi costitutivi "collaudato e vero" che ha contribuito a trasformare il Web in quello che è oggi. Imparare un po' sulla sua storia studiando alcuni tag vecchi e nuovi. Si riusce a capire perché alcuni tag sono stati deprecati e altri aggiunti? Quali tag potrebbero essere introdotti in futuro?
-
-Ulteriori informazioni sulla creazione di siti per il Web e i dispositivi mobili in [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
-
-
-## Compito
-
-[Fare pratica con il proprio HTML: creare un modello di blog](assignment.it.md)
diff --git a/3-terrarium/1-intro-to-html/translations/README.ja.md b/3-terrarium/1-intro-to-html/translations/README.ja.md
deleted file mode 100644
index f5bb0ef6..00000000
--- a/3-terrarium/1-intro-to-html/translations/README.ja.md
+++ /dev/null
@@ -1,231 +0,0 @@
-# テラリウムプロジェクト その1: HTML 入門
-
-![Introduction to HTML](/sketchnotes/webdev101-html.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=ja)
-
-### イントロダクション
-
-HTML (HyperText Markup Language) は、Web の「骨格」です。CSS が HTML を「ドレスアップ」し、JavaScript が HTML に命を吹き込むとすれば、HTML は Web アプリケーションの本体となります。HTML の構文は、「head」、「body」、「footer」タグを含むため、この考えを反映しています。
-
-このレッスンでは、HTML を使ってバーチャルテラリウムのインターフェースの「骨格」をレイアウトします。タイトルと3つのカラムがあります。右と左のカラムにはドラッグ可能な植物を配置し、中央のエリアには実際のガラス張りのテラリウムを配置します。このレッスンが終わる頃には、列の中に植物が見えるようになると思いますが、インターフェースが少し変な感じになっているかもしれません。
-
-### タスク
-
-コンピュータ上に 'terrarium' というフォルダを作成し、その中に 'index.html' というファイルを作成します。テラリウムのフォルダを作成した後、Visual Studio Code で新しい VS Code ウィンドウを開き、「フォルダを開く」をクリックして新しいフォルダに移動することで、この作業を行うことができます。エクスプローラペインの「ファイル」ボタンをクリックして、新しいファイルを作成してください。
-
-![explorer in VS Code](../images/vs-code-index.png)
-
-もしくは
-
-git bash 上でこれらのコマンドを使用します。
-* `mkdir terrarium`
-* `cd terrarium`
-* `touch index.html`
-* `code index.html` または `nano index.html`
-
-> index.html ファイルはブラウザに対して、それがフォルダ内のデフォルトファイルであることを示します。`https://anysite.com/test` のような URL は、`test` というフォルダを含むフォルダ構造を用いて構築され、その中に `index.html` が含まれているかもしれません。
-
----
-
-## DocType と html タグ
-
-HTML ファイルの最初の行は、その doctype です。ファイルの一番上にこの行が必要なのは少し意外ですが、これはブラウザが現在の HTML 仕様に従った標準モードでページをレンダリングする必要があることを古いブラウザに伝えています。
-
-> ヒント: VS Code では、タグの上にカーソルを置くと MDN リファレンスガイドからタグの使用に関する情報を得ることができます。
-
-2行目は `<html>` タグのオープニングタグであり、それに続くのがクロージングタグ `</html>` です。これらのタグはインターフェイスのルート要素です。
-
-### タスク
-
-これらの行を `index.html` ファイルの先頭に追加します。
-
-```HTML
-<!DOCTYPE html>
-<html></html>
-```
-
-✅ DocType をクエリ文字列で設定することで決定できるモードがいくつかあります。[Quirks モードと Standards モード](https://developer.mozilla.org/ja/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)です。これらのモードは、現在では通常使用されていない本当に古いブラウザ (Netscape Navigator 4 と Internet Explorer 5) をサポートしていました。標準の doctype 宣言に固執することができます。
-
----
-
-## ドキュメントの 'head'
-
-HTML ドキュメントの 'head' 領域には、Web ページに関する重要な情報が含まれており、[メタデータ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/meta)としても知られています。私たちの場合、このページがレンダリングされるために送信される Web サーバーに、以下の4つのことを伝えます。
-
--   ページタイトル
--   次を含むページのメタデータ:
-    -   'character set' で、ページで使われている文字エンコーディングを表します
-    -   IE=edge ブラウザがサポートされていることを示す `x-ua-compatible` などのブラウザ情報
-    -   viewport が読み込まれたときにどのように振る舞うかについての情報を提供します。viewport の初期スケールを 1 に設定すると、ページが最初に読み込まれたときのズームレベルを制御します
-
-### タスク
-
-ドキュメントに 'head' ブロックを `<html>` の開始タグと終了タグの間に追加します。
-
-```html
-<head>
-	<title>Welcome to my Virtual Terrarium</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>
-```
-
-✅ このように viewport の meta タグを設定するとどうなるでしょうか: `<meta name="viewport" content="width=600">`? [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) についてはこちらをご覧ください。
-
----
-
-## ドキュメントの `body`
-
-### HTML タグ
-
-HTML では、.html ファイルにタグを追加して Web ページの要素を作成します。それぞれのタグには通常、次のような開閉タグがあります。段落を示す `<p>hello</p>` のように。`<html>` タグペアの中に `<body>` タグのセットを追加して、インターフェイスのボディを作成します。
-
-### タスク
-
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Welcome to my Virtual Terrarium</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>
-```
-
-これで、ページの構築を始めることができます。通常は `<div>` タグを使ってページ内の個別の要素を作成します。ここでは画像を含む一連の `<div>` 要素を作成します。
-
-### 画像
-
-閉じタグを必要としない html タグの一つに `<img>` タグがあります。なぜなら、ページがアイテムをレンダリングするために必要なすべての情報を含む `src` 要素を持っているからです。
-
-アプリ内に `images` というフォルダを作成し、その中に[ソースコードフォルダ](../../solution/images)内のすべての画像を追加します (植物の画像が14枚あります)。
-
-### タスク
-
-これらの植物の画像を `<body></body>` タグの間の2つのカラムに追加します。
-
-```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>
-```
-
-> 注: Span と Div。Div は「ブロック」要素とみなされ、Span は「インライン」要素とみなされます。これらの Div を Spans に変換するとどうなるでしょうか。
-
-このマークアップで、植物が画面に表示されるようになりました。まだ CSS を使ったスタイリングがされていないので、かなり見栄えが悪いのですが、これは次のレッスンで行います。
-
-それぞれの画像には、画像が見えなくてもレンダリングできなくても表示される alt テキストがあります。これはアクセシビリティのために重要な属性です。アクセシビリティについては、今後のレッスンで詳しく説明します。今のところ、alt 属性は、何らかの理由でユーザーが画像を見ることができない場合 (接続速度が遅い、src 属性のエラー、ユーザーがスクリーンリーダーを使用している場合) に、画像の代替情報を提供することを覚えておいてください。
-
-✅ それぞれの画像に同じ alt タグが付いていることに気付きましたか？これは良い習慣ですか？なぜですか、それともなぜですか? このコードを改善できますか?
-
----
-
-## セマンティックマークアップ
-
-一般的に、HTML を書くときには、意味のある「セマンティックス」を使うことが望ましいとされています。これはどういう意味でしょうか? それは、HTML タグを使用して、データやインタラクションの種類を表すために設計されていることを意味します。例えば、ページのメインタイトルテキストには `<h1>` タグを使うべきです。
-
-`<body>` の開始タグのすぐ下に次の行を追加します。
-
-```html
-<h1>My Terrarium</h1>
-```
-
-ヘッダーを `<h1>` としたり、順序のないリストを `<ul>` とするなど、セマンティックマークアップを使用することで、スクリーンリーダーがページをナビゲートするのに役立ちます。一般的に、ボタンは `<button>` と書き、リストは `<li>` と書くべきです。特別なスタイルの `<span>` 要素とクリックハンドラを使ってボタンを模擬することは可能ですが、障害のあるユーザにとっては、ボタンがページ上のどこにあるかを判断し、要素がボタンとして表示されている場合にそれと対話するための技術を使った方が良いでしょう。このため、できるだけセマンティックマークアップを使うようにしてください。
-
-✅ スクリーンリーダーと[それがどのようにウェブページと相互作用するか](https://www.youtube.com/watch?v=OUDV1gqs9GA)を見てみましょう。意味のないマークアップがあると、なぜユーザーをイライラさせてしまうのかわかりますか?
-
-## テラリウム
-
-このインターフェイスの最後の部分では、テラリウムを作成するためのマークアップを作成します。
-
-### タスク
-
-このマークアップを最後の `</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>
-```
-
-✅ このマークアップを画面に追加したにもかかわらず、何も表示されません。なぜでしょうか?
-
----
-
-## チャレンジ
-
-HTMLに はまだ遊んで楽しいワイルドな「古い」タグがいくつかありますが、[これらのタグ](https://developer.mozilla.org/ja/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)のような非推奨のタグをマークアップに使うべきではありません。それでも、古い `<marquee>` タグを使って h1 タイトルを水平方向にスクロールさせることはできますか？(もしそうする場合は、後から削除することを忘れないでください)
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=ja)
-
-## 復習と自己学習
-
-HTML は、今日のウェブを構築するのに役立ってきた「試行錯誤された」ビルディングブロックシステムです。古いタグと新しいタグを研究することで、その歴史について少し学びましょう。あるタグが非推奨になり、あるタグが追加された理由がわかりますか？将来的にはどのようなタグが導入されるかもしれませんか？
-
-Web やモバイル向けのサイト構築については、[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon) で詳しく解説しています。
-
-
-## 課題
-
-[HTML の練習: ブログのモックアップを構築する](assignment.ja.md)
diff --git a/3-terrarium/1-intro-to-html/translations/README.ko.md b/3-terrarium/1-intro-to-html/translations/README.ko.md
deleted file mode 100644
index 5691e512..00000000
--- a/3-terrarium/1-intro-to-html/translations/README.ko.md
+++ /dev/null
@@ -1,231 +0,0 @@
-# Terrarium 프로젝트 파트 1: HTML 소개
-
-![Introduction to HTML](/sketchnotes/webdev101-html.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=ko)
-
-### 소개
-
-HTML, HyperText Markup Language는 웹의 '뼈대' 입니다. CSS가 HTML과 JavaScript를 '꾸미면' HTML은 웹 애플리케이션의 본체입니다. HTML의 구문은 "head", "body" 그리고 "footer" 태그를 포함하므로 이러한 상상을 반영합니다.
-
-이 강의에서는, HTML을 사용하여 가상 terrarium 인터페이스의 '뼈대'을 구상할 것입니다. 제목과 3개의 열을 가집니다: 드래그 가능한 식물이 살고 있는 오른쪽과 왼쪽 열 그리고 유리처럼 보이는 테라리움이 될 가운데 영역이 있습니다. 이 강의가 끝나면, 열에서 식물을 볼 수 있지만, 인터페이스가 약간 이상하게 보일 것입니다; 걱정하지 마세요. 다음 강의에서는 인터페이스에 CSS 스타일을 추가하여 더 좋아 보이게 만들 것입니다.
-
-### 작업
-
-컴퓨터에서, 'terrarium' 이라는 폴더를 만들고 그 안에 'index.html' 파일을 만듭니다. 새 VS Code 윈도우를 열어서 'open folder'를 클릭하고, terrarium 폴더를 만들면 Visual Studio Code에서 이 작업을 할 수 있습니다. 탐색기에서 작은 'file' 버튼을 클릭하고 새 파일을 만듭니다:
-
-![explorer in VS Code](../images/vs-code-index.png)
-
-또는
-
-git bash에서 아래 명령어를 수행합니다:
-* `mkdir terrarium`
-* `cd terrarium`
-* `touch index.html`
-* `code index.html` 또는 `nano index.html`
-
-> index.html 파일은 브라우저에 폴더의 기본 파일임을 나타냅니다; `https://anysite.com/test`와 같은 URL은 `index.html`이 내부에 있는 `test`라는 폴더에 포함되어 있는 폴더 구조를 사용하여 제작될 수 있습니다; `index.html`은 URL에 표시할 필요가 없습니다.
-
----
-
-## DocType과 html 태그
-
-HTML 파일의 첫 번째 줄은 doctype입니다. 파일 최상단에 줄이 존재해야 된다는 사실에 살짝 놀랐지만, 현재 html 사양에 따라 페이지를 표준 모드로 렌더링해야한다고 오래된 브라우저에 알려줍니다.
-
-> Tip: VS Code에서는, 태그 위에 마우스를 가져가면 MDN 레퍼런스 가이드에서 정보를 얻을 수 있습니다.
-
-두 번째 줄에는 `<html>`이 열어주는 태그이며 그 뒤에 바로 닫는 태그로 `</html>`이 와야합니다. 이러한 태그는 인터페이스의 상위 요소입니다.
-
-### 작업
-
-`index.html` 파일의 상단에 해당 줄들을 추가합니다:
-
-```HTML
-<!DOCTYPE html>
-<html></html>
-```
-
-✅ 쿼리 문자열로 DocType을 설정하여 결정할 수 있는 몇 가지 모드가 있습니다: [Quirks Mode and Standards Mode](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode). 이 모드는 요즘 잘 사용하지 않는 오래된 브라우저를 지원하는 데 사용되었습니다 (Netscape Navigator 4 및 Internet Explorer 5). 표준 doctype 선언을 할 수도 있습니다.
-
----
-
-## 문서의 'head'
-
-HTML 문서의 'head' 영역에는 [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta)라고 하는 웹 페이지의 중요한 정보가 포함되어 있습니다. 우리의 경우에는, 이 페이지가 렌더링될 웹 서버에 다음 4가지를 알립니다.
-
--   페이지의 제목
--   페이지 메타데이터 포함:
-	- 페이지에서 사용되는 문자 인코딩을 알려주는, 'character set'
-    - IE=edge 브라우저가 지원됨을 나타내는 `x-ua-compatible`을 포함한, 브라우저 정보
-    - viewport가 볼러질 때 어떻게 동작해야되는 지에 대한 정보. viewport를 초기 배율 1로 설정하며 처음 불러올 때 줌 수준이 제어됩니다.
-
-### 작업
-
-문서의 열고 닫는 `<html>` 태그 사이에 'head' 블록을 추가합니다.
-
-```html
-<head>
-	<title>Welcome to my Virtual Terrarium</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>
-```
-
-✅ `<meta name="viewport" content="width=600">`과 같이 viewport 메타 태그를 설정하면 어떻게 되나요? [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)에 대해 자세히 알아보세요.
-
----
-
-## 문서의 `body`
-
-### HTML 태그
-
-HTML에서는, .html 파일에 태그를 추가하여 웹 페이지의 요소를 만듭니다. 각 태그에는 단락을 나타내기 위한 `<p>hello</p>` 같이 열고 닫는 태그가 있습니다. `<html>` 태그 쌍 안에 `<body>` 태그 세트를 추가하여 인터페이스의 본문을 만듭니다; 이제 마크업은 다음과 같습니다:
-
-### 작업
-
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Welcome to my Virtual Terrarium</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>
-```
-
-이제 페이지 만들 수 있습니다. 일반적으로 `<div>` 태그를 사용하여 페이지에 별도의 요소를 만듭니다. 이미지를 포함한 일련의 `<div>`요소를 만듭니다.
-
-### 이미지
-
-페이지가 아이템을 렌더링하면서 필요한 모든 정보가 `src` 요소에 들어있기 때문에, `<img>` 태그는 닫는 태그가 필요하지 않은 html 태그입니다.
-
-앱에 `images` 라는 폴더를 만들고, [소스코드 폴더](../images)에 모든 이미지(식물 14개의 이미지)를 모두 추가합니다.
-
-### 작업
-
-식물 이미지를 `<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>
-```
-
-> Note: Spans vs. Divs. Div는 'block' 요소로 간주되고, Span은 'inline'입니다. 이 div를 spans으로 변환하면 어떻게 될까요?
-
-이 마크업을 사용하면, 이제 식물이 화면에 출력됩니다. 아직 CSS로 스타일이 지정되지 않았기 때문에 안 이뻐보입니다. 다음 강의에 그렇게 할 것입니다.
-
-각 이미지에는 이미지를 보거나 렌더링 할 수 없는 경우에 보여지는 alt 태그가 있습니다. 이건 접근성을 위해 있어야 할 중요한 요소입니다. 이후 강의에서 접근성에 대해 자세히 알아보십시오. 지금은 어떤 이유로 이미지를 볼 수 없는 경우(연결이 느리거나, src 속성에 오류가 있거나, 스크린 리더를 사용하는 경우) alt 속성이 이미지의 대체 정보를 제공한다는 점을 기억하시기 바랍니다.
-
-✅ 각 이미지에 같은 alt 태그가 있다는 것을 알았습니까? 이건 좋은 습관일까요? 어떤 이유일까요? 이 코드를 개선할 수 있나요?
-
----
-
-## 시멘틱 마크업
-
-일반적으로, HTML을 작성할 때 'semantics'을 사용하는 것이 좋습니다. 무슨 뜻일까요? 이는 HTML 태그를 디자인된 방식으로 사용한다는 것을 의미합니다: 데이터를 표현하기 위해; 따라서 H1 태그는 항상 페이지에 존재해야 합니다
-
-`<body>` 여는 태그 바로 아래에 다음 줄을 추가합니다:
-
-```html
-<h1>My Terrarium</h1>
-```
-
-헤더가 `<h1>`이고 순서가 지정되지 않은 목록은 `<ul>`로 렌더링하는 것처럼 마크업을 사용하면 스크린 리더가 페이지를 탐색하는 데 도움이 됩니다. 일반적으로, 버튼은 `<button>`으로, 목록은 `<li>`로 작성해야 합니다. 버튼을 구상하기 위해서 클릭 핸들러와 특별히 스타일이 지정된 `<span>` 요소를 사용 _가능하지만_ , differently-abled 사용자는 기술을 사용하여 페이지에 버튼이 있는 위치를 확인하므로 버튼으로 상호 작용하는 것이 더 좋습니다. 이러한 이유로, 가능한 시맨틱 마크업을 사용하십시오.
-
-✅ 스크린 리더를 살펴보고 [웹 페이지와 상호 작용하는 방식](https://www.youtube.com/watch?v=OUDV1gqs9GA)을 살펴보세요. 의미 없는 마크업이 사용자를 혼란스럽게 하는 이유를 알 수 있습니까?
-
-## terrarium
-
-이 인터페이스의 마지막 부분은 terrarium을 만들기 위해 스타일 지정할 마크업을 만드는 것입니다.
-
-### 작업:
-
-마지막 `</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>
-```
-
-✅ 이 마크업을 화면에 추가했지만, 전혀 렌더링이 안됩니다. 왜 그럴까요?
-
----
-
-## 🚀 도전
-
-HTML에는 여전히 재미있고 '오래된' 태그가 있지만, 마크업에서는 [이러한 태그](https://developer.mozilla.org/docs/Web/HTML/Element)처럼 더 이상 사용되지 않는 태그를 쓰면 안됩니다. 그래도, 예전 `<marquee>` 태그를 사용하여 h1 제목을 가로로 스크롤할 수 있습니까? (한다면, 나중에 제거하는 것을 잊지 마십시오)
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-HTML은 웹을 오늘 날의 웹으로 구축하는 데 도움이 준 'tried and true' 빌딩 블록 시스템입니다. 오래된 태그와 새로운 태그를 연구하여 그 역사에 대해 조금 배우십시오. 일부는 더 이상 안 쓰고 일부는 새로 만들어진 이유를 알 수 있습니까? 앞으로 어떤 태그가 도입될까요?
-
-[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)에서 웹과 모바일용 사이트 제작에 대해 자세히 알아보세요.
-
-
-## 과제
-
-[Practice your HTML: Build a blog mockup](../assignment.md)
diff --git a/3-terrarium/1-intro-to-html/translations/README.ms.md b/3-terrarium/1-intro-to-html/translations/README.ms.md
deleted file mode 100644
index fddcdf21..00000000
--- a/3-terrarium/1-intro-to-html/translations/README.ms.md
+++ /dev/null
@@ -1,230 +0,0 @@
-# Projek Terrarium Bahagian 1: Pengenalan Kepada HTML
-
-![Pengenalan Kepada HTML](/sketchnotes/webdev101-html.png)
-> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15)
-
-### Pengenalan
-
-HTML, atau HyperText Markup Language, adalah 'kerangka' web. Sekiranya CSS 'mendandan' HTML dan JavaScript anda menghidupkannya, HTML adalah badan aplikasi web anda. Sintaks HTML bahkan menggambarkan idea itu, kerana ia merangkumi tag "kepala", "badan", dan "footer".
-
-Dalam pelajaran ini, kita akan menggunakan HTML untuk menyusun 'kerangka' antara muka terarium maya kita. Ini akan mempunyai tajuk dan tiga lajur: lajur kanan dan kiri di mana tumbuhan yang boleh diseret hidup, dan kawasan tengah yang akan menjadi terarium yang kelihatan kaca. Pada akhir pelajaran ini, anda akan dapat melihat tanaman di lajur, tetapi antara muka akan kelihatan sedikit pelik; jangan risau, di bahagian seterusnya anda akan menambahkan gaya CSS ke antara muka untuk menjadikannya lebih baik.
-
-### Tugas
-
-Pada komputer anda, buat folder bernama 'terrarium' dan di dalamnya, fail yang bernama 'index.html' Anda boleh melakukannya dalam Visual Studio Code setelah membuat folder terarium anda dengan membuka tetingkap VS Code baru, mengklik 'buka folder', dan menavigasi ke folder baru anda. Klik butang 'fail' kecil di panel Explorer dan buat fail baru:
-
-![explorer dalam VS Code](../images/vs-code-index.png)
-
-Atau
-
-Gunakan arahan ini dalam git bash anda:
-* `mkdir terrarium`
-* `cd terrarium`
-* `touch index.html`
-* `code index.html` atau `nano index.html`
-
-> index.html fail menunjukkan kepada penyemak imbas bahawa ia adalah fail lalai dalam folder; URL seperti `https: // anysite.com / test` mungkin dibina menggunakan struktur folder termasuk folder yang disebut `test` dengan `index.html` di dalamnya; `index.html` tidak perlu dipaparkan dalam URL.
-
----
-
-## Tag DocType dan html
-
-Baris pertama fail HTML adalah doctype. Agak mengejutkan bahawa anda perlu mempunyai baris ini di bahagian paling atas fail, tetapi ia memberitahu penyemak imbas lama bahawa penyemak imbas perlu membuat halaman dalam mod standard, mengikuti spesifikasi html semasa.
-
-> Tip: dalam Kod VS, anda boleh mengarahkan kursor ke atas teg dan mendapatkan maklumat mengenai penggunaannya dari panduan Rujukan MDN.
-
-Baris kedua harus berupa tag pembuka tag `<html>`, diikuti sekarang oleh tag penutupnya `</html>`. Tag ini adalah elemen asas antara interface anda.
-
-### Tugas
-
-Tambahkan baris ini di bahagian atas fail `index.html` anda:
-
-```HTML
-<!DOCTYPE html>
-<html></html>
-```
-
-✅ Terdapat beberapa mod berbeza yang dapat ditentukan dengan menetapkan Jenis Dokumen dengan rentetan pertanyaan: [Mod Quirks dan Mod Piawai](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode) . Mod ini digunakan untuk menyokong penyemak imbas lama yang tidak biasa digunakan pada masa ini (Netscape Navigator 4 dan Internet Explorer 5). Anda boleh berpegang pada pernyataan standard documentype.
-
----
-
-## Dokumen 'head'
-
-Kawasan 'head' dokumen HTML merangkumi maklumat penting mengenai laman web anda, juga dikenali sebagai [metadata](https://developer.mozilla.org/docs/Web/HTML/Element/meta). Dalam kes kami, kami memberitahu pelayan web tempat halaman ini akan dihantar untuk diberikan, empat perkara berikut:
-
-- tajuk halaman
-- metadata halaman termasuk:
-    - 'set watak', menceritakan tentang pengekodan watak apa yang digunakan di halaman
-    - maklumat penyemak imbas, termasuk `x-ua-compatible` yang menunjukkan bahawa penyemak imbas tepi IE = disokong
-    - maklumat tentang bagaimana tingkah laku pandangan harus berkelakuan ketika dimuat. Menetapkan viewport untuk mempunyai skala awal 1 mengawal tahap zoom ketika halaman pertama kali dimuat.
-
-### Tugas
-
-Tambahkan blok 'head' ke dokumen anda di antara tag pembuka dan penutup `<html>`.
-
-```html
-<head>
-	<title>Welcome to my Virtual Terrarium</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>
-```
-
-✅ Apa yang akan berlaku jika anda menetapkan tag meta viewport seperti ini: `<meta name =" viewport "content =" width = 600 ">`? Baca lebih lanjut mengenai [viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag).
-
----
-
-## Dokumen 'body'
-
-### Tag HTML
-
-Dalam HTML, anda menambahkan tag ke fail .html anda untuk membuat elemen halaman web. Setiap tag biasanya memiliki tag pembuka dan penutup, seperti ini: `<p>hello</p>` untuk menunjukkan perenggan. Buat badan antara muka anda dengan menambahkan satu set tag `<body>` di dalam pasangan tag `<html>`; markup anda sekarang kelihatan seperti ini:
-
-### Tugas
-
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Welcome to my Virtual Terrarium</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>
-```
-
-Sekarang, anda boleh mula membina halaman anda. Biasanya, anda menggunakan tag `<div>` untuk membuat elemen yang terpisah dalam halaman. Kami akan membuat rangkaian elemen `<div>` yang akan mengandungi gambar.
-
-### Gambar
-
-Satu tag html yang tidak memerlukan tag penutup adalah tag `<img>`, kerana ia memiliki elemen `src` yang berisi semua informasi yang diperlukan halaman untuk membuat item.
-
-Buat folder di aplikasi anda yang disebut `gambar` dan di dalamnya, tambahkan semua gambar di [folder kod sumber](../solution/images); (terdapat 14 gambar tumbuhan).
-
-### Tugas
-
-Tambahkan gambar tanaman tersebut ke dalam dua lajur di antara tag `<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>
-```
-
-> Catatan: Spans vs Divs. Divs dianggap sebagai elemen 'blok', dan Spans adalah 'sebaris'. Apa yang akan berlaku sekiranya anda mengubah div ini menjadi spans?
-
-Dengan penanda ini, tanaman kini muncul di skrin. Ia kelihatan sangat buruk, kerana mereka belum digayakan menggunakan CSS, dan kami akan melakukannya pada pelajaran seterusnya.
-
-Setiap gambar mempunyai teks alt yang akan muncul walaupun Anda tidak dapat melihat atau membuat gambar. Ini adalah sifat penting untuk disertakan untuk aksesibilitas. Ketahui lebih lanjut mengenai kebolehcapaian dalam pelajaran akan datang; buat masa ini, ingat bahawa atribut alt memberikan maklumat alternatif untuk gambar jika pengguna untuk beberapa sebab tidak dapat melihatnya (kerana sambungan lambat, kesalahan pada atribut src, atau jika pengguna menggunakan pembaca layar).
-
-✅ Adakah anda perhatikan bahawa setiap gambar mempunyai tag alt yang sama? Adakah ini amalan yang baik? Mengapa atau mengapa tidak? Bolehkah anda memperbaiki kod ini?
-
----
-
-## Markup semantik
-
-Secara amnya, lebih baik menggunakan 'semantik' yang bermakna semasa menulis HTML. Apa maksudnya? Ini bermaksud bahawa anda menggunakan tag HTML untuk mewakili jenis data atau interaksi yang dirancang untuknya. Sebagai contoh, teks tajuk utama pada halaman harus menggunakan tag `<h1>`.
-
-Tambahkan baris berikut tepat di bawah tag `<body>` pembuka anda:
-
-```html
-<h1>My Terrarium</h1>
-```
-
-Menggunakan markup semantik seperti header menjadi `<h1>` dan senarai yang tidak disusun akan diberikan sebagai `<ul>` membantu pembaca skrin menavigasi halaman. Secara umum, butang harus ditulis sebagai `<button>` dan senarai harus `<li>`. Walaupun _mungkin_ menggunakan elemen `<span>` yang digayakan khas dengan pengendali klik untuk mengekang butang, lebih baik pengguna kurang upaya menggunakan teknologi untuk menentukan di mana halaman terdapat butang, dan berinteraksi dengannya, jika elemen tersebut muncul sebagai butang. Atas sebab ini, cuba gunakan penanda semantik sebanyak mungkin.
-
-✅ Lihatlah pembaca skrin dan [bagaimanakah ia berinteraksi dengan laman web](https://www.youtube.com/watch?v=OUDV1gqs9GA). Bolehkah anda melihat mengapa mempunyai penanda bukan semantik boleh membuat pengguna kecewa?
-
-## Terrarium
-
-Bahagian terakhir antara muka ini melibatkan membuat markup yang akan digayakan untuk membuat terarium.
-
-### Tugas
-
-Tambahkan markup ini di atas tag `</div>` terakhir:
-
-```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>
-```
-
-✅ Walaupun anda menambahkan markup ini ke skrin, anda tidak dapat melihat apa-apa. Kenapa?
-
----
-
-## 🚀Cabaran
-
-Terdapat beberapa tag 'lawas' liar dalam HTML yang masih menyeronokkan untuk dimainkan, walaupun anda tidak boleh menggunakan tag yang tidak digunakan seperti [tag ini](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements) dalam markup anda. Masih bolehkah anda menggunakan tag `<marquee>` lama untuk menjadikan tajuk h1 menatal secara mendatar? (jika anda melakukannya, jangan lupa membuangnya selepas itu)
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16)
-
-## Mengkaji dan Belajar Sendiri
-
-HTML adalah sistem blok bangunan 'cuba dan benar' yang telah membantu membina web menjadi seperti sekarang. Ketahui sedikit mengenai sejarahnya dengan mempelajari beberapa tanda lama dan baru. Bolehkah anda mengetahui mengapa beberapa teg tidak digunakan lagi dan ada yang ditambahkan? Tag apa yang mungkin diperkenalkan pada masa akan datang?
-
-Ketahui lebih lanjut mengenai membina laman web dan peranti mudah alih di [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=cxaall-4621-cxall).
-
-## Tugasan
-
-[Berlatih HTML anda: Bina mockup blog](assignment.ms.md)
\ No newline at end of file
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
deleted file mode 100644
index 55d367dd..00000000
--- a/3-terrarium/1-intro-to-html/translations/README.pt-BR.md
+++ /dev/null
@@ -1,231 +0,0 @@
-# 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://ashy-river-0debb7803.1.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/Web/HTML/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://ashy-river-0debb7803.1.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-77807-sagibbon).
-
-
-## Atribuiçao
-
-[Pratique seu HTML: Construa uma maquete de blog](assignment.pt-BR.md)
diff --git a/3-terrarium/1-intro-to-html/translations/README.zh-cn.md b/3-terrarium/1-intro-to-html/translations/README.zh-cn.md
deleted file mode 100644
index 35c25b6f..00000000
--- a/3-terrarium/1-intro-to-html/translations/README.zh-cn.md
+++ /dev/null
@@ -1,233 +0,0 @@
-# 花艺瓶项目 Part 1： HTML 简介
-
-![HTML 简介](/sketchnotes/webdev101-html.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 绘制
-
-## 课前测试
-
-[课前测试](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=zh_cn)
-
-### 介绍
-
-HTML，全称 HyperText Markup Language，它是网页的骨架。如果说 CSS 在装扮你的 HTML，并且 JavaScript 让它活起来，HTML 则是你的网页应用程序的身体。而 HTML 的语法也正好能证明这种看法，它包含了名为 "head"（头部）、 "body"（身子） 和 "footer"（脚部） 的标签。
-
-在这次课程中，我们将会使用 HTML 去布局我们的虚拟**花艺瓶**界面的骨架。它将包含一个标题和三列内容：左右两列放置的可以拖拽的植物，中间的区域放置的是一个玻璃造型的花艺瓶。完成这堂课的内容，你应该可以看到放置着植物的列，但界面可能看起来有点奇怪。但没必要担心，在后面的内容里你会使用 CSS 编写样式使得它变得好看起来。
-
-### 任务
-
-在你的电脑上，创建一个名为 'terrarium' 的文件夹，并且在其中创建 'index.html'。你可以在 Visual Studio Code 中打开一个新的 VS Code 窗口去创建你的 terrarium 文件夹，点击「打开文件夹」来查看你的文件目录。在侧边管理面板中点击微小的「文档」按钮來创建新的文件：
-
-![VS Code 的侧边管理面板](../images/vs-code-index.png)
-
-也可以这样
-
-在 git bash 中执行以下命令：
-* `mkdir terrarium`
-* `cd terrarium`
-* `touch index.html`
-* `code index.html` 或是 `nano index.html`
-
-> index.html 文件会被你的浏览器识别为文件夹中的默认要打开的文件。例如这个网址：`https://anysite.com/test` 所对应的项目，是以包含着名为 `test` 目录且该目录存在 `index.html` 文件的结构构建的。并且 `index.html` 不需要展示在网址的末尾。
-
----
-
-## DocType（文档类型声明） 和 html 标签
-
-HTML 文件的第一行就是文档类型声明。要将这一行内容放在文档的最顶端的位置实在会让人有点惊讶，但是它却能告诉旧版本浏览器，它应该使用当前指定的 HTML 规范以标准的模式来渲染页面。
-
-> 提示：在 VS Code 中，你可以把鼠标悬浮在标签上，以此来获取 MDN 参考指南中关于其使用的信息。
-
-文档的第二行就应该是 `<html>` 的起始标签，后面应该跟着的是 `</html>` 的结束标签。这对标签是我们编写的界面的根元素。
-
-### 任务
-
-把这几行内容写到你的 `index.html` 文档开头：
-
-```HTML
-<!DOCTYPE html>
-<html></html>
-```
-
-✅ 通过设置带有查询字符串（query string）的 DocType 可以设定几种不同的模式：[怪异模式与标准模式](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。这些模式用于支持现在非常不常用的古老浏览器(Netscape Navigator 4 和 Internet Explorer 5)。你仍可以使用标准的文档类型声明。
-
----
-
-## 文档的 'head'（脑袋）
-
-HTML 文档中的 'head' 包含的区域有很多关于页面的重要信息，它也被称作[元数据(metadata)](https://developer.mozilla.org/docs/Web/HTML/Element/meta)。在我们的例子中，我们告诉 web 服务器这个页面将依据哪些信息被发送进行渲染，主要是四种:
-
--   网页的标题
--   网页的元数据，它包含：
-    -   字符集(Character Set)，说明在页面中使用的字符编码。
-    -   浏览器信息，包括 `x-ua-compatible`，表示支持 IE=edge 浏览器
-    -   关于视图在加载时应该如何表现的信息。将视口设置为初始比例为 1 可以控制页面首次加载时的缩放级别。
-
-### 任务
-
-在文档中，新增 'head' 部分在 `<html>` 的标签里。
-
-```html
-<head>
-	<title>Welcome to my Virtual Terrarium</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>
-```
-
-✅ 当你把视图信息标签的内容设置成这个样子 `<meta name="viewport" content="width=600">` 会发生什么事情？ 请阅读更多关于 [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) 的信息吧。
-
----
-
-## 文件的 `body`（身子）
-
-### HTML 标签
-
-在 HTML 中，往你的 .html 文档中添加标签去创建元素到你的页面中。每个标签都通常都有一个开始标签和结束标签，像是：`<p>hello</p>` 就表明是一个段落。 使用一组 `<body>` 标签放在 `<html>` 标签中以创建你界面的身体部分，现在你的文档应该变成下面这样：
-
-### 任务
-
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Welcome to my Virtual Terrarium</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>
-```
-
-现在，你可以开始构建你的页面了。一般来说，你会使用 `<div>` 标签在页面中创建单独的元素。我们将创建一系列包含图片的 `<div>` 元素。
-
-### 图片
-
-有一个不需要结束标签的 html 标签就是 `<img>` 标签，因为它有一个 `src` 元素，它包含页面渲染该项所需的所有信息。
-
-在你的项目目录中创建一个名为 `images` 的文件夹，把[源代码文件夹](../../solution/images)中所有的图片都放到新建的文件夹中。（里面总共有14张植物的图片）
-
-### 任务
-
-把这些植物图片分为两列放到 `<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>
-```
-
-> 笔记： Spans 和 Divs。 Divs 是块元素，而 Spans 是行内元素。如果把它们替换了会发生什么？
-
-更新完我们代码后，屏幕上植物图片都展示出来了。只是看起来十分糟糕，因为我们还没有用 CSS 样式来美化它们，我们会在下一节课里面去处理。
-
-每个图像都有 alt 文本，当你无法看到或者无法渲染图片的时候就会出现。这是可访问性的一个重要属性。你可以在在以后的课程中了解更多关于可访问性的内容；现在，只需要记住，如果用户由于某种原因不能查看图像，alt 属性为图像提供替代信息(造成的原因可能有 加载太慢、src 属性错误、或者用户可能使用的是屏幕阅读器等)。
-
-✅ 你注意到每张图片都有相同的 alt 标签了吗？这是好的实现吗？为什么或为什么不？你能改进这个代码吗？
-
----
-
-## 语义化的标签
-
-一般来说，在编写 HTML 时，最好使用有意义的 “语义” 。这是什么意思？这意味着你使用 HTML 标签来表示它们所被设计的数据或交互的类型。举个例子，网页上的核心标题就应该使用 `<h1>` 标签。
-
-在开头的 `<body>` 标签下面添加以下一行:
-
-```html
-<h1>My Terrarium</h1>
-```
-
-使用语义化的标签例如：标题使用 `<h1>` 、无序列表使用 `<ul>` ，这样能帮助屏幕阅读器理解页面的内容。一般来说，按钮需要写作 `<button>` 而列表被写作 `<li>`。并且我们当然 _可以_ 使用有特殊样式的包含点击处理的 `<span>` 元素来当作按钮使用，但如果元素以按钮的形式出现，残疾用户可以很方便的使用现有的技术来确定按钮在页面上的位置，并与之交互。因此，尽量使用语义化的标记。
-
-✅ 看看屏幕阅读器是[如何去处理的一个网页的](https://www.youtube.com/watch?v=OUDV1gqs9GA)。你看到了非语义化标签对他们造成的障碍了吗？
-
----
-
-## 花艺瓶
-
-这个界面的最后一部分涉及创建标记，这些标记后面将被装饰成一个花艺瓶。
-
-### 任务
-
-把这段代码添加到最后一个 `</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>
-```
-
-✅ 即使在屏幕上添加了这些内容，你仍然看不到任何东西渲染出来。为什么?
-
----
-
-## 🚀 挑战
-
-HTML 中还有一些狂野的'旧'标签，玩起来仍然很有趣。虽然[这些标签](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)不推荐你使用，但是，你还是可以试试，能否用 `<marquee>` 标签让 h1 标题文字变成纵向展示的吗？（如果你这么尝试了，不要忘了在后面移除它们）
-
-## 课后测试
-
-[课后测试](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=zh_cn)
-
-## 复习 & 预习
-
-HTML是 '久经考验的' 构建模块系统，它帮助构建了今天的 web 。通过研究一些旧的和新的标签来了解它的历史。你能找出为什么有些标签被弃用而有些被添加吗？未来可能引入哪些标签？
-
-要了解更多关于为 web 和移动设备建立网站的信息，请访问：[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)。
-
-
-## 作业
-
-[练习你的 HTML：建立一个博客模型](assignment.zh-cn.md)
diff --git a/3-terrarium/1-intro-to-html/translations/README.zh-tw.md b/3-terrarium/1-intro-to-html/translations/README.zh-tw.md
deleted file mode 100644
index 3f78b3b6..00000000
--- a/3-terrarium/1-intro-to-html/translations/README.zh-tw.md
+++ /dev/null
@@ -1,231 +0,0 @@
-# 盆栽盒專案 Part 1： HTML 簡介
-
-![HTML 簡介](/sketchnotes/webdev101-html.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/15?loc=zh_tw)
-
-### 大綱
-
-HTML (HyperText Markup Language) 可說是網頁的骨架。若說 CSS 打扮你的 HTML 而 JavaScript 讓它活起來，HTML 則是網頁應用的身體。HTML 的語法甚至佐證前行說明，它包含了 "head"、 "body" 和 "footer" 的標籤。
-
-在這堂課中，我們會使用 HTML 去構建我們盆栽盒的虛擬介面。包含一個標題、三個欄位：左右各一的可拖曳植物欄位與中間的玻璃盆栽罐。這堂課程後，你會看到欄位中有許多盆栽，但介面可能會有點奇怪。不用擔心，往後的課程會講述 CSS 語法來造型化你的介面。
-
-### 課題
-
-在你的電腦上，建立專案資料夾 'terrarium' 並在其中建立檔案 'index.html'。你可以在 Visual Studio Code 中新增 VS Code 視窗建立你的資料夾，點擊「開啟資料夾」來檢視其中。在探索面板中點擊小小的「檔案」按鈕來建立新的檔案：
-
-![VS Code 介面](../images/vs-code-index.png)
-
-或者是
-
-在 git bash 中使用下列指令：
-* `mkdir terrarium`
-* `cd terrarium`
-* `touch index.html`
-* `code index.html` 或 `nano index.html`
-
-> index.html 檔案預設會連接到你的瀏覽器上，以網頁的方式呈現。網址像 `https://anysite.com/test` 會以資料夾結構的方式包含資料夾 `test` 與資料夾內的 `index.html`。`index.html` 不需要出現在網址當中。
-
----
-
-## 文件型別宣告(DocType) 與 html 標籤
-
-HTML 檔案的第一行是文件型別宣告。你會訝異這一行必須存在在檔案首行存在的意義，但這行能告訴舊款瀏覽器這份檔案開啟的模式以及它的定義方式。
-
-> 提示：在 VS Code 中， 你可以把游標放在標籤上，從MDN文件庫中取得標籤的相關資訊。
-
-檔案第二行會是 `<html>` 起始標籤，之後接續著 `</html>` 結束標籤。這項標籤使整個介面的根本。
-
-### 課題
-
-新增這些行到你的 `index.html` 檔案開頭：
-
-```HTML
-<!DOCTYPE html>
-<html></html>
-```
-
-✅ 有許多不一樣的文件型別模式，你可以用 query string 做設定：[怪異模式與標準模式](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)。這些模式用來支援非常古老的瀏覽器，現在可能都不會見到的瀏覽器(Netscape Navigator 4 與 Internet Explorer 5)。 你可以觀看他們的文件型別模式宣告定義。
-
----
-
-## 文件的 'head'
-
-HTML 文件中 'head' 的區域包含很多網頁的重要資訊，也被稱作[元資訊(metadata)](https://developer.mozilla.org/docs/Web/HTML/Element/meta)。我們告訴網頁伺服器我們需要哪些檔案與資訊，主要有四個：
-
--   網頁標題
--   網頁元資訊，包含：
-    -   字元集(Character Set)，解釋網頁字元的編碼方式。
-    -   瀏覽器資訊，包含 `x-ua-compatible` 讓 Internet Explorer Edge 瀏覽器支援的資訊。
-    -   關於裝置的視窗資訊(Viewport)與後續視窗行為的依據。 設定視窗資訊的初始比例為 1 並控制讀取時的縮放大小。
-
-### 課題
-
-在網頁檔中，新增 'head' 區塊在 `<html>` 的標籤之間。
-
-```html
-<head>
-	<title>Welcome to my Virtual Terrarium</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>
-```
-
-✅ 你認為設定下列視窗元資訊 `<meta name="viewport" content="width=600">` 會發生什麼事？ 請閱讀更多有關於 [Viewport](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag) 的資訊。
-
----
-
-## 文件的 `body`
-
-### HTML 標籤
-
-在 HTML 中，新增標籤到你的 .html 檔案中。每個標籤都要有起始標籤與結束標籤，像是： `<p>hello</p>` 來增加文章。 在 `<html>` 標籤中利用一組 `<body>` 標籤建立新的介面內容，現在你的程式呈現如下：
-
-### 課題
-
-```html
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Welcome to my Virtual Terrarium</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>
-```
-
-現在，你可以開始豐富你的網頁內容。通常，你會使用 `<div>` 標籤來建立網頁中不同的元素。我們在一連串的 `<div>` 元素當中新增圖片。
-
-### 圖片
-
-其中一個不需要結束標籤的 html 標籤為 `<img>` 標籤，因為它含有 `src` 元素來提供所有網頁需要取得的資訊。
-
-在專案資料夾中新增一個名叫 `images` 的資料夾，複製[我們提供的圖片](../../solution/images)到資料夾裡面，一共有十四張圖片。
-
-### 課題
-
-新增這些植物圖片到 `<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>
-```
-
-> 筆記： Spans 和 Divs。 Divs 是種「塊」元素，而 Spans 是種「內聯」元素。替換它們會發生什麼事情？
-
-更新這些程式碼後，現在植物出現在畫面上了。他看起來很糟，因為我們還沒用 CSS 來美化它，我們會在下堂課中處理。
-
-每張圖片都有 alt 文字，即使是隱藏起來或沒取得的圖片。它是圖片提供網頁親和力很重要的屬性。你可以在之後學習更多關於網頁親和力的課程。現在，只需要記得 alt 屬性提供而外的圖片資訊，處理用戶無法觀看圖片時的資訊(連線太慢、src 屬性有誤、使用者使用螢幕報讀器......)。
-
-✅ 你有發現每張圖片都有相同的 alt 標籤嗎？這樣合理嗎？為什麼？你能改善它嗎？
-
----
-
-## 語義化標籤
-
-綜觀來說，最好使用普遍意義的標籤名稱。這是什麼意思？這代表你的 HTML 標籤必須表現它的資料型態或是它的功能性。舉例來說，網頁上的標題文字就應該使用 `<h1>` 標籤。
-
-新增下列程式碼到你的 `<body>` 標籤中：
-
-```html
-<h1>My Terrarium</h1>
-```
-
-使用語義化標籤如：標題 `<h1>` 和未排序串列 `<ul>` ，能幫助螢幕報讀器理解網頁的內容。普遍來說，按鈕為 `<button>` 而串列為 `<li>`。我們當然 _可以_ 用自訂義包含按鈕事件的 `<span>` 元素來替代按鈕，但這對障礙者而言，無法直接地理解語法功用會是一種負擔。基於這項原因，盡量只使用語義化標籤。
-
-✅ 看看螢幕報讀器是[如何去處理一個網頁](https://www.youtube.com/watch?v=OUDV1gqs9GA)。 你可以看出非語義化標籤會怎麼阻礙用戶的嗎？
-
-## 盆栽盒
-
-最後一項介面的要素，就是建立一個盆栽盒的雛型。
-
-### 課題：
-
-加入這段程式碼在 `</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>
-```
-
-✅ 即使你在檔案中新增了程式碼，你卻沒看到任何東西。為什麼？
-
----
-
-## 🚀 挑戰
-
-這邊有一些「古老」的 HTML 標籤。雖然[這些標籤](https://developer.mozilla.org/docs/Web/HTML/Element#Obsolete_and_deprecated_elements)被歸為不推薦使用的標籤，但仍值得去嘗試的。你可以用 `<marquee>` 標籤來讓 h1 標題文字變成縱向呈現嗎？實驗完後，記得要移除這些標籤喔。
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/16?loc=zh_tw)
-
-## 複習與自學
-
-HTML 是一種「行之有效」的構築系統，建立了現今的各種網頁。從標籤來學習關於 HTML 的歷史，你能了解為什麼有的標籤被排除，而有的被新增上去嗎？有什麼標籤會在未來被建立上去呢？
-
-學習更多關於建立網頁的資訊：[Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon)。
-
-
-## 作業
-
-[練習 HTML：建立部落格雛形](assignment.zh-tw.md)
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.es.md b/3-terrarium/1-intro-to-html/translations/assignment.es.md
deleted file mode 100644
index cf2ac473..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.es.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Practica tu HTML: crea una maqueta de blog
-
-## Instrucciones
-
-Imagina que está diseñando o rediseñando su sitio web personal. Cree mockup del mismo y luego el HTML que usaría para construir los diversos elementos que componen al mismo. Puede hacer esto en papel y escanearlo, o usar el software de su elección, solo asegúrese de codificar manualmente todo el HTML.
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | -------------------------------------------------- --------------------------------- | -------------------------------------------------- ------------------------------ | -------------------------------------------------- ------------------------------- |
-| | El diseño de un blog se representa visualmente con al menos 10 elementos de marcado mostrados | Un diseño de blog se representa visualmente con alrededor de 5 elementos de marcado mostrados | El diseño de un blog se representa visualmente con un máximo de 3 elementos de marcado mostrados |
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.fr.md b/3-terrarium/1-intro-to-html/translations/assignment.fr.md
deleted file mode 100644
index 56b564f4..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.fr.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Pratiquez votre HTML : créez une maquette de blog
-
-## Instructions
-
-Imaginez que vous concevez, ou reconcevez votre site Web personnel. Créez une maquette graphique de votre site, puis notez le balisage HTML que vous utiliseriez pour créer les différents éléments du site. Vous pouvez le faire sur papier et le numériser, ou utiliser le logiciel de votre choix, assurez-vous simplement de coder manuellement le balisage HTML.
-
-## Rubrique
-
-| Critères | Exemplaire                                                                           | Adéquat                                                                         | Besoin d'amélioration                                                                 |
-| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
-|          | Une mise en page de blog est représentée visuellement avec au moins 10 éléments de balisage affichés | Une mise en page de blog est représentée visuellement avec environ 5 éléments de balisage affichés | Une mise en page de blog est représentée visuellement avec au plus 3 éléments de balisage affichés |
\ No newline at end of file
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.hi.md b/3-terrarium/1-intro-to-html/translations/assignment.hi.md
deleted file mode 100644
index a4e764a6..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.hi.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# अपने HTML का अभ्यास करें: एक ब्लॉग मॉकअप बनाएँ
-
-## अनुदेश
-
-कल्पना कीजिए कि आप अपनी निजी वेब साइट को डिजाइन कर रहे हैं, या नया स्वरूप दे रहे हैं . अपनी साइट का एक चित्रमय मार्कअप बनाएं, और फिर HTML मार्कअप को लिखें, जिसका उपयोग आप साइट के विभिन्न तत्वों का निर्माण करने के लिए करेंगे . आप इसे कागज पर कर सकते हैं, और इसे स्कैन कर सकते हैं, या अपनी पसंद के सॉफ़्टवेयर का उपयोग कर सकते हैं, बस HTML मार्कअप को हाथ से कोड करना सुनिश्चित करें.
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                                                                        | पर्याप्त                                                                       | सुधार की जरूरत                                                                           |
-| ------ | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------- |
-|        | एक ब्लॉग लेआउट को विसुआलय रूप से प्रदर्शित किया जाता है जिसमें कम से कम 10 तत्व प्रदर्शित होते हैं | प्रदर्शित लेआउट के लगभग 5 तत्वों के साथ एक ब्लॉग लेआउट नेत्रहीन दर्शाया गया है | प्रदर्शित लेआउट के अधिकांश 3 तत्वों के साथ एक ब्लॉग लेआउट नेत्रहीन रूप से दर्शाया गया है |
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.it.md b/3-terrarium/1-intro-to-html/translations/assignment.it.md
deleted file mode 100644
index f781db3b..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.it.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Fare pratica con il proprio HTML: creare un modello di blog
-
-## Istruzioni
-
-Immaginare di progettare o riprogettare il proprio sito web personale. Creare un markup grafico del proprio sito, quindi scrivere il markup HTML che si utilizzerebbe per costruire i vari elementi del sito. Si può fare su carta e scansionarlo o utilizzare un software di propria scelta, ci si assicuri solo di codificare manualmente il markup HTML.
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
-|          | La disposizione del blog è rappresentata visivamente con almeno 10 elementi di markup visualizzati | La disposizione del blog è rappresentata visivamente con circa 5 elementi di markup visualizzati | La disposizione del blog è rappresentata visivamente con almeno 3 elementi di markup visualizzati |
\ No newline at end of file
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.ja.md b/3-terrarium/1-intro-to-html/translations/assignment.ja.md
deleted file mode 100644
index e61e4923..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.ja.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# HTML の練習: ブログのモックアップを構築する
-
-## 説明書
-
-個人的な Web サイトをデザインしたり、再デザインしたりしていると想像してみてください。サイトのグラフィカルなマークアップを作成し、サイトの様々な要素を構築するために使用する HTML マークアップを書き留めてください。紙に書いてスキャンしてもいいですし、お好みのソフトウェアを使ってもいいですが、HTML マークアップを手でコーディングして確認してください。
-
-## ルーブリック
-
-| 基準 | 模範的な例                                                                           | 適切な                                                                         | 改善が必要                                                                 |
-| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
-|          | ブログのレイアウトは、少なくとも10個のマークアップ要素が表示された状態で視覚的に表現されます。 | ブログのレイアウトは、マークアップの要素を5つほど表示して視覚的に表現する | ブログのレイアウトは、最大でも3つのマークアップ要素が表示された状態で視覚的に表現されます。 |
\ No newline at end of file
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.ko.md b/3-terrarium/1-intro-to-html/translations/assignment.ko.md
deleted file mode 100644
index e3b67a75..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.ko.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# HTML 연습하기 : 블로그 모형 만들기
-
-## 설명
-
-여러분이 여러분의 개인 웹사이트를 디자인하거나 새로 디자인한다고 상상해봅시다. 여러분의 사이트의 그래픽 마크업을 만들어 봅시다. 그리고 사이트의 여러 요소들을 만드는 데 사용할 HTML 마크업을 작성해 봅시다. 종이에 해서 스캔해도 좋으며, 소프트웨어를 사용해도 좋습니다. HTML 마크업을 손으로 작성해보기만 하면 됩니다.
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 블로그 레이아웃이 10개 이상의 마크업 요소가 표시된 요소들로 표현되는 경우 | 블로그 레이아웃이 5개 정도의 마크업 요소가 표시된 요소들로 표현되는 경우 | 블로그 레이아웃이 최대 3개의  마크업 요소가 표시된 요소들로 표현되는 경우
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.ms.md b/3-terrarium/1-intro-to-html/translations/assignment.ms.md
deleted file mode 100644
index 94371d05..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.ms.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Berlatih HTML anda: Bina mockup blog
-
-## Arahan
-
-Bayangkan anda merancang, atau merancang semula, laman web peribadi anda. Buat markup grafik laman web anda, dan kemudian tuliskan markup HTML yang akan anda gunakan untuk membina pelbagai elemen laman web ini. Anda boleh melakukannya di atas kertas, dan mengimbasnya, atau menggunakan perisian pilihan anda, pastikan anda memasukkan kod HTML dengan tangan.
-
-## Rubrik
-
-| Kriteria | Contoh                                                                           | Mencukupi                                                                         | Usaha Lagi                                                                 |
-| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
-|          | Susun atur blog ditunjukkan secara visual dengan sekurang-kurangnya 10 elemen markup dipaparkan | Susun atur blog ditunjukkan secara visual dengan sekitar 5 elemen markup ditampilkan | Susun atur blog ditunjukkan secara visual dengan paling banyak 3 elemen markup dipaparkan |
\ No newline at end of file
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.nl.md b/3-terrarium/1-intro-to-html/translations/assignment.nl.md
deleted file mode 100644
index 8ba1810d..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.nl.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Oefen uw HTML: maak een blogmodel
-
-## Instructies
-
-Stel u voor dat u uw persoonlijke website ontwerpt of herontwerpt. Maak een grafische mockup van uw site en schrijf vervolgens de HTML-opmaak op die u zou gebruiken om de verschillende elementen van de site uit te bouwen. U kunt dit op papier doen en het scannen, of u kunt software van uw keuze gebruiken. Zorg ervoor dat u de HTML-opmaak met de hand codeert.
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                                                           | Voldoende                                                                         | Moet worden verbeterd                                                                 |
-| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
-|          | Een blog lay-out wordt visueel weergegeven met ten minste 10 weergegeven markeringselementen | Een blog lay-out wordt visueel weergegeven met ongeveer 5 weergegeven markeringselementen | Een blog lay-out wordt visueel weergegeven met maximaal 3 weergegeven markeringselementen |
\ No newline at end of file
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
deleted file mode 100644
index 36b465ea..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.pt-BR.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 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
deleted file mode 100644
index 371cfec2..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.pt.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 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/1-intro-to-html/translations/assignment.zh-cn.md b/3-terrarium/1-intro-to-html/translations/assignment.zh-cn.md
deleted file mode 100644
index ddacc311..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.zh-cn.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 练习 HTML：建立博客雏形
-
-## 简介
-
-想象你正在设计，或重新设计你的个人网站。建立网页的图形设计雏形，然后写下用于构建网站的各种 HTML 标记。你可以写纸上再扫描，或者用软件，只要确保是手写的。
-
-## 评价表
-
-| 指标  | 优秀                               | 良好                         | 尚可进步                       |
-| ----- | --------------------------------- | ---------------------------- | ----------------------------- |
-|       | 可以见到至少 10 种用于博客布局的元素 | 见到大约 5 种用于博客布局的元素 | 见到最多 3 种用于博客布局的元素 |
\ No newline at end of file
diff --git a/3-terrarium/1-intro-to-html/translations/assignment.zh-tw.md b/3-terrarium/1-intro-to-html/translations/assignment.zh-tw.md
deleted file mode 100644
index 45d2397d..00000000
--- a/3-terrarium/1-intro-to-html/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 練習 HTML：建立部落格雛形
-
-## 簡介
-
-想像你正在設計，或重新設計你自己的專屬網頁。建立網頁的圖像設計雛形，並用 HTML 語法建立這些網頁元素。你可以建在紙上並掃描它，或者是建在軟體中，只要確保有 HTML 語法在裡面。
-
-## 學習評量
-
-| 作業內容 | 優良                                 | 普通                            | 待改進                            |
-| -------- | ------------------------------------ | ------------------------------- | --------------------------------- |
-|          | 可以見到部落格編排包含10種以上的元素 | 見到部落格編排大約有 5 種的元素 | 見到部落格編排最多只有 3 種的元素 |
\ No newline at end of file
diff --git a/3-terrarium/2-intro-to-css/translations/README.es.md b/3-terrarium/2-intro-to-css/translations/README.es.md
deleted file mode 100644
index f6ca8588..00000000
--- a/3-terrarium/2-intro-to-css/translations/README.es.md
+++ /dev/null
@@ -1,255 +0,0 @@
-# Terrarium Project Parte 2: Introducción a CSS
-
-![Introducción a CSS](/sketchnotes/webdev101-css.png)
-> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
-
-### Introducción:
-
-CSS, o Cascading Style Sheets, resuelve un problema importante del desarrollo web: cómo hacer que su sitio web se vea bien. Diseñar tus aplicaciones las hace más útiles y atractivas; También puede usar CSS para crear un diseño web receptivo (RWD), lo que permite que sus aplicaciones se vean bien sin importar en qué tamaño de pantalla se muestren. CSS no se trata solo de hacer que su aplicación se vea bien; su especificación incluye animaciones y transformaciones que pueden permitir interacciones sofisticadas para sus aplicaciones. El grupo de trabajo CSS ayuda a mantener las especificaciones CSS actuales; puede seguir su trabajo en el [sitio del World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
-
-> Tenga en cuenta que CSS es un lenguaje que evoluciona, como todo en la web, y no todos los navegadores admiten partes más nuevas de la especificación. Siempre verifique sus implementaciones consultando [CanIUse.com](caniuse.com).
-
-En esta lección, agregaremos estilos a nuestro terrario en línea y aprenderemos más sobre varios conceptos de CSS: la cascada, la herencia y el uso de selectores, posicionamiento y uso de CSS para crear diseños. En el proceso, diseñaremos el terrario y crearemos el terrario en sí.
-
-### Requisito previo:
-
-Debería tener el HTML para su terrario construido y listo para darle estilo.
-
-### Tarea:
-
-En su carpeta de terrario, cree un nuevo archivo llamado `style.css`. Importe ese archivo en la sección `<head>`:
-
-```
-<link rel="stylesheet" href="./style.css" />
-```
-
----
-
-## 1. La cascada
-
-Las hojas de estilo en cascada incorporan la idea de que los estilos 'se mueven en cascada' de manera que la aplicación de un estilo está guiada por su prioridad. Los estilos establecidos por el autor de un sitio web tienen prioridad sobre los establecidos por un navegador. Los estilos configurados 'en línea' tienen prioridad sobre los configurados en una hoja de estilo externa.
-
-### Tarea:
-
-Agrega el estilo en línea "color: red" a tu etiqueta `<h1>`:
-
-```HTML
-<h1 style="color: red">My Terrarium</h1>
-```
-
-Luego, agregue el siguiente código a su archivo `style.css`:
-
-```CSS
-h1 {
- color: blue;
-}
-```
-
-✅ ¿Qué color se muestra en su aplicación web? ¿Por qué? ¿Puedes encontrar una forma de anular estilos? ¿Cuándo querría hacer esto o por qué no?
-
----
-
-## 2. Herencia
-
-Los estilos se heredan de un estilo antepasado a un estilo descendiente, de modo que los elementos anidados heredan los estilos de sus padres.
-
-### Tarea:
-
-Establezca la fuente del cuerpo en una fuente determinada y verifique para ver la fuente de un elemento anidado:
-
-```
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-```
-
-Abra la consola de su navegador en la pestaña 'Elementos' y observe la fuente H1. Hereda su fuente del cuerpo, como se indica en el navegador:
-
-![fuente heredada](../images/1.png)
-
-✅ ¿Puede hacer que un estilo anidado herede una propiedad diferente?
-
----
-
-## 3. Selectores CSS
-
-### Etiquetas
-
-Hasta ahora, su archivo `style.css` tiene solo algunas etiquetas con estilo, y la aplicación se ve bastante extraña:
-
-```
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-
-h1 {
-	color: #3a241d;
-	text-align: center;
-}
-```
-
-Esta forma de diseñar una etiqueta te da control sobre elementos únicos, pero necesitas controlar los estilos de muchas plantas en tu terrario. Para hacer eso, necesita aprovechar los selectores de CSS.
-
-### ID
-
-Agregue un poco de estilo para diseñar los contenedores izquierdo y derecho. Dado que solo hay un contenedor izquierdo y solo un contenedor derecho, se les dan identificadores en el marcado. Para diseñarlos, use `#`:
-
-```
-#left-container {
-	background-color: #eee;
-	width: 15%;
-	left: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-
-#right-container {
-	background-color: #eee;
-	width: 15%;
-	right: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-```
-
-HAquí, ha colocado estos contenedores con posicionamiento absoluto en el extremo izquierdo y derecho de la pantalla, y ha utilizado porcentajes para su ancho para que puedan escalar para pantallas móviles pequeñas.
-
-✅ Este código se repite bastante, por lo tanto, no "DRY" (Don't Repeat yourself: No se repita); ¿Puede encontrar una mejor manera de diseñar estos identificadores, tal vez con un id y una clase? Necesitaría cambiar el marcado y refactorizar el CSS:
-
-```html
-<div id="left-container" class="container"></div>
-```
-
-### Clases
-
-En el ejemplo anterior, diseñó dos elementos únicos en la pantalla. Si desea que los estilos se apliquen a muchos elementos en la pantalla, puede usar clases CSS. Haga esto para colocar las plantas en los contenedores izquierdo y derecho.
-
-Observe que cada planta en el marcado HTML tiene una combinación de identificadores y clases. Los identificadores aquí son utilizados por JavaScript que agregará más adelante para manipular la ubicación de la planta del terrario. Las clases, sin embargo, dan a todas las plantas un estilo determinado.
-
-```html
-<div class="plant-holder">
-	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
-</div>
-```
-
-Agrega lo siguiente a tu archivo `style.css`:
-
-```css
-.plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
-}
-
-.plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
-}
-```
-
-En este fragmento se destaca la mezcla de posicionamiento relativo y absoluto, que cubriremos en la siguiente sección. Eche un vistazo a la forma en que se manejan las alturas por porcentajes:
-
-Establece la altura del soporte de la planta en 13%, un buen número para garantizar que todas las plantas se muestren en cada contenedor vertical sin necesidad de desplazarse.
-
-Configura el soporte de la planta para que se mueva hacia la izquierda para permitir que las plantas estén más centradas dentro de su contenedor. Las imágenes tienen una gran cantidad de fondo transparente para que se puedan arrastrar más, por lo que es necesario empujarlas hacia la izquierda para que quepan mejor en la pantalla.
-
-Luego, a la planta en sí se le asigna un ancho máximo del 150%. Esto permite que se reduzca a medida que el navegador se reduce. Intente cambiar el tamaño de su navegador; las plantas permanecen en sus contenedores pero se reducen para adaptarse.
-
-También es notable el uso del índice z, que controla la altitud relativa de un elemento (de modo que las plantas se sientan en la parte superior del contenedor y parezcan sentarse dentro del terrario).
-
-✅ ¿Por qué necesita tanto un soporte para plantas como un selector CSS de plantas?
-
-## 4. Posicionamiento CSS
-
-Mezclar propiedades de posición (hay posiciones estáticas, relativas, fijas, absolutas y pegajosas) puede ser un poco complicado, pero cuando se hace correctamente, te da un buen control sobre los elementos de tus páginas.
-
-Los elementos de posición absoluta se colocan en relación con sus antepasados ​​colocados más cercanos y, si no hay ninguno, se colocan de acuerdo con el cuerpo del documento.
-
-Los elementos de posición relativa se colocan según las direcciones del CSS para ajustar su ubicación lejos de su posición inicial.
-
-En nuestra muestra, el "plant-holder" es un elemento de posición relativa que se coloca dentro de un contenedor de posición absoluta. El comportamiento resultante es que los contenedores de las barras laterales se sujetan a izquierda y derecha, y el portaplantas se encaja, ajustándose dentro de las barras laterales, dando espacio para que las plantas se coloquen en una fila vertical.
-
-> La `planta` en sí también tiene un posicionamiento absoluto, necesario para que sea arrastrable, como descubrirás en la siguiente lección.
-
-✅ Experimente cambiando los tipos de colocación de los contenedores laterales y el portaplantas. ¿Lo que pasa?
-
-## 5. Diseños CSS
-
-Ahora usará lo que aprendió para construir el terrario en sí, ¡todo usando CSS!
-
-Primero, diseñe los elementos secundarios `.terrarium` div como un rectángulo redondeado usando CSS:
-
-```css
-.jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 1rem;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
-}
-
-.jar-top {
-	width: 50%;
-	height: 5%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 80.5%;
-	left: 25%;
-	opacity: 0.7;
-	z-index: 1;
-}
-
-.jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
-}
-
-.dirt {
-	width: 60%;
-	height: 5%;
-	background: #3a241d;
-	position: absolute;
-	border-radius: 0 0 1rem 1rem;
-	bottom: 1%;
-	left: 20%;
-	opacity: 0.7;
-	z-index: -1;
-}
-```
-
-Tenga en cuenta el uso de porcentajes aquí. Si reduce la escala de su navegador, también puede ver cómo se escalan las esquinas del frasco. Observe también los porcentajes de ancho y alto de los elementos del tarro y cómo cada elemento está absolutamente posicionado en el centro, fijado a la parte inferior de la ventana gráfica.
-
-✅ Intente cambiar los colores y la opacidad del frasco frente a los de la suciedad. ¿Lo que pasa? ¿Por qué?
-
----
-
-🚀 Desafío: agregue un brillo de 'burbuja' al área inferior izquierda del frasco para que se vea más parecido al vidrio. Estarás diseñando el `.jar-glossy-long` y el `.jar-glossy-short` para que parezca un brillo reflejado. Así es como se vería:
-
-![terrario terminado](../images/terrarium-final.png)
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
-
-## Revisión y autoestudio
-
-CSS parece engañosamente sencillo, pero existen muchos desafíos cuando se trata de diseñar una aplicación perfectamente para todos los navegadores y todos los tamaños de pantalla. CSS-Grid y Flexbox son herramientas que se han desarrollado para hacer el trabajo un poco más estructurado y más confiable. Aprende sobre estas herramientas jugando a [Flexbox Froggy](https://flexboxfroggy.com/) y [Grid Garden](https://codepip.com/games/grid-garden/).
-
-**Asignación**: [Refactorización CSS](assignment.es.md)
-
-[Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
diff --git a/3-terrarium/2-intro-to-css/translations/README.fr.md b/3-terrarium/2-intro-to-css/translations/README.fr.md
deleted file mode 100644
index ee615565..00000000
--- a/3-terrarium/2-intro-to-css/translations/README.fr.md
+++ /dev/null
@@ -1,265 +0,0 @@
-# Projet Terrarium Partie 2 : Introduction à CSS
-
-![Introduction to CSS](/sketchnotes/webdev101-css.png)
-> Sketchnote par [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz préalable
-
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=fr)
-
-### Introduction
-
-Les CSS, ou feuilles de style en cascade, résolvent un problème important du développement web : comment rendre votre site web agréable à regarder. Le style de vos applications les rend plus faciles à utiliser et plus belles. Vous pouvez également utiliser les feuilles de style CSS pour créer un design Web réactif (Responsive Web Design, RWD), ce qui permet à vos applications d'être belles quelle que soit la taille de l'écran sur lequel elles sont affichées. CSS n'a pas pour seul but d'améliorer l'apparence de votre application ; ses spécifications incluent des animations et des transformations qui permettent des interactions sophistiquées pour vos applications. Le groupe de travail CSS contribue à la mise à jour des spécifications CSS ; vous pouvez suivre leurs travaux sur le [site du World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
-
-> Remarque : CSS est un langage qui évolue, comme tout ce qui existe sur le Web, et tous les navigateurs ne prennent pas en charge les parties les plus récentes de la spécification. Vérifiez toujours vos implémentations en consultant [CanIUse.com](https://caniuse.com).
-
-Dans cette leçon, nous allons ajouter des styles à notre terrarium en ligne et en apprendre davantage sur plusieurs concepts CSS : la cascade, l'héritage et l'utilisation de sélecteurs, le positionnement et l'utilisation de CSS pour créer des mises en page. Au cours de ce processus, nous allons mettre en page le terrarium et créer le terrarium lui-même.
-
-### Pré-requis
-
-Vous devriez avoir construit le HTML de votre terrarium et être prêt à le styliser.
-
-### Tâches
-
-Dans le dossier de votre terrarium, créez un nouveau fichier appelé `style.css`. Importez ce fichier dans la section `<head>` :
-
-```html
-<link rel="stylesheet" href="./style.css" />
-```
-
----
-
-## La Cascade
-
-Les feuilles de style en cascade intègrent l'idée que les styles sont "en cascade", de sorte que l'application d'un style est guidée par sa priorité. Les styles définis par l'auteur du site Web sont prioritaires sur ceux définis par le navigateur. Les styles définis "en ligne" sont prioritaires par rapport à ceux définis dans une feuille de style externe.
-
-### Tâche
-
-Ajoutez le style en ligne "color : red" à votre balise `<h1>` :
-
-```HTML
-<h1 style="color: red">Mon Terrarium</h1>
-```
-
-Ensuite, ajoutez le code suivant à votre fichier `style.css` :
-
-```CSS
-h1 {
- color: blue;
-}
-```
-
-✅ Quelle couleur s'affiche dans votre application web ? Pourquoi ? Pouvez-vous trouver un moyen de remplacer les styles ? Quand voudriez-vous le faire, ou pourquoi pas ?
-
----
-
-## Héritage
-
-Les styles sont hérités d'un style ancestral à un style descendant, de sorte que les éléments imbriqués héritent des styles de leurs parents.
-
-### Tâche
-
-Définir la police du corps à une police donnée, et vérifier la police d'un élément imbriqué :
-
-```CSS
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-```
-
-Ouvrez la console de votre navigateur dans l'onglet "Éléments" et observez la police de caractères de la page H1. Elle hérite de la police du corps, comme indiqué dans le navigateur :
-
-![police héritée](../images/1.png)
-
-✅ Peut-on faire en sorte qu'un style imbriqué hérite d'une propriété différente ?
-
----
-
-## Sélecteurs CSS
-
-### Balises
-
-Jusqu'à présent, votre fichier `style.css` n'a que quelques balises stylisées, et l'application a un aspect assez étrange :
-
-```CSS
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-
-h1 {
-	color: #3a241d;
-	text-align: center;
-}
-```
-
-Cette façon de styliser une balise vous permet de contrôler des éléments uniques, mais vous devez contrôler les styles de plusieurs plantes de votre terrarium. Pour ce faire, vous devez utiliser les sélecteurs CSS.
-
-### Identifiants
-
-Ajoutez du style pour mettre en page les conteneurs gauche et droit. Comme il n'y a qu'un seul conteneur gauche et qu'un seul conteneur droit, on leur donne des identifiants dans le balisage. Pour leur donner un style, utilisez `#` :
-
-```CSS
-#left-container {
-	background-color: #eee;
-	width: 15%;
-	left: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-
-#right-container {
-	background-color: #eee;
-	width: 15%;
-	right: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-```
-
-Ici, vous avez placé ces conteneurs avec un positionnement absolu à l'extrême gauche et droite de l'écran, et vous avez utilisé des pourcentages pour leur largeur afin qu'ils puissent s'adapter aux petits écrans mobiles.
-
-✅ Ce code est assez répété, donc pas "DRY" (Don't Repeat Yourself) ; pouvez-vous trouver une meilleure façon de styliser ces ids, peut-être avec un id et une classe ? Il faudrait modifier le balisage et remanier le CSS :
-
-```html
-<div id="left-container" class="container"></div>
-```
-
-### Classes
-
-Dans l'exemple ci-dessus, vous avez donné un style à deux éléments uniques de l'écran. Si vous souhaitez que les styles s'appliquent à de nombreux éléments à l'écran, vous pouvez utiliser des classes CSS. Faites-le pour disposer les plantes dans les conteneurs de gauche et de droite.
-
-Remarquez que chaque plante dans le balisage HTML a une combinaison d'identifiants et de classes. Les identifiants sont utilisés par le JavaScript que vous ajouterez plus tard pour manipuler le placement des plantes du terrarium. Les classes, quant à elles, donnent à toutes les plantes un style donné.
-
-```html
-<div class="plant-holder">
-	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
-</div>
-```
-
-Ajoutez ce qui suit à votre fichier `style.css` :
-
-```CSS
-.plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
-}
-
-.plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
-}
-```
-
-Ce qui est remarquable dans cet extrait, c'est le mélange de positionnement relatif et absolu, que nous aborderons dans la section suivante. Jetez un coup d'œil à la façon dont les hauteurs sont traitées par les pourcentages :
-
-Vous définissez la hauteur du porte-plante à 13%, un bon chiffre pour garantir que toutes les plantes sont affichées dans chaque conteneur vertical sans qu'il soit nécessaire de les faire défiler.
-
-Vous réglez le porte-plante pour qu'il se déplace vers la gauche afin de permettre aux plantes d'être plus centrées dans leur conteneur. Les images ont une grande quantité d'arrière-plan transparent afin de les rendre plus glissantes, et doivent donc être déplacées vers la gauche pour mieux s'adapter à l'écran.
-
-Ensuite, la plante elle-même se voit attribuer une largeur maximale de 150 %. Cela lui permet de s'adapter à la taille du navigateur. Essayez de redimensionner votre navigateur ; les plantes restent dans leurs conteneurs, mais leur taille est réduite pour s'adapter.
-
-On notera également l'utilisation du z-index, qui permet de contrôler l'altitude relative d'un élément (de sorte que les plantes se trouvent sur le dessus du récipient et semblent se trouver à l'intérieur du terrarium).
-
-✅ Pourquoi faut-il à la fois un support de plantes et un sélecteur CSS de plantes ?
-
-## Positionnement CSS
-
-Le mélange des propriétés de position (il existe des positions statiques, relatives, fixes, absolues et collantes) peut être un peu délicat, mais lorsqu'il est fait correctement, il vous donne un bon contrôle sur les éléments de vos pages.
-
-Les éléments à positionnement absolu sont positionnés par rapport à leurs ancêtres positionnés les plus proches, et s'il n'y en a pas, ils sont positionnés en fonction du corps du document.
-
-Les éléments positionnés de manière relative sont positionnés en fonction des indications du CSS pour ajuster leur placement par rapport à leur position initiale.
-
-Dans notre exemple, le `plant-holder` est un élément à positionnement relatif qui est positionné dans un conteneur à positionnement absolu. Le comportement qui en résulte est que les conteneurs de la barre latérale sont épinglés à gauche et à droite, et que le porte-plante est imbriqué, s'ajustant lui-même dans les barres latérales, ce qui donne de l'espace pour que les plantes soient placées dans une rangée verticale.
-
-> La `plante` elle-même a également un positionnement absolu, nécessaire pour la rendre glissante, comme vous le découvrirez dans la prochaine leçon.
-
-✅ Expérimentez en changeant les types de positionnement des récipients latéraux et du porte-plante. Que se passe-t-il ?
-
-## Dispositions CSS
-
-Vous allez maintenant utiliser ce que vous avez appris pour construire le terrarium lui-même, tout en utilisant le CSS !
-
-Tout d'abord, donnez aux enfants de la div `.terrarium` le style d'un rectangle arrondi à l'aide de CSS :
-
-```CSS
-.jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 1rem;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
-}
-
-.jar-top {
-	width: 50%;
-	height: 5%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 80.5%;
-	left: 25%;
-	opacity: 0.7;
-	z-index: 1;
-}
-
-.jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
-}
-
-.dirt {
-	width: 60%;
-	height: 5%;
-	background: #3a241d;
-	position: absolute;
-	border-radius: 0 0 1rem 1rem;
-	bottom: 1%;
-	left: 20%;
-	opacity: 0.7;
-	z-index: -1;
-}
-```
-
-Notez l'utilisation des pourcentages ici. Si vous réduisez la taille de votre navigateur, vous pouvez voir comment le bocal est également mis à l'échelle. Remarquez également les pourcentages de largeur et de hauteur des éléments du pot et la manière dont chaque élément est positionné de manière absolue au centre, épinglé au bas de la fenêtre.
-
-Nous utilisons également `rem` pour le border-radius, une longueur relative à la police. Pour en savoir plus sur ce type de mesure relative, consultez la [spécification CSS](https://www.w3.org/TR/css-values-3/#font-relative-lengths).
-
-✅ Essayez de modifier les couleurs et l'opacité du bocal par rapport à celles de la saleté. Que se passe-t-il ? Pourquoi ?
-
----
-
-## 🚀 Défi
-
-Ajoutez un éclat "bulle" à la partie inférieure gauche du pot pour qu'il ressemble davantage à du verre. Vous allez styliser les fichiers `.jar-glossy-long` et `.jar-glossy-short` pour qu'ils ressemblent à une brillance réfléchie. Voici à quoi cela ressemblerait :
-
-![terrarium terminé](../images/terrarium-final.png)
-
-Pour répondre au Quiz de validation des connaissances, suivez ce module d'apprentissage : [Donnez du style à votre application HTML avec CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
-
-## Quiz de validation des connaissances
-
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=fr)
-
-## Révision et étude personnelle
-
-Les feuilles de style en cascade (CSS) sont apparemment très simples, mais les difficultés sont nombreuses lorsqu'il s'agit d'adapter parfaitement une application à tous les navigateurs et à toutes les tailles d'écran. CSS-Grid et Flexbox sont des outils qui ont été développés pour rendre le travail un peu plus structuré et plus fiable. Découvrez ces outils en jouant à [Flexbox Froggy](https://flexboxfroggy.com/) et [Grid Garden](https://codepip.com/games/grid-garden/).
-
-## Affectation
-
-[Refactoring CSS](assignment.fr.md)
diff --git a/3-terrarium/2-intro-to-css/translations/README.hi.md b/3-terrarium/2-intro-to-css/translations/README.hi.md
deleted file mode 100644
index 64b2a99d..00000000
--- a/3-terrarium/2-intro-to-css/translations/README.hi.md
+++ /dev/null
@@ -1,265 +0,0 @@
-# टेरारियम प्रोजेक्ट पार्ट 2: सीएसएस का परिचय
-
-![सीएसएस का परिचय](/sketchnotes/webdev101-css.png)
-> [टोमोमी इमुरा](https://twitter.com/girlie_mac) द्वारा स्केचनेट
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=hi)
-
-### परिचय
-
-CSS, या कैस्केडिंग स्टाइल शीट्स, वेब विकास की एक महत्वपूर्ण समस्या को हल करते हैं: आपकी वेब साइट को कैसे अच्छा बनाया जाए। अपने ऐप्स को स्टाइल करना उन्हें अधिक उपयोगी और अच्छे दिखने वाला बनाता है; आप रिस्पॉन्सिव वेब डिज़ाइन (RWD) बनाने के लिए CSS का भी उपयोग कर सकते हैं - जिससे आपके ऐप्स को कोई फर्क नहीं पड़ता कि वे किस स्क्रीन के आकार को प्रदर्शित करते हैं। CSS केवल आपके ऐप को अच्छा बनाने के बारे में नहीं है; इसकी कल्पना में एनिमेशन और ट्रांसफ़ॉर्म शामिल हैं जो आपके ऐप्स के लिए परिष्कृत इंटरैक्शन सक्षम कर सकते हैं। सीएसएस वर्किंग ग्रुप वर्तमान सीएसएस विनिर्देशों को बनाए रखने में मदद करता है; आप [वर्ल्ड वाइड वेब कंसोर्टियम की साइट](https://www.w3.org/Style/CSS/members) पर उनके काम का अनुसरण कर सकते हैं।
-
-> ध्यान दें, CSS एक ऐसी भाषा है जो वेब पर सब कुछ की तरह विकसित होती है, और सभी ब्राउज़र विनिर्देश के नए भागों का समर्थन नहीं करते हैं। हमेशा [CanIUse.com](https://caniuse.com) से परामर्श करके अपने कार्यान्वयन की जाँच करें।
-
-इस पाठ में, हम अपने ऑनलाइन टेरारियम में शैलियों को जोड़ने जा रहे हैं और कई सीएसएस अवधारणाओं के बारे में अधिक जान सकते हैं: कैस्केड, वंशानुक्रम, और चयनकर्ताओं, स्थिति और लेआउट का निर्माण करने के लिए सीएसएस का उपयोग करना। इस प्रक्रिया में हम टेरारियम लेआउट करेंगे और वास्तविक टेरारियम स्वयं बनाएंगे।
-
-### शर्त
-
-आपके पास निर्मित और तैयार होने के लिए तैयार होने के लिए आपके पास HTML होना चाहिए।
-
-### टास्क
-
-अपने टेरारियम फ़ोल्डर में, `style.css` नामक एक नई फ़ाइल बनाएँ। उस फ़ाइल को `<head>` अनुभाग में आयात करें:
-
-```html
-<link rel="stylesheet" href="./style.css" />
-```
-
----
-
-## कैस्केड
-
-कैस्केडिंग स्टाइल शीट्स इस विचार को शामिल करती है कि शैली 'कैस्केड' ऐसी है कि शैली का अनुप्रयोग इसकी प्राथमिकता द्वारा निर्देशित होता है। एक वेब साइट लेखक द्वारा निर्धारित शैलियाँ एक ब्राउज़र द्वारा सेट किए गए लोगों पर प्राथमिकता देती हैं। स्टाइल्स सेट 'इनलाइन' बाहरी स्टाइल शीट में सेट पर प्राथमिकता लेते हैं।
-
-### टास्क 
-
-इनलाइन शैली "color:red" को अपने `<h1>` टैग में जोड़ें:
-
-```HTML
-<h1 style="color: red">My Terrarium</h1>
-```
-
-फिर, निम्न कोड को अपने `style.css` फ़ाइल में जोड़ें:
-
-```CSS
-h1 {
- color: blue;
-}
-```
-
-✅ आपके वेब ऐप में कौन सा रंग प्रदर्शित होता है? क्यों? क्या आप शैलियों को ओवरराइड करने का एक तरीका खोज सकते हैं? आप ऐसा कब करना चाहेंगे, या क्यों नहीं?
-
----
-
-## इनहेरिटेंस 
-
-पूर्वजों की शैली से वंशजों को वंश प्राप्त होता है, जैसे कि घोंसले वाले तत्व अपने माता-पिता की शैलियों को विरासत में देते हैं।
-
-### टास्क
-
-शरीर के फ़ॉन्ट को दिए गए फ़ॉन्ट पर सेट करें, और नेस्टेड तत्व के फ़ॉन्ट को देखने के लिए जांचें:
-
-```CSS
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-```
-
-अपने ब्राउज़र के कंसोल को 'एलिमेंट्स' टैब में खोलें और H1 के फॉन्ट को देखें। यह शरीर से अपने फ़ॉन्ट को विरासत में प्राप्त करता है, जैसा कि ब्राउज़र के भीतर कहा गया है:
-
-![inherited font](../images/1.png)
-
-✅ क्या आप एक नेस्टेड स्टाइल को एक अलग संपत्ति विरासत में दे सकते हैं?
-
----
-
-## CSS सिलेक्टोर
-
-### टैग्स
-
-अब तक, आपके `style.css` फ़ाइल में केवल कुछ टैग स्टाइल हैं, और एप्लिकेशन बहुत अजीब लग रहा है:
-
-```CSS
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-
-h1 {
-	color: #3a241d;
-	text-align: center;
-}
-```
-
-एक टैग को स्टाइल करने का यह तरीका आपको अद्वितीय तत्वों पर नियंत्रण देता है, लेकिन आपको अपने टेरारियम में कई पौधों की शैलियों को नियंत्रित करने की आवश्यकता है। ऐसा करने के लिए, आपको CSS चयनकर्ताओं का लाभ उठाने की आवश्यकता है।
-
-### आइडी
-
-बाएँ और दाएँ कंटेनरों को लेआउट करने के लिए कुछ शैली जोड़ें। चूंकि केवल एक बाएं कंटेनर और केवल एक सही कंटेनर है, इसलिए उन्हें मार्कअप में आईडी दिए गए हैं। उन्हें स्टाइल करने के लिए, `#` का उपयोग करें:
-
-```CSS
-#left-container {
-	background-color: #eee;
-	width: 15%;
-	left: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-
-#right-container {
-	background-color: #eee;
-	width: 15%;
-	right: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-```
-
-यहां, आपने इन कंटेनरों को स्क्रीन के सबसे बाईं और दाईं ओर पूर्ण स्थिति में रखा है, और उनकी चौड़ाई के लिए प्रतिशत का उपयोग किया है ताकि वे छोटे मोबाइल स्क्रीन के लिए स्केल कर सकें।
-
-✅ यह कोड काफी दोहराया जाता है, इस प्रकार "DRY" (Don't Repeat Yourself); क्या आप इन आईडी को स्टाइल करने का बेहतर तरीका ढूंढ सकते हैं, शायद आईडी और क्लास के साथ? आपको मार्कअप को बदलना होगा और CSS को रिफलेक्टर करना होगा:
-
-```html
-<div id="left-container" class="container"></div>
-```
-
-### क्लाससेस
-
-ऊपर के उदाहरण में, आपने स्क्रीन पर दो अद्वितीय तत्वों को स्टाइल किया है। यदि आप शैली को स्क्रीन पर कई तत्वों पर लागू करना चाहते हैं, तो आप CSS कक्षाओं का उपयोग कर सकते हैं। इसे बाएं और दाएं कंटेनर में पौधों को लेआउट करने के लिए करें।
-
-ध्यान दें कि HTML मार्कअप में प्रत्येक संयंत्र में आईडी और कक्षाओं का एक संयोजन होता है। यहाँ आइडी का उपयोग JavaScript द्वारा किया जाता है जिसे आप बाद में जोड़कर टेरारियम प्लांट प्लेसमेंट में जोड़ देंगे। कक्षाएं, हालांकि, सभी पौधों को एक दी गई शैली देती हैं।
-
-```html
-<div class="plant-holder">
-	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
-</div>
-```
-
-अपने `style.css` फ़ाइल में निम्न जोड़ें:
-
-```CSS
-.plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
-}
-
-.plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
-}
-```
-
-इस स्निपेट में उल्लेखनीय सापेक्ष और पूर्ण स्थिति का मिश्रण है, जिसे हम अगले भाग में कवर करेंगे। एक नज़र जिस तरह से ऊंचाइयों को प्रतिशत द्वारा नियंत्रित किया जाता है:
-
-आपने प्लांट धारक की ऊंचाई 13% तक निर्धारित की, यह सुनिश्चित करने के लिए एक अच्छी संख्या है कि सभी पौधों को प्रत्येक ऊर्ध्वाधर कंटेनर में स्क्रॉल करने की आवश्यकता के बिना प्रदर्शित किया जाता है।
-
-आपने संयंत्र धारक को बाईं ओर जाने के लिए सेट किया है ताकि पौधों को उनके कंटेनर के भीतर और अधिक केंद्रित होने दिया जा सके। चित्रों में बड़ी मात्रा में पारदर्शी पृष्ठभूमि होती है, ताकि उन्हें अधिक खींचने योग्य बनाया जा सके, इसलिए स्क्रीन पर बेहतर ढंग से फिट होने के लिए इसे बाईं ओर धकेलने की आवश्यकता होती है।
-
-फिर, पौधे को अधिकतम 150% की चौड़ाई दी जाती है। यह इसे स्केल करने की अनुमति देता है क्योंकि ब्राउज़र नीचे स्केल करता है। अपने ब्राउज़र का आकार बदलने का प्रयास करें; पौधे अपने कंटेनरों में रहते हैं लेकिन फिट होने के लिए बड़े पैमाने पर होते हैं।
-
-इसके अलावा उल्लेखनीय है जेड-इंडेक्स का उपयोग, जो किसी तत्व की सापेक्ष ऊंचाई को नियंत्रित करता है (ताकि पौधे कंटेनर के ऊपर बैठें और टेरारियम के अंदर बैठें)।
-
-✅ आपको संयंत्र धारक और संयंत्र CSS चयनकर्ता दोनों की आवश्यकता क्यों है?
-
-## सीएसएस पोजिशनिंग
-
-मिक्सिंग पोजीशन प्रॉपर्टीज (इसमें स्टैटिक, रिलेटिव, फिक्स्ड, एब्सोल्यूट और स्टिकी पोजिशंस होते हैं) थोड़ा मुश्किल हो सकता है, लेकिन जब ठीक से किया जाता है तो यह आपके पेजों पर मौजूद तत्वों पर अच्छा नियंत्रण देता है।
-
-निरपेक्ष तैनात तत्व उनके निकटतम पूर्वजों के सापेक्ष तैनात हैं, और यदि कोई नहीं हैं, तो यह दस्तावेज़ निकाय के अनुसार स्थित है।
-
-संबंधित स्थिति को उसके प्रारंभिक स्थान से दूर रखने के लिए सीएसएस के निर्देशों के आधार पर सापेक्ष तत्व तैनात किए जाते हैं।
-
-हमारे नमूने में, `plant-holder` एक रिश्तेदार-तैनात तत्व है जो एक निरपेक्ष-तैनात कंटेनर के भीतर तैनात है। परिणामी व्यवहार यह है कि साइड बार कंटेनरों को बाएं और दाएं पिन किया जाता है, और प्लांट धारक को नेस्टेड किया जाता है, साइड बार के भीतर खुद को समायोजित करते हुए, पौधों को ऊर्ध्वाधर पंक्ति में रखने के लिए जगह दी जाती है।
-
-> `plant` में भी पूर्ण स्थिति होती है, जो आपको इसे खींचने योग्य बनाने के लिए आवश्यक है, जैसा कि आप अगले पाठ में जानेंगे।
-
-✅ साइड कंटेनरों और प्लांट-धारक की स्थिति के प्रकारों को बदलने के साथ प्रयोग। क्या होता है?
-
-## CSS लेऔटस
-
-अब आप सीएसएस का उपयोग करके टेरारियम का निर्माण करने के लिए जो कुछ भी सीखा है, उसका उपयोग करेंगे
-
-पहले, CSS का उपयोग करके एक गोल आयत के रूप में `.terrarium` डिव बच्चों को स्टाइल करें:
-
-```CSS
-.jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 1rem;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
-}
-
-.jar-top {
-	width: 50%;
-	height: 5%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 80.5%;
-	left: 25%;
-	opacity: 0.7;
-	z-index: 1;
-}
-
-.jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
-}
-
-.dirt {
-	width: 60%;
-	height: 5%;
-	background: #3a241d;
-	position: absolute;
-	border-radius: 0 0 1rem 1rem;
-	bottom: 1%;
-	left: 20%;
-	opacity: 0.7;
-	z-index: -1;
-}
-```
-
-यहां प्रतिशत के उपयोग पर ध्यान दें। यदि आप अपने ब्राउज़र को नीचे पैमाने पर रखते हैं, तो आप देख सकते हैं कि जार कैसे स्केल करता है। जार तत्वों के लिए चौड़ाई और ऊँचाई प्रतिशत को भी ध्यान में रखें और प्रत्येक तत्व को केंद्र में कैसे स्थित किया जाए, यह व्यूपोर्ट के तल पर पिन किया गया है।
-
-हम सीमा-त्रिज्या(रैडीअस), फ़ॉन्ट-सापेक्ष लंबाई के लिए `rem` का भी उपयोग कर रहे हैं। इस प्रकार के सापेक्ष माप के बारे में और अधिक पढ़ें [सीएसएस स्पेक्स] (https://www.w3.org/TR/css-values-3/#font-relative-lengths)।
-
-✅ Try changing the jar colors and opacity vs. those of the dirt. What happens? Why?
-
----
-
-## 🚀चुनौती
-
-जार के बाएँ निचले क्षेत्र में एक 'bubble' चमक जोड़ें, ताकि यह अधिक कांच जैसा दिखाई दे। आप एक प्रतिबिंबित चमक की तरह दिखने के लिए `.jar-glossy-long` और `.jar-glossy-short` को स्टाइल करेंगे। यहाँ है कि यह कैसा दिखेगा:
-
-![खतम टेरारियम](../images/terrarium-final.png)
-
-पोस्ट-लेक्चर क्विज को पूरा करने के लिए, इस लर्न मॉड्यूल से गुजरें: [CSS के साथ अपने HTML ऐप को स्टाइल करें](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?tT.mc_id=अकादमिक-13441-cxa)
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-सीएसएस भ्रामक सीधा लगता है, लेकिन सभी ब्राउज़र और सभी स्क्रीन आकारों के लिए पूरी तरह से ऐप को स्टाइल करने की कोशिश करते समय कई चुनौतियां हैं। सीएसएस-ग्रिड और फ्लेक्सबॉक्स ऐसे उपकरण हैं जिन्हें काम को थोड़ा अधिक संरचित और अधिक विश्वसनीय बनाने के लिए विकसित किया गया है। [Flexbox Froggy](https://flexboxfroggy.com/) और [ग्रिड गार्डन](https://codepip.com/games/grid-garden/) खेलकर इन उपकरणों के बारे में जानें।
-
-## असाइनमेंट
-
-[CSS पुनर्रचना](assignment.hi.md)
diff --git a/3-terrarium/2-intro-to-css/translations/README.it.md b/3-terrarium/2-intro-to-css/translations/README.it.md
deleted file mode 100644
index 4a75bbed..00000000
--- a/3-terrarium/2-intro-to-css/translations/README.it.md
+++ /dev/null
@@ -1,263 +0,0 @@
-# Progetto Terrario Parte 2: Introduzione a CSS
-
-![Introduzione a CSS](/sketchnotes/webdev101-css.png)
-> Sketchnote di [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=it)
-
-### Introduzione
-
-CSS, o Cascading Style Sheets (Fogli di Stile a Cascata), risolve un problema importante dello sviluppo web: come rendere piacevole il proprio sito web. Lo stile delle proprie app le rende più utilizzabili e più belle; è anche possibile utilizzare CSS per creare Responsive Web Design (RWD), consentendo alle proprie app di avere un bell'aspetto indipendentemente dalle dimensioni dello schermo su cui vengono visualizzate. CSS non serve solo a rendere bella la propria app; le sue specifiche includono animazioni e trasformazioni che possono consentire interazioni sofisticate per le proprie app. Il CSS Working Group aiuta a mantenere le attuali specifiche CSS; è possibile seguire il loro lavoro sul [sito del World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
-
-> Nota, CSS è un linguaggio che si evolve, come tutto sul web, e non tutti i browser supportano parti più recenti delle specifiche. Controllare sempre le proprie implementazioni consultando [CanIUse.com](https://caniuse.com).
-
-In questa lezione, si aggiungeranno stili al terrario online e si imparerà di più su diversi concetti CSS: la cascata, l'ereditarietà e l'uso di selettori, posizionamento e utilizzo dei CSS per disporre gli elementi. Nel processo si disporrà il posizionamento del terrario e si creerà il terrario stesso.
-
-### Pre-requisiti
-
-L'HTML per il proprio terrario dovrebbe essere a disposizione, costruito e pronto per applicarvi uno stile.
-
-### Attività
-
-Nella cartella terrarium, creare un nuovo file chiamato `style.css`. Importare quel file nella sezione `<head>`:
-
-```html
-<link rel="stylesheet" href="./style.css" />
-```
-
----
-
-## La Cascata
-
-I Fogli di Stile a Cascata (CSS) incorporano l'idea che gli stili "cascano" in modo tale che l'applicazione di uno stile sia guidata dalla sua priorità. Gli stili impostati dall'autore di un sito Web hanno la priorità su quelli impostati da un browser. Gli stili impostati "in linea" hanno la priorità su quelli impostati in un foglio di stile esterno.
-
-### Attività
-
-Aggiungere lo stile in linea "color: red" al tag `<h1>`:
-
-```HTML
-<h1 style="color: red">My Terrarium</h1>
-```
-
-Quindi, aggiungere il seguente codice al proprio file `style.css`:
-
-```CSS
-h1 {
- color: blue;
-}
-```
-
-✅ Quale colore viene visualizzato nella propria app web? Perché? Si riesce a trovare un modo per ignorare gli stili? Quando si vorrebbe farlo o perché no?
-
----
-
-## Ereditarietà
-
-Gli stili vengono ereditati da uno stile antenato a uno discendente, in modo che gli elementi nidificati ereditino gli stili dei loro genitori.
-
-### Attività
-
-Impostare il carattere nell'elemento body su un dato font e controllare per vedere il carattere di un elemento nidificato:
-
-```CSS
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-```
-
-Aprire la console del browser nella scheda "Elementi" e osservare il font di H1. Il suo tipo di font viene ereditato dall'elemento body, come dichiarato all'interno del browser:
-
-![font ereditato](../images/1.png)
-
-✅ È possibile fare in modo che uno stile annidato erediti una proprietà diversa?
-
----
-
-## Selettori CSS
-
-### Tag
-
-Finora, il file `style.css` ha solo pochi tag ai quali si è applicato uno stile e l'app sembra piuttosto strana:
-
-```CSS
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-
-h1 {
-	color: #3a241d;
-	text-align: center;
-}
-```
-
-Questo modo di modellare un tag dà il controllo su elementi unici, ma si devono controllare gli stili di molte piante nel proprio terrario. Per farlo, si devono sfruttare i selettori CSS.
-
-### ID
-
-Viene aggiunto un po' di stile per la disposizione dei contenitori sinistro e destro. Poiché esiste un solo contenitore sinistro e un solo contenitore destro, ad essi vengono forniti degli ID nel markup. Per applicare lo stile, usare `#`:
-
-```CSS
-#left-container {
-	background-color: #eee;
-	width: 15%;
-	left: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-
-#right-container {
-	background-color: #eee;
-	width: 15%;
-	right: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-```
-
-Qui, i contenitori sono stati posizionati con posizionamento assoluto all'estrema sinistra e destra dello schermo e si sono utilizzate le percentuali per la loro larghezza in modo che possano ridimensionarsi per piccoli schermi di dispositivi mobili.
-
-✅ Questo codice è abbastanza ripetuto, quindi non "DRY" (Don't Repeat Yourself - Non ripetere se stessi); si può trovare un modo migliore per applicare uno stile a questi ID, magari con un ID e una classe? Si dovrebbe cambiare il markup e rifattorizzare il CSS:
-
-```html
-<div id="left-container" class="container"></div>
-```
-
-### Classi
-
-Nell'esempio sopra, è stato applicato uno stile a due elementi unici sullo schermo. Se si vuole applicare gli stili a molti elementi sullo schermo, si possono  usare le classi CSS. Si fa questo per disporre le piante nei contenitori sinistro e destro.
-
-Si noti che ogni pianta nel markup HTML ha una combinazione di id e classi. Gli id qui sono usati da JavaScript che verrà aggiunto in seguito per manipolare il posizionamento della pianta nel terrario. Le classi, tuttavia, danno a tutte le piante un determinato stile.
-
-```html
-<div class="plant-holder">
-	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
-</div>
-```
-
-Aggiungere il seguente codice al proprio file `style.css` :
-
-```css
-.plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
-}
-
-.plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
-}
-```
-
-Da notare in questo frammento di codice è la combinazione di posizionamento relativo e assoluto, che verrà trattata nella prossima sezione. Si dia un'occhiata al modo in cui le altezze sono gestite in percentuale:
-
-Si imposta l'altezza del porta piante al 13%, un buon numero per fare in modo che tutte le piante siano esposte in ogni contenitore verticale senza necessità di scorrimento.
-
-Si imposta il supporto della pianta in modo che si sposti a sinistra per consentire alle piante di essere più centrate all'interno del loro contenitore. Le immagini hanno una grande quantità di sfondo trasparente in modo da renderle più trascinabili, quindi devono essere spinte a sinistra per adattarsi meglio allo schermo.
-
-Quindi, alla pianta stessa viene assegnata una larghezza massima (max-width) del 150%. Ciò gli consente di ridimensionarsi man mano che il browser si riduce. Provare a ridimensionare il proprio browser; le piante rimangono nei loro contenitori ma si riducono per adattarsi.
-
-Da notare anche l'uso di z-index, che controlla la profondità relativa di un elemento (in modo che le piante si posizionano sopra il contenitore e sembrano posizionarsi all'interno del terrario).
-
-✅ Perché serve un selettore CSS sia per il supporto che per la pianta stessa?
-
-## Posizionamento CSS
-
-Mescolare le proprietà della posizione - ci sono posizioni statiche (static), relative (relative), fisse (fixed), assolute (absolute) e permanenti (sticky) - può essere un po' complicato, ma se fatto correttamente fornisce un buon controllo sugli elementi delle proprie pagine.
-
-Gli elementi posizionati in modo assoluto sono posizionati rispetto alla posizione dei loro antenati più prossimi e, se non ce ne sono, vengono posizionati in base al corpo (body) del documento.
-
-Gli elementi posizionati in modo relativo sono posizionati in base alle direttive CSS per regolare il loro posizionamento rispetto alla loro posizione iniziale.
-
-In questo esempio, il porta piante `plant-holder` è un elemento in posizione relativa che viene posizionato all'interno di un contenitore in posizione assoluta. Il comportamento risultante è che i contenitori della barra laterale sono bloccati a sinistra e a destra, e il porta piante è annidato, regolando se stesso all'interno delle barre laterali, dando spazio alle piante da posizionare in una fila verticale.
-
-> La classe `plant` stessa ha anche un posizionamento assoluto, necessario per renderla trascinabile, come si scoprirà nella prossima lezione.
-
-✅ Sperimentare cambiando i tipi di posizionamento dei contenitori laterali e del porta pianta. Che cosa accade?
-
-## Disposizione CSS
-
-Ora si utilizzerà ciò che si è appreso per costruire il terrario stesso, il tutto usando CSS!
-
-Innanzitutto, si applica lo stile al div figlio `.terrarium` in modo che sia un rettangolo con bordi arrotondati usando CSS:
-
-```css
-.jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 1rem;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
-}
-
-.jar-top {
-	width: 50%;
-	height: 5%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 80.5%;
-	left: 25%;
-	opacity: 0.7;
-	z-index: 1;
-}
-
-.jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
-}
-
-.dirt {
-	width: 60%;
-	height: 5%;
-	background: #3a241d;
-	position: absolute;
-	border-radius: 0 0 1rem 1rem;
-	bottom: 1%;
-	left: 20%;
-	opacity: 0.7;
-	z-index: -1;
-}
-```
-
-Notare l'uso delle percentuali qui. Se si riduce la finestra del browser, si puòi vedere come si ridimensionano anche gli angoli del barattolo. Notare anche le percentuali di larghezza e altezza per gli elementi jar e come ogni elemento sia posizionato in modo assoluto al centro, bloccato nella parte inferiore della finestra visualizzata.
-
-✅ Provare a cambiare i colori e l'opacità del barattolo rispetto a quelli della terra. Che cosa accade? Perché?
-
----
-
-## 🚀 Sfida
-
-Aggiungere una lucentezza a forma di bolla nell'area inferiore sinistra del barattolo per farlo sembrare più simile al vetro. Si parte applicando lo stile `.jar-glossy-long` e  `.jar-glossy-short` per ottenere la senzazione di una lucentezza riflessa. Ecco come dovrebbe apparire:
-
-![terrario finito](../images/terrarium-final.png)
-
-Per completare il quiz post-lezione, seguire questo modulo di apprendimento: [Applicare uno stile al codice HTML con CSS](https://docs.microsoft.com/it-it/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=it)
-
-## Revisione e Auto Apprendimento
-
-CSS sembra apparentemente semplice, ma ci sono molte sfide quando si cerca di modellare un'app perfettamente per tutti i browser e tutte le dimensioni dello schermo. CSS-Grid e Flexbox sono strumenti che sono stati sviluppati per rendere il lavoro un po' più strutturato e più affidabile. Scoprire questi strumenti giocando a [Flexbox Froggy](https://flexboxfroggy.com/) e [Grid Garden](https://codepip.com/games/grid-garden/).
-
-## Compito
-
-[Refattorizzare CSS](assignment.it.md)
diff --git a/3-terrarium/2-intro-to-css/translations/README.ja.md b/3-terrarium/2-intro-to-css/translations/README.ja.md
deleted file mode 100644
index 4eb3f8f2..00000000
--- a/3-terrarium/2-intro-to-css/translations/README.ja.md
+++ /dev/null
@@ -1,263 +0,0 @@
-# テラリウムプロジェクト その2: CSS 入門
-
-![Introduction to CSS](/sketchnotes/webdev101-css.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=ja)
-
-### イントロダクション
-
-CSS (カスケードスタイルシート) は、Web 開発の重要な問題である、Web サイトの見栄えを良くする方法を解決します。また、CSS を使用してレスポンシブ ウェブ デザイン (RWD) を作成することもできます。CSS の仕様には、アプリケーションの洗練されたインタラクションを可能にするアニメーションや変換が含まれています。CSS Working Group は現在の CSS 仕様の維持を支援しており、[World Wide Web Consortium のサイト](https://www.w3.org/Style/CSS/members) でその活動を追うことができます。
-
-> 注: CSS は Web 上のすべてのものと同様に進化する言語であり、すべてのブラウザが仕様の新しい部分をサポートしているわけではありません。常に [CanIUse.com](https://caniuse.com) を参照して実装を確認してください。
-
-このレッスンでは、オンラインテラリウムにスタイルを追加し、カスケード、継承、セレクタの使用、配置、CSS を使ったレイアウトの作成など、CSS の概念について学びます。その過程で、テラリウムをレイアウトし、実際のテラリウムを作成していきます。
-
-### 前提条件
-
-テラリウムの HTML が完成し、スタイリングの準備が整っています。
-
-### タスク
-
-テラリウムのフォルダに `style.css` というファイルを作成します。そのファイルを `<head>` セクションにインポートしてください。
-
-```html
-<link rel="stylesheet" href="./style.css" />
-```
-
----
-
-## カスケード
-
-カスケーディングスタイルシートは、スタイルの適用がその優先度によって導かれるように、スタイルが「カスケード」するという考えを取り入れています。Web サイトの作者によってセットされたスタイルはブラウザによってセットされたそれらより優先されます。「インライン」にセットされたスタイルは外部スタイルシートにセットされたものより優先されます。
-
-### タスク
-
-インラインスタイル "color: red" を `<h1>` タグに追加します。
-
-```html
-<h1 style="color: red">My Terrarium</h1>
-```
-
-次に、以下のコードを `style.css` ファイルに追加します。
-
-```css
-h1 {
- color: blue;
-}
-```
-
-✅ Web アプリではどの色が表示されますか? なぜですか? スタイルを上書きする方法を見つけることはできますか? いつ、またはなぜそうしたくないのですか？
-
----
-
-## 継承
-
-スタイルは、先祖のスタイルから子孫へと継承され、入れ子になった要素は親のスタイルを継承するようになっています。
-
-### タスク
-
-body のフォントを指定されたフォントに設定し、入れ子になっている要素のフォントを確認します。
-
-```css
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-```
-
-ブラウザのコンソールから「要素」タブを開き、h1 のフォントを観察してください。ブラウザ内で述べられているように、フォントは body から継承されています。
-
-![inherited font](../images/1.png)
-
-✅ 入れ子になったスタイルを別のプロパティを継承させることはできますか?
-
----
-
-## CSS セレクタ
-
-### タグ
-
-これまでのところ、`style.css` ファイルにはいくつかのタグがスタイリングされているだけで、アプリはかなり変な感じになっています。
-
-```css
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-
-h1 {
-	color: #3a241d;
-	text-align: center;
-}
-```
-
-このようにタグをスタイリングすることで、ユニークな要素をコントロールすることができますが、テラリウム内の多くの植物のスタイルをコントロールする必要があります。そのためには、CSS セレクタを利用する必要があります。
-
-### id
-
-左と右のコンテナをレイアウトするためのスタイルを追加します。左のコンテナと右のコンテナは1つしかないので、マークアップでは id が与えられます。スタイルを設定するには、`#` を使用します。
-
-```css
-#left-container {
-	background-color: #eee;
-	width: 15%;
-	left: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-
-#right-container {
-	background-color: #eee;
-	width: 15%;
-	right: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-```
-
-ここでは、これらのコンテナを画面の左端と右端に絶対的な位置に配置し、それらが小さなモバイル画面のためにスケーリングできるように、それらの幅にパーセンテージを使用しています。
-
-✅ このコードはかなり繰り返されているので、"DRY" (Don't Repeat Yourself) ではありません。マークアップを変更し、CSS をリファクタリングする必要があるでしょう。
-
-```html
-<div id="left-container" class="container"></div>
-```
-
-### クラス
-
-上の例では、画面上の2つのユニークな要素にスタイルを設定しました。画面上の多くの要素にスタイルを適用したい場合は、CSS クラスを使用することができます。これを実行して、左右のコンテナに植物をレイアウトします。
-
-HTML マークアップの各植物には、id とクラスの組み合わせがあることに注目してください。ここでの id は、テラリウムの植物の配置を操作するために後で追加する JavaScript によって使用されます。クラスはすべての植物にスタイルを与えています。
-
-```html
-<div class="plant-holder">
-	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
-</div>
-```
-
-以下を `style.css` ファイルに追加します。
-
-```css
-.plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
-}
-
-.plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
-}
-```
-
-このスニペットで注目すべきは、相対位置と絶対位置が混在していることです。高さをパーセンテージで処理する方法を見てみましょう。
-
-プラントホルダーの高さを 13% に設定します。これは、すべての植物がスクロールせずに各垂直コンテナに表示されるようにするための良い数字です。
-
-植物ホルダーを左に移動するように設定すると、植物がその容器の中でより中央に位置するようになります。画像は、それらをよりドラッグしやすいように、大量の透明な背景を持っているので、画面上でより良くフィットするように左に押される必要があります。
-
-次に、植物自体には 150% の最大幅が与えられています。これにより、ブラウザのスケールダウンに合わせて植物を縮小することができます。ブラウザのサイズを変更してみてください。
-
-また、注目すべきは、(植物が容器の上に座ってテラリウムの中に座っているように見えるように) 要素の相対的な高度を制御する z-index の使用です。
-
-✅ なぜ、植物のホルダーと植物の CSS セレクターの両方が必要なのでしょうか？
-
-## CSS ポジショニング
-
-位置のプロパティ (静的位置、相対位置、固定位置、絶対位置、スティッキー位置があります) を混ぜるのは少し厄介ですが、適切に行うと、ページ上の要素をうまくコントロールすることができます。
-
-絶対的な位置にある要素は、最も近い位置にある祖先からの相対的な位置に配置され、存在しない場合は、ドキュメントの本文に従って配置されます。
-
-相対的に配置された要素は、CSS の指示に基づいて初期位置から離れた位置に配置されます。
-
-今回のサンプルでは、`plant-holder` は相対的に配置された要素であり、絶対的に配置されたコンテナの中に配置されている。その結果、サイドバーのコンテナは左右に固定され、植物ホルダーは入れ子になってサイドバー内で調整され、植物を縦に並べるためのスペースが与えられています。
-
-> 次のレッスンで説明するように、`plant` 自体も絶対位置を持っており、ドラッグ可能にするために必要です。
-
-✅ サイドコンテナとプランターホルダーの配置の種類を入れ替えて実験してみてください。どうなるでしょうか?
-
-## CSS レイアウト
-
-ここでは、学んだことを活かして、CSS を使ってテラリウムを作っていきます。
-
-まず、CSS を使って `.terarium` div の子要素を丸みを帯びた四角形にします。
-
-```css
-.jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 1rem;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
-}
-
-.jar-top {
-	width: 50%;
-	height: 5%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 80.5%;
-	left: 25%;
-	opacity: 0.7;
-	z-index: 1;
-}
-
-.jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
-}
-
-.dirt {
-	width: 60%;
-	height: 5%;
-	background: #3a241d;
-	position: absolute;
-	border-radius: 0 0 1rem 1rem;
-	bottom: 1%;
-	left: 20%;
-	opacity: 0.7;
-	z-index: -1;
-}
-```
-
-ここでは `border-radius` にもパーセンテージを使用していることに注意してください。ブラウザを縮小すると、瓶のコーナーも拡大縮小されているのがわかります。また、ジャー要素の幅と高さのパーセンテージと、各要素がビューポートの下部に固定されていることにも注目してください。
-
-✅ 瓶の色と不透明度を変えてみてください。どうなりましたか？なぜですか？
-
----
-
-## 🚀チャレンジ
-
-瓶の左下の部分に「泡」のような輝きを加えて、よりガラスのように見えるようにします。`.jar-glossy-long` と `.jar-glossy-short` は反射光のように見えるようにスタイリングします。このようになります。
-
-![finished terrarium](../images/terrarium-final.png)
-
-レッスン後の小テストを完成させるには、この Learn モジュールを通ってください: [HTML アプリを CSS でスタイルを整える](https://docs.microsoft.com/ja-jp/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=ja)
-
-## 復習と自己学習
-
-CSS は一見簡単そうに見えますが、アプリをすべてのブラウザとすべての画面サイズに完全に対応させようとすると、多くの課題があります。CSS グリッド と Flexbox は、この作業をもう少し構造化し、より信頼性の高いものにするために開発されたツールです。[Flexbox Froggy](https://flexboxfroggy.com/) と [Grid Garden](https://codepip.com/games/grid-garden/) をプレイして、これらのツールについて学びましょう。
-
-## 課題
-
-[CSS リファクタリング](assignment.ja.md)
diff --git a/3-terrarium/2-intro-to-css/translations/README.ko.md b/3-terrarium/2-intro-to-css/translations/README.ko.md
deleted file mode 100644
index 803b7789..00000000
--- a/3-terrarium/2-intro-to-css/translations/README.ko.md
+++ /dev/null
@@ -1,263 +0,0 @@
-# Terrarium 프로젝트 파트 2: CSS 소개
-
-![Introduction to CSS](/sketchnotes/webdev101-css.png)
-> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=ko)
-
-### 소개
-
-CSS 또는 Cascading Style Sheets는 웹 개발의 중요한 이슈를 해결합니다: 웹 사이트를 멋지게 만드는 방법. 앱의 스타일을 지정하면 더 유용하고 보기 좋게 만들 수 있습니다; CSS를 사용하여 반응형 웹 디자인(RWD)을 만들 수도 있습니다 - 따라서 앱이 표시되는 화면 크기에 관계없이 멋지게 보일 수 있습니다. CSS는 앱을 멋지게 보이는 방법만 있는 것이 아닙니다; 사양에는 앱에 대한 정교한 상호 작용을 가능하게 하는 애니메이션 및 변환이 포함됩니다. CSS 워킹 그룹은 현재 CSS 사양을 유지하는 데 도움을 줍니다; [World Wide Web Consortium 사이트](https://www.w3.org/Style/CSS/members)에서 작업을 확인할 수 있습니다.
-
-> Note, CSS는 웹의 모든 것과 마찬가지로, 진화하는 언어이며, 모든 브라우저가 사양의 최신 부분을 지원하는 것은 아닙니다. 항상 [CanIUse.com](caniuse.com)에 문의하여 구현을 확인하십시오.
-
-이 강의에서는, 온라인 terrarium에 스타일을 추가하며 여러 CSS 개념에 대해 자세히 알아봅시다: 캐스케이드, 상속과 선택자 사용, 포지셔닝과 레이아웃 구축을 하기위한 CSS 사용. 이 과정에서 terrarium을 레이아웃하고 실제 terrarium 자체를 만듭니다.
-
-### 준비물
-
-terrarium으로 HTML이 제작되고 스타일을 지정할 준비가 되어있어야 합니다.
-
-### 작업
-
-terrarium 폴더에서, `style.css` 라고 불리는 파일을 만듭니다. 파일의 `<head>` 부분에 넣습니다:
-
-```html
-<link rel="stylesheet" href="./style.css" />
-```
-
----
-
-## Cascade
-
-Cascade 스타일 시트는 우선 순위에 따라 스타일이 적용 되도록 'Cascade' 된다는 상상을 합칩니다. 웹 사이트 작성자가 지정한 스타일은 브라우저가 지정한 스타일보다 우선합니다. '인라인'으로 설정된 스타일은 외부 스타일 시트에 설정된 스타일보다 우선합니다.
-
-### 작업
-
-`<h1>` 태그에 "color: red" inline 스타일을 추가합니다:
-
-```HTML
-<h1 style="color: red">My Terrarium</h1>
-```
-
-그러고, `style.css` 파일에 다은 코드를 추가합니다:
-
-```CSS
-h1 {
- color: blue;
-}
-```
-
-✅ 웹 앱에는 어떤 색으로 표시되나요? 왜 그럴까요? 스타일을 오버라이드하는 방법을 찾을 수 있나요? 언제 하고 싶나요? 아니면 왜 안될까요?
-
----
-
-## 상속
-
-스타일은 상위 스타일에서 하위 요소로 상속되므로, 중첩된 요소는 상위 스타일을 상속합니다.
-
-### 작업
-
-본문의 폰트를 지정된 주어진 폰트로 설정하고, 중첩된 요소의 폰트를 확인합니다:
-
-```
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-```
-
-브라우저의 콘솔에서 'Elements'을 열고 H1 폰트를 보십시오. 브라우저에 기록된대로 본문에서 폰트를 상속합니다:
-
-![inherited font](../images/1.png)
-
-✅ 중첩된 스타일이 다른 속성을 상속하도록 만들 수 있습니까?
-
----
-
-## CSS 선택자
-
-### 태그
-
-지금까지, `style.css` 파일에는 스타일이 지정된 태그가 몇 개 뿐이며, 앱이 매우 이상하게 보입니다:
-
-```
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-
-h1 {
-	color: #3a241d;
-	text-align: center;
-}
-```
-
-이 태그 스타일링 방식을 사용하면 고유 요소를 제어할 수 있지만, terrarium에 있는 많은 식물의 스타일을 제어해야 합니다. 이를 위해서는, CSS 선택자를 활용해야 합니다.
-
-### Id
-
-왼쪽과 오른쪽 컨테이너 레이아웃에 스타일을 추가합니다. 왼쪽 컨테이너와 오른쪽 컨테이너가 하나만 있으므로, 마크업에 Id가 제공됩니다. 스타일을 지정하려면, `#`을 사용하세요:
-
-```
-#left-container {
-	background-color: #eee;
-	width: 15%;
-	left: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-
-#right-container {
-	background-color: #eee;
-	width: 15%;
-	right: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-```
-
-여기에서는, 컨테이너를 화면의 맨 왼쪽과 오른쪽에 절대 위치로 두고, 너비에 백분율을 사용하여 작은 모바일 화면에 맞을 수 있도록 조정했습니다.
-
-✅ 이 코드는 꽤 반복되므로, "DRY" 하지 않습니다 (반복하지 마십시오); id와 클래스를 사용하여 스타일링하는 더 좋은 방법을 찾을 수 있나요? 마크업을 변경하고 CSS를 리팩토링해야 합니다:
-
-```html
-<div id="left-container" class="container"></div>
-```
-
-### 클래스
-
-위의 예시에서, 화면에서 두가지 고유 요소를 꾸몄습니다. 화면의 많은 요소에 꾸미려면, CSS 클래스를 사용할 수 있습니다. 왼쪽과 오른쪽 컨테이너에 식물을 둘 수 있습니다.
-
-HTML 마크업의 각 식물에는 id와 클래스의 조합이 있습니다. id는 나중에 추가할 JavaScript에서 terrarium 식물 배치를 조작하는 데 사용됩니다. 그러나 이 강의에서는 모든 식물에 주어진 스타일로 부여합니다.
-
-```html
-<div class="plant-holder">
-	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
-</div>
-```
-
-`style.css` 파일에 다음을 추가합니다:
-
-```css
-.plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
-}
-
-.plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
-}
-```
-
-이 스니펫에서 볼 관점은 상대 위치와 절대 위치가 혼합되어 있다는 것이며, 다음 강의에서 다룰 것입니다. 높이가 백분율로 처리되는 방식을 살펴보십시오:
-
-식물 홀더의 높이를 13%로 설정하면, 스크롤할 필요없이 모든 식물이 각 수직 컨테이너에 출력되도록 할 수 있습니다.
-
-식물 홀더를 왼쪽으로 이동하여 식물이 컨테이너 인에서 더 가운데로 들어오도록 설정합니다. 이미지는 드래그하기 쉽게 만들기 위해 투명한 배경을 많이 가지고 있으므로, 화면에 더 잘 맞게 왼쪽으로 밀어야 합니다.
-
-그러면, 식물 자체의 최대 너비는 150% 입니다. 브라우저가 작아지면 같이 작아질 수 있습니다. 브라우저 크기를 조절해보십시오. 식물은 컨테이너에 있지만 크기에 맞게 작아집니다.
-
-또한 요소의 상대적 고도를 제어하는, ​​z-index의 사용은 주목할만 합니다 (식물이 컨테이너 위에 있고 terrarium 안에 있는 것처럼 보이게).
-
-✅ 식물 홀더와 식물 CSS 선택자가 필요한 이유는 무엇입니까?
-
-## CSS 포지셔닝
-
-위치 속성(static, relative, fixed, absolute 그리고 sticky 포지션)을 섞는 것은 약간 까다로울 수 있지만, 제대로 하면 페이지의 요소를 잘 제어할 수 있습니다.
-
-절대 위치 요소는 가장 가까운 위치에 있는 최상위를 기준으로 위치하며, 없는 경우 문서 본문에 따라 위치가 지정됩니다.
-
-상대 배치된 요소는 CSS의 방향에 따라 배치되며 처음 위치에서 떨어진 배치를 조정합니다.
-
-예시에서, `plant-holder`는 절대 위치지만 컨테이너 안에서는 상대 위치 요소입니다. 그 결과 사이드바 컨테이너가 왼쪽과 오른쪽에 고정되고, 식물 홀더가 중첩되어 사이드바 안에서 자체적으로 조정되므로 수직 행에 식물이 배치될 공간을 제공합니다.
-
-> 다음 강의에서 확인해보면, `plant`은 드래그 가능한 필요한 절대 위치에 있습니다.
-
-✅ 사이드 컨테이너와 식물 홀더의 위치 타입을 전환하여 실험하십시오. 무슨 일이 생기나요?
-
-## CSS 레이아웃
-
-이제는 배웠던 모든 CSS를 사용하여 terrarium 자체를 만듭니다!
-
-먼저, CSS를 사용하여 `.terrarium` div 하위를 라운딩된 사각형으로 꾸밉니다:
-
-```css
-.jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 1rem;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
-}
-
-.jar-top {
-	width: 50%;
-	height: 5%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 80.5%;
-	left: 25%;
-	opacity: 0.7;
-	z-index: 1;
-}
-
-.jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
-}
-
-.dirt {
-	width: 60%;
-	height: 5%;
-	background: #3a241d;
-	position: absolute;
-	border-radius: 0 0 1rem 1rem;
-	bottom: 1%;
-	left: 20%;
-	opacity: 0.7;
-	z-index: -1;
-}
-```
-
-여기서는 `border-radius`에 대해서도 백분율을 사용합니다. 브라우저를 줄이면 jar 모서리도 어떻게 변하는 지 볼 수 있습니다. 또한 jar 요소의 너비, 높이 백분율과 각 요소가 뷰포트 하단에 고정되어 중앙에 절대 배치되는 방식을 확인하십시오.
-
-✅ jar 색상과 투명도를 흙 색과 비교해보십시오. 무슨 일인가요? 왜 그럴까요?
-
----
-
-## 🚀 도전
-
-jar 좌측 하단 부분에 'bubble' 광택을 추가하여 유리처럼 보이도록 합니다. `.jar-glossy-long`과 `.jar-glossy-short`를 빛 반사되는 것처럼 보이도록 꾸밉니다. 다음과 같이 표시됩니다.
-
-![finished terrarium](.././images/terrarium-final.png)
-
-강의 후 퀴즈를 완료하려면, 다음 학습 모듈을 진행하십시오: [Style your HTML app with CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-CSS는 믿을 수 없게 간단해 보이지만, 모든 브라우저와 모든 화면 크기에 대해 완벽한 스타일을 지정하려면 많이 어렵습니다. CSS-Grid 및 Flexbox는 좀 더 구조화되고 안정적으로 보이게 개발된 도구입니다. [Flexbox Froggy](https://flexboxfroggy.com/)와 [Grid Garden](https://codepip.com/games/grid-garden/)을 플레이하여 도구에 대해 알아보세요.
-
-## 과제
-
-[CSS Refactoring](../assignment.md)
diff --git a/3-terrarium/2-intro-to-css/translations/README.ms.md b/3-terrarium/2-intro-to-css/translations/README.ms.md
deleted file mode 100644
index 6be952ef..00000000
--- a/3-terrarium/2-intro-to-css/translations/README.ms.md
+++ /dev/null
@@ -1,263 +0,0 @@
-# Projek Terrarium Bahagian 2: Pengenalan Kepada CSS
-
-![Pengenalan Kepada CSS](/sketchnotes/webdev101-css.png)
-> Sketchnote karya [Tomomi Imura](https://twitter.com/girlie_mac)
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
-
-### Pengenalan
-
-CSS, atau Cascading Style Sheets, menyelesaikan masalah penting dalam pembangunan web: bagaimana menjadikan laman web anda kelihatan cantik. Menggayakan aplikasi anda menjadikannya lebih berguna dan kelihatan lebih baik; anda juga boleh menggunakan CSS untuk membuat Reka Bentuk Web Responsif (RWD) - membolehkan apl anda kelihatan baik tidak kira ukuran skrin yang dipaparkan. CSS bukan hanya menjadikan aplikasi anda kelihatan bagus; spesifikasinya merangkumi animasi dan transformasi yang membolehkan interaksi yang canggih untuk aplikasi anda. Kumpulan Kerja CSS membantu mengekalkan spesifikasi CSS semasa; anda boleh mengikuti karya mereka di [laman web World Wide Web Consortium](https://www.w3.org/Style/CSS/members) .
-
-> Perhatikan, CSS adalah bahasa yang berkembang, seperti semua yang ada di web, dan tidak semua penyemak imbas menyokong bahagian spesifikasi yang lebih baru. Sentiasa periksa pelaksanaan anda dengan merujuk [CanIUse.com](https://caniuse.com).
-
-Dalam pelajaran ini, kami akan menambahkan gaya ke terarium dalam talian kami dan mengetahui lebih lanjut mengenai beberapa konsep CSS: lata, pewarisan, dan penggunaan pemilih, penentuan kedudukan, dan menggunakan CSS untuk membina susun atur. Dalam prosesnya kita akan menyusun terarium dan membuat terarium itu sendiri.
-
-### Prasyarat
-
-Anda harus mempunyai pengetahuan HTML untuk terarium anda dan siap digayakan.
-
-### Tugas
-
-Dalam folder terarium anda, buat fail baru yang disebut `style.css`. Import fail itu di bahagian `<head>`:
-
-```html
-<link rel="stylesheet" href="./style.css" />
-```
-
----
-
-## The Cascade
-
-Cascading Style Sheets menggabungkan idea bahawa gaya 'cascade' sehingga penerapan gaya dipandu oleh keutamaannya. Gaya yang ditetapkan oleh pengarang laman web lebih diutamakan daripada yang ditetapkan oleh penyemak imbas. Gaya yang ditetapkan 'sebaris' lebih diutamakan daripada yang ditetapkan dalam helaian gaya luaran.
-
-### Tugas
-
-Tambahkan gaya sebaris "color: red" ke tag `<h1>` anda:
-
-```HTML
-<h1 style="color: red">My Terrarium</h1>
-```
-
-Kemudian, tambahkan kod berikut ke fail `style.css` anda:
-
-```CSS
-h1 {
- color: blue;
-}
-```
-
-✅ Warna mana yang dipaparkan di aplikasi web anda? Kenapa? Bolehkah anda mencari cara untuk mengganti gaya? Bilakah anda mahu melakukan ini, atau mengapa tidak?
-
----
-
-## Warisan
-
-Gaya diwarisi dari gaya nenek moyang hingga keturunan, sehingga elemen bersarang mewarisi gaya ibu bapa mereka.
-
-### Tugas
-
-Tetapkan fon badan ke fon tertentu, dan periksa untuk melihat fon elemen bersarang:
-
-```
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-```
-
-Buka konsol penyemak imbas anda ke tab 'Elements' dan perhatikan fon H1. Ini mewarisi fonnya dari badan, seperti yang dinyatakan dalam penyemak imbas:
-
-![inherited font](../images/1.png)
-
-✅ Bolehkah anda menjadikan gaya bersarang mewarisi harta yang berbeza?
-
----
-
-## CSS Selector
-
-### Tag
-
-Setakat ini, fail `style.css` anda hanya mempunyai beberapa tag yang digayakan, dan aplikasinya kelihatan sangat pelik:
-
-```
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-
-h1 {
-	color: #3a241d;
-	text-align: center;
-}
-```
-
-Cara menggayakan tag ini memberi anda kawalan terhadap elemen unik, tetapi anda perlu mengawal gaya banyak tanaman di terarium anda. Untuk melakukan itu, anda perlu memanfaatkan CSS selector.
-
-### Id
-
-Tambahkan beberapa gaya untuk mengatur bekas kiri dan kanan. Oleh kerana hanya ada satu bekas kiri dan hanya satu bekas kanan, mereka diberi id dalam markup. Untuk menggayakannya, gunakan `#`:
-
-```
-#left-container {
-	background-color: #eee;
-	width: 15%;
-	left: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-
-#right-container {
-	background-color: #eee;
-	width: 15%;
-	right: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-```
-
-Di sini, anda telah meletakkan bekas ini dengan kedudukan mutlak di paling kiri dan kanan skrin, dan menggunakan peratusan untuk lebarnya sehingga dapat menskalakan untuk skrin mudah alih kecil.
-
-✅ Kod ini agak berulang, oleh itu tidak "DRY" (Don't Repeat Yourself); bolehkah anda mencari cara yang lebih baik untuk menggayakan id ini, mungkin dengan id dan kelas? Anda perlu mengubah markup dan memfaktorkan semula CSS:
-
-```html
-<div id="left-container" class="container"></div>
-```
-
-### Kelas
-
-Dalam contoh di atas, anda menggayakan dua elemen unik di skrin. Sekiranya anda mahu gaya diterapkan pada banyak elemen di layar, anda boleh menggunakan kelas CSS. Lakukan ini untuk menyusun tanaman di bekas kiri dan kanan.
-
-Perhatikan bahawa setiap tanaman dalam markup HTML mempunyai kombinasi id dan kelas. Id di sini digunakan oleh JavaScript yang akan anda tambahkan kemudian untuk memanipulasi penempatan tanaman terarium. Walau bagaimanapun, kelas-kelasnya memberi gaya kepada semua tanaman.
-
-```html
-<div class="plant-holder">
-	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
-</div>
-```
-
-Tambahkan yang berikut ke fail `style.css` anda:
-
-```css
-.plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
-}
-
-.plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
-}
-```
-
-Dalam coretan ini adalah gabungan kedudukan relatif dan mutlak, yang akan kita bahas di bahagian seterusnya. Lihat cara ketinggian dikendalikan oleh peratusan:
-
-Anda menetapkan ketinggian pemegang kilang kepada 13%, jumlah yang baik untuk memastikan bahawa semua tanaman dipaparkan di setiap bekas menegak tanpa perlu menatal.
-
-Anda menetapkan pemegang kilang bergerak ke kiri untuk membiarkan tanaman lebih berpusat di dalam bekasnya. Gambar mempunyai sejumlah besar latar belakang lutsinar sehingga membuatnya lebih mudah diseret, jadi perlu didorong ke kiri agar lebih pas di layar.
-
-Kemudian, kilang itu sendiri diberi lebar maksimum 150%. Ini memungkinkan untuk mengecil ketika penyemak imbas turun. Cuba ubah saiz penyemak imbas anda; tanaman tinggal di dalam bekasnya tetapi dikecilkan agar sesuai.
-
-Juga dapat diperhatikan adalah penggunaan z-index, yang mengendalikan ketinggian relatif suatu elemen (sehingga tanaman duduk di atas wadah dan tampak duduk di dalam terarium).
-
-✅ Mengapakah anda memerlukan pemegang tanaman dan CSS Selector?
-
-## Kedudukan CSS
-
-Sifat pencampuran kedudukan (terdapat kedudukan statik, relatif, tetap, mutlak, dan melekit) boleh menjadi agak rumit, tetapi apabila dilakukan dengan betul, ia memberi anda kawalan yang baik terhadap unsur-unsur di halaman anda.
-
-Unsur-unsur yang diposisikan secara mutlak diposisikan berbanding dengan nenek moyang mereka yang terdekat, dan jika tidak ada, ia diposisikan sesuai dengan badan dokumen.
-
-Elemen kedudukan relatif diletakkan berdasarkan arahan CSS untuk menyesuaikan penempatannya dari kedudukan awalnya.
-
-Dalam sampel kami, `pemegang tumbuhan` adalah elemen kedudukan relatif yang diposisikan dalam wadah kedudukan mutlak. Tingkah laku yang dihasilkan adalah bahawa wadah bar sisi disematkan ke kiri dan kanan, dan pemegang tanaman bersarang, menyesuaikan diri di dalam bar sisi, memberi ruang untuk tanaman ditempatkan dalam barisan menegak.
-
-> `Tumbuhan` itu sendiri juga mempunyai kedudukan mutlak, yang diperlukan untuk membuatnya dapat diseret, seperti yang akan anda ketahui dalam pelajaran seterusnya.
-
-✅ Eksperimen dengan menukar jenis penempatan bekas sampingan dan pemegang tumbuhan. Apa yang berlaku?
-
-## Susun atur CSS
-
-Sekarang anda akan menggunakan apa yang anda pelajari untuk membina terarium itu sendiri, semuanya menggunakan CSS!
-
-Pertama, gayakan anak-anak `.terrarium` sebagai segi empat bulat menggunakan CSS:
-
-```css
-.jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 1rem;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
-}
-
-.jar-top {
-	width: 50%;
-	height: 5%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 80.5%;
-	left: 25%;
-	opacity: 0.7;
-	z-index: 1;
-}
-
-.jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
-}
-
-.dirt {
-	width: 60%;
-	height: 5%;
-	background: #3a241d;
-	position: absolute;
-	border-radius: 0 0 1rem 1rem;
-	bottom: 1%;
-	left: 20%;
-	opacity: 0.7;
-	z-index: -1;
-}
-```
-
-Perhatikan penggunaan peratusan di sini. Sekiranya anda menurunkan penyemak imbas anda, anda dapat melihat bagaimana skala sudut jar juga. Perhatikan juga peratusan lebar dan tinggi untuk elemen balang dan bagaimana setiap elemen benar-benar diposisikan di tengah, disematkan ke bahagian bawah pandang.
-
-✅ Cubalah ubah warna balang dan kelegapan berbanding kotoran. Apa yang berlaku? Kenapa?
-
----
-
-## 🚀Cabaran
-
-Tambahkan kilauan 'bubble' ke bahagian bawah kiri balang agar kelihatan lebih menyerupai kaca. Anda akan menggayakan `.jar-glossy-long` dan` .jar-glossy-short` agar kelihatan seperti kilauan yang dipantulkan. Ini rupanya:
-
-![finished terrarium](../images/terrarium-final.png)
-
-Untuk menyelesaikan kuiz pasca kuliah, baca modul Belajar ini: [Gaya aplikasi HTML anda dengan CSS](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics)
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
-
-## Mengkaji & Belajar Sendiri
-
-CSS nampaknya sangat mudah, tetapi ada banyak cabaran ketika mencuba gaya aplikasi dengan sempurna untuk semua penyemak imbas dan semua saiz skrin. CSS-Grid dan Flexbox adalah alat yang telah dikembangkan untuk menjadikan pekerjaan itu sedikit lebih tersusun dan lebih dipercayai. Ketahui mengenai alat ini dengan bermain [Flexbox Froggy](https://flexboxfroggy.com/) dan [Grid Garden](https://codepip.com/games/grid-garden/).
-
-## Tugasan
-
-[Pemfaktoran Semula CSS](assignment.ms.md)
\ No newline at end of file
diff --git a/3-terrarium/2-intro-to-css/translations/README.zh-cn.md b/3-terrarium/2-intro-to-css/translations/README.zh-cn.md
deleted file mode 100644
index 518734a3..00000000
--- a/3-terrarium/2-intro-to-css/translations/README.zh-cn.md
+++ /dev/null
@@ -1,264 +0,0 @@
-# 花艺瓶项目 Part 1： CSS 简介
-
-![Introduction to CSS](../../../sketchnotes/webdev101-css.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 绘制
-
-## 课前测试
-
-[课前测试](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17)
-
-### 介绍
-
-CSS，即层叠样式表，解决了网络开发的一个重要问题：如何让你的网站看起来更漂亮。对你的应用程序进行样式设计可以使它们更实用、更美观；你还可以使用 CSS 来创建响应式网页设计（RWD）--使你的网页可以根据不同窗口大小改变呈现方式。CSS 不仅可以让你的网页看起来漂亮；它还包括动画和转换，可以为你的网页提供复杂的交互。CSS 工作组帮助维护当前的 CSS 规范；你可以在[万维网联盟的网站](https://www.w3.org/Style/CSS/members).上关注他们的工作。
-
-> 注意，CSS 是一种不断发展的语言，就像网络上的所有东西一样，并不是所有的浏览器都支持规范的最新部分。要经常通过 [CanIUse.com](https://caniuse.com) 来检查你的实现在相关浏览器的支持情况。
-
-在本课中，我们将为我们的在线花艺瓶添加样式，并进一步了解几个 CSS 概念：层叠（Cascade）、继承（Inheritance）和选择器（Selectors）的使用、定位（Positioning）以及使用 CSS 构建布局（Layout）。在这个过程中，我们将对花艺瓶进行布局，并创建实际的花艺瓶本身。
-
-### 先决条件
-
-你应该已经为你的水族箱建立了HTML，并准备好了样式。
-
-### 任务
-
-在你的 `terrarium` 目录中，创建一个名为 `style.css` 的新文件。在 `<head>` 部分导入该文件：
-
-```html
-<link rel="stylesheet" href="./style.css" />
-```
-
----
-
-## 层叠（Cascade）
-
-层叠样式表包含了样式“层叠”的概念，即一个样式的应用由其优先级来指导。由网站作者设置的样式优先于由浏览器设置的样式。“内联（Inline）”设置的样式优先于外部样式表中设置的样式。
-
-### 任务
-在你的 `<h1>` 标签上添加内联样式 `"color: red"`：
-
-```HTML
-<h1 style="color: red">My Terrarium</h1>
-```
-
-然后，在你的`style.css`文件中添加以下代码：
-
-```CSS
-h1 {
- color: blue;
-}
-```
-
-✅ 你的网页显示了哪种颜色？为什么？你能找到一个覆盖该样式的方法吗？你什么时候会想这样做，或者为什么不这样做？
-
----
-
-## 继承（Inheritance）
-
-样式会从一个父级的样式继承到一个子级的样式，这样嵌套的元素就继承了它们父级的样式。
-
-### 任务
-
-将 body 的字体设置为给定的字体，并检查查看嵌套元素的字体：
-
-```CSS
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-```
-
-打开你的浏览器控制台的“元素”标签，观察 H1 的字体。如浏览器中所述，它的字体继承自 body：
-
-![inherited font](images/1.png)
-
-✅ 你能让被嵌套的样式继承其他属性吗？
-
----
-
-## CSS 选择器（Selectors)
-
-### 标签
-
-到目前为止，你的 `style.css` 文件只有几个标签的样式，而且页面看起来很奇怪：
-
-```CSS
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-
-h1 {
-	color: #3a241d;
-	text-align: center;
-}
-```
-
-这种给标签样式的方式只能控制特别的元素。当你需要控制你的花艺瓶中许多植物的样式时，你需要利用 CSS 选择器。
-
-### ID（Ids）
-
-添加一些样式来布局左边和右边的容器。由于只有一个左边的容器和一个右边的容器，它们在标记中被赋予了 id 标记。要为它们设计样式，请使用 `#`。
-
-```CSS
-#left-container {
-	background-color: #eee;
-	width: 15%;
-	left: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-
-#right-container {
-	background-color: #eee;
-	width: 15%;
-	right: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-```
-
-在这里，你把这些容器用绝对定位放在屏幕的最左边和右边，并对它们的宽度使用了百分比，这样它们就可以在小屏幕上缩放来正常显示。
-
-✅ 这段代码相当重复，因此不要照抄；你能找到一个更好的方法来给这些 id 样式，也许可以用一个 id 和一个 class ？你需要修改 HTML 和 CSS。
-
-```html
-<div id="left-container" class="container"></div>
-```
-
-### 类（Classes）
-
-在上面的例子中，你为屏幕上两个独特的元素设计了样式。如果你想让样式应用于屏幕上的许多元素，你可以使用 CSS 类。利用这种方法在左边和右边的容器中布局植物。
-
-请注意，HTML 中的每个植物都有一个 id 和 class 的组合。JavaScript 稍后会利用 id 控制植物的摆放；CSS 则会使用 class 来选择并将样式套用在相应的植物上。
-
-```html
-<div class="plant-holder">
-	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
-</div>
-```
-
-在你的 `style.css` 文件中添加以下内容：
-
-```CSS
-.plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
-}
-
-.plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
-}
-```
-
-这个片段中值得注意的是相对和绝对定位的混合，我们将在下一节中介绍。我们先来看看使用百分比处理高度的方式：
-
-你将 `plant-holder` 的高度设置为 13%，这是一个很好的数字，可以确保在不需要滚动的情况下，所有的植物都显示在每个垂直容器中。
-
-你设置植物支架向左移动，让植物在其容器中居中。图片有大量的透明区域需要被拖拽进来，向左移动可以更好地在屏幕上显示。
-
-然后，植物本身被赋予 150% 的最大宽度。这使得它可以随着浏览器的缩小而缩小。试着调整你的浏览器的窗口大小；植物将保持在它们的容器中，靠缩小尺寸以适应窗口大小。
-
-同样值得注意的是 z-index 的使用，它可以控制一个元素的相对高度（这样，植物就可以坐在容器的顶部，看起来就像坐在花艺瓶内部一样）。
-
-✅ 为什么你同时需要一个 `plant-holder` 和一个植物 CSS 选择器？
-
-## 定位（Positioning）
-
-混合位置属性（包括静态（Static）、相对（Relative）、固定（Fixed）、绝对（Absolute）和粘性（Sticky）位置）可能有点棘手，但如果操作得当，它可以让你很好地控制页面上的元素。
-
-绝对定位的元素是相对于其父级元素定位的，如果没有，则根据 body 定位。
-
-相对定位的元素是根据 CSS 指定的方向来调整其相对初始位置的位置。
-
-在我们的例子中，`plant-holder` 是一个相对定位的元素，被定位在一个绝对定位的容器中。因此，容器被左右夹住，而嵌入其中的 `plant-holder` 会调整它在容器中的位置，为植物的竖排放置提供空间。
-
-> `plant` 本身也有绝对定位，这是为了使其可拖动，你可以在下阶段课程中了解更多。
-
-✅ 试着切换一下容器和 `plant-holder` 的定位类型。会发生什么？
-
-## 布局（Layouts）
-
-现在，你将利用你所学到的知识来建造花艺瓶本身，所有这些都是用CSS来完成的。
-
-首先，使用CSS将 `.terrarium` div 的子级样式化为一个圆角矩形：
-
-```CSS
-.jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 1rem;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
-}
-
-.jar-top {
-	width: 50%;
-	height: 5%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 80.5%;
-	left: 25%;
-	opacity: 0.7;
-	z-index: 1;
-}
-
-.jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
-}
-
-.dirt {
-	width: 60%;
-	height: 5%;
-	background: #3a241d;
-	position: absolute;
-	border-radius: 0 0 1rem 1rem;
-	bottom: 1%;
-	left: 20%;
-	opacity: 0.7;
-	z-index: -1;
-}
-```
-
-注意这里使用的是百分比。如果你缩小你的浏览器窗口，你可以看到罐子是如何缩放的。也可以注意到罐子元素的宽度和高度百分比，以及每个元素是如何被绝对定位在中心，钉在窗口的底部的。
-
-我们还使用 `rem` 来表示 `border-radius`，这是一种字体相对的长度。在 [CSS 规范](https://www.w3.org/TR/css-values-3/#font-relative-lengths)中阅读更多关于这种相对测量的类型。
-
-✅ 试着改变罐子的颜色和不透明度与泥土的颜色。会发生什么？为什么？
-
----
-
-## 🚀挑战
-
-在瓶子的左边底部区域添加一个“气泡反光”，使其看起来更像玻璃。你将对 `.jar-glossy-long` 和 `.jar-glossy-short` 进行样式化，使其看起来像一个反射的光泽。下面是它的成果图：
-
-![花艺瓶成果图](../images/terrarium-final.png)
-
-要完成课后测验，请通过这个学习模块：[用 CSS 样式化你的 HTML 网页](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics?WT.mc_id=academic-13441-cxa)
-
-## 课后测试
-
-[课后测试](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18)
-
-## 复习 & 预习
-
-CSS 看似简单明了，但在试图为所有浏览器和所有屏幕尺寸完美地设计一个应用程序时，却存在许多挑战。CSS-Grid 和 Flexbox 是为了使这项工作更有条理、更可靠而开发的工具。通过游玩 [Flexbox Froggy](https://flexboxfroggy.com/) 和 [Grid Garden](https://codepip.com/games/grid-garden/) 来了解这些工具。
-
-## 作业
-
-[CSS 重构](assignment.md)
diff --git a/3-terrarium/2-intro-to-css/translations/README.zh-tw.md b/3-terrarium/2-intro-to-css/translations/README.zh-tw.md
deleted file mode 100644
index b9839d15..00000000
--- a/3-terrarium/2-intro-to-css/translations/README.zh-tw.md
+++ /dev/null
@@ -1,263 +0,0 @@
-# 盆栽盒專案 Part 2： CSS 簡介
-
-![CSS 簡介](/sketchnotes/webdev101-css.png)
-> 由 [Tomomi Imura](https://twitter.com/girlie_mac) 繪製
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/17?loc=zh_tw)
-
-### 大綱
-
-階層式樣式表，CSS (Cascading Style Sheets)解決了網頁開發重要的問題：如何讓網頁變得漂亮。為你的應用造型化可以讓網頁更好用、更好看。你也可以使用 CSS 建立回應式網頁設計(Responsive Web Design - RWD)，依據你的視窗大小改變網頁的呈現方式。 CSS 不只讓網頁變美麗，它允許加入動畫以呈現更生動的互動體驗。CSS 工作組持續維護 CSS 的規格書，你可以在[全球資訊網協會官網](https://www.w3.org/Style/CSS/members)追蹤他們的作業。
-
-> 筆記，CSS 是一種程式語言，但就像任何在網路上的東西一樣，並不是所有瀏覽器都支援最新的規格。請時常利用 [CanIUse.com](https://caniuse.com) 檢查你的設計是否支援相關瀏覽器。
-
-這堂課中，我們會為我們的線上盆栽盒增加造型，學習更多 CSS 的概念：串接(Cascade)、繼承(Inheritance)、選擇器(Selectors)、定位(Positioning)與建立布局(Layout)。我們會規劃盆栽盒的布局，建立實際的盆栽盒。
-
-### 開始之前
-
-你需要確保你有盆栽盒的 HTML 程式碼，準備被造型化。
-
-### 課題
-
-在盆栽盒專案中，我們新增檔案 `style.css`。 在 HTML 檔案中匯入該檔案在 `<head>` 區塊中：
-
-```html
-<link rel="stylesheet" href="./style.css" />
-```
-
----
-
-## 串接(Cascade)
-
-串接造型表單體現了造型依照表單上的優先度「串接」在網頁應用上。網頁作者利用程式碼設定造型優先度，行內樣式(inline styles)的優先度會比外部造型表單來的高。
-
-### 課題
-
-新增行內造型 "color: red" 到 `<h1>` 標籤中：
-
-```HTML
-<h1 style="color: red">My Terrarium</h1>
-```
-
-之後，也新增下列程式碼在 `style.css` 檔案中：
-
-```CSS
-h1 {
- color: blue;
-}
-```
-
-✅ 你的網頁顯示了哪一種顏色？為什麼？你能找到方法覆蓋這個造型嗎？何時會讓你想用這套做法呢？又為什麼不呢？
-
----
-
-## 繼承(Inheritance)
-
-從父關係標籤到子關係標籤上繼承造型，如被嵌套的物件會繼承容器物件的造型。
-
-### 課題
-
-我們設定 body 的字體為特定字型，確認嵌套物件的字型：
-
-```CSS
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-```
-
-開啟你的瀏覽器命令欄到 'Elements' 標籤中，觀察 H1 的字型。它繼承了 body 的字型，表現在瀏覽器上：
-
-![inherited font](../images/1.png)
-
-✅ 你能讓被嵌套元素繼承其他格式嗎？
-
----
-
-## CSS 選擇器(Selectors)
-
-### 標籤
-
-到目前為止，你的 `style.css` 檔案只有一部份標籤被造型化，這讓程式看起來很怪：
-
-```CSS
-body {
-	font-family: helvetica, arial, sans-serif;
-}
-
-h1 {
-	color: #3a241d;
-	text-align: center;
-}
-```
-
-這種造型方法只能控制被指定的元素，但如果你需要套用在每一種盆栽盒內的植物。你需要利用 CSS 選擇器。
-
-### Ids
-
-新增左容器與右容器造型布局。因為網頁內只有一個左容器與右容器，我們就這樣命名 id 標記。要造型化它們，使用 `#`：
-
-```CSS
-#left-container {
-	background-color: #eee;
-	width: 15%;
-	left: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-
-#right-container {
-	background-color: #eee;
-	width: 15%;
-	right: 0px;
-	top: 0px;
-	position: absolute;
-	height: 100%;
-	padding: 10px;
-}
-```
-
-這裡，你已經將容器擺在絕對位置上了，一個位在左側，一個位在右側。容器寬度使用百分比以確保它們在小螢幕裝置上也能運作正常。
-
-✅ 這兩段樣式已經重複了，請不要照抄。你能找到更好的方式來造型化這些 ids 嗎？ 或許你可以從 id 或 class 來下手。讓 CSS 套用在容器上，我們需要改寫 HTML 程式碼：
-
-```html
-<div id="left-container" class="container"></div>
-```
-
-### Classes
-
-在上述例子中，你成功地為兩樣物件新增造型。如果你想一次套用在多樣物件上，你就需要 CSS classes。利用這個方法來布局兩個容器。
-
-注意每個植物的標記都有 ids 與 classes。JavaScript 使用 Id 標記來控制植物的擺放； class 則是被 CSS 套用特定的造型。
-
-```html
-<div class="plant-holder">
-	<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
-</div>
-```
-
-新增下列程式碼到 `style.css` 檔案中：
-
-```CSS
-.plant-holder {
-	position: relative;
-	height: 13%;
-	left: -10px;
-}
-
-.plant {
-	position: absolute;
-	max-width: 150%;
-	max-height: 150%;
-	z-index: 2;
-}
-```
-
-片段開頭是 CSS 的定位屬性，分為相對與絕對定位，我們會在下一個段落進行解述。我們來看看百分比高度的方式：
-
-你設定了植物架高度為 13%，確保所有植物都能在不需要滾動容器的情況下，在每一個垂直的容器中顯示出來。
-
-你設定了植物架向左移 10 像素，讓植物能在容器的正中間。圖片上亦有大區域的透明區域需要被拖曳過來，往左位移更適合呈現在畫面上。
-
-之後，植物設定寬度為 150%。 當瀏覽器調整比例時，也能同時將植物圖片作大小的調整。試著改變瀏覽器檢視比例，植物依舊會保持在容器中。
-
-我們換看 z-index，控制物件的相對高度，讓植物坐落在容器上方且在盆栽盒內部。
-
-✅ 為什麼需要分為植物架與植物 CSS 選擇器？
-
-## 定位(Positioning)
-
-多樣的定位屬性，包含靜態(static)、相對(relative)、固定(fixed)、絕對(absolute)和黏貼(sticky)，有時候讓人難以駕馭，但成功設定完後，可以讓你完整地掌握元素坐落的位置。
-
-絕對定位元素會依照他的父關係物件來決定定位位置，若沒有關係物件，整個文件的 body 就會成為定位依據。
-
-相對定位元素則依照 CSS 指定的方向來調整他的起始位置。
-
-在我們的樣本中，`plant-holder` 是相對定位元素，坐落在絕對定位的容器當中。因此，容器被定義在左側與右側，而被嵌入的植物架會調整它在容器的位置，保持植物之間的間隔。
-
-> `plant` 本身也擁有絕對定位，為了讓圖片被拖曳，你能在下段課程中發現更多資訊。
-
-✅ 試著改變容器與植物架的定位模式。發生了什麼事？
-
-## 布局(Layouts)
-
-現在，你已經善用你所學的，只用 CSS 建出盆栽盒！
-
-首先，對 `.terrarium` 的 div 子關係物件加上圓邊矩形：
-
-```CSS
-.jar-walls {
-	height: 80%;
-	width: 60%;
-	background: #d1e1df;
-	border-radius: 10%;
-	position: absolute;
-	bottom: 0.5%;
-	left: 20%;
-	opacity: 0.5;
-	z-index: 1;
-}
-
-.jar-top {
-	width: 50%;
-	height: 5%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 80.5%;
-	left: 25%;
-	opacity: 0.7;
-	z-index: 1;
-}
-
-.jar-bottom {
-	width: 50%;
-	height: 1%;
-	background: #d1e1df;
-	position: absolute;
-	bottom: 0%;
-	left: 25%;
-	opacity: 0.7;
-}
-
-.dirt {
-	width: 58%;
-	height: 5%;
-	background: #3a241d;
-	position: absolute;
-	border-radius: 0 0 4rem 4rem;
-	bottom: 1%;
-	left: 21%;
-	opacity: 0.7;
-	z-index: -1;
-}
-```
-
-注意這邊百分比的用法，即使是 `border-radius` 也請留意。 當瀏覽器調整檢視比例時，你會發現玻璃罐也會受到調整。 其他值得注意的地方為：玻璃罐的寬度與高度百分比，每個元素絕對定位在中心與視窗的下方。
-
-✅ 試著改變罐子的顏色與透明度，觀察泥土與罐子的關係。發生了什麼事？為什麼？
-
----
-
-## 🚀 挑戰
-
-新增「氣泡反光」在罐子左下方的位置，讓玻璃材質更擬真一些。你需要編輯 `.jar-glossy-long` 與 `.jar-glossy-short` 造型集來模擬罐子反光。下面是成果圖：
-
-![盆栽盒成果圖](../images/terrarium-final.png)
-
-在做課後測驗前，請先前往下列的學習頁面：[用 CSS 造型化你的網頁應用](https://docs.microsoft.com/learn/modules/build-simple-website/4-css-basics/?WT.mc_id=academic-77807-sagibbon)
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/18?loc=zh_tw)
-
-## 複習與自學
-
-CSS 看似很好上手，但要在所有瀏覽器與螢幕大小上運作正常，也會面臨到許多挑戰。CSS-Grid 與 Flexbox 這兩種工具讓上述作業變得比較好規劃與調整。藉由遊玩 [Flexbox Froggy](https://flexboxfroggy.com/) 與 [Grid Garden](https://codepip.com/games/grid-garden/) 來學習它們。
-
-## 作業
-
-[重構 CSS](assignment.zh-tw.md)
diff --git a/3-terrarium/2-intro-to-css/translations/assignment.es.md b/3-terrarium/2-intro-to-css/translations/assignment.es.md
deleted file mode 100644
index c91b8f23..00000000
--- a/3-terrarium/2-intro-to-css/translations/assignment.es.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Refactorización CSS
-
-## Instrucciones
-
-Cambie el estilo del terrario usando Flexbox o CSS Grid, y tome capturas de pantalla para mostrar que lo ha probado en varios navegadores. Es posible que deba cambiar el marcado, así que cree una nueva versión de la aplicación con el arte en su lugar para su refactorización. No se preocupe por hacer que los elementos se puedan arrastrar; solo refactorice el HTML y CSS por ahora.
-
-## Rúbrica
-
-| Criterios | Ejemplar                                                         | Adecuada                      | Necesita mejorar                    |
-| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
-|          | Presenta un terrario completamente rediseñado usando Flexbox o CSS Grid | Modifique algunos de los elementos | No cambiar el estilo del terrario en absoluto |
diff --git a/3-terrarium/2-intro-to-css/translations/assignment.fr.md b/3-terrarium/2-intro-to-css/translations/assignment.fr.md
deleted file mode 100644
index 25a27250..00000000
--- a/3-terrarium/2-intro-to-css/translations/assignment.fr.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Refactorisation CSS
-
-## Instructions
-
-Relookez le terrarium à l'aide de Flexbox ou de CSS Grid, et prenez des captures d'écran pour montrer que vous l'avez testé sur plusieurs navigateurs. Vous devrez peut-être modifier le balisage donc créez une nouvelle version de l'application avec l'art en place pour votre refactoring. Ne vous inquiétez pas de rendre les éléments déplaçables ; ne refactorisez que le HTML et le CSS pour le moment.
-
-## Rubrique
-
-| Critères | Exemplaire                                                         | Adéquat                      | Besoin d'amélioration                    |
-| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
-|          | Présentez un terrarium entièrement relooké à l'aide de Flexbox ou CSS Grid | Relooker quelques éléments | Ne pas relooker le terrarium du tout |
diff --git a/3-terrarium/2-intro-to-css/translations/assignment.hi.md b/3-terrarium/2-intro-to-css/translations/assignment.hi.md
deleted file mode 100644
index 63f4ec95..00000000
--- a/3-terrarium/2-intro-to-css/translations/assignment.hi.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# CSS पुनर्रचना
-
-## अनुदेश
-
-फ्लेक्सबॉक्स या सीएसएस ग्रिड का उपयोग करके टेरारियम को रीस्टाइल करें, और यह दिखाने के लिए स्क्रीनशॉट लें कि आपने इसे कई ब्राउज़रों पर परीक्षण किया है. आपको मार्कअप को बदलने की आवश्यकता हो सकती है, इसलिए अपने रिफ्लेक्टर के लिए कला के साथ ऐप का एक नया संस्करण बनाएं. एलिमेंट्स को खींचने योग्य बनाने के बारे में चिंता न करें; अभी के लिए केवल HTML और CSS को रिफलेक्टर करें.
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                                                        | पर्याप्त                        | सुधार की जरूरत                             |
-| ------ | ---------------------------------------------------------------------------------- | ------------------------------- | ------------------------------------------ |
-|        | फ्लेक्सबॉक्स या सीएसएस ग्रिड का उपयोग करके पूरी तरह से नियंत्रित टेरारियम पेश करें | कुछ तत्वों को पुनर्स्थापित करें | टेरारियम को पूरी तरह से बहाल करने में विफल |
diff --git a/3-terrarium/2-intro-to-css/translations/assignment.it.md b/3-terrarium/2-intro-to-css/translations/assignment.it.md
deleted file mode 100644
index 7136660e..00000000
--- a/3-terrarium/2-intro-to-css/translations/assignment.it.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Rifattorizzare CSS
-
-## Istruzioni
-
-Restyling del terrario utilizzando Flexbox o CSS Grid, acquisire schermate per mostrare che lo si è testato su diversi browser. Potrebbe essere necessario modificare il markup, quindi creare una nuova versione dell'app con la grafica disposta per il refactoring. Non ci si preoccupi di rendere gli elementi trascinabili; per ora rifattorizzare solo HTML e CSS.
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
-|          | Presenta un terrario completamente rinnovato utilizzando Flexbox o CSS Grid | Restyling di alcuni elementi | Il restyling del terrario è completamente fallito |
diff --git a/3-terrarium/2-intro-to-css/translations/assignment.ja.md b/3-terrarium/2-intro-to-css/translations/assignment.ja.md
deleted file mode 100644
index c46144a5..00000000
--- a/3-terrarium/2-intro-to-css/translations/assignment.ja.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# CSS リファクタリング
-
-## 説明
-
-Flexbox または CSS グリッドを使ってテラリウムのスタイルを変更し、いくつかのブラウザでテストしたことを示すためにスクリーンショットを撮影してください。マークアップを変更する必要があるかもしれないので、リファクタリングのためにアートを配置した新しいバージョンのアプリを作成してください。要素をドラッグ可能にすることは気にしないで、今のところは HTML と CSS をリファクタリングするだけです。
-
-## ルーブリック
-
-| 基準 | 模範的な例                                                         | 適切な                      | 改善が必要                    |
-| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
-|          | Flexbox や CSS グリッドを使ってテラリウムのスタイルを完全に変更したものを紹介します。 | いくつかの要素のスタイルを変更します。 | テラリウムのリスタイルに失敗します。 |
diff --git a/3-terrarium/2-intro-to-css/translations/assignment.ko.md b/3-terrarium/2-intro-to-css/translations/assignment.ko.md
deleted file mode 100644
index c622288f..00000000
--- a/3-terrarium/2-intro-to-css/translations/assignment.ko.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# CSS 리팩터링
-
-## 설명
-
-Flexbox 또는 CSS Grid를 사용하여 테라리움을 다시 만들고 스크린샷을 찍어 여러 브라우저에서 테스트했음을 보여주시면 좋습니다. 마크업을 변경해야 할 수 있으므로 리팩터링 기술이 적용된 새로운 버전의 앱을 만들어 봅시다. 요소를 드래그할 수 있게 만드는 것은 생각하지 않아도 됩니다. 지금은 HTML과 CSS만 리팩터링 해봅시다.
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 테라리움을 Flexbox 또는 CSS Grid를 사용하여 완전히 다시 만든 경우 | 몇개의 요소만 다시 만든 경우 | 테라리움을 전혀 새로 만들지 못한 경우
diff --git a/3-terrarium/2-intro-to-css/translations/assignment.ms.md b/3-terrarium/2-intro-to-css/translations/assignment.ms.md
deleted file mode 100644
index bb80c78c..00000000
--- a/3-terrarium/2-intro-to-css/translations/assignment.ms.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Pemfaktoran Semula CSS
-
-## Arahan
-
-Nyalakan semula terarium menggunakan Flexbox atau CSS Grid, dan ambil tangkapan skrin untuk menunjukkan bahawa anda telah mengujinya di beberapa penyemak imbas. Anda mungkin perlu mengubah markup jadi buat versi aplikasi baharu dengan seni yang ada untuk anda memfaktorkan. Jangan bimbang menjadikan unsur-unsur itu boleh diseret; hanya memfaktorkan HTML dan CSS buat masa ini.
-
-## Rubrik
-
-| Kriteria | Contoh                                                         | Mencukupi                      | Usaha Lagi                    |
-| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
-|          | Bentangkan terarium yang diperbaiki sepenuhnya menggunakan Flexbox atau CSS Grid | Susun semula beberapa elemen | Gagal menyusun semula terarium sama sekali |
\ No newline at end of file
diff --git a/3-terrarium/2-intro-to-css/translations/assignment.nl.md b/3-terrarium/2-intro-to-css/translations/assignment.nl.md
deleted file mode 100644
index 02ff0bc8..00000000
--- a/3-terrarium/2-intro-to-css/translations/assignment.nl.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# CSS-Refactoring
-
-## Instructies
-
-Restyle het terrarium met Flexbox of CSS Grid en maak screenshots om te laten zien dat u het in verschillende browsers hebt getest. Mogelijk moet u de opmaak wijzigen, dus maak een nieuwe versie van de app met de kunst voor uw refactor. Maakt u geen zorgen over het versleepbaar maken van de elementen; alleen de HTML en CSS refactoren voor nu.
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                                         | Voldoende                      | Moet worden verbeterd                    |
-| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
-|          | Presenteer een volledig gerestyled terrarium met Flexbox of CSS Grid | Restyle een paar van de elementen | Het terrarium helemaal niet restylen |
diff --git a/3-terrarium/2-intro-to-css/translations/assignment.pt.md b/3-terrarium/2-intro-to-css/translations/assignment.pt.md
deleted file mode 100644
index 1ac270c2..00000000
--- a/3-terrarium/2-intro-to-css/translations/assignment.pt.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 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/2-intro-to-css/translations/assignment.zh-tw.md b/3-terrarium/2-intro-to-css/translations/assignment.zh-tw.md
deleted file mode 100644
index 614f93cc..00000000
--- a/3-terrarium/2-intro-to-css/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 重構 CSS
-
-## 簡介
-
-使用 Flexbox 或 CSS Grid 重新規劃盆栽盒，拍幾張在不同瀏覽器上運作的畫面。重新規劃時，你可能需要改變程式碼中版本的標記。不需要去考慮植物拖曳的問題，我們只重構 HTML 與 CSS 的部分。
-
-## 學習評量
-
-| 作業內容 | 優良                                    | 普通             | 待改進               |
-| -------- | --------------------------------------- | ---------------- | -------------------- |
-|          | 使用 Flexbox 或 CSS Grid 呈現新的盆栽盒 | 重新取代部分元素 | 無法更新原有的盆栽盒 |
diff --git a/3-terrarium/translations/README.es.md b/3-terrarium/translations/README.es.md
deleted file mode 100644
index 80ce2fcd..00000000
--- a/3-terrarium/translations/README.es.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Mi terrario: un proyecto para aprender sobre la manipulación de HTML, CSS y DOM usando JavaScript 🌵🌱
-
-Una pequeña meditación de código de arrastrar y soltar. Con un poco de HTML, JS y CSS, puede crear una interfaz web, darle estilo y agregar una interacción.
-
-![mi terrario](../images/screenshot_gray.png)
-
-# Lessons
-
-1. [Introducción a CSS](./intro-to-css/README.md)
-2. [Introducción a HTML](./intro-to-html/README.md)
-3. [Introducción a DOM y JS Closures](intro-to-DOM-and-js-closures/README.md)
-
-## Créditos
-
-Escrito con ♥ ️ por [Jen Looper](https://www.twitter.com/jenlooper)
-
-El terrario creado a través de CSS se inspiró en el frasco de vidrio [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) de Jakub Mandra.
-
-La obra de arte fue dibujada a mano por [Jen Looper](http://jenlooper.com) usando Procreate.
-
-La solución para elementos arrastrables se inspiró en la solución de w3schools para crear un [Elemento HTML arrastrable](https://www.w3schools.com/howto/howto_js_draggable.asp).
-
-Encuentre más información sobre eventos de punteros en los [documentos del W3C](https://www.w3.org/TR/pointerevents1/) y en los [documentos web de MDN](https://developer.mozilla.org/docs/Web/API/Pointer_events).
-
-Siempre verifique las capacidades del navegador usando [CanIUse.com](https://caniuse.com/).
-
-Obtenga más información sobre cómo crear sitios para la Web y dispositivos móviles en [Microsoft Learn](https://docs.microsoft.com/learn/modules/build-simple-website/?WT.mc_id=academic-77807-sagibbon).
diff --git a/3-terrarium/translations/README.fr.md b/3-terrarium/translations/README.fr.md
deleted file mode 100644
index 22cec7e1..00000000
--- a/3-terrarium/translations/README.fr.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Mon Terrarium : un projet pour en savoir plus sur la manipulation HTML, CSS et DOM à l'aide de JavaScript 🌵🌱
-
-Un petit code de méditation de type glisser-déposer. Avec un peu de HTML, JS et CSS, vous pouvez créer une interface Web, la styliser et ajouter une interaction.
-
-![mon terrarium](../images/screenshot_gray.png)
-
-# Cours
-
-1. [Introduction au HTML](../1-intro-to-html/translations/README.fr.md)
-2. [Introduction au CSS](../2-intro-to-css/translations/README.fr.md)
-3. [Introduction au DOM et aux closures JS](../3-intro-to-DOM-and-closures/translations/README.fr.md)
-
-## Crédits
-
-Rédigé avec ♥️  par [Jen Looper](https://www.twitter.com/jenlooper)
-
-Le terrarium créé via CSS a été inspiré du pot en verre de Jakub Mandra[codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
-
-L'œuvre a été dessinée à la main par [Jen Looper](http://jenlooper.com) en utilisant Procreate.
-
-## Déployez votre Terrarium
-
-Vous pouvez déployer ou publier votre terrarium sur le Web à l'aide d'Azure Static Web Apps. 
-
-1. Forkez ce repo
-
-2. Appuyez sur ce bouton
-
-[![Bouton déployez sur Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. Parcourez l'assistant de création de votre application. Assurez-vous de définir la racine de l'application sur `/solution` ou sur la racine de votre base de code. Il n'y a pas d'API dans cette application, alors ne vous inquiétez pas pour en ajouter. Un dossier .github sera créé dans votre référentiel forké qui aidera le service de création d'Azure Static Web Apps à créer et à publier votre application sur une nouvelle URL.
-
-
-
diff --git a/3-terrarium/translations/README.hi.md b/3-terrarium/translations/README.hi.md
deleted file mode 100644
index c8bea845..00000000
--- a/3-terrarium/translations/README.hi.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# मेरा टेरारियम: जावास्क्रिप्ट का उपयोग करके HTML, CSS और DOM हेरफेर के बारे में जानने के लिए एक परियोजना 🌵🌱
-
-एक छोटा सा ड्रैग एंड ड्रॉप कोड-मेडिटेशन। थोड़ा एचटीएमएल, जेएस और सीएसएस के साथ, आप एक वेब इंटरफ़ेस बना सकते हैं, इसे स्टाइल कर सकते हैं, और एक इंटरैक्शन जोड़ सकते हैं।
-
-![मेरा टेरारियम](../images/screenshot_gray.png)
-
-# पाठ
-
-1. [एचटीएमएल का परिचय](../1-intro-to-html/translations/README.hi.md)
-2. [सीएसएस का परिचय](../2-intro-to-css/translations/README.hi.md)
-3. [डोम और जेएस क्लोजर का परिचय](../3-intro-to-DOM-and-closures/translations/README.hi.md)
-
-## आभार सूची
-
-[Jen Looper](https://www.twitter.com/jenlooper) द्वारा ♥️ से लिखा गया है
-
-सीएसएस के माध्यम से बनाया गया टेरारियम जैकब मंडरा के ग्लास जार से प्रेरित था [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
-
-कलाकृति को [Jen Looper](http://jenlooper.com) द्वारा प्रोक्रीट का उपयोग करके हाथ से तैयार किया गया था।
-
-## अपना टेरारियम तैनात करें
-
-आप Azure Static Web Apps का उपयोग करके वेब पर अपना टेरारियम तैनात या प्रकाशित कर सकते हैं
-
-1. ये रेपो फोर्क करे
-
-2. इस बटन को दबाएँ
-
-[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. अपना ऐप बनाने वाले विज़ार्ड के माध्यम से चलें। सुनिश्चित करें कि आपने ऐप रूट को या तो `../solution` या अपने कोडबेस की जड़ के रूप में सेट किया है. इस ऐप में कोई API नहीं है, इसलिए इसे जोड़ने की चिंता न करें. एक .github फोल्डर आपके फोर्क्ड रेपो में बनाया जाएगा जो Azure Static Web Apps की बिल्ड सर्विस बनाने और आपके ऐप को एक नए URL पर प्रकाशित करने में मदद करेगा।
diff --git a/3-terrarium/translations/README.it.md b/3-terrarium/translations/README.it.md
deleted file mode 100644
index f090b5dd..00000000
--- a/3-terrarium/translations/README.it.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Il mio Terrario: un progetto per conoscere HTML, CSS e la manipolazione del DOM utilizzando JavaScript 🌵🌱
-
-Una piccola meditazione sul codice drag and drop. Con un po' di HTML, JS e CSS, si può creare un'interfaccia web, modellarla e aggiungere un'interazione.
-
-![Il mio terrario](../images/screenshot_gray.png)
-
-# Lezioni
-
-1. [Introduzione a HTML](./1-intro-to-html/translations/README.it.md)
-2. [Introduzione a CSS](./2-intro-to-css/translations/README.it.md) 
-3. [Introduzione al DOM e alle Closure JavaScript](./3-intro-to-DOM-and-closures/translations/README.it.md)
-
-## Crediti
-
-Scritto con il ♥ ️ da [Jen Looper](https://www.twitter.com/jenlooper)
-
-Il terrario creato tramite CSS è stato ispirato dal [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) del barattolo di vetro di Jakub Mandra.
-
-La grafica è stata disegnata a mano da [Jen Looper](http://jenlooper.com) usando Procreate.
-
-## Distribuire il Terrario
-
-È possibile distribuire o pubblicare il proprio terrario sul Web utilizzando Azure Static Web Apps
-
-1. Effettuare il fork di questo repository
-
-2. Premere questo pulsante 
-
-[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. Seguire la procedura guidata per creare l'app. Assicurarsi di impostare la radice dell'app su `/solution` o la radice della propria base di codice. Non ci sono API in questa app, quindi non ci si deve preoccupare di aggiungerla. Verrà creata una cartella .github nel repository oggetto di fork del punto 1 che aiuterà il servizio di compilazione di Azure Static Web Apps a creare e pubblicare l'app in un nuovo URL.
-
-
-
diff --git a/3-terrarium/translations/README.ja.md b/3-terrarium/translations/README.ja.md
deleted file mode 100644
index 456a75a7..00000000
--- a/3-terrarium/translations/README.ja.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# マイテラリウム: JavaScript を使った HTML・CSS・DOM 操作を学ぶプロジェクト 🌵🌱
-
-ちょっとしたドラッグ＆ドロップのコードメディテーション。少しの HTML、JS、CSS で、Web インターフェースを構築し、スタイルを設定し、インタラクションを追加することができます。
-
-![my terrarium](../images/screenshot_gray.png)
-
-# レッスン
-
-1. [HTML 入門](../1-intro-to-html/translations/README.ja.md)
-2. [CSS 入門](../2-intro-to-css/translations/README.ja.md)
-3. [DOM の操作とクロージャ](../3-intro-to-DOM-and-closures/translations/README.ja.md)
-
-## クレジット
-
-Written with ♥️  by [Jen Looper](https://www.twitter.com/jenlooper)
-
-CSS で作ったテラリウムは、Jakub Mandra のガラス瓶 [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY) にインスパイアされています。
-
-アートワークは [Jen Looper](http://jenlooper.com) が Procreate を使って手書きで描いたものです。
-
-## テラリウムのデプロイ
-
-Azure Static Web Apps を使ってテラリウムをデプロイしたり、ウェブに公開したりすることができます。
-
-1. このリポジトリをフォークします
-
-2. このボタンを押します
-
-[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. アプリを作成するウィザードに沿って進みます。アプリのルートを `/solution` またはコードベースのルートに設定してください。このアプリには API はありませんので、追加については心配しないでください。フォークされたレポに .github フォルダが作成され、Azure Static Web Apps のビルドサービスのビルドを支援し、新しい URL にアプリを公開します。
-
-
diff --git a/3-terrarium/translations/README.ko.md b/3-terrarium/translations/README.ko.md
deleted file mode 100644
index a6c45450..00000000
--- a/3-terrarium/translations/README.ko.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# My Terrarium : JavaScript를 사용한 HTML, CSS 및 DOM 조작에 대해 배우는 프로젝트 🌵🌱
-
-작은 드래그 앤 드롭 코드-명상. 약간의 HTML, JS와 CSS를 사용하여 웹 인터페이스를 구축하고, 스타일을 지정하고, 상호 작용을 추가합니다.
-
-![my terrarium](../images/screenshot_gray.png)
-
-# Lessons
-
-1. [HTML 소개](.././1-intro-to-html/translations/README.ko.md)
-2. [CSS 소개](.././2-intro-to-css/translations/README.ko.md)
-3. [DOM 및 JS Closures](.././3-intro-to-DOM-and-closures/translations/README.ko.md)
-
-## 크레딧
-
-Written with ♥️  by [Jen Looper](https://www.twitter.com/jenlooper)
-
-The terrarium created via CSS was inspired by Jakub Mandra's glass jar [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
-
-The artwork was hand drawn by [Jen Looper](http://jenlooper.com) using Procreate.
-
-## Terrarium 배포하기
-
-Azure Static Web Apps를 사용하여 terrarium을 웹에 배포하거나 게시할 수 있습니다.
-
-1. 저장소를 포크합니다
-
-2. 버튼을 누릅니다
-
-[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. 앱을 만드는 마법사로 안내합니다. 앱 상위를 `/solution` 또는 코드베이스의 상위로 설정했는지 확인하십시오. 이 앱에는 API가 없으므로 추가할 필요가 없습니다. Azure Static Web Apps의 빌드 서비스로 빌드하고 새 URL에 앱을 게시하는 데 도움이 되는 포크 리포지토리에 .github 폴더가 생성됩니다.
diff --git a/3-terrarium/translations/README.ms.md b/3-terrarium/translations/README.ms.md
deleted file mode 100644
index c43f55c8..00000000
--- a/3-terrarium/translations/README.ms.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# My Terrarium: Projek untuk belajar mengenai HTML, CSS, dan memanipulasikan DOM menggunakan JavaScript 🌵🌱
-
-Meditasi kod seret dan lepas kecil. Dengan sedikit HTML, JS dan CSS, anda boleh membina antara muka web, menggayakannya, dan menambahkan interaksi.
-
-![my terrarium](../images/screenshot_gray.png)
-
-# Pengajaran
-
-1. [Pengenalan HTML](../1-intro-to-html/README.md)
-2. [Pengenalan CSS](../2-intro-to-css/README.md)
-3. [Pengenalan DOM dan Penutupan JS](../3-intro-to-DOM-and-closures/README.md)
-
-## Kredit
-
-Ditulis dengan ♥️  oleh [Jen Looper](https://www.twitter.com/jenlooper)
-
-Terarium yang dibuat melalui CSS diilhamkan oleh balang kaca Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
-
-Karya seni inu dilukis oleh [Jen Looper](http://jenlooper.com) dengan menggunakan Procreate.
-
-## Sebarkan Terrarium anda
-
-Anda boleh menggunakan, atau menerbitkan terarium anda ke web menggunakan Aplikasi Web Azure Static (Azure Static Web Apps).
-
-1. Fork repo ini
-
-2. Tekan butang ini
-
-[![Sebarkan ke butang Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=cxaall-4621-cxall#create/Microsoft.StaticApp)
-
-3. Berjalan melalui wizard membuat aplikasi anda. Pastikan anda menetapkan root aplikasi menjadi `/solution` atau root basis pangkalan data anda. Tidak ada API dalam aplikasi ini, jadi jangan risau untuk menambahkannya. Folder .github akan dibuat di repo bercabang anda yang akan membantu membina perkhidmatan Aplikasi Azure Static Web membina dan menerbitkan aplikasi anda ke URL baru.
diff --git a/3-terrarium/translations/README.nl.md b/3-terrarium/translations/README.nl.md
deleted file mode 100644
index a39b132e..00000000
--- a/3-terrarium/translations/README.nl.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# Mijn Terrarium: een project om te leren over HTML-, CSS- en DOM-manipulatie met JavaScript 🌵🌱
-
-Een kleine codemeditatie met drag and drop. Met een beetje HTML, JS en CSS kunt u een webinterface bouwen, deze opmaken en een interactie toevoegen.
-
-![mijn terrarium](../images/screenshot_gray.png)
-
-# Lessen
-
-1. [Inleiding tot HTML](../1-intro-to-html/translations/README.nl.md)
-2. [Inleiding tot CSS](../2-intro-to-css/translations/README.nl.md)
-3. [Inleiding tot DOM en JS Sluitingen](../3-intro-to-DOM-and-closures/translations/README.nl.md)
-
-## Credits
-
-Geschreven met ♥ ️door [Jen Looper](https://www.twitter.com/jenlooper)
-
-Het terrarium gemaakt via CSS is geïnspireerd op de glazen pot van Jakub Mandra [codepen](https://codepen.io/Rotarepmi/pen/rjpNZY).
-
-Het artwork is met de hand getekend door [Jen Looper](http://jenlooper.com) met Procreate.
-
-## Zet uw terrarium in
-
-U kunt uw terrarium op internet zetten of publiceren met Azure Static Web Apps. 
-
-1. Fork deze repo
-
-2. druk op deze knop
-
-[![Implementeer in Azure knop](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. Loop door de wizard om uw app te maken. Zorg ervoor dat u de app-root instelt op `/solution` of de root van uw codebase. Er zit geen API in deze app, dus maakt u geen zorgen om die toe te voegen. Er wordt een .github-map gemaakt in uw geforkte repo die Azure Static Web Apps helpt bij het bouwen van services en het publiceren van uw app naar een nieuwe URL.
-
-
-
diff --git a/3-terrarium/translations/README.pt-BR.md b/3-terrarium/translations/README.pt-BR.md
deleted file mode 100644
index 406cc423..00000000
--- a/3-terrarium/translations/README.pt-BR.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Meu Terrário: Um projeto para aprender HTML, CSS, e manipulação de 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, estilizá-la, e adicionar 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-77807-sagibbon#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
deleted file mode 100644
index a5b04127..00000000
--- a/3-terrarium/translations/README.pt.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# 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 HTML](../1-intro-to-html/README.md)
-2. [Introdução ao CSS](../2-intro-to-css/README.md)
-3. [Introdução ao DOM e JS Closures(fechamentos)](../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 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-77807-sagibbon#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/3-terrarium/translations/README.ta.md b/3-terrarium/translations/README.ta.md
deleted file mode 100644
index 889d72f7..00000000
--- a/3-terrarium/translations/README.ta.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# என் நிலப்பரப்பு:  ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி ஹெச்டிஎம்எல், சிஎஸ்எஸ் மற்றும் டோம் கையாளுதல் பற்றி அறிய ஒரு திட்டம் 🌵🌱
-
-ஒரு சிறிய இழுவை மற்றும் குறியீடு தியானம் கைவிட.ஒரு சிறிய ஹெச்டிஎம்எல், ஜேஎஸ் மற்றும் சிஎஸ்எஸ் மூலம், நீங்கள் ஒரு வலை இடைமுகத்தை உருவாக்கலாம், அதை பாணிசெய்யலாம், மற்றும் ஒரு தொடர்பு சேர்க்கலாம்.
-
-![என் நிலப்பரப்பு](../images/screenshot_gray.png)
-
-# பாடங்கள்
-
-1. [ஹெச்டிஎம்எல் அறிமுகம்](../1-intro-to-html/README.md)
-2. [சிஎஸ்எஸ் அறிமுகம்](../2-intro-to-css/README.md)
-3. [டோம் மற்றும் ஜேஎஸ் மூடல்களுக்கு அறிமுகம்](../3-intro-to-DOM-and-closures/README.md)
-
-### கடன்கள்
-
-[ஜென் லூப்பர்](https://www.twitter.com/jenlooper) ♥️ எழுதினார்
-சிஎஸ்எஸ் வழியாக உருவாக்கப்பட்ட நிலப்பரப்பு ஈர்க்கப்பட்டது
-
-சி.எஸ்.எஸ் வழியாக உருவாக்கப்பட்ட நிலப்பரப்பு ஜாகுப் மந்த்ராவின் கண்ணாடி [கோடெபென்](https://codepen.io/Rotarepmi/pen/rjpNZY). ஜாடியால் ஈர்க்கப்பட்டது 
-
-இந்த கலைப்படைப்பு புரோகிரியேட்பயன்படுத்தி [ஜென் லூப்பரால்](http://jenlooper.com)  வரையப்பட்டது
-
-## உங்கள் நிலப்பரப்பு பயன்படுத்தவும்
-
-அஸூர் ஸ்டேடிக் வெப் ஆப்ஸ் பயன்படுத்தி உங்கள் டெரரியத்தை இணையத்தில் பயன்படுத்தலாம் அல்லது வெளியிடலாம். 
-
-1. இந்த ரெப்போவை ஃபோர்க் செய்யுங்கள்
-2. இந்த பொத்தானை அழுத்தவும்
-
-[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. உங்கள் பயன்பாட்டை உருவாக்கும் வழிகாட்டி வழியாக நடக்கவும்.  பயன்பாட்டு வேர் `/solution` அல்லது உங்கள் கோட்பேஸின் வேர் என்று நீங்கள் அமைக்கிறீர்கள் என்பதை உறுதிப்படுத்தவும்.இந்த பயன்பாட்டில் ஏபிஐ இல்லை, எனவே அதை சேர்ப்பது பற்றி கவலைப்பட வேண்டாம்.உங்கள் ஃபோர்க் செய்யப்பட்ட ரெப்போவில் ஒரு கீட்ஹப் கோப்புறை உருவாக்கப்படும், இது அஸூர் ஸ்டேடிக் வெப் ஆப்ஸின் சேவையை உருவாக்கவும் உங்கள் பயன்பாட்டை ஒரு புதிய யுஆர்எல் க்கு வெளியிடவும் உதவும்.
diff --git a/3-terrarium/translations/README.zh-cn.md b/3-terrarium/translations/README.zh-cn.md
deleted file mode 100644
index e076ed4f..00000000
--- a/3-terrarium/translations/README.zh-cn.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# 我的花艺瓶：一个用于学习 HTML、CSS 和使用 JS 操作 DOM 的项目 🌵🌱
-
-思考构建一个的具有拖放交互的小程序，只需要很少的 HTML、CSS 和 JS 代码，你就可以构建一个被美化的，且具有交互功能的 Web 页面。
-
-![我的花艺瓶](../images/screenshot_gray.png)
-
-# 教程
-
-1. [HTML 简介](../1-intro-to-html/translations/README.zh-cn.md)
-2. [CSS 简介](../2-intro-to-css/translations/README.zh-tw.md)
-3. [DOM 简介与 JS 闭包](../3-intro-to-DOM-and-closures/translations/README.zh-tw.md)
-
-## 参与人员
-
-由 [Jen Looper](https://www.twitter.com/jenlooper) 充满着 ♥️ 编写。
-
-使用 CSS 来编写一个花艺瓶的灵感来自于 Jakub Mandra 的玻璃瓶 [CodePen](https://codepen.io/Rotarepmi/pen/rjpNZY)。
-
-上面的手绘插画由 [Jen Looper](http://jenlooper.com) 使用 Procreate 绘制。
-
-## 部署你的花艺瓶
-
-你可以使用 Azure Static Web Apps 部署并发布你的花艺瓶到网络上。
-
-1. Fork 这个仓库
-
-2. 点击下方的按钮
-
-[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. 按照指引创建你的应用。请确保你的程序根目录为 `/solution` 或者是你自己代码项目的根目录。这个应用不需要使用任何 API，因此你不用担心需要去调用什么额外的内容。.github 目录会在你 fork 的仓库中创建，它将帮助 Azure Static Web Apps 的构建服务构建并发布你的应用到一个新的地址。
-
-
-
diff --git a/3-terrarium/translations/README.zh-tw.md b/3-terrarium/translations/README.zh-tw.md
deleted file mode 100644
index 976f0335..00000000
--- a/3-terrarium/translations/README.zh-tw.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# 我的盆栽盒：一個關於 HTML、CSS 與 JavaScript DOM 控制的專案 🌵🌱
-
-深思一項小型互動式拖放程式專案，在 HTML、JS 與 CSS 的帶領下，你可以建立網頁介面，美化它，並增加互動功能。
-
-![我的盆栽盒](../images/screenshot_gray.png)
-
-# 課程
-
-1. [HTML 簡介](../1-intro-to-html/translations/README.zh-tw.md)
-2. [CSS 簡介](../2-intro-to-css/translations/README.zh-tw.md)
-3. [DOM 簡介與閉包](../3-intro-to-DOM-and-closures/translations/README.zh-tw.md)
-
-## 參與人員
-
-由 [Jen Looper](https://www.twitter.com/jenlooper) 用滿滿的 ♥️ 來編寫。
-
-用 CSS 建立盆栽盒的發想來自於 Jakub Mandra 的玻璃罐 [CodePen](https://codepen.io/Rotarepmi/pen/rjpNZY)。
-
-手繪插圖由 [Jen Looper](http://jenlooper.com) 使用 Procreate 繪製。
-
-## 建置你的盆栽盒
-
-你可以利用 Azure Static Web Apps 建置、發布你的盆栽盒到網路上。
-
-1. 分叉這個數據庫
-
-2. 按下下方按鈕
-
-[![Deploy to Azure button](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/?feature.customportal=false&WT.mc_id=academic-77807-sagibbon#create/Microsoft.StaticApp)
-
-3. 遵循指示建立你的網頁應用。請確保你的程式根目錄為 `/solution` 或者是你自己的專案位置。這項專案並不包含任何 API，你不需要考慮額外匯入的問題。 .github 資料夾會建立在你的分叉數據庫中，它會幫助 Azure Static Web Apps 的組建服務並發布你的應用到新的網址。
-
-
-
diff --git a/4-typing-game/translations/README.es.md b/4-typing-game/translations/README.es.md
deleted file mode 100644
index 5b70720a..00000000
--- a/4-typing-game/translations/README.es.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Programación basada en Eventos - Construye un juego de Mecanografía
-
-## Introducción
-
-Escribir es una de las habilidades más subestimadas de los desarrolladores. La capacidad de poder transmitir rápidamente pensamientos de su cabeza a su editor permite que la creatividad fluya libremente. ¡Una de las mejores formas de aprender es jugando un juego!
-
-> Entonces, ¡construyamos un juego de mecanografía!
-
-Utilizará las habilidades de JavaScript, HTML y CSS que ha aprendido hasta ahora para crear este juego. El mismo le mostrará al jugador una cita aleatoria (estamos usando las citas de [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes)) y el tiempo que tarda el jugador en escribirlo con precisión.
-
-![demo](../images/demo.gif)
-
-## Requisitos
-
-Esta lección asume que está familiarizado con los siguientes conceptos:
-
-- Crear entradas de texto y botones
-- CSS y estilos por clases
-- JavaScript básico
-  - Creación de array
-  - Crear números de manera aleatoria (random)
-  - Obtener la hora actual
-
-## Lección
-
-[Creación de un juego de mecanografía mediante eventos](../typing-game/translations/README.es.md)
-
-## Creditos
-
-Escrito con ♥️ por [Christopher Harrison](http://www.twitter.com/geektrainer)
diff --git a/4-typing-game/translations/README.fr.md b/4-typing-game/translations/README.fr.md
deleted file mode 100644
index 0c16701c..00000000
--- a/4-typing-game/translations/README.fr.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Programmation événementielle - Développer un jeu de dactylographie
-
-## Introduction
-
-La dactylographie est l'une des compétences les plus sous-estimées du développeur. La possibilité de transférer rapidement des pensées de votre tête à votre éditeur permet à la créativité de circuler librement. L'une des meilleures façons d'apprendre est de jouer à un jeu!
-
-> Alors, développons un jeu de dactylographie !
-
-Vous allez utiliser les compétences JavaScript, HTML et CSS que vous avez acquises jusqu'à présent pour créer un jeu de dactylographie. Le jeu présentera au joueur une citation aléatoire (nous utilisons des citations de[Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes)) et le temps qu'il faudra au joueur pour la taper avec précision. Vous allez utiliser les compétences JavaScript, HTML et CSS que vous avez acquises jusqu'à présent pour créer un jeu de dactylographie.
-
-![démo](../images/demo.gif)
-
-## Prérequis
-
-Cette leçon suppose que vous connaissez les concepts suivants :
-
-- Création de champs de saisie de texte et de contrôles de boutons
-- CSS et paramètrage de styles à l'aide de classes
-- Les bases de JavaScript
-  - Création d'un tableau
-  - Création d'un nombre aléatoire
-  - Obtenir l'heure actuelle
-
-## Leçon
-
-[Création d'un jeu de dactylographie en utilisant la programmation événementielle](../typing-game/translations/README.fr.md)
-
-## Crédits
-
-Rédigé avec ♥️  par [Christopher Harrison](http://www.twitter.com/geektrainer)
diff --git a/4-typing-game/translations/README.hi.md b/4-typing-game/translations/README.hi.md
deleted file mode 100644
index 475980b8..00000000
--- a/4-typing-game/translations/README.hi.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# ईवेंट-चालित प्रोग्रामिंग - एक टाइपिंग गेम बनाएँ
-
-## परिचय
-
-टाइपिंग डेवलपर के सबसे कम कौशल में से एक है.अपने संपादक से विचारों को जल्दी से स्थानांतरित करने की क्षमता रचनात्मकता को स्वतंत्र रूप से प्रवाह करने की अनुमति देती है। सीखने के सर्वोत्तम तरीकों में से एक खेल खेलना है!
-
-> तो, चलिए एक टाइपिंग गेम बनाते हैं!
-
-आप टाइपिंग गेम बनाने के लिए अब तक आपके द्वारा बनाए गए जावास्क्रिप्ट, HTML और सीएसएस कौशल का उपयोग करने जा रहे हैं. खेल एक यादृच्छिक उद्धरण के साथ खिलाड़ी को प्रस्तुत करेगा (हम [शर्लक होम्स](https://en.wikipedia.org/wiki/Sherlock_Holmes) का उद्धरण उपयोग कर रहे हैं) और खिलाड़ी को इसे सही ढंग से टाइप करने में कितना समय लगता है. आप टाइपिंग गेम बनाने के लिए अब तक आपके द्वारा बनाए गए जावास्क्रिप्ट, HTML और सीएसएस कौशल का उपयोग करने जा रहे हैं।
-
-![प्रदर्शन](../images/demo.gif)
-
-## आवश्यक शर्तें
-
-यह पाठ मानता है कि आप निम्नलिखित अवधारणाओं से परिचित हैं:
-
-- टेक्स्ट इनपुट और बटन नियंत्रण बनाना
-- क्लासेज का उपयोग करके सीएसएस और शैलियों की स्थापना
-- जावास्क्रिप्ट मूल बातें
-  - एक सरणी बनाना
-  - एक यादृच्छिक संख्या बनाना
-  - वर्तमान समय पाना
-
-## पाठ
-
-[इवेंट संचालित प्रोग्रामिंग का उपयोग करके एक टाइपिंग गेम बनाना](../typing-game/README.hi.md)
-
-## आभार सूची
-
-[Christopher Harrison](http://www.twitter.com/geektrainer) द्वारा ♥️ के साथ लिखा गया है
diff --git a/4-typing-game/translations/README.it.md b/4-typing-game/translations/README.it.md
deleted file mode 100644
index c2e91af7..00000000
--- a/4-typing-game/translations/README.it.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Programmazione Guidata dagli Eventi: Creare un Gioco di Battitura
-
-## Introduzione
-
-La digitazione è una delle abilità più sottovalutate dello sviluppatore. La capacità di trasferire rapidamente i pensieri dalla propria testa al proprio editor consente alla creatività di fluire liberamente. Uno dei modi migliori per imparare è giocare!
-
-> Quindi, si costuirà un gioco di battitura!
-
-Si utilizzaranno le capacità JavaScript, HTML e CSS sviluppate finora per creare un gioco di battitura. Il gioco presenterà al giocatore una citazione casuale (verranno usate citazioni da [Sherlock Holmes](https://it.wikipedia.org/wiki/Sherlock_Holmes) ) e il tempo impiegato dal giocatore per digitarla accuratamente. Si utilizzeranno le capacità JavaScript, HTML e CSS sviluppate finora per creare un gioco di battitura.
-
-![Demo](../images/demo.gif)
-
-## Prerequisiti
-
-Questa lezione presume che si abbia familiarità con i seguenti concetti:
-
-- Creazione di controlli per input di testo e pulsanti
-- CSS e impostazione degli stili utilizzando le classi
-- Nozioni di base su JavaScript
-   - Creare un array
-   - Creare un numero casuale
-   - Ottenere l'orario corrente
-
-## Lezione
-
-[Creare un gioco di battitura utilizzando la programmazione guidata dagli eventi](../typing-game/translations/README.it.md)
-
-## Crediti
-
-Scritto con il ♥ ️ da [Christopher Harrison](http://www.twitter.com/geektrainer)
diff --git a/4-typing-game/translations/README.ja.md b/4-typing-game/translations/README.ja.md
deleted file mode 100644
index f6fcd18c..00000000
--- a/4-typing-game/translations/README.ja.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# イベント駆動型プログラミング - タイピングゲームの構築
-
-## イントロダクション
-
-タイピングは、開発者が最も過小評価されているスキルの一つです。頭の中からエディタに思考を素早く転送する能力は、創造性が自由に流れることを可能にします。最高の学習方法の一つは、ゲームをプレイすることです!
-
-> ということで、タイピングゲームを作ってみましょう!
-
-これまで培ってきた JavaScript、HTML、CSS のスキルを使ってタイピングゲームを作っていただきます。このゲームでは、プレイヤーにランダムな引用文 ([シャーロック・ホームズ](https://en.wikipedia.org/wiki/Sherlock_Holmes)の名言を使用しています) を提示し、それを正確に入力するのにどれくらいの時間がかかるかを競います。これまでに培った JavaScript、HTML、CSS のスキルを使ってタイピングゲームを作ってみましょう。
-
-![demo](../images/demo.gif)
-
-## 前提条件
-
-このレッスンでは、次のような概念に精通していることを前提としています:
-
-- テキスト入力とボタンコントロールの作成
-- CSS とクラスを使ったスタイルの設定
-- JavaScript の基礎
-  - 配列の作成
-  - 乱数の生成
-  - 現在の時刻の取得
-
-## レッスン
-
-[イベント駆動型プログラミングを用いたタイピングゲームの作成](../typing-game/translations/README.ja.md)
-
-## クレジット
-
-Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer)
diff --git a/4-typing-game/translations/README.ko.md b/4-typing-game/translations/README.ko.md
deleted file mode 100644
index f76a602a..00000000
--- a/4-typing-game/translations/README.ko.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# 이벤트-주도 프로그래밍 - 타이핑 게임 빌드하기
-
-## 소개
-
-타이핑은 개발자에게 가장 과소평가된 스킬 중 하나입니다. 생각을 머리에서 에디터에 빠르게 전달할 수 있는 능력은 창의력이 자유롭게 흐릅니다. 배울 때 가장 좋은 방법 중 하나는 게임을 직접 해보는 것입니다!
-
-> 이제 타이핑 게임을 빌드하러 갑시다!
-
-타이핑 게임을 만들기 위해 지금까지 배운 JavaScript, HTML 및 CSS 스킬을 사용합니다. 게임은 플레이어에게 무작위 인용문([Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) 인용문 사용)과 플레이어가 정확하게 입력하는 데 걸리는 시간을 제시합니다.
-
-![demo](../images/demo.gif)
-
-## 사전 조건
-
-이 레슨에서는 다음 개념에 익숙하다고 가정합니다:
-
-- 텍스트 입력 및 버튼 컨트롤 생성하기
-- 클래스를 사용한 CSS 및 설정 스타일하기
-- JavaScript 기초
-  - 배열 생성하기
-  - 난수 생성하기
-  - 현재 시간 얻기
-
-## 레슨
-
-[이벤트 기반 프로그래밍을 사용하여 타이핑 게임 만들기](../typing-game/translations/README.ko.md)
-
-## 크레딧
-
-Written with ♥️ by [Christopher Harrison](http://www.twitter.com/geektrainer)
diff --git a/4-typing-game/translations/README.ms.md b/4-typing-game/translations/README.ms.md
deleted file mode 100644
index 03da5655..00000000
--- a/4-typing-game/translations/README.ms.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Pengaturcaraan Berdasarkan Acara - Bina Permainan Menaip
-
-## Pengenalan
-
-Menaip adalah salah satu kemahiran yang paling diremehkan oleh pemaju. Keupayaan untuk memindahkan pemikiran dari kepala ke editor anda dengan cepat membolehkan kreativiti mengalir dengan bebas. Salah satu kaedah terbaik untuk belajar adalah bermain permainan!
-
-> Oleh itu, mari kita membina permainan menaip!
-
-Anda akan menggunakan kemahiran JavaScript, HTML dan CSS yang telah anda buat selama ini untuk membuat permainan menaip. Permainan akan memberikan petikan secara rawak kepada pemain (kami menggunakan petikan [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes)) dan masa yang diperlukan pemain untuk mengetiknya dengan tepat. Anda akan menggunakan kemahiran JavaScript, HTML dan CSS yang telah anda buat selama ini untuk membuat permainan menaip.
-
-![demo](../images/demo.gif)
-
-## Prasyarat
-
-Pelajaran ini menganggap anda sudah biasa dengan konsep berikut:
-
-- Membuat input teks dan kawalan butang
-- CSS dan gaya penetapan menggunakan kelas
-- Asas JavaScript
-  - Membuat susunan
-  - Membuat nombor rawak
-  - Mendapatkan masa sekarang
-
-## Pelajaran
-
-[Membuat permainan menaip dengan menggunakan pengaturcaraan berdasarkan acara](../typing-game/README.ms.md)
-
-## Kredit 
-
-Ditulisa dengan ♥️ oleh [Christopher Harrison](http://www.twitter.com/geektrainer)
\ No newline at end of file
diff --git a/4-typing-game/translations/README.nl.md b/4-typing-game/translations/README.nl.md
deleted file mode 100644
index fbc946d8..00000000
--- a/4-typing-game/translations/README.nl.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Event-Driven Programming - Bouw een Typspel
-
-## Inleiding
-
-Typen is een van de meest onderschatte vaardigheden van de ontwikkelaar. De mogelijkheid om snel gedachten van uw hoofd naar uw editor over te brengen, zorgt ervoor dat creativiteit vrijelijk kan stromen. Een van de beste manieren om te leren is door een spel te spelen!
-
-> Dus laten we een typspel bouwen!
-
-Je gaat de JavaScript-, HTML- en CSS-vaardigheden gebruiken die u tot nu toe hebt opgebouwd om een typspel te maken. Het spel zal de speler een willekeurig citaat laten zien (we gebruiken [Sherlock Holmes](https://nl.wikipedia.org/wiki/Sherlock_Holmes) aanhalingstekens) en de tijd hoe lang het duurt voordat de speler het nauwkeurig intypt. U gaat de JavaScript-, HTML- en CSS-vaardigheden gebruiken die u tot nu toe hebt opgebouwd om een typspel te maken.
-
-![demo](../images/demo.gif)
-
-## Vereisten
-
-In deze les wordt ervan uitgegaan dat u bekend bent met de volgende concepten:
-
-- Tekstinvoer en knopbedieningen maken
-- CSS en het instellen van stijlen met behulp van class
-- JavaScript-basisprincipes
-  - Een array maken
-  - Een willekeurig nummer maken
-  - De huidige tijd ophalen
-
-## Les
-
-[Een typspel maken met behulp van event driven programming (Engels)](../typing-game/README.md)
-
-## Credits
-
-Geschreven met ♥ ️door [Christopher Harrison](http://www.twitter.com/geektrainer)
diff --git a/4-typing-game/translations/README.ta.md b/4-typing-game/translations/README.ta.md
deleted file mode 100644
index 8896806c..00000000
--- a/4-typing-game/translations/README.ta.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# நிகழ்வு-இயக்கப்படும் நிரலாக்கம் - ஒரு தட்டச்சு விளையாட்டு உருவாக்க
-
-## அறிமுகம்
-
-தட்டச்சு என்பது டெவலப்பரின் மிகவும் குறைவாக மதிப்பிடப்பட்ட திறன்களில் ஒன்றாகும். உங்கள் தலையிலிருந்து உங்கள் எடிட்டருக்கு விரைவாக எண்ணங்களை மாற்றும் திறன் படைப்பாற்றல் சுதந்திரமாக ஓட அனுமதிக்கிறது. கற்றுக்கொள்வதற்கான சிறந்த வழிகளில் ஒன்று விளையாட்டை விளையாடுவது!
-
-> எனவே, தட்டச்சு விளையாட்டை உருவாக்குவோம்!
-
-நீங்கள் இதுவரை உருவாக்கிய ஜாவாஸ்கிரிப்ட், ஹெச்டிஎம்எல் மற்றும் சிஎஸ்எஸ் திறன்களைப் பயன்படுத்தி தட்டச்சு விளையாட்டை உருவாக்கப் போகிறீர்கள். விளையாட்டு ஒரு சீரற்ற மேற்கோள் வீரர் வழங்கும் (நாங்கள் பயன்படுத்துகிறோம் [ஷெர்லாக் ஹோம்ஸ்](https://en.wikipedia.org/wiki/Sherlock_Holmes) மேற்கோள்கள்) மற்றும் வீரர் துல்லியமாக அதை தட்டச்சு செய்ய எவ்வளவு நேரம் எடுக்கும்
-
-
-![டெமோ](../images/demo.gif)
-
-## முன்நிபந்தனைகள்
-
-பின்வரும் கருத்துகளை நீங்கள் நன்கு அறிந்திருப்பீர்கள் என்று இந்தப் பாடம் கருதுகிறது:
-
-- உரை உள்ளீடு மற்றும் பொத்தான் கட்டுப்பாடுகளை உருவாக்குதல்
-- சிஎஸ்எஸ் மற்றும் வகுப்புகளைப் பயன்படுத்தி பாணிகளை அமைத்தல்
-- ஜாவாஸ்கிரிப்ட் அடிப்படைகள்
-    - ஒரு வரிசையை உருவாக்குதல்
-    - ஒரு சீரற்ற எண்ணை உருவாக்குதல்
-    - நடப்பு நேரத்தைப் பெறுதல்
-
-## பாடம்
-
-[நிகழ்வு உந்துதல் நிரலாக்கத்தைப் பயன்படுத்தி தட்டச்சு விளையாட்டை உருவாக்குதல்](../README.md)
-
-## கடன்கள்
-
-[கிறிஸ்டோபர் ஹாரிசன்](http://www.twitter.com/geektrainer) அன்புடன் ♥️ எழுதினார்
\ No newline at end of file
diff --git a/4-typing-game/translations/README.uk.md b/4-typing-game/translations/README.uk.md
deleted file mode 100644
index 5aaa15c4..00000000
--- a/4-typing-game/translations/README.uk.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Програмування на основі подій – створимо гру для введення тексту
-
-## Вступ
-
-Введення тексту — одна з найбільш недооцінених навичок розробника. Здатність швидко передавати думки з голови до редактора дозволяє вільно протікати творчості. Один з найкращих способів навчитися - грати в гру!
-
-> Отже, давайте створимо гру для набору тексту!
-
-Ви збираєтеся використовувати навички JavaScript, HTML і CSS, які ви вже напрацювали, щоб створити гру набору тексту. Гра представить гравцеві випадкову цитату (ми використовуємо цитати [Шерлока Холмса](https://en.wikipedia.org/wiki/Sherlock_Holmes) ) і час, скільки часу потрібно гравцеві, щоб точно ввести його. Ви збираєтеся використовувати навички JavaScript, HTML і CSS, які ви вже напрацювали, щоб створити гру набору тексту.
-
-![демо](../images/demo.gif)
-
-## Передумови
-
-Цей урок передбачає, що ви знайомі з такими поняттями:
-
-- Створення елементів керування введенням тексту та кнопок
-- CSS і налаштування стилів за допомогою класів
-- Основи JavaScript
-  - Створення масиву
-  - Створення випадкового числа
-  - Отримання поточного часу 
-
-## Урок
-
-[Створення гри введення тексту за допомогою програмування на основі подій](../typing-game/README.md)
-
-## Посилання
-
-Створенно з ♥️ [Крістофером Гаррісоном](http://www.twitter.com/geektrainer)
diff --git a/4-typing-game/translations/README.zh-cn.md b/4-typing-game/translations/README.zh-cn.md
deleted file mode 100644
index 0a1704db..00000000
--- a/4-typing-game/translations/README.zh-cn.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# 事件驱动式编程 ── 建立一款打字游戏
-
-## 介绍
-
-打字是开发者最被低估的技能之一。将思想从你的头脑中迅速转移到你的编辑器中的能力使创造力得以自由流动。学习的最好方法之一是玩游戏！
-
-> 因此，让我们来开发一款打字游戏吧！
-
-你将会用到 JavaScript、HTML 和 CSS 来构建打字游戏。游戏将向玩家展示一个随机的引言 (我们用[夏洛克 · 福尔摩斯](https://zh.wikipedia.org/wiki/%E6%AD%87%E6%B4%9B%E5%85%8B%C2%B7%E7%A6%8F%E5%B0%94%E6%91%A9%E6%96%AF)的引言)，并计时玩家需要多长时间才能准确地打出它。
-![demo](../images/demo.gif)
-
-## 前提条件
-
-请确保你已经熟悉以下概念：
-
-- 创建文本输入和按钮控件
-- CSS 和使用类设置样式
-- JavaScript 基础知识
-  - 创建一个数组
-  - 创建一个随机数
-  - 获取当前时间
-
-## 课程
-
-[通过使用事件驱动编程创建一个打字游戏](../typing-game/translations/README.zh-tw.md)
-
-## 贡献者
-
-由 [Christopher Harrison](http://www.twitter.com/geektrainer) 用满满 ♥️ 来编写。
diff --git a/4-typing-game/translations/README.zh-tw.md b/4-typing-game/translations/README.zh-tw.md
deleted file mode 100644
index d7b62c81..00000000
--- a/4-typing-game/translations/README.zh-tw.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# 事件驅動程式設計 ── 建立一款打字遊戲
-
-## 大綱
-
-打字可說是開發者被嚴重低估的技能之一，將腦中的想法快速地轉換到編輯器中，讓你流暢地發揮你的想像力。其中一個訓練方法就是遊玩遊戲！
-
-> 因此，讓我們來開發一款打字遊戲吧！
-
-你會使用到你學到的 JavaScript、HTML 與 CSS 技法來建立打字遊戲。這款遊戲提供隨機的引文作為玩家的目標(使用[夏洛克·福爾摩斯](https://zh.wikipedia.org/wiki/%E6%AD%87%E6%B4%9B%E5%85%8B%C2%B7%E7%A6%8F%E5%B0%94%E6%91%A9%E6%96%AF)的引文)，計算玩家準確輸入所需要花費的時間。
-
-![demo](../images/demo.gif)
-
-## 開始之前
-
-這堂課會假設你已經熟悉下列的概念：
-
-- 建立文字輸入及按鈕控制
-- CSS 與 class 的造型設定
-- JavaScript 基礎觀念
-  - 建立矩陣
-  - 建立隨機數
-  - 取得目前時間
-
-## 課程
-
-[使用事件驅動程式設計，建立一款打字遊戲](../typing-game/translations/README.zh-tw.md)
-
-## 參與人員
-
-由 [Christopher Harrison](http://www.twitter.com/geektrainer) 用滿滿的 ♥️ 來編寫。
diff --git a/4-typing-game/translations/READMR.pt-BR.md b/4-typing-game/translations/READMR.pt-BR.md
deleted file mode 100644
index aab04300..00000000
--- a/4-typing-game/translations/READMR.pt-BR.md
+++ /dev/null
@@ -1,30 +0,0 @@
-# Programação Orientada a Eventos - Construa um Jogo de Digitação 
-
-## Introdução
-
-A digitação é uma das habilidades mais subestimadas do desenvolvedor. A capacidade de transferir rapidamente os pensamentos da sua cabeça para o seu editor permite que a criatividade flua livremente. Uma das melhores maneiras de aprender é jogar um jogo!
-
->Então, vamos construir um jogo de digitação!
-
-Você usará as habilidades de JavaScript, HTML e CSS que desenvolveu até agora para criar um jogo de digitação. O jogo apresentará ao jogador uma citação aleatória (estamos usando [Sherlock Holmes](https://en.wikipedia.org/wiki/Sherlock_Holmes) citações) e quanto tempo o jogador leva para digitá-lo com precisão. Você usará as habilidades de JavaScript, HTML e CSS que desenvolveu até agora para criar um jogo de digitação.
-
-![demo](../images/demo.gif)
-
-## Pré-requisitos
-
-Esta lição pressupõe que você esteja familiarizado com os seguintes conceitos:
-
-- Criação de textos de entrada e controles de botão
-- CSS e configuração de estilos usando classes
-- Noções básicas de JavaScript
-  - Criação de array
-  - Criação de número aleatório
-  - Obtenção da hora atual
-  
-## Lição
-
-[Criando um jogo de digitação usando programação orientada a eventos](../typing-game/README.md)
-
-## Créditos
-
-Escrito com ♥️ por [Christopher Harrison](http://www.twitter.com/geektrainer)
\ No newline at end of file
diff --git a/5-browser-extension/translations/README.es.md b/5-browser-extension/translations/README.es.md
deleted file mode 100644
index 38600e89..00000000
--- a/5-browser-extension/translations/README.es.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Construyendo una extensión de navegador
-
-Crear extensiones de navegador es una forma divertida e interesante de pensar en el rendimiento de sus aplicaciones mientras crea un tipo diferente de activo web. Este módulo incluye lecciones sobre cómo funcionan los navegadores y cómo implementar una extensión de navegador, cómo crear un formulario, llamar a una API y usar el almacenamiento local, y cómo medir el rendimiento de su sitio web y mejorarlo.
-
-Construirá una extensión de navegador que funcione en Edge, Chrome y Firefox. Esta extensión, que es como un mini sitio web que está diseñado para una tarea muy específica, verifica la [API de señal C02](https://www.co2signal.com) para el uso de electricidad y la intensidad de carbono de una región determinada, y devuelve un lectura sobre la huella de carbono de la región.
-
-Esta extensión puede ser llamada ad hoc por un usuario una vez que se ingresa una clave API y un código de región en un formulario para determinar el uso de electricidad local y, por lo tanto, ofrecer datos que pueden influir en las decisiones de electricidad de un usuario. Por ejemplo, puede ser preferible retrasar el funcionamiento de una secadora de ropa (una actividad intensa en carbono) durante un período de alto consumo de electricidad en su región.
-
-### Temas
-
-1. [Sobre el navegador](about-browsers/README.md)
-2. [Formularios y almacenamiento local](forms-browsers-local-storage/README.md)
-3. [Desempeño y tareas en segundo plano](background-tasks-and-performance/README.md)
-
-### Créditos
-
-![a green browser extension](../extension-screenshot.png)
-
-## Créditos
-
-La idea de este disparador de carbono web fue ofrecida por Asim Hussain, líder en Microsoft del equipo de defensa de la nube verde y autor de los [Principios verdes](https://principles.green/). Originalmente era un [proyecto de sitio web](https://github.com/jlooper/green).
-
-La estructura de la extensión del navegador fue influenciada por la [extensión COVID de Adebola Adeniran](https://github.com/onedebos/covtension).
-
-El concepto detrás del sistema de iconos 'puntos' fue sugerido por la estructura de iconos de la extensión del navegador [Energy Lollipop](https://energylollipop.com/) para las emisiones de California.
-
-Estas lecciones fueron escritas con ♥ ️ por [Jen Looper](https://www.twitter.com/jenlooper)
-
diff --git a/5-browser-extension/translations/README.fr.md b/5-browser-extension/translations/README.fr.md
deleted file mode 100644
index 57e02ae1..00000000
--- a/5-browser-extension/translations/README.fr.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Création d'une extension de navigateur
-
-La création d'extensions de navigateur est une façon amusante et intéressante de réfléchir aux performances de vos applications tout en créant un type différent d'élément Web. Ce module comprend des leçons sur le fonctionnement des navigateurs et le déploiement d'une extension de navigateur, la création d'un formulaire, l'appel d'une API et l'utilisation du stockage local, ainsi que la manière d'évaluer les performances de votre site Web et de les améliorer.
-
-Vous allez créer une extension de navigateur qui fonctionne sur Edge, Chrome et Firefox. Cette extension, qui ressemble à un mini site Web adapté à une tâche très spécifique, vérifie [l'API C02 Signal](https://www.co2signal.com) pour la consommation d'électricité et l'intensité carbone d'une région donnée, et renvoie une lecture sur l'empreinte carbone de la région.
-
-Cette extension peut être appelée ad hoc par un utilisateur une fois qu'une clé API et qu'un code de région sont entrés dans un formulaire pour déterminer la consommation d'électricité locale et ainsi offrir des données qui peuvent influencer les décisions d'un utilisateur en matière d'électricité. Par exemple, il peut être préférable de retarder le fonctionnement d'une sécheuse (une activité à forte intensité de carbone) pendant une période de forte consommation d'électricité dans votre région.
-
-### Sujets
-
-1. [À propos du navigateur](../1-about-browsers/translations/README.fr.md)
-2. [Formulaires et stockage local](../2-forms-browsers-local-storage/translations/README.fr.md)
-3. [Tâches en arrière-plan et performances](../3-background-tasks-and-performance/translations/README.fr.md)
-
-### Crédits
-
-![une extension de navigateur verte](../extension-screenshot.png)
-
-## Crédits
-
-L'idée de ce déclencheur de carbone Web a été proposée par Asim Hussain, responsable chez Microsoft de l'équipe Green Cloud Advocacy et auteur des  [Green Principles](https://principles.green/). C'était à l'origine un [projet de site web](https://github.com/jlooper/green).
-
-La structure de l'extension de navigateur a été influencée par [l'extension COVID d'Adebola Adeniran](https://github.com/onedebos/covtension).
-
-Le concept derrière le système d'icônes 'dot' a été suggéré par la structure d'icônes de l'extension de navigateur [Energy Lollipop](https://energylollipop.com/) pour les émissions Californiennes.
-
-Ces leçons ont été rédigées avec ♥️ par [Jen Looper](https://www.twitter.com/jenlooper)
-
diff --git a/5-browser-extension/translations/README.hi.md b/5-browser-extension/translations/README.hi.md
deleted file mode 100644
index c113f777..00000000
--- a/5-browser-extension/translations/README.hi.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# ब्राउज़र एक्सटेंशन का निर्माण
-
-एक अलग प्रकार की वेब एसेट्स का निर्माण करते समय अपने ब्राउज़र के प्रदर्शन के बारे में सोचने के लिए ब्राउज़र एक्सटेंशन का निर्माण एक मजेदार और दिलचस्प तरीका है.इस मॉड्यूल में शामिल पाठ हैं कि ब्राउज़र कैसे काम करते हैं और ब्राउज़र एक्सटेंशन कैसे तैनात करते हैं, फॉर्म कैसे बनाते हैं, एपीआई कॉल करते हैं, और लोकलस्टोरेज का उपयोग करते हैं, और अपनी वेबसाइट के प्रदर्शन को कैसे गेज करें और इसमें सुधार करें।.
-
-आप एज, क्रोम और फ़ायरफ़ॉक्स पर काम करने वाले ब्राउज़र एक्सटेंशन का निर्माण करेंगे. यह एक्सटेंशन, जो एक मिनी वेब साइट की तरह है जो एक बहुत ही विशिष्ट कार्य के अनुरूप है, किसी दिए गए क्षेत्र की बिजली के उपयोग और कार्बन की तीव्रता के लिए [C02 सिग्नल एपीआई](https://www.co2signal.com) की जांच करता है, और इस क्षेत्र के कार्बन पदचिह्न पर एक रीडिंग देता है.
-
-एपीआई कुंजी और क्षेत्र कोड स्थानीय बिजली के उपयोग को निर्धारित करने के लिए एक रूप में इनपुट होने के बाद इस विस्तार को उपयोगकर्ता द्वारा तदर्थ कहा जा सकता है और इस तरह डेटा की पेशकश करते हैं जो उपयोगकर्ता के बिजली निर्णयों को प्रभावित कर सकते हैं.उदाहरण के लिए, अपने क्षेत्र में उच्च बिजली के उपयोग की अवधि के दौरान कपड़े के ड्रायर (कार्बन-गहन गतिविधि) को चलाने में देरी करना बेहतर हो सकता है।
-
-### विषय
-
-1. [ब्राउज़र के बारे में](../1-about-browsers/README.hi.md)
-2. [फॉर्म्स और लोकल स्टोरेज](../2-forms-browsers-local-storage/README.hi.md)
-3. [पृष्ठभूमि के कार्य और प्रदर्शन](../3-background-tasks-and-performance/README.hi.md)
-
-### क्रेडिट
-
-![एक हरा ब्राउज़र एक्सटेंशन](../extension-screenshot.png)
-
-## क्रेडिट
-
-इस वेब कार्बन ट्रिगर के लिए विचार असीम हुसैन द्वारा पेश किया गया था, माइक्रोसॉफ्ट के ग्रीन क्लाउड एडवोकेसी टीम में नेतृत्व और [ग्रीन प्रिंसिपल्स](https://principles.green/) के लेखक. यह मूल रूप से एक [वेब साइट परियोजना](https://github.com/jlooper/green) था.
-
-ब्राउज़र एक्सटेंशन की संरचना [Adebola Adeniran's COVID एक्सटेंशन](https://github.com/onedebos/covtension) से प्रभावित था.
-
-'डॉट' आइकन सिस्टम के पीछे की अवधारणा को कैलिफ़ोर्निया उत्सर्जन के लिए [एनर्जी लॉलीपॉप] (https://energylollipop.com/) ब्राउज़र एक्सटेंशन की आइकन संरचना द्वारा सुझाया गया था।
-
-ये पाठ [Jen Looper](https://www.twitter.com/jenlooper) द्वारा ♥️ के साथ लिखा गया है
diff --git a/5-browser-extension/translations/README.it.md b/5-browser-extension/translations/README.it.md
deleted file mode 100644
index 92ef328c..00000000
--- a/5-browser-extension/translations/README.it.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Costruire una estensione del browser
-
-La creazione di estensioni del browser è un modo divertente e interessante per pensare alle prestazioni della propia app mentre si crea un diverso tipo di risorsa web. Questo form include lezioni su come funzionano i browser e su come distribuire un'estensione del browser, come creare un form, chiamare un'API e utilizzare l'archiviazione locale (local storage) e come valutare le prestazioni del proprio sito web e migliorarlo.
-
-Verrà creata un'estensione del browser che funziona su Edge, Chrome e Firefox. Questa estensione, che è come un mini sito web su misura per un'attività molto specifica, controlla l' [API delle segnalazioni di C02](https://www.co2signal.com) per l'utilizzo di elettricità e l'intensità di carbonio di una determinata regione e restituisce una lettura sull'impronta di carbonio della regione.
-
-Questa estensione può essere chiamata ad hoc da un utente una volta che una chiave API e un codice regionale vengono inseriti in un form per determinare l'utilizzo locale dell'elettricità e quindi offrire dati che possono influenzare le decisioni sull'elettricità di un utente. Ad esempio, potrebbe essere preferibile ritardare il funzionamento di un'asciugatrice (un'attività ad alta intensità di carbonio) durante un periodo di elevato consumo di elettricità nella propria regione.
-
-### Argomenti
-
-1. [Informazioni sul browser](../1-about-browsers/translations/README.it.md)
-2. [Form e archiviazione locale](../2-forms-browsers-local-storage/translations/README.it.md)
-3. [Attività in background e prestazioni](../3-background-tasks-and-performance/translations/README.it.md)
-
-![un'estensione del browser verde](../extension-screenshot.png)
-
-## Crediti
-
-L'idea per questa app è stata offerta da Asim Hussain, responsabile di Microsoft del team Green Cloud Advocacy e autore dei [Principi verdi](https://principles.green/). In origine era un [progetto di sito web](https://github.com/jlooper/green).
-
-La struttura dell'estensione del browser è stata influenzata dall ['estensione COVID di Adebola Adeniran](https://github.com/onedebos/covtension).
-
-Il concetto alla base del sistema di icone "punto" è stato suggerito dalla struttura dell'icona dell'estensione del browser [Energy Lollipop](https://energylollipop.com/) per le emissioni della California.
-
-Queste lezioni sono state scritte con il ♥ ️ da [Jen Looper](https://www.twitter.com/jenlooper)
diff --git a/5-browser-extension/translations/README.ja.md b/5-browser-extension/translations/README.ja.md
deleted file mode 100644
index ab869b57..00000000
--- a/5-browser-extension/translations/README.ja.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# ブラウザ拡張機能の構築
-
-ブラウザ拡張機能を構築することは、異なるタイプの Web 資産を構築しながら、アプリのパフォーマンスについて考えることができる、楽しくて興味深い方法です。このモジュールでは、ブラウザの仕組みやブラウザ拡張機能の展開方法、フォームの構築方法、API の呼び出し方、ローカルストレージの使用方法、Web サイトのパフォーマンスを測定して改善する方法などのレッスンが含まれています。
-
-Edge、Chrome、Firefox で動作するブラウザ拡張機能を構築します。この拡張機能は、非常に特定のタスクに合わせたミニ Web サイトのようなもので、[C02 Signal API](https://www.co2signal.com) を使って、指定された地域の電力使用量と炭素強度をチェックし、その地域のカーボンフットプリントの読み取り値を返します。
-
-この拡張機能は、API キーと地域コードがフォームに入力されると、ユーザーがアドホックに呼び出すことができ、地域の電力使用量を決定し、それによってユーザーの電力決定に影響を与えるデータを提供することができます。例えば、地域の電力使用量が多い時期には、衣類乾燥機の運転を遅らせることが望ましいかもしれません。
-
-### トピック
-
-1. [ブラウザのすべて](../1-about-browsers/translations/README.ja.md)
-2. [API の呼び出し、ローカルストレージの使用](../2-forms-browsers-local-storage/translations/README.ja.md)
-3. [バックグラウンドタスクとパフォーマンスについて学ぶ](../3-background-tasks-and-performance/translations/README.ja.md)
-
-### クレジット
-
-![a green browser extension](../extension-screenshot.png)
-
-## クレジット
-
-この Web カーボントリガーのアイデアは、Microsoft のグリーンクラウドアドボカシーチームのリーダーであり、[グリーンプリンシプル](https://principles.green/) の著者でもある Asim Hussain 氏によって提供されました。もともとは [Web サイトプロジェクト](https://github.com/jlooper/green) でした。
-
-ブラウザ拡張の構造は [Adebola Adeniran の COVID 拡張機能](https://github.com/onedebos/covtension) の影響を受けています。
-
-「ドット」アイコンシステムのコンセプトは、カリフォルニア州の排出量のためのブラウザ拡張機能 [Energy Lollipop](https://energylollipop.com/) のアイコン構造によって提案されました。
-
-These lessons were written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
-
diff --git a/5-browser-extension/translations/README.ko.md b/5-browser-extension/translations/README.ko.md
deleted file mode 100644
index 802a26ee..00000000
--- a/5-browser-extension/translations/README.ko.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# 브라우저 확장 만들기
-
-브라우저 확장을 만드는 것은 다른 타입의 웹 어셋을 빌드하면서 앱의 성능에 대해 생각할 수 있는 재미있고 흥미로운 방법입니다. 이 모듈에는 브라우저의 작동 방식과 브라우저 확장을 배포하는 방법, 폼을 만들고 API를 호출하며 로컬 저장소를 사용하는 방법과 웹 사이트의 성능을 측정하고 개선하는 방법에 대한 강의가 포함되어 있습니다.
-
-Edge, Chrome과 Firefox에서 작동하는 브라우저 확장을 만듭니다. 매우 특정한 작업에 맞춰진 작은 웹 사이트와 같은 확장은 특정 지역의 전기 사용량과 탄소 강도에 대한 [C02 Signal API](https://www.co2signal.com)를 확인하고, 해당 지역의 탄소 발자국에 대한 판독 값을 반환합니다.
-
-이 확장 기능은 API 키와 지역 코드를 양식에 입력하여 지역 전기 사용량을 결정하고 사용자의 전기 결정에 영향을 줄 수 있는 데이터를 제공하면 사용자가 임시로 호출할 수 있습니다. 예로 들면, 해당 지역에서 전기 사용량이 많은 기간에는 의류 건조기(a carbon-intense activity) 작동을 연기하는 것이 좋습니다.
-
-### 주제
-
-1. [브라우저에 대하여](../1-about-browsers/translations/README.ko.md)
-2. [폼과 로컬 저장소](../2-forms-browsers-local-storage/translations/README.ko.md)
-3. [백그라운드 작업과 성능](../3-background-tasks-and-performance/translations/README.ko.md)
-
-### 크레딧
-
-![a green browser extension](../extension-screenshot.png)
-
-## 크레딧
-
-The idea for this web carbon trigger was offered by Asim Hussain, lead at Microsoft of the Green Cloud Advocacy team and author of the [Green Principles](https://principles.green/). It was originally a [web site project](https://github.com/jlooper/green).
-
-The structure of the browser extension was influenced by [Adebola Adeniran's COVID extension](https://github.com/onedebos/covtension).
-
-The concept behind the 'dot' icon system was suggested by the icon structure of the [Energy Lollipop](https://energylollipop.com/) browser extension for California emissions.
-
-These lessons were written with ♥️ by [Jen Looper](https://www.twitter.com/jenlooper)
-
diff --git a/5-browser-extension/translations/README.ms.md b/5-browser-extension/translations/README.ms.md
deleted file mode 100644
index 1181c897..00000000
--- a/5-browser-extension/translations/README.ms.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# Membina pelanjutan penyemak imbas
-
-Membina pelanjutan penyemak imbas adalah cara yang menyeronokkan dan menarik untuk memikirkan prestasi aplikasi anda sambil membina pelbagai jenis aset web. Modul ini merangkumi pelajaran tentang cara penyemak imbas berfungsi dan cara menyebarkan pelanjutan penyemak imbas, cara membuat borang, memanggil API, dan menggunakan storan tempatan, dan bagaimana mengukur prestasi laman web anda dan memperbaikinya.
-
-Anda akan membina pelanjutan penyemak imbas yang berfungsi di Edge, Chrome, dan Firefox. Sambungan ini, seperti laman web mini yang disesuaikan dengan tugas yang sangat spesifik, memeriksa [C02 Signal API](https://www.co2signal.com) untuk mengetahui penggunaan elektrik dan intensiti karbon wilayah tertentu, dan mengembalikan membaca mengenai jejak karbon di rantau ini.
-
-Sambungan ini dapat disebut ad hoc oleh pengguna setelah kunci API dan kod wilayah dimasukkan ke dalam bentuk untuk menentukan penggunaan elektrik tempatan dan dengan itu menawarkan data yang dapat mempengaruhi keputusan elektrik pengguna. Sebagai contoh, lebih baik menangguhkan penggunaan pengering pakaian (aktiviti sengit karbon) dalam tempoh penggunaan elektrik yang tinggi di wilayah anda.
-
-### Topik
-
-1. [Mengenai penyemak imbas](1-about-browsers/README.md)
-2. [Borang dan simpanan tempatan](2-forms-browsers-local-storage/README.md)
-3. [Latar belakang tugas dan prestasi](3-background-tasks-and-performance/README.md)
-
-### Kredit
-
-![pelanjutan penyemak imbas hijau](extension-screenshot.png)
-
-## Kredit
-
-Idea untuk pencetus karbon web ini ditawarkan oleh Asim Hussain, ketua pasukan Microsoft dari Green Cloud Advocacy dan pengarang [Prinsip Hijau](https://principles.green/). Pada mulanya ia adalah [projek laman web](https://github.com/jlooper/green).
-
-Struktur pelanjutan penyemak imbas dipengaruhi oleh [peluasan COVID Adebola Adeniran](https://github.com/onedebos/covtension).
-
-Konsep di sebalik sistem ikon 'dot' dicadangkan oleh struktur ikon pelanjutan penyemak imbas [Energy Lollipop](https://energylollipop.com/) untuk pelepasan California.
-
-Pelajaran ini ditulis dengan ♥ ️ oleh [Jen Looper](https://www.twitter.com/jenlooper)
\ No newline at end of file
diff --git a/5-browser-extension/translations/README.nl.md b/5-browser-extension/translations/README.nl.md
deleted file mode 100644
index 40ad0080..00000000
--- a/5-browser-extension/translations/README.nl.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# Een browserextensie bouwen
-
-Het bouwen van browserextensies is een leuke en interessante manier om na te denken over de prestaties van uw apps terwijl u een ander type webitem bouwt. Deze module bevat lessen over hoe browsers werken en hoe u een browserextensie implementeert, hoe u een formulier bouwt, een API aanroept en lokale opslag gebruikt, en hoe u de prestaties van uw website peilt en deze verbetert.
-
-U bouwt een browserextensie die werkt op Edge, Chrome en Firefox. Deze extensie, die lijkt op een mini-website die is afgestemd op een zeer specifieke taak, controleert de [C02 Signal API](https://www.co2signal.com) voor het elektriciteitsverbruik en de koolstofintensiteit van een bepaalde regio en geeft een lezing over de ecologische voetafdruk van de regio.
-
-Deze extensie kan door een gebruiker ad-hoc worden genoemd zodra een API-sleutel en regiocode in een formulier zijn ingevoerd om het lokale elektriciteitsverbruik te bepalen en daardoor gegevens te bieden die de elektriciteitsbeslissingen van een gebruiker kunnen beïnvloeden. Het kan bijvoorbeeld de voorkeur hebben om het gebruik van een wasdroger (een koolstofintensieve activiteit) uit te stellen tijdens een periode van hoog elektriciteitsverbruik in uw regio.
-
-### Onderwerpen
-
-1. [Over de browser](../1-about-browsers/translations/README.nl.md)
-2. [Formulieren en lokale opslag](../2-forms-browsers-local-storage/translations/README.nl.md)
-3. [Achtergrondtaken en prestaties](../3-background-tasks-and-performance/translations/README.nl.md)
-
-### Credits
-
-![een groene browserextensie](../extension-screenshot.png)
-
-## Credits
-
-Het idee voor deze web-koolstoftrigger werd aangedragen door Asim Hussain, hoofd bij Microsoft van het Green Cloud Advocacy-team en auteur van de [Green Principles](https://principles.green/). Het was oorspronkelijk een [websiteproject](https://github.com/jlooper/green).
-
-De structuur van de browserextensie werd beïnvloed door [de COVID-extensie van Adebola Adeniran](https://github.com/onedebos/covtension).
-
-Het concept achter het 'punt'-pictogramsysteem werd gesuggereerd door de pictogramstructuur van de [Energy Lollipop](https://energylollipop.com/) browserextensie voor Californische emissies.
-
-Deze lessen zijn geschreven met ♥ door [Jen Looper](https://www.twitter.com/jenlooper)
-
diff --git a/5-browser-extension/translations/README.ta.md b/5-browser-extension/translations/README.ta.md
deleted file mode 100644
index 2c8c17d5..00000000
--- a/5-browser-extension/translations/README.ta.md
+++ /dev/null
@@ -1,29 +0,0 @@
-# உலாவி நீட்டிப்பை உருவாக்குதல்
-
-உலாவி நீட்டிப்புகளை உருவாக்குவது ஒரு வேடிக்கையான மற்றும் சுவாரஸ்யமான வழியாகும், அதே நேரத்தில் உங்கள் பயன்பாடுகளின் செயல்திறனைப் பற்றி சிந்திக்க வும், அதே நேரத்தில் வேறு வகையான வலை சொத்தை உருவாக்கவும்.உலாவிகள் எவ்வாறு வேலை செய்கின்றன மற்றும் உலாவி நீட்டிப்பை எவ்வாறு பயன்படுத்துவது, ஒரு படிவத்தை எவ்வாறு உருவாக்குவது, ஒரு ஏபிஐ ஐ அழைப்பது மற்றும் உள்ளூர் சேமிப்பகத்தை எவ்வாறு பயன்படுத்துவது மற்றும் உங்கள் வலைத்தளத்தின் செயல்திறனை எவ்வாறு அளவிடுவது மற்றும் அதை எவ்வாறு மேம்படுத்துவது என்பது பற்றிய பாடங்கள் இந்த தொகுதியில் அடங்கும்.
-
-எட்ஜ், குரோம் மற்றும் பயர்பாக்ஸில் செயல்படும் உலாவி நீட்டிப்பை உருவாக்குவீர்கள். இந்த நீட்டிப்பு, ஒரு குறிப்பிட்ட பணிக்கு ஏற்ப வடிவமைக்கப்பட்ட ஒரு மினி வலைத் தளத்தைப் போன்றது, ஒரு குறிப்பிட்ட பிராந்தியத்தின் மின்சார பயன்பாடு மற்றும் கார்பன் தீவிரத்திற்காக [சி02 சிக்னல் ஏபிஐ](https://www.co2signal.com) சரிபார்க்கிறது, மேலும் பிராந்தியத்தின் கார்பன் தடத்தில் ஒரு வாசிப்பை அளிக்கிறது.
-
-இந்த நீட்டிப்பு ஒரு பயனர் மூலம் தற்காலிக என்று அழைக்கலாம் ஒரு ஏபிஐ விசை மற்றும் பிராந்திய குறியீடு உள்ளூர் மின்சார பயன்பாட்டை தீர்மானிக்க ஒரு வடிவத்தில் உள்ளீடு மற்றும் அதன் மூலம் ஒரு பயனரின் மின்சார முடிவுகளை பாதிக்கக்கூடிய தரவை வழங்குகிறது. உதாரணமாக, உங்கள் பகுதியில் அதிக மின்சார பயன்பாடு காலத்தில் ஒரு துணி உலர்த்தி (ஒரு கார்பன் தீவிர செயல்பாடு) இயங்கும் தாமதப்படுத்த விரும்பத்தக்கதாக இருக்கலாம்.
-
-### தலைப்புகளை
-
-1. [உலாவி பற்றி](../1-about-browsers/README.md)
-2. [படிவங்கள் மற்றும் உள்ளூர் சேமிப்பு](../2-forms-browsers-local-storage/README.md)
-3. [பின்னணி பணிகள் மற்றும் செயல்திறன்](../3-background-tasks-and-performance/README.md)
-
-### கடன்கள்
-
-![ஒரு பச்சை உலாவி நீட்டிப்பு](../extension-screenshot.png)
-
-## கடன்கள்
-
-இந்த வலை கார்பன் தூண்டுதலுக்கான யோசனை ஆசிம் ஹுசைன், கிரீன் கிளவுட் அட்வோசி குழுவின் மைக்ரோசாப்ட் முன்னணி மற்றும் [பசுமை கொள்கைகள்](https://principles.green/) ஆசிரியர் ஆகியோரால் வழங்கப்பட்டது. இது முதலில் ஒரு [வலை திட்டம்](https://github.com/jlooper/green).
-
-உலாவி விரிவாக்கத்தின் கட்டமைப்பு [அடெபோலஅடெரானின் கோவிட் நீட்டிப்பு](https://github.com/onedebos/covtension) மூலம் தாக்கம் செலுத்தியது.
-
-கலிபோர்னியா உமிழ்வுகளுக்கான [எனர்ஜி லாலிபாப்](https://energylollipop.com/) உலாவி நீட்டிப்பின் ஐகான் கட்டமைப்பால் 'டாட்' ஐகான் அமைப்புக்குபின்னால் உள்ள கருத்து பரிந்துரைக்கப்பட்டது.
-
-
-இந்த பாடங்கள் [ஜென் லூப்பர்](https://www.twitter.com/jenlooper) அன்புடன் எழுதப்பட்டன
- 
diff --git a/5-browser-extension/translations/README.zh-cn.md b/5-browser-extension/translations/README.zh-cn.md
deleted file mode 100644
index b2db6bc4..00000000
--- a/5-browser-extension/translations/README.zh-cn.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# 构建浏览器插件
-
-构建浏览器插件是一种有趣的方式，可以在构建不同类型的网络资产的同时思考你的应用程序的性能。本模块包括关于浏览器如何工作和如何部署浏览器扩展的课程，如何建立一个表单、调用 API 和使用 local storage (本地存储)，以及如何衡量网站的性能并加以改进。
-
-你将建立一个能在 Edge、Chrome 和 Firefox 上运行的浏览器插件。这个插件就像一个为非常具体的任务量身定做的迷你网站：利用 [C02 Signal API](https://www.co2signal.com) 检查地区的电力使用情况和碳排放浓度，回传地区的碳足迹。
-
-一旦 API 密钥和地区代码被输入到一个表格中，用户就可以临时调用这个扩展，以确定当地的用电情况，从而提供可以影响用户的用电决定的数据。例如，在你所在地区的高用电量期间，推迟运行干衣机（一种碳密集型活动）可能是更好的选择。
-
-### 主题
-
-1. [关于浏览器](../1-about-browsers/translations/README.zh-tw.md)
-2. [表单和 Local Storage](../2-forms-browsers-local-storage/translations/README.zh-tw.md)
-3. [背景工作与效能](../3-background-tasks-and-performance/translations/README.zh-tw.md)
-
-### 成就
-
-![一个绿色浏览器插件](../extension-screenshot.png)
-
-## 贡献者
-
-网页碳排放追踪的想法由微软绿色云计算倡导团队的负责人和 [Green Principles](https://principles.green/) 的作者 Asim Hussain 提出。这源自于一个[网页项目](https://github.com/jlooper/green)。
-
-浏览器插件的结构受到 [Adebola Adeniran 的 COVID 插件](https://github.com/onedebos/covtension)的启发
-
-「点」 图标系统背后的概念是由加州排放的 [Energy Lollipop](https://energylollipop.com/) 浏览器插件的图标结构提出的。
-
-这些课程由 [Jen Looper](https://www.twitter.com/jenlooper) 用满满的 ♥️ 编写。
diff --git a/5-browser-extension/translations/README.zh-tw.md b/5-browser-extension/translations/README.zh-tw.md
deleted file mode 100644
index 8a0ec8d1..00000000
--- a/5-browser-extension/translations/README.zh-tw.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# 建立瀏覽器擴充功能
-
-建立瀏覽器擴充功能是個好玩且有趣的方式來思考應用程式的執行效能，包含各式各樣類型的網頁資產。這堂學習模組介紹了瀏覽器運作方式、如何架設擴充功能、建立表單、呼叫 API、使用 Local Storage 和測量網頁效能的方法並增進它。
-
-你會建立一個支援在 Edge、Chrome 與 Firefox 的瀏覽器擴充功能。這個擴充功能就像小型的網頁，專門滿足特定課題：利用[C02 Signal API](https://www.co2signal.com)檢查地區的電力使用與碳排濃度，回傳地區的碳足跡。
-
-這款特設擴充功能允許使用者在輸入完 API Key 與國家地區代碼到表單後，取得當地電力使用量與其他資訊，決定使用者後續的行為。舉例來說，在地區高電力用量時，你可能會延後烘衣機的使用(增加碳排)。
-
-### 主題
-
-1. [關於瀏覽器](../1-about-browsers/translations/README.zh-tw.md)
-2. [表單與 Local Storage](../2-forms-browsers-local-storage/translations/README.zh-tw.md)
-3. [背景工作與效能](../3-background-tasks-and-performance/translations/README.zh-tw.md)
-
-### 成就
-
-![綠能瀏覽器擴充功能](../extension-screenshot.png)
-
-## 參與人員
-
-網頁碳排放追蹤的發想出自於 Asim Hussain，微軟綠能雲端倡導小組的領導人與[Green Principles](https://principles.green/)的作者。這源自於一個[網頁專案](https://github.com/jlooper/green)。
-
-擴充功能的結構受[Adebola Adeniran 的 COVID 擴充功能](https://github.com/onedebos/covtension)啟發。
-
-「點」圖示系統的概念參考[Energy Lollipop](https://energylollipop.com/)的加州排放擴充功能。
-
-這些課程由 [Jen Looper](https://www.twitter.com/jenlooper) 用滿滿的 ♥️ 來編寫。
-
diff --git a/6-space-game/1-introduction/translations/README.es.md b/6-space-game/1-introduction/translations/README.es.md
deleted file mode 100644
index ea5a3d67..00000000
--- a/6-space-game/1-introduction/translations/README.es.md
+++ /dev/null
@@ -1,216 +0,0 @@
-# Construye un juego espacial Parte I: Introducción
-
-![video](video-url)
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
-
-### Herencia y composición en el desarrollo de juegos
-
-En lecciones anteriores, no había mucha necesidad de preocuparse por la arquitectura de diseño de las aplicaciones que creó, ya que los proyectos tenían un alcance muy pequeño. Sin embargo, cuando sus aplicaciones crecen en tamaño y alcance, las decisiones de arquitectura se vuelven una preocupación mayor. Hay dos enfoques principales para crear aplicaciones más grandes en JavaScript: *composición* o *herencia*. Ambos tienen pros y contras, pero vamos a explicarlos desde el contexto de un juego.
-
-✅ Uno de los libros de programación más famosos jamás escrito tiene que ver con [patrones de diseño](https://en.wikipedia.org/wiki/Design_Patterns).
-
-En un juego tienes `game objects` que son objetos que existen en una pantalla. Esto significa que tienen una ubicación en un sistema de coordenadas cartesiano, caracterizado por tener una coordenada `x` e `y`. A medida que desarrolle un juego, notará que todos los objetos de su juego tienen una propiedad estándar, común para todos los juegos que crea, es decir, elementos que son:
-
-- **location-based** (basado en la ubicación): La mayoría, si no todos, los elementos del juego se basan en la ubicación. Esto significa que tienen una ubicación, una `x` y una` y`.
-- **movable** (movible): Estos son objetos que pueden moverse a una nueva ubicación. Suele ser un héroe, un monstruo o un NPC (un personaje no jugador), pero no, por ejemplo, un objeto estático como un árbol.
-- **self-destructing** (autodestructivo): Estos objetos solo existen durante un período de tiempo determinado antes de que se configuren para su eliminación. Por lo general, esto está representado por un booleano `dead` o `destroyed` que indica al motor del juego que este objeto ya no debe procesarse.
-- **cool-down** (enfriamiento): 'Cool-down' es una propiedad típica entre los objetos de corta duración. Un ejemplo típico es un fragmento de texto o efecto gráfico como una explosión que solo debería verse durante unos pocos milisegundos.
-
-✅ Piense en un juego como Pac-Man. ¿Puedes identificar los cuatro tipos de objetos enumerados anteriormente en este juego?
-
-### Expresando comportamiento
-
-Todo lo que describimos anteriormente son comportamientos que pueden tener los objetos del juego. Entonces, ¿cómo los codificamos? Podemos expresar este comportamiento como métodos asociados a clases u objetos.
-
-**Clases**
-
-La idea es usar `classes` junto con `inheritance` para lograr agregar un cierto comportamiento a una clase.
-
-✅ La herencia es un concepto importante de comprender. Obtenga más información en el [artículo de MDN sobre herencia](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
-
-Expresado a través de código, un objeto de juego normalmente puede verse así:
-
-```javascript
-
-//configurar la clase GameObject
-class GameObject {
-  constructor(x, y, type) {
-    this.x = x;
-    this.y = y;
-    this.type = type;
-  }
-}
-
-//esta clase extenderá las propiedades de clase inherentes del GameObject
-class Movable extends GameObject {
-  constructor(x,y, type) {
-    super(x,y, type)
-  }
-
-//este objeto móvil se puede mover en la pantalla
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-
-//esta es una clase específica que extiende la clase Movable, por lo que puede aprovechar todas las propiedades que hereda
-class Hero extends Movable {
-  constructor(x,y) {
-    super(x,y, 'Hero')
-  }
-}
-
-//esta clase, por otro lado, solo hereda las propiedades GameObject
-class Tree extends GameObject {
-  constructor(x,y) {
-    super(x,y, 'Tree')
-  }
-}
-
-// un héroe puede moverse...
-const hero = new Hero();
-hero.moveTo(5,5);
-
-//pero un árbol no puede
-const tree = new Tree();
-```
-
-✅ Tómate unos minutos para volver a imaginar un héroe de Pac-Man (Inky, Pinky o Blinky, por ejemplo) y cómo se escribiría en JavaScript.
-
-**Composición**
-
-Una forma diferente de manejar la herencia de objetos es usando *Composición*. Entonces, los objetos expresan su comportamiento así:
-
-
-```javascript
-//crear un gameObject constante
-const gameObject = {
-  x: 0,
-  y: 0,
-  type: ''
-};
-
-//...y un movible constante
-const movable = {
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-//entonces la constante movableObject está compuesta por gameObject y constantes movibles
-const movableObject = {...gameObject, ...movable};
-
-//luego crea una función para crear un nuevo Hero que hereda las propiedades de movableObject
-function createHero(x, y) {
-  return {
-    ...movableObject,
-    x,
-    y,
-    type: 'Hero'
-  }
-}
-//...y un objeto estático que hereda solo las propiedades de gameObject
-function createStatic(x, y, type) {
-  return {
-    ...gameObject
-    x,
-    y,
-    type
-  }
-}
-//crea el héroe y muévelo
-const hero = createHero(10,10);
-hero.moveTo(5,5);
-//y crea un árbol estático que solo se para alrededor
-const tree = createStatic(0,0, 'Tree'); 
-```
-
-**¿Qué patrón debo usar?**
-
-Depende de usted qué patrón elija. JavaScript es compatible con ambos paradigmas.
-
---
-
-Otro patrón común en el desarrollo de juegos aborda el problema de manejar la experiencia y el rendimiento del usuario del juego.
-
-## Patrón de pub/sub
-
-✅ Pub/Sub significa publish-subscribe (publicar-suscribirse).
-
-Este patrón aborda la idea de que las distintas partes de su aplicación no deben conocerse entre sí. ¿Porqué es eso? Hace que sea mucho más fácil ver lo que sucede en general si se separan varias partes. También facilita el cambio repentino de comportamiento si es necesario. ¿Cómo logramos esto? Hacemos esto estableciendo algunos conceptos:
-
-- **message** (mensaje: un mensaje suele ser una cadena de texto acompañada de una carga útil opcional (un dato que aclara de qué se trata el mensaje). Un mensaje típico en un juego puede ser `KEY_PRESSED_ENTER`.
-- **publisher** (editor): este elemento *publica* un mensaje y lo envía a todos los suscriptores.
-- **subscriber** (suscriptor): Este elemento *escucha* mensajes específicos y realiza alguna tarea como resultado de recibir este mensaje, como disparar un láser.
-
-La implementación es bastante pequeña pero es un patrón muy poderoso. Así es como se puede implementar:
-
-
-```javascript
-//configurar una clase EventEmitter que contenga oyentes
-class EventEmitter {
-  constructor() {
-    this.listeners = {};
-  }
-//cuando se recibe un mensaje, deje que el oyente maneje su carga útil
-  on(message, listener) {
-    if (!this.listeners[message]) {
-      this.listeners[message] = [];
-    }
-    this.listeners[message].push(listener);
-  }
-//cuando se envía un mensaje, envíelo a un oyente con alguna carga útil
-  emit(message, payload = null) {
-    if (this.listeners[message]) {
-      this.listeners[message].forEach(l => l(message, payload))
-    }
-  }
-}
-
-```
-
-Para usar el código anterior, podemos crear una implementación muy pequeña:
-
-```javascript
-//configurar una estructura de mensaje
-const Messages = {
-  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
-};
-//invocar el eventEmitter que configuró anteriormente
-const eventEmitter = new EventEmitter();
-//configurar un héroe
-const hero = createHero(0,0);
-//Informe al emisor de eventos que esté atento a los mensajes relacionados con el héroe que se mueve hacia la izquierda y actúe en consecuencia
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-
-//configurar la ventana para escuchar el evento keyup, específicamente si se golpea la flecha izquierda, emite un mensaje para mover al héroe a la izquierda
-window.addEventListener('keyup', (evt) => {
-  if (evt.key === 'ArrowLeft') {
-    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
-  }
-});
-```
-
-Arriba conectamos un evento de teclado, `ArrowLeft` y enviamos el mensaje `HERO_MOVE_LEFT`. Escuchamos ese mensaje y, como resultado, movemos al `hero`. El punto fuerte de este patrón es que el oyente del evento y el héroe no se conocen. Puede reasignar la ʻArrowLeft` a la tecla ʻA`. Además, sería posible hacer algo completamente diferente en `ArrowLeft` haciendo algunas ediciones en la función `on` del eventEmitter:
-
-```javascript
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-```
-
-A medida que las cosas se complican cuando tu juego crece, este patrón permanece igual en complejidad y tu código se mantiene limpio. Realmente se recomienda adoptar este patrón.
-
-🚀Desafío: Piense en cómo el patrón pub-sub puede mejorar un juego. ¿Qué partes deberían emitir eventos y cómo debería reaccionar el juego ante ellos? Ahora tienes la oportunidad de ser creativo, pensar en un nuevo juego y en cómo podrían comportarse sus partes.
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
-
-## Revisión y autoestudio
-
-Obtenga más información sobre Pub / Sub al [leer sobre él](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
-
-**Tarea**: [Mock up a game](assignment.es.md)
\ No newline at end of file
diff --git a/6-space-game/1-introduction/translations/README.fr.md b/6-space-game/1-introduction/translations/README.fr.md
deleted file mode 100644
index 7b880aac..00000000
--- a/6-space-game/1-introduction/translations/README.fr.md
+++ /dev/null
@@ -1,224 +0,0 @@
-# Développez un jeu spatial, partie 1: Introduction
-
-![video](../../images/pewpew.gif)
-
-## Quiz préalable
-
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=fr)
-
-### Héritage et composition dans le développement de jeux
-
-ans les leçons précédentes, il n'y avait pas vraiment besoin de s'inquiéter de l'architecture de conception des applications que vous avez créées, car les projets étaient de très petite portée. Cependant, lorsque vos applications augmentent en taille et en étendue, les décisions architecturales deviennent une préoccupation plus importante. Il existe deux approches principales pour créer des applications plus volumineuses en JavaScript: la *composition* ou l'*héritage*. Il y a des avantages et des inconvénients dans les deux cas, mais expliquons-les dans le contexte d'un jeu.
-
-✅ L'un des livres de programmation les plus célèbres jamais écrits concerne les [modèles de conception](https://en.wikipedia.org/wiki/Design_Patterns).
-
-Dans un jeu, vous avez des `game objects` qui sont des objets qui existent sur un écran. Cela signifie qu'ils ont un emplacement sur un système de coordonnées cartésien, caractérisé par une coordonnée `x` et `y`. Au fur et à mesure que vous développez un jeu, vous remarquerez que tous vos objets de jeu ont une propriété standard, commune à chaque jeu que vous créez, à savoir des éléments qui sont:
-
-- **location-based** La plupart des éléments de jeu, sinon tous, sont basés sur l'emplacement. Cela signifie qu'ils ont un emplacement, un `x` et un `y`.
-- **movable** Ce sont des objets qui peuvent se déplacer vers un nouvel emplacement. Il s'agit généralement d'un héros, d'un monstre ou d'un PNJ (un personnage non joueur), mais pas par exemple, d'un objet statique comme un arbre.
-- **self-destructing** Ces objets n'existent que pendant une période définie avant d'être configurés pour être supprimés. Habituellement, cela est représenté par un booléen `dead` ou `destroyed` qui signale au moteur de jeu que cet objet ne doit plus être rendu.
-- **cool-down** 'Cool-down' est une propriété typique parmi les objets à courte durée de vie. Un exemple typique est un morceau de texte ou un effet graphique comme une explosion qui ne devrait être vu que pendant quelques millisecondes.
-
-✅ Pensez à un jeu comme Pac-Man. Pouvez-vous identifier les quatre types d'objets énumérés ci-dessus dans ce jeu?
-
-### Exprimer le comportement
-
-Tout ce que nous avons décrit ci-dessus est le comportement que les objets du jeu peuvent avoir. Alors comment les encoder? Nous pouvons exprimer ce comportement sous forme de méthodes associées à des classes ou à des objets.
-
-**Classes**
-
-L'idée est d'utiliser des `classes` en conjonction avec l'`héritage` pour accomplir l'ajout d'un certain comportement à une classe.
-
-✅ L'héritage est un concept important à comprendre. En savoir plus sur l'[article de MDN sur l'héritage](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
-
-Exprimé via du code, un objet de jeu peut généralement ressembler à ceci:
-
-```javascript
-
-//configurer la classe GameObject
-class GameObject {
-  constructor(x, y, type) {
-    this.x = x;
-    this.y = y;
-    this.type = type;
-  }
-}
-
-//cette classe étendra les propriétés de classe inhérentes à GameObject
-class Movable extends GameObject {
-  constructor(x,y, type) {
-    super(x,y, type)
-  }
-
-//cet objet mobile peut être déplacé sur l'écran
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-
-//il s'agit d'une classe spécifique qui étend la classe Movable, afin qu'elle puisse profiter de toutes les propriétés dont elle hérite
-class Hero extends Movable {
-  constructor(x,y) {
-    super(x,y, 'Hero')
-  }
-}
-
-//cette classe, en revanche, n'hérite que des propriétés de GameObject
-class Tree extends GameObject {
-  constructor(x,y) {
-    super(x,y, 'Tree')
-  }
-}
-
-//un héros peut bouger...
-const hero = new Hero();
-hero.moveTo(5,5);
-
-//mais un arbre ne le peut pas
-const tree = new Tree();
-```
-
-✅ Prenez quelques minutes pour réimaginer un héros de Pac-Man (Inky, Pinky ou Blinky, par exemple) et comment il serait écrit en JavaScript.
-
-**Composition**
-
-Une autre manière de gérer l'héritage d'objet consiste à utiliser la *Composition*. Ensuite, les objets expriment leur comportement comme ceci:
-
-```javascript
-//créer un constant gameObject
-const gameObject = {
-  x: 0,
-  y: 0,
-  type: ''
-};
-
-//...et un constant movable
-const movable = {
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-//alors la constante mobileObject est composée du gameObject et des constantes mobiles
-const movableObject = {...gameObject, ...movable};
-
-//puis créez une fonction pour créer un nouveau héros qui hérite des propriétés mobileObject
-function createHero(x, y) {
-  return {
-    ...movableObject,
-    x,
-    y,
-    type: 'Hero'
-  }
-}
-//...et un objet statique qui hérite uniquement des propriétés de gameObject
-function createStatic(x, y, type) {
-  return {
-    ...gameObject
-    x,
-    y,
-    type
-  }
-}
-//créer le héros et le déplacer
-const hero = createHero(10,10);
-hero.moveTo(5,5);
-//et créer un arbre statique qui ne se trouve que dans les environs
-const tree = createStatic(0,0, 'Tree'); 
-```
-
-**Quel modèle dois-je utiliser?**
-
-C'est à vous de décider quel modèle vous choisissez. JavaScript prend en charge ces deux paradigmes.
-
---
-
-Un autre modèle courant dans le développement de jeux aborde le problème de la gestion de l'expérience utilisateur et des performances du jeu.
-
-## Modèle Pub/sub
-
-✅ Pub/Sub signifie  'publish-subscribe' (publier-s'abonner en français)
-
-Ce modèle répond à l'idée que les parties disparates de votre application ne devraient pas se connaître. Pourquoi donc? Il est beaucoup plus facile de voir ce qui se passe en général si différentes parties sont séparées. Cela facilite également le changement soudain de comportement si vous en avez besoin. Comment accomplir cela? Pour ce faire, nous établissons quelques concepts:
-
-- **message**: Un message est généralement une chaîne de texte accompagnée d'une charge utile facultative (une donnée qui clarifie le sujet du message). Un message typique dans un jeu peut être `KEY_PRESSED_ENTER`.
-- **publisher**: Cet élément *publie* un message et l'envoie à tous les abonnés.
-- **subscriber**: Cet élément *écoute* des messages spécifiques et exécute une tâche à la suite de la réception de ce message, comme tirer un laser.
-
-L'implémentation est assez petite mais c'est un modèle très puissant. Voici comment cela peut être mis en œuvre:
-
-```javascript
-//configurer une classe EventEmitter qui contient des écouteurs
-class EventEmitter {
-  constructor() {
-    this.listeners = {};
-  }
-//lorsqu'un message est reçu, laissez l'auditeur gérer sa charge utile
-  on(message, listener) {
-    if (!this.listeners[message]) {
-      this.listeners[message] = [];
-    }
-    this.listeners[message].push(listener);
-  }
-//lorsqu'un message est envoyé, envoyez-le à un auditeur avec une charge utile
-  emit(message, payload = null) {
-    if (this.listeners[message]) {
-      this.listeners[message].forEach(l => l(message, payload))
-    }
-  }
-}
-
-```
-
-Pour utiliser le code ci-dessus, nous pouvons créer une très petite implémentation:
-
-```javascript
-//mettre en place une structure de message
-const Messages = {
-  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
-};
-//invoquez l'eventEmitter que vous avez configuré ci-dessus
-const eventEmitter = new EventEmitter();
-//définissez un héros
-const hero = createHero(0,0);
-//faites savoir à l'EventEmitter de surveiller les messages concernant le héros qui se déplace vers la gauche et agissez en conséquence
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-
-//configurer la fenêtre pour écouter l'événement keyup, en particulier si la flèche gauche est touchée, émettre un message pour déplacer le héros vers la gauche
-window.addEventListener('keyup', (evt) => {
-  if (evt.key === 'ArrowLeft') {
-    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
-  }
-});
-```
-
-Ci-dessus, nous connectons un événement de clavier, `ArrowLeft` et envoyons le message `HERO_MOVE_LEFT`. Nous écoutons ce message et faisons bouger le `hero` en conséquence. La force de ce modèle est que l'auditeur de l'événement et le héros ne se connaissent pas. Vous pouvez remapper la touche `ArrowLeft` sur la touche `A`. De plus, il serait possible de faire quelque chose de complètement différent sur `ArrowLeft` en apportant quelques modifications à la fonction `on` de l'eventEmitter:
-
-```javascript
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-```
-
-Au fur et à mesure que les choses se compliquent lorsque votre jeu s'étend, ce modèle reste le même en complexité et votre code reste propre. Il est vraiment recommandé d'adopter ce modèle.
-
----
-
-## 🚀 Challenge
-
-Pensez à la façon dont le modèle pub-sub peut améliorer un jeu. Quelles parties doivent émettre des événements, et comment le jeu doit-il y réagir? C'est maintenant votre chance de faire preuve de créativité, en pensant à un nouveau jeu et à la façon dont ses parties pourraient se comporter.
-
-## Quiz de validation des connaissances
-
-[Quiz de validation des connaissancesz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=fr)
-
-## Révision et étude personnelle
-
-En savoir plus sur Pub/Sub en [lisant sur ce sujet](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon).
-
-## Affectation
-
-[Conception d'un jeu](assignment.fr.md)
diff --git a/6-space-game/1-introduction/translations/README.hi.md b/6-space-game/1-introduction/translations/README.hi.md
deleted file mode 100644
index 48c20441..00000000
--- a/6-space-game/1-introduction/translations/README.hi.md
+++ /dev/null
@@ -1,222 +0,0 @@
-# एक अंतरिक्ष खेल बनाएँ भाग 1: परिचय
-
-![वीडियो](../../images/pewpew.gif)
-
-## लेक्चर से पहलेकी क्विज
-
-[लेक्चर से पहलेकी क्विज ](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=hi)
-
-### खेल के विकास में इन्हेरिटेंस और कम्पोजीशन
-
-पहले के पाठों में, आपके द्वारा बनाए गए ऐप्स के डिज़ाइन आर्किटेक्चर के बारे में ज्यादा चिंता करने की ज़रूरत नहीं थी, क्योंकि प्रोजेक्ट बहुत कम दायरे में थे. हालाँकि, जब आपके अनुप्रयोग आकार और दायरे में बढ़ते हैं, तो वास्तु निर्णय एक बड़ी चिंता बन जाते हैं. जावास्क्रिप्ट में बड़ा अनुप्रयोग बनाने के लिए दो प्रमुख दृष्टिकोण हैं: _composition_ या _inheritance_. दोनों के पक्ष और विपक्ष हैं लेकिन किसी खेल के संदर्भ में उन्हें समझते हैं .
-
-✅ अब तक लिखी गई सबसे प्रसिद्ध प्रोग्रामिंग किताबों में से एक है [डिजाइन पैटर्न](https://en.wikipedia.org/wiki/Design_Patterns)
-
-एक गेम में आपके पास `game objects` हैं जो एक स्क्रीन पर मौजूद ऑब्जेक्ट हैं. इसका मतलब है कि उनके पास एक कार्टेशियन समन्वय प्रणाली पर एक स्थान है, जिसमें एक `x` और` y` समन्वय है. जैसा कि आप एक गेम विकसित करते हैं, आप देखेंगे कि आपके सभी गेम ऑब्जेक्ट में एक मानक गुण है, जो आपके द्वारा बनाए जाने वाले प्रत्येक गेम के लिए सामान्य है, अर्थात् तत्व हैं:
-
-- **location-based** अधिकांश, यदि सभी नहीं हैं, तो खेल तत्व स्थान आधारित हैं. इसका मतलब है कि उनके पास एक स्थान है, एक `x` और` y`.
-- **movable** ये ऐसी वस्तुएं हैं जो एक नए स्थान पर जा सकती हैं. यह आम तौर पर एक नायक, एक राक्षस या एक एनपीसी (एक गैर खिलाड़ी चरित्र) है, लेकिन उदाहरण के लिए, एक पेड़ जैसी स्थिर वस्तु नहीं.
-- **self-destructing** ये ऑब्जेक्ट केवल समय की एक निर्धारित अवधि के लिए मौजूद होते हैं, इससे पहले कि वे स्वयं को हटाने के लिए सेट करें. आमतौर पर यह एक `मृत` या` नष्ट` बूलियन द्वारा दर्शाया जाता है जो गेम इंजन को संकेत देता है कि इस ऑब्जेक्ट को अब प्रस्तुत नहीं किया जाना चाहिए.
-- **cool-down** 'कूल-डाउन' एक अल्पकालिक वस्तुओं में से एक विशिष्ट गुण है. एक विशिष्ट उदाहरण एक विस्फोट की तरह पाठ या चित्रमय प्रभाव का एक टुकड़ा है जिसे केवल कुछ मिलीसेकंड के लिए देखा जाना चाहिए.
-
-✅ पैक मैन जैसे खेल के बारे में सोचें. क्या आप इस खेल में ऊपर सूचीबद्ध चार ऑब्जेक्ट प्रकारों की पहचान कर सकते हैं?
-
-### व्यवहार व्यक्त करना
-
-हम ऊपर वर्णित सभी व्यवहार हैं जो गेम ऑब्जेक्ट्स हो सकते हैं . तो हम उन सबको को कैसे एनकोड करेंगे? हम इस व्यवहार को या तो क्लासेज या objects से संबंधित विधियों के रूप में व्यक्त कर सकते हैं.
-
-**क्लासेज**
-
-विचार एक क्लास के लिए एक निश्चित व्यवहार को जोड़ने के लिए `inheritence` के साथ संयोजन में `inheritence` का उपयोग करने के लिए है.
-
-✅ समझने के लिए इन्हेरिटेंस एक महत्वपूर्ण अवधारणा है। [एमडीएन के इन्हेरिटेंस के बारे में लेख](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototyp_chain) पर और जानें.
-
-कोड के माध्यम से व्यक्त, एक गेम ऑब्जेक्ट आमतौर पर इस तरह दिख सकता है:
-
-```javascript
-//set up the class GameObject
-class GameObject {
-  constructor(x, y, type) {
-    this.x = x;
-    this.y = y;
-    this.type = type;
-  }
-}
-
-//this class will extend the GameObject's inherent class properties
-class Movable extends GameObject {
-  constructor(x, y, type) {
-    super(x, y, type);
-  }
-
-  //this movable object can be moved on the screen
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-
-//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
-class Hero extends Movable {
-  constructor(x, y) {
-    super(x, y, "Hero");
-  }
-}
-
-//this class, on the other hand, only inherits the GameObject properties
-class Tree extends GameObject {
-  constructor(x, y) {
-    super(x, y, "Tree");
-  }
-}
-
-//a hero can move...
-const hero = new Hero();
-hero.moveTo(5, 5);
-
-//but a tree cannot
-const tree = new Tree();
-```
-
-✅ एक पैक-मैन हीरो (इंकी, पिंकी या ब्लंकी, उदाहरण के लिए) को फिर से लागू करने के लिए कुछ मिनट लें और यह जावास्क्रिप्ट में कैसे लिखा जाएगा.
-
-**कम्पोजीशन**
-
-ऑब्जेक्ट इन्हेरिटेंस को संभालने का एक अलग तरीका _Composition_ का उपयोग करते है. फिर, ऑब्जेक्ट अपने व्यवहार को इस तरह व्यक्त करते हैं:
-
-```javascript
-//create a constant gameObject
-const gameObject = {
-  x: 0,
-  y: 0,
-  type: ''
-};
-
-//...and a constant movable
-const movable = {
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-//then the constant movableObject is composed of the gameObject and movable constants
-const movableObject = {...gameObject, ...movable};
-
-//then create a function to create a new Hero who inherits the movableObject properties
-function createHero(x, y) {
-  return {
-    ...movableObject,
-    x,
-    y,
-    type: 'Hero'
-  }
-}
-//...and a static object that inherits only the gameObject properties
-function createStatic(x, y, type) {
-  return {
-    ...gameObject
-    x,
-    y,
-    type
-  }
-}
-//create the hero and move it
-const hero = createHero(10,10);
-hero.moveTo(5,5);
-//and create a static tree which only stands around
-const tree = createStatic(0,0, 'Tree');
-```
-
-**मुझे किस पैटर्न का उपयोग करना चाहिए?**
-
-यह आपके ऊपर है कि आप किस पैटर्न को चुनते हैं । जावास्क्रिप्ट इन दोनों प्रतिमानों का समर्थन करता है.
-
---
-
-खेल के विकास में एक और पैटर्न आम है जो गेम के उपयोगकर्ता अनुभव और प्रदर्शन को संभालने की समस्या को संबोधित करता है.
-
-## Pub/sub पैटर्न
-
-✅ Pub/Sub अर्थ 'publish-subscribe' है
-
-यह पैटर्न इस विचार को संबोधित करता है कि आपके आवेदन के असमान भागों को एक दूसरे के बारे में पता नहीं होना चाहिए. यह देखने के लिए बहुत आसान बनाता है कि सामान्य रूप से क्या हो रहा है अगर विभिन्न भागों को अलग किया जाता है. यह भी अगर आप की जरूरत है अचानक व्यवहार बदलने के लिए आसान बनाता है. हम इसे कैसे पूरा करेंगे? हम कुछ अवधारणाओं को स्थापित करके ऐसा करते हैं:
-
-- **message**: एक संदेश आमतौर पर एक टेक्स्ट स्ट्रिंग होता है जिसमें वैकल्पिक पेलोड (डेटा का एक टुकड़ा जो स्पष्ट करता है कि संदेश क्या है). एक खेल में एक विशिष्ट संदेश `KEY_PRESSED_ENTER` हो सकता है।
-- **publisher**: यह तत्व एक संदेश \_प्रकाशित\_ करता है और इसे सभी ग्राहकों को भेजता है.
-- **subscriber**: यह तत्व विशिष्ट संदेशों को \_सूचीबद्ध\_ करता है और इस संदेश को प्राप्त करने के परिणामस्वरूप कुछ कार्य करता है, जैसे कि लेजर फायरिंग.
-
-कार्यान्वयन आकार में काफी छोटा है लेकिन यह एक बहुत शक्तिशाली पैटर्न है। यहां बताया गया है कि इसे कैसे लागू किया जा सकता है:
-
-```javascript
-//set up an EventEmitter class that contains listeners
-class EventEmitter {
-  constructor() {
-    this.listeners = {};
-  }
-  //when a message is received, let the listener to handle its payload
-  on(message, listener) {
-    if (!this.listeners[message]) {
-      this.listeners[message] = [];
-    }
-    this.listeners[message].push(listener);
-  }
-  //when a message is sent, send it to a listener with some payload
-  emit(message, payload = null) {
-    if (this.listeners[message]) {
-      this.listeners[message].forEach((l) => l(message, payload));
-    }
-  }
-}
-```
-
-उपरोक्त कोड का उपयोग करने के लिए हम एक बहुत छोटा कार्यान्वयन बना सकते हैं:
-
-```javascript
-//set up a message structure
-const Messages = {
-  HERO_MOVE_LEFT: "HERO_MOVE_LEFT",
-};
-//invoke the eventEmitter you set up above
-const eventEmitter = new EventEmitter();
-//set up a hero
-const hero = createHero(0, 0);
-//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5, 0);
-});
-
-//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
-window.addEventListener("keyup", (evt) => {
-  if (evt.key === "ArrowLeft") {
-    eventEmitter.emit(Messages.HERO_MOVE_LEFT);
-  }
-});
-```
-
-ऊपर हम एक कीबोर्ड ईवेंट कनेक्ट करते हैं, `ArrowLeft` और `HERO_MOVE_LEFT` संदेश भेजें. हम उस संदेश को सुनते हैं और परिणामस्वरूप `hero` को स्थानांतरित करते हैं. इस पैटर्न के साथ ताकत यह है कि इवेंट लिस्टनेर और हीरो एक दूसरे के बारे में नहीं जानते हैं. आप `ArrowLeft` को `A` की के लिए रीमैप कर सकते हैं. इसके अतिरिक्त यह `ArrowLeft` पर पूरी तरह से अलग कुछ करने के लिए संभव हो जाएगा करने के लिए EventEmitter की `on` समारोह में कुछ संपादन:
-
-```javascript
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5, 0);
-});
-```
-
-जब आपका गेम बढ़ता है तो चीजें अधिक जटिल हो जाती हैं, यह पैटर्न जटिलता में समान रहता है और आपका कोड साफ रहता है. यह वास्तव में इस पैटर्न को अपनाने की सिफारिश की गई है.
-
----
-
-## 🚀 चुनौती
-
-इस बारे में सोचें कि pub-sub पैटर्न एक खेल को कैसे बढ़ा सकते हैं. किन हिस्सों को घटनाओं का उत्सर्जन करना चाहिए, और खेल को उन्हें कैसे प्रतिक्रिया देनी चाहिए? अब आपका मौका रचनात्मक बनने का है, एक नए खेल के बारे में सोचकर और उसके भागों का व्यवहार कैसे हो सकता है.
-
-## लेक्चर बाद की क्विज
-
-[लेक्चर बाद की क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-pub/sub[के बारे में पढ़े](https://docs.microsoft.com/azure/altecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon) और अधिक जानें .
-
-## कार्यभार
-
-[एक खेल का नका](assignment.hi.md)
diff --git a/6-space-game/1-introduction/translations/README.it.md b/6-space-game/1-introduction/translations/README.it.md
deleted file mode 100644
index 7f3cef83..00000000
--- a/6-space-game/1-introduction/translations/README.it.md
+++ /dev/null
@@ -1,224 +0,0 @@
-# Costruire un Gioco Spaziale Parte 1: Introduzione
-
-![video](../../images/pewpew.gif)
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=it)
-
-### Ereditarietà e Composizione nello sviluppo del gioco
-
-Nelle lezioni precedenti, non c'era molto bisogno di preoccuparsi dell'architettura di progettazione delle app che sono state create, poiché i progetti erano di portata molto ridotta. Tuttavia, quando le dimensioni e l'ambito delle applicazioni aumentano, le decisioni sull'architettura diventano una preoccupazione maggiore. Esistono due approcci principali per creare applicazioni più grandi in JavaScript: *composizione* o *ereditarietà*. Ci sono pro e contro in entrambi, che verranno spiegiati dall'interno del contesto di un gioco.
-
-✅ Uno dei libri di programmazione più famosi mai scritti ha a che fare con [i modelli di progettazione](https://it.wikipedia.org/wiki/Design_Patterns).
-
-In un gioco ci sono `oggetti di gioco` che esistono su uno schermo. Ciò significa che hanno una posizione su un sistema di coordinate cartesiane, caratterizzati dall'avere una coordinata `x` e una `y` . Man mano che si sviluppa un gioco si noterà che tutti gli oggetti di gioco hanno una proprietà standard, comune a ogni gioco che si crea, ovvero elementi che sono:
-
-- **basati sulla posizione** La maggior parte, se non tutti, gli elementi del gioco sono basati sulla posizione. Ciò significa che hanno una posizione, una `x` e una `y`.
-- **mobili** Questi sono oggetti che possono spostarsi in una nuova posizione. Tipicamente un eroe, un mostro o un personaggio non giocante (NPC - Non Player Character), ma non, ad esempio, un oggetto statico come un albero.
-- **autodistruggenti** Questi oggetti esistono solo per un determinato periodo di tempo prima che vengano contrassegnati per l'eliminazione. Di solito questo è rappresentato da un booleano `morto` o `distrutto` che segnala al motore di gioco che questo oggetto non dovrebbe più essere renderizzato.
-- **raffreddamento** Il "raffreddamento" è una proprietà tipica tra gli oggetti di breve durata. Un classico esempio è un pezzo di testo o un effetto grafico come un'esplosione che dovrebbe essere visto solo per pochi millisecondi.
-
-✅ Si pensi a un gioco come Pac-Man. Si riescono a identificare i quattro tipi di oggetti sopra elencati in questo gioco?
-
-### Esprimere il comportamento
-
-Quanto descritto sopra è il comportamento che possono avere gli oggetti di gioco. Allora come vanno codificati? Si può esprimere questo comportamento tramite metodi associati a classi o oggetti.
-
-**Classi**
-
-L'idea è di usare `classi` insieme all'`ereditarietà` per ottenere l'aggiunta di un determinato comportamento a una classe.
-
-✅ L'ereditarietà è un concetto importante da comprendere. Ulteriori informazioni sull'[articolo di MDN sull'ereditarietà](https://developer.mozilla.org/it/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
-
-Espresso tramite codice, un oggetto di gioco può tipicamente avere questo aspetto:
-
-```javascript
-
-//Imposta la classe GameObject
-class GameObject {
-  constructor(x, y, type) {
-    this.x = x;
-    this.y = y;
-    this.type = type;
-  }
-}
-
-//Questa classe estenderà le proprietà di classe di GameObject
-class Movable extends GameObject {
-  constructor(x,y, type) {
-    super(x,y, type)
-  }
-
-//questo oggetto movibile può essere spostato nello schermo
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-
-//classe specifica che estende la classe Movable, per poter approfittare di tutte le proprietà che eredita
-class Hero extends Movable {
-  constructor(x,y) {
-    super(x,y, 'Hero')
-  }
-}
-
-//questa classe, d'altro canto, eredita solo le proprietà di GameObject
-class Tree extends GameObject {
-  constructor(x,y) {
-    super(x,y, 'Tree')
-  }
-}
-
-//un eroe può spostarsi...
-const hero = new Hero();
-hero.moveTo(5,5);
-
-//ma un albero no
-const tree = new Tree();
-```
-
-✅ Ci si prenda qualche minuto per rivedere un eroe di Pac-Man (Inky, Pinky o Blinky, per esempio) e come sarebbe scritto in JavaScript.
-
-**Composizione**
-
-Un modo diverso di gestire l'ereditarietà degli oggetti consiste nell'usare la *composizione*. Con questo sistema gli oggetti esprimono il loro comportamento in questo modo:
-
-```javascript
-//crea una costante gameObject
-const gameObject = {
-  x: 0,
-  y: 0,
-  type: ''
-};
-
-//...e una costante movable
-const movable = {
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-//poi la costante movableObject viene composta dalle costanti gameObject e movable
-const movableObject = {...gameObject, ...movable};
-
-//quindi si scrive una funzione per crear un nuovo eroe che eredita le proprietà di movableObject
-function createHero(x, y) {
-  return {
-    ...movableObject,
-    x,
-    y,
-    type: 'Hero'
-  }
-}
-//...e un oggetto statico che eredita solo le proprietà di gameObject
-function createStatic(x, y, type) {
-  return {
-    ...gameObject
-    x,
-    y,
-    type
-  }
-}
-//crea l'eroe e lo muove
-const hero = createHero(10,10);
-hero.moveTo(5,5);
-//e crea un albero statico immobile
-const tree = createStatic(0,0, 'Tree');
-```
-
-**Quale modello si dovrebbe usare?**
-
-Dipende dallo sviluppatore quale modello scegliere. JavaScript supporta entrambi questi paradigmi.
-
---
-
-Un altro modello comune nello sviluppo di giochi affronta il problema della gestione dell'esperienza utente e delle prestazioni del gioco.
-
-## Modello pub/sub
-
-✅ Pub/Sub sta per pubblica/sottoscrivi ('publish-subscribe')
-
-Questo modello indirizza l'idea che parti disparate della propria applicazione non dovrebbero sapere l'una dell'altra. Perché? Rende molto più facile vedere cosa sta succedendo in generale se le varie parti sono separate. Inoltre, è più facile cambiare improvvisamente un comportamento se necessario. Come si realizza? Si fa stabilendo alcuni concetti:
-
-- **messaggio**: un messaggio è solitamente una stringa di testo accompagnata da un payload opzionale (un dato che chiarisce di cosa tratta il messaggio). Un messaggio tipico in un gioco può essere `KEY_PRESSED_ENTER`.
-- **publisher**: questo elemento *pubblica* un messaggio e lo invia a tutti i sottoscrittori.
-- **subscriber**: questo elemento *ascolta* messaggi specifici e svolge alcune attività come risultato della ricezione di questo messaggio, come sparare con un laser.
-
-L'implementazione è di dimensioni piuttosto ridotte ma è un modello molto potente. Ecco come può essere implementato:
-
-```javascript
-//imposta la classe EventEmitter che contiene i listener
-class EventEmitter {
-  constructor() {
-    this.listeners = {};
-  }
-//quando un messaggio viene ricevuto, si fa gestire il suo payload al listener
-  on(message, listener) {
-    if (!this.listeners[message]) {
-      this.listeners[message] = [];
-    }
-    this.listeners[message].push(listener);
-  }
-//quando un messaggio viene ricevuto, si invia a un listener con un payload
-  emit(message, payload = null) {
-    if (this.listeners[message]) {
-      this.listeners[message].forEach(l => l(message, payload))
-    }
-  }
-}
-
-```
-
-Per utilizzare il codice qui sopra si può creare un'implementazione molto piccola:
-
-```javascript
-//impostazione di una struttura di messaggio
-const Messages = {
-  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
-};
-//invoca l'eventEmitter impostato sopra
-const eventEmitter = new EventEmitter();
-//imposta un eroe
-const hero = createHero(0,0);
-//fa in modo che eventEmitter sappia come monitorare i messages di pertinenza dell'eroe per spostarsi a sinistra, e agisce di conseguenza
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-
-//imposta window per ascoltare un evento keyup, nello specifico se viene premuto freccia sinistra emette un messaggio che fa spostare l'eroe a sinistra
-window.addEventListener('keyup', (evt) => {
-  if (evt.key === 'ArrowLeft') {
-    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
-  }
-});
-```
-
-Sopra si collega un evento della tastiera, `ArrowLeft` e si invia il messaggio `HERO_MOVE_LEFT` (spostamento a sinistra - n.d.t.). Questo messaggio viene recepito e come risultato si sposta l'eroe (`hero`). Il punto di forza di questo modello è che l'event listener e l'eroe non sanno nulla l'uno dell'altro. Si può rimappare `ArrowLeft` sul tasto `A`. Inoltre sarebbe possibile fare qualcosa di completamente diverso su `ArrowLeft` apportando alcune modifiche alla funzione `on` di eventEmitter:
-
-```javascript
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-```
-
-Man mano che le cose diventano più complicate quando il gioco cresce, questo modello rimane lo stesso in termini di complessità e il proprio codice rimane pulito. Si consiglia vivamente di adottare questo modello.
-
----
-
-## 🚀 Sfida
-
-Pensare a come il modello pub/sub può migliorare un gioco. Quali parti dovrebbero emettere eventi e come dovrebbe reagire a questi il gioco? Ora si ha la possibilità di essere creativi, pensando a un nuovo gioco e a come potrebbero comportarsi le sue parti.
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=it)
-
-## Revisione e Auto Apprendimento
-
-Saperne di più su Pub/Sub [leggendo qui](https://docs.microsoft.com/it-it/azure/architecture/patterns/publisher-subscriber?WT.mc_id=academic-4621-cxa).
-
-## Compito
-
-[Produrre uno schizzo di un gioco](assignment.it.md)
diff --git a/6-space-game/1-introduction/translations/README.ja.md b/6-space-game/1-introduction/translations/README.ja.md
deleted file mode 100644
index a0ab13f2..00000000
--- a/6-space-game/1-introduction/translations/README.ja.md
+++ /dev/null
@@ -1,224 +0,0 @@
-# スペースゲーム構築プロジェクト その 1: イントロダクション
-
-![video](../../images/pewpew.gif)
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=ja)
-
-### ゲーム開発における継承とコンポジション
-
-以前のレッスンでは、プロジェクトの規模が非常に小さかったため、構築したアプリの設計アーキテクチャを気にする必要はあまりありませんでした。しかし、アプリケーションの規模や範囲が大きくなると、アーキテクチャの決定がより大きな関心事になります。JavaScript で大規模なアプリケーションを作成するには、大きく分けて2つのアプローチがあります。*コンポジション* と *継承* です。どちらにも長所と短所がありますが、ゲームの文脈から説明してみましょう。
-
-✅ これまでに書かれたプログラミング本の中で最も有名なものの一つは、[デザインパターン](https://ja.wikipedia.org/wiki/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%91%E3%82%BF%E3%83%BC%E3%83%B3_(%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A7%E3%82%A2))と関係があります。
-
-ゲームには `ゲームオブジェクト` があり、これは画面上に存在するオブジェクトです。つまり、それらは直交座標系上に位置しており、`x` と `y` の座標を持つことが特徴です。ゲームを開発していくうちに、すべてのゲームオブジェクトには、すべてのゲームに共通する標準的な特性があることに気づくでしょう。
-
-- **location-based** すべてではないにしても、ほとんどのゲーム要素は位置情報に基づいています。これは、場所、`x` と `y` を持つことを意味します
-- **movable** これらは、新しい場所に移動することができるオブジェクトです。これは典型的にはヒーローやモンスター、NPC (プレイヤーではないキャラクター) などですが、例えば木のような静的なオブジェクトはそうではありません
-- **self-destructing** これらのオブジェクトは、削除のために自分自身を設定する前に、一定期間だけ存在します。通常、これは `dead` または `destroyed` ブール値で表され、このオブジェクトがレンダリングされなくなることをゲームエンジンに通知します
-- **cool-down** 「クールダウン」は、短命なオブジェクトの典型的なプロパティです。典型的な例としては、数ミリ秒しか見られない爆発のようなテキストやグラフィック効果があります。
-
-✅ パックマンのようなゲームについて考えてみましょう。このゲームでは、上に挙げた4つのオブジェクトの種類を特定できますか?
-
-### 行動の表現
-
-上で説明したのは、すべてゲームオブジェクトが持つことのできる動作です。では、それらをどのようにエンコードするのでしょうか? この動作をクラスやオブジェクトに関連付けられたメソッドとして表現することができます。
-
-**クラス**
-
-クラスに特定の振る舞いを追加するために `クラス` を `継承` と組み合わせて使うという考え方です。
-
-✅ 継承は理解しておくべき重要な概念です。[継承に関する MDN の記事](https://developer.mozilla.org/ja/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)で詳しく解説しています。
-
-コードで表現すると、ゲームオブジェクトは通常このようになります。
-
-```javascript
-
-//GameObject クラスを設定します。
-class GameObject {
-  constructor(x, y, type) {
-    this.x = x;
-    this.y = y;
-    this.type = type;
-  }
-}
-
-//このクラスは GameObject の固有のクラスプロパティを拡張します。
-class Movable extends GameObject {
-  constructor(x,y, type) {
-    super(x,y, type)
-  }
-
-//この移動可能なオブジェクトは、画面上で移動することができます。
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-
-//これは Movable クラスを拡張した特定のクラスで、継承しているすべてのプロパティを利用することができます。
-class Hero extends Movable {
-  constructor(x,y) {
-    super(x,y, 'Hero')
-  }
-}
-
-//一方、このクラスは GameObject のプロパティのみを継承しています。
-class Tree extends GameObject {
-  constructor(x,y) {
-    super(x,y, 'Tree')
-  }
-}
-
-//hero は動くことができます
-const hero = new Hero();
-hero.moveTo(5,5);
-
-//しかし木にはできません
-const tree = new Tree();
-```
-
-✅ パックマンのヒーロー (例えば、Inky、Pinky、Blinky など) と、それが JavaScript でどのように書かれているかを、数分かけて再定義してみましょう。
-
-**コンポジション**
-
-オブジェクトの継承を処理する別の方法として、*コンポジション* を使用する方法があります。すると、オブジェクトは次のように動作を表現します。
-
-```javascript
-//定数の gameObject を作成する
-const gameObject = {
-  x: 0,
-  y: 0,
-  type: ''
-};
-
-//そして定数の movable
-const movable = {
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-//そして、定数 movableObject は定数 gameObject と movable で構成されます。
-const movableObject = {...gameObject, ...movable};
-
-//次に、movableObject のプロパティを継承する新しい Hero を作成する関数を作成します。
-function createHero(x, y) {
-  return {
-    ...movableObject,
-    x,
-    y,
-    type: 'Hero'
-  }
-}
-//...そして gameObject プロパティのみを継承する静的オブジェクト。
-function createStatic(x, y, type) {
-  return {
-    ...gameObject
-    x,
-    y,
-    type
-  }
-}
-//hero を作って動かします
-const hero = createHero(10,10);
-hero.moveTo(5,5);
-//そして、周りに立つだけの木を作ります
-const tree = createStatic(0,0, 'Tree'); 
-```
-
-**どのパターンを使えばいいのか？**
-
-どちらのパターンを選ぶかはあなた次第です。JavaScript はこれらのパラダイムの両方をサポートしています。
-
---
-
-ゲーム開発に共通するもう一つのパターンは、ゲームのユーザーエクスペリエンスとパフォーマンスを処理する問題を扱っています。
-
-## Pub/Sub パターン
-
-✅ Pub/Sub は 'publish-subscribe' の略です。
-
-このパターンは、あなたのアプリケーションのバラバラな部分が別のものを知ってはいけないという考えを示しています。それはなぜでしょうか? 様々な部分が分離されていると、一般的に何が起こっているのかを見るのがとても簡単になります。また、必要に応じて突然動作を変更することも容易になります。どのようにしてこれを達成するのでしょうか? いくつかの概念を確立することで実現します。
-
-- **message**: メッセージは通常、オプションのペイロード (メッセージの内容を明確にするデータ) を伴ったテキスト文字列です。ゲームにおける典型的なメッセージは `KEY_PRESSED_ENTER` です
-- **publisher**: この要素はメッセージを**発行し**、すべての購読者に送信します
-- **subscriber**: この要素は、特定のメッセージを *待ち受け*、このメッセージを受信した結果として、レーザーを発射するなどのタスクを実行します
-
-実装されているのはかなり小さいですが、かなり強力なパターンです。以下に実装方法を紹介します。
-
-```javascript
-//リスナーを含む EventEmitter クラスを設定します。
-class EventEmitter {
-  constructor() {
-    this.listeners = {};
-  }
-//メッセージを受信したときに、リスナーにそのペイロードを処理させます。
-  on(message, listener) {
-    if (!this.listeners[message]) {
-      this.listeners[message] = [];
-    }
-    this.listeners[message].push(listener);
-  }
-//メッセージを受信したときに、リスナーにそのペイロードを処理させます。
-  emit(message, payload = null) {
-    if (this.listeners[message]) {
-      this.listeners[message].forEach(l => l(message, payload))
-    }
-  }
-}
-
-```
-
-上記のコードを使用するために、非常に小さな実装を作成することができます。
-
-```javascript
-//メッセージ構造を設定します
-const Messages = {
-  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
-};
-//上記で設定した EventEmitter を呼び出します。
-const eventEmitter = new EventEmitter();
-//hero を設定します。
-const hero = createHero(0,0);
-//イベント送信者に hero が左に移動するメッセージを監視することを知らせ、それに基づいて行動するようにします。
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-
-//keyup イベントをリッスンするためにウィンドウを設定し、具体的には左矢印がヒットした場合、hero を左に移動するためのメッセージを発します。
-window.addEventListener('keyup', (evt) => {
-  if (evt.key === 'ArrowLeft') {
-    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
-  }
-});
-```
-
-上ではキーボードイベント `ArrowLeft` を接続して `HERO_MOVE_LEFT` メッセージを送信している。私たちはそのメッセージを聞き、その結果として `hero` を移動させます。このパターンの強みは、イベントリスナーとヒーローがお互いのことを知らないことです。`ArrowLeft` を `A` キーにリマップすることができます。さらに、eventEmitter の `on` 関数にいくつかの編集を加えることで、`ArrowLeft` で全く異なることが可能になります。
-
-```javascript
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-```
-
-ゲームが成長するときに物事がより複雑になったとしても、このパターンは複雑さの中で同じままで、あなたのコードはきれいなままになります。このパターンを採用することをお勧めします。
-
----
-
-## 🚀 チャレンジ
-
-pub-sub パターンがどのようにゲームを盛り上げるかを考えてみましょう。どのパーツがイベントを発生させ、それに対してゲームはどのように反応しますか? 新しいゲームとそのパーツがどのように振る舞うかを考えて、創造性を発揮するチャンスです。
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=ja)
-
-## 復習と自己学習
-
-Pub/Sub については、[こちらを読んでみてください](https://docs.microsoft.com/ja-jp/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon)。
-
-## 課題
-
-[ゲームのモックアップ](assignment.ja.md)
diff --git a/6-space-game/1-introduction/translations/README.ko.md b/6-space-game/1-introduction/translations/README.ko.md
deleted file mode 100644
index 429fad37..00000000
--- a/6-space-game/1-introduction/translations/README.ko.md
+++ /dev/null
@@ -1,224 +0,0 @@
-# Space 게임 제작하기 파트 1: 소개
-
-![video](../../images/pewpew.gif)
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=ko)
-
-### 게임 개발의 상속과 구성
-
-이전 강의에서는, 프로젝트의 범위가 매우 작았으므로, 만든 앱의 디자인 아키텍처에 대해 걱정할 필요가 없었습니다. 그러나, 애플리케이션의 크기와 범위가 커지면, 아키텍처 결정이 더 힘듭니다. JavaScript에서 더 큰 응용 프로그램을 만드는 데는 두 가지 주요 방식이 있습니다: *composition* 또는 *inheritance*. 둘 다 장점과 단점이 존재하지만 게임의 맥락에서 설명할 것 입니다.
-
-✅ 가장 유명한 프로그래밍 책 중에는 [design patterns](https://en.wikipedia.org/wiki/Design_Patterns)과 관련이 있습니다.
-
-게임에서는 화면에 존재하는 객체인 `game objects`가 있습니다. `x`와 `y` 좌표를 갖는 것이 특징인, 데카르트 좌표계에 있음을 의미합니다. 게임을 개발할 때 만드는, 모든 게임 객체를 가지고 있는 게임에는 공통적인 표준 속성이 있습니다:
-
-- **location-based** 전부는 아니지만, 대부분의 게임 요소는 위치 기반입니다. `x`와 `y`, 위치를 가지고 있음을 의미합니다.
-- **movable** 새 위치로 이동할 수 있는 객체입니다. 이는 일반적으로 영웅, 몬스터 혹은 NPC(non player character)이지만, 예를 들어, 나무와 같은 정적 객체는 아닙니다.
-- **self-destructing** 이런 객체는 삭제 작업을 위해 설정되기 전 일정한 시간에만 존재합니다. 일반적으로 이 객체가 더 이상 렌더링하지 않도록 게임 엔진에 알리기 위해서는 `dead` 또는 `destroyed` 논리 자료형으로 표시됩니다.
-- **cool-down** 'Cool-down'은 짧은-수명 객체의 일반적인 속성입니다. 일반적인 예시는 몇 milli 초 동안만 보이는 폭발과 같은 텍스트 또는 그래픽 이펙트입니다.
-
-✅ Pac-Man과 같은 게임을 생각해보세요. 이 게임에서 위 나열된 4가지 객체 타입을 구별할 수 있나요?
-
-### 행동 표현
-
-설명한 모든 것은 게임 객체가 가질 수 있는 동작입니다. 그럼 어떻게 인코딩 될까요? 이 동작을 클래스 혹은 객체와 관련된 메소드로 나타낼 수 있습니다.
-
-**Classes**
-
-아이디어로는 클래스에 특정 동작을 추가하기 위해 `inheritance`과 함께 `classes`를 사용하는 것입니다.
-
-✅ 상속은 이해해야 할 중요한 컨셉입니다. [MDN's article about inheritance](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)로 더 배워보세요.
-
-코드를 통해 표현되는, 게임 객체는 일반적으로 다음과 같습니다:
-
-```javascript
-
-//set up the class GameObject
-class GameObject {
-  constructor(x, y, type) {
-    this.x = x;
-    this.y = y;
-    this.type = type;
-  }
-}
-
-//this class will extend the GameObject's inherent class properties
-class Movable extends GameObject {
-  constructor(x,y, type) {
-    super(x,y, type)
-  }
-
-//this movable object can be moved on the screen
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-
-//this is a specific class that extends the Movable class, so it can take advantage of all the properties that it inherits
-class Hero extends Movable {
-  constructor(x,y) {
-    super(x,y, 'Hero')
-  }
-}
-
-//this class, on the other hand, only inherits the GameObject properties
-class Tree extends GameObject {
-  constructor(x,y) {
-    super(x,y, 'Tree')
-  }
-}
-
-//a hero can move...
-const hero = new Hero();
-hero.moveTo(5,5);
-
-//but a tree cannot
-const tree = new Tree();
-```
-
-✅ 잠시 시간을 내어 Pac-Man 영웅 (예를 들어, Inky, Pinky 혹은 Blinky)과 JavaScript로 작성되는 방법을 다시 구상하십시오.
-
-**Composition**
-
-객체 상속을 처리하는 다른 방법으로는 *Composition* 을 사용하는 것입니다. 그러면, 객체는 다음과 같이 동작을 표현합니다:
-
-```javascript
-//create a constant gameObject
-const gameObject = {
-  x: 0,
-  y: 0,
-  type: ''
-};
-
-//...and a constant movable
-const movable = {
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-//then the constant movableObject is composed of the gameObject and movable constants
-const movableObject = {...gameObject, ...movable};
-
-//then create a function to create a new Hero who inherits the movableObject properties
-function createHero(x, y) {
-  return {
-    ...movableObject,
-    x,
-    y,
-    type: 'Hero'
-  }
-}
-//...and a static object that inherits only the gameObject properties
-function createStatic(x, y, type) {
-  return {
-    ...gameObject
-    x,
-    y,
-    type
-  }
-}
-//create the hero and move it
-const hero = createHero(10,10);
-hero.moveTo(5,5);
-//and create a static tree which only stands around
-const tree = createStatic(0,0, 'Tree'); 
-```
-
-**어떤 패턴을 사용해야 하나요?**
-
-어떤 패턴을 선택하는 지는 여러분에게 달려 있습니다. JavaScript는 이러한 패러다임을 모두 지원합니다.
-
---
-
-게임 개발에서 흔히 볼 수 있는 또 다른 패턴으로는 게임의 사용자 경험과 성능 문제를 다룹니다.
-
-## Pub/sub 패턴
-
-✅ Pub/Sub은 'publish-subscribe'를 의미합니다
-
-이 패턴은 애플리케이션에서 각자 다른 부분이 서로 알고 있으면 안된다는 아이디어를 다룹니다. 왜 그럴까요? 여러 부분이 분리 되어있다면 보통 무슨 일이 일어나는지 쉽게 볼 수 있습니다. 필요한 경우에는 바로 동작을 변경하기도 더 쉽습니다. 어떻게 해야 할까요? 몇 가지 컨셉을 정하고 지킵시다.
-
-- **message**: 메시지는 일반적으로 선택적 payload (명확한 메시지 내용 데이터 조각)와 함께 제공되는 텍스트 문자열입니다. 게임의 일반적인 메시지는 `KEY_PRESSED_ENTER` 일 수 있습니다.
-- **publisher**: 이 요소는 메시지를 *publishes*하고 모든 구독자에게 보냅니다.
-- **subscriber**: 이 요소는 특정 메시지를 *listens* 하고 메시지를 수신한 결과로 레이저 발사와 같은 일부 작업을 수행합니다.
-
-implementation은 크기가 매우 작지만 매우 강한 패턴입니다. 구현 방법은 다음과 같습니다:
-
-```javascript
-//set up an EventEmitter class that contains listeners
-class EventEmitter {
-  constructor() {
-    this.listeners = {};
-  }
-//when a message is received, let the listener to handle its payload
-  on(message, listener) {
-    if (!this.listeners[message]) {
-      this.listeners[message] = [];
-    }
-    this.listeners[message].push(listener);
-  }
-//when a message is sent, send it to a listener with some payload
-  emit(message, payload = null) {
-    if (this.listeners[message]) {
-      this.listeners[message].forEach(l => l(message, payload))
-    }
-  }
-}
-
-```
-
-위의 코드를 사용하기 위해서 매우 작은 implementation을 만들 수 있습니다:
-
-```javascript
-//set up a message structure
-const Messages = {
-  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
-};
-//invoke the eventEmitter you set up above
-const eventEmitter = new EventEmitter();
-//set up a hero
-const hero = createHero(0,0);
-//let the eventEmitter know to watch for messages pertaining to the hero moving left, and act on it
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-
-//set up the window to listen for the keyup event, specifically if the left arrow is hit, emit a message to move the hero left
-window.addEventListener('keyup', (evt) => {
-  if (evt.key === 'ArrowLeft') {
-    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
-  }
-});
-```
-
-위에서 우리는 키보드 이벤트 `ArrowLeft`를 연결하고, `HERO_MOVE_LEFT` 메시지를 보냅니다. 우리는 그 메시지를 듣고 최종적으로 `hero`을 움직입니다. 이 패턴의 강점은 이벤트 리스너와 영웅이 서로 알지 못한다는 점입니다. `ArrowLeft`를 `A`키로 다시 매핑할 수도 있습니다. 추가적으로 eventEmitter의 `on` 함수를 조금 수정하여 `ArrowLeft`로 완전히 다른 작업을 할 수 있습니다:
-
-```javascript
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-```
-
-게임의 몸집이 커질 때 더 복잡해진다면, 이 패턴은 복잡성을 동일하면서 코드도 깨끗하게 유지합니다. 이 패턴을 채택하는 것은 정말 추천드립니다.
-
----
-
-## 🚀 도전
-
-pub-sub 패턴이 어떻게 게임을 발전시킬 수 있는지 생각해보세요. 어떤 부분이 이벤트를 어떻게 발생하고, 반응해야 하나요? 이제는 창의력을 발휘하고, 새로운 게임과 그 부분에 대해 어떻게 작동하는지 생각해볼 수 있는 기회입니다.
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-[reading about it](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon)으로 Pub/Sub에 대해 조금 더 배워봅시다.
-
-## 과제
-
-[Mock up a game](../assignment.md)
diff --git a/6-space-game/1-introduction/translations/README.ms.md b/6-space-game/1-introduction/translations/README.ms.md
deleted file mode 100644
index 6bc3084e..00000000
--- a/6-space-game/1-introduction/translations/README.ms.md
+++ /dev/null
@@ -1,224 +0,0 @@
-# Membina Permainan Angkasa Bahagian 1: Pengenalan
-
-![video](../../images/pewpew.gif)
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29)
-
-### Warisan dan Komposisi dalam pembangunan permainan
-
-Dalam pelajaran sebelumnya, tidak banyak yang perlu dikhawatirkan mengenai reka bentuk reka bentuk aplikasi yang anda buat, kerana skop projeknya sangat kecil. Namun, apabila aplikasi anda bertambah besar dan luas, keputusan seni bina menjadi perhatian yang lebih besar. Terdapat dua pendekatan utama untuk membuat aplikasi yang lebih besar dalam JavaScript: *komposisi* atau *pewarisan*. Terdapat kebaikan dan keburukan untuk kedua-duanya tetapi mari kita jelaskan dari dalam konteks permainan.
-
-✅ Salah satu buku pengaturcaraan paling terkenal yang pernah ditulis ada kaitannya dengan [corak reka bentuk](https://en.wikipedia.org/wiki/Design_Patterns).
-
-Dalam permainan, anda mempunyai `objek permainan` yang merupakan objek yang ada di layar. Ini bermakna mereka mempunyai lokasi pada sistem koordinat kartesian, yang dicirikan oleh mempunyai koordinat `x` dan `y`. Semasa anda mengembangkan permainan, anda akan melihat bahawa semua objek permainan anda mempunyai harta benda yang biasa, biasa untuk setiap permainan yang anda buat, iaitu elemen yang:
-
-- **berdasarkan lokasi** Sebilangan besar, jika tidak semua, elemen permainan berdasarkan lokasi. Ini bermaksud bahawa mereka mempunyai lokasi, `x` dan` y`.
-- **bergerak** Ini adalah objek yang boleh berpindah ke lokasi baru. Ini biasanya pahlawan, raksasa atau NPC (watak bukan pemain), tetapi tidak misalnya, objek statik seperti pokok.
-- **merosakkan diri** Objek-objek ini hanya wujud untuk jangka masa yang ditetapkan sebelum mereka disiapkan untuk dihapus. Biasanya ini diwakili oleh boolean `mati` atau `dimusnahkan` yang memberi isyarat kepada mesin permainan bahawa objek ini tidak lagi boleh diberikan.
-- **cool-down** 'Cool-down' adalah sifat khas di antara objek yang berumur pendek. Contoh biasa ialah sekeping teks atau kesan grafik seperti letupan yang hanya dapat dilihat selama beberapa milisaat.
-
-✅ Fikirkan permainan seperti Pac-Man. Bolehkah anda mengenal pasti empat jenis objek yang disenaraikan di atas dalam permainan ini?
-
-### Menyatakan tingkah laku
-
-Yang kami terangkan di atas adalah tingkah laku yang boleh dimiliki oleh objek permainan. Jadi bagaimana kita mengekodkannya? Kita boleh menyatakan tingkah laku ini sebagai kaedah yang berkaitan dengan kelas atau objek.
-
-**Kelas**
-
-Ideanya adalah untuk menggunakan `kelas` bersama dengan `pewarisan` untuk menyelesaikan penambahan tingkah laku tertentu ke kelas.
-
-✅ Warisan adalah konsep penting untuk difahami. Ketahui lebih lanjut mengenai [artikel MDN mengenai pewarisan](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain).
-
-Diekspresikan melalui kod, objek permainan biasanya dapat terlihat seperti ini:
-
-```javascript
-
-//menubuhkan kelas GameObject
-class GameObject {
-  constructor(x, y, type) {
-    this.x = x;
-    this.y = y;
-    this.type = type;
-  }
-}
-
-//kelas ini akan memperluaskan sifat kelas yang ada pada GameObject
-class Movable extends GameObject {
-  constructor(x,y, type) {
-    super(x,y, type)
-  }
-
-//objek bergerak ini dapat dipindahkan di skrin
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-
-//ini adalah kelas khusus yang meluaskan kelas Bergerak, sehingga dapat memanfaatkan semua sifat yang diwarisi
-class Hero extends Movable {
-  constructor(x,y) {
-    super(x,y, 'Hero')
-  }
-}
-
-//kelas ini, sebaliknya, hanya mewarisi sifat GameObject
-class Tree extends GameObject {
-  constructor(x,y) {
-    super(x,y, 'Tree')
-  }
-}
-
-//hero dapat bergerak...
-const hero = new Hero();
-hero.moveTo(5,5);
-
-//tetapi pokok tidak boleh
-const tree = new Tree();
-```
-
-✅ Luangkan masa beberapa minit untuk membayangkan semula pahlawan Pac-Man (misalnya Inky, Pinky atau Blinky) dan bagaimana ia ditulis dalam JavaScript.
-
-**Komposisi**
-
-Cara yang berbeza untuk menangani pewarisan objek adalah dengan menggunakan *Komposisi*. Kemudian, objek menyatakan tingkah laku mereka seperti ini:
-
-```javascript
-//buat pemalar untuk gameObject
-const gameObject = {
-  x: 0,
-  y: 0,
-  type: ''
-};
-
-//...dan satu constant untuk bergerak
-const movable = {
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-//buat pemalar movableObject terdiri daripada pemalar gameObject dan bergerak
-const movableObject = {...gameObject, ...movable};
-
-//kemudian buat fungsi untuk membuat Hero baru yang mewarisi sifat movableObject
-function createHero(x, y) {
-  return {
-    ...movableObject,
-    x,
-    y,
-    type: 'Hero'
-  }
-}
-//...dan objek statik yang hanya mewarisi sifat gameObject
-function createStatic(x, y, type) {
-  return {
-    ...gameObject
-    x,
-    y,
-    type
-  }
-}
-//buat hero dan gerakkannya
-const hero = createHero(10,10);
-hero.moveTo(5,5);
-//dan buat pokok statik yang hanya berdiri
-const tree = createStatic(0,0, 'Tree'); 
-```
-
-**Corak mana yang harus saya gunakan?**
-
-Terpulang kepada anda corak yang anda pilih. JavaScript menyokong kedua-dua paradigma ini.
-
---
-
-Pola lain yang biasa dalam pengembangan permainan menangani masalah menangani pengalaman dan prestasi pengguna permainan.
-
-## Corak pub / sub
-
-✅ Pub / Sub bermaksud 'publish-subscribe'
-
-Corak ini mengemukakan idea bahawa bahagian aplikasi anda yang berbeza tidak boleh saling mengenali. Kenapa begitu? Ini menjadikannya lebih mudah untuk melihat apa yang berlaku secara umum jika pelbagai bahagian dipisahkan. Ini juga menjadikannya lebih mudah untuk mengubah tingkah laku secara tiba-tiba jika anda perlu Bagaimana kita mencapainya? Kami melakukan ini dengan mewujudkan beberapa konsep:
-
-- **mesej**: Mesej biasanya merupakan rentetan teks yang disertai dengan muatan pilihan (sekeping data yang menjelaskan tentang mesej itu) Mesej biasa dalam permainan boleh menjadi `KEY_PRESSED_ENTER`.
-- **publish**: Elemen ini *menerbitkan* mesej dan mengirimkannya kepada semua pelanggan.
-- **subscriber**: Elemen ini *mendengar* mesej tertentu dan menjalankan beberapa tugas sebagai hasil daripada menerima mesej ini, seperti menembakkan laser.
-
-Pelaksanaannya cukup kecil tetapi coraknya sangat kuat. Inilah cara ia dapat dilaksanakan:
-
-```javascript
-//sediakan kelas EventEmitter yang mengandungi pendengar
-class EventEmitter {
-  constructor() {
-    this.listeners = {};
-  }
-//apabila mesej diterima, biarkan pendengar menangani muatannya
-  on(message, listener) {
-    if (!this.listeners[message]) {
-      this.listeners[message] = [];
-    }
-    this.listeners[message].push(listener);
-  }
-//semasa mesej dihantar, hantarkannya kepada pendengar dengan muatan
-  emit(message, payload = null) {
-    if (this.listeners[message]) {
-      this.listeners[message].forEach(l => l(message, payload))
-    }
-  }
-}
-
-```
-
-Untuk menggunakan kod di atas, kita dapat membuat implementasi yang sangat kecil:
-
-```javascript
-//sediakan struktur mesej
-const Messages = {
-  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
-};
-//memanggil eventEmitter yang anda tetapkan di atas
-const eventEmitter = new EventEmitter();
-//sediakan hero
-const hero = createHero(0,0);
-//biarkan eventEmitter tahu untuk menonton mesej yang berkaitan dengan pahlawan yang bergerak ke kiri, dan bertindak di atasnya
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-
-//sediakan tetingkap untuk mendengarkan acara keyup, khususnya jika anak panah kiri dipukul, mengirimkan pesan untuk menggerakkan pahlawan ke kiri
-window.addEventListener('keyup', (evt) => {
-  if (evt.key === 'ArrowLeft') {
-    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
-  }
-});
-```
-
-Di atas kami menyambungkan acara papan kekunci, `ArrowLeft` dan menghantar mesej `HERO_MOVE_LEFT`. Kami mendengar mesej itu dan memindahkan `hero` sebagai hasilnya. Kekuatan dengan corak ini ialah pendengar acara dan wira tidak saling mengenali antara satu sama lain. Anda boleh memetakan semula `ArrowLeft` ke kekunci `A`. Selain itu mungkin untuk melakukan sesuatu yang sama sekali berbeza pada `ArrowLeft` dengan membuat beberapa pengeditan pada fungsi `on` eventEmitter:
-
-```javascript
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-```
-
-Oleh kerana keadaan menjadi lebih rumit semasa permainan anda berkembang, corak ini tetap sama dalam kerumitan dan kod anda tetap bersih. Sangat digalakkan untuk menggunakan corak ini.
-
----
-
-## 🚀 Cabaran
-
-Fikirkan bagaimana corak pub-sub dapat meningkatkan permainan. Bahagian mana yang harus memancarkan acara, dan bagaimana reaksi permainan terhadapnya? Inilah peluang anda untuk menjadi kreatif, memikirkan permainan baru dan bagaimana bahagiannya berkelakuan.
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30)
-
-## Mengkaji & Belajar Sendiri
-
-Ketahui lebih lanjut mengenai Pub/Sub dengan [membaca mengenainya](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber).
-
-## Tugasan
-
-[Mockup permainan](assignment.ms.md)
\ No newline at end of file
diff --git a/6-space-game/1-introduction/translations/README.zh-tw.md b/6-space-game/1-introduction/translations/README.zh-tw.md
deleted file mode 100644
index af611dd6..00000000
--- a/6-space-game/1-introduction/translations/README.zh-tw.md
+++ /dev/null
@@ -1,224 +0,0 @@
-# 建立太空遊戲 Part 1：簡介
-
-![影片](../../images/pewpew.gif)
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/29?loc=zh_tw)
-
-### 遊戲開發中的繼承(Inheritance)與組合(Composition)
-
-在之前的課程中，因為專案較小的規模，我們不需要去擔憂應用程式的設計結構。然而，當你的應用程式規模越來越大時，結構的選擇就是一大課題。在 JavaScript 中，有兩種大方向來建立龐大的應用程式：*組合(Composition)*與*繼承(Inheritance)*。它們有各自的優缺點，我們會藉由遊戲內容來進行說明。
-
-✅ 其中一本有名的程式設計用書是有關於[設計模式](https://zh.wikipedia.org/wiki/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F%EF%BC%9A%E5%8F%AF%E5%A4%8D%E7%94%A8%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E8%BD%AF%E4%BB%B6%E7%9A%84%E5%9F%BA%E7%A1%80)。
-
-在遊戲中你會有`遊戲物件`，顯示在畫面中。這代表它們在笛卡爾座標系中有各自的位置，以 `x` 與 `y` 座標點定義。當你在開發遊戲時，你會注意到所有的遊戲物件都有一套標準的規範，和大多數的遊戲相似，通常會有這些元素：
-
-- **適地性** 大多數遊戲元素都是建立在位置上的。這代表他們有各自的所在處，一組 `x` 與 `y`。
-- **可移動的** 這些物件可以移動到新的位置。典型來說有英雄、怪物或是 NPC(Non Player Character)，但有些例外，好比是樹這種常駐物件。
-- **可自毀的** 這些物件只能存在於一小段時間，接著它們就會自我刪除。通常這是`死亡`或是`被摧毀`的布林訊號傳遞給遊戲引擎，告知物件不再需要被描繪出來。
-- **冷卻時間** 「冷卻時間」是存活週期短的典型物件屬性。好比是一段文字、爆炸的視覺特效，只能呈現數毫秒的時間。
-
-✅ 想想看遊戲小精靈(Pac-Man)。你能辨別出符合上述清單的其中四種物件嗎？
-
-### 行為表達
-
-以上的敘述皆在表達遊戲物件所進行的行為。那我們該如何去編寫它們呢？我們可以使用方法(methods)連接 classes 或是物件(objects)來表達這些行為。
-
-**Classes**
-
-這個想法是結合 `classes` 與`繼承`的方式來在 class 中添加特定行為。
-
-✅ 繼承是一個重要概念。在[有關繼承的 MDN 文章中](https://developer.mozilla.org/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)學習更多內容。
-
-以程式碼來表達的話，一個遊戲物件通常會呈現這種形式：
-
-```javascript
-
-//設定 class GameObject
-class GameObject {
-  constructor(x, y, type) {
-    this.x = x;
-    this.y = y;
-    this.type = type;
-  }
-}
-
-//這個 class 會繼承 GameObject 中 class 內容
-class Movable extends GameObject {
-  constructor(x,y, type) {
-    super(x,y, type)
-  }
-
-//這個可移動物件可以在畫面上移動
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-
-//這是特定的 class 繼承 Movable class，它能使用所有繼承到的屬性內容
-class Hero extends Movable {
-  constructor(x,y) {
-    super(x,y, 'Hero')
-  }
-}
-
-//另一方面，這個 class 只繼承到 GameObject 的內容
-class Tree extends GameObject {
-  constructor(x,y) {
-    super(x,y, 'Tree')
-  }
-}
-
-//英雄可以移動......
-const hero = new Hero();
-hero.moveTo(5,5);
-
-//但樹木卻不能
-const tree = new Tree();
-```
-
-✅ 花點時間重新構思小精靈(Pac-Man)的主角，或是 Inky、Pinky 與 Blinky 這幾隻鬼魂。它們該如何以 JavaScript 表現？
-
-**組合**
-
-另一種處理物件繼承的方式為*組合(Composition)*。物件以這種方式呈現它們的行為：
-
-```javascript
-//建立常數 gameObject
-const gameObject = {
-  x: 0,
-  y: 0,
-  type: ''
-};
-
-//...與常數 movable
-const movable = {
-  moveTo(x, y) {
-    this.x = x;
-    this.y = y;
-  }
-}
-//常數 movableObject 是 gameObject 與 movable 的組合
-const movableObject = {...gameObject, ...movable};
-
-//利用函式建立新的英雄，繼承 movableObject 的內容
-function createHero(x, y) {
-  return {
-    ...movableObject,
-    x,
-    y,
-    type: 'Hero'
-  }
-}
-//...與常駐物件只繼承 gameObject 的屬性
-function createStatic(x, y, type) {
-  return {
-    ...gameObject
-    x,
-    y,
-    type
-  }
-}
-//建立可以移動的英雄
-const hero = createHero(10,10);
-hero.moveTo(5,5);
-//和建立只能佇立於此的樹木
-const tree = createStatic(0,0, 'Tree'); 
-```
-
-**我該使用哪一種設計模式？**
-
-這都取決於你選擇何種設計模式。JavaScript 支援這兩種範例。
-
---
-
-另一種在遊戲開發中常見的設計模式負責處理玩家的遊戲表現與遊戲體驗。
-
-## 發布訂閱設計模式
-
-✅ Pub/Sub 全名為 'publish-subscribe'
-
-這個設計模式將應用程式內不同的模組分開處理，讓彼此不知道彼此的行為。為何要這樣做？這讓我們總觀上更輕易地了解各個模組的行為。也可以在你想要時輕易地改變模組的行為模式。我們該如何實踐它呢？我們先建立這幾個概念：
-
-- **訊息**： 一個訊息通常會以文字字串與額外的負載(payload) ── 一組定義訊息內容的資料 ── 呈現。遊戲中典型的訊息可以是 `KEY_PRESSED_ENTER`。
-- **發布者**： 這個元素*發布*訊息給所有的訂閱者。
-- **訂閱者**： 這個元素*監聽*特定的訊息，並藉由執行某些任務以作為訊息的回應，例如發射雷射光。
-
-實踐方法雖小，但這是功能強大的設計方式。這是它的建立方式：
-
-```javascript
-//設定 EventEmitter class 容納監聽者
-class EventEmitter {
-  constructor() {
-    this.listeners = {};
-  }
-//當訊息接收時，讓監聽者處理它的負載
-  on(message, listener) {
-    if (!this.listeners[message]) {
-      this.listeners[message] = [];
-    }
-    this.listeners[message].push(listener);
-  }
-//當訊息發出時，附上負載發給監聽者
-  emit(message, payload = null) {
-    if (this.listeners[message]) {
-      this.listeners[message].forEach(l => l(message, payload))
-    }
-  }
-}
-
-```
-
-利用上述程式我們建立一套小型實作內容：
-
-```javascript
-//設定訊息種類
-const Messages = {
-  HERO_MOVE_LEFT: 'HERO_MOVE_LEFT'
-};
-//調用你設定的 eventEmitter
-const eventEmitter = new EventEmitter();
-//設定英雄
-const hero = createHero(0,0);
-//讓 eventEmitter 監聽有關英雄往左移的訊息，並執行動作
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-
-//設定遊戲視窗來監聽鍵盤事件，當左方向鍵按壓時，發出英雄往左移的訊息
-window.addEventListener('keyup', (evt) => {
-  if (evt.key === 'ArrowLeft') {
-    eventEmitter.emit(Messages.HERO_MOVE_LEFT)
-  }
-});
-```
-
-我們連接了鍵盤事件 `ArrowLeft` 並傳遞 `HERO_MOVE_LEFT` 訊息。我們監聽該訊息並移動 `hero` 作為結果。這種開發方式讓事件監聽者與英雄區隔開來。你也可以將 `ArrowLeft` 換成 `A` 鍵。此外，我們能修改 eventEmitter 的 on 函式，讓 `ArrowLeft` 事件產生截然不同的行為。
-
-```javascript
-eventEmitter.on(Messages.HERO_MOVE_LEFT, () => {
-  hero.move(5,0);
-});
-```
-
-當遊戲越來越豐富、物件越來越複雜時，這套設計方式能維持程式碼的整潔。由衷建議善用這套設計模式。
-
----
-
-## 🚀 挑戰
-
-想想看發布訂閱模式可以如何增進一款遊戲。哪一個部份該發送事件，而遊戲又該如何回應事件？現在你有機會發揮你的創意，思考一款新遊戲和它運作的模組。
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/30?loc=zh_tw)
-
-## 複習與自學
-
-藉由[閱讀此連結](https://docs.microsoft.com/azure/architecture/patterns/publisher-subscriber/?WT.mc_id=academic-77807-sagibbon)來認識更多關於發布與訂閱的設計模式。
-
-## 作業
-
-[建立遊戲雛形](assignment.zh-tw.md)
diff --git a/6-space-game/1-introduction/translations/assignment.es.md b/6-space-game/1-introduction/translations/assignment.es.md
deleted file mode 100644
index 9d564a6f..00000000
--- a/6-space-game/1-introduction/translations/assignment.es.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Simula un juego
-
-## Instrucciones
-
-Utilizando los ejemplos de código de la lección, escriba una representación de un juego que disfrute. Tendrá que ser un juego simple, pero el objetivo es usar la clase o el patrón de composición y el patrón pub / sub para mostrar cómo se puede lanzar un juego. ¡Se creativo!
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | ----- | --- | - |
-| | Se colocan tres elementos en la pantalla y se manipulan | Se colocan dos elementos en la pantalla y se manipulan | Un elemento se coloca en la pantalla y se manipula |
diff --git a/6-space-game/1-introduction/translations/assignment.fr.md b/6-space-game/1-introduction/translations/assignment.fr.md
deleted file mode 100644
index 4a49246c..00000000
--- a/6-space-game/1-introduction/translations/assignment.fr.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Conception d'un jeu
-
-## Instructions
-
-À l'aide des exemples de code de la leçon, concevez une représentation d'un jeu que vous aimez. Celà devra être un jeu simple, mais le but est d'utiliser soit le modèle de classe, soit le modèle de composition et le modèle pub/sub pour montrer comment un jeu pourrait se lancer. Faites preuve de créativité!
-
-## Rubrique
-
-| Critères | Exemplaire                                               | Adéquat                                              | Besoin d'amélioration                                   |
-| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
-|          | Trois éléments sont placés sur l'écran et manipulés | Deux éléments sont placés sur l'écran et manipulés | Un élément est placé sur l'écran et manipulé |
\ No newline at end of file
diff --git a/6-space-game/1-introduction/translations/assignment.hi.md b/6-space-game/1-introduction/translations/assignment.hi.md
deleted file mode 100644
index b3827ec5..00000000
--- a/6-space-game/1-introduction/translations/assignment.hi.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# खेल का दिखावटी माडल
-
-## अनुदेश
-
-पाठ में कोड नमूनों का उपयोग करते हुए, आप जिस खेल का आनंद लेते हैं उसका प्रतिनिधित्व लिखें.यह एक साधारण खेल होना होगा, लेकिन लक्ष्य यह है कि क्लासेज या कम्पोजीशन पैटर्न और pub/sub पैटर्न का उपयोग करें यह दिखाने के लिए कि कोई गेम कैसे लॉन्च हो सकता है. रचनात्मक हो!
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                                 | पर्याप्त                                                   | सुधार की जरूरत                                           |
-| ------ | ----------------------------------------------------------- | ---------------------------------------------------------- | -------------------------------------------------------- |
-|        | तीन तत्वों को स्क्रीन पर रखा जाता है और हेरफेर किया जाता है | दो तत्वों को स्क्रीन पर रखा जाता है और हेरफेर किया जाता है | एक तत्व को स्क्रीन पर रखा जाता है और हेरफेर किया जाता है |
diff --git a/6-space-game/1-introduction/translations/assignment.it.md b/6-space-game/1-introduction/translations/assignment.it.md
deleted file mode 100644
index d58cc438..00000000
--- a/6-space-game/1-introduction/translations/assignment.it.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Produrre uno schizzo di un gioco
-
-## Istruzioni
-
-Utilizzando gli esempi di codice nella lezione, scrivere una rappresentazione di un gioco che  piace. Dovrà essere un gioco semplice, ma l'obiettivo è usare la classe o il modello di composizione e il modello pub/sub per mostrare come potrebbe essere avviato un gioco. Si dia sfogo alla propria creatività!
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
-|          | Tre elementi vengono posizionati sullo schermo e manipolati | Due elementi vengono posizionati sullo schermo e manipolati | Un elemento viene posizionato sullo schermo e manipolato |
\ No newline at end of file
diff --git a/6-space-game/1-introduction/translations/assignment.ja.md b/6-space-game/1-introduction/translations/assignment.ja.md
deleted file mode 100644
index c31bad9f..00000000
--- a/6-space-game/1-introduction/translations/assignment.ja.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# ゲームのモックアップ
-
-## 説明書
-
-レッスンで使用したコードサンプルを使用して、好きなゲームの表現を書いてください。単純なゲームである必要がありますが、目標は、クラスまたは構成パターンと pub/sub パターンのいずれかを使用して、ゲームがどのように起動するかを示すことです。創造力を発揮してください。
-
-## ルーブリック
-
-| 基準 | 模範的な例                                               | 適切な                                              | 改善が必要                                   |
-| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
-|          | 3つの要素を画面上に配置して操作する | 2つの要素を画面上に配置して操作する | 1つの要素を画面上に配置して操作する |
\ No newline at end of file
diff --git a/6-space-game/1-introduction/translations/assignment.ko.md b/6-space-game/1-introduction/translations/assignment.ko.md
deleted file mode 100644
index afd59c4b..00000000
--- a/6-space-game/1-introduction/translations/assignment.ko.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 게임 제작하기
-
-## 설명
-
-수업에 있는 예제 코드를 사용해서 게임을 만들어 봅시다. 간단한 게임이어야 하며, 목표는 class 또는 composition 패턴과 pub/sub 패턴 중 하나를 사용하여 게임을 만드는 것입니다. 창의력을 보여주세요!
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 화면에 세개의 요소가 있고 조작할 수 있는 경우 | 화면에 두개의 요소가 있고 조작할 수 있는 경우 | 화면에 한개의 요소가 있고 조작할 수 있는 경우
diff --git a/6-space-game/1-introduction/translations/assignment.ms.md b/6-space-game/1-introduction/translations/assignment.ms.md
deleted file mode 100644
index 1d1dd3d3..00000000
--- a/6-space-game/1-introduction/translations/assignment.ms.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Mock up permainan
-
-## Arahan
-
-Dengan menggunakan contoh kod dalam pelajaran, tulis representasi permainan yang anda nikmati. Ini mestilah permainan yang sederhana, tetapi tujuannya adalah menggunakan kelas atau corak komposisi dan corak pub / sub untuk menunjukkan bagaimana permainan dapat dilancarkan. Dapatkan kreatif!
-
-## Rubrik
-
-| Kriteria | 
-Contoh                                               | Mencukupi                                              | Usaha Lagi                                   |
-| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
-|          | Tiga elemen diletakkan di skrin dan dimanipulasi | Dua elemen diletakkan di skrin dan dimanipulasi | Satu elemen diletakkan di skrin dan dimanipulasi |
\ No newline at end of file
diff --git a/6-space-game/1-introduction/translations/assignment.nl.md b/6-space-game/1-introduction/translations/assignment.nl.md
deleted file mode 100644
index 8ceecc1c..00000000
--- a/6-space-game/1-introduction/translations/assignment.nl.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Maak een spel na
-
-## Instructies
-
-Gebruik de codevoorbeelden in de les om een weergave te maken van een spel dat u leuk vindt. Het zal een eenvoudig spel moeten zijn, maar het doel is om ofwel de class of het compositiepatroon en het pub/subpatroon te gebruiken om te laten zien hoe een spel zou kunnen starten. Wees creatief!
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                               | Voldoende                                              | Moet worden verbeterd                                   |
-| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
-|          | Drie elementen worden op het scherm geplaatst en gemanipuleerd | Twee elementen worden op het scherm geplaatst en gemanipuleerd | Een element wordt op het scherm geplaatst en gemanipuleerd |
\ No newline at end of file
diff --git a/6-space-game/1-introduction/translations/assignment.zh-tw.md b/6-space-game/1-introduction/translations/assignment.zh-tw.md
deleted file mode 100644
index 22477e5f..00000000
--- a/6-space-game/1-introduction/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 建立遊戲雛形
-
-## 簡介
-
-使用本課程中的程式案例，編寫一款你喜歡的遊戲呈現方式。這是一款簡單小規模的遊戲，目的是要能以 class、組合模式與發布訂閱模式呈現遊戲的運作方式。發揮你的創意！
-
-## 學習評量
-
-| 作業內容 | 優良                       | 普通                       | 待改進                       |
-| -------- | -------------------------- | -------------------------- | ---------------------------- |
-|          | 畫面上有三個元素且能被控制 | 畫面上有兩個元素且能被控制 | 畫面上只有一個元素且能被控制 |
diff --git a/6-space-game/2-drawing-to-canvas/translations/README.es.md b/6-space-game/2-drawing-to-canvas/translations/README.es.md
deleted file mode 100644
index 6e83ede2..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/README.es.md
+++ /dev/null
@@ -1,212 +0,0 @@
-# Construye un juego espacial Parte II: Dibuja héroes y monstruos en el lienzo
-
-![video](video-url)
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
-
-## El lienzo
-
-El lienzo es un elemento HTML que por defecto no tiene contenido; es una pizarra en blanco. Necesita agregarle un dibujo sobre él.
-
-✅ Lea [más sobre la API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) en MDN.
-
-Así es como se declara normalmente, como parte del cuerpo de la página:
-
-```html
-<canvas id="myCanvas" width="200" height="100"></canvas>
-```
-
-Arriba estamos configurando el `id`, `width` y `alto`.
-
-- `id`: establezca esto para que pueda obtener una referencia cuando necesite interactuar con él.
-- `width`: este es el ancho del elemento.
-- `height`: esta es la altura del elemento.
-
-## Dibujar geometría simple
-
-Canvas utiliza un sistema de coordenadas cartesiano para dibujar cosas. Por lo tanto, usa un eje x y un eje y para expresar dónde se encuentra algo. La ubicación `0,0` es la posición superior izquierda y la inferior derecha es lo que se mencionó que era el ANCHO y ALTO del lienzo.
-
-! [cuadrícula del lienzo](canvas_grid.png)
-> Imagen de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
-
-Para dibujar en el elemento de lienzo, deberá seguir los siguientes pasos:
-
-1. **Obtenga una referencia** al elemento Canvas.
-1. **Obtenga una referencia** en el elemento Context que se encuentra en el elemento canvas.
-1. **Realice una operación de dibujo** utilizando el elemento de contexto.
-
-El código para los pasos anteriores generalmente se ve así:
-
-```javascript
-// dibuja un rectángulo rojo
-// 1. obtener la referencia del lienzo
-canvas = document.getElementById("myCanvas");
-
-// 2. establecer el contexto en 2D para dibujar formas básicas
-ctx = canvas.getContext("2d");
-
-// 3. rellénalo con el color rojo
-ctx.fillStyle = 'red';
-
-// 4. y dibuja un rectángulo con estos parámetros, configurando la ubicación y el tamaño
-ctx.fillRect(0,0, 200, 200) // x, y, ancho, alto
-```
-
-✅ La API de Canvas se enfoca principalmente en formas 2D, pero también puede dibujar elementos 3D en un sitio web; para esto, puede usar la [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
-
-Puede dibujar todo tipo de cosas con la API de Canvas como:
-
-- **Formas geométricas**, ya mostramos cómo dibujar un rectángulo, pero hay mucho más que puedes dibujar.
-- **Texto**, puede dibujar un texto con cualquier fuente y color que desee.
-- **Imágenes**, puede dibujar una imagen basada en un activo de imagen como .jpg o .png, por ejemplo.
-
-✅ ¡Pruébalo! Sabes cómo dibujar un rectángulo, ¿puedes dibujar un círculo en una página? Eche un vistazo a algunos dibujos de Canvas interesantes en CodePen. Aquí hay un [ejemplo particularmente impresionante](https://codepen.io/dissimulate/pen/KrAwx).
-
-## Cargar y dibujar un recurso de imagen
-
-Usted carga un activo de imagen creando un objeto `Image` y estableciendo su propiedad `src`. Luego escuchas el evento `load` para saber cuándo está listo para usarse. El código se ve así:
-
-### Cargar activo
-
-```javascript
-const img = new Image();
-img.src = 'path/to/my/image.png';
-img.onload = () => {
-  // image loaded and ready to be used
-}
-```
-
-### Cargar patrón de activos
-
-Se recomienda envolver lo anterior en una construcción así, para que sea más fácil de usar y solo intente manipularlo cuando esté completamente cargado:
-
-
-```javascript
-async function loadAsset(path) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.src = path;
-    img.onload = () => {
-      // imagen cargada y lista para ser utilizada
-    }
-    resolve(img);
-  })
-}
-
-// usar así
-
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-}
-
-```
-
-Para dibujar activos del juego en una pantalla, su código se vería así:
-
-```javascript
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-
-  canvas = document.getElementById("myCanvas");
-  ctx = canvas.getContext("2d");
-  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
-  ctx.drawImage(monsterImg, 0,0);
-}
-```
-
-### Qué construir
-
-Construirá una página web con un elemento Canvas. Debería representar una pantalla negra `1024*768`. Le proporcionamos dos imágenes:
-
-- Barco héroe
-
-   ![Barco héroe](../solution/assets/player.png)
-
-- Monstruo 5*5
-
-   ![Monster ship](../solution/assets/enemyShip.png)
-
-
-### Pasos recomendados para iniciar el desarrollo
-
-Busque los archivos que se han creado para usted en la subcarpeta `your-work`. Debe contener lo siguiente:
-
-
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-Abra la copia de esta carpeta en Visual Studio Code. Debe tener una configuración de entorno de desarrollo local, preferiblemente con Visual Studio Code con NPM y Node instalados. Si no tiene `npm` configurado en su computadora, [aquí le explicamos cómo hacerlo](https://www.npmjs.com/get-npm).
-
-Inicie su proyecto navegando a la carpeta `your_work`:
-
-```bash
-cd your-work
-npm start
-```
-
-Lo anterior iniciará un servidor HTTP en la dirección `http: // localhost: 5000`. Abra un navegador e ingrese esa dirección. Es una página en blanco ahora mismo, pero eso cambiará
-
-> Nota: para ver los cambios en su pantalla, actualice su navegador.
-
-### Agregar código
-
-Agregue el código necesario a `your-work/app.js` para resolver lo siguiente
-
-1. **Dibuja** un lienzo con fondo negro
-   > consejo: agregue dos líneas debajo del TODO apropiado en `/app.js`, estableciendo el elemento `ctx` en negro y las coordenadas superior / izquierda en 0,0 y la altura y el ancho para que sean iguales a los del lienzo.
-2. **Cargar** texturas
-   > consejo: agregue las imágenes del jugador y del enemigo usando `await loadTexture` y pasando la ruta de la imagen. ¡Todavía no los verá en la pantalla!
-3. **Dibuja** héroe en el centro de la pantalla en la mitad inferior
-   > consejo: use la API `drawImage` para dibujar heroImg en la pantalla, configurando `canvas.width / 2 - 45` y `canvas.height - canvas.height / 4)`;
-4. **Dibujar** 5 * 5 monstruos
-   > consejo: ahora puedes descomentar el código para dibujar enemigos en la pantalla. A continuación, vaya a la función `createEnemies` y constrúyala.
-
-   Primero, configure algunas constantes:
-
-
-    ```javascript
-    const MONSTER_TOTAL = 5;
-    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-    const STOP_X = START_X + MONSTER_WIDTH;
-    ```
-
-    luego, crea un bucle para dibujar la matriz de monstruos en la pantalla:
-
-    ```javascript
-    for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          ctx.drawImage(enemyImg, x, y);
-        }
-      }
-    ```
-
-## Resultado
-
-El resultado final debería verse así:
-
-![Pantalla negra con un héroe y monstruos 5*5](../partI-solution.png)
-
-## Solución
-
-Intente resolverlo usted mismo primero, pero si se atasca, eche un vistazo a una [solución](solution/app.js)
-
-🚀 Desafío: ha aprendido a dibujar con la API Canvas enfocada en 2D; eche un vistazo a la [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API) e intente dibujar un objeto 3D.
-
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
-
-## Revisión y autoestudio
-
-Obtenga más información sobre la API de Canvas [leyendo sobre ella](https://developer.mozilla.org/docs/Web/API/Canvas_API).
-
-**Tarea**: [Jugar con la API de Canvas](assignment.es.md)
diff --git a/6-space-game/2-drawing-to-canvas/translations/README.fr.md b/6-space-game/2-drawing-to-canvas/translations/README.fr.md
deleted file mode 100644
index 9033dabe..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/README.fr.md
+++ /dev/null
@@ -1,216 +0,0 @@
-# Construisez un jeu spatial, partie 2 : dessinez des héros et des monstres sur le canevas
-
-## Quiz préalable
-
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=fr)
-
-## Le canevas
-
-Le canevas est un élément HTML qui par défaut n'a pas de contenu ; c'est une ardoise vierge. Vous devez dessiner dessus pour y ajouter quelque chose.
-
-✅ Lisez en [plus sur l'API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) sur MDN.
-
-Voici comment il est généralement déclaré, dans le corps de la page:
-
-```html
-<canvas id="myCanvas" width="200" height="100"></canvas>
-```
-
-Ci-dessus, nous définissons `id`, `width` et `height`.
-
-- `id`: définissez-le pour obtenir une référence lorsque vous avez besoin d'interagir avec lui.
-- `width`: c'est la largeur de l'élément.
-- `height`: c'est la hauteur de l'élément.
-
-## Dessiner une géométrie simple
-
-Le Canvas utilise un système de coordonnées cartésiennes pour dessiner des choses. Ainsi, il utilise un axe x et un axe y pour exprimer où se trouve quelque chose. L'emplacement `0,0` est la position en haut à gauche et en bas à droite ce que vous appelez également la LARGEUR et la HAUTEUR du canevas.
-
-![la grille du canevas](../canvas_grid.png)
-> Image de [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
-
-Pour dessiner sur l'élément de canevas, vous devrez suivre les étapes suivantes:
-
-1. **Obtenir une référence** à l'élément Canvas.
-1. **Obtenez une référence** sur l'élément Context qui se trouve sur l'élément canvas.
-1. **Effectuez une opération de dessin** à l'aide de l'élément de contexte.
-
-Le code pour les étapes ci-dessus ressemble communément à ceci:
-
-```javascript
-// dessine un rectangle rouge
-//1. obtenir la référence du canevas
-canvas = document.getElementById("myCanvas");
-
-//2. définir le contexte en 2D pour dessiner des formes de base
-ctx = canvas.getContext("2d");
-
-//3. le remplir avec la couleur rouge
-ctx.fillStyle = 'red';
-
-//4. et dessiner un rectangle avec ces paramètres, en définissant l'emplacement et la taille
-ctx.fillRect(0,0, 200, 200) // x,y, largeur, hauteur
-```
-
-✅ L'API Canvas se concentre principalement sur les formes 2D, mais vous pouvez également dessiner des éléments 3D sur un site Web ; pour cela, vous pouvez utiliser l'[API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
-
-Vous pouvez dessiner toutes sortes de choses avec l'API Canvas comme:
-
-- **Des formes géométriques**, nous avons déjà montré comment dessiner un rectangle, mais il y a beaucoup plus que vous pouvez dessiner.
-- **Du texte**, vous pouvez dessiner un texte avec la police et la couleur de votre choix.
-- **Des images**, vous pouvez dessiner une image basée sur un élément d'image comme un .jpg ou .png par exemple.
-
-✅ Essayez-le ! Vous savez dessiner un rectangle, pouvez-vous dessiner un cercle sur une page ? Jetez un œil à quelques dessins Canvas intéressants sur CodePen. Voici un [exemple particulièrement impressionnant](https://codepen.io/dissimulate/pen/KrAwx).
-
-## Charger et dessiner un élément d'image
-
-Vous chargez une ressource image en créant un objet `Image` et définissez sa propriété `src`. Ensuite, vous écoutez l'événement `load` pour savoir quand il est prêt à être utilisé. Le code ressemble à ceci:
-
-### Charger l'élément
-
-```javascript
-const img = new Image();
-img.src = 'path/to/my/image.png';
-img.onload = () => {
-  // image chargée et prête à être utilisée
-}
-```
-
-### Charger le modèle d'élément
-
-Il est recommandé d'envelopper ce qui précède dans une construction comme celle-ci, il est donc plus facile à utiliser et vous n'essayez de le manipuler que lorsqu'il est complètement chargé:
-
-```javascript
-function loadAsset(path) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.src = path;
-    img.onload = () => {
-      // image chargée et prête à être utilisée
-      resolve(img);
-    }
-  })
-}
-
-// utiliser comme celà
-
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-}
-
-```
-
-Pour dessiner les ressources du jeu sur un écran, votre code ressemblerait à ceci:
-
-```javascript
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-
-  canvas = document.getElementById("myCanvas");
-  ctx = canvas.getContext("2d");
-  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
-  ctx.drawImage(monsterImg, 0,0);
-}
-```
-
-## Il est maintenant temps de commencer à créer votre jeu
-
-### Quoi construire
-
-Vous allez créer une page Web avec un élément Canvas. Il devrait rendre un écran noir `1024*768`. Nous vous avons fourni deux images:
-
-- Navire héros
-
-   ![Hero ship](../solution/assets/player.png)
-
-- Monstre 5*5
-
-   ![Monster ship](../solution/assets/enemyShip.png)
-
-### Étapes recommandées pour commencer le développement
-
-Recherchez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit contenir les éléments suivants:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-Ouvrez la copie de ce dossier dans Visual Studio Code. Vous devez disposer d'une configuration d'environnement de développement local, de préférence avec Visual Studio Code ainsi que NPM et Node installés. Si `npm` n'est pas configuré sur votre ordinateur, [voici comment procéder](https://www.npmjs.com/get-npm).
-
-Démarrez votre projet en accédant au dossier `your_work`:
-
-```bash
-cd your-work
-npm start
-```
-
-Ce qui précède démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et saisissez cette adresse. C'est une page blanche actuellement, mais cela va changer
-
-> Remarque : pour voir les changements sur votre écran, actualisez votre navigateur.
-
-### Ajouter du code
-
-Ajoutez le code nécessaire à `your-work/app.js` pour résoudre le problème ci-dessous
-
-1. **Dessinez** un canevas avec un fond noir
-   > astuce : ajoutez deux lignes sous le TODO approprié dans `/app.js`, en définissant l'élément `ctx` sur noir et les coordonnées haut/gauche à 0,0 et la hauteur et la largeur à égales à celles du canevas.
-2. **Charger** les textures
-   > astuce : ajoutez les images du joueur et de l'ennemi en utilisant `await loadTexture` et en passant le chemin de l'image. Vous ne les verrez pas encore à l'écran!
-3. **Dessinez** le héros au centre de l'écran dans la moitié inférieure
-   > astuce : utilisez l'API `drawImage` pour dessiner heroImg à l'écran, en définissant `canvas.width / 2 - 45` et `canvas.height - canvas.height / 4)`;
-4. **Dessinez** les monstres 5*5
-   > astuce : vous pouvez maintenant décommenter le code pour dessiner les ennemis à l'écran. Ensuite, allez à la fonction `createEnemies` et compilez la.
-
-   Tout d'abord, configurez quelques constantes:
-
-    ```javascript
-    const MONSTER_TOTAL = 5;
-    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-    const STOP_X = START_X + MONSTER_WIDTH;
-    ```
-
-    Ensuite, créez une boucle pour dessiner le tableau de monstres sur l'écran:
-
-    ```javascript
-    for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          ctx.drawImage(enemyImg, x, y);
-        }
-      }
-    ```
-
-## Résultat
-
-Le résultat final devrait ressembler à ça:
-
-![Un écran noir avec un héros et 5*5 monstres](../partI-solution.png)
-
-## Solution
-
-Veuillez d'abord essayer de le résoudre vous-même, mais si vous êtes bloqué, jetez un œil à une [solution](../solution/app.js)
-
----
-
-## 🚀 Challenge
-
-Vous avez appris à dessiner avec l'API Canvas axée sur la 2D ; jetez un œil à l'[API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API), et essayez de dessiner un objet 3D.
-
-## Quiz de validation des connaissances
-
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=fr)
-
-## Révision et étude personnelle
-
-En savoir plus sur l'API Canvas en [lisant à ce sujet](https://developer.mozilla.org/docs/Web/API/Canvas_API).
-
-## Affectation
-
-[Jouer avec l'API Canvas](assignment.fr.md)
diff --git a/6-space-game/2-drawing-to-canvas/translations/README.hi.md b/6-space-game/2-drawing-to-canvas/translations/README.hi.md
deleted file mode 100644
index da64a4b1..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/README.hi.md
+++ /dev/null
@@ -1,218 +0,0 @@
-# एक अंतरिक्ष खेल भाग 2 बनाएँ: कैनवस के लिए नायक और राक्षस बनाएँ
-
-## लेक्चर पाहिले की क्विज
-
-[लेक्चर पाहिले की क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=hi)
-
-## कैनवास
-
-कैनवास एक HTML तत्व है जो डिफ़ॉल्ट रूप से कोई सामग्री नहीं है; यह एक खाली स्लेट है. आपको उस पर ड्राइंग करके इसे जोड़ना होगा.
-
-✅ MDN पर [कैनवस एपीआई के बारे में और पढ़ें](https://developer.mozilla.org/docs/Web/API/Canvas_API).
-
-यहां बताया गया है कि पेज के मुख्य भाग के रूप में यह आमतौर पर घोषित किया जाता है:
-
-```html
-<canvas id="myCanvas" width="200" height="100"></canvas>
-```
-
-ऊपर हम `id`,`width` और `height` सेट कर रहे हैं
-
-- `id`: इसे सेट करें ताकि आप एक संदर्भ प्राप्त कर सकें जब आपको इसके साथ परस्पर करने की आवश्यकता हो.
-- `width`: यह तत्व की चौड़ाई है.
-- `height`: यह तत्व की ऊंचाई है.
-
-## सरल ज्यामिति खींचना
-
-कैनवस चीजों को आकर्षित करने के लिए एक कार्टेशियन समन्वय प्रणाली का उपयोग कर रहा है.
-इस प्रकार यह x- अक्ष और y- अक्ष का उपयोग करता है जहां कुछ स्थित है व्यक्त करने के लिए.स्थान `0,0` शीर्ष बाईं स्थिति है और नीचे दायाँ हिस्सा है जिसे आपने कैनवास का WIDTH और HEIGHT कहा है.
-
-![कैनवास का ग्रिड](../canvas_grid.png)
-
-> [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes) से छवि
-
-कैनवास तत्व पर आकर्षित करने के लिए आपको निम्नलिखित चरणों से गुजरना होगा:
-
-1. **एक संदर्भ प्राप्त करें** कैनवास तत्व के लिए.
-2. **एक संदर्भ प्राप्त करें** संदर्भ तत्व पर जो कैनवास तत्व पर बैठता है.
-3. **एक ड्राइंग ऑपरेशन** संदर्भ तत्व का उपयोग करके.
-
-उपरोक्त चरणों के लिए कोड आमतौर पर ऐसा दिखता है:
-
-```javascript
-// draws a red rectangle
-//1. get the canvas reference
-canvas = document.getElementById("myCanvas");
-
-//2. set the context to 2D to draw basic shapes
-ctx = canvas.getContext("2d");
-
-//3. fill it with the color red
-ctx.fillStyle = "red";
-
-//4. and draw a rectangle with these parameters, setting location and size
-ctx.fillRect(0, 0, 200, 200); // x,y,width, height
-```
-
-✅ कैनवस एपीआई ज्यादातर 2डी आकृतियों पर केंद्रित है, लेकिन आप एक वेब साइट पर 3डी तत्वों को भी आकर्षित कर सकते हैं; इसके लिए, आप [वेबगियल एपीआई](https://developer.mozilla.org/docs/Web/API/WebGL_API) का उपयोग कर सकते हैं.
-
-आप कैनवस एपीआई के साथ सभी प्रकार की चीजें आकर्षित कर सकते हैं जैसे की :
-
-- **Geometrical shapes**, हमने पहले ही दिखाया है कि एक आयत कैसे खींचना है, लेकिन बहुत कुछ है जो आप खींच सकते हैं.
-- **Text**, आप अपनी इच्छानुसार किसी भी फ़ॉन्ट और रंग के साथ एक पाठ खींच सकते हैं.
-- **Images**, आप उदाहरण के लिए .jpg या .png जैसी छवि परिसंपत्ति के आधार पर चित्र बना सकते हैं.
-
-✅ कोशिश करो! आप जानते हैं कि एक आयत कैसे बनाई जाती है, क्या आप किसी पृष्ठ पर एक वृत्त खींच सकते हैं? कोडपेन पर कुछ दिलचस्प कैनवस ड्रॉइंग पर एक नज़र डालें. यहाँ एक [विशेष रूप से प्रभावशाली उदाहरण है](https://codepen.io/dissimulate/pen/KrAwx).
-
-## छवि एसेट लोड और ड्रा करे
-
-आप एक 'Image' ऑब्जेक्ट बनाकर एक छवि एसेट लोड करते हैं और इसकी `src` गुण सेट करते हैं.तब आप यह जानने के लिए `load` घटना सुनते हैं कि यह कब उपयोग होने के लिए तैयार है. कोड इस तरह दिखता है:
-
-### लोड एसेट
-
-```javascript
-const img = new Image();
-img.src = "path/to/my/image.png";
-img.onload = () => {
-  // image loaded and ready to be used
-};
-```
-
-### लोड एसेट पैटर्न
-
-इसे एक निर्माण में ऊपर से लपेटने की सिफारिश की गई है, इसलिए इसका उपयोग करना आसान है और आप इसे पूरी तरह से लोड होने पर केवल हेरफेर करने का प्रयास करते हैं:
-
-```javascript
-function loadAsset(path) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.src = path;
-    img.onload = () => {
-      // image loaded and ready to be used
-      resolve(img);
-    };
-  });
-}
-
-// use like so
-
-async function run() {
-  const heroImg = await loadAsset("hero.png");
-  const monsterImg = await loadAsset("monster.png");
-}
-```
-
-गेम एसेट्स को स्क्रीन पर खींचने के लिए, आपका कोड इस तरह दिखेगा:
-
-```javascript
-async function run() {
-  const heroImg = await loadAsset("hero.png");
-  const monsterImg = await loadAsset("monster.png");
-
-  canvas = document.getElementById("myCanvas");
-  ctx = canvas.getContext("2d");
-  ctx.drawImage(heroImg, canvas.width / 2, canvas.height / 2);
-  ctx.drawImage(monsterImg, 0, 0);
-}
-```
-
-## अब अपने खेल का निर्माण शुरू करने का समय आ गया है
-
-### क्या बनना है
-
-आप कैनवास तत्व के साथ एक वेब पेज बनाएंगे। यह एक काली स्क्रीन `1024 * 768` को प्रस्तुत करना चाहिए। हमने आपको दो चित्र प्रदान किए हैं:
-
-- हीरो शिप
-
-  ![हीरो शिप ](../solution/assets/player.png)
-
-- 5\*5 मॉन्स्टर
-
-  ![मॉन्स्टर शिप](../solution/assets/enemyShip.png)
-
-### विकास शुरू करने के लिए अनुशंसित कदम
-
-उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं. इसमें निम्नलिखित शामिल होना चाहिए:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-विजुअल स्टूडियो कोड में इस फ़ोल्डर की कॉपी खोलें। आपके पास स्थानीय विकास पर्यावरण सेटअप होना चाहिए, अधिमानतः एनपीएम और नोड के साथ विजुअल स्टूडियो कोड स्थापित किया जाना चाहिए. यदि आपके पास अपने कंप्यूटर पर `npm` सेट नहीं है, तो [यहाँ है कि कैसे करें](https://www.npmjs.com/get-npm).
-
-`Your_work` फ़ोल्डर में नेविगेट करके अपनी परियोजना शुरू करें:
-
-```bash
-cd your-work
-npm start
-```
-
-उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http: // localhost: 5000`। एक ब्राउज़र और उस पते पर इनपुट खोलें। यह अभी एक रिक्त पृष्ठ है, लेकिन यह बदल जाएगा
-
-> नोट: अपनी स्क्रीन पर परिवर्तन देखने के लिए, अपने ब्राउज़र को ताज़ा करें.
-
-### कोड जोड़ें
-
-नीचे हल करने के लिए `your-work/app.js` के लिए आवश्यक कोड जोड़ें
-
-1. काली पृष्ठभूमि के साथ एक कैनवास **ड्रा** करे
-   > टिप: `/app.js` में उपयुक्त TODO के तहत दो लाइनें जोड़ें,`ctx` तत्व को काला बनाने के लिए और शीर्ष/बाएँ निर्देशांक 0,0 पर हो और ऊँचाई और चौड़ाई कैनवास के बराबर हो।
-2. **भार** बनावट
-   > टिप: `await loadTexture` का उपयोग करके खिलाड़ी और दुश्मन की छवियों को जोड़ें और छवि पथ में पास करें। आप उन्हें अभी तक स्क्रीन पर नहीं देखेंगे!
-3. नीचे आधे में स्क्रीन के केंद्र में नायक **ड्रा** करे
-   > टिप: स्क्रीन पर HeroImg ड्रा करने के लिए `drawImage` API का उपयोग करें, `canvas.width / 2 - 45` और `canvas.height - canvas.height / 4)` की सेटिंग;
-4. 5\*5 मॉन्स्टर **ड्रा** करे
-
-   > टिप: अब आप स्क्रीन पर दुश्मनों को आकर्षित करने के लिए कोड की टिप्पणी हटा सकते हैं। अगला, `createEnemy` फ़ंक्शन पर जाएं और इसे बनाएं.
-
-   सबसे पहले, कुछ स्थिरांक स्थापित करें:
-
-   ```javascript
-   const MONSTER_TOTAL = 5;
-   const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-   const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-   const STOP_X = START_X + MONSTER_WIDTH;
-   ```
-
-   फिर, स्क्रीन पर राक्षसों की सरणी खींचने के लिए एक लूप बनाएं:
-
-   ```javascript
-   for (let x = START_X; x < STOP_X; x += 98) {
-     for (let y = 0; y < 50 * 5; y += 50) {
-       ctx.drawImage(enemyImg, x, y);
-     }
-   }
-   ```
-
-## परिणाम
-
-समाप्त परिणाम ऐसा दिखना चाहिए:
-
-![एक नायक और 5 * 5 राक्षसों के साथ काली स्क्रीन](../partI-solution.png)
-
-## घोल
-
-कृपया पहले इसे स्वयं हल करने का प्रयास करें, लेकिन यदि आप अटक जाते हैं, तो एक [समाधान] (../solution/app.js) पर एक नज़र डालें
-
----
-
-## 🚀 चुनौती
-
-आपने 2डी-केंद्रित कैनवस एपीआई के साथ ड्राइंग के बारे में सीखा है; [वेबगियल एपीआई](https://developer.mozilla.org/docs/Web/API/WebGL_API) पर एक नज़र डालें, और एक 3D ऑब्जेक्ट खींचने का प्रयास करें.
-
-## पोस्ट-व्याख्यान प्रश्नोत्तरी
-
-[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-कैनवस एपीआई के बारे में अधिक जानकारी के लिए [इसके बारे में पढ़े](https://developer.mozilla.org/docs/Web/API/Canvas_API).
-
-## असाइनमेंट
-
-[कैनवस एपीआई के साथ खेले](assignment.hi.md)
diff --git a/6-space-game/2-drawing-to-canvas/translations/README.it.md b/6-space-game/2-drawing-to-canvas/translations/README.it.md
deleted file mode 100644
index ebbb08e0..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/README.it.md
+++ /dev/null
@@ -1,216 +0,0 @@
-# Costruire un Gioco Spaziale Parte 2: Disegnare Eroi e Mostri sull'elemento Canvas
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=it)
-
-## Canvas
-
-Canvas è un elemento HTML che per impostazione predefinita non ha contenuto; è una lavagna vuota. Si può riempirla disegnandoci sopra.
-
-✅ [Ulteriori informazioni sull'API Canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API) su MDN.
-
-Ecco come viene tipicamente dichiarato, come parte dell'elemento body della pagina:
-
-```html
-<canvas id="myCanvas" width="200" height="100"></canvas>
-```
-
-Sopra si è  impostato l'`id`entificativo, la larghezza `(width)` e l'altezza (`height`).
-
-- `id`: va impostato in modo da poter ottenere un riferimento quando si deve interagire con l'elemento.
-- `width`: questa è la larghezza dell'elemento.
-- `height`: questa è l'altezza dell'elemento.
-
-## Disegnare una geometria semplice
-
-Canvas utilizza un sistema di coordinate cartesiane per disegnare le cose. Quindi utilizza un asse x e un asse y per esprimere dove si trova qualcosa. La posizione `0,0` è la posizione in alto a sinistra e quella in basso a destra è ciò che si è determinato come larghezza (WIDTH) e altezza (HEIGHT) del canvas
-
-![la griglia del canvas](../canvas_grid.png)
-> Immagine da [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
-
-Per disegnare sull'elemento canvas si dovranno eseguire i seguenti passaggi:
-
-1. **Ottenere un riferimento** all'elemento Canvas.
-1. **Ottenere un riferimento** all'elemento Context che si trova sull'elemento canvas.
-1. **Eseguire un'operazione di disegno** utilizzando l'elemento context.
-
-Il codice per i passaggi precedenti di solito ha questo aspetto:
-
-```javascript
-// disegna un rettangolo rosso
-//1. ottiene il riferimento per il canvas
-canvas = document.getElementById("myCanvas");
-
-//2. ottiene l'oggetto context per disegnare forme basiche in 2D
-ctx = canvas.getContext("2d");
-
-//3. lo riempie con il colore rosso
-ctx.fillStyle = 'red';
-
-//4. e disegna un rettangolo con questi parametri, impostando posizione e dimensione
-ctx.fillRect(0,0, 200, 200) // x,y,larghezza, altezza
-```
-
-✅ L'API Canvas si concentra principalmente su forme 2D, ma si possono anche disegnare elementi 3D su un sito web; per questo, si potrebbe utilizzare l' [API WebGL](https://developer.mozilla.org/docs/Web/API/WebGL_API).
-
-Si può disegnare ogni sorta di cose con l'API Canvas come:
-
-- **Forme geometriche**, è già stato mostrato come disegnare un rettangolo, ma c'è molto di più che si può disegnare.
-- **Testo**, si può disegnare un testo con qualsiasi carattere e colore si desideri.
-- **Immagini**, si puòdisegnare un'immagine basandosi su una risorsa immagine come .jpg o .png, ad esempio.
-
-Si faccia una prova! Si sa come disegnare un rettangolo, si può disegnare un cerchio su una pagina? Si dia un'occhiata ad alcuni interessanti disegni su canvas su CodePen. Ecco un [esempio particolarmente degno di nota](https://codepen.io/dissimulate/pen/KrAwx).
-
-## Caricare e disegnare una risorsa immagine
-
-Si carica una risorsa immagine creando un oggetto `Image` e impostando la sua proprietà `src` . Quindi ci si mette in ascolto per l'evento di caricamento (`load`) per sapere quando è pronto per essere utilizzato. Il codice si presenta cosí:
-
-### Caricamento risorsa
-
-```javascript
-const img = new Image();
-img.src = 'path/to/my/image.png';
-img.onload = () => {
-  // immagine caricata e pronta all'uso
-}
-```
-
-### Modello di Caricamento Risorsa
-
-Si consiglia di racchiudere quanto sopra in un costrutto come questo, così è più facile da usare e si tenta di manipolarlo solo quando è completamente caricato:
-
-```javascript
-function loadAsset(path) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.src = path;
-    img.onload = () => {
-      // immagine caricata e pronta all'uso
-      resolve(img);
-    }
-  })
-}
-
-// usarlo in questo modo
-
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-}
-
-```
-
-Per disegnare risorse di gioco su uno schermo, il codice sarà simile a questo:
-
-```javascript
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-
-  canvas = document.getElementById("myCanvas");
-  ctx = canvas.getContext("2d");
-  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
-  ctx.drawImage(monsterImg, 0,0);
-}
-```
-
-## Ora è il momento di iniziare a costruire il  gioco
-
-### Cosa costruire
-
-Si costruirà una pagina web con un elemento Canvas. Si dovrebbe rendere uno schermo nero `1024 * 768`. Sono state fornite  due immagini:
-
-- Astronave dell'eroe
-
-   ![Nave dell'eroe](../solution/assets/player.png)
-
-- Mostro 5*5
-
-   ![Nave del  mostro](../solution/assets/enemyShip.png)
-
-### Passaggi consigliati per iniziare lo sviluppo
-
-Individuare i file che già sono stati creati nella sottocartella `your-work` della cartella di lavoro Dovrebbe contenere le seguenti informazioni:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-Aprire una copia di questa cartella in Visual Studio Code. È necessario disporre di una configurazione di ambiente di sviluppo locale, preferibilmente con Visual Studio Code con NPM e Node installati. Se non si è impostato `npm` sul proprio computer, [ecco come farlo](https://www.npmjs.com/get-npm).
-
-Inizializzare il proprio progetto accedendo alla cartella `your_work` :
-
-```bash
-cd your-work
-npm start
-```
-
-Quanto sopra avvierà un server HTTP sull'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo. Al momento è una pagina vuota, ma cambierà
-
-> Nota: per vedere le modifiche sullo schermo, aggiornare il contenuto del browser.
-
-### Aggiungere codice
-
-Aggiungi il codice necessario al file `your-work/app.js` per risolvere quanto segue
-
-1. **Disegnare** un oggetto canvas con sfondo nero
-   > suggerimento: aggiungere due righe sotto il TODO appropriato in `/app.js`, impostando l'elemento `ctx` in modo che sia nero e le coordinate alto/sinistra a 0,0 e l'altezza e la larghezza uguali a quelle del canvas.
-2. **Caricare** le strutture di gioco
-   > suggerimento: aggiungere le immagini del giocatore e del nemico usando `await loadTexture`, passando il percorso dell'immagine. Non saranno ancora visibili sullo schermo!
-3. **Disegnare** l'eroe al centro dello schermo nella metà inferiore
-   > suggerimento: usare l'API `drawImage` per disegnare `heroImg` sullo schermo, impostando `canvas.width / 2 - 45` e `canvas.height - canvas.height / 4` come valori di coordinate x, y
-4. **Disegnare** mostri 5*5
-   > suggerimento: ora si può rimuovere il commento dal codice per disegnare i nemici sullo schermo. Successivamente, passare alla funzione `createEnemies` e crearla.
-
-   Per prima cosa, impostare alcune costanti:
-
-   ```javascript
-   const MONSTER_TOTAL = 5;
-   const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-   const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-   const STOP_X = START_X + MONSTER_WIDTH;
-   ```
-
-   quindi, creare un ciclo per disegnare l'array di mostri sullo schermo:
-
-   ```javascript
-   for (let x = START_X; x < STOP_X; x += 98) {
-       for (let y = 0; y < 50 * 5; y += 50) {
-         ctx.drawImage(enemyImg, x, y);
-       }
-     }
-   ```
-
-## Risultato
-
-Il risultato finale dovrebbe essere così:
-
-![Schermo nero con un eroe e mostri 5*5](../partI-solution.png)
-
-## Soluzione
-
-Per favore provare a risolverlo da soli, ma se si rimane bloccati, dare un'occhiata alla [soluzione](../solution/app.js)
-
----
-
-## 🚀 Sfida
-
-Si è imparato a disegnare con l'API Canvas incentrata sul 2D; dare un'occhiata all['API WebGL API](https://developer.mozilla.org/it/docs/Web/API/WebGL_API) e provare a disegnare un oggetto 3D.
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=it)
-
-## Revisione e Auto Apprendimento
-
-Scoprire di più sull'API Canvas raccogliendo [informazioni su di essa](https://developer.mozilla.org/docs/Web/API/Canvas_API).
-
-## Compito
-
-[Giocare con l'API Canvas](assignment.it.md)
\ No newline at end of file
diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ja.md b/6-space-game/2-drawing-to-canvas/translations/README.ja.md
deleted file mode 100644
index 258e494d..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/README.ja.md
+++ /dev/null
@@ -1,216 +0,0 @@
-# スペースゲーム構築プロジェクト その 2: ヒーローとモンスターをキャンバスに描く
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=ja)
-
-## Canvas
-
-Canvas は HTML 要素で、デフォルトでは何のコンテンツもありません。何もない白紙の状態です。その上に描画することで、Canvas に追加する必要があります。
-
-✅ MDN の [Canvas API についての詳細](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API)はこちらをご覧ください。
-
-ページの本文の一部として、一般的にどのように宣言されているかをご紹介します。
-
-```html
-<canvas id="myCanvas" width="200" height="100"></canvas>
-```
-
-上では `id`, `width`, `height` を設定しています。
-
-- `id`: 設定することで、これと対話する必要があるときに参照を取得できるようになります
-- `width`: これは要素の幅です
-- `height`: これは要素の高さです
-
-## 簡単な幾何学図形の描画
-
-キャンバスは、直交座標系を使って物を描いています。したがって、何かがどこにあるかを表現するために x 軸と y 軸を使用しています。`0,0` の位置が左上の位置で、右下の位置がキャンバスの幅と高さと言ったところです。
-
-![the canvas's grid](../canvas_grid.png)
-> 画像は [MDN](https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes) より
-
-キャンバス要素に描画するには、以下の手順を踏む必要があります。
-
-1. Canvas 要素への**参照を取得します**
-1. canvas 要素の上にある Context 要素の**参照を取得します**
-1. context 要素を使用して**描画操作を行います**
-
-上記の手順のコードは、通常次のようになります。
-
-```javascript
-// 赤い四角を描きます。
-//1. キャンバスの参照を取得します
-canvas = document.getElementById("myCanvas");
-
-//2. コンテキストを 2D に設定して基本的な図形を描画します。
-ctx = canvas.getContext("2d");
-
-//3. 赤で塗りつぶします。
-ctx.fillStyle = 'red';
-
-//4. そして、これらのパラメータで矩形を描画し、位置とサイズを設定します。
-ctx.fillRect(0,0, 200, 200) // x, y, width, height
-```
-
-✅ Canvas API は主に 2D の図形に焦点を当てていますが、Web サイトに 3D の要素を描画することもできます。そのためには、[WebGL API](https://developer.mozilla.org/ja/docs/Web/API/WebGL_API) を使用するとよいでしょう。
-
-Canvas API を使っていろいろなものを描くことができます。
-
-- **幾何学的な形状**、我々はすでに長方形を描画する方法を示しましたが、あなたが描くことができるはるかに多くのものがあります
-- **テキスト**は、任意のフォントと色でテキストを描くことができます
-- **画像**では、例えば .jpg や .png のような画像アセットに基づいて画像を描くことができます
-
-✅ やってみましょう! 長方形の描き方は知っていると思いますが、ページに円を描くことはできますか? CodePen に掲載されている面白い Canvas のドローイングを見てみましょう。ここに[特に印象的な例](https://codepen.io/dissimulate/pen/KrAwx)があります。
-
-## 画像アセットの読み込みと描画
-
-画像アセットをロードするには、`Image` オブジェクトを作成して `src` プロパティを設定します。そして、`load` イベントを待ち受け、それがいつ使用可能になるかを知ることができます。コードは次のようになります。
-
-### アセットの読み込み
-
-```javascript
-const img = new Image();
-img.src = 'path/to/my/image.png';
-img.onload = () => {
-  // イメージが読み込まれて使用可能な状態になっています
-}
-```
-
-### アセットの読み込みパターン
-
-上記のようなコンストラクトで包んだ方が使いやすいですし、フルロードした時だけ操作しようとするのでおすすめです。
-
-```javascript
-function loadAsset(path) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.src = path;
-    img.onload = () => {
-      // イメージが読み込まれて使用可能な状態になっています
-      resolve(img);
-    }
-  })
-}
-
-// 使いまわします
-
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-}
-
-```
-
-ゲームアセットを画面に描画するには、以下のようなコードになります。
-
-```javascript
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-
-  canvas = document.getElementById("myCanvas");
-  ctx = canvas.getContext("2d");
-  ctx.drawImage(heroImg, canvas.width/2, canvas.height/2);
-  ctx.drawImage(monsterImg, 0, 0);
-}
-```
-
-## さあ、あなたのゲームを作り始める時が来ました。
-
-### 何を構築するか
-
-Canvas 要素を使って Web ページを作成します。これは黒い画面 `1024 * 768` をレンダリングする必要があります。画像は2枚用意しました。
-
-- Hero の宇宙船
-
-   ![Hero の宇宙船](../solution/assets/player.png)
-
-- 5*5 monster
-
-   ![Monster の宇宙船](../solution/assets/enemyShip.png)
-
-### 開発を始めるための推奨ステップ
-
-あなたのために作成されたファイルを `your-work` サブフォルダ内で探します。以下のファイルが含まれているはずです。
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-このフォルダのコピーを Visual Studio Code で開きます。ローカルの開発環境が設定されている必要があり、できれば Visual Studio Code に NPM と Node がインストールされている必要があります。もしあなたのコンピュータに `npm` がセットアップされていない場合は、[ここにその方法があります](https://www.npmjs.com/get-npm)。
-
-`your_work` フォルダに移動してプロジェクトを開始します。
-
-```bash
-cd your-work
-npm start
-```
-
-以上で、`http://localhost:5000` というアドレスに HTTP サーバが起動します。ブラウザを開いて、そのアドレスを入力してください。今は何も表示されていませんが、そのうち変わるでしょう。
-
-> 注: 画面上の変更を確認するには、ブラウザを更新してください。
-
-### コードの追加
-
-以下の問題を解決するために必要なコードを `your-work/app.js` に追加します。
-
-1. 黒い背景のキャンバスを**描画します**
-   > tip: `/app.js` の適切な TODO の下に 2 行を追加し、`ctx` 要素を黒にして上下の座標を 0,0 にし、高さと幅をキャンバスと同じにします。
-2. テクスチャを**読み込みます**
-   > tip: プレイヤーと敵の画像を追加するには `await loadTexture` を使用し、画像パスを渡してください。まだ画面には表示されていません!
-3. 下半分の画面中央にヒーローを**描画します**
-   > tip: heroImg を画面に描画するには `drawImage` API を使用し、`canvas.width / 2 - 45` と `canvas.height - canvas.height / 4)` を設定します。
-4. 5*5 のモンスターを**描画します**
-   > tip: これで、画面上に敵を描画するコードのコメントを解除することができるようになりました。次に、`createEnemies` 関数に移動して、それを構築する。
-
-   まず、いくつかの定数を設定します。
-
-    ```javascript
-    const MONSTER_TOTAL = 5;
-    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-    const STOP_X = START_X + MONSTER_WIDTH;
-    ```
-
-    そして、モンスターの配列を画面上に描画するループを作成します。
-
-    ```javascript
-    for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          ctx.drawImage(enemyImg, x, y);
-        }
-      }
-    ```
-
-## 結果
-
-仕上がりはこんな感じになるはずです。
-
-![hero と 5 * 5 モンスターで黒画面](../partI-solution.png)
-
-## Solution
-
-まずはご自身で解決してみていただきたいですが、行き詰った場合は [solution](../solution/app.js) を参考にしてみてください。
-
----
-
-## 🚀 チャレンジ
-
-2D を中心とした Canvas API での描画について学んできましたが、[WebGL API](https://developer.mozilla.org/ja/docs/Web/API/WebGL_API) を参考に、3D オブジェクトを描画してみましょう。
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=ja)
-
-## 復習と自己学習
-
-Canvas API については、[こちらを読んでいただく](https://developer.mozilla.org/ja/docs/Web/API/Canvas_API)ことで詳しく知ることができます。
-
-## 課題
-
-[Canvas API で遊ぶ](assignment.ja.md)
\ No newline at end of file
diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ko.md b/6-space-game/2-drawing-to-canvas/translations/README.ko.md
deleted file mode 100644
index 982f83d9..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/README.ko.md
+++ /dev/null
@@ -1,216 +0,0 @@
-# Space 게임 제작하기 파트 2: Canvas에 영웅과 몬스터 그리기
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=ko)
-
-## Canvas
-
-canvas는 내용이 없는 게 기본인 HTML 요소입니다; 빈 상태입니다. 그리는 작업으로 추가해야 합니다.
-
-✅ MDN애서 [Canvas API에 대하여 더](https://developer.mozilla.org/docs/Web/API/Canvas_API) 읽어보세요.
-
-보통 페이지 본문의 일부로 선언되는 방법은 다음과 같습니다:
-
-```html
-<canvas id="myCanvas" width="200" height="100"></canvas>
-```
-
-위에서 우리는 `id`, `width`와 `height`를 설정합니다.
-
-- `id`: 상호 작용을 해야 할 순간에 참조할 수 있도록 지정하세요.
-- `width`: 요소의 너비입니다.
-- `height`: 요소의 높이입니다.
-
-## 간단한 geometry 그리기
-
-캔버스는 데카르트 좌표계로 사물을 그립니다. 따라서 x-축과 y-축을 이용하여 무언가의 위치를 나타냅니다. 위치 `0,0`은 죄측 상단이며 우측 하단은 캔버스의 너비와 높이라고 말한 위치입니다.
-
-![the canvas's grid](../canvas_grid.png)
-> Image from [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
-
-캔버스 요소에 그리려면 다음 단계를 거쳐야 합니다:
-
-1. 캔버스 요소에 **참조를 가져옵니다**.
-1. 캔버스 요소에 있는 Context 요소로 **참조를 가져옵니다**.
-1. 컨텍스트 요소를 사용하여 **그리는 작업을 수행**합니다.
-
-위 단계의 코드는 일반적으로 다음과 같습니다:
-
-```javascript
-// draws a red rectangle
-//1. get the canvas reference
-canvas = document.getElementById("myCanvas");
-
-//2. set the context to 2D to draw basic shapes
-ctx = canvas.getContext("2d");
-
-//3. fill it with the color red
-ctx.fillStyle = 'red';
-
-//4. and draw a rectangle with these parameters, setting location and size
-ctx.fillRect(0,0, 200, 200) // x,y,width, height
-```
-
-✅ Canvas API는 2D 모양에 가장 초점이 맞추어져 있습니다, 그러나 웹사이트에서 3D 요소를 그려야 된다면, [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)를 사용해야 할 수도 있습니다.
-
-Canvas API를 사용하면 다음과 같은 모든 종류를 그릴 수 있습니다:
-
-- **기하학 모양**, 직사각형을 그리는 방법은 이미 보여 주었지만, 더 많이 그릴 수 있습니다.
-- **텍스트**, 원하는 폰트와 색상으로 텍스트를 그릴 수 있습니다.
-- **이미지**, 예를 들면 .jpg 혹은 .png와 같은 이미지 어셋을 바탕으로 이미지를 그릴 수 있습니다.
-
-✅ 시도 해보세요! 직사각형을 어떻게 그리는지 알고 있으면, 패이지에 원을 그릴 수 있나요? CodePen에서 흥미로운 캔버스 그림을 보세요. 여기 [particularly impressive example](https://codepen.io/dissimulate/pen/KrAwx)이 있습니다.
-
-## 이미지 어셋 불러오고 그리기
-
-`Image` 객체를 만들고 `src` 속성을 설정하여 이미지 어셋을 불러옵니다. 그런 다음 `load` 이벤트를 수신하여 사용할 준비가 되었는지 알 수 있습니다. 코드는 다음과 같습니다:
-
-### 어셋 불러오기
-
-```javascript
-const img = new Image();
-img.src = 'path/to/my/image.png';
-img.onload = () => {
-  // image loaded and ready to be used
-}
-```
-
-### Load asset 패턴
-
-위의 내용을 이 구조로 래핑하는 것이 좋습니다, 그래서 쓰기 더 쉽고 완전히 불러올 수 있을 때만 조작하려고 시도합니다:
-
-```javascript
-async function loadAsset(path) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.src = path;
-    img.onload = () => {
-      // image loaded and ready to be used
-    }
-    resolve(img);
-  })
-}
-
-// use like so
-
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-}
-
-```
-
-게임 어셋을 화면에 그리려면, 코드는 다음과 같습니다:
-
-```javascript
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-
-  canvas = document.getElementById("myCanvas");
-  ctx = canvas.getContext("2d");
-  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
-  ctx.drawImage(monsterImg, 0,0);
-}
-```
-
-## 이제 게임 제작을 시작할 시간입니다
-
-### 무엇을 만드나요
-
-Canvas 요소가 있는 웹 페이지를 만듭니다. 검은 화면 `1024 * 768`을 렌더링해야 합니다. 두 가지 이미지를 제공받았습니다:
-
-- Hero ship
-
-   ![Hero ship](../solution/assets/player.png)
-
-- 5*5 monster
-
-   ![Monster ship](../solution/assets/enemyShip.png)
-
-### 개발 시작하기 위한 권장 단계
-
-`your-work` 하위 폴더에서 생성된 파일을 찾습니다. 다음을 포함해야 합니다:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-Visual Studio Code에서 폴더의 복사본을 엽니다. 로컬 개발 환경을 설정해야 합니다, NPM과  Node가 설치되어있는 Visual Studio Code를 사용하는 것이 좋습니다. 컴퓨터에 `npm`이 설정되어 있지 않은 경우에, [방법은 다음과 같습니다](https://www.npmjs.com/get-npm).
-
-`your_work` 폴더로 이동하여 프로젝트를 시작합니다:
-
-```bash
-cd your-work
-npm start
-```
-
-위 코드는 `http://localhost:5000` 주소에서 HTTP 서버를 시작합니다. 브라우저를 열고 해당 주소를 입력하세요. 지금은 비어있는 페이지지만, 곧 바뀔 것 입니다
-
-> Note: 화면에서 변경점을 보고싶다면, 브라우저를 새로 고치세요.
-
-### 코드 추가하기
-
-필요한 코드를 `your-work/app.js`에 추가하여 아래 문제를 해결합니다
-
-1. 검은 바탕으로 canvas **그리기**
-   > tip: `/app.js`의 TODO 아래에 적절히 두 줄을 추가하며, `ctx` 요소를 검은 색으로 설정하고 상단/좌측 좌표를 0,0으로 설정하고 높이와 너비를 캔버스와 동일하게 설정합니다.
-2. 텍스쳐 **불러오기**
-   > tip: `await loadTexture`를 사용하여 플레이어와 적 이미지를 추가하고 이미지 경로를 전달합니다. 아직 화면에서 볼 수 없습니다!
-3. 화면 중앙 하단의 중간에 영웅 **그리기**
-   > tip: `drawImage` API 를 사용하여 화면에 heroImg를 그립니다, `canvas.width / 2 - 45`와 `canvas.height - canvas.height / 4)`로 설정합니다.
-4. 5*5 몬스터를 **그리기**
-   > tip: 이제 주석을 풀고 화면에 적을 그립니다. 그런 다음, `createEnemies` 함수로 가서 작성합니다.
-
-   먼저, 약간의 constants를 설정합니다:
-
-    ```javascript
-    const MONSTER_TOTAL = 5;
-    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-    const STOP_X = START_X + MONSTER_WIDTH;
-    ```
-
-    그런 다음, 화면에 몬스터 배열을 그리는 반복문을 만듭니다:
-
-    ```javascript
-    for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          ctx.drawImage(enemyImg, x, y);
-        }
-      }
-    ```
-
-## 결과
-
-완성된 결과는 아래와 같이 보이게 됩니다:
-
-![Black screen with a hero and 5*5 monsters](../partI-solution.png)
-
-## 솔루션
-
-먼저 직접 해결해보고 문제가 발생한다면, [solution](../solution/app.js)을 보세요
-
----
-
-## 🚀 도전
-
-2D-중심의 Canvas API로 그리는 방식에 대해 배웠습니다; [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)를 살펴보고, 3D 개체를 그려보세요.
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-[reading about it](https://developer.mozilla.org/docs/Web/API/Canvas_API)을 통해 Canvas API에 대해 자세히 알아보세요.
-
-## 과제
-
-[Play with the Canvas API](../assignment.md)
\ No newline at end of file
diff --git a/6-space-game/2-drawing-to-canvas/translations/README.ms.md b/6-space-game/2-drawing-to-canvas/translations/README.ms.md
deleted file mode 100644
index 2d031e1c..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/README.ms.md
+++ /dev/null
@@ -1,216 +0,0 @@
-# Bina Permainan Angkasa Bahagian 2: Menarik Wira dan Monster ke Kanvas
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31)
-
-## Kanvas
-
-Kanvas adalah elemen HTML yang secara lalai tidak mempunyai isi; itu batu tulis kosong. Anda perlu menambahkannya dengan melukisnya.
-
-✅ Baca [lebih lanjut mengenai Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API) di MDN.
-
-Inilah cara ia dinyatakan secara umum, sebagai bahagian badan halaman:
-
-```html
-<canvas id="myCanvas" width="200" height="100"></canvas>
-```
-
-Di atas kita menetapkan `id`, `lebar` dan `tinggi`.
-
-- `id`: tetapkan ini supaya anda dapat memperoleh rujukan apabila anda perlu berinteraksi dengannya.
-- `lebar`: ini adalah lebar elemen.
-- `tinggi`: ini adalah ketinggian elemen.
-
-## Melukis geometri ringkas
-
-Canvas menggunakan sistem koordinat kartesian untuk menarik sesuatu. Oleh itu ia menggunakan paksi-x dan paksi-y untuk menyatakan di mana sesuatu berada. Lokasi `0,0` adalah kedudukan kiri atas dan kanan bawah adalah yang anda katakan sebagai Luas dan TINGGI kanvas.
-
-![grid kanvas](../canvas_grid.png)
-> Imej dari [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
-
-Untuk menggunakan elemen kanvas, anda perlu melalui langkah-langkah berikut:
-
-1. **Dapatkan rujukan** ke elemen Kanvas.
-1. **Dapatkan rujukan** pada elemen Konteks yang terletak di elemen kanvas.
-1. **Lakukan operasi menggambar** menggunakan elemen konteks.
-
-Kod untuk langkah di atas biasanya kelihatan seperti:
-
-```javascript
-// melukis sebuah segi empat tepat berwarna merah
-// 1. dapatkan rujukan kanvas
-canvas = document.getElementById("myCanvas");
-
-//2. tetapkan konteks ke 2D untuk melukis bentuk asas
-ctx = canvas.getContext("2d");
-
-//3. isi dengan warna merah
-ctx.fillStyle = 'red';
-
-//4. dan lukis sebuah segi empat tepat dengan parameter ini, tetapkan lokasi dan ukuran
-ctx.fillRect(0,0, 200, 200) // x,y,luas,tinggi
-```
-
-✅ Canvas API kebanyakannya memfokuskan pada bentuk 2D, tetapi anda juga dapat menarik elemen 3D ke laman web; untuk ini, anda mungkin menggunakan [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API).
-
-Anda boleh menarik pelbagai perkara dengan Canvas API seperti:
-
-- **Bentuk geometri**, kami sudah menunjukkan cara melukis segi empat tepat, tetapi masih banyak lagi yang dapat anda lukis.
-- **Teks**, anda boleh menggambar teks dengan fon dan warna yang anda inginkan.
-- **Imej**, anda boleh melukis gambar berdasarkan aset gambar seperti .jpg atau .png misalnya.
-
-✅ Cubalah! Anda tahu melukis segi empat, bolehkah anda melukis bulatan ke halaman? Lihatlah beberapa lukisan Kanvas yang menarik di CodePen. Berikut adalah [contoh yang sangat mengagumkan](https://codepen.io/dissimulate/pen/KrAwx).
-
-## Muat dan lukiskan aset gambar
-
-Anda memuat aset gambar dengan membuat objek `Imej` dan menetapkan sifat `src`nya. Kemudian anda mendengar acara `load` untuk mengetahui kapan ia siap digunakan. Kodnya seperti ini:
-
-### Muatkan aset
-
-```javascript
-const img = new Image();
-img.src = 'path/to/my/image.png';
-img.onload = () => {
-  // gambar dimuat dan siap digunakan
-}
-```
-
-### Muatkan corak aset
-
-Sebaiknya bungkus perkara di atas dengan konstruk seperti itu, jadi lebih mudah digunakan dan anda hanya mencuba memanipulasinya apabila dimuat sepenuhnya:
-
-```javascript
-function loadAsset(path) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.src = path;
-    img.onload = () => {
-      // gambar dimuat dan siap digunakan
-      resolve(img);
-    }
-  })
-}
-
-// use like so
-
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-}
-
-```
-
-Untuk menarik aset permainan ke skrin, kod anda akan kelihatan seperti ini:
-
-```javascript
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-
-  canvas = document.getElementById("myCanvas");
-  ctx = canvas.getContext("2d");
-  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
-  ctx.drawImage(monsterImg, 0,0);
-}
-```
-
-## Kini tiba masanya untuk mula membina permainan anda
-
-### Apa yang hendak dibina
-
-Anda akan membina laman web dengan elemen Canvas. Ia harus menjadikan skrin hitam `1024*768` . Kami telah memberi anda dua gambar:
-
-- Kapal wira
-
-   ![Kapal wira](../solution/assets/player.png)
-
-- 5 * 5 raksasa
-
-   ![Monster ship](solution/assets/enemyShip.png)
-
-### Langkah-langkah yang disarankan untuk memulakan pembangunan
-
-Cari fail yang telah dibuat untuk anda dalam sub folder `your-work`. Ia harus mengandungi yang berikut:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-Buka salinan folder ini dalam Visual Studio Code. Anda perlu membuat persediaan persekitaran pembangunan tempatan, lebih baik dengan Visual Studio Code dengan NPM dan Node dipasang. Sekiranya anda tidak memasang `npm` di komputer anda, [berikut cara melakukannya](https://www.npmjs.com/get-npm).
-
-Mulakan projek anda dengan menavigasi ke folder `your_work`:
-
-```bash
-cd your-work
-npm start
-```
-
-Perkara di atas akan memulakan Pelayan HTTP pada alamat `http: // localhost: 5000`. Buka penyemak imbas dan masukkan alamat itu. Ini adalah halaman kosong sekarang, tetapi itu akan berubah
-
-> Catatan: untuk melihat perubahan pada layar anda, muat semula penyemak imbas anda.
-
-### Tambah Kod
-
-Tambahkan kod yang diperlukan ke `your-work / app.js` untuk menyelesaikan perkara di bawah
-
-1. ** Lukiskan kanvas dengan latar belakang hitam
-   > tip: tambahkan dua baris di bawah TODO yang sesuai di `/ app.js`, tetapkan elemen` ctx` menjadi hitam dan koordinat atas / kiri berada pada 0,0 dan tinggi dan lebarnya sama dengan kanvas .
-2. ** Muatkan tekstur **
-   > tip: tambahkan gambar pemain dan musuh dengan menggunakan `menunggu loadTexture` dan melewati jalan gambar. Anda belum akan melihatnya di skrin!
-3. ** Draw ** wira di tengah skrin di bahagian bawah
-   > tip: gunakan API `drawImage` untuk menarik heroImg ke skrin, tetapkan` canvas.width / 2 - 45` dan `canvas.height - canvas.height / 4)`;
-4. ** Draw ** 5 * 5 monster
-   > tip: Sekarang anda boleh melepaskan kod untuk menarik musuh di layar. Seterusnya, pergi ke fungsi `createEnemies` dan bangunkan.
-
-   Pertama, sediakan beberapa pemalar:
-
-       ```javascript
-    const MONSTER_TOTAL = 5;
-    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-    const STOP_X = START_X + MONSTER_WIDTH;
-    ```
-
-    kemudian, buat gelung untuk menarik susunan monster ke skrin:
-
-    ```javascript
-    for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          ctx.drawImage(enemyImg, x, y);
-        }
-      }
-    ```
-
-## Keputusan
-
-Hasil akhirnya akan kelihatan seperti:
-
-![Skrin hitam dengan wira dan 5 * 5 monster](../partI-solution.png)
-
-## Penyelesaian
-
-Cuba selesaikannya sendiri terlebih dahulu tetapi jika anda buntu, lihatlah [solution](../solution/app.js)
-
----
-
-## 🚀 Cabaran
-
-Anda telah belajar melukis dengan Canvas API 2D; lihatlah [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API), dan cuba lukis objek 3D.
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32)
-
-## Mengkaji & Belajar Sendiri
-
-Ketahui lebih lanjut mengenai Canvas API dengan [membaca mengenainya](https://developer.mozilla.org/docs/Web/API/Canvas_API).
-
-## Tugasan
-
-[Main dengan Canvas API](assignment.ms.md)
\ No newline at end of file
diff --git a/6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md b/6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md
deleted file mode 100644
index 416b42dc..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/README.zh-tw.md
+++ /dev/null
@@ -1,216 +0,0 @@
-# 建立太空遊戲 Part 2：在畫布上繪製英雄與怪物
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/31?loc=zh_tw)
-
-## Canvas
-
-Canvas 是 HTML 中的元素，預設上不帶有任何內容，就如一塊白板。你需要自己彩繪上去。
-
-✅ 在 MDN 上閱讀[更多關於 Canvas API](https://developer.mozilla.org/docs/Web/API/Canvas_API)。
-
-這是它典型的宣告方式，位在頁面的 body 中：
-
-```html
-<canvas id="myCanvas" width="200" height="100"></canvas>
-```
-
-上面我們設定了 `id`、`width` 和 `height`。
-
-- `id`：讓你在處理物件時，能快速地取得參考位置。
-- `width`：物件的寬度。
-- `height`：物件的高度。
-
-## 繪製簡單幾何圖樣
-
-Canvas 使用了笛卡爾座標系繪製圖案。因此有 x 軸與 y 軸來表達物件的所在地點。座標點 `0,0` 位在畫布的左上方；而右下方則是我們定義畫布的寬度與高度。
-
-![畫布網格](../canvas_grid.png)
-> 圖片出自於 [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
-
-要在 Canvas 物件上繪製圖案，你需要執行下列步驟：
-
-1. **取得 Canvas 物件的參考位置**。
-1. **取得 Context 物件的參考位置**，定義在 Canvas 元素中。
-1. 使用 context 元素**進行繪製動作**。
-
-以程式碼表達上述步驟會呈現成：
-
-```javascript
-// 繪製紅色矩形
-//1. 取得 canvas 參考點
-canvas = document.getElementById("myCanvas");
-
-//2. 設定 context 為 2D 以繪製基本圖形
-ctx = canvas.getContext("2d");
-
-//3. 填入色彩紅色
-ctx.fillStyle = 'red';
-
-//4. 利用這些參數決定位置與大小，繪製矩形
-ctx.fillRect(0,0, 200, 200) // x,y,width, height
-```
-
-✅ Canvas API 主要是處理 2D 圖形，但你也可以在網頁中繪製 3D 圖形。要完成這個需求，你可以使用 [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)。
-
-你可以使用 Canvas API 繪製出這些物件：
-
-- **幾何圖形**，我們已經展示繪製矩形的流程，還有許多種形狀可以使用。
-- **文字**，你可以繪製文字，決定你想要的字型及顏色。
-- **圖片**，你可以依據圖片檔繪製圖案，舉例來說像是 .jpg 或是 .png 檔。
-
-✅ 試試看！你知道如何繪製矩形，你能在頁面中繪製圓形嗎？看看在 CodePen 上有趣的 Canvas 塗鴉。這邊有一樣[特別令人驚豔的例子](https://codepen.io/dissimulate/pen/KrAwx)。
-
-## 讀取並繪製圖片檔
-
-建立 `Image` 物件並設定其 `src` 屬性，你可以讀取圖片檔。接著監聽 `load` 事件，了解圖片何時已經可以被使用。程式碼如下：
-
-### 讀取檔案
-
-```javascript
-const img = new Image();
-img.src = 'path/to/my/image.png';
-img.onload = () => {
-  // 圖片載入完成，準備使用
-}
-```
-
-### 讀取檔案之模式
-
-建議上可以將上述程式打包起來，建立成完整的結構，判斷圖片是否載入完成，也方便未來的使用：
-
-```javascript
-function loadAsset(path) {
-  return new Promise((resolve) => {
-    const img = new Image();
-    img.src = path;
-    img.onload = () => {
-      // 圖片載入完成，準備使用
-      resolve(img);
-    }
-  })
-}
-
-// 實際用法
-
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-}
-
-```
-
-要在畫面上繪製遊戲物件，你的程式碼會如下所示：
-
-```javascript
-async function run() {
-  const heroImg = await loadAsset('hero.png')
-  const monsterImg = await loadAsset('monster.png')
-
-  canvas = document.getElementById("myCanvas");
-  ctx = canvas.getContext("2d");
-  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
-  ctx.drawImage(monsterImg, 0,0);
-}
-```
-
-## 是時候來建立你的遊戲了
-
-### 建立目標
-
-你需要建立包含 Canvas 元素的網頁。它會是 `1024*768` 的黑色畫面。我們提供了兩張圖片：
-
-- 英雄艦艇
-
-   ![英雄艦艇](../solution/assets/player.png)
-
-- 5*5 隻怪物
-
-   ![敵軍艦艇](../solution/assets/enemyShip.png)
-
-### 開始開發的建議步驟
-
-在你的 `your-work` 子資料夾中，確認檔案是否建立完成。它應該包括：
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-在 Visual Studio Code 中開啟這個資料夾的副本。你需要建立本地端的開發環境，建議為 Visual Studio Code 與安裝好的 NPM 與 Node。如果你的電腦中還沒設定好 `npm`，[這是它的設定流程](https://www.npmjs.com/get-npm)。
-
-前往 `your_work` 資料夾，開始你的專案：
-
-```bash
-cd your-work
-npm start
-```
-
-這會啟動 HTTP 伺服器，網址為 `http://localhost:5000`。開啟瀏覽器並輸入該網址。目前會是空白的頁面，但不久後就會不一樣了。
-
-> 筆記：想觀察畫面的改變，請重新整理你的頁面。
-
-### 加入程式碼
-
-在 `your-work/app.js` 中加入程式碼以解決下列目標：
-
-1. 在 Canvas **繪製**黑色背景
-   > 要點：在 `/app.js` 中，加入兩行程式在 TODO 下方：設定 `ctx` 元素為黑色，左上方座標點為 0,0 且大小與 Canvas 相等。
-2. **讀取**材質
-   > 要點：使用 `await loadTexture` 導入圖片位置以新增玩家與敵軍圖片。你還沒辦法在畫面上看到它們！
-3. 在畫面的正下方**繪製**英雄
-   > 要點：使用 `drawImage` API 來繪製 heroImg 到畫面上，設定位置為  `canvas.width / 2 - 45` 與 `canvas.height - canvas.height / 4)`。
-4. **繪製** 5*5 隻怪物
-   > 要點：現在移除註解，在畫面上繪製敵人。接著編輯函式 `createEnemies`。
-
-    首先，設定幾個常數：
-
-    ```javascript
-    const MONSTER_TOTAL = 5;
-    const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-    const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-    const STOP_X = START_X + MONSTER_WIDTH;
-    ```
-
-    接著，利用迴圈在畫面上繪製矩陣型態的怪物：
-
-    ```javascript
-    for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          ctx.drawImage(enemyImg, x, y);
-        }
-      }
-    ```
-
-## 結果
-
-完成後的成果應該如下所示：
-
-![黑畫面上有英雄與 5*5 隻怪物](../partI-solution.png)
-
-## 解答
-
-試著自己先完成程式碼，但如果你遭遇到困難，請參考[解答](../solution/app.js)。
-
----
-
-## 🚀 挑戰
-
-你已經學會繪製 2D 圖形的 Canvas API。看看 [WebGL API](https://developer.mozilla.org/docs/Web/API/WebGL_API)，試著繪製 3D 物件。
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/32?loc=zh_tw)
-
-## 複習與自學
-
-[閱讀更多資料](https://developer.mozilla.org/docs/Web/API/Canvas_API)，學習更多有關 Canvas API 的用法。
-
-## 作業
-
-[把玩 Canvas API](assignment.zh-tw.md)
diff --git a/6-space-game/2-drawing-to-canvas/translations/assignment.es.md b/6-space-game/2-drawing-to-canvas/translations/assignment.es.md
deleted file mode 100644
index 2252de16..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/assignment.es.md
+++ /dev/null
@@ -1,11 +0,0 @@
- Juega con la API Canvas
-
-## Instrucciones
-
-Elija un elemento de la API de Canvas y cree algo interesante a su alrededor. ¿Puedes crear una pequeña galaxia de estrellas repetidas? ¿Puedes crear una textura interesante de líneas de colores? Puede buscar inspiración en CodePen (pero no copiar)
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | -------------------------------------------------- ------- | ----------------------------------- | --------------------- |
-| | El código se envía mostrando una textura o forma interesante | Se envía el código, pero no se ejecuta | No se envía el código |
diff --git a/6-space-game/2-drawing-to-canvas/translations/assignment.fr.md b/6-space-game/2-drawing-to-canvas/translations/assignment.fr.md
deleted file mode 100644
index 74d7d079..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/assignment.fr.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Jouer avec l'API Canvas
-
-## Instructions
-
-Choisissez un élément de l'API Canvas et créez quelque chose d'intéressant autour de lui. Pouvez-vous créer une petite galaxie d'étoiles répétées ? Pouvez-vous créer une texture intéressante de lignes colorées ? Vous pouvez vous inspirer de CodePen (mais ne copiez pas).
-
-## Rubrique
-
-| Critères | Exemplaire                                                 | Adéquat                            | Besoin d'amélioration     |
-| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
-|          | Le code est soumis montrant une texture ou une forme intéressante | Le code est soumis, mais ne s'exécute pas | Le code n'est pas soumis |
\ No newline at end of file
diff --git a/6-space-game/2-drawing-to-canvas/translations/assignment.hi.md b/6-space-game/2-drawing-to-canvas/translations/assignment.hi.md
deleted file mode 100644
index 96f08390..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/assignment.hi.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# कैनवस एपीआई के साथ खेले
-
-## अनुदेश
-
-कैनवास एपीआई का एक तत्व चुनें और इसके चारों ओर कुछ दिलचस्प बनाएं. क्या आप बार-बार तारों की एक छोटी आकाशगंगा बना सकते हैं? क्या आप रंगीन लाइनों की एक दिलचस्प बनावट बना सकते हैं? आप प्रेरणा के लिए कोडपेन को देख सकते हैं (लेकिन कॉपी न करें)
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                                   | पर्याप्त                                  | सुधार की जरूरत                |
-| ------ | ------------------------------------------------------------- | ----------------------------------------- | ----------------------------- |
-|        | एक दिलचस्प बनावट या आकार दिखाते हुए कोड प्रस्तुत किया जाता है | कोड सबमिट किया गया है, लेकिन नहीं चलता है | कोड प्रस्तुत नहीं किया गया है |
diff --git a/6-space-game/2-drawing-to-canvas/translations/assignment.it.md b/6-space-game/2-drawing-to-canvas/translations/assignment.it.md
deleted file mode 100644
index 47dc1657..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/assignment.it.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Giocare con l'API Canvas
-
-## Istruzioni
-
-Sceglire un elemento dell'API Canvas e creare qualcosa di interessante attorno ad esso. Si è in grado di creare una piccola galassia di stelle ripetute? Si  riesce a creare una interessante struttura di linee colorate? Si puoi guardare CodePen per l'ispirazione (ma non copiare)
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
-|          | Il codice viene inviato mostrando una struttura o una forma interessante | Il codice viene inviato, ma non viene eseguito | Il codice non è stato inviato |
\ No newline at end of file
diff --git a/6-space-game/2-drawing-to-canvas/translations/assignment.ja.md b/6-space-game/2-drawing-to-canvas/translations/assignment.ja.md
deleted file mode 100644
index dc89523d..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/assignment.ja.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Canvas API で遊ぶ
-
-## 説明書
-
-Canvas API の要素を 1 つ選んで、その周りに何か面白いものを作りましょう。星が繰り返される小さな銀河を作ることができますか? 色のついた線で面白いテクスチャを作ることができますか? インスピレーションを得るために CodePen を見ることができます (ただし、コピーはしないでください)。
-
-## ルーブリック
-
-| 基準 | 模範的な例                                                 | 適切な                            | 改善が必要     |
-| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
-|          | 興味深い質感や形状を示すコードが提出されている | コードは送信されたが実行されない | コードが提出されていない |
\ No newline at end of file
diff --git a/6-space-game/2-drawing-to-canvas/translations/assignment.ko.md b/6-space-game/2-drawing-to-canvas/translations/assignment.ko.md
deleted file mode 100644
index fffee43c..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/assignment.ko.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Canvas API 사용하기
-
-## 설명
-
-Canvas API에서 한 요소를 선택하고 그 주위에 재미있는 요소를 추가해 봅시다. 수많은 별이 모인 은하수를 만들수 있나요? 색깔이 있는 선으로 특별한 질감을 만들 수 있나요? 영감이 필요한다면 CodePen을 참고해보세요. (복사하지는 마세요.)
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 특별한 질감 또는 모양을 보여주는 코드를 제출한 경우 | 코드가 제출되었지만 실행되지 않는 경우 | 코드가 제출되지 않은 경우
diff --git a/6-space-game/2-drawing-to-canvas/translations/assignment.ms.md b/6-space-game/2-drawing-to-canvas/translations/assignment.ms.md
deleted file mode 100644
index 884a1373..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/assignment.ms.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Main dengan Canvas API
-
-## Arahan
-
-Pilih satu elemen API Canvas dan buat sesuatu yang menarik di sekitarnya. Bolehkah anda membuat galaksi kecil bintang berulang? Bolehkah anda membuat tekstur garis berwarna yang menarik? Anda boleh melihat CodePen untuk mendapatkan inspirasi (tetapi jangan menyalin)
-
-## Rubrik
-
-| Kriteria | Contoh                                                 | Mencukupi                            | Usaha Lagi     |
-| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
-|          | Kod dihantar menunjukkan tekstur atau bentuk yang menarik | Kod dihantar, tetapi tidak dijalankan | Kod tidak dihantar |
\ No newline at end of file
diff --git a/6-space-game/2-drawing-to-canvas/translations/assignment.nl.md b/6-space-game/2-drawing-to-canvas/translations/assignment.nl.md
deleted file mode 100644
index 3d9d9e0a..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/assignment.nl.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Speel met de Canvas API
-
-## Instructies
-
-Kies een element van de Canvas API en maak er iets interessants omheen. Kunt u een kleine melkweg van herhaalde sterren creëren? Kunt u een interessante textuur van gekleurde lijnen maken? U kunt CodePen bekijken voor inspiratie (maar kopieer niet)
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                                 | Voldoende                            | Moet worden verbeterd     |
-| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
-|          | Code wordt ingediend met een interessante textuur of vorm| Code is ingediend, maar wordt niet uitgevoerd | Code is niet verzonden |
\ No newline at end of file
diff --git a/6-space-game/2-drawing-to-canvas/translations/assignment.zh-tw.md b/6-space-game/2-drawing-to-canvas/translations/assignment.zh-tw.md
deleted file mode 100644
index 28b5308f..00000000
--- a/6-space-game/2-drawing-to-canvas/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 把玩 Canvas API
-
-## 簡介
-
-挑選一款 Canvas API 上的元素，為它建立一些有趣的設定。你能利用重複的星星建立銀河嗎？你能建立有特殊材質的線條嗎？你可以觀察 CodePen 上的範本激發想法，但請不要抄襲。
-
-## 學習評量
-
-| 作業內容 | 優良                       | 普通                         | 待改進       |
-| -------- | -------------------------- | ---------------------------- | ------------ |
-|          | 程式碼呈現有趣的材質與圖案 | 有提交程式碼，但無法正常執行 | 未提交程式碼 |
diff --git a/6-space-game/3-moving-elements-around/translations/README.es.md b/6-space-game/3-moving-elements-around/translations/README.es.md
deleted file mode 100644
index 07574816..00000000
--- a/6-space-game/3-moving-elements-around/translations/README.es.md
+++ /dev/null
@@ -1,385 +0,0 @@
-# Build a Space Game Part III: Adding Motion
-
-![video](video-url)
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
-
- ¡Los juegos no son muy divertidos hasta que tienes extraterrestres corriendo por la pantalla! En este juego haremos uso de dos tipos de movimientos:
-
-- **Keyboard/Mouse movement** (Movimiento del teclado / mouse): cuando el usuario interactúa con el teclado o el mouse para mover un objeto en la pantalla.
-- **Game induced movement** (Movimiento inducido por el juego): cuando el juego mueve un objeto con un intervalo de tiempo determinado.
-
-Entonces, ¿cómo movemos las cosas en una pantalla? Se trata de coordenadas cartesianas: cambiamos la ubicación (x, y) del objeto y luego redibujamos la pantalla.
-
-Normalmente, necesita los siguientes pasos para lograr *movimiento* en una pantalla:
-
-1. **Set a new location** (Establecer una nueva ubicación) para un objeto; esto es necesario para percibir que el objeto se ha movido.
-2. **Clear the screen** (Limpiar la pantalla), la pantalla debe limpiarse entre sorteos. Podemos borrarlo dibujando un rectángulo que llenamos con un color de fondo.
-3. **Redraw object** (Redibujar objeto) en una nueva ubicación. Al hacer esto, finalmente logramos mover el objeto de un lugar a otro.
-
-  Así es como puede verse en el código:
-
-```javascript
-//establecer la ubicación del héroe
-hero.x += 5;
-// limpia el rectángulo que alberga al héroe
-ctx.clearRect(0, 0, canvas.width, canvas.height);
-// vuelve a dibujar el fondo del juego y el héroe
-ctx.fillRect(0, 0, canvas.width, canvas.height)
-ctx.fillStyle = "black";
-ctx.drawImage(heroImg, hero.x, hero.y);
-```
-
-✅ ¿Puedes pensar en una razón por la que volver a dibujar a tu héroe muchos fotogramas por segundo podría generar costos de rendimiento? Lea acerca de [alternativas a este patrón](https://www.html5rocks.com/en/tutorials/canvas/performance/).
-
-## Manejar eventos de teclado
-
-Maneja eventos adjuntando eventos específicos al código. Los eventos del teclado se activan en toda la ventana, mientras que los eventos del mouse como un `click` se pueden conectar a hacer clic en un elemento específico. Usaremos eventos de teclado a lo largo de este proyecto.
-
-Para manejar un evento, debe usar el método `addEventListener()` de la ventana y proporcionarle dos parámetros de entrada. El primer parámetro es el nombre del evento, por ejemplo, `keyup`. El segundo parámetro es la función que debe invocarse como resultado del evento que tiene lugar.
-
-He aquí un ejemplo:
-
-
-```javascript
-window.addEventListener('keyup', (evt) => {
-  // `evt.key` = representación de cadena de la clave
-  if (evt.key === 'ArrowUp') {
-    // hacer algo
-  }
-})
-```
-
-Para los eventos clave, hay dos propiedades en el evento que puede usar para ver qué tecla se presionó:
-
-- `key`, esta es una representación de cadena de la tecla presionada, por ejemplo `ArrowUp`
-- `keyCode`, esta es una representación numérica, por ejemplo, `37`, corresponde a `ArrowLeft`.
-
-✅ La manipulación de eventos clave es útil fuera del desarrollo del juego. ¿Qué otros usos se le ocurren para esta técnica?
-
-### Teclas especiales: una advertencia
-
-Hay algunas teclas * especiales * que afectan la ventana. Eso significa que si estás escuchando un evento `keyup` y usas estas teclas especiales para mover a tu héroe, también realizará un desplazamiento horizontal. Por esa razón, es posible que desee *apagar* este comportamiento integrado del navegador a medida que desarrolla su juego. Necesitas un código como este:
-
-```javascript
-let onKeyDown = function (e) {
-  console.log(e.keyCode);
-  switch (e.keyCode) {
-    case 37:
-    case 39:
-    case 38:
-    case 40: // Teclas de flecha
-    case 32:
-      e.preventDefault();
-      break; // Space
-    default:
-      break; // no bloquee otras llaves
-  }
-};
-
-window.addEventListener('keydown', onKeyDown);
-```
-
-El código anterior asegurará que las teclas de flecha y la tecla de espacio tengan su comportamiento *predeterminado* apagado. El mecanismo de *apagado* ocurre cuando llamamos a `e.preventDefault()`.
-
-## Movimiento inducido por el juego
-
-Podemos hacer que las cosas se muevan por sí mismas usando temporizadores como la función `setTimeout()` o `setInterval()` que actualizan la ubicación del objeto en cada tic o intervalo de tiempo. Esto es lo que puede parecer:
-
-
-```javascript
-let id = setInterval(() => {
-  //mover al enemigo en el eje y
-  enemy.y += 10;
-})
-```
-
-## El bucle del juego
-
-El bucle de juego es un concepto que es esencialmente una función que se invoca a intervalos regulares. Se llama bucle de juego, ya que todo lo que debería ser visible para el usuario se incluye en el bucle. El bucle del juego hace uso de todos los objetos del juego que son parte del juego, dibujándolos todos a menos que por alguna razón ya no deban ser parte del juego. Por ejemplo, si un objeto es un enemigo que fue golpeado por un láser y explota, ya no forma parte del ciclo del juego actual (aprenderás más sobre esto en lecciones posteriores).
-
-Así es como suele verse un bucle de juego, expresado en código:
-
-```javascript
-let gameLoopId = setInterval(() =>
-  function gameLoop() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    drawHero();
-    drawEnemies();
-    drawStaticObjects();
-}, 200);
-```
-
-El ciclo anterior se invoca cada `200` milisegundos para volver a dibujar el lienzo. Tiene la capacidad de elegir el mejor intervalo que tenga sentido para su juego.
-
-## Continuando con el juego espacial
-
-Tomarás el código existente y lo extenderás. Empiece con el código que completó durante la parte I o use el código en [Part II-starter](your-work).
-
-- **Moving the hero** (Mover al héroe): agregará código para asegurarse de que puede mover al héroe con las teclas de flecha.
-- **Move enemies** (Mover enemigos): también necesitarás agregar código para asegurarte de que los enemigos se muevan de arriba hacia abajo a un ritmo determinado.
-
-## Pasos recomendados
-
-Busque los archivos que se han creado para usted en la subcarpeta `your-work`. Debe contener lo siguiente:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-Comienzas tu proyecto en la carpeta `your_work` escribiendo:
-
-```bash
-cd your-work
-npm start
-```
-
-Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. Abra un navegador e ingrese esa dirección, ahora mismo debería representar al héroe y a todos los enemigos; nada se mueve, ¡todavía!
-
-### Agregar código
-
-1. **Agrega objetos dedicados** para `hero` y `enemy` y `game object`, deben tener propiedades `x` e `y`. (Recuerde la parte sobre [Herencia o composición](../README.md)).
-
-    * SUGERENCIA* `game object` debe ser el que tenga `x` e `y` y la capacidad de dibujarse a sí mismo en un lienzo.
-
-    > consejo: comience agregando una nueva clase GameObject con su constructor delineado como se muestra a continuación, y luego dibuje en el lienzo:
-
-  
-    ```javascript
-        
-    class GameObject {
-      constructor(x, y) {
-        this.x = x;
-        this.y = y;
-        this.dead = false;
-        this.type = "";
-        this.width = 0;
-        this.height = 0;
-        this.img = undefined;
-      }
-    
-      draw(ctx) {
-        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
-      }
-    }
-    ```
-
-    Ahora, amplíe este GameObject para crear el héroe y el enemigo.
-    
-    ```javascript
-    class Hero extends GameObject {
-      constructor(x, y) {
-        ...it needs an x, y, type, and speed
-      }
-    }
-    ```
-
-    ```javascript
-    class Enemy extends GameObject {
-      constructor(x, y) {
-        super(x, y);
-        (this.width = 98), (this.height = 50);
-        this.type = "Enemy";
-        let id = setInterval(() => {
-          if (this.y < canvas.height - this.height) {
-            this.y += 5;
-          } else {
-            console.log('Stopped at', this.y)
-            clearInterval(id);
-          }
-        }, 300)
-      }
-    }
-    ```
-
-2. **Agregue controladores de eventos clave** para manejar la navegación de teclas (mueva el héroe hacia arriba / abajo a la izquierda / derecha)
-
-    * RECUERDE* es un sistema cartesiano, la parte superior izquierda es `0,0`. También recuerde agregar código para detener *comportamiento predeterminado*.
-
-    > consejo: cree su función onKeyDown y adjúntela a la ventana:
-
-   ```javascript
-    let onKeyDown = function (e) {
-	      console.log(e.keyCode);
-	        ...//agregue el código de la lección anterior para detener el comportamiento predeterminado
-	      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-   ```
-    
-   Compruebe la consola de su navegador en este punto y observe cómo se registran las pulsaciones de teclas.
-
-3. **Implemente** el [subpatrón Pub](../README.md), esto mantendrá su código limpio mientras sigue las partes restantes.
-
-    Para hacer esta última parte, puede:
-
-    1. **Agregue un detector de eventos** en la ventana:
-
-       ```javascript
-        window.addEventListener("keyup", (evt) => {
-          if (evt.key === "ArrowUp") {
-            eventEmitter.emit(Messages.KEY_EVENT_UP);
-          } else if (evt.key === "ArrowDown") {
-            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-          } else if (evt.key === "ArrowLeft") {
-            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-          } else if (evt.key === "ArrowRight") {
-            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-          }
-        });
-        ```
-
-    1. **Cree una clase EventEmitter** para publicar y suscribirse a mensajes:
-
-        ```javascript
-        class EventEmitter {
-          constructor() {
-            this.listeners = {};
-          }
-        
-          on(message, listener) {
-            if (!this.listeners[message]) {
-              this.listeners[message] = [];
-            }
-            this.listeners[message].push(listener);
-          }
-        
-          emit(message, payload = null) {
-            if (this.listeners[message]) {
-              this.listeners[message].forEach((l) => l(message, payload));
-            }
-          }
-        }
-        ```
-
-    1. **Agregue constantes** y configure el EventEmitter:
-
-        ```javascript
-        const Messages = {
-          KEY_EVENT_UP: "KEY_EVENT_UP",
-          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
-          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
-          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
-        };
-        
-        let heroImg, 
-            enemyImg, 
-            laserImg,
-            canvas, ctx, 
-            gameObjects = [], 
-            hero, 
-            eventEmitter = new EventEmitter();
-        ```
-
-    1. **Inicializa el juego**
-
-    ```javascript
-    function initGame() {
-      gameObjects = [];
-      createEnemies();
-      createHero();
-    
-      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
-        hero.y -=5 ;
-      })
-    
-      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
-        hero.y += 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
-        hero.x -= 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
-        hero.x += 5;
-      });
-    }
-    ```
-
-1. **Configura el bucle del juego**
-
-    Refactorice la función window.onload para inicializar el juego y configurar un bucle de juego en un buen intervalo. También agregará un rayo láser:
-
-
-    ```javascript
-    window.onload = async () => {
-      canvas = document.getElementById("canvas");
-      ctx = canvas.getContext("2d");
-      heroImg = await loadTexture("assets/player.png");
-      enemyImg = await loadTexture("assets/enemyShip.png");
-      laserImg = await loadTexture("assets/laserRed.png");
-    
-      initGame();
-      let gameLoopId = setInterval(() => {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        drawGameObjects(ctx);
-      }, 100)
-      
-    };
-    ```
-
-5. **Agregar código** para mover enemigos en un cierto intervalo
-
-     Refactorice la función `createEnemies()` para crear los enemigos y empujarlos a la nueva clase gameObjects:
-
-
-    ```javascript
-    function createEnemies() {
-      const MONSTER_TOTAL = 5;
-      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-      const STOP_X = START_X + MONSTER_WIDTH;
-    
-      for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          const enemy = new Enemy(x, y);
-          enemy.img = enemyImg;
-          gameObjects.push(enemy);
-        }
-      }
-    }
-    ```
-    
-    y agregue una función `createHero()` para hacer un proceso similar para el héroe.
-    
-    ```javascript
-    function createHero() {
-      hero = new Hero(
-        canvas.width / 2 - 45,
-        canvas.height - canvas.height / 4
-      );
-      hero.img = heroImg;
-      gameObjects.push(hero);
-    }
-    ```
-
-    y finalmente, agregue una función `drawGameObjects()` para comenzar el dibujo:
-
-    ```javascript
-    function drawGameObjects(ctx) {
-      gameObjects.forEach(go => go.draw(ctx));
-    }
-    ```
-
-    ¡Tus enemigos deberían comenzar a avanzar en tu nave espacial heroica!
-
-🚀 Desafío: como puede ver, su código puede convertirse en 'código espagueti' cuando comienza a agregar funciones, variables y clases. ¿Cómo puede organizar mejor su código para que sea más legible? Esboce un sistema para organizar su código, incluso si todavía reside en un archivo.
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
-
-## Revisión y autoestudio
-
-Mientras escribimos nuestro juego sin usar marcos, existen muchos marcos de lienzo basados en JavaScript para el desarrollo de juegos. Tómate un tiempo para hacer algo [leer sobre estos](https://github.com/collections/javascript-game-engines).
-
-**Tarea**: [Comenta tu código](assignment.es.md)
diff --git a/6-space-game/3-moving-elements-around/translations/README.fr.md b/6-space-game/3-moving-elements-around/translations/README.fr.md
deleted file mode 100644
index bdcfd5ff..00000000
--- a/6-space-game/3-moving-elements-around/translations/README.fr.md
+++ /dev/null
@@ -1,388 +0,0 @@
-# Construisez un jeu spatial, partie 3: Ajout de mouvement
-
-## Quiz préalable
-
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=fr)
-
-Les jeux ne sont pas très amusants tant que vous n'avez pas des extraterrestres qui courent à l'écran! Dans ce jeu, nous utiliserons deux types de mouvements:
-
-- **Mouvement clavier/souris**: lorsque l'utilisateur interagit avec le clavier ou la souris pour déplacer un objet à l'écran.
-- **Mouvement induit par le jeu**: lorsque le jeu déplace un objet avec un certain intervalle de temps.
-
-Alors, comment déplacer les choses sur un écran? Tout est question de coordonnées cartésiennes: nous changeons l'emplacement (x,y) de l'objet puis redessinons l'écran.
-
-Généralement, vous devez suivre les étapes suivantes pour accomplir un *mouvement* sur un écran:
-
-1. **Définir un nouvel emplacement** pour un objet; cela est nécessaire pour percevoir l'objet comme ayant bougé.
-2. **Effacer l'écran**, l'écran doit être dégagé entre les tirages. Nous pouvons l'effacer en dessinant un rectangle que nous remplissons avec une couleur de fond.
-3. **Redessiner l'objet** au nouvel emplacement. En faisant cela, nous accomplissons finalement le déplacement de l'objet d'un endroit à l'autre.
-
- Voici à quoi cela peut ressembler dans le code:
-
-```javascript
-//définir l'emplacement du héros
-hero.x += 5;
-// effacer le rectangle qui accueille le héros
-ctx.clearRect(0, 0, canvas.width, canvas.height);
-// redessiner le fond du jeu et le héros
-ctx.fillRect(0, 0, canvas.width, canvas.height)
-ctx.fillStyle = "black";
-ctx.drawImage(heroImg, hero.x, hero.y);
-```
-
-✅ Pouvez-vous penser à une raison pour laquelle redessiner votre héros plusieurs images par seconde pourrait entraîner des coûts de performance? Apprenez en plus sur les [alternatives à ce modèle](https://www.html5rocks.com/en/tutorials/canvas/performance/).
-
-## Gérer les événements du clavier
-
-Vous gérez les événements en attachant des événements spécifiques au code. Les événements de clavier sont déclenchés sur toute la fenêtre tandis que les événements de souris comme un `clic` peuvent être liés au clic sur un élément spécifique. Nous utiliserons des événements de clavier tout au long de ce projet. 
-
-Pour gérer un événement, vous devez utiliser la méthode `addEventListener()` de la fenêtre et lui fournir deux paramètres d'entrée. Le premier paramètre est le nom de l'événement, par exemple `keyup`. Le deuxième paramètre est la fonction qui doit être invoquée à la suite de l'événement en cours.  
-
-Voici un exemple:
-
-```javascript
-window.addEventListener('keyup', (evt) => {
-  // `evt.key` = représentation sous forme de chaîne de la clé
-  if (evt.key === 'ArrowUp') {
-    // faire quelque chose
-  }
-})
-```
-
-Pour les événements clés, il existe deux propriétés sur l'événement que vous pouvez utiliser pour voir quelle touche a été pressée:
-
-- `key`, il s'agit d'une représentation sous forme de chaîne de la touche enfoncée, par exemple `ArrowUp`
-- `keyCode`, c'est une représentation numérique, par exemple `37`, correspond à `ArrowLeft`.
-
-✅ La manipulation des événements clés est utile en dehors du développement de jeux. A quelles autres utilisations pensez-vous pour cette technique?
-
-### Touches spéciales: une mise en garde
-
-Il y a des touches *spéciales* qui affectent la fenêtre. Cela signifie que si vous écoutez un événement `keyup` et que vous utilisez ces touches spéciales pour déplacer votre héros, il effectuera également un défilement horizontal. Pour cette raison, vous voudrez peut-être *désactiver* ce comportement de navigateur intégré lorsque vous créez votre jeu. Vous avez besoin d'un code comme celui-ci:
-
-```javascript
-let onKeyDown = function (e) {
-  console.log(e.keyCode);
-  switch (e.keyCode) {
-    case 37:
-    case 39:
-    case 38:
-    case 40: // Touches directionnelles
-    case 32:
-      e.preventDefault();
-      break; // Espace
-    default:
-      break; // ne pas bloquer d'autres clés
-  }
-};
-
-window.addEventListener('keydown', onKeyDown);
-```
-
-Le code ci-dessus garantira que les touches fléchées et la touche espace ont leur comportement *par défaut* désactivé. Le mécanisme *shut-off* se produit lorsque nous appelons `e.preventDefault()`.
-
-## Mouvement induit par le jeu
-
-Nous pouvons faire bouger les choses d'elles-mêmes en utilisant des minuteries telles que la fonction `setTimeout()` ou `setInterval()` qui met à jour l'emplacement de l'objet à chaque tick ou intervalle de temps. Voici à quoi cela peut ressembler:
-
-```javascript
-let id = setInterval(() => {
-  //déplacer l'ennemi sur l'axe y
-  enemy.y += 10;
-})
-```
-
-## La boucle du jeu
-
-La boucle de jeu est un concept qui est essentiellement une fonction invoquée à intervalles réguliers. C'est ce qu'on appelle la boucle de jeu car tout ce qui doit être visible pour l'utilisateur est attiré dans la boucle. La boucle de jeu utilise tous les objets de jeu qui font partie du jeu, les dessinant tous à moins que, pour une raison quelconque, ils ne fassent plus partie du jeu. Par exemple, si un objet est un ennemi qui a été touché par un laser et qui explose, il ne fait plus partie de la boucle de jeu en cours (vous en apprendrez plus à ce sujet dans les leçons suivantes).
-
-Voici à quoi ressemble généralement une boucle de jeu, exprimée en code:
-
-```javascript
-let gameLoopId = setInterval(() =>
-  function gameLoop() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    drawHero();
-    drawEnemies();
-    drawStaticObjects();
-}, 200);
-```
-
-La boucle ci-dessus est invoquée toutes les `200` millisecondes pour redessiner le canevas. Vous avez la possibilité de choisir le meilleur intervalle qui a du sens pour votre jeu.
-
-## Continuer le jeu spatial
-
-Vous allez prendre le code existant et l'étendre. Soit commencez par le code que vous avez complété au cours de la partie I, soit utilisez le code de la [Partie II - starter](../your-work). 
-
-- **Déplacer le héros**: vous ajouterez du code pour vous assurer de pouvoir déplacer le héros à l'aide des touches fléchées.
-- **Déplacer les ennemis**: vous devrez également ajouter du code pour vous assurer que les ennemis se déplacent de haut en bas à un rythme donné.
-
-## Étapes recommandées
-
-Localisez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit contenir les éléments suivants:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.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 démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et entrez cette adresse, pour le moment, cela devrait rendre le héros et tous les ennemis; rien ne bouge - pour l'instant!
-
-### Ajouter un code
-
-1. **Ajouter des objets dédiés** pour `hero` et `enemy` et `game object`, ils doivent avoir les propriétés `x` et `y`. (Rappelez-vous la partie sur l'[héritage ou la composition](../../translations/README.fr.md)). 
-
-   *CONSEIL* `game object` (l'objet de jeu) doit être celui avec `x` et `y` et la possibilité de se dessiner sur un canevas.
-
-   >astuce: commencez par ajouter une nouvelle classe GameObject avec son constructeur délimité comme ci-dessous, puis dessinez-la sur le canevas:
-  
-    ```javascript
-        
-    class GameObject {
-      constructor(x, y) {
-        this.x = x;
-        this.y = y;
-        this.dead = false;
-        this.type = "";
-        this.width = 0;
-        this.height = 0;
-        this.img = undefined;
-      }
-    
-      draw(ctx) {
-        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
-      }
-    }
-    ```
-
-    Maintenant, étendez ce GameObject pour créer le héros et l'ennemi.
-    
-    ```javascript
-    class Hero extends GameObject {
-      constructor(x, y) {
-        ...it needs an x, y, type, and speed
-      }
-    }
-    ```
-
-    ```javascript
-    class Enemy extends GameObject {
-      constructor(x, y) {
-        super(x, y);
-        (this.width = 98), (this.height = 50);
-        this.type = "Enemy";
-        let id = setInterval(() => {
-          if (this.y < canvas.height - this.height) {
-            this.y += 5;
-          } else {
-            console.log('Stopped at', this.y)
-            clearInterval(id);
-          }
-        }, 300)
-      }
-    }
-    ```
-
-2. **Ajoutez des gestionnaires d'événements de touche** pour gérer la navigation des touches (déplacez le héros vers le haut/bas vers la gauche/la droite)
-
-   *RAPPELEZ-VOUS* que c'est un système cartésien, le haut à gauche est `0,0`. N'oubliez pas également d'ajouter du code pour arrêter *le comportement par défaut*
-
-   >astuce: créez votre fonction onKeyDown et attachez-la à la fenêtre:
-
-   ```javascript
-    let onKeyDown = function (e) {
-	      console.log(e.keyCode);
-	        ...add the code from the lesson above to stop default behavior
-	      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-   ```
-    
-   Vérifiez la console de votre navigateur à ce stade et regardez les frappes enregistrées. 
-
-3. **Implémentez** le [modèle Pub Sub](../../translations/README.fr.md), cela gardera votre code propre pendant que vous suivez les parties restantes.
-
-   Pour faire cette dernière partie, vous pouvez:
-
-   1. **Ajouter un écouteur d'événement** sur la fenêtre:
-
-       ```javascript
-        window.addEventListener("keyup", (evt) => {
-          if (evt.key === "ArrowUp") {
-            eventEmitter.emit(Messages.KEY_EVENT_UP);
-          } else if (evt.key === "ArrowDown") {
-            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-          } else if (evt.key === "ArrowLeft") {
-            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-          } else if (evt.key === "ArrowRight") {
-            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-          }
-        });
-        ```
-
-    1. **Créez une classe EventEmitter** pour publier et vous abonner aux messages:
-
-        ```javascript
-        class EventEmitter {
-          constructor() {
-            this.listeners = {};
-          }
-        
-          on(message, listener) {
-            if (!this.listeners[message]) {
-              this.listeners[message] = [];
-            }
-            this.listeners[message].push(listener);
-          }
-        
-          emit(message, payload = null) {
-            if (this.listeners[message]) {
-              this.listeners[message].forEach((l) => l(message, payload));
-            }
-          }
-        }
-        ```
-
-    1. **Ajoutez des constantes** et configurez l'EventEmitter:
-
-        ```javascript
-        const Messages = {
-          KEY_EVENT_UP: "KEY_EVENT_UP",
-          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
-          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
-          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
-        };
-        
-        let heroImg, 
-            enemyImg, 
-            laserImg,
-            canvas, ctx, 
-            gameObjects = [], 
-            hero, 
-            eventEmitter = new EventEmitter();
-        ```
-
-    1. **Initialiser le jeu**
-
-    ```javascript
-    function initGame() {
-      gameObjects = [];
-      createEnemies();
-      createHero();
-    
-      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
-        hero.y -= 5;
-      })
-    
-      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
-        hero.y += 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
-        hero.x -= 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
-        hero.x += 5;
-      });
-    }
-    ```
-
-1. **Configurer la boucle de jeu**
-
-   Refactorisez la fonction window.onload pour initialiser le jeu et mettre en place une boucle de jeu sur un bon intervalle. Vous ajouterez également un faisceau laser:
-
-    ```javascript
-    window.onload = async () => {
-      canvas = document.getElementById("canvas");
-      ctx = canvas.getContext("2d");
-      heroImg = await loadTexture("assets/player.png");
-      enemyImg = await loadTexture("assets/enemyShip.png");
-      laserImg = await loadTexture("assets/laserRed.png");
-    
-      initGame();
-      let gameLoopId = setInterval(() => {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        drawGameObjects(ctx);
-      }, 100)
-      
-    };
-    ```
-
-5. **Ajoutez du code** pour déplacer les ennemis à un certain intervalle
-
-    Refactoriser la fonction `createEnemies()` pour créer les ennemis et les pousser dans la nouvelle classe gameObjects:
-
-    ```javascript
-    function createEnemies() {
-      const MONSTER_TOTAL = 5;
-      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-      const STOP_X = START_X + MONSTER_WIDTH;
-    
-      for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          const enemy = new Enemy(x, y);
-          enemy.img = enemyImg;
-          gameObjects.push(enemy);
-        }
-      }
-    }
-    ```
-    
-    et ajoutez une fonction `createHero()` pour faire un processus similaire pour le héros.
-    
-    ```javascript
-    function createHero() {
-      hero = new Hero(
-        canvas.width / 2 - 45,
-        canvas.height - canvas.height / 4
-      );
-      hero.img = heroImg;
-      gameObjects.push(hero);
-    }
-    ```
-
-    et enfin, ajoutez une fonction `drawGameObjects()` pour démarrer le dessin:
-
-    ```javascript
-    function drawGameObjects(ctx) {
-      gameObjects.forEach(go => go.draw(ctx));
-    }
-    ```
-
-    Vos ennemis devraient commencer à avancer sur votre vaisseau spatial héros!
-
----
-
-## 🚀 Challenge
-
-Comme vous pouvez le constater, votre code peut se transformer en 'code spaghetti' lorsque vous commencez à ajouter des fonctions, des variables et des classes. Comment pouvez-vous mieux organiser votre code pour qu'il soit plus lisible? Esquissez un système pour organiser votre code, même s'il réside toujours dans un seul fichier.
-
-## Quiz de validation des connaissances
-
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=fr)
-
-## Révision et étude personnelle
-
-Pendant que nous écrivons notre jeu sans utiliser de frameworks, il existe de nombreux frameworks de canevas basés sur JavaScript pour le développement de jeux. Prenez le temps de faire quelques [lectures à ce sujet](https://github.com/collections/javascript-game-engines).
-
-## Affectation
-
-[Commentez votre code](assignment.fr.md)
diff --git a/6-space-game/3-moving-elements-around/translations/README.hi.md b/6-space-game/3-moving-elements-around/translations/README.hi.md
deleted file mode 100644
index b193f583..00000000
--- a/6-space-game/3-moving-elements-around/translations/README.hi.md
+++ /dev/null
@@ -1,387 +0,0 @@
-# एक अंतरिक्ष खेल भाग 3 बनाएँ: गति जोड़ना
-
-## प्री-लेक्चर क्विज
-
-[प्री-लेक्चर क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=hi)
-
-जब तक आप परदे पर चारों ओर एलियंस चल रहे हैं तब तक गेम्स बहुत मज़ेदार नहीं हैं! इस खेल में, हम दो प्रकार के आंदोलनों का उपयोग करेंगे:
-
-- **Keyboard/Mouse movement**: जब उपयोगकर्ता स्क्रीन पर किसी ऑब्जेक्ट को स्थानांतरित करने के लिए कीबोर्ड या माउस के साथ इंटरैक्ट करता है.
-- **Game induced movement**: जब खेल एक निश्चित समय अंतराल के साथ एक वस्तु को स्थानांतरित करता है.
-
-तो हम चीजों को स्क्रीन पर कैसे स्थानांतरित करते हैं? यह सब कार्तीय निर्देशांक के बारे में है:हम ऑब्जेक्ट का स्थान (x, y) बदलते हैं और फिर स्क्रीन को फिर से खोलते हैं।
-
-आमतौर पर आपको स्क्रीन पर _गति_ को पूरा करने के लिए निम्न चरणों की आवश्यकता होती है:
-
-1. एक वस्तु के लिए **एक नया स्थान निर्धारित करें**; यह वस्तु को स्थानांतरित करने के रूप में अनुभव करने के लिए आवश्यक है.
-2. **स्क्रीन को साफ़ करें**, ड्रॉ के बीच स्क्रीन को साफ़ करना होगा. We can clear it by drawing a rectangle that we fill with a background color.
-3. नए स्थान पर **Redraw ऑब्जेक्ट**। ऐसा करने से हम अंत में वस्तु को एक स्थान से दूसरे स्थान तक ले जाते हैं.
-
-यहाँ यह कोड में कैसा दिख सकता है:
-
-```javascript
-//set the hero's location
-hero.x += 5;
-// clear the rectangle that hosts the hero
-ctx.clearRect(0, 0, canvas.width, canvas.height);
-// redraw the game background and hero
-ctx.fillRect(0, 0, canvas.width, canvas.height);
-ctx.fillStyle = "black";
-ctx.drawImage(heroImg, hero.x, hero.y);
-```
-
-✅ क्या आप एक कारण के बारे में सोच सकते हैं कि अपने नायक को प्रति सेकंड कई फ़्रेमों को फिर से तैयार करने से प्रदर्शन की लागत बढ़ सकती है? [इस पैटर्न के विकल्प](https://www.html5rocks.com/en/tutorials/canvas/performance/) के बारे में पढ़ें.
-
-## कीबोर्ड घटनाओं को संभालें
-
-आप विशिष्ट घटनाओं को कोड में संलग्न करके घटनाओं को संभालते हैं. कीबोर्ड की घटनाओं को पूरी विंडो पर ट्रिगर किया जाता है जबकि एक `click` जैसे माउस इवेंट को एक विशिष्ट तत्व को क्लिक करने के लिए जोड़ा जा सकता है. हम इस पूरे प्रोजेक्ट में कीबोर्ड इवेंट का उपयोग करेंगे.
-
-एक घटना को संभालने के लिए आपको विंडो के `addEventListener()` विधि का उपयोग करना होगा और इसे दो इनपुट मापदंडों के साथ प्रदान करना होगा. पहला पैरामीटर घटना का नाम है, उदाहरण के लिए `keyup`. दूसरा पैरामीटर वह फ़ंक्शन होता है, जिसे ईवेंट होने के परिणामस्वरूप लागू किया जाना चाहिए.
-
-यहाँ एक उदाहरण है:
-
-```javascript
-window.addEventListener("keyup", (evt) => {
-  // `evt.key` = string representation of the key
-  if (evt.key === "ArrowUp") {
-    // do something
-  }
-});
-```
-
-प्रमुख घटनाओं के लिए, इस घटना पर दो गुण हैं जिन्हें आप यह देखने के लिए उपयोग कर सकते हैं कि किस कुंजी को दबाया गया था:
-
-- `key`, यह दबाए गए कुंजी का एक स्ट्रिंग प्रतिनिधित्व है, उदाहरण के लिए` ArrowUp`
-- `KeyCode`, यह एक संख्या प्रतिनिधित्व है, उदाहरण के लिए` 37`, `ArrowLeft` से मेल खाती है.
-
-✅ की इवेंट हेरफेर खेल के विकास के बाहर उपयोगी है। इस तकनीक के लिए आप और क्या उपयोग कर सकते हैं?
-
-### विशेष कुंजी: एक चेतावनी
-
-कुछ _special_ किइस हैं जो विंडोज को प्रभावित करती हैं. इसका मतलब है कि यदि आप एक `keyup` घटना सुन रहे हैं और आप अपने नायक को स्थानांतरित करने के लिए इन विशेष किइस का उपयोग करते हैं तो यह क्षैतिज स्क्रॉलिंग भी करेगा.इस कारण से आप अपने गेम को बनाते समय इस बिल्ट-इन ब्राउज़र व्यवहार को बंद कर सकते हैं। आपको इस तरह कोड की आवश्यकता है:
-
-```javascript
-let onKeyDown = function (e) {
-  console.log(e.keyCode);
-  switch (e.keyCode) {
-    case 37:
-    case 39:
-    case 38:
-    case 40: // Arrow keys
-    case 32:
-      e.preventDefault();
-      break; // Space
-    default:
-      break; // do not block other keys
-  }
-};
-
-window.addEventListener("keydown", onKeyDown);
-```
-
-उपरोक्त कोड यह सुनिश्चित करेगा कि एरो किइस और स्पेस की का डिफ़ॉल्ट व्यवहार बंद हो। शट-ऑफ तंत्र तब होता है जब हम `e.preventDefault ()` कहते हैं.
-
-## खेल प्रेरित चाल
-
-हम टाइम सेट का उपयोग करके चीजों को खुद से आगे बढ़ा सकते हैं जैसे `setTimeout()` या `setInterval()` फ़ंक्शन जो प्रत्येक टिक पर वस्तु के स्थान को अपडेट करते हैं, या समय अंतराल।. यहां ऐसा है जो दिख सकता है:
-
-```javascript
-let id = setInterval(() => {
-  //move the enemy on the y axis
-  enemy.y += 10;
-});
-```
-
-## गेम लूप
-
-गेम लूप एक अवधारणा है जो अनिवार्य रूप से एक फ़ंक्शन है जिसे नियमित अंतराल पर लागू किया जाता है. इसे गेम लूप कहा जाता है क्योंकि उपयोगकर्ता को दिखाई देने वाली सभी चीज़ों को लूप में खींचा जाना चाहिए. गेम लूप उन सभी गेम ऑब्जेक्ट्स का उपयोग करता है जो गेम का हिस्सा हैं, उन सभी को ड्रॉ करना जब तक कि किसी कारण से गेम का हिस्सा नहीं होना चाहिए. उदाहरण के लिए यदि कोई वस्तु एक शत्रु है जो लेजर से टकराती है और उड़ती है, तो यह वर्तमान गेम लूप का हिस्सा नहीं है (बाद के पाठों में आप इस पर और अधिक सीखेंगे).
-
-यहाँ एक गेम लूप आमतौर पर कैसा दिख सकता है, कोड में व्यक्त किया गया है:
-
-```javascript
-let gameLoopId = setInterval(
-  () =>
-    function gameLoop() {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-      ctx.fillStyle = "black";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      drawHero();
-      drawEnemies();
-      drawStaticObjects();
-    },
-  200
-);
-```
-
-उपरोक्त लूप को कैनवास को फिर से बनाने के लिए प्रत्येक `200` मिलीसेकेंड पर लगाया जाता है. आपके पास सबसे अच्छा अंतराल चुनने की क्षमता है जो आपके खेल के लिए समझ में आता है.
-
-## अंतरिक्ष खेल को जारी रखना
-
-आप मौजूदा कोड लेंगे और उसे विस्तारित करेंगे। या तो उस कोड से शुरू करें जो आपने भाग I के दौरान पूरा किया था या [भाग II- स्टार्टर](../your-work) में कोड का उपयोग करें.
-
-- **Moving the hero**: आप यह सुनिश्चित करने के लिए कोड जोड़ेंगे कि आप तीर किइस का उपयोग करके नायक को स्थानांतरित कर सकते हैं.
-- **Move enemies**: दुश्मनों को किसी दिए गए दर पर ऊपर से नीचे ले जाने के लिए आपको कोड जोड़ने की भी आवश्यकता होगी.
-
-## अनुशंसित कदम
-
-उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं. इसमें निम्नलिखित शामिल होना चाहिए:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-आप टाइप करके अपना प्रोजेक्ट `your_work` फ़ोल्डर शुरू करें:
-
-```bash
-cd your-work
-npm start
-```
-
-उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http: // localhost: 5000`. एक ब्राउज़र खोलें और उस पते को इनपुट करें, अभी उसे नायक और सभी दुश्मनों को प्रस्तुत करना चाहिए; कुछ भी नहीं चल रहा है - फिर भी!
-
-### कोड जोड़ें
-
-1. `हीरो` और `दुश्मन` और `गेम ऑब्जेक्ट` के लिए **समर्पित ऑब्जेक्ट्स जोड़ें**, उनके पास` x` और `y` गुण होने चाहिए ([इन्हेरिटेंस या कम्पोजीशन](../../README.md) पर भाग याद रखें ).
-
-   _संकेत_ `गेम ऑब्जेक्ट` `x` और `y` के साथ एक होना चाहिए और एक कैनवास पर खुद को आकर्षित करने की क्षमता होनी चाहिए
-
-   > टिप: नीचे के रूप में देलिनेटेड कंस्ट्रक्टर के साथ एक नया ग़मओब्जेक्ट वर्ग जोड़कर शुरू करें, और फिर इसे कैनवास पर ड्रा करें:
-
-   ```javascript
-   class GameObject {
-     constructor(x, y) {
-       this.x = x;
-       this.y = y;
-       this.dead = false;
-       this.type = "";
-       this.width = 0;
-       this.height = 0;
-       this.img = undefined;
-     }
-
-     draw(ctx) {
-       ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
-     }
-   }
-   ```
-
-अब, इस गेमओब्जेक्ट को हीरो और दुश्मन बनाने के लिए विस्तारित करें.
-
-```javascript
-class Hero extends GameObject {
-  constructor(x, y) {
-    ...it needs an x, y, type, and speed
-  }
-}
-```
-
-```javascript
-class Enemy extends GameObject {
-  constructor(x, y) {
-    super(x, y);
-    (this.width = 98), (this.height = 50);
-    this.type = "Enemy";
-    let id = setInterval(() => {
-      if (this.y < canvas.height - this.height) {
-        this.y += 5;
-      } else {
-        console.log("Stopped at", this.y);
-        clearInterval(id);
-      }
-    }, 300);
-  }
-}
-```
-
-2. **की ईवेंट हैंडलर जोड़ें** की नेविगेशन को संभालने के लिए (बाएं / दाएं हीरो ऊपर ले जाएं)
-
-   _REMEMBER_ यह कार्टेशियन सिस्टम है, टॉप-लेफ्ट `0,0` है. यह भी याद रखें कि _डिफ़ॉल्ट व्यवहार_ को रोकने के लिए कोड जोड़ना
-
-   > टिप: अपने onKeyDown फ़ंक्शन को बनाएं और इसे विंडो में अटैच करें:
-
-   ```javascript
-    let onKeyDown = function (e) {
-         console.log(e.keyCode);
-           ...add the code from the lesson above to stop default behavior
-         }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-   ```
-
-   इस बिंदु पर अपने ब्राउज़र कंसोल की जाँच करें, और लॉग किए जा रहे कीस्ट्रोक्स को देखें.
-
-3. \*\* लागू करें [[पब उप पैटर्न](../../ README.md), शेष भागों का पालन करते हुए यह आपके कोड को साफ रखेगा.
-
-   यह अंतिम भाग करने के लिए, आप कर सकते हैं:
-
-   1. विंडो पर **एक घटना श्रोता जोड़ें**:
-
-      ```javascript
-      window.addEventListener("keyup", (evt) => {
-        if (evt.key === "ArrowUp") {
-          eventEmitter.emit(Messages.KEY_EVENT_UP);
-        } else if (evt.key === "ArrowDown") {
-          eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-        } else if (evt.key === "ArrowLeft") {
-          eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-        } else if (evt.key === "ArrowRight") {
-          eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-        }
-      });
-      ```
-
-   2. संदेशों को प्रकाशित करने और सदस्यता लेने के लिए **एक EventEmitter वर्ग बनाएं**:
-
-      ```javascript
-      class EventEmitter {
-        constructor() {
-          this.listeners = {};
-        }
-
-        on(message, listener) {
-          if (!this.listeners[message]) {
-            this.listeners[message] = [];
-          }
-          this.listeners[message].push(listener);
-        }
-
-        emit(message, payload = null) {
-          if (this.listeners[message]) {
-            this.listeners[message].forEach((l) => l(message, payload));
-          }
-        }
-      }
-      ```
-
-   3. **स्थिरांक जोड़ें** और EventEmitter सेट करें:
-
-      ```javascript
-      const Messages = {
-        KEY_EVENT_UP: "KEY_EVENT_UP",
-        KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
-        KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
-        KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
-      };
-
-      let heroImg,
-        enemyImg,
-        laserImg,
-        canvas,
-        ctx,
-        gameObjects = [],
-        hero,
-        eventEmitter = new EventEmitter();
-      ```
-
-   4. **खेल को प्रारंभ करें**
-
-   ```javascript
-   function initGame() {
-     gameObjects = [];
-     createEnemies();
-     createHero();
-
-     eventEmitter.on(Messages.KEY_EVENT_UP, () => {
-       hero.y -= 5;
-     });
-
-     eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
-       hero.y += 5;
-     });
-
-     eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
-       hero.x -= 5;
-     });
-
-     eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
-       hero.x += 5;
-     });
-   }
-   ```
-
-4. **गेम लूप सेट करें**
-
-   गेम को प्रारंभ करने के लिए window.onload फ़ंक्शन को रिफ्लेक्टर करें और एक अच्छे अंतराल पर गेम लूप सेट करें। आप एक लेजर बीम भी जोड़ जोड़ सकते है:
-
-   ```javascript
-   window.onload = async () => {
-     canvas = document.getElementById("canvas");
-     ctx = canvas.getContext("2d");
-     heroImg = await loadTexture("assets/player.png");
-     enemyImg = await loadTexture("assets/enemyShip.png");
-     laserImg = await loadTexture("assets/laserRed.png");
-
-     initGame();
-     let gameLoopId = setInterval(() => {
-       ctx.clearRect(0, 0, canvas.width, canvas.height);
-       ctx.fillStyle = "black";
-       ctx.fillRect(0, 0, canvas.width, canvas.height);
-       drawGameObjects(ctx);
-     }, 100);
-   };
-   ```
-
-5. एक निश्चित अंतराल पर दुश्मनों को स्थानांतरित करने के लिए **कोड जोड़ें**
-
-   शत्रुओं को बनाने और उन्हें नए गेमऑब्जेक्ट्स क्लास में धकेलने के लिए `createEnemies()` फ़ंक्शन को रिफलेक्‍टर करें:
-
-   ```javascript
-   function createEnemies() {
-     const MONSTER_TOTAL = 5;
-     const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-     const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-     const STOP_X = START_X + MONSTER_WIDTH;
-
-     for (let x = START_X; x < STOP_X; x += 98) {
-       for (let y = 0; y < 50 * 5; y += 50) {
-         const enemy = new Enemy(x, y);
-         enemy.img = enemyImg;
-         gameObjects.push(enemy);
-       }
-     }
-   }
-   ```
-
-   और हीरो के लिए एक समान प्रक्रिया करने के लिए एक `createHero()` फ़ंक्शन जोड़ें.
-
-   ```javascript
-   function createHero() {
-     hero = new Hero(canvas.width / 2 - 45, canvas.height - canvas.height / 4);
-     hero.img = heroImg;
-     gameObjects.push(hero);
-   }
-   ```
-
-   और अंत में, ड्राइंग शुरू करने के लिए एक `drawGameObjects()` फ़ंक्शन जोड़ें:
-
-   ```javascript
-   function drawGameObjects(ctx) {
-     gameObjects.forEach((go) => go.draw(ctx));
-   }
-   ```
-
-   अपने दुश्मनों को अपने नायक अंतरिक्ष यान पर आगे बढ़ना शुरू कर देना चाहिए!
-
----
-
-## 🚀 चुनौती
-
-जैसा कि आप देख सकते हैं, जब आप फ़ंक्शन और चर और कक्षाएं जोड़ना शुरू करते हैं तो आपका कोड 'स्पेगेटी कोड' में बदल सकता है. आप अपने कोड को बेहतर तरीके से कैसे व्यवस्थित कर सकते हैं ताकि यह अधिक पठनीय हो? अपने कोड को व्यवस्थित करने के लिए एक सिस्टम स्केच करें, भले ही वह अभी भी एक फ़ाइल में रहता हो.
-
-## व्याख्यान के बाद की क्विज
-
-[व्याख्यान के बाद की क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-जब हम फ्रेमवर्क का उपयोग किए बिना अपना गेम लिख रहे हैं, तो गेम के विकास के लिए कई जावास्क्रिप्ट-आधारित कैनवास फ्रेमवर्क हैं. कुछ करने के लिए कुछ समय ले लो [इन के बारे में पढ़ना](https://github.com/collections/javascript-game-engines).
-
-## असाइनमेंट
-
-[अपना कोड कमेंट करें](assignment.hi.md)
diff --git a/6-space-game/3-moving-elements-around/translations/README.it.md b/6-space-game/3-moving-elements-around/translations/README.it.md
deleted file mode 100644
index b9c4bd61..00000000
--- a/6-space-game/3-moving-elements-around/translations/README.it.md
+++ /dev/null
@@ -1,388 +0,0 @@
-# Costruire un Gioco Spaziale parte 3: Aggiungere il Movimento
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=it)
-
-I giochi non sono molto divertenti finché non si hanno alieni che scorazzano per lo schermo! In questo gioco, si utilizzeranno due tipi di movimenti:
-
-- **Movimento tastiera/mouse**: quando l'utente interagisce con la tastiera o il mouse per spostare un oggetto sullo schermo.
-- **Movimento indotto dal gioco**: quando il gioco sposta un oggetto con un certo intervallo di tempo.
-
-Quindi come si spostano le cose su uno schermo? Dipende tutto dalle coordinate cartesiane: si cambia la posizione (x, y) di un oggetto, poi si ridisegna lo schermo.
-
-In genere sono necessari i seguenti passaggi per eseguire il *movimento* su uno schermo:
-
-1. **Impostare una nuova posizione** per un oggetto; questo è necessario per percepire l'oggetto come se si fosse spostato.
-2. **Cancellare lo schermo, lo** schermo deve essere cancellato tra un disegno e un altro. Si può cancellarlo disegnando un rettangolo che viene riempito con un colore di sfondo.
-3. **Ridisegnare l'oggetto** in una nuova posizione. In questo modo si può finalmente spostare l'oggetto da una posizione all'altra.
-
-Ecco come può apparire nel codice:
-
-```javascript
-//imposta la posizione dell'eroe
-hero.x += 5;
-// pulisce il rettangolo che ospita l'eroe
-ctx.clearRect(0, 0, canvas.width, canvas.height);
-// ridisegna lo sfondo del gioco e l'eroe
-ctx.fillRect(0, 0, canvas.width, canvas.height)
-ctx.fillStyle = "black";
-ctx.drawImage(heroImg, hero.x, hero.y);
-```
-
-✅ Si riesce a pensare a un motivo per cui ridisegnare il proprio eroe con molti fotogrammi al secondo potrebbe far aumentare i costi delle prestazioni? Leggere le [alternative a questo modello](https://www.html5rocks.com/en/tutorials/canvas/performance/).
-
-## Gestire eventi da tastiera
-
-Gli eventi si gestiscono allegando eventi specifici al codice. Gli eventi della tastiera vengono attivati sull'intera finestra mentre gli eventi del mouse come un `clic` possono essere collegati al clic su un elemento specifico. Si useranno gli eventi della tastiera durante questo progetto.
-
-Per gestire un evento è necessario utilizzare il metodo `addEventListener()` dell'oggetto window e fornirgli due parametri di input. Il primo parametro è il nome dell'evento, ad esempio `keyup`. Il secondo parametro è la funzione che dovrebbe essere invocata come risultato dell'evento in corso.
-
-Ecco un esempio:
-
-```javascript
-window.addEventListener('keyup', (evt) => {
-  // `evt.key` = rappresentazione stringa del tasto
-  if (evt.key === 'ArrowUp') {
-    // fa qualcosa
-  }
-})
-```
-
-Per gli eventi da tastiera ci sono due proprietà sull'evento che si possono usare usare per vedere quale tasto è stato premuto:
-
-- `key`, questa è una rappresentazione di stringa del tasto premuto, ad esempio `ArrowUp`
-- `keyCode`, questa è una rappresentazione numerica, ad esempio `37`, corrisponde a `ArrowLeft`.
-
-✅ La manipolazione degli eventi da tastiera è utile al di fuori dello sviluppo del gioco. Quali altri usi possono venire in mente per questa tecnica?
-
-### Tasti speciali: un avvertimento
-
-Ci sono alcuni tasti *speciali* che influenzano la finestra. Ciò significa che se si sta ascoltando un evento `keyup` e si usano questi tasti speciali per muovere l'eroe, verrà eseguito anche lo scorrimento orizzontale. Per questo motivo si potrebbe  voler *disattivare* questo comportamento del browser integrato mentre si sviluppa il gioco. Serve un codice come questo:
-
-```javascript
-let onKeyDown = function (e) {
-  console.log(e.keyCode);
-  switch (e.keyCode) {
-    case 37:
-    case 39:
-    case 38:
-    case 40: // Tasti freccia
-    case 32:
-      e.preventDefault();
-      break; // Barra spazio
-    default:
-      break; // non bloccare altri tasti
-  }
-};
-
-window.addEventListener('keydown', onKeyDown);
-```
-
-Il codice precedente assicurerà che i tasti freccia e la barra spaziatrice abbiano il loro comportamento *predefinito* disattivato. Il meccanismo *di disattivazione* si verifica quando si chiama `e.preventDefault()`.
-
-## Movimento indotto dal gioco
-
-E' possibile far muovere le cose da sole utilizzando timer come la funzione `setTimeout()` o `setInterval()` che aggiornano la posizione dell'oggetto a ogni tick o intervallo di tempo. Ecco come può apparire:
-
-```javascript
-let id = setInterval(() => {
-  //sposta il nemico sull'asse y
-  enemy.y += 10;
-})
-```
-
-## Il ciclo di gioco
-
-Il ciclo di gioco è un concetto che è essenzialmente una funzione che viene invocata a intervalli regolari. Si chiama ciclo di gioco poiché tutto ciò che dovrebbe essere visibile all'utente viene disegnato nel ciclo. Il ciclo di gioco utilizza tutti gli oggetti che fanno parte del gioco, disegnandoli tutti a meno che per qualche motivo non debbano più far parte del gioco. Ad esempio, se un oggetto è un nemico che è stato colpito da un laser ed esplode, non fa più parte del ciclo di gioco corrente (maggiori informazioni nelle lezioni successive).
-
-Ecco come può apparire tipicamente un ciclo di gioco, espresso in codice:
-
-```javascript
-let gameLoopId = setInterval(() =>
-  function gameLoop() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    drawHero();
-    drawEnemies();
-    drawStaticObjects();
-}, 200);
-```
-
-Il ciclo precedente viene richiamato ogni `200` millisecondi per ridisegnare il canvas. Si ha la possibilità di scegliere l'intervallo migliore che abbia senso per il proprio gioco.
-
-## Continuare il Gioco Spaziale
-
-Si prenderà il codice esistente per estenderlo. Si inizia con il codice che si è completato durante la parte I o si usa il codice nella [parte II-starter](../your-work).
-
-- **Muovere l'eroe**: si aggiungerà un codice per assicurarsi di poter muovere l'eroe usando i tasti freccia.
-- **Muovere i nemici**: si dovrà anche aggiungere del codice per assicurarsi che i nemici si muovano dall'alto verso il basso a una determinata velocità.
-
-## Passaggi consigliati
-
-Individuare i file che già sono stati creati nella sottocartella `your-work` Dovrebbe contenere quanto segue:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-Si fa partire il progetto nella cartella `your_work` digitando:
-
-```bash
-cd your-work
-npm start
-```
-
-Quanto sopra avvierà un server HTTP all'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo, in questo momento dovrebbe rendere l'eroe e tutti i nemici; niente si muove - ancora!
-
-### Aggiungere codice
-
-1. **Aggiungere oggetti dedicati** per `eroe`, `nemico` e `oggetto di gioco`, dovrebbero avere proprietà `x` e `y` . (Ricorda la parte su [ereditarietà o composizione](../../1-introduction/translations/README.it.md).
-
-   *SUGGERIMENTO* l'`oggetto di gioco` (GameObject) dovrebbe essere quello con `x` e `y` e la capacità di disegnare se stesso sul canvas.
-
-   > suggerimento: iniziare aggiungendo una nuova classe GameObject con il suo costruttore delineato come di seguito, quindi disegnarlo sul canvas:
-
-   ```javascript
-
-   class GameObject {
-     constructor(x, y) {
-       this.x = x;
-       this.y = y;
-       this.dead = false;
-       this.type = "";
-       this.width = 0;
-       this.height = 0;
-       this.img = undefined;
-     }
-
-     draw(ctx) {
-       ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
-     }
-   }
-   ```
-
-   Ora, si estende questo GameObject per creare eroe (classe Hero) e nemico (clsse Enemy).
-
-   ```javascript
-   class Hero extends GameObject {
-     constructor(x, y) {
-       ...servono x, y, tipo, e velocità
-     }
-   }
-   ```
-
-   ```javascript
-   class Enemy extends GameObject {
-     constructor(x, y) {
-       super(x, y);
-       (this.width = 98), (this.height = 50);
-       this.type = "Enemy";
-       let id = setInterval(() => {
-         if (this.y < canvas.height - this.height) {
-           this.y += 5;
-         } else {
-           console.log('Stopped at', this.y)
-           clearInterval(id);
-         }
-       }, 300)
-     }
-   }
-   ```
-
-2. **Aggiungere gestori di eventi di tastiera** per gestire la navigazione con i tasti (spostare l'eroe su/giù, sinistra/destra)
-
-   *RICORDARE* che è un sistema cartesiano, la posizione in alto a sinistra è `0,0`. Ricordare anche di aggiungere il codice per interrompere *il comportamento predefinito*
-
-   > suggerimento: creare la funzione onKeyDown e attaccarla all'oggetto window:
-
-   ```javascript
-    let onKeyDown = function (e) {
-   	      console.log(e.keyCode);
-   	        ...aggiungere il codice dalla lezione più sopra per fermare il comportamento predefinito
-   	      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-   ```
-
-   Controllare la console del browser a questo punto e osservare le sequenze di tasti che vengono registrate.
-
-3. **Implementare** il [modello Pub/Sub](../../1-introduction/translations/README.it.md), questo manterrà il codice pulito mentre si seguono le parti rimanenti.
-
-   Per fare quest'ultima parte, si può:
-
-   1. **Aggiungere un event listener** all'oggetto window:
-
-      ```javascript
-       window.addEventListener("keyup", (evt) => {
-         if (evt.key === "ArrowUp") {
-           eventEmitter.emit(Messages.KEY_EVENT_UP);
-         } else if (evt.key === "ArrowDown") {
-           eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-         } else if (evt.key === "ArrowLeft") {
-           eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-         } else if (evt.key === "ArrowRight") {
-           eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-         }
-       });
-      ```
-
-   1. **Creare una classe EventEmitter** per pubblicare e sottoscrivere i messaggi:
-
-      ```javascript
-      class EventEmitter {
-        constructor() {
-          this.listeners = {};
-        }
-
-        on(message, listener) {
-          if (!this.listeners[message]) {
-            this.listeners[message] = [];
-          }
-          this.listeners[message].push(listener);
-        }
-
-        emit(message, payload = null) {
-          if (this.listeners[message]) {
-            this.listeners[message].forEach((l) => l(message, payload));
-          }
-        }
-      }
-      ```
-
-   1. **Aggiungere costanti** e impostare EventEmitter:
-
-      ```javascript
-      const Messages = {
-        KEY_EVENT_UP: "KEY_EVENT_UP",
-        KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
-        KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
-        KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
-      };
-
-      let heroImg,
-          enemyImg,
-          laserImg,
-          canvas, ctx,
-          gameObjects = [],
-          hero,
-          eventEmitter = new EventEmitter();
-      ```
-
-   1. **Inizializzare il gioco**
-
-   ```javascript
-   function initGame() {
-     gameObjects = [];
-     createEnemies();
-     createHero();
-
-     eventEmitter.on(Messages.KEY_EVENT_UP, () => {
-       hero.y -=5 ;
-     })
-
-     eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
-       hero.y += 5;
-     });
-
-     eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
-       hero.x -= 5;
-     });
-
-     eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
-       hero.x += 5;
-     });
-   }
-   ```
-
-1. **Impostare il ciclo di gioco**
-
-   Rifattorizzare la funzione window.onload per inizializzare il gioco e impostare un ciclo di gioco su un buon intervallo. Aggiungere anche un raggio laser:
-
-   ```javascript
-   window.onload = async () => {
-     canvas = document.getElementById("canvas");
-     ctx = canvas.getContext("2d");
-     heroImg = await loadTexture("assets/player.png");
-     enemyImg = await loadTexture("assets/enemyShip.png");
-     laserImg = await loadTexture("assets/laserRed.png");
-
-     initGame();
-     let gameLoopId = setInterval(() => {
-       ctx.clearRect(0, 0, canvas.width, canvas.height);
-       ctx.fillStyle = "black";
-       ctx.fillRect(0, 0, canvas.width, canvas.height);
-       drawGameObjects(ctx);
-     }, 100)
-
-   };
-   ```
-
-5. **Aggiungere il codice** per spostare i nemici a un certo intervallo
-
-   Rifattorizzare la funzione `createEnemies()` per creare i nemici e inserirli nella nuova classe gameObjects:
-
-   ```javascript
-   function createEnemies() {
-     const MONSTER_TOTAL = 5;
-     const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-     const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-     const STOP_X = START_X + MONSTER_WIDTH;
-
-     for (let x = START_X; x < STOP_X; x += 98) {
-       for (let y = 0; y < 50 * 5; y += 50) {
-         const enemy = new Enemy(x, y);
-         enemy.img = enemyImg;
-         gameObjects.push(enemy);
-       }
-     }
-   }
-   ```
-
-   e aggiungere una `funzione createHero()` per eseguire un processo simile per l'eroe.
-
-   ```javascript
-   function createHero() {
-     hero = new Hero(
-       canvas.width / 2 - 45,
-       canvas.height - canvas.height / 4
-     );
-     hero.img = heroImg;
-     gameObjects.push(hero);
-   }
-   ```
-
-   infine, aggiungere una funzione `drawGameObjects()` per avviare il disegno:
-
-   ```javascript
-   function drawGameObjects(ctx) {
-     gameObjects.forEach(go => go.draw(ctx));
-   }
-   ```
-
-   I nemici dovrebbero iniziare ad avanzare verso l'astronave dell'eroe!
-
----
-
-## 🚀 Sfida
-
-Come si può vedere, il proprio codice può trasformarsi in ["spaghetti code"](https://it.wikipedia.org/wiki/Spaghetti_code) quando si inizia ad aggiungere funzioni, variabili e classi. Come si puo organizzare meglio il codice in modo che sia più leggibile? Disegnare un sistema per organizzare il proprio codice, anche se risiede ancora in un file.
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=it)
-
-## Revisione e Auto Apprendimento
-
-Mentre questo gioco viene scritto senza utilizzare infrastutture Javascript (framework), ci sono molti framework canvas basati su JavaScript per lo sviluppo di giochi. Ci si prenda un po' di tempo per [leggere qualcosa su questi](https://github.com/collections/javascript-game-engines).
-
-## Compito
-
-[Commentare il proprio codice](assignment.it.md)
diff --git a/6-space-game/3-moving-elements-around/translations/README.ja.md b/6-space-game/3-moving-elements-around/translations/README.ja.md
deleted file mode 100644
index 51983165..00000000
--- a/6-space-game/3-moving-elements-around/translations/README.ja.md
+++ /dev/null
@@ -1,387 +0,0 @@
-# スペースゲーム構築プロジェクト その 3: モーションの追加
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=ja)
-
-ゲームは、あなたが画面上を走り回るエイリアンを持っているまでは、あまり楽しいものではありません! このゲームでは、2種類の動きを使用しています。このゲームでは、2種類の動きを利用していきます。
-
-- **キーボード/マウスの動き**: ユーザーがキーボードやマウスを操作して画面上のオブジェクトを移動させたとき
-- **ゲームで誘導された動き**: ゲームが一定の時間間隔でオブジェクトを移動させたとき
-
-では、どのようにして画面上で物を動かすのでしょうか? それはすべて直交座標に基づいています。オブジェクトの位置 (x,y) を変更してから、画面を再描画します。
-
-通常、画面上で *移動* を行うには、以下の手順が必要です。
-
-1. オブジェクトの**新しい位置を設定します**。これはオブジェクトが移動したと認識するために必要です
-2. **画面をクリアします**が、これは描画の合間に画面をクリアする必要があります。背景色で塗りつぶす矩形を描くことでクリアできます
-3. 新しい場所にオブジェクトを**再描画します**。これにより、ある場所から別の場所にオブジェクトを移動させることができます
-
- コードではこんな感じになります。
-
-```javascript
-// hero の場所を決めます。
-hero.x += 5;
-// hero がいる長方形をクリアします。
-ctx.clearRect(0, 0, canvas.width, canvas.height);
-// ゲームの背景と hero 描画し直します。
-ctx.fillRect(0, 0, canvas.width, canvas.height)
-ctx.fillStyle = "black";
-ctx.drawImage(heroImg, hero.x, hero.y);
-```
-
-✅ ヒーローを毎秒何フレームも描き直すとパフォーマンスコストが発生する理由が思いつきますか? [このパターンの代替案](https://www.html5rocks.com/ja/tutorials/canvas/performance/)を読んでみてください。
-
-## キーボードイベントの処理
-
-コードに特定のイベントをアタッチすることでイベントを処理します。キーボードイベントはウィンドウ全体でトリガーされますが、`click` のようなマウスイベントは特定の要素をクリックすることに接続することができます。このプロジェクトではキーボードイベントを使用します。
-
-イベントを処理するには、ウィンドウの `addEventListener()` メソッドを使用し、2つの入力パラメータを指定する必要があります。最初のパラメータはイベントの名前で、例えば `keyup` のようなものです。2 番目のパラメータは、イベントの結果として呼び出される関数です。 
-
-以下に例を示します。
-
-```javascript
-window.addEventListener('keyup', (evt) => {
-  // `evt.key` = キーの文字列表現
-  if (evt.key === 'ArrowUp') {
-    // 何か処理をします。
-  }
-})
-```
-
-キーイベントには、どのキーが押されたかを確認するために使用できる2つのプロパティがあります。
-
-- `key`、これは押されたキーの文字列表現で、例えば `ArrowUp` のようなものです
-- `keyCode`、これは数値表現であり、例えば `37` は `ArrowLeft` に対応します
-
-✅ キーイベントの操作はゲーム開発以外でも有用です。他にはどのような用途が考えられますか?
-
-### 特殊なキー： 注意事項
-
-ウィンドウに影響を与える *特殊な* キーがあります。つまり、`keyup` イベントを聞いているときに、これらの特別なキーを使ってヒーローを動かした場合、水平スクロールも行われるということです。そのため、ゲームを構築する際には、このビルトインブラウザの動作を *shut-off* した方が良いかもしれません。このようなコードが必要です。
-
-```javascript
-let onKeyDown = function (e) {
-  console.log(e.keyCode);
-  switch (e.keyCode) {
-    case 37:
-    case 39:
-    case 38:
-    case 40: // 矢印キー
-    case 32:
-      e.preventDefault();
-      break; // スペース
-    default:
-      break; // 他のキーをブロックしないでください。
-  }
-};
-
-window.addEventListener('keydown', onKeyDown);
-```
-
-上記のコードでは、矢印キーとスペースキーの *デフォルト* の動作が確実にシャットオフされます。*shut-off* メカニズムは `e.preventDefault()` を呼び出すときに発生します。
-
-## ゲームで誘導された動き
-
-`setTimeout()` や `setInterval()` 関数のようなタイマーを使うことで、オブジェクトの位置を目盛りや時間間隔ごとに更新することができます。これは次のようなものです。
-
-```javascript
-let id = setInterval(() => {
-  //敵を Y 軸で動かす
-  enemy.y += 10;
-})
-```
-
-## ゲームループ
-
-ゲームループとは、基本的には一定の間隔で呼び出される関数の概念です。ユーザーに見えるべきものはすべてループに描画されるので、ゲームループと呼ばれています。ゲームループはゲームの一部であるすべてのゲームオブジェクトを利用し、何らかの理由でゲームの一部ではない場合を除いて、すべてのオブジェクトを描画します。例えば、あるオブジェクトがレーザーで撃たれて吹き飛んでしまった場合、そのオブジェクトは現在のゲームループの一部ではなくなります (これについては後のレッスンで詳しく説明します)。
-
-ゲームループがどのようなものか、コードで表現すると次のようになります。
-
-```javascript
-let gameLoopId = setInterval(() =>
-  function gameLoop() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    drawHero();
-    drawEnemies();
-    drawStaticObjects();
-}, 200);
-```
-
-上記のループは `200` ミリ秒ごとに呼び出され、キャンバスを再描画します。あなたのゲームに合った最適な間隔を選択することができます。
-
-## スペースゲームの続き
-
-既存のコードを使って、それを拡張していきます。パート Ⅰ で完成させたコードから始めるか、[パートⅡのスターター](../your-work)のコードを使います。
-
-- **ヒーローの移動**: 矢印キーを使ってヒーローを移動できるようにコードを追加します
-- **敵を移動する**: また、敵が与えられたレートで上から下に移動することを確認するためにコードを追加する必要があります
-
-## 推奨される手順
-
-あなたのために作成されたファイルを `your-work` サブフォルダ内で探します。以下のファイルが含まれているはずです。
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-次のコマンドをタイピングして、あなたのプロジェクトを `your_work` フォルダから開始します。
-
-```bash
-cd your-work
-npm start
-```
-
-上記は、アドレス `http://localhost:5000` の HTTP サーバーを起動します。ブラウザを開いてそのアドレスを入力すると、今はヒーローと全ての敵が表示されるはずです。ただしまだ何も動いていません。
-
-### コードの追加
-
-1. `hero` と `enemy`、`game object`のための**オブジェクトを追加し**、それらは `x` と `y` のプロパティを持っている必要があります。([継承や合成](../../translations/README.ja.md)の部分を覚えておいてください)
-
-   *ヒント* `game object` は `x` と `y` を持ち、それ自身をキャンバスに描画する機能を持つものでなければなりません。
-
-   > tip: 以下のようにコンストラクタを定義した新しい GameObject クラスを追加してから、キャンバスに描画します。
-  
-    ```javascript
-    class GameObject {
-      constructor(x, y) {
-        this.x = x;
-        this.y = y;
-        this.dead = false;
-        this.type = "";
-        this.width = 0;
-        this.height = 0;
-        this.img = undefined;
-      }
-    
-      draw(ctx) {
-        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
-      }
-    }
-    ```
-
-    次に、この GameObject を拡張して、ヒーローと敵を作成します。
-    
-    ```javascript
-    class Hero extends GameObject {
-      constructor(x, y) {
-        ...x, y, type, speedが必要です。
-      }
-    }
-    ```
-
-    ```javascript
-    class Enemy extends GameObject {
-      constructor(x, y) {
-        super(x, y);
-        (this.width = 98), (this.height = 50);
-        this.type = "Enemy";
-        let id = setInterval(() => {
-          if (this.y < canvas.height - this.height) {
-            this.y += 5;
-          } else {
-            console.log('Stopped at', this.y)
-            clearInterval(id);
-          }
-        }, 300)
-      }
-    }
-    ```
-
-2. (ヒーローを上下左右に動かす) キーナビゲーションを処理するための**キーイベントハンドラを追加します**
-
-   *REMEMBER* これは直交座標系で、左上は `0,0` です。また、*デフォルトの動作*を止めるコードを追加することも忘れないでください*。
-
-   > tip: onKeyDown 関数を作成して、それをウィンドウにアタッチします。
-
-   ```javascript
-    let onKeyDown = function (e) {
-	      console.log(e.keyCode);
-	        ...add the code from the lesson above to stop default behavior
-	      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-   ```
-    
-   この時点でブラウザのコンソールを確認し、キー入力がログに記録されているかどうかを確認します。
-
-3. [Pub Sub パターン](../../translations/README.ja.md)を**実装する**と、残りの部分に続くようにコードをきれいに保つことができます
-
-   この最後の部分を行うには
-
-   1. ウィンドウに**イベントリスナーを追加します**
-
-       ```javascript
-        window.addEventListener("keyup", (evt) => {
-          if (evt.key === "ArrowUp") {
-            eventEmitter.emit(Messages.KEY_EVENT_UP);
-          } else if (evt.key === "ArrowDown") {
-            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-          } else if (evt.key === "ArrowLeft") {
-            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-          } else if (evt.key === "ArrowRight") {
-            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-          }
-        });
-        ```
-
-    1. メッセージを発行して購読するための **EventEmitter クラスを作成します**
-
-        ```javascript
-        class EventEmitter {
-          constructor() {
-            this.listeners = {};
-          }
-        
-          on(message, listener) {
-            if (!this.listeners[message]) {
-              this.listeners[message] = [];
-            }
-            this.listeners[message].push(listener);
-          }
-        
-          emit(message, payload = null) {
-            if (this.listeners[message]) {
-              this.listeners[message].forEach((l) => l(message, payload));
-            }
-          }
-        }
-        ```
-
-    1. **定数を追加**して EventEmitter を設定します
-
-        ```javascript
-        const Messages = {
-          KEY_EVENT_UP: "KEY_EVENT_UP",
-          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
-          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
-          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
-        };
-        
-        let heroImg, 
-            enemyImg, 
-            laserImg,
-            canvas, ctx, 
-            gameObjects = [], 
-            hero, 
-            eventEmitter = new EventEmitter();
-        ```
-
-    1. **ゲームを初期化します**
-
-    ```javascript
-    function initGame() {
-      gameObjects = [];
-      createEnemies();
-      createHero();
-    
-      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
-        hero.y -=5 ;
-      })
-    
-      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
-        hero.y += 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
-        hero.x -= 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
-        hero.x += 5;
-      });
-    }
-    ```
-
-1. **ゲームのループを設定します**
-
-   window.onload 関数をリファクタリングしてゲームを初期化し、良い間隔でゲームループを設定します。レーザービームも追加します。
-
-    ```javascript
-    window.onload = async () => {
-      canvas = document.getElementById("canvas");
-      ctx = canvas.getContext("2d");
-      heroImg = await loadTexture("assets/player.png");
-      enemyImg = await loadTexture("assets/enemyShip.png");
-      laserImg = await loadTexture("assets/laserRed.png");
-    
-      initGame();
-      let gameLoopId = setInterval(() => {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        drawGameObjects(ctx);
-      }, 100)
-      
-    };
-    ```
-
-5. 一定間隔で敵を移動させる**コードを追加します**
-
-    関数 `createEnemies()` をリファクタリングして敵を作成し、それを新しい gameObjects クラスにプッシュします。
-
-    ```javascript
-    function createEnemies() {
-      const MONSTER_TOTAL = 5;
-      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-      const STOP_X = START_X + MONSTER_WIDTH;
-    
-      for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          const enemy = new Enemy(x, y);
-          enemy.img = enemyImg;
-          gameObjects.push(enemy);
-        }
-      }
-    }
-    ```
-    
-    そして `createHero()` 関数を追加して hero にも同様の処理を行います。
-    
-    ```javascript
-    function createHero() {
-      hero = new Hero(
-        canvas.width / 2 - 45,
-        canvas.height - canvas.height / 4
-      );
-      hero.img = heroImg;
-      gameObjects.push(hero);
-    }
-    ```
-
-    最後に `drawGameObjects()` 関数を追加して描画を開始します。
-
-    ```javascript
-    function drawGameObjects(ctx) {
-      gameObjects.forEach(go => go.draw(ctx));
-    }
-    ```
-
-    あなたの敵はあなたのヒーローの宇宙船で前進を開始する必要があります!
-
----
-
-## 🚀 チャレンジ
-
-ご覧のように、関数や変数、クラスを追加し始めると、あなたのコードは「スパゲッティコード」になってしまうことがあります。コードをより読みやすく整理するにはどうしたらいいでしょうか? 1つのファイルに存在していても、あなたのコードを整理するためのシステムをスケッチしてみましょう。
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=ja)
-
-## 復習と自己学習
-
-フレームワークを使わずにゲームを書いているうちに、JavaScript を使ったゲーム開発用の canvas フレームワークがたくさん出てきました。時間をかけて[これらについて読む](https://github.com/collections/javascript-game-engines)。
-
-## 課題
-
-[コードをコメントする](assignment.ja.md)
diff --git a/6-space-game/3-moving-elements-around/translations/README.ko.md b/6-space-game/3-moving-elements-around/translations/README.ko.md
deleted file mode 100644
index 2e25229c..00000000
--- a/6-space-game/3-moving-elements-around/translations/README.ko.md
+++ /dev/null
@@ -1,389 +0,0 @@
-# Space 게임 제작하기 파트 3: 모션 추가하기
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=ko)
-
-외계인이 화면을 돌아다니기 전까지는 게임이 재미 없습니다! 이 게임에서는, 두 가지 타입의 동작을 씁니다:
-
-- **키보드/마우스 동작**: 사용자가 키보드 또는 마우스와 상호작용하여 화면에서 개체를 움질일 때.
-- **게임으로 움직이는 동작**: 게임이 일정 시간 간격으로 객체를 움직일 때.
-
-그러면 화면에서 물건을 어떻게 움직일까요? 그것은 모두 직교 좌표에 관한 것입니다: 객체의 위치 (x, y)를 변경 한 뒤에 화면을 다시 그립니다.
-
-일반적으로 화면에서 *이동*을 하려면 다음 단계가 필요합니다:
-
-1. 객체의 **새로운 위치 설정하기**; 이는 객체가 움직인 것으로 인식하는 데 필요합니다.
-2. **화면 비우기**, 화면은 그려지는 사이에 비워져야 합니다. 배경색으로 채운 사각형을 그려서 지울 수 있습니다.
-3. 새로운 위치에서 **개체를 다시 그리기**. 최종적으로 한 위치에서 다른 위치로 객체를 이동합니다.
-
- 코드에서 다음과 같이 보일 수 있습니다:
-
-```javascript
-//set the hero's location
-hero.x += 5;
-// clear the rectangle that hosts the hero
-ctx.clearRect(0, 0, canvas.width, canvas.height);
-// redraw the game background and hero
-ctx.fillRect(0, 0, canvas.width, canvas.height)
-ctx.fillStyle = "black";
-ctx.drawImage(heroImg, hero.x, hero.y);
-```
-
-✅ 영웅을 초당 수 많은 프레임으로 다시 그리게 될 때 성능 비용이 발생하는 이유를 알 수 있나요? [alternatives to this pattern](https://www.html5rocks.com/en/tutorials/canvas/performance/)에 대하여 읽어보세요.
-
-
-## 키보드 이벤트 제어하기
-
-특정 이벤트를 코드에 연결하여 이벤트를 처리합니다. 키보드 이벤트는 전체 윈도우에서 연결되는 반면에 `click`과 같은 마우스 이벤트는 클릭하는 특정 요소에 연결할 수 있습니다. 이 프로젝트에서는 키보드 이벤트를 사용합니다.
-
-이벤트를 처리하려면 윈도우의 `addEventListener ()` 메소드를 사용하고 두 개의 입력 파라미터를 제공해야 합니다. 첫 번째 파라미터는 이벤트의 이름입니다, 예시를 들자면 `keyup`과 같습니다. 두 번째 파라미터는 이벤트가 발생함에 따라 호출될 함수입니다.  
-
-여기는 예시입니다:
-
-```javascript
-window.addEventListener('keyup', (evt) => {
-  // `evt.key` = string representation of the key
-  if (evt.key === 'ArrowUp') {
-    // do something
-  }
-})
-```
-
-키 이벤트의 경우에는 어떤 키를 눌렀는지 확인할 때 쓸 수 있는 이벤트로 두 가지 속성이 있습니다:
-
-- `key`, 눌린 키의 문자열 표현입니다, 예를 들어 `ArrowUp` 입니다.
-- `keyCode`, 숫자 표현입니다. 예를 들어 `37`은 `ArrowLeft`에 해당합니다.
-
-✅ 키 이벤트 조작은 게임 개발 외부에서 유용합니다. 이 기술의 다른 사용법은 무엇일까요?
-
-### 특별한 키: a caveat
-
-윈도우에 영향을 주는 몇 가지 *특별한* 키가 있습니다. 즉 `keyup` 이벤트를 듣고 이 특별한 키를 사용하면 영웅을 이동하여 가로 스크롤도 할 수 있다는 것을 의미합니다. 따라서 게임을 제작할 때는 이 내장 브라우저 동작을 *차단* 할 수 있습니다. 다음과 같은 코드가 필요합니다:
-
-```javascript
-let onKeyDown = function (e) {
-  console.log(e.keyCode);
-  switch (e.keyCode) {
-    case 37:
-    case 39:
-    case 38:
-    case 40: // Arrow keys
-    case 32:
-      e.preventDefault();
-      break; // Space
-    default:
-      break; // do not block other keys
-  }
-};
-
-window.addEventListener('keydown', onKeyDown);
-```
-
-위 코드는 화살표-키와 스페이스 키의 *기본* 동작을 막습니다. *차단* 메커니즘은 `e.preventDefault()`를 호출할 때 발생합니다.
-
-## 게임의 움직임
-
-각 틱 또는 시간 간격에서 객체의 위치를 업데이트하는 `setTimeout()` 또는 `setInterval()` 함수 같은 타이머를 사용하여 스스로 움직일 수 있습니다. 다음과 같이 보입니다:
-
-```javascript
-let id = setInterval(() => {
-  //move the enemy on the y axis
-  enemy.y += 10;
-})
-```
-
-## 게임 루프
-
-게임 루프는 기본적으로 일정한 간격마다 호출되는 함수인 개념입니다. 사용자에게 보여줄 모든 것이 루프에 그려지므로 이것을 게임 루프라고 합니다. 게임 루프는 게임의 일부인 모든 게임 객체를 사용하여, 모종의 이유로 더 이상 게임의 일부가 아니지 않는 이상 다 그립니다. 예를 들면 객체가 레이저에 맞아 폭발한 적이 있다면 더 이상 현재 게임 루프의 일부가 아닙니다 (다음 단원에서 자세히 알아 볼 것입니다).
-
-다음은 일반적으로 코드로 표현된 게임 루프의 모습입니다:
-
-```javascript
-let gameLoopId = setInterval(() =>
-  function gameLoop() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    drawHero();
-    drawEnemies();
-    drawStaticObjects();
-}, 200);
-```
-
-캔버스를 다시 그리기 위해 위의 루프가 `200` milliseconds 마다 호출됩니다. 게임에 가장 적합한 간격을 고를 수 있습니다.
-
-## Space 게임 계속하기
-
-기존 코드를 가져와 확장합니다. 파트 I 에서 작성한 코드로 시작하거나 [Part II- starter](../your-work)의 코드를 사용합니다.
-
-- **영웅을 움직이기**: 화살표 키를 사용하여 영웅을 이동할 수 있도록 코드를 추가합니다.
-- **적을 움직이기**: 적들이 주어진 속도로 상단에서 하단으로 이동할 수 있도록 코드를 추가합니다.
-
-## 권장 단계
-
-`your-work` 하위 폴더에 생성된 파일을 찾습니다. 다음을 포함해야 합니다:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-타이핑하여 `your_work` 폴더에서 프로젝트를 시작합니다:
-
-```bash
-cd your-work
-npm start
-```
-
-위 코드는 `http://localhost:5000` 주소에서 HTTP 서버를 시작합니다. 브라우저를 열고 해당 주소를 입력하면 영웅과 모든 적을 렌더링 해야하지만; 아무것도 움직이지 않습니다 - 아직!
-
-### 코드 추가하기
-
-1. `영웅`과 `적` 그리고 `게임 객체`에 대한 **전용 객체를 추가합니다**. `x` 혹은 `y` 속성이 필요합니다. ([Inheritance or composition](../README.md) 파트를 기억하세요).
-
-   *힌트* `game object`는 `x`와 `y`가 있으면서 canvas에 그릴 수 있는 능력이 되어야 합니다.
-
-   >tip: 생성자가 아래와 같이 이루어진 새로운 GameObject 클래스를 추가하여, 시작한 뒤에 canvas로 그립니다:
-  
-    ```javascript
-        
-    class GameObject {
-      constructor(x, y) {
-        this.x = x;
-        this.y = y;
-        this.dead = false;
-        this.type = "";
-        this.width = 0;
-        this.height = 0;
-        this.img = undefined;
-      }
-    
-      draw(ctx) {
-        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
-      }
-    }
-    ```
-
-    이제, GameObject를 확장하여 영웅과 적을 생성합니다.
-    
-    ```javascript
-    class Hero extends GameObject {
-      constructor(x, y) {
-        ...it needs an x, y, type, and speed
-      }
-    }
-    ```
-
-    ```javascript
-    class Enemy extends GameObject {
-      constructor(x, y) {
-        super(x, y);
-        (this.width = 98), (this.height = 50);
-        this.type = "Enemy";
-        let id = setInterval(() => {
-          if (this.y < canvas.height - this.height) {
-            this.y += 5;
-          } else {
-            console.log('Stopped at', this.y)
-            clearInterval(id);
-          }
-        }, 300)
-      }
-    }
-    ```
-
-2. **키-이벤트 핸들러를 추가**하여 키 탐색을 처리합니다 (Hero를 상/하 좌/우로 이동).
-
-   *기억합시다* 데카르트 시스템이고, 좌측 상단은 `0,0`입니다. 또한 *기본 동작*을 중지하는 코드를 추가해야 합니다
-
-   >tip: onKeyDown 함수를 만들고 윈도우에 붙입니다.
-
-   ```javascript
-    let onKeyDown = function (e) {
-	      console.log(e.keyCode);
-	        ...add the code from the lesson above to stop default behavior
-	      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-   ```
-    
-   이 지점에서 브라우저 콘솔을 확인해봅니다, 그리고 로깅되는 키 입력을 봅니다.
-
-3. [Pub sub pattern](../README.md)으로 **구현합니다**, 이는 남은 파트를 따라가면서 코드를 깨끗하게 유지할 수 있습니다.
-
-   이 마지막 파트를 진행하면, 다음을 할 수 있습니다:
-
-   1. 윈도우에 **Add an 이벤트 리스너를 추가합니다**:
-
-       ```javascript
-        window.addEventListener("keyup", (evt) => {
-          if (evt.key === "ArrowUp") {
-            eventEmitter.emit(Messages.KEY_EVENT_UP);
-          } else if (evt.key === "ArrowDown") {
-            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-          } else if (evt.key === "ArrowLeft") {
-            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-          } else if (evt.key === "ArrowRight") {
-            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-          }
-        });
-        ```
-
-    1. publish하고 메시지를 subscribe할 **EventEmitter 클래스를 생성합니다**:
-
-        ```javascript
-        class EventEmitter {
-          constructor() {
-            this.listeners = {};
-          }
-        
-          on(message, listener) {
-            if (!this.listeners[message]) {
-              this.listeners[message] = [];
-            }
-            this.listeners[message].push(listener);
-          }
-        
-          emit(message, payload = null) {
-            if (this.listeners[message]) {
-              this.listeners[message].forEach((l) => l(message, payload));
-            }
-          }
-        }
-        ```
-
-    1. EventEmitter를 설정하고 **constants를 추가합니다**:
-
-        ```javascript
-        const Messages = {
-          KEY_EVENT_UP: "KEY_EVENT_UP",
-          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
-          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
-          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
-        };
-        
-        let heroImg, 
-            enemyImg, 
-            laserImg,
-            canvas, ctx, 
-            gameObjects = [], 
-            hero, 
-            eventEmitter = new EventEmitter();
-        ```
-
-    1. **게임을 초기화합니다**
-
-    ```javascript
-    function initGame() {
-      gameObjects = [];
-      createEnemies();
-      createHero();
-    
-      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
-        hero.y -=5 ;
-      })
-    
-      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
-        hero.y += 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
-        hero.x -= 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
-        hero.x += 5;
-      });
-    }
-    ```
-
-1. **게임 루프를 설정합니다**
-
-  window.onload 함수를 리팩터링하여 게임을 초기화하고 적절한 간격으로 게임 루프를 설정합니다. 레이저 빔도 추가합니다:
-
-    ```javascript
-    window.onload = async () => {
-      canvas = document.getElementById("canvas");
-      ctx = canvas.getContext("2d");
-      heroImg = await loadTexture("assets/player.png");
-      enemyImg = await loadTexture("assets/enemyShip.png");
-      laserImg = await loadTexture("assets/laserRed.png");
-    
-      initGame();
-      let gameLoopId = setInterval(() => {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        drawGameObjects(ctx);
-      }, 100)
-      
-    };
-    ```
-
-5. 일정 간격으로 움직이는 적에 대한 **코드를 작성합니다**
-
-    `createEnemies()`함수를 리팩터링하여 적을 생성하고 새로운 gameObjects 클래스로 푸시합니다:
-
-    ```javascript
-    function createEnemies() {
-      const MONSTER_TOTAL = 5;
-      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-      const STOP_X = START_X + MONSTER_WIDTH;
-    
-      for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          const enemy = new Enemy(x, y);
-          enemy.img = enemyImg;
-          gameObjects.push(enemy);
-        }
-      }
-    }
-    ```
-    
-    그리고 비슷한 과정으로 영웅에 대한 `createHero()` 함수를 추가합니다.
-    
-    ```javascript
-    function createHero() {
-      hero = new Hero(
-        canvas.width / 2 - 45,
-        canvas.height - canvas.height / 4
-      );
-      hero.img = heroImg;
-      gameObjects.push(hero);
-    }
-    ```
-
-    그리고 마지막으로, 그리기를 시작할 `drawGameObjects()` 함수를 추가합니다:
-
-    ```javascript
-    function drawGameObjects(ctx) {
-      gameObjects.forEach(go => go.draw(ctx));
-    }
-    ```
-
-    적들이 영웅 spaceship의 앞으로 나아가려고 합니다!
-
----
-
-## 🚀 도전
-
-보다가, 함수와 변수 및 클래스를 추가하기 시작하면 코드가 '스파게티 코드'로 변할 수 있습니다. 코드를 더 읽기 쉽게 구성하려면 어떻게 해야 될까요? 코드가 여전히 하나의 파일에 있어도, 어울리는 시스템을 기획하시기 바랍니다.
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-프레임워크를 사용하지 않고 게임을 작성하는 동안, 게임 개발을 위한 JavaScript-기반 canvas 프레임워크가 많이 존재하고 있습니다. 시간을 내어 [about these](https://github.com/collections/javascript-game-engines)를 보시기 바랍니다.
-
-## 과제
-
-[Comment your code](../assignment.md)
diff --git a/6-space-game/3-moving-elements-around/translations/README.ms.md b/6-space-game/3-moving-elements-around/translations/README.ms.md
deleted file mode 100644
index 4c8b206b..00000000
--- a/6-space-game/3-moving-elements-around/translations/README.ms.md
+++ /dev/null
@@ -1,388 +0,0 @@
-# Bina Permainan Angkasa Bahagian 3: Menambah Gerakan
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33)
-
-Permainan tidak begitu menyeronokkan sehingga anda mempunyai makhluk asing di layar! Dalam permainan ini, kami akan menggunakan dua jenis pergerakan:
-
-- **Pergerakan papan kekunci / Tetikus**: ketika pengguna berinteraksi dengan papan kekunci atau tetikus untuk menggerakkan objek di layar.
-- **Pergerakan yang disebabkan oleh permainan**: ketika permainan menggerakkan objek dengan selang waktu tertentu.
-
-Jadi bagaimana kita memindahkan sesuatu di skrin? Ini semua mengenai koordinat kartesian: kami menukar lokasi (x, y) objek dan kemudian melukis semula skrin.
-
-Biasanya anda memerlukan langkah-langkah berikut untuk menyelesaikan *pergerakan* di skrin:
-
-1. **Tetapkan lokasi baru** untuk objek; ini diperlukan untuk melihat objek sebagai bergerak.
-2. **Kosongkan skrin**, skrin perlu dibersihkan di antara undian. Kita dapat membersihkannya dengan melukis sebuah segi empat tepat yang kita isi dengan warna latar belakang.
-3. **Lukis semula objek** di lokasi baru. Dengan melakukan ini kita akhirnya dapat memindahkan objek dari satu lokasi ke lokasi lain.
-
- Inilah rupa bentuknya dalam kod:
-
- ```javascript
-//set the hero's location
-hero.x += 5;
-// clear the rectangle that hosts the hero
-ctx.clearRect(0, 0, canvas.width, canvas.height);
-// redraw the game background and hero
-ctx.fillRect(0, 0, canvas.width, canvas.height)
-ctx.fillStyle = "black";
-ctx.drawImage(heroImg, hero.x, hero.y);
-```
-
-✅ Bolehkah anda memikirkan sebab mengapa menggambar semula pahlawan anda dengan banyak bingkai sesaat mungkin menambah kos prestasi? Baca mengenai [alternatif untuk corak ini](https://www.html5rocks.com/en/tutorials/canvas/performance/).
-
-## Mengendalikan acara papan kekunci
-
-Anda mengendalikan acara dengan melampirkan acara tertentu ke kod. Peristiwa papan kekunci dipicu di seluruh tetingkap sedangkan peristiwa tetikus seperti `click` dapat dihubungkan dengan mengklik elemen tertentu. Kami akan menggunakan acara papan kekunci sepanjang projek ini.
-
-Untuk menangani suatu peristiwa, anda perlu menggunakan kaedah ``addEventListener()` tetingkap dan memberikannya dua parameter input. Parameter pertama adalah nama acara, misalnya `keyup`. Parameter kedua adalah fungsi yang harus dipanggil sebagai akibat dari peristiwa yang berlaku.
-
-Inilah contohnya:
-
-```javascript
-window.addEventListener('keyup', (evt) => {
-  // `evt.key` = string representation of the key
-  if (evt.key === 'ArrowUp') {
-    // do something
-  }
-})
-```
-
-Untuk acara utama terdapat dua sifat pada acara yang boleh anda gunakan untuk melihat kunci apa yang ditekan:
-
-- `key`, ini adalah representasi rentetan dari kekunci yang ditekan, misalnya `ArrowUp`
-- `keyCode`, ini adalah representasi angka, misalnya `37`, sesuai dengan `ArrowLeft`.
-
-✅ Manipulasi acara utama berguna di luar pengembangan permainan. Apa kegunaan lain yang dapat anda fikirkan untuk teknik ini?
-
-### Kekunci khas: peringatan
-
-Terdapat beberapa *kunci* khas yang mempengaruhi tetingkap. Ini bermaksud bahawa jika anda sedang mendengar acara `keyup` dan anda menggunakan kekunci khas ini untuk menggerakkan wira anda, ia juga akan melakukan tatal mendatar. Untuk itu anda mungkin mahu *mematikan* tingkah laku penyemak imbas terbina dalam ini semasa anda membina permainan anda. Anda memerlukan kod seperti ini:
-
-```javascript
-let onKeyDown = function (e) {
-  console.log(e.keyCode);
-  switch (e.keyCode) {
-    case 37:
-    case 39:
-    case 38:
-    case 40: // Arrow keys
-    case 32:
-      e.preventDefault();
-      break; // Space
-    default:
-      break; // do not block other keys
-  }
-};
-
-window.addEventListener('keydown', onKeyDown);
-```
-
-Kod di atas akan memastikan bahawa anak panah dan kekunci spasi mempunyai tingkah laku *lalai* mereka. Mekanisme *shut-off* berlaku apabila kita memanggil `e.preventDefault()`.
-
-## Pergerakan yang disebabkan oleh permainan
-
-Kita dapat membuat sesuatu bergerak dengan menggunakan pemasa seperti fungsi `setTimeout()` atau `setInterval()` yang mengemas kini lokasi objek pada setiap centang, atau selang waktu. Begini rupa:
-
-```javascript
-let id = setInterval(() => {
-  //move the enemy on the y axis
-  enemy.y += 10;
-})
-```
-
-## Gelung permainan
-
-Gelung permainan adalah konsep yang pada dasarnya adalah fungsi yang dipanggil pada selang waktu yang tetap. Ia dipanggil gelung permainan kerana segala sesuatu yang dapat dilihat oleh pengguna ditarik ke dalam gelung. Gelung permainan menggunakan semua objek permainan yang menjadi bagian dari permainan, menggambar semuanya kecuali untuk beberapa alasan tidak seharusnya menjadi bagian dari permainan lagi. Contohnya jika objek adalah musuh yang terkena laser dan meletup, ia bukan lagi bahagian dari gelung permainan semasa (anda akan mengetahui lebih lanjut mengenai perkara ini dalam pelajaran berikutnya).
-
-Inilah rupa gelung permainan, yang dinyatakan dalam kod:
-
-```javascript
-let gameLoopId = setInterval(() =>
-  function gameLoop() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    drawHero();
-    drawEnemies();
-    drawStaticObjects();
-}, 200);
-```
-
-Gelung di atas dipanggil setiap `200` milisaat untuk menggambar semula kanvas. Anda mempunyai kemampuan untuk memilih selang terbaik yang sesuai untuk permainan anda.
-
-## Meneruskan Permainan Angkasa
-
-Anda akan mengambil kod yang ada dan memanjangkannya. Mulakan dengan kod yang anda lengkapkan semasa bahagian I atau gunakan kod di [Bahagian II- starter] (karya anda).
-
-- **Memindahkan pahlawan**: anda akan menambah kod untuk memastikan anda dapat memindahkan pahlawan menggunakan kekunci anak panah.
-- **Pindahkan musuh**: anda juga perlu menambahkan kod untuk memastikan musuh bergerak dari atas ke bawah pada kadar tertentu.
-
-## Langkah yang disyorkan
-
-Cari fail yang telah dibuat untuk anda dalam sub folder `your-work`. Ia harus mengandungi yang berikut:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-Anda memulakan projek anda folder `your_work` dengan mengetik:
-
-```bash
-cd your-work
-npm start
-```
-
-Perkara di atas akan memulakan Pelayan HTTP pada alamat `http: // localhost: 5000`. Buka penyemak imbas dan masukkan alamat itu, sekarang ia harus menjadikan pahlawan dan semua musuh; tidak ada yang bergerak - namun!
-
-### Tambah kod
-
-1. **Tambahkan objek khusus** untuk `hero` dan `musuh` dan `objek permainan`, mereka harus mempunyai sifat `x` dan `y`. ( Ingat bahagian pada [Warisan atau komposisi](../../translations/README.ms.md) ).
-
-   *HINT* `objek permainan` harus menjadi objek dengan `x` dan `y` dan kemampuan untuk menarik dirinya ke kanvas.
-
-   > tip: mulakan dengan menambahkan kelas GameObject baru dengan konstruktornya digambarkan seperti di bawah, dan kemudian lukiskannya ke kanvas:
-
-       ```javascript
-        
-    class GameObject {
-      constructor(x, y) {
-        this.x = x;
-        this.y = y;
-        this.dead = false;
-        this.type = "";
-        this.width = 0;
-        this.height = 0;
-        this.img = undefined;
-      }
-    
-      draw(ctx) {
-        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
-      }
-    }
-    ```
-
-    Sekarang, panjangkan GameObject ini untuk membuat Wira dan Musuh.
-
-        ```javascript
-    class Hero extends GameObject {
-      constructor(x, y) {
-        ...it needs an x, y, type, and speed
-      }
-    }
-    ```
-
-    ```javascript
-    class Enemy extends GameObject {
-      constructor(x, y) {
-        super(x, y);
-        (this.width = 98), (this.height = 50);
-        this.type = "Enemy";
-        let id = setInterval(() => {
-          if (this.y < canvas.height - this.height) {
-            this.y += 5;
-          } else {
-            console.log('Stopped at', this.y)
-            clearInterval(id);
-          }
-        }, 300)
-      }
-    }
-    ```
-
-2. **Tambahkan pengendali acara utama** untuk mengendalikan navigasi utama (pusing pahlawan ke atas / bawah kiri / kanan)
-
-   *INGAT* ini adalah sistem kartesian, kiri atas adalah `0,0`. Juga ingat untuk menambah kod untuk menghentikan *tingkah laku lalai*
-
-   > tip: buat fungsi onKeyDown anda dan pasangkannya ke tetingkap:
-
-      ```javascript
-    let onKeyDown = function (e) {
-	      console.log(e.keyCode);
-	        ...add the code from the lesson above to stop default behavior
-	      }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-   ```
-
-   Periksa konsol penyemak imbas anda pada ketika ini, dan perhatikan penekanan kekunci dicatat.
-
-3. **Terapkan** the [Pub sub pattern](../../translations/README.ms.md), ini akan memastikan kod anda tetap bersih semasa anda mengikuti bahagian yang tinggal.
-
-   Untuk melakukan bahagian terakhir ini, anda boleh:
-
-   1. **Tambahkan pendengar acara** di tetingkap:
-
-          ```javascript
-        window.addEventListener("keyup", (evt) => {
-          if (evt.key === "ArrowUp") {
-            eventEmitter.emit(Messages.KEY_EVENT_UP);
-          } else if (evt.key === "ArrowDown") {
-            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-          } else if (evt.key === "ArrowLeft") {
-            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-          } else if (evt.key === "ArrowRight") {
-            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-          }
-        });
-        ```
-
-        1. **Buat kelas EventEmitter** untuk menerbitkan dan melanggan mesej:
-
-        ```javascript
-        class EventEmitter {
-          constructor() {
-            this.listeners = {};
-          }
-        
-          on(message, listener) {
-            if (!this.listeners[message]) {
-              this.listeners[message] = [];
-            }
-            this.listeners[message].push(listener);
-          }
-        
-          emit(message, payload = null) {
-            if (this.listeners[message]) {
-              this.listeners[message].forEach((l) => l(message, payload));
-            }
-          }
-        }
-        ```
-
-        1. **Tambah pemalar** dan sediakan EventEmitter:
-
-        ```javascript
-        const Messages = {
-          KEY_EVENT_UP: "KEY_EVENT_UP",
-          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
-          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
-          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
-        };
-        
-        let heroImg, 
-            enemyImg, 
-            laserImg,
-            canvas, ctx, 
-            gameObjects = [], 
-            hero, 
-            eventEmitter = new EventEmitter();
-        ```
-
-        1. **Memulakan permainan**
-
-    ```javascript
-    function initGame() {
-      gameObjects = [];
-      createEnemies();
-      createHero();
-    
-      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
-        hero.y -=5 ;
-      })
-    
-      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
-        hero.y += 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
-        hero.x -= 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
-        hero.x += 5;
-      });
-    }
-    ```
-
-1. **Siapkan gelung permainan**
-
-   Memfaktorkan semula fungsi window.onload untuk memulakan permainan dan mengatur gelung permainan pada selang waktu yang baik. Anda juga akan menambah sinar laser:
-
-    ```javascript
-    window.onload = async () => {
-      canvas = document.getElementById("canvas");
-      ctx = canvas.getContext("2d");
-      heroImg = await loadTexture("assets/player.png");
-      enemyImg = await loadTexture("assets/enemyShip.png");
-      laserImg = await loadTexture("assets/laserRed.png");
-    
-      initGame();
-      let gameLoopId = setInterval(() => {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        drawGameObjects(ctx);
-      }, 100)
-      
-    };
-    ```
-
-5. **Tambahkan kod** untuk memindahkan musuh pada selang waktu tertentu
-
-    Refactor fungsi `createEnemies()` untuk membuat musuh dan mendorong mereka ke kelas gameObjects yang baru:
-
-    ```javascript
-    function createEnemies() {
-      const MONSTER_TOTAL = 5;
-      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-      const STOP_X = START_X + MONSTER_WIDTH;
-    
-      for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          const enemy = new Enemy(x, y);
-          enemy.img = enemyImg;
-          gameObjects.push(enemy);
-        }
-      }
-    }
-    ```
-
-    dan tambahkan fungsi `createHero()` untuk melakukan proses yang serupa untuk wira.
-
-    ```javascript
-    function createHero() {
-      hero = new Hero(
-        canvas.width / 2 - 45,
-        canvas.height - canvas.height / 4
-      );
-      hero.img = heroImg;
-      gameObjects.push(hero);
-    }
-    ```
-
-    dan akhirnya, tambahkan fungsi `drawGameObjects()` untuk memulakan lukisan:
-
-    ```javascript
-    function drawGameObjects(ctx) {
-      gameObjects.forEach(go => go.draw(ctx));
-    }
-    ```
-
-    Musuh anda harus mula maju di kapal angkasa wira anda!
-
----
-
-## 🚀 Cabaran
-
-Seperti yang anda lihat, kod anda boleh berubah menjadi 'spaghetti code' apabila anda mula menambahkan fungsi dan pemboleh ubah dan kelas. Bagaimana anda dapat mengatur kod anda dengan lebih baik agar lebih mudah dibaca? Lakarkan sistem untuk mengatur kod anda, walaupun masih terdapat dalam satu fail.
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34)
-
-## Mengkaji & Belajar Sendiri
-
-Semasa kami menulis permainan kami tanpa menggunakan kerangka kerja, ada banyak kerangka kanvas berdasarkan JavaScript untuk pengembangan permainan. Luangkan sedikit masa untuk melakukan [membaca mengenai perkara ini](https://github.com/collections/javascript-game-engines).
-
-## Tugasan
-
-[Komen kod anda](assignment.ms.md)
\ No newline at end of file
diff --git a/6-space-game/3-moving-elements-around/translations/README.zh-tw.md b/6-space-game/3-moving-elements-around/translations/README.zh-tw.md
deleted file mode 100644
index fd39f480..00000000
--- a/6-space-game/3-moving-elements-around/translations/README.zh-tw.md
+++ /dev/null
@@ -1,388 +0,0 @@
-# 建立太空遊戲 Part 3：加入動作
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/33?loc=zh_tw)
-
-有外星人在移動的遊戲才會好玩！在這款遊戲中，我們會建立兩種移動模式：
-
-- **鍵盤滑鼠的移動**：當使用者控制鍵盤或滑鼠時，能移動畫面上的物件。
-- **遊戲內建的移動**：遊戲能自動地在一定時間內，移動其中的物件。
-
-那我們該如何移動畫面上的物件呢？這都取決於笛卡爾座標系：我們改變物件的座標 (x,y)，並在畫面上重新繪製出來。
-
-通常你需要下列流程來*移動*畫面上的物件：
-
-1. **設定物件的新地點**，你才能察覺到物件有所移動。
-2. **清除畫面**，每一次的繪製間都需要將畫面清除乾淨。我們可以繪製一張背景色的矩形來覆蓋畫面。
-3. **在新地點重新繪製物件**，我們就能移動物件，從 A 點移動到 B 點。
-
-合理的程式碼如下所示：
-
-```javascript
-// 設定英雄位置
-hero.x += 5;
-// 利用矩形清除英雄
-ctx.clearRect(0, 0, canvas.width, canvas.height);
-// 重新繪製背景與英雄
-ctx.fillRect(0, 0, canvas.width, canvas.height)
-ctx.fillStyle = "black";
-ctx.drawImage(heroImg, hero.x, hero.y);
-```
-
-✅ 你能了解為什麼在同一秒內多次重新繪製英雄會影響效能的原因嗎？閱讀[其他種同目的之設計模式](https://www.html5rocks.com/en/tutorials/canvas/performance/)。
-
-## 處理鍵盤事件
-
-連接特定事件到程式中，你就能處理遊戲事件。鍵盤事件可以在視窗被選擇時觸發，而滑鼠事件如 `click`，則要點擊特定的物件。我們會在這個專案中，使用鍵盤物件。
-
-要處理一種事件，需要使用視窗的 `addEventListener()` 方法，並提供給它兩個參數。第一個參數是事件的名稱，例如： `keyup`。第二個參數是回應事件結果的被呼叫函式。
-
-下列是一種例子：
-
-```javascript
-window.addEventListener('keyup', (evt) => {
-  // `evt.key` = 按鍵字串
-  if (evt.key === 'ArrowUp') {
-    // 做某事
-  }
-})
-```
-
-鍵盤事件有兩個屬性來判別被按壓的按鍵：
-
-- `key`，使用字串名稱表達該按鍵，例如： `ArrowUp`。
-- `keyCode`，使用數字呈現，例如 `37` 會對應到 `ArrowLeft`。
-
-✅ 除了遊戲開發以外，鍵盤事件也是十分實用的功能。你能想到其他使用相同技術的應用嗎？
-
-### 特殊按鍵之限制
-
-有許多*特殊*按鍵會影響視窗。這代表若我們正監聽著 `keyup` 事件，這個按鍵同時也會執行視窗的滾動行為。某些時候你會需要*關閉*這些瀏覽器中預設的行為，好比是建立這款遊戲時。你需要下列的程式：
-
-```javascript
-let onKeyDown = function (e) {
-  console.log(e.keyCode);
-  switch (e.keyCode) {
-    case 37:
-    case 39:
-    case 38:
-    case 40: // 方向鍵
-    case 32:
-      e.preventDefault();
-      break; // 空白鍵
-    default:
-      break; // 不阻止其他按鍵
-  }
-};
-
-window.addEventListener('keydown', onKeyDown);
-```
-
-上述的程式碼能確保方向鍵與空白鍵關閉*預設*的行為。這個*關閉*機制會在我們呼叫 `e.preventDefault()` 時觸發。
-
-## 遊戲內建的移動
-
-我們可以讓物件自己移動，利用計時器如 `setTimeout()` 或是 `setInterval()` 這兩個函式，隨著秒數間隔更新物件的位置。如下方呈現：
-
-```javascript
-let id = setInterval(() => {
-  // 在 y 軸上移動敵人
-  enemy.y += 10;
-})
-```
-
-## 遊戲迴圈
-
-遊戲迴圈是個重要概念，定期地呼叫必須執行的函式。之所以被稱作遊戲迴圈也是基於所有東西會在一個迴圈中呈現給玩家。遊戲迴圈會利用到所有的遊戲物件，並依據各個情況與理由決定是否要繪製出它們。舉例來說，當一個敵人被雷射擊中，爆炸了。他就不應該存在於現在的遊戲迴圈中。你會在後續的課程學到更多此概念。
-
-這是一個遊戲迴圈的基本格式，以程式碼表達如下：
-
-```javascript
-let gameLoopId = setInterval(() =>
-  function gameLoop() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    ctx.fillStyle = "black";
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-    drawHero();
-    drawEnemies();
-    drawStaticObjects();
-}, 200);
-```
-
-上述的迴圈會每 `200` 毫秒重新繪製 Canvas。你能自由地判斷哪種時長更適合套用在你的遊戲中。
-
-## 繼續我們的太空遊戲
-
-你會利用現有的程式碼來擴增我們的專案。你可以使用你在 Part I 完成的程式，或是使用 [Part II - Starter](../your-work) 這包程式。
-
-- **移動英雄**：你需要加入程式，確保你可以使用方向鍵來移動主角。
-- **移動敵人**：你也需要加入程式，確保敵人能定期地由上往下移動。
-
-## 建議步驟
-
-在你的 `your-work` 子資料夾中，確認檔案是否建立完成。它應該包括：
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
--| index.html
--| app.js
--| package.json
-```
-
-開始 `your_work` 資料夾中的專案，輸入：
-
-```bash
-cd your-work
-npm start
-```
-
-這會啟動 HTTP 伺服器並發布網址 `http://localhost:5000`。開啟瀏覽器並輸入該網址，現在它能呈現英雄以及所有的敵人，但它們還沒辦法移動！
-
-### 加入程式碼
-
-1. **加入特定物件** `hero`、`enemy` 和 `game object`，它們皆有 `x` 與 `y` 位置屬性。(記得課程[繼承與組合](../../translations/README.zh-tw.md)中的片段)。 
-
-   *提示* `game object` 要有 `x` 和 `y`，以及繪製到畫布上的能力。
-
-   >要點：開始建立 GameObject class ，結構如下所示，再繪製到畫布上：
-  
-    ```javascript
-        
-    class GameObject {
-      constructor(x, y) {
-        this.x = x;
-        this.y = y;
-        this.dead = false;
-        this.type = "";
-        this.width = 0;
-        this.height = 0;
-        this.img = undefined;
-      }
-    
-      draw(ctx) {
-        ctx.drawImage(this.img, this.x, this.y, this.width, this.height);
-      }
-    }
-    ```
-
-    現在，延伸 GameObject 來建立英雄與敵人。
-    
-    ```javascript
-    class Hero extends GameObject {
-      constructor(x, y) {
-        ...it needs an x, y, type, and speed
-      }
-    }
-    ```
-
-    ```javascript
-    class Enemy extends GameObject {
-      constructor(x, y) {
-        super(x, y);
-        (this.width = 98), (this.height = 50);
-        this.type = "Enemy";
-        let id = setInterval(() => {
-          if (this.y < canvas.height - this.height) {
-            this.y += 5;
-          } else {
-            console.log('Stopped at', this.y)
-            clearInterval(id);
-          }
-        }, 300)
-      }
-    }
-    ```
-
-2. **加入鍵盤事件處理器**以處理鍵盤輸入(移動英雄的上下左右)
-
-   *記住* 這是笛卡爾座標系，左上方為 `0,0`。也請記得關閉鍵盤的*預設行為*
-
-   >要點：建立函式 onKeyDown 並連接到視窗中：
-
-   ```javascript
-    let onKeyDown = function (e) {
-          console.log(e.keyCode);
-            ...add the code from the lesson above to stop default behavior
-          }
-    };
-
-    window.addEventListener("keydown", onKeyDown);
-   ```
-    
-   這時候檢查你的瀏覽器命令欄，看看是否能偵測到鍵盤輸入。
-
-3. **建立**[發布訂閱模式](../../translations/README.zh-tw.md)，這能讓剩下的程式段落保持乾淨。
-
-   要做到此步驟，你可以：
-
-   1. **建立視窗的事件監聽者**：
-
-       ```javascript
-        window.addEventListener("keyup", (evt) => {
-          if (evt.key === "ArrowUp") {
-            eventEmitter.emit(Messages.KEY_EVENT_UP);
-          } else if (evt.key === "ArrowDown") {
-            eventEmitter.emit(Messages.KEY_EVENT_DOWN);
-          } else if (evt.key === "ArrowLeft") {
-            eventEmitter.emit(Messages.KEY_EVENT_LEFT);
-          } else if (evt.key === "ArrowRight") {
-            eventEmitter.emit(Messages.KEY_EVENT_RIGHT);
-          }
-        });
-        ```
-
-    1. **建立 EventEmitter class** 以發布及訂閱訊息：
-
-        ```javascript
-        class EventEmitter {
-          constructor() {
-            this.listeners = {};
-          }
-        
-          on(message, listener) {
-            if (!this.listeners[message]) {
-              this.listeners[message] = [];
-            }
-            this.listeners[message].push(listener);
-          }
-        
-          emit(message, payload = null) {
-            if (this.listeners[message]) {
-              this.listeners[message].forEach((l) => l(message, payload));
-            }
-          }
-        }
-        ```
-
-    1. **建立常數**並設定 EventEmitter：
-
-        ```javascript
-        const Messages = {
-          KEY_EVENT_UP: "KEY_EVENT_UP",
-          KEY_EVENT_DOWN: "KEY_EVENT_DOWN",
-          KEY_EVENT_LEFT: "KEY_EVENT_LEFT",
-          KEY_EVENT_RIGHT: "KEY_EVENT_RIGHT",
-        };
-        
-        let heroImg, 
-            enemyImg, 
-            laserImg,
-            canvas, ctx, 
-            gameObjects = [], 
-            hero, 
-            eventEmitter = new EventEmitter();
-        ```
-
-    1. **初始化遊戲**
-
-    ```javascript
-    function initGame() {
-      gameObjects = [];
-      createEnemies();
-      createHero();
-    
-      eventEmitter.on(Messages.KEY_EVENT_UP, () => {
-        hero.y -=5 ;
-      })
-    
-      eventEmitter.on(Messages.KEY_EVENT_DOWN, () => {
-        hero.y += 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_LEFT, () => {
-        hero.x -= 5;
-      });
-    
-      eventEmitter.on(Messages.KEY_EVENT_RIGHT, () => {
-        hero.x += 5;
-      });
-    }
-    ```
-
-1. **設定遊戲迴圈**
-
-   重構函式 window.onload 來初始化遊戲，設定遊戲迴圈的定時間隔。你還需要加入雷射光：
-
-    ```javascript
-    window.onload = async () => {
-      canvas = document.getElementById("canvas");
-      ctx = canvas.getContext("2d");
-      heroImg = await loadTexture("assets/player.png");
-      enemyImg = await loadTexture("assets/enemyShip.png");
-      laserImg = await loadTexture("assets/laserRed.png");
-    
-      initGame();
-      let gameLoopId = setInterval(() => {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = "black";
-        ctx.fillRect(0, 0, canvas.width, canvas.height);
-        drawGameObjects(ctx);
-      }, 100)
-      
-    };
-    ```
-
-5. **加入程式**來定期地移動敵人
-
-    重構函式 `createEnemies()` 以建立敵人們，接到 gameObjects 中：
-
-    ```javascript
-    function createEnemies() {
-      const MONSTER_TOTAL = 5;
-      const MONSTER_WIDTH = MONSTER_TOTAL * 98;
-      const START_X = (canvas.width - MONSTER_WIDTH) / 2;
-      const STOP_X = START_X + MONSTER_WIDTH;
-    
-      for (let x = START_X; x < STOP_X; x += 98) {
-        for (let y = 0; y < 50 * 5; y += 50) {
-          const enemy = new Enemy(x, y);
-          enemy.img = enemyImg;
-          gameObjects.push(enemy);
-        }
-      }
-    }
-    ```
-    
-    新增函式 `createHero()` 來為英雄做相同的事情。
-    
-    ```javascript
-    function createHero() {
-      hero = new Hero(
-        canvas.width / 2 - 45,
-        canvas.height - canvas.height / 4
-      );
-      hero.img = heroImg;
-      gameObjects.push(hero);
-    }
-    ```
-
-    最後，建立函式 `drawGameObjects()` 以開始繪製：
-
-    ```javascript
-    function drawGameObjects(ctx) {
-      gameObjects.forEach(go => go.draw(ctx));
-    }
-    ```
-
-    你的敵人開始會朝你的英雄艦艇前進！
-
----
-
-## 🚀 挑戰
-
-如你所見，在加入零零總總的函式、變數與 class 後，你的程式變成了「麵條式代碼(spaghetti code)」。你能有效的編排你的程式，讓它更容易被閱讀？勾劃出一個系統來組織你的程式碼，即使所有東西都在一個檔案中。
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/34?loc=zh_tw)
-
-## 複習與自學
-
-我們並沒有使用框架(frameworks)來編寫我們的遊戲，現在有許多 JavaScript 基底的 Canvas 框架，提供給遊戲開發使用。花點時間[閱讀這些框架](https://github.com/collections/javascript-game-engines)。
-
-## 作業
-
-[為你的程式做註解](assignment.zh-tw.md)
diff --git a/6-space-game/3-moving-elements-around/translations/assignment.es.md b/6-space-game/3-moving-elements-around/translations/assignment.es.md
deleted file mode 100644
index 9f50cd66..00000000
--- a/6-space-game/3-moving-elements-around/translations/assignment.es.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Comente su código
-
-## Instrucciones
-
-Revisa tu archivo /app.js actual en la carpeta de tu juego y busca formas de comentarlo y ordenarlo. Es muy fácil que el código se salga de control y ahora es una buena oportunidad para agregar comentarios para asegurarse de que tiene un código legible para que pueda usarlo más tarde.
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | ---------------- | ------------------------------------- | ------------ |
-| | El código `app.js` está completamente comentado y organizado en bloques lógicos | El código `app.js` está adecuadamente comentado | El código `app.js` está algo desorganizado y carece de buenos comentarios |
diff --git a/6-space-game/3-moving-elements-around/translations/assignment.fr.md b/6-space-game/3-moving-elements-around/translations/assignment.fr.md
deleted file mode 100644
index d38b409d..00000000
--- a/6-space-game/3-moving-elements-around/translations/assignment.fr.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Commentez votre code
-
-## Instructions
-
-Parcourez votre fichier /app.js actuel dans votre dossier de jeu et trouvez des moyens de le commenter et de l'organiser. Il est très facile pour le code de devenir incontrôlable, et c'est maintenant une bonne occasion d'ajouter des commentaires pour s'assurer que vous disposez d'un code lisible afin que vous puissiez l'utiliser plus tard.
-
-## Rubrique
-
-| Critères | Exemplaire                                                          | Adéquat                              | Besoin d'amélioration                                              |
-| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
-|          | Le code `app.js` est entièrement commenté et organisé en blocs logiques | Le code `app.js` est correctement commenté | Le code `app.js` est quelque peu désorganisé et manque de bons commentaires |
\ No newline at end of file
diff --git a/6-space-game/3-moving-elements-around/translations/assignment.hi.md b/6-space-game/3-moving-elements-around/translations/assignment.hi.md
deleted file mode 100644
index bfb64896..00000000
--- a/6-space-game/3-moving-elements-around/translations/assignment.hi.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# अपना कोड कमेंट करें
-
-## अनुदेश
-
-अपने गेम फ़ोल्डर में अपने वर्तमान /app.js फ़ाइल पर जाएं, और इसे टिप्पणी करने और इसे साफ करने के तरीके खोजें. कोड को नियंत्रण से बाहर करना बहुत आसान है, और अब यह सुनिश्चित करने के लिए टिप्पणियां जोड़ने का एक अच्छा मौका है कि आपके पास पठनीय कोड है ताकि आप इसे बाद में उपयोग कर सकें.
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                                                | पर्याप्त                                   | सुधार की जरूरत                                                      |
-| ------ | -------------------------------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------------------- |
-|        | `app.js` कोड पूरी तरह से टिप्पणी की है और तार्किक ब्लॉकों में व्यवस्थित है | `app.js` कोड पर्याप्त रूप से टिप्पणी की है | `app.js` कोड कुछ हद तक अव्यवस्थित है और अच्छी टिप्पणियों का अभाव है |
diff --git a/6-space-game/3-moving-elements-around/translations/assignment.it.md b/6-space-game/3-moving-elements-around/translations/assignment.it.md
deleted file mode 100644
index c02ddf2d..00000000
--- a/6-space-game/3-moving-elements-around/translations/assignment.it.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Commentare il proprio codice
-
-## Istruzioni
-
-Eseminare il file /app.js corrente nella cartella del gioco e trovare i modi per commentarlo e riordinarlo. È molto facile che il codice sfugga al controllo e ora è una buona occasione per aggiungere commenti per assicurarsi di avere codice leggibile in modo da poterlo utilizzare in seguito.
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
-|          | Il codice in `app.js` è completamente commentato e organizzato in blocchi logici | Il codice in `app.js` è adeguatamente commentato | Il codice in `app.js` è in qualche modo disorganizzato e manca di buoni commenti |
\ No newline at end of file
diff --git a/6-space-game/3-moving-elements-around/translations/assignment.ja.md b/6-space-game/3-moving-elements-around/translations/assignment.ja.md
deleted file mode 100644
index 636fb090..00000000
--- a/6-space-game/3-moving-elements-around/translations/assignment.ja.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# コードをコメントする
-
-## 説明書
-
-ゲームフォルダ内の現在の /app.js ファイルに目を通し、コメントを付けて片付ける方法を見つけてください。コードはいとも簡単に制御不能になります。今はコメントを追加して、後で使えるように読みやすいコードにする良い機会です。
-
-## ルーブリック
-
-| 基準 | 模範的な例                                                          | 適切な                              | 改善が必要                                              |
-| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
-|          | `app.js` のコードは完全にコメントされ、論理的なブロックに整理されています。 | `app.js` のコードは適切にコメントされています。 | `app.js` のコードはやや乱れていて、良いコメントがありません。 |
\ No newline at end of file
diff --git a/6-space-game/3-moving-elements-around/translations/assignment.ko.md b/6-space-game/3-moving-elements-around/translations/assignment.ko.md
deleted file mode 100644
index 000e7af3..00000000
--- a/6-space-game/3-moving-elements-around/translations/assignment.ko.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 코드 주석 달기
-
-## 설명
-
-게임 폴더에 있는 /app.js 파일을 살펴보고, 주석을 달고 정리해 봅시다. 코드가 많아지면 통제하기가 어려워질 수 있습니다. 지금 주석을 추가해서 나중에도 코드를 쉽게 파악할 수 있도록 조치해 봅시다.
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | `app.js` 코드가 주석으로 충분히 설명되어 있고 논리적으로 설계된 경우 | `app.js` 코드가 주석으로 적절히 설명된 경우 | `app.js` 코드가 주석으로 충분히 설명되지 않고 복잡하게 설계된 경우
diff --git a/6-space-game/3-moving-elements-around/translations/assignment.ms.md b/6-space-game/3-moving-elements-around/translations/assignment.ms.md
deleted file mode 100644
index 155ecffe..00000000
--- a/6-space-game/3-moving-elements-around/translations/assignment.ms.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Komen Kod Anda
-
-## Arahan
-
-Periksa fail /app.js semasa anda di folder permainan anda, dan cari cara untuk mengomentarinya dan rapi. Sangat mudah bagi kod untuk tidak terkawal, dan sekarang adalah peluang yang baik untuk menambahkan komen untuk memastikan bahawa anda mempunyai kod yang dapat dibaca sehingga anda dapat menggunakannya kemudian.
-
-## Rubrik
-
-| Kriteria | Contoh                                                          | Mencukupi                              | Usaha Lagi                                             |
-| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
-|          | Kod `app.js` dikomentari sepenuhnya dan disusun menjadi blok logik | Kod `app.js` diberi komen yang mencukupi | Kod `app.js` agak tidak teratur dan tidak mempunyai komen yang baik |
\ No newline at end of file
diff --git a/6-space-game/3-moving-elements-around/translations/assignment.nl.md b/6-space-game/3-moving-elements-around/translations/assignment.nl.md
deleted file mode 100644
index 3ec64f30..00000000
--- a/6-space-game/3-moving-elements-around/translations/assignment.nl.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Becommentarieer uw code
-
-## Instructies
-
-Bekijk uw huidige /app.js-bestand in uw gamemap en zoek manieren om er commentaar op te geven en het op te ruimen. Het is heel gemakkelijk dat code uit de hand loopt, en dit is een goede kans om opmerkingen toe te voegen om ervoor te zorgen dat u leesbare code heeft, zodat u deze later kunt gebruiken.
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                                          | Voldoende                              | Moet worden verbeterd                                              |
-| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
-|          | `app.js` code is volledig becommentarieerd en georganiseerd in logische blokken | `app.js` code is voldoende becommentarieerd | De code `app.js` is enigszins ongeorganiseerd en er ontbreken goede commentaren |
\ No newline at end of file
diff --git a/6-space-game/3-moving-elements-around/translations/assignment.zh-tw.md b/6-space-game/3-moving-elements-around/translations/assignment.zh-tw.md
deleted file mode 100644
index 06add13e..00000000
--- a/6-space-game/3-moving-elements-around/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 為你的程式做註解
-
-## 簡介
-
-打開遊戲資料夾中目前的 /app.js 檔案，試著幫它做上註解並整理乾淨。程式碼很容易脫離掌控，現在是個好機會來確保你的程式是容易去閱讀的，在未來還可以被使用。
-
-## 學習評量
-
-| 作業內容 | 優良                          | 普通                    | 待改進                  |
-| -------- | ----------------------------- | ----------------------- | ----------------------- |
-|          | `app.js` 完整地註解且分塊整理 | `app.js` 有做充分的註解 | `app.js` 凌亂且缺乏註解 |
\ No newline at end of file
diff --git a/6-space-game/4-collision-detection/translations/README.es.md b/6-space-game/4-collision-detection/translations/README.es.md
deleted file mode 100644
index 1e980069..00000000
--- a/6-space-game/4-collision-detection/translations/README.es.md
+++ /dev/null
@@ -1,293 +0,0 @@
-# Construye un juego espacial Parte IV: Adición de un láser y detección de colisiones
-
-![video](video-url)
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
-
-¡En esta lección aprenderá a disparar láseres con JavaScript! Agregaremos dos cosas a nuestro juego:
-
-- **Un láser**: este láser se dispara desde la nave de tu héroe y verticalmente hacia arriba
-- **Detección de colisiones**, como parte de la implementación de la capacidad de *disparar*, también agregaremos algunas reglas de juego interesantes:
-   - **El láser golpea al enemigo**: El enemigo muere si es golpeado por un láser
-   - **El láser golpea la pantalla superior**: un láser se destruye si golpea la parte superior de la pantalla
-   - **Colisión de héroe y enemigo**: Un enemigo y el héroe son destruidos si se golpean entre sí.
-   - **El enemigo golpea la parte inferior de la pantalla**: un enemigo y un héroe son destruidos si el enemigo golpea la parte inferior de la pantalla.
-
-En resumen, tú, *el héroe*, debes golpear a todos los enemigos con un láser antes de que logren moverse a la parte inferior de la pantalla.
-
-✅ Investiga un poco sobre el primer juego de computadora jamás escrito. ¿Cuál fue su funcionalidad?
-
-¡Seamos heroicos juntos!
-
-## Detección de colisiones
-
-¿Cómo hacemos la detección de colisiones? Necesitamos pensar en los objetos de nuestro juego como rectángulos que se mueven. ¿Por qué podrías preguntar? Bueno, la imagen utilizada para dibujar un objeto de juego es un rectángulo: tiene una `x`,` y`, `width` y `height`.
-
-Si dos rectángulos, es decir, un héroe y un enemigo *se cruzan*, tienes una colisión. Lo que debería suceder entonces depende de las reglas del juego. Para implementar la detección de colisiones, por lo tanto, necesita lo siguiente:
-
-1. Una forma de obtener una representación rectangular de un objeto de juego, algo como esto:
-
-
-   ```javascript
-   rectFromGameObject() {
-     return {
-       top: this.y,
-       left: this.x,
-       bottom: this.y + this.height,
-       right: this.x + this.width
-     }
-   }
-   ```
-
-2. Una función de comparación, esta función puede verse así:
-
-   ```javascript
-   function intersectRect(r1, r2) {
-     return !(r2.left > r1.right ||
-       r2.right < r1.left ||
-       r2.top > r1.bottom ||
-       r2.bottom < r1.top);
-   }
-   ```
-
-## ¿Cómo destruimos las cosas?
-
-Para destruir cosas en un juego, debes informarle al juego que ya no debería pintar este elemento en el bucle del juego que se activa en un intervalo determinado. Una forma de hacer esto es marcar un objeto del juego como *muerto* cuando algo sucede, así:
-
-
-```javascript
-// ocurrió la colisión
-enemy.dead = true
-```
-
-Luego, puede proceder a clasificar los objetos *muertos* antes de volver a pintar la pantalla, así:
-
-```javascript
-gameObjects = gameObject.filter(go => !go.dead);
-```
-
-## ¿Cómo disparamos un láser?
-
-Disparar un láser se traduce en responder a un evento clave y crear un objeto que se mueve en una dirección determinada. Por lo tanto, debemos realizar los siguientes pasos:
-
-1. **Crea un objeto láser**: desde la parte superior de la nave de nuestro héroe, que al ser creado comienza a moverse hacia la parte superior de la pantalla.
-2. **Adjuntar código a un evento clave**: necesitamos elegir una tecla en el teclado que represente al jugador disparando el láser.
-3. **Crea un objeto de juego que parezca un láser** cuando se presiona la tecla.
-
-## Enfriamiento en nuestro láser
-
-El láser debe dispararse cada vez que presione una tecla, como *espacio*, por ejemplo. Para evitar que el juego produzca demasiados láseres en poco tiempo, debemos solucionar este problema. La solución es implementar un llamado *enfriamiento*, un temporizador, que garantiza que un láser solo se pueda disparar con cierta frecuencia. Puede implementar eso de la siguiente manera:
-
-
-```javascript
-class Cooldown {
-  constructor(time) {
-    this.cool = false;
-    setTimeout(() => {
-      this.cool = true;
-    }, time)
-  }
-}
-
-class Weapon {
-  constructor {
-  }
-  fire() {
-    if (!this.cooldown || this.cooldown.cool) {
-      // produce a laser
-      this.cooldown = new Cooldown(500);
-    } else {
-      // do nothing - it hasn't cooled down yet.
-    }
-  }
-}
-```
-
-✅ Consulte la lección 1 de la serie de juegos espaciales para recordar los *tiempos de reutilización*.
-
-## Qué construir
-
-Tomará el código existente (que debería haber limpiado y refactorizado) de la lección anterior y lo extenderá. Empiece con el código de la parte II o utilice el código en [Part III- starter](/your-work).
-
-> consejo: el láser con el que trabajará ya está en su carpeta de activos y su código hace referencia a él
-
-- **Agregue detección de colisiones**, cuando un láser choca con algo, se deben aplicar las siguientes reglas:
-    1. **El láser golpea al enemigo**: el enemigo muere si es golpeado por un láser
-    2. **El láser golpea la pantalla superior**: un láser se destruye si golpea la parte superior de nuestra pantalla
-    3. **Colisión de héroe y enemigo**: un enemigo y el héroe son destruidos si se golpean entre sí
-    4. **El enemigo golpea la parte inferior de la pantalla**: un enemigo y un héroe son destruidos si el enemigo golpea la parte inferior de la pantalla.
-
-## Pasos recomendados
-
-Busque los archivos que se han creado para usted en la subcarpeta `su-trabajo`. Debe contener lo siguiente:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-Comienzas tu proyecto en la carpeta `your_work` escribiendo:
-
-```bash
-cd your-work
-npm start
-```
-
-Lo anterior iniciará un servidor HTTP en la dirección `http: // localhost: 5000`. Abra un navegador e ingrese esa dirección, ahora mismo debería representar al héroe y a todos los enemigos, nada se mueve, todavía :).
-
-### Agregar código
-
-1. **Configure una representación rectangular de su objeto de juego, para manejar la colisión** El siguiente código le permite obtener una representación rectangular de un `GameObject`. Edite su clase GameObject para extenderla:
-
-
-    ```javascript
-    rectFromGameObject() {
-        return {
-          top: this.y,
-          left: this.x,
-          bottom: this.y + this.height,
-          right: this.x + this.width,
-        };
-      }
-    ```
-
-2. **Agregar código que verifica la colisión** Esta será una nueva función que prueba si dos rectángulos se cruzan:
-
-    ```javascript
-    function intersectRect(r1, r2) {
-      return !(
-        r2.left > r1.right ||
-        r2.right < r1.left ||
-        r2.top > r1.bottom ||
-        r2.bottom < r1.top
-      );
-    }
-    ```
-
-3. **Agregar capacidad de disparo láser**
-    1. **Agregar mensaje de evento clave**. La tecla *espacio* debería crear un láser justo encima de la nave del héroe. Agregue tres constantes en el objeto Mensajes:
-
-       ```javascript
-        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
-        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
-        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
-       ```
-
-1. **Tecla de espacio en el mango**. Edite la función de teclado `window.addEventListener` para manejar espacios:
-
-      ```javascript
-        } else if(evt.keyCode === 32) {
-          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
-        }
-      ```
-
-1. **Agregar oyentes**. Edite la función ʻinitGame () `para asegurarse de que el héroe pueda disparar cuando se presione la barra espaciadora:
-
-       ```javascript
-       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
-        if (hero.canFire()) {
-          hero.fire();
-        }
-       ```
-
-       y agregue una nueva función `eventEmitter.on ()` para asegurar el comportamiento cuando un enemigo choca con un láser:
-
-          ```javascript
-          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
-            first.dead = true;
-            second.dead = true;
-          })
-          ```
-
-   1.**Mover objeto**, asegúrese de que el láser se mueva gradualmente hacia la parte superior de la pantalla. Creará una nueva clase Laser que amplíe `GameObject`, como lo hizo antes: 
-   
-      ```javascript
-        class Laser extends GameObject {
-        constructor(x, y) {
-          super(x,y);
-          (this.width = 9), (this.height = 33);
-          this.type = 'Laser';
-          this.img = laserImg;
-          let id = setInterval(() => {
-            if (this.y > 0) {
-              this.y -= 15;
-            } else {
-              this.dead = true;
-              clearInterval(id);
-            }
-          }, 100)
-        }
-      }
-      ```
-
-1. **Manejar colisiones**, implementar reglas de colisión para el láser. Agregue una función `updateGameObjects()` que prueba los objetos en colisión en busca de hits
-
-      ```javascript
-      function updateGameObjects() {
-        const enemies = gameObjects.filter(go => go.type === 'Enemy');
-        const lasers = gameObjects.filter((go) => go.type === "Laser");
-      // laser hit something
-        lasers.forEach((l) => {
-          enemies.forEach((m) => {
-            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
-            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
-              first: l,
-              second: m,
-            });
-          }
-         });
-      });
-
-        gameObjects = gameObjects.filter(go => !go.dead);
-      }  
-      ```
-
-      Asegúrate de agregar `updateGameObjects()` en tu bucle de juego en `window.onload`.
-
-    4. **Implemente el tiempo de reutilización** en el láser, para que solo se pueda disparar con cierta frecuencia.
-
-       Finalmente, edite la clase Hero para que pueda enfriarse:
-
-       ```javascript
-      class Hero extends GameObject {
-        constructor(x, y) {
-          super(x, y);
-          (this.width = 99), (this.height = 75);
-          this.type = "Hero";
-          this.speed = { x: 0, y: 0 };
-          this.cooldown = 0;
-        }
-        fire() {
-          gameObjects.push(new Laser(this.x + 45, this.y - 10));
-          this.cooldown = 500;
-    
-          let id = setInterval(() => {
-            if (this.cooldown > 0) {
-              this.cooldown -= 100;
-            } else {
-              clearInterval(id);
-            }
-          }, 200);
-        }
-        canFire() {
-          return this.cooldown === 0;
-        }
-      }
-      ```
-
-En este punto, ¡tu juego tiene algunas funciones! Puedes navegar con tus flechas, disparar un láser con tu barra espaciadora y los enemigos desaparecen cuando los golpeas. ¡Bien hecho!
-
-🚀 Desafío: ¡Agrega una explosión! Echa un vistazo a los recursos del juego en [el repositorio de Space Art](../solution/spaceArt/readme.txt) e intenta agregar una explosión cuando el láser golpea a un extraterrestre.
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
-
-## Revisión y autoestudio
-
-Experimente con los intervalos de su juego hasta ahora. ¿Qué pasa cuando los cambias? Más información sobre [eventos de tiempo de JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
-
-**Asignación**: [Explorar colisiones](assignment.es.md)
diff --git a/6-space-game/4-collision-detection/translations/README.fr.md b/6-space-game/4-collision-detection/translations/README.fr.md
deleted file mode 100644
index 51f29837..00000000
--- a/6-space-game/4-collision-detection/translations/README.fr.md
+++ /dev/null
@@ -1,297 +0,0 @@
-# Construire un jeu spatial Partie 4: Ajouter un laser et détecter les collisions
-
-## Quiz préalable
-
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=fr)
-
-Dans cette leçon, vous apprendrez à tirer des lasers avec JavaScript! Nous ajouterons deux choses à notre jeu:
-
-- **Un laser**: ce laser est tiré depuis le vaisseau de vos héros et verticalement vers le haut
-- **La détection de collision**, dans le cadre de la mise en œuvre de la possibilité de *tirer*, nous ajouterons également quelques règles de jeu intéressantes:
-   - **Le laser frappe l'ennemi**: L'ennemi meurt s'il est touché par un laser
-   - **Le laser touche l'écran supérieur**: un laser est détruit s'il touche la partie supérieure de l'écran
-   - **Collision entre ennemis et héros**: Un ennemi et le héros sont détruits s'ils se frappent
-   - **L'ennemi touche le bas de l'écran**: Un ennemi et un héros sont détruits si l'ennemi touche le bas de l'écran
-
-En bref, vous -- *le héros* -- devez frapper tous les ennemis avec un laser avant qu'ils ne parviennent à se déplacer vers le bas de l'écran.
-
-✅ Faites une petite recherche sur le tout premier jeu vidéo jamais écrit. Quelle était sa fonctionnalité?
-
-Soyons héroïques ensemble!
-
-## La détection de collision
-
-Comment fait-on la détection de collision? Nous devons penser à nos objets de jeu comme des rectangles se déplaçant. Pourquoi vous pourriez vous demander? Eh bien, l'image utilisée pour dessiner un objet de jeu est un rectangle: il a un `x`, `y`, `width` et `height`.
-
-Si deux rectangles, c'est-à-dire un héros et un ennemi *se croisent*, vous avez une collision. Ce qui devrait arriver alors dépend des règles du jeu. Pour implémenter la détection de collision, vous avez donc besoin des éléments suivants:
-
-1. Un moyen d'obtenir une représentation rectangulaire d'un objet de jeu, quelque chose comme ça:
-
-   ```javascript
-   rectFromGameObject() {
-     return {
-       top: this.y,
-       left: this.x,
-       bottom: this.y + this.height,
-       right: this.x + this.width
-     }
-   }
-   ```
-
-2. Une fonction de comparaison, cette fonction peut ressembler à ceci:
-
-   ```javascript
-   function intersectRect(r1, r2) {
-     return !(r2.left > r1.right ||
-       r2.right < r1.left ||
-       r2.top > r1.bottom ||
-       r2.bottom < r1.top);
-   }
-   ```
-
-## Comment détruire les objets
-
-Pour détruire des objets dans un jeu, vous devez faire savoir au jeu qu'il ne doit plus afficher cet objet dans la boucle de jeu qui se déclenche à un certain intervalle. Une façon de faire est de marquer un objet de jeu comme *mort* quand quelque chose se passe, comme ceci:
-
-```javascript
-// la collision s'est produite
-enemy.dead = true
-```
-
-Ensuite, vous procédez au tri des objets *morts* avant de repeindre l'écran, comme ceci:
-
-```javascript
-gameObjects = gameObject.filter(go => !go.dead);
-```
-
-## Comment tirons-nous un laser
-
-Tirer un laser se traduit par répondre à un événement clé et créer un objet qui se déplace dans une certaine direction. Nous devons donc effectuer les étapes suivantes:
-
-1. **Créez un objet laser**: du haut du vaisseau de notre héros, celui-ci commence à se déplacer vers le haut de l'écran lors de sa création.
-2. **Attacher un code à un événement clé**: nous devons choisir une touche du clavier qui représente le joueur tirant le laser.
-3. **Créez un objet de jeu qui ressemble à un laser** lorsque la touche est enfoncée.
-
-## Cooldown sur notre laser
-
-Le laser doit se déclencher à chaque fois que vous appuyez sur une touche, comme *espace* par exemple. Pour éviter que le jeu ne produise trop de lasers en peu de temps, nous devons résoudre ce problème. La solution consiste à implémenter un soi-disant *cooldown*(temps de recharge), une minuterie, qui garantit qu'un laser ne peut être tiré aussi souvent. Vous pouvez implémenter cela de la manière suivante:
-
-```javascript
-class Cooldown {
-  constructor(time) {
-    this.cool = false;
-    setTimeout(() => {
-      this.cool = true;
-    }, time)
-  }
-}
-
-class Weapon {
-  constructor {
-  }
-  fire() {
-    if (!this.cooldown || this.cooldown.cool) {
-      // produire un laser
-      this.cooldown = new Cooldown(500);
-    } else {
-      // ne rien faire - il n'a pas encore refroidi.
-    }
-  }
-}
-```
-
-✅ Reportez-vous à la leçon 1 de la série de jeux spatiaux pour vous rappeler des *temps de recharge*
-
-## Que construire
-
-Vous allez prendre le code existant (que vous avez dû nettoyer et refactoriser) de la leçon précédente et l'étendre. Commencez par le code de la partie II ou utilisez le code de la [partie III - démarreur](../../your-work).
-
-> astuce: le laser avec lequel vous allez travailler est déjà dans votre dossier assets et référencé par votre code
-
-- **Ajoutez la détection de collision**, lorsqu'un laser entre en collision avec quelque chose, les règles suivantes doivent s'appliquer:
-   1. **Le laser touche l'ennemi**: l'ennemi meurt s'il est touché par un laser
-   2. **Le laser touche l'écran supérieur**: un laser est détruit s'il touche la partie supérieure de notre écran
-   3. **Collision ennemi et héros**: un ennemi et le héros sont détruits s'ils se frappent
-   4. **L'ennemi touche le bas de l'écran**: un ennemi et un héros sont détruits si l'ennemi touche le bas de l'écran
-
-## Étapes recommandées
-
-Localisez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit 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 démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et saisissez cette adresse, pour le moment, cela devrait rendre le héros et tous les ennemis, rien ne bouge - pour le moment :).
-
-### Ajouter un code
-
-1. **Configurez une représentation rectangulaire de votre objet de jeu, pour gérer les collisions** Le code ci-dessous vous permet d'obtenir une représentation rectangulaire d'un `GameObject`. Modifiez votre classe GameObject pour l'étendre:
-
-    ```javascript
-    rectFromGameObject() {
-        return {
-          top: this.y,
-          left: this.x,
-          bottom: this.y + this.height,
-          right: this.x + this.width,
-        };
-      }
-    ```
-
-2. **Ajouter du code qui vérifie la collision** Il s'agira d'une nouvelle fonction qui teste si deux rectangles se croisent:
-
-    ```javascript
-    function intersectRect(r1, r2) {
-      return !(
-        r2.left > r1.right ||
-        r2.right < r1.left ||
-        r2.top > r1.bottom ||
-        r2.bottom < r1.top
-      );
-    }
-    ```
-
-3. **Ajouter une capacité de tir laser **
-   1. **Ajouter un message d'événement clé**. La touche *espace* devrait créer un laser juste au-dessus du vaisseau héros. Ajoutez trois constantes dans l'objet Messages:
-
-       ```javascript
-        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
-        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
-        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
-       ```
-
-   1. **Manipuler la touche espace**. Modifiez la fonction keyup `window.addEventListener` pour gérer les espaces:
-
-      ```javascript
-        } else if(evt.keyCode === 32) {
-          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
-        }
-      ```
-
-    1. **Ajouter des auditeurs**. Modifiez la fonction `initGame()` pour vous assurer que le héros peut se déclencher lorsque la barre d'espace est enfoncée:
-
-       ```javascript
-       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
-        if (hero.canFire()) {
-          hero.fire();
-        }
-       ```
-
-       et ajoutez une nouvelle fonction `eventEmitter.on()` pour assurer le comportement lorsqu'un ennemi entre en collision avec un laser:
-
-          ```javascript
-          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
-            first.dead = true;
-            second.dead = true;
-          })
-          ```
-
-   1. **Déplacez l'objet**, assurez-vous que le laser se déplace progressivement vers le haut de l'écran. Vous allez créer une nouvelle classe Laser qui étend `GameObject`, comme vous l'avez fait auparavant: 
-   
-      ```javascript
-        class Laser extends GameObject {
-        constructor(x, y) {
-          super(x,y);
-          (this.width = 9), (this.height = 33);
-          this.type = 'Laser';
-          this.img = laserImg;
-          let id = setInterval(() => {
-            if (this.y > 0) {
-              this.y -= 15;
-            } else {
-              this.dead = true;
-              clearInterval(id);
-            }
-          }, 100)
-        }
-      }
-      ```
-
-   1. **Gérer les collisions**, Implémenter les règles de collision pour le laser. Ajouter une fonction `updateGameObjects()` qui teste les objets en collision pour les hits
-
-      ```javascript
-      function updateGameObjects() {
-        const enemies = gameObjects.filter(go => go.type === 'Enemy');
-        const lasers = gameObjects.filter((go) => go.type === "Laser");
-      // laser hit something
-        lasers.forEach((l) => {
-          enemies.forEach((m) => {
-            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
-            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
-              first: l,
-              second: m,
-            });
-          }
-         });
-      });
-
-        gameObjects = gameObjects.filter(go => !go.dead);
-      }  
-      ```
-
-      Assurez-vous d'ajouter `updateGameObjects()` dans votre boucle de jeu dans `window.onload`.
-
-   4. **Mettez en place un temps de recharge (cooldown)** sur le laser, de sorte qu'il ne peut être tiré qu'un certain temps.
-
-      Enfin, modifiez la classe de héros afin qu'elle puisse se recharger:
-
-       ```javascript
-      class Hero extends GameObject {
-        constructor(x, y) {
-          super(x, y);
-          (this.width = 99), (this.height = 75);
-          this.type = "Hero";
-          this.speed = { x: 0, y: 0 };
-          this.cooldown = 0;
-        }
-        fire() {
-          gameObjects.push(new Laser(this.x + 45, this.y - 10));
-          this.cooldown = 500;
-    
-          let id = setInterval(() => {
-            if (this.cooldown > 0) {
-              this.cooldown -= 100;
-            } else {
-              clearInterval(id);
-            }
-          }, 200);
-        }
-        canFire() {
-          return this.cooldown === 0;
-        }
-      }
-      ```
-
-À ce stade, votre jeu a quelques fonctionnalités! Vous pouvez naviguer avec vos touches fléchées, tirer un laser avec votre barre d'espace et les ennemis disparaissent lorsque vous les frappez. Bien joué!
-
----
-
-## 🚀 Challenge
-
-Ajoutez une explosion! Jetez un œil aux ressources du jeu dans [le référentiel Space Art](../../solution/spaceArt/readme.txt) et essayez d'ajouter une explosion lorsque le laser frappe un extraterrestre
-
-## Quiz de validation des connaissances
-
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=fr)
-
-## Révision et étude personnelle
-
-Faites des expériences avec les intervalles de votre jeu à ce stade. Que se passe-t-il lorsque vous les modifiez? En savoir plus sur les [événements de minutage JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
-
-## Affectation
-
-[Explorer les collisions](assignment.fr.md)
diff --git a/6-space-game/4-collision-detection/translations/README.hi.md b/6-space-game/4-collision-detection/translations/README.hi.md
deleted file mode 100644
index c7ac3eab..00000000
--- a/6-space-game/4-collision-detection/translations/README.hi.md
+++ /dev/null
@@ -1,305 +0,0 @@
-# एक अंतरिक्ष खेल भाग 4 बनाएँ: एक लेजर और टकराव का पता लगाए
-
-## लेक्चरसे पहलेकी क्विज
-
-[लेक्चरसे पहलेकी क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=hi)
-
-इस पाठ में आप सीखेंगे कि जावास्क्रिप्ट के साथ लेज़रों को कैसे शूट किया जाए! हम अपने खेल में दो चीजें जोड़ेंगे:
-
-- **A laser**: इस लेज़र को आपके नायकों के जहाज से और ऊपर की ओर सीधा खड़ा किया गया है
-- **Collision detection**, _शूट_ करने की क्षमता को लागू करने के हिस्से के रूप में हम कुछ अच्छे गेम नियम भी जोड़ेंगे:
-  - **Laser hits enemy**: लेजर से मारने पर दुश्मन की मौत हो जाती है
-  - **Laser hits top screen**: एक लेजर यदि स्क्रीन के शीर्ष भाग से टकराने के नष्ट हो जाता है
-  - **Enemy and hero collision**:एक दुश्मन और नायक नष्ट होजाता है अगर एक दूसरे को मारते हैं
-  - **Enemy hits bottom of the screen**: एक दुश्मन और एक नायक को नष्ट कर दिया जाता है अगर दुश्मन स्क्रीन के नीचे हिट करता है
-
-संक्षेप में, आप - _ नायक _ - इससे पहले कि वे स्क्रीन के निचले भाग में जाने का प्रबंधन करें, सभी दुश्मनों को एक लेजर के साथ हिट करने की आवश्यकता है.
-
-✅ कभी लिखे गए पहले कंप्यूटर गेम पर थोड़ा शोध करें। इसकी कार्यक्षमता क्या थी?
-
-चलो एक साथ वीर बने !
-
-## टक्कर की पहचान
-
-हम टकराव का पता कैसे लगाते हैं? हमें अपने खेल की वस्तुओं के बारे में सोचने की जरूरत है क्योंकि आयतें चलती हैं. आप ऐसा क्यों पूछ सकते हैं? खैर, किसी गेम ऑब्जेक्ट को खींचने के लिए उपयोग की जाने वाली छवि एक आयत है: इसमें एक `x`,` y`, `चौड़ाई` और `ऊँचाई` है।.
-
-यदि दो आयतें, अर्थात् एक नायक और शत्रु प्रतिच्छेद करते हैं, तो आपकी टक्कर होती है.
-तब क्या होना चाहिए यह खेल के नियमों पर निर्भर है. टक्कर का पता लगाने को लागू करने के लिए आपको निम्न की आवश्यकता है:
-
-1. एक खेल वस्तु का एक आयत प्रतिनिधित्व पाने का एक तरीका, कुछ इस तरह:
-
-   ```javascript
-   rectFromGameObject() {
-     return {
-       top: this.y,
-       left: this.x,
-       bottom: this.y + this.height,
-       right: this.x + this.width
-     }
-   }
-   ```
-
-2. एक तुलनात्मक फ़ंक्शन, यह फ़ंक्शन इस तरह दिख सकता है:
-
-   ```javascript
-   function intersectRect(r1, r2) {
-     return !(
-       r2.left > r1.right ||
-       r2.right < r1.left ||
-       r2.top > r1.bottom ||
-       r2.bottom < r1.top
-     );
-   }
-   ```
-
-## हम चीजों को कैसे नष्ट करते हैं
-
-एक खेल में चीजों को नष्ट करने के लिए आपको इस खेल को जानने देना चाहिए कि यह गेम लूप में इस आइटम को पेंट नहीं करना चाहिए जो एक निश्चित अंतराल पर ट्रिगर होता है. ऐसा करने का एक तरीका यह है कि गेम ऑब्जेक्ट को _मृत_ के रूप में चिह्नित किया जाए जब कुछ ऐसा होता है, जैसे:
-
-```javascript
-// collision happened
-enemy.dead = true;
-```
-
-फिर आप स्क्रीन को फिर से खोलने से पहले _ मृत _ वस्तुओं को छाँटने के लिए आगे बढ़ सकते हैं, जैसे कि:
-
-```javascript
-gameObjects = gameObject.filter((go) => !go.dead);
-```
-
-## हम एक लेजर को कैसे फायर करते हैं
-
-लेजर को फायर करना एक महत्वपूर्ण घटना का जवाब देने और एक निश्चित दिशा में जाने वाली वस्तु बनाने के लिए अनुवाद करता है. इसलिए हमें निम्नलिखित चरणों को पूरा करने की आवश्यकता है:
-
-1. **एक लेज़र ऑब्जेक्ट बनाएँ**: हमारे नायक के जहाज के ऊपर से, कि सृजन स्क्रीन के ऊपर की ओर बढ़ने लगता है.
-2. **एक महत्वपूर्ण घटना के लिए कोड संलग्न करें**: हमें कीबोर्ड पर एक की चुनने की आवश्यकता है जो लेजर की शूटिंग करने वाले खिलाड़ी का प्रतिनिधित्व करता है.
-3. **एक गेम ऑब्जेक्ट बनाएं जो लेजर की तरह दिखता है**:जब की दबाया जाता है.
-
-## हमारे लेजर पर शांत हो जाओ
-
-उदाहरण के लिए, हर बार जब आप एक की दबाते हैं, तो लेज़र को फायर करना पड़ता है. खेल को कम समय में कई लेज़रों के उत्पादन को रोकने के लिए हमें इसे ठीक करने की आवश्यकता है.
-फिक्स एक तथाकथित _कुलदावन_ को लागू करके है, एक टाइमर, जो यह सुनिश्चित करता है कि एक लेजर को केवल इतनी बार निकाल दिया जा सकता है। आप इसे निम्नलिखित तरीके से लागू कर सकते हैं
-
-```javascript
-class Cooldown {
-  constructor(time) {
-    this.cool = false;
-    setTimeout(() => {
-      this.cool = true;
-    }, time)
-  }
-}
-
-class Weapon {
-  constructor {
-  }
-  fire() {
-    if (!this.cooldown || this.cooldown.cool) {
-      // produce a laser
-      this.cooldown = new Cooldown(500);
-    } else {
-      // do nothing - it hasn't cooled down yet.
-    }
-  }
-}
-```
-
-✅ अपने आप को _कूलदावन_ की याद दिलाने के लिए अंतरिक्ष खेल श्रृंखला में सबक 1 का संदर्भ लें.
-
-## क्या बनना है
-
-आप पिछले पाठ से मौजूदा कोड (जिसे आपको साफ करना चाहिए और रिफलेक्ट करना चाहिए था) ले लेंगे, और इसे विस्तारित करेंगे। या तो भाग II के कोड से शुरू करें या [Part III-Starter](/your-work) में कोड का उपयोग करें.
-
-> टिप: वह लेजर जिसके साथ आप काम करेंगे, वह पहले से ही आपके असेट्स फ़ोल्डर में है और आपके कोड द्वारा संदर्भित है
-
-- **टक्कर की पहचान जोड़े**, जब एक लेजर कुछ के साथ टकराता है तो निम्नलिखित नियम लागू होने चाहिए:
-  1.  **लेजर दुश्मन को मारता है**: लेजर से मारने पर दुश्मन मर जाता है
-  2.  **लेजर शीर्ष स्क्रीन को मारता है**: यदि हमारी स्क्रीन का शीर्ष भाग हिट हो जाता है तो एक लेजर नष्ट हो जाता है
-  3.  **दुश्मन और हीरो की टक्कर**: एक दूसरे को मारने पर एक दुश्मन और नायक नष्ट हो जाता है
-  4.  **स्क्रीन के नीचे दुश्मन मारा**: एक दुश्मन और एक नायक नष्ट हो जाता है अगर दुश्मन स्क्रीन के नीचे मारता है
-
-## अनुशंसित कदम
-
-उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं। इसमें निम्नलिखित शामिल होना चाहिए:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-आप टाइप करके अपना प्रोजेक्ट `your_work` फ़ोल्डर शुरू करें:
-
-```bash
-cd your-work
-npm start
-```
-
-उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http: // localhost: 5000`। एक ब्राउज़र खोले और उस पते को डाले, अभी उसे नायक और सभी दुश्मनों को सौंप देना चाहिए, कुछ भी नहीं चल रहा है - अभी तक :).
-
-### कोड डाले
-
-1. **टकराव को संभालने के लिए अपने गेम ऑब्जेक्ट के आयत प्रतिनिधित्व को सेट करें** नीचे दिए गए कोड से आप 'GameObject` का आयत प्रतिनिधित्व प्राप्त कर सकते हैं। इसे बढ़ाने के लिए अपने गेमऑब्जेक्ट क्लास को संपादित करें:
-
-   ```javascript
-   rectFromGameObject() {
-       return {
-         top: this.y,
-         left: this.x,
-         bottom: this.y + this.height,
-         right: this.x + this.width,
-       };
-     }
-   ```
-
-2. **कोड जोड़ें जो टकराव की जाँच करता है** यह एक नया कार्य होगा जो परीक्षण करता है कि क्या दो आयतें प्रतिच्छेद करती हैं::
-
-   ```javascript
-   function intersectRect(r1, r2) {
-     return !(
-       r2.left > r1.right ||
-       r2.right < r1.left ||
-       r2.top > r1.bottom ||
-       r2.bottom < r1.top
-     );
-   }
-   ```
-
-3. **लेजर फायरिंग क्षमता जोड़ें**
-
-   1. **की-ईवेंट संदेश जोड़ें**. _ स्पेस _ की को हीरो शिप के ठीक ऊपर एक लेजर बनाना चाहिए। संदेश ऑब्जेक्ट में तीन स्थिरांक जोड़ें:
-
-      ```javascript
-       KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
-       COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
-       COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
-      ```
-
-   1. **अंतरिक्ष की संभालें**. रिक्त स्थान को संभालने के लिए `window.addEventListener` कीअप फंक्शन संपादित करें:
-
-      ```javascript
-        } else if(evt.keyCode === 32) {
-          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
-        }
-      ```
-
-   1. **श्रोताओं को जोड़ें**.`InitGame()` फ़ंक्शन को संपादित करे यह सुनिश्चित करने के लिए कि स्पेस बार हिट होने पर हीरो फायर कर सकता है:
-
-      ```javascript
-      eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
-       if (hero.canFire()) {
-         hero.fire();
-       }
-      ```
-
-      और एक नया `eventEmitter.on()` समारोह जोड़ने के लिए व्यवहार सुनिश्चित करने के लिए जब एक दुश्मन एक लेजर के साथ टकराता है:
-
-      ```javascript
-      eventEmitter.on(
-        Messages.COLLISION_ENEMY_LASER,
-        (_, { first, second }) => {
-          first.dead = true;
-          second.dead = true;
-        }
-      );
-      ```
-
-   1. **बस्तु चाल**, धीरे-धीरे स्क्रीन के शीर्ष पर लेजर चाल सुनिश्चित करें। आप एक नया लेजर वर्ग बनाएंगे जो `GameObject` का विस्तार करता है, जैसा कि आपने पहले किया है:
-
-      ```javascript
-      class Laser extends GameObject {
-        constructor(x, y) {
-          super(x, y);
-          (this.width = 9), (this.height = 33);
-          this.type = "Laser";
-          this.img = laserImg;
-          let id = setInterval(() => {
-            if (this.y > 0) {
-              this.y -= 15;
-            } else {
-              this.dead = true;
-              clearInterval(id);
-            }
-          }, 100);
-        }
-      }
-      ```
-
-   1. **तकराब संभालना**,लेजर के लिए टकराव के नियमों को लागू करें। एक `updateGameObjects()` फ़ंक्शन जोड़ें जो हिट के लिए वस्तुओं को टकराने का परीक्षण करता है
-
-      ```javascript
-      function updateGameObjects() {
-        const enemies = gameObjects.filter((go) => go.type === "Enemy");
-        const lasers = gameObjects.filter((go) => go.type === "Laser");
-        // laser hit something
-        lasers.forEach((l) => {
-          enemies.forEach((m) => {
-            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
-              eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
-                first: l,
-                second: m,
-              });
-            }
-          });
-        });
-
-        gameObjects = gameObjects.filter((go) => !go.dead);
-      }
-      ```
-
-      `Window.onload` में अपने गेम लूप में`updateGameObjects()`जोड़ना सुनिश्चित करें.
-
-   1. लेजर पर **कुलदावन लागू** करें, इसलिए यह बार बार थोक सकता है.
-
-      अंत में, हीरो वर्ग को संपादित करें ताकि यह कुलडाउन हो सके:
-
-      ```javascript
-      class Hero extends GameObject {
-        constructor(x, y) {
-          super(x, y);
-          (this.width = 99), (this.height = 75);
-          this.type = "Hero";
-          this.speed = { x: 0, y: 0 };
-          this.cooldown = 0;
-        }
-        fire() {
-          gameObjects.push(new Laser(this.x + 45, this.y - 10));
-          this.cooldown = 500;
-
-          let id = setInterval(() => {
-            if (this.cooldown > 0) {
-              this.cooldown -= 100;
-            } else {
-              clearInterval(id);
-            }
-          }, 200);
-        }
-        canFire() {
-          return this.cooldown === 0;
-        }
-      }
-      ```
-
-इस बिंदु पर, आपके गेम में कुछ कार्यक्षमता है! आप अपने तीर की के साथ नेविगेट कर सकते हैं, अपने स्पेस बार के साथ एक लेजर फायर कर सकते हैं, और जब आप उन्हें मारते हैं तो दुश्मन गायब हो जाते हैं। बहुत बढ़िया!
-
----
-
-## 🚀 चुनौती
-
-एक विस्फोट जोड़ें! [स्पेस आर्ट रेपो](../solution/spaceArt/readme.txt) में खेल की परिसंपत्तियों पर एक नज़र डालें और जब कोई एलियन टकराता है तो विस्फोट को जोड़ने का प्रयास करें
-
-## पोस्ट-व्याख्यान प्रश्नोत्तरी
-
-[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-इस प्रकार अपने खेल में अंतराल के साथ प्रयोग करें. जब आप उन्हें बदलते हैं तो क्या होता है? [जावास्क्रिप्ट समय घटनाओं](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/) के बारे में और पढ़ें.
-
-## असाइनमेंट
-
-[टक्करों का अन्वेषण करें](assignment.hi.md)
diff --git a/6-space-game/4-collision-detection/translations/README.it.md b/6-space-game/4-collision-detection/translations/README.it.md
deleted file mode 100644
index 0e7bd5f3..00000000
--- a/6-space-game/4-collision-detection/translations/README.it.md
+++ /dev/null
@@ -1,297 +0,0 @@
-# Costruire un Gioco Spaziale Parte 4: Aggiungere un Laser e Rilevare le Collisioni
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=it)
-
-In questa lezione si imparererà come fare fuoco con i laser con JavaScript! Verranno aggiunte due cose al gioco:
-
-- **Un laser**: questo laser viene sparato dall'astronave del proprio eroe e verticalmente verso l'alto
-- **Rilevamento delle collisioni**, come parte dell'implementazione della capacità di *sparare* , si aggiungeranno anche alcune simpatiche regole di gioco:
-   - Il **laser colpisce il nemico**: il nemico muore se colpito da un laser
-   - Il **laser raggiunge lo schermo superiore**: un laser viene distrutto se raggiunge la parte superiore dello schermo
-   - **Collisione tra nemico ed eroe**: un nemico e l'eroe vengono distrutti se entrano in collisione
-   - Il **nemico raggiunge la parte inferiore dello schermo**: un nemico e un eroe vengono distrutti se il nemico raggiunge la parte inferiore dello schermo
-
-In breve, il giocatore - *l'eroe* - deve colpire tutti i nemici con un laser prima che riescano a raggiungere la parte inferiore dello schermo.
-
-✅ Fare una piccola ricerca sul primissimo gioco per computer mai scritto. Qual era la sua funzionalità?
-
-Diventiamo eroici insieme!
-
-## Rilevamento della collisione.
-
-Come si rilevano le collisioni? Occorre pensare agli oggetti di gioco come rettangoli che si muovono. Perché, ci si potrebbe chiedere? Bene, l'immagine usata per disegnare un oggetto di gioco è un rettangolo: ha una `x`, una `y`, una larghezza (`width`) e un'altezza (`height`).
-
-Se due rettangoli, cioè un eroe e un nemico *si intersecano*, si verifica una collisione. Ciò che dovrebbe accadere dipende dalle regole del gioco. Per implementare il rilevamento delle collisioni è quindi necessario quanto segue:
-
-1. Un modo per ottenere una rappresentazione rettangolare di un oggetto di gioco, qualcosa del genere:
-
-   ```javascript
-   rectFromGameObject() {
-     return {
-       top: this.y,
-       left: this.x,
-       bottom: this.y + this.height,
-       right: this.x + this.width
-     }
-   }
-   ```
-
-2. Una funzione di confronto, questa funzione può assomigliare a questa:
-
-   ```javascript
-   function intersectRect(r1, r2) {
-     return !(r2.left > r1.right ||
-       r2.right < r1.left ||
-       r2.top > r1.bottom ||
-       r2.bottom < r1.top);
-   }
-   ```
-
-## Come si distruggono le cose
-
-Per distruggere le cose in un gioco si deve far sapere al gioco stesso che non dovrebbe più disegnare un certo oggetto nel ciclo di gioco che si attiva in un certo intervallo. Un modo per farlo è contrassegnare un oggetto del gioco come *morto* quando succede qualcosa, in questo modo:
-
-```javascript
-// si è verificata una collisione
-enemy.dead = true
-```
-
-Quindi si procede a filtrare gli oggetti *morti* prima di ridipingere lo schermo, in questo modo:
-
-```javascript
-gameObjects = gameObject.filter(go => !go.dead);
-```
-
-## Come si spara un laser
-
-Sparare un laser si traduce nel rispondere a un evento da tastiera e creare un oggetto che si muove in una certa direzione. Occorre quindi eseguire i seguenti passaggi:
-
-1. **Creare un oggetto laser**: dalla cima dell' astronave dell'eroe, che al momento della creazione inizia a muoversi in alto verso la parte superiore dello schermo.
-2. **Allegare codice a un evento da tastiera**: si deve scegliere un tasto sulla tastiera che rappresenti il giocatore che spara il laser.
-3. **Creare un oggetto di gioco che assomigli a un laser** quando viene premuto il tasto.
-
-## Raffreddamento del laser
-
-Il laser deve attivarsi ogni volta che si preme un tasto, come ad esempio la *barra spazio*. Per evitare che il gioco produca troppi laser in breve tempo, si deve risolvere questo problema. La soluzione è implementando un cosiddetto raffreddamento (*cooldown*), un timer, che garantisce che un laser possa essere sparato solo a intervallo determinato. Su può implementare nel modo seguente:
-
-```javascript
-class Cooldown {
-  constructor(time) {
-    this.cool = false;
-    setTimeout(() => {
-      this.cool = true;
-    }, time)
-  }
-}
-
-class Weapon {
-  constructor {
-  }
-  fire() {
-    if (!this.cooldown || this.cooldown.cool) {
-      // produce un laser
-      this.cooldown = new Cooldown(500);
-    } else {
-      // non fa nulla - non si è ancora raffreddato
-    }
-  }
-}
-```
-
-✅ Fare riferimento alla lezione 1 della serie gioco spaziale per quanto riguarda i tempi di *cooldown* (raffreddamento).
-
-## Cosa costruire
-
-Si prende il codice esistente (che dovrebbe essere stato ripulito e rifattorizzato) dalla lezione precedente e lo si estende Si inizia con il codice della parte II o si usa il codice [della parte III-starter](../your-work).
-
-> suggerimento: il laser con cui lavorare è già nella cartella asset ed è referenziato nel proprio codice
-
-- **Aggiungere il rilevamento delle collisioni**, quando un laser entra in collisione con qualcosa dovrebbero essere applicate le seguenti regole:
-   1. Il **laser colpisce il nemico**: il nemico muore se colpito da un laser
-   2. Il **laser raggiunge lo schermo superiore**: un laser viene distrutto se raggiunge la parte superiore dello schermo
-   3. **Collisione tra nemico ed eroe**: un nemico e l'eroe vengono distrutti se entrano in collisione
-   4. Il **nemico colpisce la parte inferiore dello schermo**: un nemico e un eroe vengono distrutti se il nemico raggiunge la parte inferiore dello schermo
-
-## Passaggi consigliati
-
-Individuare i file che già sono stati creati nella sottocartella `your-work`. Dovrebbe contenere quanto segue:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-Si fa partire il progetto nella cartella `your_work` digitando:
-
-```bash
-cd your-work
-npm start
-```
-
-Quanto sopra avvierà un server HTTP sull'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo, in questo momento dovrebbe rendere l'eroe e tutti i nemici.
-
-### Aggiungere codice
-
-1. **Impostare una rappresentazione di un rettangolo di un oggetto di gioco, per gestire la collisione**. Il codice seguente consente di ottenere una rappresentazione di un rettangolo di un `GameObject`. Modificare la classe GameObject per estenderla:
-
-   ```javascript
-   rectFromGameObject() {
-       return {
-         top: this.y,
-         left: this.x,
-         bottom: this.y + this.height,
-         right: this.x + this.width,
-       };
-     }
-   ```
-
-2. **Aggiungere il codice che controlla la collisione** Questa sarà una nuova funzione che verifica se due rettangoli si intersecano:
-
-   ```javascript
-   function intersectRect(r1, r2) {
-     return !(
-       r2.left > r1.right ||
-       r2.right < r1.left ||
-       r2.top > r1.bottom ||
-       r2.bottom < r1.top
-     );
-   }
-   ```
-
-3. **Aggiungere capacità di fuoco laser**
-   1. **Aggiungere messaggio per un evento da tastiera**. Il tasto spazio (*space*) dovrebbe creare un laser appena sopra la astronave dell'eroe. Aggiungere tre costanti nell'oggetto Messages:
-
-      ```javascript
-       KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
-       COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
-       COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
-      ```
-
-   1. **Gestire il tasto barra spazio** Modificare la funzione keyup di `window.addEventListener` per gestire la barra spazio:
-
-      ```javascript
-        } else if(evt.keyCode === 32) {
-          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
-        }
-      ```
-
-   1. **Aggiungere listener**. Modificare la funzione `initGame()` per assicurarsi che l'eroe possa sparare quando viene premuta la barra spazio:
-
-      ```javascript
-      eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
-       if (hero.canFire()) {
-         hero.fire();
-       }
-      ```
-
-      e aggiungere una nuova funzione `eventEmitter.on()` per garantire il comportamento quando un nemico si scontra con un laser:
-
-      ```javascript
-      eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
-        first.dead = true;
-        second.dead = true;
-      })
-      ```
-
-   1. **Spostare l'oggetto**, assicurarsi che il laser si muova gradualmente verso parte superiore dello schermo. Creare una nuova classe Laser che estende `GameObject`, come fatto precedentemente:
-
-      ```javascript
-        class Laser extends GameObject {
-        constructor(x, y) {
-          super(x,y);
-          (this.width = 9), (this.height = 33);
-          this.type = 'Laser';
-          this.img = laserImg;
-          let id = setInterval(() => {
-            if (this.y > 0) {
-              this.y -= 15;
-            } else {
-              this.dead = true;
-              clearInterval(id);
-            }
-          }, 100)
-        }
-      }
-      ```
-
-   1. **Gestire le collisioni**, implementare le regole di collisione per il laser. Aggiungere una funzione `updateGameObjects()` che verifica gli oggetti in collisione per quelli colpiti
-
-      ```javascript
-      function updateGameObjects() {
-        const enemies = gameObjects.filter(go => go.type === 'Enemy');
-        const lasers = gameObjects.filter((go) => go.type === "Laser");
-      // il laser ha colpito qualcosa
-        lasers.forEach((l) => {
-          enemies.forEach((m) => {
-            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
-            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
-              first: l,
-              second: m,
-            });
-          }
-         });
-      });
-
-        gameObjects = gameObjects.filter(go => !go.dead);
-      }  
-      ```
-
-      Assicurarsi di aggiungere `updateGameObjects()` nel ciclo di gioco in `window.onload`.
-
-   4. **Implementare il** raffreddamento sul laser, in modo che possa essere sparato solo a determinati intervalli.
-
-      Infine, modificare la classe Hero in modo che possa eseguire il raffreddamento:
-
-      ```javascript
-      class Hero extends GameObject {
-       constructor(x, y) {
-         super(x, y);
-         (this.width = 99), (this.height = 75);
-         this.type = "Hero";
-         this.speed = { x: 0, y: 0 };
-         this.cooldown = 0;
-       }
-       fire() {
-         gameObjects.push(new Laser(this.x + 45, this.y - 10));
-         this.cooldown = 500;
-
-         let id = setInterval(() => {
-           if (this.cooldown > 0) {
-             this.cooldown -= 100;
-           } else {
-             clearInterval(id);
-           }
-         }, 200);
-       }
-       canFire() {
-         return this.cooldown === 0;
-       }
-      }
-      ```
-
-A questo punto, il tuo gioco ha alcune funzionalità! Si può navigare con i tasti freccia, sparare un laser con la barra spaziatrice e i nemici scompaiono quando colpiti. Ottimo lavoro!
-
----
-
-## 🚀 Sfida
-
-Aggiungere un'esplosione! Dare un'occhiata alle risorse di gioco [nel repository Space Art](../solution/spaceArt/readme.txt) e provare ad aggiungere un'esplosione quando il laser colpisce un alieno
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=it)
-
-## Revisione e Auto Apprendimento
-
-Sperimentare con gli intervalli nel proprio gioco fino ad ora. Cosa succede quando si cambiano? Ulteriori informazioni sugli [eventi di temporizzazione JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
-
-## Compito
-
-[Esplorare le collisioni](assignment.it.md)
diff --git a/6-space-game/4-collision-detection/translations/README.ja.md b/6-space-game/4-collision-detection/translations/README.ja.md
deleted file mode 100644
index 3f0a83bb..00000000
--- a/6-space-game/4-collision-detection/translations/README.ja.md
+++ /dev/null
@@ -1,298 +0,0 @@
-# スペースゲーム構築プロジェクト その 4: レーザーを追加して衝突を検出する
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=ja)
-
-このレッスンでは、JavaScript でレーザーを撃つ方法を学びます! 私たちはゲームに2つのものを追加します。
-
-- **レーザー**: このレーザーはあなたのヒーローの宇宙船から垂直に上向きに撃たれます
-- **衝突検出**、発射する能力を実装する一環として、我々はまたいくつかの素敵なゲームのルールを追加します
-   - **レーザーが敵に当たる**: レーザーが当たると敵が破壊される
-   - **レーザーがトップ画面に当たる**: 画面上部に当たるとレーザーが破壊されます
-   - **敵とヒーローの衝突**: 敵とヒーローがぶつかると破壊されます
-   - **敵が画面の下に当たる**: 敵が画面下に当たると敵とヒーローが破壊されます
-
-要するに、あなた - *ヒーロー* - は画面の下部に移動するために管理する前に、レーザーですべての敵をヒットする必要があります。
-
-✅ これまでに書かれた最初のコンピュータゲームについて少し調べてみてください。その機能は何だったのでしょうか?
-
-一緒にヒーローになりましょう!
-
-## 衝突検出
-
-どのようにして衝突を検出するのか? ゲームオブジェクトを移動する長方形と考える必要があります。なぜでしょうか? ゲームオブジェクトの描画に使われる画像は矩形です。`x`、`y`、`width`、`height` を持っています。
-
-2 つの長方形、つまりヒーローと敵が交差すると、衝突します。そのときに何が起こるかは、ゲームのルール次第です。したがって、衝突検出を実装するためには以下のものが必要です。
-
-1. ゲームオブジェクトの矩形表現を取得する方法。こんな感じです
-
-   ```javascript
-   rectFromGameObject() {
-     return {
-       top: this.y,
-       left: this.x,
-       bottom: this.y + this.height,
-       right: this.x + this.width
-     }
-   }
-   ```
-
-2. 比較関数で、この関数は次のようになります
-
-   ```javascript
-   function intersectRect(r1, r2) {
-     return !(r2.left > r1.right ||
-       r2.right < r1.left ||
-       r2.top > r1.bottom ||
-       r2.bottom < r1.top);
-   }
-   ```
-
-## オブジェクトをどうやって破壊するか
-
-ゲーム内のオブジェクトを破壊するには、一定の間隔で発生するゲームループの中で、このアイテムをペイントしないようにゲームに知らせる必要があります。これを行うには、以下のように、何かが起こったときにゲームオブジェクトを *dead* としてマークする方法があります。
-
-```javascript
-// 衝突が発生します
-enemy.dead = true
-```
-
-その後、画面を再描画する前に、このように、*dead* オブジェクトをソートしていきます。
-
-```javascript
-gameObjects = gameObject.filter(go => !go.dead);
-```
-
-## レーザーの撃ち方
-
-レーザーを発射することは、キーイベントに反応して、特定の方向に移動するオブジェクトを作成することになります。そのため、以下のような作業を行う必要があります。
-
-1. **レーザーオブジェクトを作成します**: ヒーローの船の上部から、作成時に画面の上部に向かって上向きに移動を開始します
-2. **キーイベントにコードを添付します**: レーザーを撮影しているプレイヤーを表すキーボードのキーを選択する必要があります
-3. キーを押すと**レーザーのように見えるゲームオブジェクトを作成します**
-
-## レーザーのクールダウン
-
-レーザーは、例えば*スペース*のように、キーを押すたびに発射する必要があります。短時間で多くのレーザーが発射されるのを防ぐために、この問題を解決する必要があります。これを修正するには、いわゆる *クールダウン*、タイマーを実装することで、レーザーはそれほど頻繁にしか発射することができないことを保証します。以下の方法で実装できます。
-
-```javascript
-class Cooldown {
-  constructor(time) {
-    this.cool = false;
-    setTimeout(() => {
-      this.cool = true;
-    }, time)
-  }
-}
-
-class Weapon {
-  constructor {
-  }
-  fire() {
-    if (!this.cooldown || this.cooldown.cool) {
-      // レーザーを作る
-      this.cooldown = new Cooldown(500);
-    } else {
-      // 何もしない-まだクールダウンしていない。
-    }
-  }
-}
-```
-
-✅ スペースゲームシリーズのレッスン1を参照して、*クールダウン*について思い出してください。
-
-## 何を構築するか
-
-前回のレッスンで使用した既存のコード (クリーンアップしてリファクタリングしたはずのコード) を使用して、それを拡張します。
-パート II のコードから始めるか、[パートIII - スターター](../../your-work)のコードを使用してください。
-
-> ヒント: 作業に使用するレーザーはすでにアセットフォルダにあり、コードで参照されています。
-
-- **衝突検出を追加します**、レーザーが何かに衝突するときは、次のルールを適用する必要があります
-   1. **レーザーが敵に当たる**: レーザーが当たると敵が破壊される
-   2. **レーザーが画面上部に当たる**: レーザーが画面の上部に当たると破壊される
-   3. **敵とヒーローの衝突**: 敵とヒーローがぶつかると破壊される
-   4. **画面下に敵が当たる**: 敵が画面下部に当たると敵とヒーローが破壊される
-
-## 推奨される手順
-
-あなたのために作成されたファイルを `your-work` サブフォルダ内で探します。以下のファイルが含まれているはずです。
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-次のコマンドをタイピングして、あなたのプロジェクトを `your_work` フォルダから開始します。
-
-```bash
-cd your-work
-npm start
-```
-
-上記は、`http://localhost:5000` というアドレスで HTTP サーバを起動します。ブラウザを開いてそのアドレスを入力すると、今はヒーローと全ての敵が表示されるはずですが、まだ何も動いていません。
-
-### コードの追加
-
-1. **衝突を処理するためにゲームオブジェクトの矩形表現を設定する** 以下のコードでは、`GameObject` の矩形表現を取得することができます。GameObject クラスを編集して拡張します
-
-    ```javascript
-    rectFromGameObject() {
-        return {
-          top: this.y,
-          left: this.x,
-          bottom: this.y + this.height,
-          right: this.x + this.width,
-        };
-      }
-    ```
-
-2. **衝突をチェックするコードの追加** これは、2 つの矩形が交差するかどうかをテストする新しい関数になります
-
-    ```javascript
-    function intersectRect(r1, r2) {
-      return !(
-        r2.left > r1.right ||
-        r2.right < r1.left ||
-        r2.top > r1.bottom ||
-        r2.bottom < r1.top
-      );
-    }
-    ```
-
-3. **レーザー発射機能の追加**
-   1. **キーイベントメッセージを追加します**。*スペース*キーはヒーローの宇宙船の真上にレーザーを作成する必要があります。Messages オブジェクトに3つの定数を追加します
-
-       ```javascript
-        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
-        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
-        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
-       ```
-
-   1. **スペースキーを処理します**。スペースを扱うために、`window.addEventListener` のキーアップ関数を編集します
-
-      ```javascript
-        } else if(evt.keyCode === 32) {
-          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
-        }
-      ```
-
-    1. **リスナーを追加します**。スペースバーがヒットした時にヒーローが発射できるように `initGame()` 関数を編集します
-
-       ```javascript
-       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
-        if (hero.canFire()) {
-          hero.fire();
-        }
-       ```
-
-       そして、敵がレーザーに衝突したときの動作を保証するために、新しい `eventEmitter.on()` 関数を追加します
-
-          ```javascript
-          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
-            first.dead = true;
-            second.dead = true;
-          })
-          ```
-
-   1. **オブジェクトを移動させ**、レーザーが徐々に画面上部に移動するようにします。先ほどと同じように `GameObject`を継承した Laser クラスを新たに作成します
-   
-      ```javascript
-        class Laser extends GameObject {
-        constructor(x, y) {
-          super(x,y);
-          (this.width = 9), (this.height = 33);
-          this.type = 'Laser';
-          this.img = laserImg;
-          let id = setInterval(() => {
-            if (this.y > 0) {
-              this.y -= 15;
-            } else {
-              this.dead = true;
-              clearInterval(id);
-            }
-          }, 100)
-        }
-      }
-      ```
-
-   1. **衝突の処理**、レーザーの衝突ルールの実装 衝突したオブジェクトのヒットをテストする `updateGameObjects()` 関数を追加します
-
-      ```javascript
-      function updateGameObjects() {
-        const enemies = gameObjects.filter(go => go.type === 'Enemy');
-        const lasers = gameObjects.filter((go) => go.type === "Laser");
-      // レーザーが当たる
-        lasers.forEach((l) => {
-          enemies.forEach((m) => {
-            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
-            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
-              first: l,
-              second: m,
-            });
-          }
-         });
-      });
-
-        gameObjects = gameObjects.filter(go => !go.dead);
-      }  
-      ```
-
-      必ず `window.onload` のゲームループに `updateGameObjects()` を追加してください。
-
-   4. レーザーに**クールダウンを実装**して、それがそんなに頻繁にしか発射できないようにします
-
-      最後に、Hero クラスをクールダウンできるように編集します
-
-       ```javascript
-      class Hero extends GameObject {
-        constructor(x, y) {
-          super(x, y);
-          (this.width = 99), (this.height = 75);
-          this.type = "Hero";
-          this.speed = { x: 0, y: 0 };
-          this.cooldown = 0;
-        }
-        fire() {
-          gameObjects.push(new Laser(this.x + 45, this.y - 10));
-          this.cooldown = 500;
-    
-          let id = setInterval(() => {
-            if (this.cooldown > 0) {
-              this.cooldown -= 100;
-            } else {
-              clearInterval(id);
-            }
-          }, 200);
-        }
-        canFire() {
-          return this.cooldown === 0;
-        }
-      }
-      ```
-
-この時点で、あなたのゲームはいくつかの機能を持っています! 矢印キーで移動したり、スペースバーでレーザーを発射したり、敵はあなたがそれらを打つときに消えることができます。よくできました!
-
----
-
-## 🚀 チャレンジ
-
-爆発を追加しましょう! [スペースアートレポ](../../solution/spaceArt/readme.txt)のゲームアセットを見て、レーザーがエイリアンに当たったときに爆発を追加してみてください。
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=ja)
-
-## 復習と自己学習
-
-これまでのゲームの間隔を実験してみてください。それらを変更するとどうなるでしょうか? [JavaScript のタイミングイベント](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/)についての詳細はこちら。
-
-## 課題
-
-[衝突を調べる](assignment.ja.md)
diff --git a/6-space-game/4-collision-detection/translations/README.ko.md b/6-space-game/4-collision-detection/translations/README.ko.md
deleted file mode 100644
index e1eadabd..00000000
--- a/6-space-game/4-collision-detection/translations/README.ko.md
+++ /dev/null
@@ -1,297 +0,0 @@
-# Space 게임 제작하기 파트 4: 레이저 추가하고 충돌 감지하기
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=ko)
-
-이 강의에서는 JavaScript로 레이저를 쏘는 방법을 배웁니다! 게임에 다음 두 가지를 추가합니다:
-
-- **레이저**: 이 레이저는 영웅 우주선에서 수직 위쪽으로 발사되며
-- **충돌 감지**, *쏘는* 기능 구현의 부분으로 몇 가지 멋진 게임 규칙을 추가할 예정입니다:
-   - **레이저로 적 때리기**: 레이저에 맞으면 적은 사망합니다
-   - **레이저로 화면 상단 도달하기**: 화면의 상단 부분을 맞으면 레이저는 파괴됩니다
-   - **적과 영웅 충돌하기**: 적과 영웅이 부딪히면 파괴됩니다
-   - **적이 화면 하단 도달하기**: 적이 화면 하단에 부딪히면 적과 영웅이 파괴됩니다
-
-짧게 요약해보면, 여러분은 -- *영웅* -- 모든 적들이 화면 아래로 내려오기 전에 레이저로 모든 적을 때려야 합니다.
-
-✅ 지금까지 작성된 최초의 컴퓨터 게임에 대해 약간 알아보새요. 어떻게 작동하나요?
-
-함께 영웅이 됩시다!
-
-## 충돌 감지하기
-
-충돌은 어떻게 감지할까요? 게임 객체를 움직이는 직사각형으로 생각해야 합니다. 왜 물어볼까요? 게임 객체를 그리는 데 사용되는 이미지는 직사각형이기 때문입니다: `x`, `y`, `width` 그리고 `height`가 있습니다.
-
-만약 두 직사각형이, 즉 영웅과 적이 *교차*하면, 충돌합니다. 그런 뒤에 발생할 일은 게임의 룰에 달려 있습니다. 따라서 충돌 감지를 구현하려면 다음이 필요합니다:
-
-1. 게임 객체의 직사각형 표현을 얻는 방법은, 다음과 같습니다:
-
-   ```javascript
-   rectFromGameObject() {
-     return {
-       top: this.y,
-       left: this.x,
-       bottom: this.y + this.height,
-       right: this.x + this.width
-     }
-   }
-   ```
-
-2. 비교 함수는, 다음 함수와 같습니다:
-
-   ```javascript
-   function intersectRect(r1, r2) {
-     return !(r2.left > r1.right ||
-       r2.right < r1.left ||
-       r2.top > r1.bottom ||
-       r2.bottom < r1.top);
-   }
-   ```
-
-## 어떻게 파괴할까요
-
-게임에서 물건을 파괴하려면 특정 간격으로 연결되는 게임 루프에서 이 아이템을 더 이상 그리지 않아야 한다고 게임에 알려야 합니다. 이 방법은 다음과 같이, 어떤 일이 발생했을 때 게임 객체를 *dead*으로 표시합니다:
-
-```javascript
-// collision happened
-enemy.dead = true
-```
-
-그러고 다음과 같이, 화면을 다시 그리기 전에 *dead* 객체를 정렬합니다:
-
-```javascript
-gameObjects = gameObject.filter(go => !go.dead);
-```
-
-## 어떻게 레이저를 발사할까요
-
-레이저를 발사하는 것은 키-이벤트에 반응하고 특정 방향으로 움직이는 객체를 만드는 것으로 바뀝니다. 따라서 다음 단계를 해야합니다:
-
-1. **레이저 객체 생성**: 영웅 함선의 상단에서, 생성되고 화면 상단으로 올라가기 시작합니다.
-2. **키 이벤트에 코드 첨부**: 레이저를 쏘는 플레이어로 특정할 키보드의 키를 선택해야 합니다.
-3. 키를 누를 때, **레이저처럼 보이는 게임 객체를 생성합니다**.
-
-## 레이저 쿨다운
-
-레이저는 *space*와 같은 키를 누를 때마다 발사되어야 합니다. 게임이 짧은 시간에 너무 많은 레이저를 생성하는 것을 막으려면 이를 해결해야 합니다. 해결 방법은 레이저를 자주 발사하도록 보장하는 타이머인, *cooldown*을 구현하는 것입니다. 다음과 같이 구현할 수 있습니다:
-
-```javascript
-class Cooldown {
-  constructor(time) {
-    this.cool = false;
-    setTimeout(() => {
-      this.cool = true;
-    }, time)
-  }
-}
-
-class Weapon {
-  constructor {
-  }
-  fire() {
-    if (!this.cooldown || this.cooldown.cool) {
-      // produce a laser
-      this.cooldown = new Cooldown(500);
-    } else {
-      // do nothing - it hasn't cooled down yet.
-    }
-  }
-}
-```
-
-✅ *cooldowns*에 대해 복습하려면 space 게임 시리즈의 1강을 참조하세요.
-
-## 무엇을 만드나요
-
-이전 강의에 존재한 기존 코드 (정리하고 리팩토링함)를 가져와서, 확장합니다. 파트 II에서 코드를 시작하거나 [Part III- starter](../your-work) 코드를 사용합니다.
-
-> tip: 작업할 레이저는 이미 어셋 폴더에 있으므로 코드에서 참조합니다
-
-- **충돌 감지를 추가합니다**, 레이저가 무언가 부딪칠 때 다음 규칙이 적용되어야 합니다:
-   1. **레이저가 적 때리기**: 레이저에 맞으면 적은 사망합니다
-   2. **레이저로 화면 상단 도달하기**: 화면의 상단 부분을 맞으면 레이저는 부서집니다
-   3. **적과 영웅 충돌하기**: 적과 영웅이 부딪히면 파괴됩니다
-   4. **적이 화면 하단 도달하기**: 적이 화면 하단에 부딪히면 적과 영웅이 파괴됩니다
-
-## 권장 단계
-
-`your-work` 하위 폴더에 생성된 파일을 찾습니다. 이는 다음을 포함하고 있어야 합니다:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-타이핑하여 `your_work` 폴더에서 프로젝트를 시작합니다:
-
-```bash
-cd your-work
-npm start
-```
-
-위 코드는 `http://localhost:5000` 주소에서 HTTP 서버를 시작합니다. 브라우저를 열고 해당 주소를 입력하세요, 지금 바로 영웅과 모든 적을 렌더링해야합니다, 하지만 다 움직이지 않습니다 - 아직 :).
-
-### 코드 추가하기
-
-1. ***충돌을 처리하기 위해 게임 객체의 사각형 표현을 설정합니다** 아래 코드를 쓰면 `GameObject`의 사각형 표현을 얻을 수 있습니다. GameObject 클래스를 편집하여 확장합니다:
-
-    ```javascript
-    rectFromGameObject() {
-        return {
-          top: this.y,
-          left: this.x,
-          bottom: this.y + this.height,
-          right: this.x + this.width,
-        };
-      }
-    ```
-
-2. **충돌을 확인하는 코드를 추가합니다** 이것은 두 개의 직사각형이 교차되는가에 대한 여부를 테스트하는 새로운 함수입니다:
-
-    ```javascript
-    function intersectRect(r1, r2) {
-      return !(
-        r2.left > r1.right ||
-        r2.right < r1.left ||
-        r2.top > r1.bottom ||
-        r2.bottom < r1.top
-      );
-    }
-    ```
-
-3. **레이저 발사 기능 추가**
-   1. **키-이벤트 메시지 추가하기**. *space* 키는 영웅 함선 바로 위에 레이저를 만들어줘야 합니다. Messages 객체에 세 개의 상수를 추가합니다:
-
-       ```javascript
-        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
-        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
-        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
-       ```
-
-   1. **space 키 제어하기**. `window.addEventListener` 키업 함수로 spaces를 제어합니다:
-
-      ```javascript
-        } else if(evt.keyCode === 32) {
-          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
-        }
-      ```
-
-    1. **리스너 추가하기**. `initGame()` 함수를 편집해서 space 바를 눌렀을 때 hero가 발사할 수 있도록 합니다:
-
-       ```javascript
-       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
-        if (hero.canFire()) {
-          hero.fire();
-        }
-       ```
-
-       새로운 `eventEmitter.on ()` 함수를 추가해서 적이 레이저와 부딪칠 때 동작하도록 합니다:
-
-          ```javascript
-          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
-            first.dead = true;
-            second.dead = true;
-          })
-          ```
-
-   1. **객체 움직이기**, 레이저가 화면 상단으로 조금씩 이동하고 있는지 확인합니다. 저번처럼, `GameObject`를 확장하는 새로운 Laser 클래스를 만듭니다:
-   
-      ```javascript
-        class Laser extends GameObject {
-        constructor(x, y) {
-          super(x,y);
-          (this.width = 9), (this.height = 33);
-          this.type = 'Laser';
-          this.img = laserImg;
-          let id = setInterval(() => {
-            if (this.y > 0) {
-              this.y -= 15;
-            } else {
-              this.dead = true;
-              clearInterval(id);
-            }
-          }, 100)
-        }
-      }
-      ```
-
-   1. **충돌 제어하기**, 레이저에 대한 충돌 규칙을 구현합니다. 적에 충돌하는 객체를 테스트하는 `updateGameObjects ()` 함수를 추가합니다:
-
-      ```javascript
-      function updateGameObjects() {
-        const enemies = gameObjects.filter(go => go.type === 'Enemy');
-        const lasers = gameObjects.filter((go) => go.type === "Laser");
-      // laser hit something
-        lasers.forEach((l) => {
-          enemies.forEach((m) => {
-            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
-            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
-              first: l,
-              second: m,
-            });
-          }
-         });
-      });
-
-        gameObjects = gameObjects.filter(go => !go.dead);
-      }  
-      ```
-
-      `window.onload`의 게임 루프에 `updateGameObjects()`를 추가해야 합니다.
-
-   4. 레이저의 **cooldown을 구현합니다**, 그래서 자주 발사할 수 있습니다.
-
-      마지막으로, cooldown을 할 수 있도록 Hero 클래스를 편집합니다:
-
-       ```javascript
-      class Hero extends GameObject {
-        constructor(x, y) {
-          super(x, y);
-          (this.width = 99), (this.height = 75);
-          this.type = "Hero";
-          this.speed = { x: 0, y: 0 };
-          this.cooldown = 0;
-        }
-        fire() {
-          gameObjects.push(new Laser(this.x + 45, this.y - 10));
-          this.cooldown = 500;
-    
-          let id = setInterval(() => {
-            if (this.cooldown > 0) {
-              this.cooldown -= 100;
-            } else {
-              clearInterval(id);
-            }
-          }, 200);
-        }
-        canFire() {
-          return this.cooldown === 0;
-        }
-      }
-      ```
-
-여기에서 핵심은, 게임이 몇 가지 기능을 가지고 있다는 사실입니다! 화살표 키로 탐색하고, 스페이스 바로 레이저를 발사할 수 있으며, 적을 치면 사라지게 합니다. 잘 하셨습니다!
-
----
-
-## 🚀 도전
-
-폭발을 추가합니다! [the Space Art repo](../../solution/spaceArt/readme.txt)에서 게임 어셋을 살펴보고 레이저가 외계인을 칠 때 폭발하도록 추가해보세요
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-지금까지 게임의 간격을 실험 해보세요. 바꾸면 어떻게 되나요? [JavaScript timing events](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/)에 대하여 더 읽어보시기 바랍니다.
-
-## 과제
-
-[Explore collisions](../assignment.md)
diff --git a/6-space-game/4-collision-detection/translations/README.ms.md b/6-space-game/4-collision-detection/translations/README.ms.md
deleted file mode 100644
index 068e57f5..00000000
--- a/6-space-game/4-collision-detection/translations/README.ms.md
+++ /dev/null
@@ -1,297 +0,0 @@
-# Bina Permainan Angkasa Bahagian 4: Menambah Laser dan Mengesan Perlanggaran
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35)
-
-Dalam pelajaran ini, anda akan belajar bagaimana menembak laser dengan JavaScript! Kami akan menambah dua perkara pada permainan kami:
-
-- **Laser**: laser ini ditembak dari kapal wira anda dan menegak ke atas
-- **Pengesanan perlanggaran**, sebagai bagian dari menerapkan kemampuan untuk *menembak* kami juga akan menambahkan beberapa peraturan permainan yang bagus:
-   - **Laser menyerang musuh**: Musuh mati jika terkena laser
-   - **Laser mencecah skrin atas**: Laser hancur jika memukul bahagian atas skrin
-   - **Pertempuran musuh dan pahlawan**: Musuh dan pahlawan musnah jika saling memukul
-   - **Musuh memukul bahagian bawah layar**: Musuh dan pahlawan hancur jika musuh memukul bahagian bawah layar
-
-Pendek kata, anda - *pahlawan* - perlu memukul semua musuh dengan laser sebelum mereka berjaya bergerak ke bahagian bawah skrin.
-
-✅ Lakukan sedikit kajian mengenai permainan komputer pertama yang pernah ditulis. Apa fungsinya?
-
-Mari sama-sama menjadi wira!
-
-## Pengesanan perlanggaran
-
-Bagaimanakah kita melakukan pengesanan perlanggaran? Kita perlu memikirkan objek permainan kita sebagai segi empat tepat bergerak. Mengapa anda bertanya? Nah, gambar yang digunakan untuk menggambar objek permainan adalah persegi panjang: ia memiliki `x`, `y`, `width` dan` height`.
-
-Sekiranya dua segi empat tepat, iaitu pahlawan dan musuh *berpotongan*, anda akan bertembung. Apa yang harus berlaku adalah mengikut peraturan permainan. Oleh itu, untuk melaksanakan pengesanan perlanggaran anda memerlukan perkara berikut:
-
-1. Cara untuk mendapatkan representasi segi empat tepat dari objek permainan, seperti ini:
-
-   ```javascript
-   rectFromGameObject() {
-     return {
-       top: this.y,
-       left: this.x,
-       bottom: this.y + this.height,
-       right: this.x + this.width
-     }
-   }
-   ```
-
-2. Fungsi perbandingan, fungsi ini boleh kelihatan seperti ini:
-
-   ```javascript
-   function intersectRect(r1, r2) {
-     return !(r2.left > r1.right ||
-       r2.right < r1.left ||
-       r2.top > r1.bottom ||
-       r2.bottom < r1.top);
-   }
-   ```
-
-## Bagaimanakah kita memusnahkan perkara
-
-Untuk menghancurkan sesuatu dalam permainan, anda perlu memberitahu permainan bahawa permainan ini tidak lagi harus melukis item ini dalam gelung permainan yang mencetuskan pada selang waktu tertentu. Cara untuk melakukannya adalah dengan menandakan objek permainan sebagai *mati* apabila sesuatu berlaku, seperti:
-
-```javascript
-// collision happened
-enemy.dead = true
-```
-
-Kemudian anda meneruskan untuk menyusun *mati* objek sebelum mengecat semula skrin, seperti:
-
-```javascript
-gameObjects = gameObject.filter(go => !go.dead);
-```
-
-## Bagaimanakah kita menghidupkan laser
-
-Menyalakan laser diterjemahkan untuk bertindak balas terhadap peristiwa penting dan membuat objek yang bergerak ke arah tertentu. Oleh itu, kita perlu melakukan langkah-langkah berikut:
-
-1. **Buat objek laser**: dari bahagian atas kapal pahlawan kita, bahawa setelah penciptaan mula bergerak ke atas menuju bahagian atas layar.
-2. **Lampirkan kod ke acara utama**: kita perlu memilih kunci pada papan kekunci yang mewakili pemain yang menembak laser.
-3. **Buat objek permainan yang kelihatan seperti laser** apabila kekunci ditekan.
-
-## Cooldown menggunakan laser kami
-
-Laser perlu menyala setiap kali anda menekan kekunci, seperti *ruang* misalnya. Untuk mengelakkan permainan menghasilkan terlalu banyak laser dalam masa yang singkat, kita perlu memperbaikinya. Penyelesaiannya adalah dengan menerapkan *cooldown*, pemasa, yang memastikan bahawa laser hanya dapat dipecat begitu kerap. Anda boleh melaksanakannya dengan cara berikut:
-
-```javascript
-class Cooldown {
-  constructor(time) {
-    this.cool = false;
-    setTimeout(() => {
-      this.cool = true;
-    }, time)
-  }
-}
-
-class Weapon {
-  constructor {
-  }
-  fire() {
-    if (!this.cooldown || this.cooldown.cool) {
-      // menghasilkan laser
-      this.cooldown = new Cooldown(500);
-    } else {
-      // buat apa-apa - ia belum cooldown.
-    }
-  }
-}
-```
-
-✅ Rujuk pelajaran 1 dalam siri permainan ruang untuk mengingatkan diri anda mengenai *cooldowns*.
-
-## Apakah yang hendak dibina
-
-Anda akan mengambil kod yang ada (yang seharusnya anda bersihkan dan refactored) dari pelajaran sebelumnya, dan memperpanjangnya. Mulakan dengan kod dari bahagian II atau gunakan kod di [Bahagian III-starter](/your-work)
-
-> tip: laser yang akan anda gunakan sudah ada di folder aset anda dan dirujuk oleh kod anda
-
-- **Tambahkan pengesanan perlanggaran**, apabila laser bertabrakan dengan sesuatu peraturan berikut harus berlaku:
-   1. **Laser memukul musuh**: musuh mati jika terkena laser
-   2. **Laser mencecah skrin atas**: Laser hancur jika menyentuh bahagian atas skrin kita
-   3. **Pertembungan musuh dan pahlawan**: musuh dan pahlawan musnah jika saling memukul
-   4. **Musuh memukul bahagian bawah skrin**: Musuh dan pahlawan hancur jika musuh memukul bahagian bawah skrin
-
-## Langkah-langkah yang disyorkan
-
-Cari fail yang telah dibuat untuk anda dalam sub folder `your-work`. Ia harus mengandungi yang berikut:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-Anda memulakan projek anda folder `your_work` dengan mengetik:
-
-```bash
-cd your-work
-npm start
-```
-
-Perkara di atas akan memulakan Pelayan HTTP pada alamat `http: // localhost: 5000`. Buka penyemak imbas dan masukkan alamatnya, sekarang ia harus menjadikan pahlawan dan semua musuh, tidak ada yang bergerak - namun :).
-
-### Tambah kod
-
-1. **Siapkan representasi segi empat tepat dari objek permainan anda, untuk menangani perlanggaran** Kod di bawah ini membolehkan anda mendapatkan representasi segi empat tepat dari `GameObject`. Edit kelas GameObject anda untuk memperluasnya:
-
-    ```javascript
-    rectFromGameObject() {
-        return {
-          top: this.y,
-          left: this.x,
-          bottom: this.y + this.height,
-          right: this.x + this.width,
-        };
-      }
-    ```
-
-2. **Tambahkan kod yang memeriksa perlanggaran** Ini akan menjadi fungsi baru yang menguji sama ada dua segi empat tepat bersilang:
-
-    ```javascript
-    function intersectRect(r1, r2) {
-      return !(
-        r2.left > r1.right ||
-        r2.right < r1.left ||
-        r2.top > r1.bottom ||
-        r2.bottom < r1.top
-      );
-    }
-    ```
-
-3. **Tambahkan keupayaan menembak laser**
-   1. **Tambah mesej peristiwa penting**. Kekunci *ruang* harus membuat laser tepat di atas kapal wira. Tambahkan tiga pemalar dalam objek Mesej:
-
-       ```javascript
-        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
-        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
-        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
-       ```
-
-       1. **Kendalikan kekunci ruang**. Edit fungsi kekunci `window.addEventListener` untuk menangani ruang:
-
-        ```javascript
-        } else if(evt.keyCode === 32) {
-          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
-        }
-        ```
-
-        1. **Tambah pendengar**. Edit fungsi `initGame ()` untuk memastikan bahawa pahlawan dapat melepaskan tembakan ketika spasi terkena:
-
-            ```javascript
-            eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
-            if (hero.canFire()) {
-            hero.fire();
-            }
-            ```
-
-       and add a new `eventEmitter.on()` function to ensure behavior when an enemy collides with a laser:
-
-          ```javascript
-          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
-            first.dead = true;
-            second.dead = true;
-          })
-          ```
-
-        1. **Pindahkan objek**, Pastikan laser bergerak ke bahagian atas skrin secara beransur-ansur. Anda akan membuat kelas Laser baru yang meluaskan `GameObject`, seperti yang telah anda lakukan sebelumnya:
-
-            ```javascript
-            class Laser extends GameObject {
-            constructor(x, y) {
-            super(x,y);
-            (this.width = 9), (this.height = 33);
-            this.type = 'Laser';
-            this.img = laserImg;
-            let id = setInterval(() => {
-            if (this.y > 0) {
-              this.y -= 15;
-            } else {
-              this.dead = true;
-              clearInterval(id);
-               }
-              }, 100)
-             }
-            }
-             ```
-
-        1. ** Tangani perlanggaran **, Terapkan peraturan perlanggaran untuk laser. Tambahkan fungsi `updateGameObjects ()` yang menguji objek bertembung untuk hits
-
-         ```javascript
-         function updateGameObjects() {
-          const enemies = gameObjects.filter(go => go.type === 'Enemy');
-          const lasers = gameObjects.filter((go) => go.type === "Laser");
-          // laser hit something
-          lasers.forEach((l) => {
-          enemies.forEach((m) => {
-            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
-            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
-              first: l,
-              second: m,
-              });
-            }
-           });
-        });
-
-         gameObjects = gameObjects.filter(go => !go.dead);
-         }  
-         ```
-
-         Pastikan untuk menambah `updateGameObjects ()` ke gelung permainan anda di `window.onload`.
-
-   4. ** Terapkan cooldown ** pada laser, sehingga hanya dapat dipecat begitu kerap.
-
-   Akhir sekali, edit kelas Wira sehingga dapat dikembalikan:
-
-      ```javascript
-      class Hero extends GameObject {
-        constructor(x, y) {
-          super(x, y);
-          (this.width = 99), (this.height = 75);
-          this.type = "Hero";
-          this.speed = { x: 0, y: 0 };
-          this.cooldown = 0;
-        }
-        fire() {
-          gameObjects.push(new Laser(this.x + 45, this.y - 10));
-          this.cooldown = 500;
-    
-          let id = setInterval(() => {
-            if (this.cooldown > 0) {
-              this.cooldown -= 100;
-            } else {
-              clearInterval(id);
-            }
-          }, 200);
-        }
-        canFire() {
-          return this.cooldown === 0;
-        }
-      }
-      ```
-
-Pada ketika ini, permainan anda mempunyai beberapa fungsi! Anda boleh menavigasi dengan kekunci anak panah anda, menembak laser dengan bar ruang anda, dan musuh hilang ketika anda memukulnya. Bagus!
-
----
-
-## 🚀 Cabaran
-
-Tambah letupan! Lihat aset permainan di [Space Art repo](../../solution/spaceArt/readme.txt) dan cuba tambahkan letupan ketika laser memukul makhluk asing
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36)
-
-## Mengkaji & Belajar Sendiri
-
-Percubaan dengan selang permainan anda setakat ini. Apa yang berlaku apabila anda menukarnya? Baca lebih lanjut mengenai [acara pemasaan JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/).
-
-## Tugasan
-
-[Menerokai Perlanggaran](assignment.ms.md)
diff --git a/6-space-game/4-collision-detection/translations/README.zh-tw.md b/6-space-game/4-collision-detection/translations/README.zh-tw.md
deleted file mode 100644
index 7c526add..00000000
--- a/6-space-game/4-collision-detection/translations/README.zh-tw.md
+++ /dev/null
@@ -1,297 +0,0 @@
-# 建立太空遊戲 Part 4：加入雷射與碰撞偵測
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/35?loc=zh_tw)
-
-這堂課中，你會學會如何在 JavaScript 上發射雷射光！我們需要在遊戲中新增兩項東西：
-
-- **雷射光**：這束雷射會從英雄艦艇垂直往上移動
-- **碰撞偵測**，除了完成*射擊*這項能力，我們還會新增幾項遊戲規則：
-   - **雷射擊中敵人**：被雷射擊中的敵人會死亡
-   - **雷射擊中畫面最上方**：雷射擊中到畫面最上方會消失
-   - **敵人碰觸到英雄**：敵人與英雄在互相碰觸時皆會被摧毀
-   - **敵人碰觸到畫面最下方**：敵人碰觸到畫面最下方時，該敵人與英雄會被摧毀
-
-簡單來說，你這位*英雄*需要在敵人到達畫面最下方之前，使用雷射擊毀它們。
-
-✅ 做點關於第一款電腦遊戲的研究。它有哪些功能？
-
-讓我們成為英雄吧！
-
-## 碰撞偵測
-
-我們該如何進行碰撞偵測呢？我們需要將遊戲物件視為移動中的矩形。你或許會問為什麼？這是因為，繪製遊戲物件的圖片皆為矩形：它有一組 `x` 與 `y`、`width` 與 `height`。
-
-若兩個矩形，舉例來說：英雄與敵人*相交*了，這就是一次碰撞。至於會發生什麼事取決於遊戲規則。要製作碰撞偵測，你需要這些步驟：
-
-1. 取得表達遊戲物件為矩形的方法，好比是：
-
-   ```javascript
-   rectFromGameObject() {
-     return {
-       top: this.y,
-       left: this.x,
-       bottom: this.y + this.height,
-       right: this.x + this.width
-     }
-   }
-   ```
-
-2. 一個比較函式，這個函式可以如下：
-
-   ```javascript
-   function intersectRect(r1, r2) {
-     return !(r2.left > r1.right ||
-       r2.right < r1.left ||
-       r2.top > r1.bottom ||
-       r2.bottom < r1.top);
-   }
-   ```
-
-## 我們該如何摧毀物件
-
-要摧毀遊戲物件，你需要讓遊戲知道，它不再需要在定期的遊戲迴圈中繪製該物件。一種方法是在情況發生時，我們可以標記遊戲物件為*死亡*，例如：
-
-```javascript
-// 碰撞發生
-enemy.dead = true
-```
-
-接著，你在重新繪製畫面前，排除掉這些*死亡*的物件，例如：
-
-```javascript
-gameObjects = gameObject.filter(go => !go.dead);
-```
-
-## 我們該如何發射雷射
-
-發射雷射可以被視作回應一件鍵盤事件，並建立往特定方向移動的物件。因此我們需要列出下列步驟：
-
-1. **建立雷射物件**：從英雄艦艇的正上方，建立往畫面上方移動的物件。
-2. **連接該程式到鍵盤事件**：我們需要在鍵盤中挑選一個按鍵，表達玩家發射雷射光。
-3. 在按鍵按壓時，**建立看起來像雷射光的遊戲物件**。
-
-## 雷射的冷卻時間
-
-在每次按壓按鍵時，好比說*空白鍵*，雷射光都需要被發射出來。為了讓遊戲不要在短時間內發射太多組雷射光，我們需要修正它。修法為建立*冷卻時間* ── 一個計時器確保雷射在一定期間內只能被發射一次。你可以藉由下列方式建立：
-
-```javascript
-class Cooldown {
-  constructor(time) {
-    this.cool = false;
-    setTimeout(() => {
-      this.cool = true;
-    }, time)
-  }
-}
-
-class Weapon {
-  constructor {
-  }
-  fire() {
-    if (!this.cooldown || this.cooldown.cool) {
-      // 產生雷射光
-      this.cooldown = new Cooldown(500);
-    } else {
-      // 什麼事都不做，冷卻中。
-    }
-  }
-}
-```
-
-✅ 根據太空遊戲系列課程的第一章，回想關於*冷卻時間*。
-
-## 建立目標
-
-你會利用上一堂課中現成的程式碼(你應該有整理並重構過)做延伸。使用來自 Part II 的檔案或是使用 [Part III - Starter](../your-work)。
-
-> 要點：你需要使用的雷射光已經在資料夾中，並已匯入到程式碼中。
-
-- **加入碰撞偵測**，建立下列規則給各個雷射碰觸到東西的情況：
-   1. **雷射擊中敵人**：被雷射擊中的敵人會死亡
-   2. **雷射擊中畫面最上方**：雷射擊中到畫面最上方會消失
-   3. **敵人碰觸到英雄**：敵人與英雄在互相碰觸時皆會被摧毀
-   4. **敵人碰觸到畫面最下方**：敵人碰觸到畫面最下方時，該敵人與英雄會被摧毀
-   
-## 建議步驟
-
-在你的 `your-work` 子資料夾中，確認檔案是否建立完成。它應該包括：
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-開始 `your_work` 資料夾中的專案，輸入：
-
-```bash
-cd your-work
-npm start
-```
-
-這會啟動 HTTP 伺服器並發布網址 `http://localhost:5000`。開啟瀏覽器並輸入該網址，現在它能呈現英雄以及所有的敵人，但它們還沒辦法移動！
-
-### 建立程式碼
-
-1. **設定表達遊戲物件為矩形的方法，以處理碰撞狀況** 下列的程式表達 `GameObject` 的矩形呈現方式。編輯你的 GameObject class：
-
-    ```javascript
-    rectFromGameObject() {
-        return {
-          top: this.y,
-          left: this.x,
-          bottom: this.y + this.height,
-          right: this.x + this.width,
-        };
-      }
-    ```
-
-2. **加入程式碼來檢查碰撞** 這會是新函式來測試兩矩形是否相交：
-
-    ```javascript
-    function intersectRect(r1, r2) {
-      return !(
-        r2.left > r1.right ||
-        r2.right < r1.left ||
-        r2.top > r1.bottom ||
-        r2.bottom < r1.top
-      );
-    }
-    ```
-
-3. **加入雷射發射功能**
-   1. **加入鍵盤事件訊息**。 *空白鍵*要能在英雄艦艇上方建立雷射光。加入三個常數到 Messages 物件中：
-
-       ```javascript
-        KEY_EVENT_SPACE: "KEY_EVENT_SPACE",
-        COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER",
-        COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO",
-       ```
-
-   1. **處理空白鍵**。 編輯 `window.addEventListener` 的 keyup 函式來處理空白鍵：
-
-      ```javascript
-        } else if(evt.keyCode === 32) {
-          eventEmitter.emit(Messages.KEY_EVENT_SPACE);
-        }
-      ```
-
-    1. **加入監聽者**。 編輯函式 `initGame()` 來確保英雄可以在空白鍵按壓時，發射雷射光：
-
-       ```javascript
-       eventEmitter.on(Messages.KEY_EVENT_SPACE, () => {
-        if (hero.canFire()) {
-          hero.fire();
-        }
-       ```
-
-       建立新的函式 `eventEmitter.on()` 確保敵人碰觸到雷射光時，能更新死亡狀態：
-
-          ```javascript
-          eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
-            first.dead = true;
-            second.dead = true;
-          })
-          ```
-
-   1. **移動物件**。 確保雷射逐步地向畫面上方移動。建立新的 class Laser 延伸自 `GameObject`，你應該有做過：
-   
-      ```javascript
-        class Laser extends GameObject {
-        constructor(x, y) {
-          super(x,y);
-          (this.width = 9), (this.height = 33);
-          this.type = 'Laser';
-          this.img = laserImg;
-          let id = setInterval(() => {
-            if (this.y > 0) {
-              this.y -= 15;
-            } else {
-              this.dead = true;
-              clearInterval(id);
-            }
-          }, 100)
-        }
-      }
-      ```
-
-   1. **處理碰撞**。 建立雷射的碰撞規則。加入函式 `updateGameObjects()` 來確認被碰撞的物件。
-
-      ```javascript
-      function updateGameObjects() {
-        const enemies = gameObjects.filter(go => go.type === 'Enemy');
-        const lasers = gameObjects.filter((go) => go.type === "Laser");
-      // 雷射擊中某物
-        lasers.forEach((l) => {
-          enemies.forEach((m) => {
-            if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) {
-            eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, {
-              first: l,
-              second: m,
-            });
-          }
-         });
-      });
-
-        gameObjects = gameObjects.filter(go => !go.dead);
-      }  
-      ```
-
-      記得在 `window.onload` 裡的遊戲迴圈中加入 `updateGameObjects()`。
-
-   4. **設定雷射的冷卻時間**，它只能在定期內發射一次。
-
-      最後，編輯 Hero class 來允許冷卻：
-
-       ```javascript
-      class Hero extends GameObject {
-        constructor(x, y) {
-          super(x, y);
-          (this.width = 99), (this.height = 75);
-          this.type = "Hero";
-          this.speed = { x: 0, y: 0 };
-          this.cooldown = 0;
-        }
-        fire() {
-          gameObjects.push(new Laser(this.x + 45, this.y - 10));
-          this.cooldown = 500;
-    
-          let id = setInterval(() => {
-            if (this.cooldown > 0) {
-              this.cooldown -= 100;
-            } else {
-              clearInterval(id);
-            }
-          }, 200);
-        }
-        canFire() {
-          return this.cooldown === 0;
-        }
-      }
-      ```
-
-到這裡，你的遊戲有了些功能！你可以測試方向鍵，使用空白鍵發射雷射。當你擊中敵人時它們會消失。幹得漂亮！
-
----
-
-## 🚀 挑戰
-
-加入爆炸特效！ 看看 [Space Art Repo](../solution/spaceArt/readme.txt) 中的檔案，試著在雷射擊中外星人時，加入爆炸畫面。
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/36?loc=zh_tw)
-
-## 複習與自學
-
-對遊戲中的迴圈定時做點實驗。當你改變數值時，發生了什麼事？閱讀更多關於 [JavaScript 計時事件](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/)。
-
-## 作業
-
-[探索碰撞](assignment.zh-tw.md)
diff --git a/6-space-game/4-collision-detection/translations/assignment.es.md b/6-space-game/4-collision-detection/translations/assignment.es.md
deleted file mode 100644
index 8e3f8ed4..00000000
--- a/6-space-game/4-collision-detection/translations/assignment.es.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Explorar colisiones
-
-## Instrucciones
-
-Para comprender mejor cómo funcionan las colisiones, cree un juego muy pequeño con algunos elementos que chocan. Haz que se muevan presionando las teclas o haciendo clic con el mouse, y haz que algo le suceda a uno de los elementos cuando se golpea. Podría ser algo como un meteoro golpeando la tierra o autos chocadores. ¡Se creativo!
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | -------------------------------------------------- -------------------------------------------------- -------------------- | ------------------------------ | ----------------- |
-| | Se produce una muestra de código de trabajo completa, con elementos dibujados en el lienzo, ocurriendo una colisión básica y ocurriendo reacciones | El código está incompleto de alguna manera | Fallos del código |
diff --git a/6-space-game/4-collision-detection/translations/assignment.fr.md b/6-space-game/4-collision-detection/translations/assignment.fr.md
deleted file mode 100644
index 686ae2e5..00000000
--- a/6-space-game/4-collision-detection/translations/assignment.fr.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Explorer les collisions
-
-## Instructions
-
-Pour mieux comprendre le fonctionnement des collisions, créez un très petit jeu avec quelques objets qui entrent en collision. Faites-les bouger en appuyant sur des touches ou en cliquant sur la souris, et faites en sorte que quelque chose arrive à l'un des éléments lorsqu'il est touché. Cela pourrait être quelque chose comme un météore frappant la terre, ou des autos tamponneuses. Faites preuve de créativité!
-
-## Rubrique
-
-| Critères | Exemplaire                                                                                                                | Adéquat                       | Besoin d'amélioration |
-| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
-|          | Un échantillon de code de travail complet est produit, avec des éléments dessinés sur le canevas, une collision de base et des réactions se produisant | Le code est incomplet d'une certaine manière | Dysfonctionnements du code |
\ No newline at end of file
diff --git a/6-space-game/4-collision-detection/translations/assignment.hi.md b/6-space-game/4-collision-detection/translations/assignment.hi.md
deleted file mode 100644
index d03a8ee8..00000000
--- a/6-space-game/4-collision-detection/translations/assignment.hi.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# टकरावों का अन्वेषण करें
-
-## अनुदेश
-
-बेहतर ढंग से समझने के लिए कि टकराव कैसे काम करता है, कुछ वस्तुओं के साथ बहुत छोटे खेल का निर्माण करें जो टकराते हैं. उन्हें कीप्रेसेस या माउस क्लिक के माध्यम से ले जाएँ, और यह हिट होने पर आइटम में से किसी एक के साथ कुछ करें . यह कुछ ऐसा हो सकता है जैसे उल्का पिंड पृथ्वी से टकराता है, या बम्पर-कार। रचनात्मक बनो!
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                                                                                     | पर्याप्त                 | सुधार की जरूरत |
-| ------ | --------------------------------------------------------------------------------------------------------------- | ------------------------ | -------------- |
-|        | पूरा वर्किंग कोड सैंपल उत्पादित होता है, जिसमें कैनवस को खींची गई चीजें, बेसिक टक्कर, और प्रतिक्रियाएँ होती हैं | कोड किसी तरह से अधूरा है | कोड की खराबी   |
diff --git a/6-space-game/4-collision-detection/translations/assignment.it.md b/6-space-game/4-collision-detection/translations/assignment.it.md
deleted file mode 100644
index 8b55bf75..00000000
--- a/6-space-game/4-collision-detection/translations/assignment.it.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Esplorare Collisioni
-
-## Istruzioni
-
-Per una migliore comprensione del funzionamento delle collisioni, costruire un gioco molto piccolo con alcuni elementi che collidono. Farli muovere tramite pressioni di tasto o clic di mouse, fare accadere qualcosa a uno di questi elementi quando viene colpito. Potrebbe essere qualcosa tipo un meteorite che colpisce la terra oppure un autoscontro. Si usi la propria creatività!
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
-|          | Viene prodotto un campione di codice completo e funzionante con elementi disegnati sul canvas, verificarsi di collisioni basiche e reazioni| Il codice è incompleto in qualche modo | Malfunzionamenti del codice  |
\ No newline at end of file
diff --git a/6-space-game/4-collision-detection/translations/assignment.ja.md b/6-space-game/4-collision-detection/translations/assignment.ja.md
deleted file mode 100644
index 9bedefdd..00000000
--- a/6-space-game/4-collision-detection/translations/assignment.ja.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 衝突を調べる
-
-## 説明書
-
-衝突がどのように機能するかを理解するために、衝突するいくつかのアイテムで非常に小さなゲームを構築します。キープレスやマウスクリックでアイテムを移動させ、アイテムが当たったときに何かが起こるようにします。隕石が地球に衝突したり、バンパーカーに衝突したりします。創造力を発揮してください。
-
-## ルーブリック
-
-| 基準 | 模範的な例                                                                                                                | 適切な                       | 改善が必要 |
-| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
-|          | アイテムがキャンバスに描画され、基本的な衝突が発生し、反応が発生する完全な動作コードサンプルが作成されます。 | コードが不完全な場合 | コードの誤動作 |
\ No newline at end of file
diff --git a/6-space-game/4-collision-detection/translations/assignment.ko.md b/6-space-game/4-collision-detection/translations/assignment.ko.md
deleted file mode 100644
index aa274c19..00000000
--- a/6-space-game/4-collision-detection/translations/assignment.ko.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 충돌 감지
-
-## 설명
-
-충돌이 어떻게 작용하는지 더 잘 이해하기 위해 충돌하는 몇 가지 항목으로 아주 작은 게임을 만들어 봅시다. 키를 누르거나 마우스 클릭으로 이동하게 하고, 부딪혔을 때는 아이템들 중 하나에 무슨 일이 일어나게 해보세요. 부딪히는 것은 지구를 강타하는 유성이거나, 범퍼카 같은 것일 수도 있습니다. 창의력을 보여주세요!
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 항목을 캔버스에 끌어다 놓거나, 기본 충돌이 발생하고, 반응이 있는 샘플 코드를 만든 경우 | 코드가 일부 미완성인 경우 | 코드에 오류가 있는 경우
diff --git a/6-space-game/4-collision-detection/translations/assignment.ms.md b/6-space-game/4-collision-detection/translations/assignment.ms.md
deleted file mode 100644
index 0a98525b..00000000
--- a/6-space-game/4-collision-detection/translations/assignment.ms.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Menorokai Perlanggaran
-
-## Arahan
-
-Untuk lebih memahami bagaimana perlanggaran berfungsi, bina permainan yang sangat kecil dengan beberapa item yang bertembung. Buat mereka bergerak melalui menekan kekunci atau klik tetikus, dan membuat sesuatu berlaku pada salah satu item ketika dipukul. Ini mungkin seperti meteor yang menghantam bumi, atau kereta bumper. Dapatkan kreatif!
-
-## Rubrik
-
-| Kriteria | Contoh                                                                                                                | Mencukupi                       | Usaha Lagi |
-| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
-|          | Sampel kod kerja lengkap dihasilkan, dengan item dilukis ke kanvas, perlanggaran asas berlaku, dan reaksi berlaku | Kod tidak lengkap dalam beberapa cara | Kod Tidak Berfungsi |
\ No newline at end of file
diff --git a/6-space-game/4-collision-detection/translations/assignment.nl.md b/6-space-game/4-collision-detection/translations/assignment.nl.md
deleted file mode 100644
index deb59616..00000000
--- a/6-space-game/4-collision-detection/translations/assignment.nl.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Ontdek botsingen
-
-## Instructies
-
-Om beter te begrijpen hoe botsingen werken, bouwt u een heel klein spel met een paar items die botsen. Laat ze bewegen door middel van toetsaanslagen of muisklikken, en zorg dat er iets gebeurt met een van de items wanneer deze wordt geraakt. Het kan zoiets zijn als een meteoor die de aarde raakt, of botsauto's. Wees creatief!
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                                                                                                | Voldoende                       | Moet worden vebeterd |
-| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
-|          | Er wordt een volledig werkend codevoorbeeld geproduceerd, met items op het canvas getekend, er vindt een fundamentele botsing plaats en er vinden reacties plaats | Code is op de een of andere manier onvolledig | Code storingen |
\ No newline at end of file
diff --git a/6-space-game/4-collision-detection/translations/assignment.zh-tw.md b/6-space-game/4-collision-detection/translations/assignment.zh-tw.md
deleted file mode 100644
index e0e8ad93..00000000
--- a/6-space-game/4-collision-detection/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 探索碰撞
-
-## 簡介
-
-為了更了解碰撞是如何運作的，建立一款小遊戲包含物件的碰撞。利用鍵盤或是滑鼠來移動物件，當物件碰撞時執行某些行為。它可以像是彗星撞地球，或是碰碰車。發揮你的創意！
-
-## 學習評量
-
-| 作業內容 | 優良                                                           | 普通               | 待改進     |
-| -------- | -------------------------------------------------------------- | ------------------ | ---------- |
-|          | 建立出完整的程式：有在畫面上繪製物件、有基本的碰撞與對應的行為 | 程式有部分尚未完成 | 程式有瑕疵 |
diff --git a/6-space-game/5-keeping-score/translations/README.es.md b/6-space-game/5-keeping-score/translations/README.es.md
deleted file mode 100644
index d69e88aa..00000000
--- a/6-space-game/5-keeping-score/translations/README.es.md
+++ /dev/null
@@ -1,182 +0,0 @@
-# Construye un juego espacial Parte V: Puntuación y vidas
-
-![video](video-url)
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
-
-En esta lección, aprenderá cómo agregar puntos a un juego y calcular vidas.
-
-## Dibujar texto en la pantalla
-
-Para poder mostrar la puntuación de un juego en la pantalla, necesitará saber cómo colocar texto en la pantalla. La respuesta es usar el método `fillText()` en el objeto de lienzo. También puedes controlar otros aspectos como qué tipo de letra usar, el color del texto e incluso su alineación (izquierda, derecha, centro). A continuación se muestra un código que dibuja un texto en la pantalla.
-
-```javascript
-ctx.font = "30px Arial";
-ctx.fillStyle = "red";
-ctx.textAlign = "right";
-ctx.fillText("show this on the screen", 0, 0);
-```
-
-✅ Lea más sobre [cómo agregar texto a un lienzo](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ¡y siéntase libre de hacer que el suyo se vea más elegante!
-
-## La vida, como concepto de juego
-
-El concepto de tener una vida en un juego es solo un número. En el contexto de un juego espacial, es común asignar un conjunto de vidas que se deducen una por una cuando tu nave sufre daños. Es bueno si puede mostrar una representación gráfica de esto como miniships o corazones en lugar de un número.
-
-## Qué construir
-
-Agreguemos lo siguiente a tu juego:
-
-- **Game score** (Puntuación del juego): por cada barco enemigo que sea destruido, el héroe debería recibir algunos puntos, sugerimos 100 puntos por barco. La puntuación del juego debe mostrarse en la parte inferior izquierda.
-- **Life** (Vida): Tu nave tiene tres vidas. Pierdes una vida cada vez que un barco enemigo choca contigo. Se debe mostrar un puntaje de vida en la parte inferior derecha y estar compuesto por el siguiente gráfico: [life image](solution/assets/life.png).
-
-## Pasos recomendados
-
-Busque los archivos que se han creado para usted en la subcarpeta `your-work`. Debe contener lo siguiente:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-Comienzas tu proyecto en la carpeta `your_work` escribiendo:
-
-```bash
-cd your-work
-npm start
-```
-
-Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. Abre un navegador e ingresa esa dirección, en este momento debería representar al héroe y a todos los enemigos, y cuando presionas las flechas izquierda y derecha, el héroe se mueve y puede derribar enemigos.
-
-### Agregar código
-
-1. **Copie los recursos necesarios** de la carpeta `solution/assets/` a la carpeta `your-work`; agregará un activo `life.png`. Agregue el lifeImg a la función window.onload:
-
-
-    ```javascript
-    lifeImg = await loadTexture("assets/life.png");
-    ```
-
-1. Agregue el `lifeImg` a la lista de activos:
-
-    ```javascript
-    let heroImg,
-    ...
-    lifeImg,
-    ...
-    eventEmitter = new EventEmitter();
-    ```
-  
-2.**Agregar variables**. Agregue un código que represente su puntaje total (0) y las vidas restantes (3), muestre estos puntajes en una pantalla.
-
-3. **Amplíe la función `updateGameObjects()`**. Amplíe la función `updateGameObjects()` para manejar las colisiones enemigas:
-
-    ```javascript
-    enemies.forEach(enemy => {
-        const heroRect = hero.rectFromGameObject();
-        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
-          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
-        }
-      })
-    ```
-
-4. **Agrega `life` y `points`**.
-    1. **Inicializar variables**. En `this.cooldown = 0` en la clase `Hero`, establece la vida y los puntos:
-
-        ```javascript
-        this.life = 3;
-        this.points = 0;
-        ```
-
-   1. **Dibujar variables en pantalla**. Dibuja estos valores en la pantalla:
-
-        ```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. **Agregar métodos al bucle del juego**. Asegúrese de agregar estas funciones a su función window.onload en `updateGameObjects ()`:
-
-        ```javascript
-        drawPoints();
-        drawLife();
-        ```
-
-1. **Implementa las reglas del juego**. Implementa las siguientes reglas del juego:
-
-    1. **Por cada colisión entre héroes y enemigos**, resta una vida.
-   
-       Extiende la clase `Hero` para hacer esta deducción:
-
-        ```javascript
-        decrementLife() {
-          this.life--;
-          if (this.life === 0) {
-            this.dead = true;
-          }
-        }
-        ```
-
-   2. **Por cada láser que golpea a un enemigo**, aumenta la puntuación del juego con 100 puntos.
-
-       Extiende la clase Hero para hacer este incremento:
-    
-        ```javascript
-          incrementPoints() {
-            this.points += 100;
-          }
-        ```
-
-        Agregue estas funciones a sus Collision Event Emitters:
-
-        ```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();
-        });
-        ```
-
-✅ Investigue un poco para descubrir otros juegos creados con JavaScript / Canvas. ¿Cuáles son sus rasgos comunes?
-
-Al final de este trabajo, deberías ver las pequeñas naves de 'vida' en la parte inferior derecha, los puntos en la parte inferior izquierda, y deberías ver que tu cuenta de vidas disminuye cuando chocas con enemigos y tus puntos aumentan cuando disparas a los enemigos. ¡Bien hecho! Tu juego está casi completo.
-
-🚀Challenge: Tu código está casi completo. ¿Puedes imaginar tus próximos pasos?
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
-
-## Revisión y autoestudio
-
-Investigue algunas formas en las que puede incrementar y disminuir las puntuaciones y vidas del juego. Hay algunos motores de juegos interesantes como [PlayFab](https://playfab.com). ¿Cómo podría mejorar tu juego el uso de uno de estos?
-
-**Tarea**: [Crear un juego de puntuación](assignment.es.md)
diff --git a/6-space-game/5-keeping-score/translations/README.fr.md b/6-space-game/5-keeping-score/translations/README.fr.md
deleted file mode 100644
index b31e8185..00000000
--- a/6-space-game/5-keeping-score/translations/README.fr.md
+++ /dev/null
@@ -1,189 +0,0 @@
-# Construire un jeu de l'espace - Partie 5: scores et vies
-
-## Quiz de pré-lecture
-
-[Quiz de pré-lecture](https://ashy-river-0debb7803.1.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://ashy-river-0debb7803.1.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/5-keeping-score/translations/README.hi.md b/6-space-game/5-keeping-score/translations/README.hi.md
deleted file mode 100644
index 56695abe..00000000
--- a/6-space-game/5-keeping-score/translations/README.hi.md
+++ /dev/null
@@ -1,189 +0,0 @@
-# एक अंतरिक्ष खेल बनाएँ भाग ५: स्कोरिंग और जीवन
-
-## लेक्टरसे पहलेकी क्विज़
-
-[लेक्टरसे पहलेकी क्विज़](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=hi)
-
-इस पाठ में, आप सीखेंगे कि किसी खेल में स्कोरिंग कैसे जोड़ें और जीवन की गणना करें.
-
-## स्क्रीन पर टेक्स्ट ड्रा करें
-
-स्क्रीन पर गेम स्कोर प्रदर्शित करने में सक्षम होने के लिए, आपको यह जानना होगा कि स्क्रीन पर टेक्स्ट कैसे रखा जाए. उत्तर कैनवास ऑब्जेक्ट पर `fillText()` विधि का उपयोग कर रहा है। आप अन्य पहलुओं को भी नियंत्रित कर सकते हैं जैसे कि किस फ़ॉन्ट का उपयोग करना है, पाठ का रंग और यहां तक ​​कि इसके संरेखण (बाएं, दाएं, केंद्र)। नीचे कुछ कोड है जो स्क्रीन पर कुछ टेक्स्ट खींच रहा है.
-
-```javascript
-ctx.font = "30px Arial";
-ctx.fillStyle = "red";
-ctx.textAlign = "right";
-ctx.fillText("show this on the screen", 0, 0);
-```
-
-✅ [एक कैनवास में पाठ कैसे जोड़ें](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text) इसके बारे में और पढ़ें और बेझिझक अपने को आकर्षक बनाने के लिए!
-
-## जीवन, एक खेल अवधारणा के रूप में
-
-एक खेल में एक जीवन होने की अवधारणा केवल एक संख्या है। एक अंतरिक्ष खेल के संदर्भ में यह सामान्य है कि आपके जहाज को नुकसान होने पर एक-एक करके कटे हुए जीवन का एक सेट आवंटित किया जाए। यदि आप एक नंबर के बजाय मिनीशिप या दिल की तरह इस का एक चित्रमय प्रतिनिधित्व दिखा सकते हैं तो अच्छा है.
-
-## क्या बनाना है
-
-चलो अपने खेल में निम्नलिखित जोड़ते हैं:
-
-- **खेल का स्कोर**: नष्ट होने वाले प्रत्येक दुश्मन जहाज के लिए, नायक को कुछ बिंदुओं से सम्मानित किया जाना चाहिए, हम प्रति जहाज १०० अंक का सुझाव देते हैं। खेल का स्कोर नीचे बाईं ओर दिखाया जाना चाहिए.
-- **जीबन**: आपके जहाज में तीन जीवन हैं। जब भी कोई दुश्मन जहाज आपसे टकराता है तो आप एक जीवन खो देते हैं। एक जीवन स्कोर नीचे दाईं ओर प्रदर्शित किया जाना चाहिए और निम्नलिखित ग्राफ़िक से बाहर किया जाना चाहिए! [जीवन छवि](../solution/assets/life.png).
-
-## अनुशंसित कदम
-
-उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं। इसमें निम्नलिखित शामिल होना चाहिए:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-आप टाइप करके अपना प्रोजेक्ट `your_work` फ़ोल्डर शुरू करें:
-
-```bash
-cd your-work
-npm start
-```
-
-उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http://localhost:5000`। एक ब्राउज़र खोले और उस पते को डाले , अभी उसे नायक और सभी दुश्मनों को प्रस्तुत करना चाहिए, और जैसे ही आप अपने बाएँ और दाएँ तीर मारते हैं, नायक चलता है और दुश्मनों को मार सकता है।.
-
-### कोड जोड़े
-
-1. `solution/assets/` फ़ोल्डर से `your-work` फ़ोल्डर में आवश्यक असेट्स की प्रतिलिपि बनाएँ;आप एक `life.png` एसेट जोड़ देंगे। LifeImg को window.onload फ़ंक्शन में जोड़ें:
-
-   ```javascript
-   lifeImg = await loadTexture("assets/life.png");
-   ```
-
-1. असेट्स की सूची में `lifeImg` जोड़ें:
-
-```javascript
-let heroImg,
-...
-lifeImg,
-...
-eventEmitter = new EventEmitter();
-```
-
-1. **चर जोड़ें** वह कोड जोड़ें जो आपके कुल स्कोर(0) का प्रतिनिधित्व करता है और बाईं ओर (3) रहता है, इन स्कोर को स्क्रीन पर प्रदर्शित करता है.
-
-1. **`updateGameObjects()` फ़ंक्शन बढ़ाएँ**। दुश्मन टकराव को संभालने के लिए `updateGameObjects()` फ़ंक्शन बढ़ाएँ:
-
-   ```javascript
-   enemies.forEach((enemy) => {
-     const heroRect = hero.rectFromGameObject();
-     if (intersectRect(heroRect, enemy.rectFromGameObject())) {
-       eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
-     }
-   });
-   ```
-
-1. **`life` ओर `points` जोड़े**.
-
-   1. **आरंभिक चर**. `हीरो` वर्ग में `this.cooldown = 0` के तहत, जीवन और बिंदुओ निर्धारित करें:
-
-      ```javascript
-      this.life = 3;
-      this.points = 0;
-      ```
-
-   1. **स्क्रीन पर चर बनाए**. इन मूल्यों को स्क्रीन पर बनाए:
-
-      ```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. **गेम लूप के तरीके जोड़ें**. सुनिश्चित करें कि आप इन अपडेट्स को अपने विंडो में जोड़ें। फ़ंक्शन को `updateGameObjects()` के तहत लोड करें:
-
-      ```javascript
-      drawPoints();
-      drawLife();
-      ```
-
-1. **खेल के नियमों को लागू करें**. निम्नलिखित खेल नियमों को लागू करें:
-
-   1. **हर हीरो और दुश्मन की टक्कर के लिए**, जीवन घटाए.
-
-      इस कटौती को करने के लिए `हीरो` क्लास का विस्तार करें:
-
-      ```javascript
-      decrementLife() {
-        this.life--;
-        if (this.life === 0) {
-          this.dead = true;
-        }
-      }
-      ```
-
-   2. **हर लेजर के लिए जो दुश्मन को मारता है**, १०० अंकों के साथ गेम स्कोर बढ़ाता है.
-
-      इस वेतन वृद्धि को करने के लिए हीरो क्लास बढ़ाएँ:
-
-      ```javascript
-        incrementPoints() {
-          this.points += 100;
-        }
-      ```
-
-      अपने कॉलिसन ईवेंट एमीटर्स में इन कार्यों को जोड़ें:
-
-      ```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();
-      });
-      ```
-
-✅ जावास्क्रिप्ट/कैनवस का उपयोग करके बनाए गए अन्य खेलों की खोज के लिए थोड़ा शोध करें। उनके सामान्य लक्षण क्या हैं?
-
-इस काम के अंत तक, आपको छोटे 'जीवन' जहाजों को नीचे दाईं ओर, बिंदुओं को नीचे बाईं ओर देखना चाहिए, और जब आप दुश्मनों को गोली मारते हैं, तो आपको अपने जीवन की गिनती में कमी और दुश्मनों से टकराते हुए देखना चाहिए। बहुत बढ़िया! आपका खेल लगभग पूरा हो गया है.
-
----
-
-## 🚀 चुनोती
-
-आपका कोड लगभग पूरा हो चुका है। क्या आप अपने अगले चरणों की कल्पना कर सकते हैं?
-
-## पोस्ट-व्याख्यान प्रश्नोत्तरी
-
-[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-कुछ तरीकों पर शोध करें जो आप खेल के स्कोर और जीवन को बढ़ा सकते हैं। [PlayFab](https://playfab.com) जैसे कुछ दिलचस्प गेम इंजन हैं। इनमें से किसी एक का उपयोग करने से आपका खेल कैसे बढ़ेगा?
-
-## असाइनमेंट
-
-[एक स्कोरिंग गेम बनाएँ](assignment.hi.md)
diff --git a/6-space-game/5-keeping-score/translations/README.it.md b/6-space-game/5-keeping-score/translations/README.it.md
deleted file mode 100644
index 3794dee0..00000000
--- a/6-space-game/5-keeping-score/translations/README.it.md
+++ /dev/null
@@ -1,189 +0,0 @@
-# Costruire un Gioco Spaziale parte 5: Punteggio e Vite
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=it)
-
-In questa lezione si imparerà come aggiungere punteggi a una partita e calcolare le vite.
-
-## Disegnare testo sullo schermo
-
-Per poter visualizzare il punteggio di una partita sullo schermo, serve sapere come posizionare il testo sullo schermo. La risposta è usando il metodo `fillText()` sull'oggetto canvas. Si possono anche controllare altri aspetti come il tipo di carattere da usare, il colore del testo e anche il suo allineamento (sinistra, destra, centro). Di seguito è riportato del codice che disegna testo sullo schermo.
-
-```javascript
-ctx.font = "30px Arial";
-ctx.fillStyle = "red";
-ctx.textAlign = "right";
-ctx.fillText("show this on the screen", 0, 0);
-```
-
-✅ Si legga di più su [come aggiungere testo a un oggetto canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), ci si senta liberi di far sembrare il proprio più elaborato!
-
-## La vita, come concetto di gioco
-
-Il concetto di avere una vita in un gioco è solo un numero. Nel contesto di un gioco spaziale è comune assegnare una serie di vite che vengono detratte una per una quando la propria astronave subisce danni. Sarebbe bello se si potesse mostrare una rappresentazione grafica di questo come mini astronavi o cuori invece di un numero.
-
-## Cosa costruire
-
-Si aggiunge quanto segue al gioco:
-
-- **Punteggio del gioco**: per ogni astronave nemica che viene distrutta, l'eroe dovrebbe ricevere alcuni punti, si suggerisce 100 punti per astronave. Il punteggio del gioco dovrebbe essere mostrato in basso a sinistra.
-- **Vita**: la propria astronave ha tre vite. Si perde una vita ogni volta che una astronave nemica si scontra con la propria. Un punteggio di vita dovrebbe essere visualizzato in basso a destra ed essere ricavato dalla seguente immagine ![immagine grafica di una vita](../solution/assets/life.png).
-
-## Passaggi consigliati
-
-Individuare i file che già sono stati creati nella sottocartella `your-work`. Dovrebbe contenere le seguenti informazioni:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-Si fa partire il progetto dalla cartella `your_work` digitando:
-
-```bash
-cd your-work
-npm start
-```
-
-Quanto sopra avvierà un server HTTP all'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo, in questo momento dovrebbe rendere l'eroe e tutti i nemici, e premendo le frecce sinistra e destra, si fa muovere l'eroe che può abbattere i nemici.
-
-### Aggiungere codice
-
-1. **Copiare le risorse necessarie** dalla cartella `solution/assets` nella cartella `your-work`; aggiungere una risorsa `life.png`. Aggiungere lifeImg alla funzione window.onload:
-
-   ```javascript
-   lifeImg = await loadTexture("assets/life.png");
-   ```
-
-1. Aggiungere `lifeImg` all'elenco delle risorse:
-
-   ```javascript
-   let heroImg,
-   ...
-   lifeImg,
-   ...
-   eventEmitter = new EventEmitter();
-   ```
-
-2. **Aggiungere variabili**. Aggiungere il codice che rappresenta il punteggio totale (0) e le vite rimaste (3), visualizzare questi punteggi sullo schermo.
-
-3. **Estendere la funzione `updateGameObjects()`** . Estendere la funzione `updateGameObjects()` per gestire le collisioni con il nemico:
-
-   ```javascript
-   enemies.forEach(enemy => {
-       const heroRect = hero.rectFromGameObject();
-       if (intersectRect(heroRect, enemy.rectFromGameObject())) {
-         eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
-       }
-     })
-   ```
-
-4. **Aggiungere vita (`life`) e punti (`points`)**.
-   1. **Inizializzare le variabili**. Sotto `this.cooldown = 0` nella classe `Hero`, impostare la vita e i punti:
-
-      ```javascript
-      this.life = 3;
-      this.points = 0;
-      ```
-
-   1. **Disegnare variabili sullo schermo**. Disegnare questi valori sullo schermo:
-
-      ```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. **Aggiungere metodi al ciclo di gioco**. Assicurarsi di aggiungere queste funzioni alla funzione window.onload sotto `updateGameObjects()`:
-
-      ```javascript
-      drawPoints();
-      drawLife();
-      ```
-
-1. **Implementare le regole del gioco**. Implementare le seguenti regole di gioco:
-
-   1. **Per ogni collisione di eroi e nemici**, togliere una vita.
-
-      Estendere la classe `Hero` per eseguire questa sottrazione:
-
-      ```javascript
-      decrementLife() {
-        this.life--;
-        if (this.life === 0) {
-          this.dead = true;
-        }
-      }
-      ```
-
-   2. **Per ogni laser che colpisce un nemico**, aumentare il punteggio del gioco di 100 punti.
-
-      Estendere la classe Hero per fare questo incremento:
-
-      ```javascript
-        incrementPoints() {
-          this.points += 100;
-        }
-      ```
-
-      Aggiungere queste funzioni agli event listener di 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();
-      });
-      ```
-
-✅ Fare una piccola ricerca per scoprire altri giochi creati utilizzando JavaScript/Canvas. Quali sono i loro tratti comuni?
-
-Alla fine di questo lavoro, si dovrebbero vedere le piccole astronavi che rappresentano le vite in basso a destra, i punti in basso a sinistra, e si dovrebbe vedere il numero di vite diminuire quando si entra in collisione con i nemici e i punti aumentare quando si colpiscono i nemici. Ottimo lavoro! Il gioco è quasi completo.
-
----
-
-## 🚀 Sfida
-
-Il codice è quasi completo. Si riescono a immaginare i prossimi passi?
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=it)
-
-## Revisione e Auto Apprendimento
-
-Cercare alcuni modi per aumentare e diminuire i punteggi e le vite del gioco. Ci sono alcuni motori di gioco interessanti come [PlayFab](https://playfab.com). In che modo l'utilizzo di uno di questi potrebbe migliorare il proprio gioco?
-
-## Compito
-
-[Costruire un Gioco di Punteggio](assignment.it.md)
diff --git a/6-space-game/5-keeping-score/translations/README.ja.md b/6-space-game/5-keeping-score/translations/README.ja.md
deleted file mode 100644
index 93f9b493..00000000
--- a/6-space-game/5-keeping-score/translations/README.ja.md
+++ /dev/null
@@ -1,190 +0,0 @@
-# スペースゲーム構築プロジェクト その 5: スコアリングとライフ
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=ja)
-
-このレッスンでは、ゲームに得点を加えてライフを計算する方法を学びます。
-
-## 画面上にテキストを描画
-
-ゲームのスコアを画面に表示できるようにするには、画面にテキストを配置する方法を知っておく必要があります。その答えは、canvas オブジェクトの `fillText()` メソッドを使用することです。また、使用するフォント、テキストの色、配置 (左、右、中央) などの他の要素を制御することもできます。以下は、画面上にテキストを描画するコードです。
-
-```javascript
-ctx.font = "30px Arial";
-ctx.fillStyle = "red";
-ctx.textAlign = "right";
-ctx.fillText("show this on the screen", 0, 0);
-```
-
-✅ [canvas にテキストを追加する方法](https://developer.mozilla.org/ja/docs/Drawing_text_using_a_canvas)について詳しくはこちらをご覧ください。そうすれば自由にファンシーな外観を作ることができます。
-
-
-## ゲームの概念としてのライフ
-
-ゲームにおけるライフの概念は数字でしかありません。スペースゲームの文脈では、自分の宇宙船がダメージを受けたときに一つずつ差し引かれるライフを割り当てるのが一般的です。これを数字ではなく、ミニシップやハートのようにグラフィカルに表現できるといいですね。
-
-## 何を構築するか
-
-以下のようなものをゲームに追加してみましょう。
-
-- **ゲームのスコア**: 敵艦が破壊されるごとに、ヒーローにはいくつかのポイントが与えられるはずですが、私たちは1隻につき100ポイントをお勧めします。ゲームスコアは左下に表示されます
-- **ライフ**: あなたの宇宙船には3つのライフがあります。敵の船が衝突するたびにライフを失います。ライフスコアは右下に表示され、次のグラフィックで作成されます。![life image](../solution/assets/life.png)
-
-## 推奨される手順
-
-あなたのために作成されたファイルを `your-work` サブフォルダ内で探します。以下のファイルが含まれているはずです。
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-次のように入力して、`your_work` フォルダからプロジェクトを起動します。
-
-```bash
-cd your-work
-npm start
-```
-
-上記のようにすると、`http://localhost:5000` というアドレスに HTTP サーバーが起動します。ブラウザを開いてそのアドレスを入力すると、ヒーローと敵が表示され、左右の矢印を打つとヒーローが動き、敵を撃ち落とすことができます。
-
-### コードの追加
-
-1. `solution/assets/` フォルダから `your-work` フォルダに**必要なアセットをコピー**して、`life.png` アセットを追加します。lifeImg を window.onload 関数に追加します
-
-    ```javascript
-    lifeImg = await loadTexture("assets/life.png");
-    ```
-
-1. アセットのリストに `lifeImg` を追加します
-
-    ```javascript
-    let heroImg,
-    ...
-    lifeImg,
-    ...
-    eventEmitter = new EventEmitter();
-    ```
-  
-2. **変数を追加します**。あなたの合計スコア (0) とその左に (3) のライフを表すコードを追加し、画面上にこれらのスコアを表示します
-
-3. **`updateGameObjects()` 関数を拡張します**。`updateGameObjects()` 関数を拡張し、敵の衝突に対応するようにします
-
-    ```javascript
-    enemies.forEach(enemy => {
-        const heroRect = hero.rectFromGameObject();
-        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
-          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
-        }
-      })
-    ```
-
-4. **`life` と `points` を追加します**
-   1. **変数を初期化します**。`Hero` クラスの `this.cooldown = 0` の下で、ライフとポイントを設定します
-
-        ```javascript
-        this.life = 3;
-        this.points = 0;
-        ```
-
-   1. **画面上に変数を描画します**。これらの値を画面に描画します
-
-        ```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. **Game ループにメソッドを追加します**。`updateGameObjects()` の下の window.onload 関数にこれらの関数を追加します
-
-        ```javascript
-        drawPoints();
-        drawLife();
-        ```
-
-1. **ゲームのルールを実装します**。以下のゲームルールを実装します
-
-   1. **ヒーローと敵の衝突ごとに**、ライフを差し引きます
-   
-      `Hero` クラスを拡張してこの差し引きを行います
-
-        ```javascript
-        decrementLife() {
-          this.life--;
-          if (this.life === 0) {
-            this.dead = true;
-          }
-        }
-        ```
-
-   2. **レーザーが敵に当たるたびに**、ゲームスコアを100点アップさせます
-
-      このインクリメントを行うために Hero クラスを拡張します
-    
-        ```javascript
-          incrementPoints() {
-            this.points += 100;
-          }
-        ```
-
-        これらの機能を衝突イベントエミッタに追加します
-
-        ```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();
-        });
-        ```
-
-✅ JavaScript/Canvas を使用して作成された他のゲームを少し調べてみてください。これらのゲームに共通する特徴は何ですか?
-
-この作品が終わる頃には、右下に小さな「ライフ」の船、左下にポイントが表示され、敵と衝突するとライフカウントが減少し、敵を撃つとポイントが増加するのがわかるはずです。よくできました! これでゲームはほぼ完成です。
-
----
-
-## 🚀 チャレンジ
-
-あなたのコードはほぼ完成しています。次のステップをイメージできますか？
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=ja)
-
-## 復習と自己学習
-
-ゲームのスコアやライフを増減させる方法をいくつか研究してみましょう。[PlayFab](https://playfab.com) のような面白いゲームエンジンがあります。これらのエンジンを使用することで、どのようにゲームを強化することができるでしょうか？
-
-## 課題
-
-[スコアリングゲームの構築](assignment.ja.md)
diff --git a/6-space-game/5-keeping-score/translations/README.ko.md b/6-space-game/5-keeping-score/translations/README.ko.md
deleted file mode 100644
index 26908534..00000000
--- a/6-space-game/5-keeping-score/translations/README.ko.md
+++ /dev/null
@@ -1,189 +0,0 @@
-# Space 게임 제작하기 파트 5: 점수내고 살기
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=ko)
-
-이 강의에서는 어떻게 게임에서 점수를 내고 생명을 구하는 가에 대하여 배웁니다.
-
-## 화면에 텍스트 그리기
-
-화면에 게임 점수를 표시하려면, 화면에 텍스트를 두는 방법을 알아야 합니다. 답변은 canvas 객체에 `fillText()` 메소드를 사용한다고 할 수 있습니다. 사용할 글꼴, 텍스트 색상과 정렬(왼쪽, 오른쪽, 가운데)처럼 다른 측면으로 제어할 수 있습니다. 다음은 화면에 텍스트를 그리는 코드입니다:
-
-```javascript
-ctx.font = "30px Arial";
-ctx.fillStyle = "red";
-ctx.textAlign = "right";
-ctx.fillText("show this on the screen", 0, 0);
-```
-
-✅ [how to add text to a canvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text)에 대하여 더 읽어보세요, 그리고 더 멋지게 보이도록 자유롭게 느껴보세요!
-
-## 게임 컨셉에서 생명
-
-게임에서 생명을 가진다는 개념은 숫자에 불과합니다. space 게임의 맥락에서는 배가 피해를 입었을 때마다 생명을 하나씩 빼는 것이 일반적입니다. 숫자 대신 miniships이나 하트와 같은 그래픽으로 표현할 수 있다면 좋습니다.
-
-## 무엇을 만드나요
-
-게임에 다음을 추가하겠습니다:
-
-- **게임 점수**: 적의 배가 파괴될 때마다, 영웅은 점수를 받아야하고, 하나의 배마다 100점을 제안합니다. 게임 점수는 좌측 하단에 보여야 합니다.
-- **생명**: 여러분의 배는 세 생명이 있습니다. 적의 배로 부딪칠 때마다 생명을 잃습니다. 생명 점수는 우측 하단에 보여야되고 ![life image](../solution/assets/life.png)로 만들어야 합니다.
-
-## 권장 단계
-
-`your-work` 하위 폴더에서 생성된 파일을 찾습니다. 다음을 포함해야 합니다:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-타이핑해서 `your_work` 폴더에 프로젝트를 시작합니다:
-
-```bash
-cd your-work
-npm start
-```
-
-위 코드는 `http://localhost:5000` 주소에서 HTTP 서버를 시작합니다. 브라우저를 열고 해당 주소를 입력하면, 바로 영웅과 모든 적을 렌더링해야하며, 왼쪽과 오른쪽 화살표를 누르면, 영웅이 움직이고 적을 격추할 수 있습니다.
-
-### 코드 추가하기
-
-1. `solution/assets/` 폴더에서 `your-work` 폴더로 **필요한 어셋을 복사합니다**; `life.png` 어셋을 추가합니다. window.onload 함수에 lifeImg를 추가합니다:
-
-    ```javascript
-    lifeImg = await loadTexture("assets/life.png");
-    ```
-
-1. 어셋의 배열에 `lifeImg`를 추가합니다:
-
-    ```javascript
-    let heroImg,
-    ...
-    lifeImg,
-    ...
-    eventEmitter = new EventEmitter();
-    ```
-  
-2. **변수를 추가합니다**. 총 점수(0)과 남은 생명(3)을 나타내는 코드를 추가하고, 이 점수를 화면에 출력합니다.
-
-3. **`updateGameObjects()` 함수를 확장합니다**. `updateGameObjects()` 함수를 확장하여 적 충돌을 제어합니다:
-
-    ```javascript
-    enemies.forEach(enemy => {
-        const heroRect = hero.rectFromGameObject();
-        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
-          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
-        }
-      })
-    ```
-
-4. **`life`과 `points`를 추가하기**. 
-   1. **변수를 초기화합니다**. `Hero` 클래스의 `this.cooldown = 0` 아래에 생명과 점수를 설정합니다:
-
-        ```javascript
-        this.life = 3;
-        this.points = 0;
-        ```
-
-   1. **화면에 점수를 그립니다**. 이 값을 화면에 그립니다:
-
-        ```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. **게임 루프에 메소드를 추가합니다**. `updateGameObjects()` 아래의 window.onload 함수에 다음 함수를 추가해야 합니다:
-
-        ```javascript
-        drawPoints();
-        drawLife();
-        ```
-
-1. **게임 규칙을 구현합니다**. 다음 게임 규칙을 구현합니다:
-
-   1. **모든 영웅과 적의 충돌**에 대해 생명을 깍습니다.
-   
-      깍기 위해서 `Hero` 클래스를 확장합니다:
-
-        ```javascript
-        decrementLife() {
-          this.life--;
-          if (this.life === 0) {
-            this.dead = true;
-          }
-        }
-        ```
-
-   2. **적을 공격하는 모든 레이저는**, 게임 점수 100점을 올립니다.
-
-      올리기 위해서 `Hero` 클래스를 확장합니다:
-    
-        ```javascript
-          incrementPoints() {
-            this.points += 100;
-          }
-        ```
-
-        Collision Event Emitter에 다음 함수를 추가합니다:
-
-        ```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();
-        });
-        ```
-
-✅ JavaScript/Canvas를 사용하여 만든 다른 게임을 찾으려면 약간 알아보세요. 공통된 특징은 무엇일까요?
-
-이 작업이 끝날 즈음, 우측 하단에 작은 '생명' 배, 좌측 하단에 점수를 보여줘야 하며, 적과 부딪칠 때마다 생명의 개수가 감소하고 적을 쏠 때마다 점수가 증가하는 것을 볼 수 있습니다. 잘 했습니다! 게임이 거의 완료되었습니다.
-
----
-
-## 🚀 도전
-
-코드는 거의 완성되었습니다. 다음 단계를 상상할 수 있나요?
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-게임 점수와 생명을 늘리거나 줄일 수 있는 몇 가지 방법을 조사해보세요. [PlayFab](https://playfab.com)처럼 흥미로운 게임 엔진이 있습니다. 이 중 하나를 사용하면 어떻게 게임을 향상시킬 수 있을까요?
-
-## 과제
-
-[Build a Scoring Game](../assignment.md)
diff --git a/6-space-game/5-keeping-score/translations/README.ms.md b/6-space-game/5-keeping-score/translations/README.ms.md
deleted file mode 100644
index d83ecd51..00000000
--- a/6-space-game/5-keeping-score/translations/README.ms.md
+++ /dev/null
@@ -1,189 +0,0 @@
-# Membina Permainan Angkasa Bahagian 5: Pemarkahan dan Kehidupan
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37)
-
-Dalam pelajaran ini, anda akan belajar bagaimana menambahkan skor pada permainan dan mengira kehidupan.
-
-## Lukis teks di skrin
-
-Untuk dapat memaparkan skor permainan di layar, Anda harus tahu cara meletakkan teks di layar. Jawapannya adalah menggunakan kaedah `fillText()` pada objek kanvas. Anda juga dapat mengawal aspek lain seperti fon apa yang hendak digunakan, warna teks dan juga penjajarannya (kiri, kanan, tengah). Di bawah ini terdapat beberapa kod yang melukis beberapa teks di skrin.
-
-```javascript
-ctx.font = "30px Arial";
-ctx.fillStyle = "red";
-ctx.textAlign = "right";
-ctx.fillText("show this on the screen", 0, 0);
-```
-
-✅ Baca lebih lanjut mengenai [cara menambahkan teks ke kanvas](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text), dan jangan ragu untuk menjadikan teks anda kelihatan lebih menarik!
-
-## Hidup, sebagai konsep permainan
-
-Konsep mempunyai kehidupan dalam permainan hanya bilangan. Dalam konteks permainan ruang angkasa adalah biasa untuk menetapkan satu set nyawa yang dipotong satu demi satu ketika kapal anda mengalami kerosakan. Senang jika anda dapat menunjukkan gambaran grafik seperti miniships atau hati dan bukannya angka.
-
-## Apakah yang anda perlu bina
-
-Mari tambahkan yang berikut ke permainan anda:
-
-- **Skor permainan**: Untuk setiap kapal musuh yang musnah, pahlawan harus diberikan beberapa mata, kami mencadangkan 100 mata setiap kapal. Skor permainan harus ditunjukkan di kiri bawah.
-- **Kehidupan**: Kapal anda mempunyai tiga nyawa. Anda kehilangan nyawa setiap kali kapal musuh bertembung dengan anda. Skor hidup mesti dipaparkan di kanan bawah dan dibuat berdasarkan grafik berikut! [Gambar hidup](../solution/assets/life.png).
-
-## Langkah yang disyorkan
-
-Cari fail yang telah dibuat untuk anda dalam sub folder `your-work`. Ia harus mengandungi yang berikut:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-Anda memulakan projek anda folder `your_work` dengan mengetik:
-
-```bash
-cd your-work
-npm start
-```
-
-Perkara di atas akan memulakan Pelayan HTTP pada alamat `http://localhost:5000`. Buka penyemak imbas dan masukkan alamatnya, sekarang ia akan menjadikan pahlawan dan semua musuh, dan ketika anda menekan anak panah kiri dan kanan, pahlawan bergerak dan dapat menembak musuh.
-
-### Tambahkan Kod
-
-1. **Salin atas aset yang diperlukan** dari folder `solution/aset/` ke folder `your-work`; anda akan menambah aset `life.png`. Tambahkan lifeImg ke fungsi window.onload:
-
-    ```javascript
-    lifeImg = await loadTexture("assets/life.png");
-    ```
-
-1. Tambahkan `lifeImg` ke senarai aset:
-
-    ```javascript
-    let heroImg,
-    ...
-    lifeImg,
-    ...
-    eventEmitter = new EventEmitter();
-    ```
-
-2. **Tambah pemboleh ubah**. Tambahkan kod yang mewakili jumlah skor anda (0) dan tinggal (3), paparkan skor ini di skrin.
-
-3. **Panjangkan fungsi `updateGameObjects ()`**. Panjangkan fungsi `updateGameObjects ()` untuk menangani perlanggaran musuh:
-
-    ```javascript
-    enemies.forEach(enemy => {
-        const heroRect = hero.rectFromGameObject();
-        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
-          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
-        }
-      })
-    ```
-
-4. **Tambahkan `life` dan` point`**.
-   1. **Memulakan pemboleh ubah**. Di bawah `this.cooldown = 0` di kelas `Hero`, tetapkan hidup dan mata:
-
-        ```javascript
-        this.life = 3;
-        this.points = 0;
-        ```
-
-    1. **Lukis pemboleh ubah pada skrin**. Lukiskan nilai-nilai ini ke skrin:
-
-        ```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. ** Tambahkan kaedah ke gelung Permainan **. Pastikan anda menambahkan fungsi ini ke fungsi window.onload anda di bawah `updateGameObjects()`:
-
-               ```javascript
-               drawPoints();
-               drawLife();
-               ``` 
-
-1. **Melaksanakan peraturan permainan**. Laksanakan peraturan permainan berikut:
-
-   1. **Untuk setiap pertembungan pahlawan dan musuh**, tolaklah nyawa.
-
-    Lanjutkan kelas `Hero` untuk melakukan pemotongan ini:
-
-        ```javascript
-        decrementLife() {
-          this.life--;
-          if (this.life === 0) {
-            this.dead = true;
-          }
-        }
-        ```
-
-    2. **Untuk setiap laser yang menyerang musu**, tingkatkan skor permainan dengan 100 mata.
-
-    Panjangkan kelas Wira untuk melakukan kenaikan ini:
-
-        ```javascript
-         incrementPoints() {
-            this.points += 100;
-          }
-        ```
-
-        Tambahkan fungsi ini ke Collision Event Emitter anda:
-
-        ```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();
-        });
-        ```
-
-✅ Lakukan sedikit penyelidikan untuk mengetahui permainan lain yang dibuat menggunakan JavaScript/Canvas. Apakah sifat umum mereka?
-
-Menjelang akhir kerja ini, anda akan melihat kapal-kapal kecil 'kehidupan' di kanan bawah, titik di kiri bawah, dan anda akan melihat pengurangan jumlah hayat anda semasa anda bertembung dengan musuh dan kenaikan mata anda ketika anda menembak musuh. Bagus! Permainan anda hampir selesai.
-
----
-
-## 🚀 Cabaran
-
-Kod anda hampir lengkap. Bolehkah anda membayangkan langkah seterusnya?
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38)
-
-## Mengkaji & Belajar Sendiri
-
-Teliti beberapa cara yang boleh anda tambah dan mengurangkan skor dan kehidupan permainan. Terdapat beberapa enjin permainan yang menarik seperti [PlayFab](https://playfab.com). Bagaimana penggunaan salah satu daripadanya dapat meningkatkan permainan anda?
-
-## Tugasan
-
-[Bina Permainan Pemarkahan](assignment.ms.md)
\ No newline at end of file
diff --git a/6-space-game/5-keeping-score/translations/README.zh-tw.md b/6-space-game/5-keeping-score/translations/README.zh-tw.md
deleted file mode 100644
index 67d60327..00000000
--- a/6-space-game/5-keeping-score/translations/README.zh-tw.md
+++ /dev/null
@@ -1,189 +0,0 @@
-# 建立太空遊戲 Part 5：分數與生命數
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/37?loc=zh_tw)
-
-在這堂課中，你會學習如何為遊戲加入計分功能與計算性命數。
-
-## 在畫面上繪製文字
-
-為了在畫面上顯示遊戲分數，你需要了解如何配置文字。答案是在 Canvas 物件上使用方法 `fillText()`。你也可以控制其他特徵，例如文字字型、文字顏色甚至文字對齊方向(左、右、置中)。下面是在畫面中繪製一些文字。
-
-```javascript
-ctx.font = "30px Arial";
-ctx.fillStyle = "red";
-ctx.textAlign = "right";
-ctx.fillText("show this on the screen", 0, 0);
-```
-
-✅ 閱讀更多關於[在畫布上建立文字](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_text)，你可以自由地豐富你的文字！
-
-## 性命，一個遊戲概念
-
-遊戲中的生命概念只是一個數字。在太空遊戲中，在你的船艦受到攻擊時，扣除生命值是一種常見的方式。如果能以圖像的方式顯示生命值也是很好的方式，例如船艦圖示、心臟圖像，而非單純使用數字。
-
-## 建立目標
-
-我們在遊戲中新增下列功能：
-
-- **遊戲分數**：當每一艘敵軍艦艇被摧毀時，英雄應該取得一些獎勵分數，我們建議一艘敵艦一百分。遊戲總分應該顯示在畫面的左下角。
-- **生命值**：你的船艦有三條性命。在每一次敵軍艦艇撞擊你時，你會損失一條性命。生命數應該顯示在畫面的右下角，以下列圖像顯示出來。 ![性命圖片](../solution/assets/life.png)
-
-## 建議步驟
-
-在你的 `your-work` 子資料夾中，確認檔案是否建立完成。它應該包括：
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
--| index.html
--| app.js
--| package.json
-```
-
-開始 `your_work` 資料夾中的專案，輸入：
-
-```bash
-cd your-work
-npm start
-```
-
-這會啟動 HTTP 伺服器並發布網址 `http://localhost:5000`。開啟瀏覽器並輸入該網址，現在它能顯示出英雄與所有的敵人，在你操作方向鍵後，英雄能移動並擊落敵人。
-
-### 加入程式碼
-
-1. 從資料夾 `solution/assets/` **複製你需要的檔案** 到資料夾 `your-work` 中。你會加入檔案 `life.png`。在函式 window.onload 中加入 lifeImg ： 
-
-    ```javascript
-    lifeImg = await loadTexture("assets/life.png");
-    ```
-
-1. 在檔案清單中加入 `lifeImg`：
-
-    ```javascript
-    let heroImg,
-    ...
-    lifeImg,
-    ...
-    eventEmitter = new EventEmitter();
-    ```
-  
-2. **新增變數**。 加入程式碼表達你的遊戲總分(0)和剩餘性命(3)，並顯示在畫面上。
-
-3. **擴增函式 `updateGameObjects()`**。 擴增函式 `updateGameObjects()` 來處理敵軍碰撞：
-
-    ```javascript
-    enemies.forEach(enemy => {
-        const heroRect = hero.rectFromGameObject();
-        if (intersectRect(heroRect, enemy.rectFromGameObject())) {
-          eventEmitter.emit(Messages.COLLISION_ENEMY_HERO, { enemy });
-        }
-      })
-    ```
-
-4. **加入 `life` 與 `points`**. 
-   1. **初始化變數**。 在 `Hero` class 的 `this.cooldown = 0` 下方，設定性命與分數：
-
-        ```javascript
-        this.life = 3;
-        this.points = 0;
-        ```
-
-   1. **在畫面上顯示變數內容**。 在畫面上繪製這些數值：
-
-        ```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. **在遊戲迴圈中加入呼叫**。 請確保你加入這些函式到 `updateGameObjects()` 下方的 window.onload 內：
-
-        ```javascript
-        drawPoints();
-        drawLife();
-        ```
-
-1. **制定遊戲規則**。 制定下列的遊戲規則：
-
-   1. **在英雄與敵人發生碰撞時**，扣除一條生命。
-   
-      擴增 `Hero` class 來執行這段減法：
-
-        ```javascript
-        decrementLife() {
-          this.life--;
-          if (this.life === 0) {
-            this.dead = true;
-          }
-        }
-        ```
-
-   2. **當雷射擊中敵人時**，增加遊戲總分一百分。
-
-      擴增 Hero class 來執行這段加法：
-    
-        ```javascript
-          incrementPoints() {
-            this.points += 100;
-          }
-        ```
-
-        加入這些函式到碰撞事件發送器中：
-
-        ```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();
-        });
-        ```
-
-✅ 做點研究，探索其他使用到 JavaScript 與 Canvas 的遊戲。他們有什麼共同特徵？
-
-在這個工作的尾聲，你應該能在右下方看到「性命」小船；左下方看到遊戲總分。當你碰撞到敵人時會扣除生命；當你擊落敵人時會增加分數。做得好！你的遊戲就快完成了。
-
----
-
-## 🚀 挑戰
-
-你的程式就快完成了。你能預測到下一步嗎？
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/38?loc=zh_tw)
-
-## 複習與自學
-
-研究其他種增加與減少分數與生命數的方法。這邊有一些有趣的遊戲引擎，例如：[PlayFab](https://playfab.com)。使用這些引擎能如何增進你的遊戲？
-
-## 作業
-
-[建立計分遊戲](assignment.zh-tw.md)
diff --git a/6-space-game/5-keeping-score/translations/assignment.es.md b/6-space-game/5-keeping-score/translations/assignment.es.md
deleted file mode 100644
index 1109c965..00000000
--- a/6-space-game/5-keeping-score/translations/assignment.es.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Construye un juego de puntuación
-
-## Instrucciones
-
-Crea un juego en el que muestres la vida y los puntos de forma creativa. Una sugerencia es mostrar la vida como corazones y los puntos como un gran número en la parte inferior central de la pantalla. Eche un vistazo aquí para ver [Recursos de juegos gratuitos](https://www.kenney.nl/)
-
-# Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-| | se presenta el juego completo | se presenta parcialmente el juego | juego parcial contiene errores |
\ No newline at end of file
diff --git a/6-space-game/5-keeping-score/translations/assignment.fr.md b/6-space-game/5-keeping-score/translations/assignment.fr.md
deleted file mode 100644
index 3c0ada72..00000000
--- a/6-space-game/5-keeping-score/translations/assignment.fr.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Développer un jeu de score
-
-## Instructions
-
-Créez un jeu où vous affichez la vie et les points de manière créative. Une suggestion est de montrer la vie sous forme de cœurs et les points sous forme de grand nombre dans la partie centrale inférieure de l'écran. Jetez un coup d'œil ici pour des [ressources de jeu gratuites](https://www.kenney.nl/)
-
-# Rubrique
-
-| Critères | Exemplaire              | Adéquat                    | Besoin d'amélioration          |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-|          | le jeu complet est présenté | le jeu est partiellement présenté | le jeu partiel contient des bugs |
\ No newline at end of file
diff --git a/6-space-game/5-keeping-score/translations/assignment.hi.md b/6-space-game/5-keeping-score/translations/assignment.hi.md
deleted file mode 100644
index d19ee896..00000000
--- a/6-space-game/5-keeping-score/translations/assignment.hi.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# एक स्कोरिंग गेम बनाएँ
-
-## अनुदेश
-
-एक खेल बनाएं जहां आप रचनात्मक तरीके से जीवन और बिंदुओं को प्रदर्शित करते हैं। एक सुझाव है कि जीवन को दिलों के रूप में दिखाना और स्क्रीन के निचले केंद्र भाग में एक बड़ी संख्या के रूप में अंक। [मुक्त खेल संसाधनों](https://www.kenney.nl/) के लिए यहाँ एक नज़र डाले ।
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक          | पर्याप्त                              | सुधार की जरूरत              |
-| ------ | -------------------- | ------------------------------------- | --------------------------- |
-|        | पूरा खेल प्रस्तुत है | खेल आंशिक रूप से प्रस्तुत किया गया है | आंशिक खेल में बग्स होते हैं |
diff --git a/6-space-game/5-keeping-score/translations/assignment.it.md b/6-space-game/5-keeping-score/translations/assignment.it.md
deleted file mode 100644
index 7082f3c8..00000000
--- a/6-space-game/5-keeping-score/translations/assignment.it.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Costruire un Gioco di Punteggio
-
-## Istruzioni
-
-Creare un gioco in cui si mostrano vite e punti in modo creativo. Un suggerimento è quello di mostrare le vite come cuori e i punti come un numero grande nella parte centrale in basso dello schermo. Dare un'occhiata qui per [risorse di gioco gratuite](https://www.kenney.nl/)
-
-# Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-|          | Viene presentato un gioco completo | Il gioco è presentato parzialmente  | il gioco parziale contiene bug |
\ No newline at end of file
diff --git a/6-space-game/5-keeping-score/translations/assignment.ja.md b/6-space-game/5-keeping-score/translations/assignment.ja.md
deleted file mode 100644
index 4f437938..00000000
--- a/6-space-game/5-keeping-score/translations/assignment.ja.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# スコアリングゲームの構築
-
-## 説明書
-
-ライフとポイントを独創的な方法で表示するゲームを作成します。提案としては、ライフをハートで表示し、ポイントを画面中央下部の大きな数字で表示することです。[無料のゲームリソース](https://www.kenney.nl/)はこちらをご覧ください。
-
-# ルーブリック
-
-| 基準 | 模範的な例              | 適切な                    | 改善が必要          |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-|          | フルゲームが提示されています | 部分的に提示されたゲーム | 部分的なゲームにはバグが含まれています |
\ No newline at end of file
diff --git a/6-space-game/5-keeping-score/translations/assignment.ko.md b/6-space-game/5-keeping-score/translations/assignment.ko.md
deleted file mode 100644
index ac2157c6..00000000
--- a/6-space-game/5-keeping-score/translations/assignment.ko.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 득점 게임 만들기
-
-## 설명
-
-생명과 포인트를 창의적으로 보여주는 게임을 만들어 봅시다. 화면 가운데 하단에는 생명과 포인트를 큰 숫자로 나타내보세요. [무료 게임 목록](https://www.kenney.nl/)을 참고해보세요.
-
-# 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 완성도 있는 게임을 만든 경우 | 일부만 작동하는 게임을 만든 경우 | 게임에 오류가 있는 경우
diff --git a/6-space-game/5-keeping-score/translations/assignment.ms.md b/6-space-game/5-keeping-score/translations/assignment.ms.md
deleted file mode 100644
index c00b327c..00000000
--- a/6-space-game/5-keeping-score/translations/assignment.ms.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Bina Permainan Pemarkahan
-
-## Arahan
-
-Buat permainan di mana anda menampilkan kehidupan dan mata dengan cara yang kreatif. Satu cadangan adalah untuk menunjukkan kehidupan sebagai hati dan poin sebagai angka yang besar di bahagian tengah bawah skrin. Lihat di sini [Sumber permainan percuma](https://www.kenney.nl/)
-
-# Rubrik
-
-| Kriteria | Contoh              | Mencukupi                    | Usaha Lagi          |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-|          | permainan penuh dipersembahkan | permainan dipersembahkan sebahagiannya | permainan separa mengandungi pepijat |
\ No newline at end of file
diff --git a/6-space-game/5-keeping-score/translations/assignment.nl.md b/6-space-game/5-keeping-score/translations/assignment.nl.md
deleted file mode 100644
index 545f74fc..00000000
--- a/6-space-game/5-keeping-score/translations/assignment.nl.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# Bouw een scorespel
-
-## Instructies
-
-Creëer een spel waarin u leven en punten op een creatieve manier weergeeft. Een suggestie is om het leven te laten zien als harten en de punten als een groot getal in het midden onderaan het scherm. Kijk hier voor [gratis spelbronnen](https://www.kenney.nl/)
-
-# Rubriek
-
-| Criteria | Voorbeeldig              | Voldoende                    | Moet worden verbeterd          |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-|          | volledige game wordt gepresenteerd | game wordt gedeeltelijk gepresenteerd | gedeeltelijke game bevat bugs |
\ No newline at end of file
diff --git a/6-space-game/5-keeping-score/translations/assignment.zh-tw.md b/6-space-game/5-keeping-score/translations/assignment.zh-tw.md
deleted file mode 100644
index b4dac6bf..00000000
--- a/6-space-game/5-keeping-score/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# 建立計分遊戲
-
-## 簡介
-
-建立一款遊戲，能有創意地顯示生命值與分數。建議上能在畫面的正下方，以心型圖示顯示生命值，或是斗大的數字顯示分數。看看這些[免費的遊戲資源](https://www.kenney.nl/)。
-
-## 學習評量
-
-| 作業內容 | 優良             | 普通             | 待改進       |
-| -------- | ---------------- | ---------------- | ------------ |
-|          | 呈現出完整的遊戲 | 遊戲提供部分內容 | 遊戲存在問題 |
diff --git a/6-space-game/6-end-condition/translations/README.es.md b/6-space-game/6-end-condition/translations/README.es.md
deleted file mode 100644
index 0b535fa0..00000000
--- a/6-space-game/6-end-condition/translations/README.es.md
+++ /dev/null
@@ -1,214 +0,0 @@
-# Construye un juego espacial Parte VI: Finalizar y reiniciar
-
-![video](video-url)
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
-
-Hay diferentes formas de expresar y *condición final* en un juego. Depende de usted, como creador del juego, decir por qué ha terminado. Aquí hay algunas razones, si asumimos que estamos hablando del juego espacial que has estado construyendo hasta ahora:
-
-- **Las naves `N` enemigas han sido destruidas**: Es bastante común si divides un juego en diferentes niveles que necesites destruir las naves `N` Enemy para completar un nivel
-- **Tu nave ha sido destruida**: Definitivamente hay juegos en los que pierdes el juego si tu nave es destruida. Otro enfoque común es que tienes el concepto de vidas. Cada vez que un barco es destruido, se descuenta una vida. Una vez que se hayan perdido todas las vidas, perderá el juego.
-- **Has acumulado `N` puntos**: Otra condición final común es que acumules puntos. La forma de obtener puntos depende de usted, pero es bastante común asignar puntos a diversas actividades, como destruir una nave enemiga o tal vez recolectar elementos que los elementos *sueltan* cuando son destruidos.
-- **Completa un nivel**: Esto puede implicar varias condiciones como "X" barcos enemigos destruidos, puntos "Y" acumulados o tal vez que se haya recogido un objeto específico.
-
-## Reiniciando
-
-Si las personas disfrutan de tu juego, es probable que quieran volver a jugarlo. Una vez que el juego termina por cualquier motivo, debes ofrecer una alternativa para reiniciar.
-
-✅ Piensa un poco en las condiciones en las que encuentras que termina un juego y luego cómo se te pide que reinicies
-
-## Qué construir
-
-Agregará estas reglas a su juego:
-
-1. **Ganar el juego**. Una vez que todas las naves enemigas hayan sido destruidas, ganas el juego. Además, muestra algún tipo de mensaje de victoria.
-1. **Reiniciar**. Una vez que hayas perdido todas tus vidas o hayas ganado el juego, debes ofrecer una forma de reiniciar el juego. ¡Recuerda! Deberá reinicializar el juego y se debe borrar el estado anterior del juego.
-
-## Pasos recomendados
-
-Busque los archivos que se han creado para usted en la subcarpeta `your-work`. Debe contener lo siguiente:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
-  -| life.png
--| index.html
--| app.js
--| package.json
-```
-
-Comienzas tu proyecto en la carpeta `your_work` escribiendo:
-
-```bash
-cd your-work
-npm start
-```
-
-Lo anterior iniciará un servidor HTTP en la dirección `http://localhost:5000`. Abra un navegador e ingrese esa dirección. Tu juego debe estar en un estado jugable.
-
-> consejo: para evitar advertencias en Visual Studio Code, edite la función `window.onload` para llamar a `gameLoopId` tal cual (sin `let`), y declare el gameLoopId en la parte superior del archivo, independientemente: `let gameLoopId;`
-
-### Agregar código
-
-1. **Condición de fin de pista**. Agregue un código que realice un seguimiento de la cantidad de enemigos o si el barco héroe ha sido destruido agregando estas dos funciones:
-
-    ```javascript
-    function isHeroDead() {
-      return hero.life <= 0;
-    }
-
-    function isEnemiesDead() {
-      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
-      return enemies.length === 0;
-    }
-    ```
-
-1. **Agregar lógica a los controladores de mensajes**. Edite el `eventEmitter` para manejar estas condiciones:
-
-    ```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. **Agregar nuevos tipos de mensajes**. Agregue estos mensajes al objeto de constantes:
-
-    ```javascript
-    GAME_END_LOSS: "GAME_END_LOSS",
-    GAME_END_WIN: "GAME_END_WIN",
-    ```
-
-2. **Agregar código de reinicio**. Código que reinicia el juego con solo presionar un botón seleccionado.
-
-    1. **Escuche la tecla "Enter"**. Edite el eventListener de su ventana para escuchar esta acción:
-
-    ```javascript
-     else if(evt.key === "Enter") {
-        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
-      }
-    ```
-
-1. **Agregar mensaje de reinicio**. Agregue este mensaje a su constante de Mensajes:
-
-        ```javascript
-        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
-        ```
-
-1. **Implementar las reglas del juego**. Implementa las siguientes reglas del juego:
-
-    1. **Condición de victoria del jugador**. Cuando todos los barcos enemigos sean destruidos, muestra un mensaje de victoria.
-
-       1. Primero, cree una función `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. Cree una función `endGame()`:
-
-        ```javascript
-        function endGame(win) {
-          clearInterval(gameLoopId);
-        
-          // establece una demora para estar seguros de que las pinturas han terminado
-          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. **Reiniciar la lógica**. Cuando se pierdan todas las vidas o el jugador haya ganado el juego, muestre que el juego se puede reiniciar. Además, reinicie el juego cuando se presione la tecla *reiniciar* (puede decidir qué tecla debe asignarse para reiniciar).
-
-       1. Cree la función `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. Agrega una llamada al `eventEmitter` para reiniciar el juego en `initGame()`:
-
-        ```javascript
-        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
-          resetGame();
-        });
-        ```
-
-     1. Agregue una función `clear()` al EventEmitter:
-
-        ```javascript
-        clear() {
-          this.listeners = {};
-        }
-        ```
-
-👽 💥 🚀 ¡Felicitaciones, Capitán! ¡Tu juego está completo! ¡Bien hecho! 🚀 💥 👽
-
-🚀 Desafío: ¡Agrega un sonido! ¿Puedes agregar un sonido para mejorar tu juego, tal vez cuando hay un golpe de láser, o el héroe muere o gana? Eche un vistazo a este [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) para aprender a reproducir sonido con JavaScript.
-
-## [Post-lecture prueba]((https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
-
-## Revisión y autoestudio
-
-Tu tarea es crear un juego de muestra nuevo, así que explora algunos de los juegos interesantes que existen para ver qué tipo de juego podrías construir.
-
-**Tarea**: [Crear un juego de muestra](assignment.es.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
deleted file mode 100644
index 94246239..00000000
--- a/6-space-game/6-end-condition/translations/README.fr.md
+++ /dev/null
@@ -1,223 +0,0 @@
-# Construire un jeu de l'espace Partie 6: Fin et redémarrage
-
-## Quiz de prélecture
-
-[Quiz de prélecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=fr)
-
-Il existe différentes façons d'exprimer et de terminer une condition 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 constants:
-
-    ```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 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://ashy-river-0debb7803.1.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/6-space-game/6-end-condition/translations/README.hi.md b/6-space-game/6-end-condition/translations/README.hi.md
deleted file mode 100644
index a396118b..00000000
--- a/6-space-game/6-end-condition/translations/README.hi.md
+++ /dev/null
@@ -1,224 +0,0 @@
-# एक अंतरिक्ष खेल बनाएँ भाग ६: अंत और पुनः आरंभ
-
-## प्री-रीडिंग क्विज
-
-[प्री-रीडिंग क्विज](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=hi)
-
-एक खेल में व्यक्त करने और _अंतिम स्थिति_ के विभिन्न तरीके हैं। यह गेम के निर्माता के रूप में यह कहना है कि खेल क्यों समाप्त हो गया है। यहाँ कुछ कारण हैं, अगर हम मान लें कि हम उस अंतरिक्ष खेल के बारे में बात कर रहे हैं जो आप अभी तक बना रहे हैं:
-
-- **`N` दुश्मन के जहाज तबाह हो गए हैं**: यदि आप एक गेम को विभिन्न स्तरों में विभाजित करते हैं तो यह काफी सामान्य है कि आपको एक स्तर पूरा करने के लिए `N` दुश्मन जहाजों को नष्ट करने की आवश्यकता है
-- **आपका जहाज नष्ट हो गया है**: यदि आपका जहाज नष्ट हो जाता है तो निश्चित रूप से ऐसे खेल हैं जहाँ आप खेल को खो देते हैं। एक और आम दृष्टिकोण यह है कि आपके पास जीवन की अवधारणा है। हर बार जब आपका जहाज नष्ट हो जाता है तो यह जीवन काट देता है। एक बार जब सभी जान चली गई तो आप खेल खो देते हैं.
-- **आपने `N` अंक एकत्र किए हैं**: एक और सामान्य अंतिम स्थिति आपके लिए अंक एकत्र करने की है। आप कैसे अंक प्राप्त करते हैं, यह आपके ऊपर है, लेकिन दुश्मन के जहाज को नष्ट करने या शायद वस्तुओं को इकट्ठा करने जैसी विभिन्न गतिविधियों के लिए अंक प्रदान करना काफी सामान्य है, जब वे _गिर_ जाते हैं।.
-- **एक स्तर पूरा करें**: इसमें कई स्थितियां शामिल हो सकती हैं जैसे कि `X` दुश्मन के जहाज नष्ट,` Y` अंक एकत्र या शायद एक विशिष्ट आइटम एकत्र किया गया है.
-
-## पुनरारंभ
-
-यदि लोग आपके खेल का आनंद लेते हैं, तो वे इसे फिर से खेलना चाहते हैं। एक बार खेल जो भी कारण से आप को पुनरारंभ करने के लिए एक विकल्प की पेशकश के लिए समाप्त होता है.
-
-✅ इस बारे में थोड़ा सोचें कि आपको किन परिस्थितियों में गेम समाप्त होता है, और फिर आपको कैसे पुनरारंभ करने के लिए प्रेरित किया जाता है
-
-## क्या बनना है
-
-आप इन नियमों को अपने खेल में शामिल करेंगे:
-
-1. **खेल जीतना**. एक बार सभी दुश्मन जहाजों को नष्ट कर दिए जाने के बाद, आप गेम जीतते हैं। इसके अतिरिक्त किसी प्रकार का विजय संदेश प्रदर्शित करें.
-1. **पुनरारंभ**. एक बार जब आपका सारा जीवन खो जाता है या खेल जीत जाता है, तो आपको खेल को पुनः आरंभ करने का एक तरीका पेश करना चाहिए। याद है! आपको खेल को फिर से संगठित करना होगा और पिछले खेल की स्थिति को साफ करना चाहिए.
-
-## अनुशंसित कदम
-
-उन फ़ाइलों का पता लगाएँ जो आपके लिए `your-work` सब फ़ोल्डर में बनाई गई हैं। इसमें निम्नलिखित शामिल होना चाहिए:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
-  -| life.png
--| index.html
--| app.js
--| package.json
-```
-
-आप टाइप करके अपना प्रोजेक्ट `your_work` फ़ोल्डर शुरू करें:
-
-```bash
-cd your-work
-npm start
-```
-
-उपरोक्त पते पर एक HTTP सर्वर शुरू होगा `http: // localhost: 5000`। एक ब्राउज़र खोले और उस पतेको खोलें। आपका खेल खेलने योग्य अवस्था में होना चाहिए
-
-> टिप: विज़ुअल स्टूडियो कोड में चेतावनियों से बचने के लिए, `window.onload` फ़ंक्शन को` gameLoopId` के रूप में (`let` के बिना) के रूप में संपादित करने के लिए संपादित करें, और स्वतंत्र रूप से फ़ाइल के शीर्ष पर gameLoopId की घोषणा करें, `let gameLoopId`;
-
-### कोड जोड़े
-
-1. **ट्रैक एंड कंडीशन**. उन कोडों को जोड़ें जो दुश्मनों की संख्या का ट्रैक रखते हैं, या यदि इन दो कार्यों को जोड़ते हुए नायक जहाज को नष्ट कर दिया गया है:
-
-   ```javascript
-   function isHeroDead() {
-     return hero.life <= 0;
-   }
-
-   function isEnemiesDead() {
-     const enemies = gameObjects.filter(
-       (go) => go.type === "Enemy" && !go.dead
-     );
-     return enemies.length === 0;
-   }
-   ```
-
-1. **संदेश संचालकों में तर्क जोड़ें**. इन स्थितियों को संभालने के लिए `EventEmitter` संपादित करें:
-
-   ```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. **नए संदेश प्रकार जोड़ें**. इन संदेशों को स्थिरांक वस्तु में जोड़ें:
-
-   ```javascript
-   GAME_END_LOSS: "GAME_END_LOSS",
-   GAME_END_WIN: "GAME_END_WIN",
-   ```
-
-1. **पुनः आरंभ कोड जोड़ें** कोड जो चयनित बटन के प्रेस पर गेम को पुनरारंभ करता है.
-
-   1. **`Enter` की प्रेस सुनो**. इस प्रेस को सुनने के लिए अपनी विंडो के इवेंटलिस्ट को एडिट करें:
-
-   ```javascript
-    else if(evt.key === "Enter") {
-       eventEmitter.emit(Messages.KEY_EVENT_ENTER);
-     }
-   ```
-
-   1. **पुनः आरंभ संदेश जोड़ें**. इस संदेश को अपने संदेशों में लगातार जोड़ें:
-
-      ```javascript
-      KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
-      ```
-
-1. **खेल के नियमों को लागू करें**. निम्नलिखित खेल नियमों को लागू करें:
-
-   1. **खिलाड़ी शर्त जीता**. जब सभी दुश्मन जहाज नष्ट हो जाते हैं, तो एक जीत संदेश प्रदर्शित करें.
-
-      1. सबसे पहले, एक `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. एक `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. **तर्क पुनः आरंभ**. जब सभी जीवन खो जाते हैं या खिलाड़ी खेल जीत जाता है, तो प्रदर्शित करें कि खेल को फिर से शुरू किया जा सकता है। इसके अलावा खेल को पुनरारंभ करें जब _पुनरारंभ_ की हिट होती है (आप तय कर सकते हैं कि पुनरारंभ करने के लिए किस की को मैप किया जाना चाहिए).
-
-      1. `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. `InitGame()` में गेम को रीसेट करने के लिए` EventEmitter` में कॉल जोड़ें:
-
-      ```javascript
-      eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
-        resetGame();
-      });
-      ```
-
-   1. EventEmitter में `clear()` फ़ंक्शन जोड़ें:
-
-      ```javascript
-      clear() {
-        this.listeners = {};
-      }
-      ```
-
-👽 💥 🚀 बधाई हो, कैप्टन! आपका खेल पूरा हो गया है! बहुत बढ़िया! 🚀 💥 👽
-
----
-
-## 🚀 चुनौती
-
-एक ध्वनि जोड़ें! क्या आप अपने गेम खेलने को बढ़ाने के लिए एक ध्वनि जोड़ सकते हैं, हो सकता है कि जब कोई लेजर हिट हो, या नायक मर जाए या जीत जाए? जावास्क्रिप्ट का उपयोग करके ध्वनि कैसे खेलें, यह जानने के लिए इस [सैंडबॉक्स](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) पर एक नज़र डालें
-
-## पोस्ट-व्याख्यान प्रश्नोत्तरी
-
-[पोस्ट-व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-आपका असाइनमेंट एक फ्रेश सैंपल गेम बनाना है, इसलिए वहां के कुछ दिलचस्प गेम्स को देखें कि आप किस प्रकार के गेम का निर्माण कर सकते हैं.
-
-## असाइनमेंट
-
-[एक नमूना खेल बनाएँ](assignment.hi.md)
diff --git a/6-space-game/6-end-condition/translations/README.it.md b/6-space-game/6-end-condition/translations/README.it.md
deleted file mode 100644
index 3e464252..00000000
--- a/6-space-game/6-end-condition/translations/README.it.md
+++ /dev/null
@@ -1,222 +0,0 @@
-# Costruire un Gioco Spaziale Parte 6: Fine e Riavvio
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=it)
-
-Esistono diversi modi per esprimere una *condizione di fine gioco*. Spetta al creatore del gioco dire perché il gioco è finito. Ecco alcuni motivi, si supponga di parlare del gioco spaziale costruito finora:
-
-- Un  **numero `N` di astronavi nemiche sono state distrutte**: è abbastanza comune se il gioco viene diviso in diversi livelli che si debba distruggere `N` astronavi nemiche per completare un livello
-- **La propria nave è stata distrutta**: ci sono sicuramente giochi in si perde la partita se la propria astronave viene distrutta. Un altro approccio comune è il concetto di vite. Ogni volta che una propria astronave viene distrutta, sottrae una vita. Una volta perse tutte le vite, si perde la partita.
-- **Sono stati raccolti `N` punti**: un'altra condizione finale comune è che il giocatore raccolga punti. Il modo in cui ottenere punti dipende dallo sviluppatore, ma è abbastanza comune assegnare punti a varie attività come distruggere una astronave nemica o forse raccogliere elementi che vengono *rilasciati* quando gli oggetti vengono distrutti.
-- **Completare un livello**: questo potrebbe coinvolgere diverse condizioni come `X` astronavi nemiche distrutte, `Y` punti raccolti o forse che è stato raccolto un oggetto specifico.
-
-## Riavvio
-
-Se le persone apprezzano il  gioco, è probabile che vogliano rigiocarlo. Una volta che il gioco finisce per qualsiasi motivo, si dovrebbe offrire un'alternativa per il riavvio.
-
-✅ Si pensi alle condizioni per le quali si ritiene che un gioco finisca e poi a come  viene chiesto di riavviare
-
-## Cosa costruire
-
-Aggiungere queste regole al gioco:
-
-1. **Vincere il gioco**. Una volta che tutte le navi nemiche sono state distrutte, si vince la partita. Mostrare inoltre una sorta di messaggio di vittoria.
-1. **Riavvio**. Una volta perse tutte le vite o si è vinto il gioco, si dovrebbe offrire un modo per riavviare il gioco. Ricordare! Si dovrà reinizializzare il gioco e lo stato del gioco precedente dovrebbe essere cancellato.
-
-## Passaggi consigliati
-
-Individuare i file che già sono stati creati nella sottocartella `your-work`. Dovrebbe contenere le seguenti informazioni:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
-  -| life.png
--| index.html
--| app.js
--| package.json
-```
-
-Si fa partire il progetto dalla cartella `your_work` digitando:
-
-```bash
-cd your-work
-npm start
-```
-
-Quanto sopra avvierà un server HTTP all'indirizzo `http://localhost:5000`. Aprire un browser e inserire quell'indirizzo. Il gioco dovrebbe essere in uno stato giocabile.
-
-> suggerimento: per evitare avvertimenti in Visual Studio Code, modificare la funzione `window.onload` per chiamare `gameLoopId` così com'è (senza `let`) e dichiarare gameLoopId all'inizio del file, indipendentemente: `let gameLoopId;`
-
-### Aggiungere codice
-
-1. **Tracciare la condizione di fine**. Aggiungere codice che tenga traccia del numero di nemici o se l'astronave dell'eroe è stata distrutta aggiungendo queste due funzioni:
-
-   ```javascript
-   function isHeroDead() {
-     return hero.life <= 0;
-   }
-
-   function isEnemiesDead() {
-     const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
-     return enemies.length === 0;
-   }
-   ```
-
-1. **Aggiungere logica ai gestori di messaggi**. Modificare `eventEmitter` per gestire queste condizioni:
-
-   ```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. **Aggiungere nuovi tipi di messaggi**. Aggiungere questi messaggi alle costanti assegnate agli oggetti:
-
-   ```javascript
-   GAME_END_LOSS: "GAME_END_LOSS",
-   GAME_END_WIN: "GAME_END_WIN",
-   ```
-
-2. **Aggiungere il codice di riavvio** che fa ripartire il gioco con la semplice pressione di un pulsante selezionato.
-
-   1. **Mettersi in ascolto per la pressione del tasto `Invio`**. Modificare l'eventListener di window per ascoltare questa pressione
-
-   ```javascript
-    else if(evt.key === "Enter") {
-       eventEmitter.emit(Messages.KEY_EVENT_ENTER);
-     }
-   ```
-
-   1. **Aggiungere messaggio di riavvio**. Aggiungere questo messaggio alle costanti in Messages:
-
-      ```javascript
-      KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
-      ```
-
-1. **Implementare le regole del gioco**. Implementare le seguenti regole di gioco:
-
-   1. **Condizione di vittoria del giocatore**. Quando tutte le astronavi nemiche vengono distrutte, mostrare un messaggio di vittoria.
-
-      1. Innanzitutto, creare una funzione `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. Creare una funzione `endGame()` :
-
-      ```javascript
-      function endGame(win) {
-        clearInterval(gameLoopId);
-
-        // imposta un ritardo per assicurarsi che tutte sia stato disegnato
-        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. **Logica di riavvio**. Quando tutte le vite sono perse o il giocatore ha vinto la partita, mostrare che il gioco può essere riavviato. Inoltre, riavviare il gioco quando viene premuto il tasto di *riavvio* (si può decidere quale tasto deve essere mappato per il riavvio).
-
-      1. Creare la funzione `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. Aggiungere una chiamata a `eventEmitter` per riazzerare il gioco in `initGame()`:
-
-      ```javascript
-      eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
-        resetGame();
-      });
-      ```
-
-   1. Aggiungere una funzione `clear()` a EventEmitter:
-
-      ```javascript
-      clear() {
-        this.listeners = {};
-      }
-      ```
-
-👽 💥 🚀 Congratulazioni, Capitano! Il gioco è completo! Ottimo lavoro! 🚀 💥 👽
-
----
-
-## 🚀 Sfida
-
-Aggiungere un suono! Si può aggiungere un suono per migliorare il gioco, magari quando un colpo di laser va a segno, o l'eroe muore o vince? Si dia un'occhiata a questo [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) per imparare a riprodurre il suono utilizzando JavaScript
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=it)
-
-## Revisione e Auto Apprendimento
-
-Il compito è creare un nuovo gioco di esempio, quindi esplorare alcuni dei giochi interessanti esistenti per vedere che tipo di gioco si potrebbe costruire.
-
-## Compito
-
-[Creare un Gioco di Esempio](assignment.it.md)
diff --git a/6-space-game/6-end-condition/translations/README.ja.md b/6-space-game/6-end-condition/translations/README.ja.md
deleted file mode 100644
index 1aec6f38..00000000
--- a/6-space-game/6-end-condition/translations/README.ja.md
+++ /dev/null
@@ -1,223 +0,0 @@
-# スペースゲーム構築プロジェクト その 6: 終了と再起動
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=ja)
-
-ゲーム内での表現方法や *終了条件* の表現方法は様々です。なぜゲームが終了したのかは、ゲームを作る側のあなた次第です。ここでは、あなたが今まで作ってきた宇宙ゲームの話をしていると仮定して、いくつかの理由を挙げてみましょう。
-
-- **`N` 隻の敵の宇宙船を撃破しました**: それはあなたがレベルを完了するために　N 隻の敵の宇宙船を破壊する必要があることを別のレベルにゲームを分割する場合はかなり一般的です
-- **あなたの船が破壊されました**: 自分の船が破壊されるとゲームに負けるゲームは間違いなくあります。もう一つの一般的なアプローチは、ライフの概念を持っているということです。あなたの宇宙船が破壊されるたびに、それはライフを差し引きます。すべてのライフが失われると、ゲームを失うことになります
-- **`N` ポイントを集めました**: もう一つの一般的な終了条件は、ポイントを集めることです。どのようにポイントを獲得するかはあなた次第ですが、敵の宇宙船を破壊したり、破壊された時にドロップするアイテムを集めたりと、様々な活動にポイントを割り当てるのが一般的です
-- **レベルをクリアしました**: これには、`X` 隻の敵の宇宙船を破壊したり、`Y` ポイントを集めたり、特定のアイテムを集めたりするなど、いくつかの条件が含まれている場合があります
-
-## 再起動
-
-人々があなたのゲームを楽しめば、彼らはそれを再プレイしたいと思う可能性が高いです。何らかの理由でゲームが終了したら、再起動するための代替手段を提供すべきです。
-
-✅ どのような条件でゲームが終了したか、そしてどのように再起動を促されるかを少し考えてみてください。
-
-## 何を構築するか
-
-これらのルールをゲームに追加していくことになります。
-
-1. **ゲームの勝利**。全ての敵の宇宙船を撃破したらゲームの勝利です。さらに、何らかの勝利メッセージを表示します
-1. **再起動すること**。全てのライフが失われたり、ゲームに勝利したら、ゲームを再起動する方法を提供する必要があります。覚えておいてください! ゲームを再初期化する必要があり、以前のゲームの状態をクリアする必要があります
-
-## 推奨される手順
-
-あなたのために作成されたファイルを `your-work` サブフォルダ内で探します。以下のファイルが含まれているはずです。
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
-  -| life.png
--| index.html
--| app.js
--| package.json
-```
-
-次のように入力して、`your_work` フォルダからプロジェクトを起動します。
-
-```bash
-cd your-work
-npm start
-```
-
-上記のようにすると、`http://localhost:5000` というアドレスに HTTP サーバーが起動します。ブラウザを開いて、そのアドレスを入力してください。ゲームがプレイ可能な状態になっているはずです。
-
-> ヒント: Visual Studio Code の警告を避けるためには、`window.onload` 関数を編集して `gameLoopId` をそのまま (`let` を省略して) 呼び出し、ファイルの先頭に gameLoopId を `let gameLoopId;` と独立して宣言します。
-
-### コードの追加
-
-1. **終了条件を追跡します**。敵の数を追跡したり、ヒーローの宇宙船が破壊されたかどうかを追跡するコードを追加します
-
-
-    ```javascript
-    function isHeroDead() {
-      return hero.life <= 0;
-    }
-
-    function isEnemiesDead() {
-      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
-      return enemies.length === 0;
-    }
-    ```
-
-1. **メッセージハンドラにロジックを追加します**。これらの条件を処理するために `eventEmitter` を編集します
-
-    ```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; // 勝利前に敗北
-        }
-        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. **新しいメッセージタイプを追加します**。これらのメッセージを定数オブジェクトに追加します
-
-    ```javascript
-    GAME_END_LOSS: "GAME_END_LOSS",
-    GAME_END_WIN: "GAME_END_WIN",
-    ```
-
-2. 選択したボタンの押下でゲームを再起動する**再起動コードを追加します**
-
-   1. **`Enter` キーの押下を待ち受けます**。この押下を待ち受けるために、ウィンドウの eventListener を編集します
-
-    ```javascript
-     else if(evt.key === "Enter") {
-        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
-      }
-    ```
-
-   1. **再起動メッセージを追加します**。このメッセージをメッセージ定数に追加します
-
-        ```javascript
-        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
-        ```
-
-1. **ゲームルールの実装** 以下のゲームルールを実装します
-
-   1. **プレイヤーの勝利条件**。敵の宇宙船を全て撃破した場合、勝利のメッセージを表示します
-
-      1. まず、関数 `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. 関数 `endGame()` を作成します
-
-        ```javascript
-        function endGame(win) {
-          clearInterval(gameLoopId);
-        
-          // 塗り終わったことを確認するために遅延を設定します
-          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. **再起動ロジック**。すべてのライフが失われたとき、またはプレイヤーが勝ったときに、ゲームを再起動できることを表示します。さらに、リスタートキーが押されるとゲームを再起動します (どのキーをリスタートにマッピングするかはあなたが決めることができます)
-
-      1. 関数 `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. `initGame()` でゲームをリセットするために `eventEmitter` の呼び出しを追加します
-
-        ```javascript
-        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
-          resetGame();
-        });
-        ```
-
-     1. EventEmitter に `clear()` 関数を追加します
-
-        ```javascript
-        clear() {
-          this.listeners = {};
-        }
-        ```
-
-👽 💥 🚀 おめでとうございます、隊長! あなたのゲームは完成しました! よくできました! 🚀 💥 👽
-
----
-
-## 🚀 チャレンジ
-
-音を追加しましょう!レーザーが当たった時や、ヒーローが死んだ時、勝った時など、ゲームを盛り上げるために音を追加することはできますか? JavaScript を使ってサウンドを再生する方法については、こちらの [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) をご覧ください。
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=ja)
-
-## 復習と自己学習
-
-あなたの課題は新鮮なサンプルゲームを作成することです。だから、どんなゲームを作れそうかを確認するために、そこにある面白いゲームのいくつかを探索してください。
-
-## 課題
-
-[サンプルゲームを作る](assignment.ja.md)
diff --git a/6-space-game/6-end-condition/translations/README.ko.md b/6-space-game/6-end-condition/translations/README.ko.md
deleted file mode 100644
index d1e24553..00000000
--- a/6-space-game/6-end-condition/translations/README.ko.md
+++ /dev/null
@@ -1,222 +0,0 @@
-# Space 게임 제작하기 파트 6: 끝과 재시작
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=ko)
-
-게임에서 *조건을 표현하고 종료*하는 여러 방식이 있습니다. 게임이 종료된 이유를 말하는 것은 게임 크리에이터의 일입니다. 지금까지 만든 space 게임에 대해 말하고 있다고 가정하면, 몇 가지 이유가 있습니다:
-
-- **`N`개의 적 배가 파괴되었습니다**: 게임을 여러 레벨로 나누면 레벨을 완료하기 위해 `N`개의 적 배를 부숴야하는 경우가 매우 흔합니다.
-- **배가 파괴되었습니다**: 배가 부서지면 지는 게임이 분명 있습니다. 또 다른 일반적인 접근 방식은 생명의 컨셉을 가지고 있다는 점입니다. 배가 부서질 때마다 생명이 깍입니다. 모든 목숨을 잃으면 게임에서 집니다.
-- **`N` 점수를 모았습니다**: 또 다른 종료 조건은 점수를 모으는 것입니다. 점수를 얻는 방법으로 각자 배를 파괴하는 것처럼 다양한 활동에 점수를 할당하거나 아이템이 부서질 때마다 *떨구는* 아이템을 수집하는 것은 매우 일반적입니다.
-- **레벨을 완료했습니다**: 적 배를 `X` 번 부시거나, `Y` 점수를 수집하거나 특정 아이템을 수집하는 것처럼 여러 조건들을 여기에 포함할 수 있습니다.
-
-## 다시 시작하기
-
-사람들이 게임을 즐기고 있다면 다시 플레이하고 싶어합니다. 어떤 이유든지 게임이 끝나면 다시 시작할 수 있는 대안을 줘야합니다.
-
-✅ 어떤 조건에서 게임이 끝나는 지에 대하여 찾고, 다시 시작이라는 메시지가 어떻게 보일지 생각해보세요
-
-## 무엇을 만드나요
-
-게임에 다음 규칙을 추가합니다:
-
-1. **게임에 우승합니다**. 모든 적의 배가 부서지면, 게임에서 승리합니다. 추가로 일종의 승리 메시지를 출력합니다.
-1. **다시 시작합니다**. 모든 생명을 잃거나 게임에서 이긴다면, 게임을 다시 시작할 방법을 제공해야 합니다. 생각해보세요! 게임을 다시 초기화하고 이전 게임 상태를 깨끗이 지워야 합니다.
-
-## 권장 단계
-
-`your-work` 하위 폴더에서 생성된 파일을 찾습니다. 다음을 포함해야 합니다:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
-  -| life.png
--| index.html
--| app.js
--| package.json
-```
-
-타이핑해서 `your_work` 폴더에 프로젝트를 시작합니다:
-
-```bash
-cd your-work
-npm start
-```
-
-위 코드는 `http://localhost:5000` 주소에서 HTTP 서버를 시작합니다. 브라우저를 열고 해당 주소를 입력합니다. 게임은 플레이 가능한 상태여야 합니다.
-
-> tip: Visual Studio Code에서 경고를 보이지 않게 하려면, `gameLoopId`를 (`let`없이) 그대로 호출하도록 `window.onload` 함수를 편집하고, 파일 최상단에 gameLoopId를 독립적으로 선언합니다: `let gameLoopId;`
-
-### 코드 추가하기
-
-1. **종료 조건을 추적합니다**. 다음 두 함수를 추가하여 적의 수를 추적하거나, 영웅의 배가 부서진 경우도 추적해주는 코드를 추가합니다:
-
-    ```javascript
-    function isHeroDead() {
-      return hero.life <= 0;
-    }
-
-    function isEnemiesDead() {
-      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
-      return enemies.length === 0;
-    }
-    ```
-
-1. **메시지 핸들러에 로직을 추가합니다**. 이 조건을 제어하도록 `eventEmitter`를 편집합니다:
-
-    ```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. **새로운 메시지 타입을 추가합니다**. 상수 객체에 이 메시지를 추가합니다:
-
-    ```javascript
-    GAME_END_LOSS: "GAME_END_LOSS",
-    GAME_END_WIN: "GAME_END_WIN",
-    ```
-
-2. **재시작 코드를 추가합니다** 선택한 버튼을 누르면 게임을 다시 시작하는 코드입니다.
-
-   1. **`Enter` 누를 키를 수신합니다**. 누르는 것을 수신하도록 윈도우의 이벤트 리스너를 편집합니다:
-
-    ```javascript
-     else if(evt.key === "Enter") {
-        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
-      }
-    ```
-
-   1. **재시작 메시지 추가하기**. 메시지를 메시지 상수에 추가합니다:
-
-        ```javascript
-        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
-        ```
-
-1. **게임 규칙을 구현합니다**.  다음 게임 규칙을 구현합니다:
-
-   1. **플레이어 승리 조건입니다**. 적 배가 모두 파괴되면, 승리 메시지를 출력합니다.
-
-      1. 먼저, `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. `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. **로직을 다시 시작합니다**. 모든 생명을 잃거나 플레이어가 게임에서 이긴다면, 게임을 다시 시작할 수 있다고 출력합니다. 추가로 *restart* 키를 누르면 게임을 다시 시작합니다 (다시 시작하기 위해 매핑할 키를 고를 수 있습니다).
-
-      1. `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. `initGame()`에서 게임을 다시 설정하기 위해 `eventEmitter`에 호출하도록 추가합니다:
-
-        ```javascript
-        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
-          resetGame();
-        });
-        ```
-
-     1. EventEmitter에 `clear()` 힘수를 추가합니다:
-
-        ```javascript
-        clear() {
-          this.listeners = {};
-        }
-        ```
-
-👽 💥 🚀 축하합니다, 대장! 게임이 완성되었습니다! 잘 하셨습니다! 🚀 💥 👽
-
----
-
-## 🚀 도전
-
-소리를 추가해보세요! 레이저가 때리거나, 영웅이 죽고 이길 때, 소리를 추가하여 게임 플레이를 향상시킬 수 있나요? [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play)에서 JavaScript로 소리를 재생하는 방법에 대하여 알아보세요
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-과제는 새로운 샘플 게임을 만드는 것이므로, 어떤 타입의 게임을 만들 수 있는지 알아보고 흥미로운 게임을 찾아보세요.
-
-## 과제
-
-[Build a Sample Game](../assignment.md)
diff --git a/6-space-game/6-end-condition/translations/README.ms.md b/6-space-game/6-end-condition/translations/README.ms.md
deleted file mode 100644
index 9572fa33..00000000
--- a/6-space-game/6-end-condition/translations/README.ms.md
+++ /dev/null
@@ -1,222 +0,0 @@
-# Bina Permainan Angkasa Bahagian 6: Tamat dan Mulakan Semula
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39)
-
-Terdapat pelbagai cara untuk menyatakan dan *keadaan akhir* dalam permainan. Terserah anda sebagai pencipta permainan untuk mengatakan mengapa permainan ini berakhir. Berikut adalah beberapa sebab, jika kita menganggap bahawa kita sedang membincangkan permainan ruang angkasa yang anda buat sejauh ini:
-
-- **Kapal musuh `N` telah hancur**: Sangat biasa jika anda membahagikan permainan ke dalam tahap yang berbeza yang anda perlukan untuk menghancurkan kapal `N` Musuh untuk menyelesaikan level
-- **Kapal anda hancur**: Pasti ada permainan di mana anda kehilangan permainan jika kapal anda musnah. Pendekatan umum lain ialah anda mempunyai konsep kehidupan. Setiap kali kapal anda musnah, ia akan meragut nyawa. Setelah semua nyawa telah hilang maka anda akan kehilangan permainan.
-- **Anda telah mengumpulkan mata `N`**: Syarat akhir yang umum ialah anda mengumpulkan mata. Cara anda memperoleh mata adalah bergantung kepada anda tetapi agak biasa untuk memberikan mata kepada pelbagai aktiviti seperti memusnahkan kapal musuh atau mungkin mengumpulkan barang-barang yang item *turun* ketika mereka musnah.
-- **Lengkapkan tahap**: Ini mungkin melibatkan beberapa syarat seperti kapal musuh `X` musnah, mata `Y` dikumpulkan atau mungkin item tertentu telah dikumpulkan.
-
-## Memulakan semula
-
-Sekiranya orang menikmati permainan anda, mereka mungkin ingin memainkannya semula. Setelah permainan berakhir dengan alasan apa pun, anda harus menawarkan alternatif untuk dimulakan semula.
-
-✅ Fikirkan sedikit dalam keadaan apa permainan anda berakhir, dan kemudian bagaimana anda diminta untuk memulakan semula
-
-## Apakah yang anda perlu bina
-
-Anda akan menambahkan peraturan ini ke permainan anda:
-
-1. **Memenangi permainan**. Setelah semua kapal musuh musnah, anda memenangi permainan. Selain itu memaparkan semacam mesej kemenangan.
-1. **Mulakan semula**. Setelah semua nyawa anda hilang atau permainan dimenangi, anda harus menawarkan cara untuk memulakan semula permainan. Ingat! Anda perlu memulakan semula permainan dan keadaan permainan sebelumnya harus dibersihkan.
-
-## Langkah-langkah yang disyorkan
-
-Cari fail yang telah dibuat untuk anda dalam sub folder `your-work`. Ia harus mengandungi yang berikut:
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
-  -| life.png
--| index.html
--| app.js
--| package.json
-```
-
-Anda memulakan projek anda folder `your_work` dengan mengetik:
-
-```bash
-cd your-work
-npm start
-```
-
-Perkara di atas akan memulakan Pelayan HTTP pada alamat `http://localhost:5000`. Buka penyemak imbas dan masukkan alamat itu. Permainan anda mestilah dalam keadaan boleh dimainkan.
-
-> tip: untuk mengelakkan amaran dalam Visual Studio Code, edit fungsi `window.onload` untuk memanggil `gameLoopId` sebagaimana adanya (tanpa `let`), dan nyatakan gameLoopId di bahagian atas fail, secara bebas: `let gameLoopId;`
-
-### Tambahkan kod
-
-1. **Keadaan hujung trek**. Tambahkan kod yang memantau jumlah musuh, atau jika kapal pahlawan telah musnah dengan menambahkan dua fungsi ini:
-
-    ```javascript
-    function isHeroDead() {
-      return hero.life <= 0;
-    }
-
-    function isEnemiesDead() {
-      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
-      return enemies.length === 0;
-    }
-    ```
-
-1. **Tambahkan logik ke pengendali mesej**. Edit `eventEmitter` untuk menangani keadaan berikut:
-
-    ```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. **Tambahkan jenis mesej baru**. Tambahkan Mesej ini ke objek pemalar:
-
-    ```javascript
-    GAME_END_LOSS: "GAME_END_LOSS",
-    GAME_END_WIN: "GAME_END_WIN",
-    ```
-
-2. **Tambah kod restart** kod yang memulakan semula permainan dengan menekan butang yang dipilih.
-
-   1. **Dengarkan kekunci tekan `Enter`**. Edit eventListener tetingkap anda untuk mendengar akhbar ini:
-
-    ```javascript
-     else if(evt.key === "Enter") {
-        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
-      }
-    ```
-
-    1. **Tambah semula mesej**. Tambahkan Mesej ini ke pemalar Mesej anda:
-
-        ```javascript
-        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
-        ```
-
-1. **Melaksanakan peraturan permainan**. Laksanakan peraturan permainan berikut:
-
-   1. **Syarat kemenangan pemain**. Apabila semua kapal musuh hancur, tunjukkan mesej kemenangan.
-
-      1. Pertama, buat fungsi `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. Buat fungsi `endGame()`:
-
-        ```javascript
-        function endGame(win) {
-          clearInterval(gameLoopId);
-        
-          // atur kelewatan supaya kami yakin sebarang cat telah selesai
-          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. **Mulakan semula logik**. Apabila semua nyawa hilang atau pemain memenangi permainan, tunjukkan bahawa permainan dapat dimulakan semula. Selain itu mulakan semula permainan apabila butang * restart * dipukul (anda boleh menentukan kunci apa yang harus dipetakan untuk dimulakan semula).
-
-      1. Buat fungsi `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. Tambahkan panggilan ke `eventEmitter` untuk menetapkan semula permainan di `initGame()`:
-
-        ```javascript
-        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
-          resetGame();
-        });
-        ```
-
-        1. Tambahkan fungsi `clear()` ke EventEmitter:
-
-        ```javascript
-        clear() {
-          this.listeners = {};
-        }
-        ```
-
-👽 💥 🚀 Tahniah, Kapten! Permainan anda selesai! Bagus! 🚀 💥 👽
-
----
-
-## 🚀 Cabaran
-
-Tambahkan suara! Bolehkah anda menambahkan suara untuk meningkatkan permainan anda, mungkin ketika ada pancaran laser, atau wira mati atau menang? Lihatlah [sandbox](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play) untuk belajar bagaimana memainkan suara menggunakan JavaScript
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40)
-
-## Mengkaji & Belajar Sendiri
-
-Tugas anda adalah membuat permainan contoh baru, jadi terokai beberapa permainan menarik di luar sana untuk melihat jenis permainan yang mungkin anda bina.
-
-## Tugasan
-
-[Bina Contoh Permainan](assignment.ms.md)
\ No newline at end of file
diff --git a/6-space-game/6-end-condition/translations/README.zh-tw.md b/6-space-game/6-end-condition/translations/README.zh-tw.md
deleted file mode 100644
index 909cd21d..00000000
--- a/6-space-game/6-end-condition/translations/README.zh-tw.md
+++ /dev/null
@@ -1,222 +0,0 @@
-# 建立太空遊戲 Part 6：結束與重來
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/39?loc=zh_tw)
-
-有許多方式可以表達遊戲中的*結束狀態*。這都取決於你這位遊戲開發者，定義遊戲結束的理由。假設我們討論這款已經開發許久的太空遊戲，以下是遊戲結束的理由：
-
-- **`N` 艘敵軍艦艇被擊毀**：如果你想將遊戲分成許多關卡，一種常見的方式是將每一關的破關門檻，定為擊毀 `N` 艘敵軍艦艇。
-- **你的船艦已被擊毀**：一定有遊戲，只要你的船艦被擊毀一次時，便判定你輸了這場遊戲。另一種可行概念是加入生命值系統。每次你的船艦被擊毀時，會扣除一條生命。一但你損失了所有性命，你便輸了這場遊戲。
-- **你已經取得 `N` 點分數**：另一種常見的結束狀態為分數門檻。取得分數的機制取決在你，常見的條件為摧毀敵艦、或是收集敵艦所*掉落*的道具。
-- **完成關卡**：這或許會涉及到許多種狀態，好比說： `X` 艘艦艇已被擊毀、已取得 `Y` 點分數或是收集特定的道具。
-
-## 重新遊戲
-
-如果玩家很享受你的遊戲，他們會想再重新遊玩一次。一旦因任何原因結束遊戲時，你應該要提供重新遊戲的方法。
-
-✅ 想想看，什麼條件下會結束一款遊戲，而它們又是如何提示你重新遊玩。
-
-## 建立目標
-
-你需要為你的遊戲新增這些規則：
-
-1. **贏得遊戲**。 一旦所有敵軍艦艇被擊毀時，你便贏得這場遊戲。請額外地顯示勝利訊息。
-1. **重新開始**。 一旦你損失了所有性命，或是贏得了勝利，你應該提供方法來重新遊戲。記住！你需要重新初始化你的遊戲，所有遊戲的歷史紀錄會被移除。
-
-## 建議步驟
-
-在你的 `your-work` 子資料夾中，確認檔案是否建立完成。它應該包括：
-
-```bash
--| assets
-  -| enemyShip.png
-  -| player.png
-  -| laserRed.png
-  -| life.png
--| index.html
--| app.js
--| package.json
-```
-
-開始 `your_work` 資料夾中的專案，輸入：
-
-```bash
-cd your-work
-npm start
-```
-
-這會啟動 HTTP 伺服器並發布網址 `http://localhost:5000`。開啟瀏覽器並輸入該網址。你的遊戲應該能被遊玩。
-
-> 要點： 要避免在 Visual Studio Code 裡出現警告訊息，編輯函式 `window.onload` 以 is，而非 let 的方式呼叫 `gameLoopId`；並在檔案正上方獨立地宣告 gameLoopId： `let gameLoopId;`。
-
-### 加入程式碼
-
-1. **追蹤結束狀態**。 新增程式碼來追蹤敵人的數量，利用下列函式判斷英雄艦艇是否被擊毀：
-
-    ```javascript
-    function isHeroDead() {
-      return hero.life <= 0;
-    }
-
-    function isEnemiesDead() {
-      const enemies = gameObjects.filter((go) => go.type === "Enemy" && !go.dead);
-      return enemies.length === 0;
-    }
-    ```
-
-1. **加入訊息處理器**。 編輯 `eventEmitter` 以處理這些狀態：
-
-    ```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; // 遊戲失敗，提前結束
-        }
-        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. **加入新的訊息**。 新增這些訊息到 Messages 常數中：
-
-    ```javascript
-    GAME_END_LOSS: "GAME_END_LOSS",
-    GAME_END_WIN: "GAME_END_WIN",
-    ```
-
-2. **加入重新開始的功能** 在按下特定按鈕後，程式會重新開始遊戲。
-
-   1. **監聽 `Enter` 按鈕之按壓**。 編輯視窗的 eventListener ，監聽按鍵的按壓：
-
-    ```javascript
-     else if(evt.key === "Enter") {
-        eventEmitter.emit(Messages.KEY_EVENT_ENTER);
-      }
-    ```
-
-   1. **加入重新遊戲的訊息**。 加入這段訊息到 Messages 常數中：
-
-        ```javascript
-        KEY_EVENT_ENTER: "KEY_EVENT_ENTER",
-        ```
-
-1. **制定遊戲規則**。 編制下列的遊戲規則：
-
-   1. **玩家勝利條件**。 當所有敵軍艦艇被擊毀時，顯示勝利訊息。
-
-      1. 首先，建立函式 `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. 建立函式 `endGame()`：
-
-        ```javascript
-        function endGame(win) {
-          clearInterval(gameLoopId);
-        
-          // 設定延遲以確保所有圖像皆繪製完成
-          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. **重新遊戲的邏輯**。 當玩家損失所有的性命，或是贏下這場遊戲，顯示遊戲重來的提示。此外，在*重新遊玩*按鍵被按壓時，重新遊戲(你可以自己決定任一個鍵盤按鍵)。
-
-      1. 建立函式 `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. 在 `initGame()` 內呼叫 `eventEmitter` 來重新設定遊戲：
-
-        ```javascript
-        eventEmitter.on(Messages.KEY_EVENT_ENTER, () => {
-          resetGame();
-        });
-        ```
-
-     1. 在 EventEmitter 加入函式 `clear()`：
-
-        ```javascript
-        clear() {
-          this.listeners = {};
-        }
-        ```
-
-👽 💥 🚀 恭喜你，艦長！你的遊戲已經完成了！幹得好！ 🚀 💥 👽
-
----
-
-## 🚀 挑戰
-
-加入遊戲音效！你能加入音效來提升遊戲品質嗎？或許在雷射擊中敵人，或是在英雄死亡、勝利時發出音效。看看這套[沙盒](https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_audio_play)，了解如何使用 JavaScript 播放音效。
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/40?loc=zh_tw)
-
-## 複習與自學
-
-你的功課是建立一款新的小遊戲。去探索一些有趣的遊戲，決定你想建造的遊戲類型。
-
-## 作業
-
-[建立一款遊戲](assignment.zh-tw.md)
diff --git a/6-space-game/6-end-condition/translations/assignment.es.md b/6-space-game/6-end-condition/translations/assignment.es.md
deleted file mode 100644
index 92fba8de..00000000
--- a/6-space-game/6-end-condition/translations/assignment.es.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Crea un juego de muestra
-
-## Instrucciones
-
-Intente crear un juego pequeño en el que practique en diferentes condiciones finales. Varía entre obtener una cantidad de puntos, el héroe pierde todas las vidas o todos los monstruos son derrotados. Construye algo simple como un juego de aventuras basado en consola. Utilice el siguiente flujo de juego como inspiración:
-
-''
-Hero> Golpea con espada ancha: el orco recibe 3p de daño
-Orc> Golpes con garrote: el héroe recibe 2p de daño
-Hero> Patadas: el orco recibe 1p de daño
-Game> Orc es derrotado - Hero recoge 2 monedas
-Game> ****No más monstruos, has conquistado la fortaleza del mal****
-''
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-| | se presenta el juego completo | se presenta parcialmente el juego | juego parcial contiene errores |
diff --git a/6-space-game/6-end-condition/translations/assignment.fr.md b/6-space-game/6-end-condition/translations/assignment.fr.md
deleted file mode 100644
index a09725c0..00000000
--- a/6-space-game/6-end-condition/translations/assignment.fr.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Développer un exemple de jeu
-
-## Instructions
-
-Essayez de créer un petit jeu où vous vous entraînez dans différentes conditions finales. Variez entre le fait d'obtenir un certain nombre de points, que le héros perde toutes les vies ou que tous les monstres soit vaincus. Construisez quelque chose de simple comme un jeu d'aventure sur console. Utilisez le flux de jeu ci-dessous comme source d'inspiration :
-
-```
-Héros> Frappe avec une épée large - l'orc subit 3p de dégâts
-Orc> Frappe avec un club - le héros subit 2p de dégâts
-Héros> Donne un coups de pied - l'orc subit 1p de dégâts
-Jeu> L'orc est vaincu - le héros récupère 2 pièces
-Jeu> ****Plus de monstres, vous avez conquis la forteresse maléfique****
-```
-
-## Rubrique
-
-| Critères | Exemplaire              | Adéquat                    | Besoin d'amélioration          |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-|          | le jeu complet est présenté | le jeu est partiellement présenté | le jeu partiel contient des bugs |
diff --git a/6-space-game/6-end-condition/translations/assignment.hi.md b/6-space-game/6-end-condition/translations/assignment.hi.md
deleted file mode 100644
index 310560ce..00000000
--- a/6-space-game/6-end-condition/translations/assignment.hi.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# एक नमूना खेल बनाएँ
-
-## अनुदेश
-
-एक छोटा गेम बनाने की कोशिश करें जहां आप विभिन्न अंत स्थितियों पर अभ्यास करते हैं। कई अंकों के बीच भिन्न, नायक सभी जीवन खो देता है या सभी राक्षसों को हराया जाता है। कंसोल आधारित साहसिक गेम की तरह कुछ सरल बनाएं। प्रेरणा के रूप में नीचे के खेल प्रवाह का उपयोग करें:
-
-```
-Hero> Strikes with broadsword - orc takes 3p damage
-Orc> Hits with club - hero takes 2p damage
-Hero> Kicks - orc takes 1p damage
-Game> Orc is defeated - Hero collects 2 coins
-Game> ****No more monsters, you have conquered the evil fortress****
-```
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक          | पर्याप्त                              | सुधार की जरूरत              |
-| ------ | -------------------- | ------------------------------------- | --------------------------- |
-|        | पूरा खेल प्रस्तुत है | खेल आंशिक रूप से प्रस्तुत किया गया है | आंशिक खेल में बग्स होते हैं |
diff --git a/6-space-game/6-end-condition/translations/assignment.it.md b/6-space-game/6-end-condition/translations/assignment.it.md
deleted file mode 100644
index 95cf3295..00000000
--- a/6-space-game/6-end-condition/translations/assignment.it.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Creare un Gioco di Esempio
-
-## Istruzioni
-
-Provare a costruire un piccolo gioco in cui esercitarsi in diverse condizioni di fine. Variare tra ottenere un numero di punti, l'eroe perde tutte le vite o tutti i mostri vengono sconfitti. Costruire qualcosa di semplice come un gioco di avventura basato su console. Usare il seguente flusso di gioco come ispirazione:
-
-```
-Eroe> Colpisce con lo spadone - l'orco riceve 3 punti di danno
-Orco> Colpisce con la mazza - l'eroe riceve 2 punti di danno
-Eroe> Calcia - l'orco takes 1 punto di danno
-Gioco> l'orco è sconfitto - L'eroe guadagna 2 monete
-Gioco> ****Non ci sono più mostri, la fortezza del male è stata conquistata****
-```
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-|          | Viene presentato un gioco completo | Il gioco è presentato parzialmente | il gioco parziale contiene bug |
\ No newline at end of file
diff --git a/6-space-game/6-end-condition/translations/assignment.ja.md b/6-space-game/6-end-condition/translations/assignment.ja.md
deleted file mode 100644
index 3a9a7fff..00000000
--- a/6-space-game/6-end-condition/translations/assignment.ja.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# サンプルゲームを作る
-
-## インストラクション
-
-異なる終了条件で練習する小さなゲームを構築してみてください。ポイントの数を取得する間に変化し、主人公はすべてのライフを失うか、またはすべてのモンスターが退治されてしています。コンソールベースのアドベンチャーゲームのようなシンプルなものを作ってみてください。インスピレーションとして以下のゲームの流れを使用してください。
-
-```
-Hero> Strikes with broadsword - orc takes 3p damage
-Orc> Hits with club - hero takes 2p damage
-Hero> Kicks - orc takes 1p damage
-Game> Orc is defeated - Hero collects 2 coins
-Game> ****No more monsters, you have conquered the evil fortress****
-```
-
-## ルーブリック
-
-| 基準 | 模範的な例              | 適切な                    | 改善が必要          |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-|          | フルゲームが提示されています | 部分的に提示されたゲーム | 部分的なゲームにはバグが含まれています |
\ No newline at end of file
diff --git a/6-space-game/6-end-condition/translations/assignment.ko.md b/6-space-game/6-end-condition/translations/assignment.ko.md
deleted file mode 100644
index aa284aa5..00000000
--- a/6-space-game/6-end-condition/translations/assignment.ko.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# 샘플 게임 만들기
-
-## 설명
-
-게임이 끝나는 다양한 조건을 연습할 수 있는 작은 게임을 만들어 봅시다. 점수를 얼마나 얻어야 하는지에 따라 주인공이 목숨을 다 잃거나 모든 몬스터들이 패배합니다. 콘솔 기반 어드벤처 게임과 같은 간단한 것을 만들어봅시다. 아래 예시를 참고해서 영감을 얻어 보세요.
-
-```
-영웅> 양날검 휘두르기 - 오크는 3포인트의 데미지를 입는다.
-오크> 클럽 휘두르기 - 영웅은 2포인트의 데미지를 입는다.
-영웅> 발차기 - 오크는 1포인트의 데미지를 입는다.
-게임> 오크가 지는 경우 - 영웅은 2코인을 얻는다.
-게임> ****해치울 몬스터가 더 이상 없으면 당신은 악마의 요새를 정복한 것입니다****
-```
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 완성도 있는 게임을 만든 경우 | 부분적인 게임을 구현한 경우 | 게임에 일부 버그가 있는 경우
diff --git a/6-space-game/6-end-condition/translations/assignment.ms.md b/6-space-game/6-end-condition/translations/assignment.ms.md
deleted file mode 100644
index 101f4812..00000000
--- a/6-space-game/6-end-condition/translations/assignment.ms.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Bina Contoh Permainan
-
-## Arahan 
-
-Cuba buat permainan kecil di mana anda berlatih dengan keadaan akhir yang berbeza. Berbeza antara mendapatkan sejumlah mata, wira kehilangan semua nyawa atau semua raksasa dikalahkan. Bina sesuatu yang mudah seperti permainan pengembaraan berasaskan konsol. Gunakan aliran permainan di bawah sebagai inspirasi:
-
-```
-Wira> Serangan dengan pedang lebar - orc mengalami kerosakan 3p
-Orc> Hits with club - wira mengalami kerosakan 2p
-Wira> Tendangan - orc mengalami kerosakan 1p
-Permainan> Orc dikalahkan - Hero mengumpulkan 2 syiling
-Permainan> ****Tidak ada lagi raksasa, anda telah menakluki kubu jahat****
-```
-
-## Rubrik
-
-| Kriteria | Contoh              | Mencukupi                    | Usaha Lagi          |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-|          | permainan penuh dipersembahkan| permainan dipersembahkan sebahagiannya | permainan separa mengandungi pepijat |
\ No newline at end of file
diff --git a/6-space-game/6-end-condition/translations/assignment.nl.md b/6-space-game/6-end-condition/translations/assignment.nl.md
deleted file mode 100644
index bbc70b0d..00000000
--- a/6-space-game/6-end-condition/translations/assignment.nl.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# Bouw een voorbeeldspel
-
-## Instructies
-
-Probeer een klein spel te bouwen waarin u oefent op verschillende eindcondities. Varieer tussen het behalen van een aantal punten, de held verliest alle levens of alle monsters zijn verslagen. Bouw iets eenvoudigs, zoals een console-gebaseerd avonturenspel. Gebruik de onderstaande spelstroom als inspiratie:
-
-```
-Held> slaat aan met slagzwaard - orc krijgt 3p schade
-Orc> Slaat met club - held krijgt 2p schade
-Held> Schopt - orc krijgt 1p schade
-Game> Orc is verslagen - Held verzamelt 2 munten
-Game> ****Geen monsters meer, u heeft het kwaadaardige fort veroverd****
-```
-
-## Rubriek
-
-| Criteria | Voorbeeldig              | Voldoende                    | Moet worden verbeterd          |
-| -------- | ---------------------- | --------------------------- | -------------------------- |
-|          | volledige game wordt gepresenteerd | game wordt gedeeltelijk gepresenteerd | gedeeltelijke game bevat bugs |
\ No newline at end of file
diff --git a/6-space-game/6-end-condition/translations/assignment.zh-tw.md b/6-space-game/6-end-condition/translations/assignment.zh-tw.md
deleted file mode 100644
index ba7b6106..00000000
--- a/6-space-game/6-end-condition/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,19 +0,0 @@
-# 建立一款遊戲
-
-## 簡介
-
-試著建立一款小遊戲，實際應用不同的終止狀態。做一些變化，如取得的分數、英雄血量或是被擊敗的怪物。可以是很簡單的類型，例如文字冒險遊戲。請參考下列的遊戲流程作為啟發：
-
-```
-英雄> 使用寶劍攻擊 - 獸人受到了 3 點傷害
-獸人> 使用棍棒攻擊 - 英雄受到了 2 點傷害
-英雄> 踢擊 - 獸人受到了 1 點傷害
-遊戲訊息> 獸人已被擊敗 - 英雄取得 2 枚硬幣
-遊戲訊息> ****已殲滅所有怪獸，你已佔領了邪惡堡壘****
-```
-
-## 學習評量
-
-| 作業內容 | 優良             | 普通             | 待改進       |
-| -------- | ---------------- | ---------------- | ------------ |
-|          | 呈現出完整的遊戲 | 遊戲提供部分內容 | 遊戲存在問題 |
diff --git a/6-space-game/translations/README.es.md b/6-space-game/translations/README.es.md
deleted file mode 100644
index ac4bf3b6..00000000
--- a/6-space-game/translations/README.es.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Construye un juego espacial
-
-Un juego espacial para enseñar los fundamentos de JavaScript más avanzados
-
-En esta lección aprenderás a construir tu propio juego espacial. Si alguna vez has jugado al juego "Space Invaders", este juego tiene la misma idea: dirigir una nave espacial y disparar a los monstruos que vienen desde arriba. Así es como se verá el juego terminado:
-
-![Finished game](../images/pewpew.gif)
-
-En estas seis lecciones aprenderá lo siguiente:
-
-- **Interactuar** con el elemento Canvas para dibujar cosas en una pantalla
-- **Comprender** el sistema de coordenadas cartesiano
-- **Aprenda** el patrón Pub-Sub para crear una arquitectura de juegos de sonido que sea más fácil de mantener y ampliar
-- **Aprovecha** Async / Await para cargar recursos del juego
-- **Manejar** eventos de teclado
-
-## Visión de conjunto
-
-- teoría
-   - [Introducción a la creación de juegos con JavaScript](introduction/README.md)
-- practica
-   - [Dibujo a lienzo](drawing-to-canvas/README.md)
-   - [Mover elementos por la pantalla](moving-elements-around/README.md)
-   - [Detección de colisiones](collision-detection/README.md)
-   - [Manteniendo la puntuación](keeping-score/README.md)
-   - [Finalizar y reiniciar el juego](end-condition/README.md)
diff --git a/6-space-game/translations/README.fr.md b/6-space-game/translations/README.fr.md
deleted file mode 100644
index 9d176dc4..00000000
--- a/6-space-game/translations/README.fr.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Construisez un jeu spatial (Space Game)
-
-Un jeu spatial pour enseigner les principes fondamentaux plus avancés de JavaScript
-
-Dans cette leçon, vous apprendrez à créer votre propre jeu spatial. Si vous avez déjà joué au jeu "Space Invaders", ce jeu a la même idée : diriger un vaisseau spatial et tirer sur des monstres qui descendent d'en haut. Voici à quoi ressemblera le jeu terminé :
-
-![jeu achevé](images/pewpew.gif)
-
-Dans ces six leçons, vous apprendrez ce qui suit :
-
-- **Interagir** avec l'élément Canvas pour dessiner des choses sur un écran
-- **Comprendre** le système de coordonnées cartésiennes
-- **Apprendre** le modèle Pub-Sub pour créer une architecture de jeu sonore plus facile à entretenir et à étendre
-- **Tirez parti** de Async/Attente pour charger les ressources du jeu
-- **Gérer**les événements du clavier
-
-## Aperçu
-
-- Théorie
-   - [Introduction à la création de jeux avec JavaScript](../1-introduction/translations/README.fr.md)
-- Pratique
-   - [Dessiner sur canvas](../2-drawing-to-canvas/translations/README.fr.md)
-   - [Déplacer des éléments sur l'écran](../3-moving-elements-around/translations/README.fr.md)
-   - [Détection de collision](../4-collision-detection/translations/README.fr.md)
-   - [Garder le score](../5-keeping-score/translations/README.fr.md)
-   - [Terminer et redémarrer le jeu](../6-end-condition/translations/README.fr.md)
-
-## Crédits
-
-Les éléments utilisés pour cela provenaient de https://www.kenney.nl/. 
-Si vous aimez créer des jeux, ce sont de très bons atouts, beaucoup sont gratuits et certains sont payants. 
diff --git a/6-space-game/translations/README.hi.md b/6-space-game/translations/README.hi.md
deleted file mode 100644
index 906d64ee..00000000
--- a/6-space-game/translations/README.hi.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# एक अंतरिक्ष खेल बनाएँ
-
-अधिक उन्नत जावास्क्रिप्ट बुनियादी बातों को सिखाने के लिए एक अंतरिक्ष खेल
-
-इस पाठ में, आप सीखेंगे कि अपना खुद का अंतरिक्ष खेल कैसे बनाया जाता है। यदि आपने कभी "अंतरिक्ष आक्रमणकारियों" खेल खेला है, तो खेल में केवल एक ही विचार है: एक अंतरिक्ष यान को चलाने के लिए और ऊपर से नीचे आने वाले राक्षसों को आग लगाना। यहाँ  देखिए यह खेल समाप्त होने पे कैसा दिखेगा
-
-![खत्म हुआ खेल](../images/pewpew.gif)
-
-इन छह पाठों में आप निम्नलिखित सीखेंगे:
-
-- एक स्क्रीन पर चीजों को खींचने के लिए कैनवास तत्व के साथ **इनरैक्ट** करें
-- कार्टेशियन समन्वय प्रणाली को **समझें**
-- ध्वनि-गेम आर्किटेक्चर बनाने के लिए पब-सब पैटर्न **सीखें** जो बनाए रखने और बढ़ाने में आसान है
-- खेल संसाधनों को लोड करने के लिए Async/Await का **लाभ उठाएं**
-- कीबोर्ड घटनाओं को **संभालें**
-
-## अवलोकन
-
-- सिद्धांतजावास्क्रिप्ट के साथ खेल के निर्माण का परिचय
-  - [Introduction to building games with JavaScript](1-introduction/README.md)
-- अभ्यास
-  - [कैनवास पर आरेखण](../2-drawing-to-canvas/README.hi.md)
-  - [स्क्रीन के चारों ओर बढ़ते तत्व](../3-moving-elements-around/README.hi.md)
-  - [टक्कर की पहचान](../4-collision-detection/README.hi.md)
-  - [हिसाब रखना](../5-keeping-score/README.hi.md)
-  - [खेल को समाप्त और पुनः आरंभ करना](../6-end-condition/README.hi.md)
-
-## आभार सूची
-
-इसके लिए इस्तेमाल की जाने वाली असेट् https://www.kenney.nl/ से आई है।
-यदि आप खेल का निर्माण कर रहे हैं, तो ये कुछ गंभीर रूप से अच्छी असेट्स हैं, बहुत कुछ मुफ्त है और कुछ का भुगतान किया जाता है।
diff --git a/6-space-game/translations/README.it.md b/6-space-game/translations/README.it.md
deleted file mode 100644
index 69b7e550..00000000
--- a/6-space-game/translations/README.it.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Costruire un Gioco Spaziale
-
-Un gioco spaziale per insegnare  fondamenti di JavaScript più avanzati
-
-In questa lezione si imparerà come costruire un gioco spaziale. Se mai si è giocato a "Space Invaders", questo gioco ha la stessa idea: guidare un'astronave e sparare sui mostri che scendono dall'alto. Ecco come apparirà il gioco finito:
-
-![Gioco completato](../images/pewpew.gif)
-
-In queste sei lezioni si imparerà quanto segue:
-
-- **Interagire** con l'elemento Canvas per disegnare oggetti su uno schermo
-- **Comprendere** il sistema di coordinate cartesiane
-- **Imparare** il modello Pub-Sub per creare una solida architettura di gioco più facile da mantenere ed estendere
-- **Sfruttare** Async/Await per caricare le risorse di gioco
-- **Gestire** gli eventi da tastiera
-
-## Panoramica
-
-- Teoria
-   - [Introduzione alla creazione di giochi con JavaScript](1-introduction/translations/README.it.md)
-- Esercitazione
-   - [Disegnare sull'elemento canvas](2-drawing-to-canvas/translations/README.it.md)
-   - [Spostamento di elementi sullo schermo](3-moving-elements-around/translations/README.it.md)
-   - [Rilevamento della collisione.](4-collision-detection/translations/README.it.md)
-   - [Tenere il punteggio](5-keeping-score/translations/README.it.md)
-   - [Terminare e riavviare il gioco](6-end-condition/translations/README.it.md)
-
-## Crediti
-
-Le risorse utilizzate provengono da https://www.kenney.nl/.
-Se interessa costruire giochi, queste sono alcune risorse davvero buone, molte sono gratuite e alcune sono a pagamento.
diff --git a/6-space-game/translations/README.ja.md b/6-space-game/translations/README.ja.md
deleted file mode 100644
index f0d4b9d9..00000000
--- a/6-space-game/translations/README.ja.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# スペースゲームの構築
-
-より高度な JavaScript の基礎を教えるスペースゲーム
-
-このレッスンでは、あなた自身のスペースゲームを作る方法を学びます。「スペースインベーダー」というゲームをプレイしたことがある方は、このゲームも同じように、宇宙船を操縦して、上から降ってくるモンスターを攻撃するというものです。完成したゲームはこんな感じです。
-
-![Finished game](../images/pewpew.gif)
-
-この6つのレッスンでは、次のことを学びます。
-
-- Canvas 要素と**相互にやりとりして**画面上に物を描く
-- 直交座標系を**理解する**
-- Pub-Sub パターンを**学び**、メンテナンスや拡張が容易なサウンドゲームアーキテクチャを作成できるようになる
-- Async/Await を**活用して**ゲームリソースをロードする
-- キーボードイベントを**処理する**
-
-## 概要
-
-- 理論
-   - [JavaScript を使ったゲーム構築入門](../1-introduction/translations/README.ja.md)
-- 実践
-   - [Canvas への描画](../2-drawing-to-canvas/translations/README.ja.md)
-   - [画面の周りの要素の移動](../3-moving-elements-around/translations/README.ja.md)
-   - [衝突の検出](../4-collision-detection/translations/README.ja.md)
-   - [スコアの保持](../5-keeping-score/translations/README.ja.md)
-   - [ゲームの終了と再起動](../6-end-condition/translations/README.ja.md)
-
-## クレジット
-
-このために使用したアセットは https://www.kenney.nl/ から入手しました。
-ゲームを作るのが好きなら、これらのアセットはとても良いもので、多くは無料で、一部有料のものがあります。
diff --git a/6-space-game/translations/README.ko.md b/6-space-game/translations/README.ko.md
deleted file mode 100644
index d2041de0..00000000
--- a/6-space-game/translations/README.ko.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# 스페이스 게임 만들기
-
-고급 JavaScript 기초를 가르치는 스페이스 게임
-
-이 강의에서는 자신만의 스페이스 게임을 만드는 방법을 배웁니다. 만약 "Space Invaders" 게임을 해본 적이 있다면, 이 게임은 같은 아이디어를 가지고 있습니다: 우주선을 조종하고 위에서 내려오는 몬스터를 향해서 발사하는 것입니다. 완성된 게임의 모습은 다음과 같습니다.
-
-![Finished game](../images/pewpew.gif)
-
-6개의 강의에서 다음을 학습합니다:
-
-- **상호 작용** Canvas 요소를 사용한 화면 그림
-- **이해** cartesian 좌표 시스템
-- **학습** 유지 및 확장이 더 쉬운 건전한 게임 아키텍처를 만들기위한 Pub-Sub 패턴
-- **이점** 게임 리소스를 불러오기 위한 Async/Await
-- **제어** 키보드 이벤트
-
-## 개요
-
-- 이론
-   - [JavaScript를 사용한 게임 빌드 소개](../1-introduction/translations/README.ko.md)
-- 실습
-   - [canvas로 그리기](../2-drawing-to-canvas/translations/README.ko.md)
-   - [화면에 요소 이동](../3-moving-elements-around/translations/README.ko.md)
-   - [충돌 감지](../4-collision-detection/translations/README.ko.md)
-   - [점수 유지](../5-keeping-score/translations/README.ko.md)
-   - [게임 종료 및 재시작](../6-end-condition/translations/README.ko.md)
-
-## Credits
-
-The assets used for this came from https://www.kenney.nl/. 
-If you are into building games, these are some seriously good assets, a lot is free and some are paid. 
diff --git a/6-space-game/translations/README.ms.md b/6-space-game/translations/README.ms.md
deleted file mode 100644
index b1ed826c..00000000
--- a/6-space-game/translations/README.ms.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Bina Permainan Angkasa
-
-Permainan ruang untuk mengajar asas-asas JavaScript yang lebih mendalam
-
-Dalam pelajaran ini, anda akan belajar bagaimana membuat permainan ruang angkasa anda sendiri. Sekiranya anda pernah memainkan permainan "Space Invaders", permainan ini mempunyai idea yang sama: untuk mengarahkan kapal angkasa dan menembak monster yang turun dari atas. Beginilah rupa permainan yang sudah siap:
-
-![Permainan selesai](../images/pewpew.gif)
-
-Dalam enam pelajaran ini anda akan mempelajari perkara berikut:
-
-- **Berinteraksi** dengan elemen Canvas untuk menarik sesuatu di skrin
-- **Memahami** sistem koordinat kartesian
-- **Pelajari** corak Pub-Sub untuk membuat seni bina permainan suara yang lebih mudah dijaga dan diperluas
-- **Leverage** Async / Tunggu untuk memuatkan sumber permainan
-- **Mengendalikan** acara papan kekunci
-
-## Gambaran keseluruhan
-
-- Theori
-   - [Pengenalan membina permainan dengan JavaScript](../1-introduction/README.md)
-- Practice
-   - [Melukis ke kanvas](../2-drawing-to-canvas/README.md)
-   - [Menggerakkan elemen di sekitar skrin](../3-moving-elements-around/README.md)
-   - [Pengesanan perlanggaran](../4-collision-detection/README.md)
-   - [Menjaga skor](../5-keeping-score/README.md)
-   - [Menamatkan dan memulakan semula permainan](../6-end-condition/README.md)
-
-## Kredit
-
-Aset yang digunakan untuk ini berasal dari https://www.kenney.nl/.
-Sekiranya anda suka membina permainan, ini adalah beberapa aset yang sangat baik, banyak percuma dan ada juga yang dibayar.
diff --git a/6-space-game/translations/README.nl.md b/6-space-game/translations/README.nl.md
deleted file mode 100644
index b884533b..00000000
--- a/6-space-game/translations/README.nl.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Bouw een Ruimtegame
-
-Een ruimtegame om meer geavanceerde JavaScript-basisprincipes te leren
-
-In deze les leert u hoe u uw eigen ruimtegame kunt bouwen. Als u ooit het spel "Space Invaders" hebt gespeeld, heeft dit spel hetzelfde idee: een ruimteschip besturen en schieten op monsters die van boven naar beneden komen. Hier is hoe het voltooide spel eruit zal zien:
-
-![Voltooid spel](../images/pewpew.gif)
-
-In deze zes lessen leert u het volgende:
-
-- **Werk** met het Canvas-element om dingen op een scherm te tekenen
-- **Begrijp** het cartesische coördinatensysteem
-- **Leer** het Pub-Sub-patroon om een degelijke game-architectuur te creëren die gemakkelijker te onderhouden en uit te breiden is
-- **Maak gebruik van** Async/Await om gamebronnen te laden
-- **Behandel** toetsenbordgebeurtenissen
-
-## Overzicht
-
-- Theorie
-   - [Inleiding tot het bouwen van spellen met JavaScript](../1-introduction/translations/README.md)
-- Praktijk
-   - [Tekenen op canvas](../2-drawing-to-canvas/translations/README.md)
-   - [Elementen over het scherm laten bewegen](../3-moving-elements-around/translations/README.md)
-   - [Botsingsdetectie](../4-collision-detection/translations/README.md)
-   - [Score bijhouden](../5-keeping-score/translations/README.md)
-   - [Het spel beëindigen en opnieuw starten](../6-end-condition/translations/README.md)
-
-## Credits
-
-De middelen die hiervoor zijn gebruikt, waren afkomstig van https://www.kenney.nl/.
-Als u van het bouwen van games houdt, zijn dit enkele zeer goede activa, veel is gratis en sommige worden betaald.
diff --git a/6-space-game/translations/README.pt-BR.md b/6-space-game/translations/README.pt-BR.md
deleted file mode 100644
index 33ef8fca..00000000
--- a/6-space-game/translations/README.pt-BR.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# Construa um jogo espacial
-
-Um jogo espacial para ensinar fundamentos JavaScript mais avançados
-
-Nesta lição, você aprenderá a construir seu próprio jogo espacial. Se você já jogou o jogo "Space Invaders", este jogo tem a mesma ideia: pilotar uma nave espacial e atirar em monstros que descem de cima. Veja como ficará o jogo finalizado:
-
-![Finished game](../images/pewpew.gif)
-
-Nestas seis lições, você aprenderá o seguinte:
-
-- **Interaja** com o elemento Canvas para desenhar coisas em uma tela
-- **Entenda** o sistema de coordenadas cartesianas
-- **Aprenda** o padrão Pub-Sub para criar uma arquitetura de jogo de som mais fácil de manter e estender
-- **Utilize** Async/Await para carregar recursos do jogo
-- **Trate** eventos de teclado
-
-## Visão Geral
-
-- Teoria
-  - [Introdução à criação de jogos com JavaScript](../1-introduction/translations/README.pt-BR.md)
-- Prática
-  - [Desenhando no Canvas](../2-drawing-to-canvas/translations/README.pt-BR.md)
-  - [Movendo elementos pela tela](../3-moving-elements-around/README.pt-BR.md)
-  - [Detecção de colisão](../4-collision-detection/README.pt-BR.md)
-  - [Mantendo a pontuação](../5-keeping-score/assignment.md/README.pt-BR.md)
-  - [Terminando e reiniciando o jogo](../6-end-condition/README.pt-BR.md)
-
-## Créditos
-
-Os assets utilizados para isso vieram de https://www.kenney.nl/.
-Se você gosta de construir jogos, esses são alguns assets muito bons, muitos são gratuitos e alguns são pagos.
diff --git a/6-space-game/translations/README.ta.md b/6-space-game/translations/README.ta.md
deleted file mode 100644
index d482edf1..00000000
--- a/6-space-game/translations/README.ta.md
+++ /dev/null
@@ -1,31 +0,0 @@
-#  விண்வெளி விளையாட்டை உருவாக்கு
-
-மேலும் மேம்பட்ட ஜாவாஸ்கிரிப்ட் அடிப்படைகளை கற்பிக்க ஒரு விண்வெளி விளையாட்டு
-
-இந்த பாடத்தில் உங்கள் சொந்த விண்வெளி விளையாட்டை எவ்வாறு உருவாக்குவது என்பதை நீங்கள் கற்றுக்கொள்ளலாம். நீங்கள் எப்போதாவது "விண்வெளி படையெடுப்பாளர்கள்" விளையாட்டை விளையாடியிருந்தால், இந்த விளையாட்டு அதே யோசனையைக் கொண்டுள்ளது: மேலே இருந்து கீழே வரும் அரக்கர்கள் மீது ஒரு விண்கலம் மற்றும் தீ. இங்கே முடிக்கப்பட்ட விளையாட்டு எப்படி இருக்கும்:
-
-![Finished game](../images/pewpew.gif)
-
-இந்த ஆறு பாடங்களில் நீங்கள் பின்வருவனவற்றைக் கற்றுக்கொள்ளலாம்:
-
-- **தொடர்பு** ஒரு திரையில் விஷயங்களை வரைய கேன்வாஸ் உறுப்பு 
-- **புரிந்து** கார்ட்டீசியன் ஒருங்கிணைப்பு அமைப்பு
-- **கற்றுக்கொள்ளுங்கள்** பராமரிக்க மற்றும் நீட்டிக்க எளிதான ஒலி விளையாட்டு கட்டிடக்கலை உருவாக்க பப்-துணை முறை
-- **நெம்புகோலியக்கம்** ஒத்திசைவு / விளையாட்டு வளங்களை ஏற்ற காத்திருக்கிறது
-- **கையாள** விசைப்பலகை நிகழ்வுகள்
-
-## கண்ணோட்டம்
-
-- புனைவி
-   - [ஜாவாஸ்கிரிப்ட் மூலம் விளையாட்டுகளை உருவாக்குவதற்கான அறிமுகம்](../1-introduction/README.md)
-- Practice
-   - [கேன்வாஸ் வரைதல்](../2-drawing-to-canvas/README.md)
-   - [திரையைச் சுற்றி நகரும் கூறுகள்](../3-moving-elements-around/README.md)
-   - [மோதல் கண்டறிதல்](../4-collision-detection/README.md)
-   - [மதிப்பெண் வைத்து](../5-keeping-score/README.md)
-   - [விளையாட்டை முடித்து மறுதொடக்கம் செய்தல்](../6-end-condition/README.md)
-
-## கடன்கள்
-
-இதற்கு பயன்படுத்தப்பட்ட சொத்துக்கள் https://www.kenney.nl/. 
-நீங்கள் விளையாட்டுகளை உருவாக்குகிறீர்கள் என்றால், இவை சில தீவிரமான நல்ல சொத்துக்கள், நிறைய இலவசம் மற்றும் சில பணம் செலுத்தப்படுகின்றன. 
diff --git a/6-space-game/translations/README.zh-cn.md b/6-space-game/translations/README.zh-cn.md
deleted file mode 100644
index 5f94f2e4..00000000
--- a/6-space-game/translations/README.zh-cn.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# 构建一款太空游戏
-
-一个太空游戏来教授更高级的 JavaScript 基础知识
-
-在本课中，你将学习如何建立你自己的太空游戏。如果你曾经玩过 "太空侵略者 "这个游戏，这个游戏的想法是一样的：驾驶飞船，向从上面下来的怪物开火。下面是完成后的游戏的样子。
-
-![游戏成品](../images/pewpew.gif)
-
-在这六节课中，你将学习以下内容。
-
-- **是用** Canvas 元素在屏幕上绘制东西
-- **了解**笛卡尔坐标系
-- **学习** Pub-Sub 模式，创建更容易维护和扩展的健全的游戏架构
-- **利用** Async/Await 来加载游戏资源
-- **处理**键盘事件
-
-## 总览
-
-- 理论
-  - [利用 JavaScript 设计游戏](../1-introduction/translations/README.zh-tw.md)
-- 实践
-  - [在画布上绘制](../2-drawing-to-canvas/translations/README.zh-tw.md)
-  - [移移动画面上的物件](../3-moving-elements-around/translations/README.zh-tw.md)
-  - [碰撞侦测](../4-collision-detection/translations/README.zh-tw.md)
-  - [持续得分](../5-keeping-score/translations/README.zh-tw.md)
-  - [结束与重新游戏](../6-end-condition/translations/README.zh-tw.md)
-
-## 贡献者
-
-游戏资源来自于 https://www.kenney.nl/。
-如果你喜欢制作游戏，这里有一些好东西，很多是免费的，也有些是付费的。
diff --git a/6-space-game/translations/README.zh-tw.md b/6-space-game/translations/README.zh-tw.md
deleted file mode 100644
index 4f4d9aab..00000000
--- a/6-space-game/translations/README.zh-tw.md
+++ /dev/null
@@ -1,31 +0,0 @@
-# 建立一款太空遊戲
-
-一款太空遊戲能教會你更多 JavaScript 的進階概念
-
-這系列課程中，你會學習如何建立屬於自己的太空遊戲。如果你遊玩過遊戲「太空侵略者」，這款遊戲有相同的套路：操控太空船並擊落由上接近的怪物。這是遊戲完成後的模樣：
-
-![遊戲成品](../images/pewpew.gif)
-
-這六堂課程中，你會學習：
-
-- **使用** Canvas 元素來在畫面上繪製物件
-- **了解**笛卡爾座標系
-- **學習**發布與訂閱設計模式，建立容易維護及擴增的遊戲結構
-- **利用** Async/Await 來讀取遊戲資源
-- **處理**鍵盤事件
-
-## 總覽
-
-- 理論
-   - [利用 JavaScript 設計遊戲](../1-introduction/translations/README.zh-tw.md)
-- 實作
-   - [在畫布上繪製](../2-drawing-to-canvas/translations/README.zh-tw.md)
-   - [移動畫面上之物件](../3-moving-elements-around/translations/README.zh-tw.md)
-   - [碰撞偵測](../4-collision-detection/translations/README.zh-tw.md)
-   - [持續得分](../5-keeping-score/translations/README.zh-tw.md)
-   - [結束與重新遊戲](../6-end-condition/translations/README.zh-tw.md)
-
-## 參與人員
-
-遊戲資源皆來自於 https://www.kenney.nl/。 
-如果你熱愛設計遊戲，這邊有許多實用的資源，許多資源是免費的，有些則是付費內容。
diff --git a/7-bank-project/1-template-route/translations/README.es.md b/7-bank-project/1-template-route/translations/README.es.md
deleted file mode 100644
index acbb1d93..00000000
--- a/7-bank-project/1-template-route/translations/README.es.md
+++ /dev/null
@@ -1,288 +0,0 @@
-# Plantillas HTML y rutas en una aplicación web
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
-
-### Introducción
-
-Desde la llegada de JavaScript a los navegadores, los sitios web se están volviendo más interactivos y complejos que nunca. Las tecnologías web ahora se utilizan comúnmente para crear aplicaciones completamente funcionales que se ejecutan directamente en un navegador que llamamos [aplicaciones web](https://en.wikipedia.org/wiki/Web_application). Como las aplicaciones web son muy interactivas, los usuarios no quieren esperar a que se vuelva a cargar la página completa cada vez que se realiza una acción. Es por eso que JavaScript se usa para actualizar el HTML directamente usando el DOM, para brindar una experiencia de usuario más fluida.
-
-En esta lección, vamos a sentar las bases para crear una aplicación web bancaria, utilizando plantillas HTML para crear múltiples pantallas que se pueden mostrar y actualizar sin tener que volver a cargar toda la página HTML.
-
-### Requisito previo
-
-Necesita un servidor web local para probar la aplicación web que crearemos en esta lección. Si no tiene uno, puede instalar [Node.js](https://nodejs.org) y usar el comando `npx lite-server` de la carpeta de su proyecto. Creará un servidor web local y abrirá su aplicación en un navegador.
-
-### Preparación
-
-En su computadora, cree una carpeta llamada `bank` con un archivo llamado `index.html` dentro. Comenzaremos desde este HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code):
-
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bank App</title>
-  </head>
-  <body>
-    <!-- Aquí es donde trabajarás -->
-  </body>
-</html>
-```
-
----
-
-## Plantillas HTML
-
-Si desea crear varias pantallas para una página web, una solución sería crear un archivo HTML para cada pantalla que desee mostrar. Sin embargo, esta solución tiene algunos inconvenientes:
-
-- Tienes que volver a cargar todo el HTML al cambiar de pantalla, lo que puede ser lento.
-- Es difícil compartir datos entre las diferentes pantallas.
-
-Otro enfoque es tener un solo archivo HTML y definir múltiples [plantillas HTML](https://developer.mozilla.org/docs/Web/HTML/Element/template) usando el elemento `<template>`. Una plantilla es un bloque HTML reutilizable que el navegador no muestra y debe instanciarse en tiempo de ejecución mediante JavaScript.
-
-### Tarea:
-
-Crearemos una aplicación bancaria con dos pantallas: la página de inicio de sesión y el panel de control. Primero, agreguemos en el cuerpo HTML un elemento de marcador de posición que usaremos para instanciar las diferentes pantallas de nuestra aplicación:
-
-```html
-<div id="app">Loading...</div>
-```
-
-Le daremos un `id` para que sea más fácil localizarlo con JavaScript más adelante.
-
-> Consejo: dado que el contenido de este elemento será reemplazado, podemos poner un mensaje de carga o un indicador que se mostrará mientras se carga la aplicación.
-
-A continuación, agreguemos debajo la plantilla HTML para la página de inicio de sesión. Por ahora, solo pondremos allí un título y una sección que contiene un botón que usaremos para realizar la navegación.
-
-```html
-<template id="login">
-  <h1>Bank App</h1>
-  <section>
-    <button>Login</button>
-  </section>
-</template>
-```
-
-Luego agregaremos otra plantilla HTML para la página del tablero. Esta página contendrá diferentes secciones:
-- Un encabezado con un título y un botón para cerrar sesión
-- El saldo actual de la cuenta bancaria
-- Una lista de transacciones, que se muestra en una tabla.
-
-```html
-<template id="dashboard">
-  <header>
-    <h1>Bank App</h1>
-    <button>Logout</button>
-  </header>
-  <section>
-    Balance: 100$
-  </section>
-  <section>
-    <h2>Transactions</h2>
-    <table>
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Object</th>
-          <th>Amount</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </section>
-</template>
-```
-
-Sugerencia: al crear plantillas HTML, si desea ver cómo se verá, puede comentar las líneas `<template>` y `</template>` encerrándolas entre `<!-- -->`.
-
-✅ ¿Por qué crees que usamos atributos ʻid` en las plantillas? ¿Podríamos usar algo más como clases?
-
-## Visualización de plantillas con JavaScript
-
-Si prueba su archivo HTML actual en un navegador, verá que se atasca mostrando `Loading...`. Eso es porque necesitamos agregar código JavaScript para crear instancias y mostrar las plantillas HTML.
-
-La instanciación de una plantilla se suele realizar en 3 pasos:
-
-1. Recupere el elemento de plantilla en el DOM, por ejemplo, usando [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
-2. Clone el elemento de plantilla, usando [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
-3. Adjúntelo al DOM bajo un elemento visible, por ejemplo usando [ʻappendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
-
-✅ ¿Por qué necesitamos clonar la plantilla antes de adjuntarla al DOM? ¿Qué crees que pasaría si nos salteáramos este paso?
-
-### Tarea
-
-Cree un nuevo archivo llamado `app.js` en la carpeta de su proyecto e importe ese archivo en la sección `<head>` de su HTML:
-
-
-```html
-<script src="app.js" defer></script>
-```
-
-Ahora en `app.js`, crearemos una nueva función `updateRoute`:
-
-```js
-function updateRoute(templateId) {
-  const template = document.getElementById(templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-Lo que hacemos aquí son exactamente los 3 pasos descritos anteriormente. Instalamos la plantilla con el id `templateId` y colocamos su contenido clonado dentro de nuestro marcador de posición de la aplicación. Tenga en cuenta que necesitamos usar `cloneNode (true)` para copiar todo el subárbol de la plantilla.
-
-Ahora llame a esta función con una de las plantillas y observe el resultado.
-
-```js
-updateRoute('login');
-```
-
-✅ ¿Cuál es el propósito de este código `app.innerHTML = '';`? ¿Qué pasa sin él?
-
-## Creando rutas
-
-Cuando hablamos de una aplicación web, llamamos *Enrutamiento* la intención de asignar **URL** a pantallas específicas que deben mostrarse. En un sitio web con varios archivos HTML, esto se hace automáticamente ya que las rutas de los archivos se reflejan en la URL. Por ejemplo, con estos archivos en la carpeta de su proyecto:
-
-```
-mywebsite/index.html
-mywebsite/login.html
-mywebsite/admin/index.html
-```
-
-Si crea un servidor web con `mywebsite` como raíz, la asignación de URL será:
-```
-https://site.com            --> mywebsite/index.html
-https://site.com/login.html --> mywebsite/login.html
-https://site.com/admin/     --> mywebsite/admin/index.html
-```
-
-Sin embargo, para nuestra aplicación web estamos usando un solo archivo HTML que contiene todas las pantallas, por lo que este comportamiento predeterminado no nos ayudará. Tenemos que crear este mapa manualmente y actualizar la plantilla mostrada usando JavaScript.
-
-### Tarea
-
-Usaremos un objeto simple para implementar un [mapa](https://en.wikipedia.org/wiki/Associative_array) entre las rutas de URL y nuestras plantillas. Agregue este objeto en la parte superior de su archivo `app.js`.
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard' },
-};
-```
-
-Ahora modifiquemos un poco la función `updateRoute`. En lugar de pasar directamente el `templateId` como argumento, queremos recuperarlo mirando primero la URL actual y luego usar nuestro mapa para obtener el valor de ID de plantilla correspondiente. Podemos usar [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) para obtener solo la sección de ruta de la URL.
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  const template = document.getElementById(route.templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-Aquí mapeamos las rutas que declaramos a la plantilla correspondiente. Puede probar que funciona correctamente cambiando la URL manualmente en su navegador.
-
-✅ ¿Qué sucede si ingresa una ruta desconocida en la URL? ¿Cómo podríamos solucionar esto?
-
-## Añadiendo navegación
-
-El siguiente paso para nuestra aplicación es agregar la posibilidad de navegar entre páginas sin tener que cambiar la URL manualmente. Esto implica dos cosas:
-  1. Actualización de la URL actual
-  2. Actualización de la plantilla mostrada en función de la nueva URL
-
-Ya nos ocupamos de la segunda parte con la función `updateRoute`, así que tenemos que averiguar cómo actualizar la URL actual.
-
-Si bien el elemento de anclaje HTML [`<a>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) se puede utilizar para crear hipervínculos a diferentes URL, podemos ' No use eso aquí, ya que hará que el navegador vuelva a cargar el HTML.
-
-En su lugar, tendremos que usar JavaScript y más específicamente el [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) que permite actualizar la URL y cree una nueva entrada en el historial de navegación, sin volver a cargar el HTML.
-
-### Tarea
-
-Creemos una nueva función que podamos usar para navegar en nuestra aplicación:
-
-
-```js
-function navigate(path) {
-  window.history.pushState({}, path, path);
-  updateRoute();
-}
-```
-
-Este método primero actualiza la URL actual según la ruta proporcionada y luego actualiza la plantilla. La propiedad `window.location.origin` devuelve la raíz de la URL, lo que nos permite reconstruir una URL completa a partir de una ruta determinada.
-
-Ahora que tenemos esta función, podemos solucionar el problema que tenemos si una ruta no coincide con ninguna ruta definida. Modificaremos la función `updateRoute` agregando un respaldo a una de las rutas existentes si no podemos encontrar una coincidencia.
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  if (!route) {
-    return navigate('/login');
-  }
-
-  ...
-```
-
-Si no se puede encontrar una ruta, ahora lo redireccionaremos a la página de `login`.
-
-Completemos el sistema de navegación agregando enlaces a nuestros botones *login* y *logout* en el HTML.
-
-```html
-<button onclick="navigate('/dashboard')">Login</button>
-...
-<button onclick="navigate('/login')">Logout</button>
-```
-
-Usando el atributo [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) enlaza el evento `click` al código JavaScript, aquí la llamada al` navigate()`función.
-
-Intente hacer clic en estos botones, ahora debería poder navegar entre las diferentes pantallas de su aplicación.
-
-✅ El método `history.pushState` es parte del estándar HTML5 y está implementado en [todos los navegadores modernos](https://caniuse.com/?search=pushState). Si está creando una aplicación web para navegadores más antiguos, hay un truco que puede usar en lugar de esta API: usar un [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) antes la ruta puede implementar un enrutamiento que funcione con la navegación de anclaje regular y no recargue la página, ya que su propósito era crear enlaces internos dentro de una página.
-
-## Manejo de los botones de avance y retroceso del navegador
-
-El uso de `history.pushState` crea nuevas entradas en el historial de navegación del navegador. Puede verificar que manteniendo presionado el *botón de retroceso* de su navegador, debería mostrar algo como esto:
-
-![Captura de pantalla del historial de navegación](../history.png)
-
-Si intenta hacer clic en el botón Atrás varias veces, verá que la URL actual cambia y el historial se actualiza, pero se sigue mostrando la misma plantilla.
-
-Eso es porque no sabemos que necesitamos llamar a `updateRoute()` cada vez que cambia el historial. Si echas un vistazo a la [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState), puedes ver que si el estado cambia - lo que significa que nos mudamos a una URL diferente - se activa el evento [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event). Lo usaremos para solucionar ese problema.
-
-### Tarea
-
-Para asegurarnos de que la plantilla mostrada se actualice cuando cambie el historial del navegador, adjuntaremos una nueva función que llama a `updateRoute()`. Lo haremos en la parte inferior de nuestro archivo `app.js`:
-
-
-```js
-window.onpopstate = () => updateRoute();
-updateRoute();
-```
-
-> Nota: utilizamos una [función de flecha](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) aquí para declarar nuestro controlador de eventos `popstate` por concisión, pero la función regular funcionaría igual.
-
-
-[![Arrow Functions](https://img.youtube.com/vi/JiXY9wlqUxQ/0.jpg)](https://youtube.com/watch?v=JiXY9wlqUxQ "Arrow Functions")
-
-
-Ahora intente utilizar los botones de avance y retroceso de sus navegadores y compruebe que esta vez lo que se muestra está actualizado correctamente.
-
----
-
-## 🚀 Desafío
-
-Agregue una nueva plantilla y ruta para una tercera página que muestre los créditos de esta aplicación.
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
-
-## Revisión y autoestudio
-
-**Tarea**: [Mejorar el enrutamiento](assignment.es.md)
diff --git a/7-bank-project/1-template-route/translations/README.fr.md b/7-bank-project/1-template-route/translations/README.fr.md
deleted file mode 100644
index 74996a72..00000000
--- a/7-bank-project/1-template-route/translations/README.fr.md
+++ /dev/null
@@ -1,309 +0,0 @@
-# Créer une application bancaire Partie 1 : Modèles HTML et routages dans une application Web
-
-## Quiz préalable
-
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41?loc=fr)
-
-### Introduction
-
-Depuis l'avènement de JavaScript dans les navigateurs, les sites Web deviennent plus interactifs et complexes que jamais. Les technologies Web sont maintenant couramment utilisées pour créer des applications entièrement fonctionnelles qui s'exécutent directement dans un navigateur que nous appelons [applications Web](https://en.wikipedia.org/wiki/Web_application). Les applications Web étant hautement interactives, les utilisateurs ne souhaitent pas attendre un rechargement complet de la page à chaque fois qu'une action est effectuée. C'est pourquoi JavaScript est utilisé pour mettre à jour le HTML directement à l'aide du DOM, afin de fournir une expérience utilisateur plus fluide.
-
-Dans cette leçon, nous allons poser les bases de la création d'une application Web bancaire, en utilisant des modèles HTML pour créer plusieurs écrans pouvant être affichés et mis à jour sans avoir à recharger toute la page HTML.
-
-### Prérequis
-
-Vous avez besoin d'un serveur Web local pour tester l'application Web que nous allons créer dans cette leçon. Si vous n'en avez pas, vous pouvez installer [Node.js](https://nodejs.org/fr) et utiliser la commande `npx lite-server` depuis le dossier de votre projet. Il créera un serveur Web local et ouvrira votre application dans un navigateur.
-
-### Préparation
-
-Sur votre ordinateur, créez un dossier nommé `bank` avec un fichier nommé `index.html` à l'intérieur. Nous allons commencer par ce code HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code):
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bank App</title>
-  </head>
-  <body>
-    <!-- This is where you'll work -->
-  </body>
-</html>
-```
-
----
-
-## Modèles HTML
-
-Si vous souhaitez créer plusieurs écrans pour une page Web, une solution serait de créer un fichier HTML pour chaque écran que vous souhaitez afficher. Cependant, cette solution présente quelques inconvénients :
-
-- Vous devez recharger l'intégralité du code HTML lors du changement d'écran, ce qui peut être lent.
-- Il est difficile de partager des données entre les différents écrans.
-
-Une autre approche consiste à n'avoir qu'un seul fichier HTML et à définir plusieurs [modèles HTML](https://developer.mozilla.org/docs/Web/HTML/Element/template) à l'aide de l'élément `<template>`. Un modèle est un bloc HTML réutilisable qui n'est pas affiché par le navigateur et doit être instancié lors de l'exécution à l'aide de JavaScript.
-
-### Tâche
-
-Nous allons créer une application bancaire avec deux écrans : la page de connexion et le tableau de bord. Tout d'abord, ajoutons dans le corps HTML un élément d'espace réservé que nous utiliserons pour instancier les différents écrans de notre application :
-
-```html
-<div id="app">Loading...</div>
-```
-
-Nous lui donnons un `id` pour le rendre plus facile à localiser avec JavaScript plus tard.
-
-> Astuce : puisque le contenu de cet élément sera remplacé, nous pouvons mettre un message de chargement ou un indicateur qui s'affichera pendant le chargement de l'application.
-
-Ensuite, ajoutons ci-dessous le modèle HTML pour la page de connexion. Pour l'instant nous n'y mettrons qu'un titre et une section contenant un lien que nous utiliserons pour effectuer la navigation.
-
-```html
-<template id="login">
-  <h1>Bank App</h1>
-  <section>
-    <a href="/dashboard">Login</a>
-  </section>
-</template>
-```
-
-Ensuite, nous ajouterons un autre modèle HTML pour la page du tableau de bord. Cette page contiendra différentes sections :
-
-- Une en-tête avec un titre et un lien de déconnexion
-- Le solde courant du compte bancaire
-- Une liste des transactions, affichée dans un tableau
-
-```html
-<template id="dashboard">
-  <header>
-    <h1>Bank App</h1>
-    <a href="/login">Logout</a>
-  </header>
-  <section>
-    Balance: 100$
-  </section>
-  <section>
-    <h2>Transactions</h2>
-    <table>
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Object</th>
-          <th>Amount</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </section>
-</template>
-```
-
-> Astuce : lors de la création de modèles HTML, si vous voulez voir à quoi cela ressemblera, vous pouvez commenter les lignes `<template>` et `</template>` en les entourant de `<!-- -->`.
-
-✅ Pourquoi pensez-vous que nous utilisons les attributs `id` sur les modèles ? Pourrions-nous utiliser autre chose comme des classes ?
-
-## Afficher des modèles avec JavaScript
-
-Si vous essayez votre fichier HTML actuel dans un navigateur, vous verrez qu'il reste bloqué en affichant `Loading...`. C'est parce que nous devons ajouter du code JavaScript pour instancier et afficher les modèles HTML.
-
-L'instanciation d'un modèle se fait généralement en 3 étapes :
-
-1. Récupérez l'élément du modèle dans le DOM, par exemple en utilisant [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
-2. Clonez l'élément de modèle à l'aide de [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
-3. Attachez-le au DOM sous un élément visible, par exemple en utilisant [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
-
-✅ Pourquoi avons-nous besoin de cloner le modèle avant de l'attacher au DOM ? Que pensez-vous qu'il se passerait si nous sautions cette étape?
-
-### Tâche
-
-Créez un nouveau fichier nommé `app.js` dans votre dossier de projet et importez ce fichier dans la section `<head>` de votre code HTML :
-
-```html
-<script src="app.js" defer></script>
-```
-
-Maintenant dans `app.js`, nous allons créer une nouvelle fonction `updateRoute`:
-
-```js
-function updateRoute(templateId) {
-  const template = document.getElementById(templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-Ce que nous faisons ici est exactement les 3 étapes décrites ci-dessus. Nous instancions le modèle avec l'ID `templateId` et plaçons son contenu cloné dans notre espace réservé d'application. Notez que nous devons utiliser `cloneNode(true)` pour copier l'intégralité du sous-arbre du modèle.
-
-Appelez maintenant cette fonction avec l'un des modèles et regardez le résultat.
-
-```js
-updateRoute('login');
-```
-
-✅ Quel est le but de ce code `app.innerHTML = '';` ? Que se passe-t-il sans ?
-
-## Création de routes
-
-Lorsque nous parlons d'une application Web, nous appelons *Routage* l'intention de mapper des **URL** sur des écrans spécifiques qui doivent être affichés. Sur un site Web avec plusieurs fichiers HTML, cela se fait automatiquement car les chemins d'accès aux fichiers sont reflétés sur l'URL. Par exemple, avec ces fichiers dans votre dossier de projet :
-
-```
-monsite/index.html
-monsite/login.html
-monsite/admin/index.html
-```
-
-Si vous créez un serveur Web avec `mywebsite` comme racine, le mappage d'URL sera:
-
-```
-https://site.com            --> mywebsite/index.html
-https://site.com/login.html --> mywebsite/login.html
-https://site.com/admin/     --> mywebsite/admin/index.html
-```
-
-Cependant, pour notre application Web, nous utilisons un seul fichier HTML contenant tous les écrans, ce comportement par défaut ne nous aidera donc pas. Nous devons créer cette carte manuellement et effectuer la mise à jour du modèle affiché à l'aide de JavaScript.
-
-### Tâche
-
-Nous utiliserons un objet simple pour implémenter une [carte](https://en.wikipedia.org/wiki/Associative_array) entre les chemins d'URL et nos modèles. Ajoutez cet objet en haut de votre fichier `app.js`.
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard' },
-};
-```
-
-Modifions maintenant un peu la fonction `updateRoute`. Au lieu de passer directement le `templateId` comme argument, nous voulons le récupérer en regardant d'abord l'URL actuelle, puis en utilisant notre carte pour obtenir la valeur d'ID de modèle correspondante. Nous pouvons utiliser [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) pour obtenir uniquement la section du chemin de l'URL.
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  const template = document.getElementById(route.templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-Ici, nous avons mappé les routes que nous avons déclarées au modèle correspondant. Vous pouvez vérifier que celà fonctionne correctement en modifiant l'URL manuellement dans votre navigateur.
-
-✅ Que se passe-t-il si vous saisissez un chemin inconnu dans l'URL ? Comment pourrions-nous résoudre cela?
-
-## Ajout de navigation
-
-La prochaine étape pour notre application consiste à ajouter la possibilité de naviguer entre les pages sans avoir à modifier l'URL manuellement. Cela implique deux choses :
-
-  1. Mise à jour de l'URL actuelle
-  2. Mise à jour du modèle affiché en fonction de la nouvelle URL
-
-Nous nous sommes déjà occupés de la deuxième partie avec la fonction `updateRoute`, nous devons donc trouver comment mettre à jour l'URL actuelle.
-
-Il va falloir utiliser JavaScript et plus précisément le [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) qui permet de mettre à jour l'URL et créer une nouvelle entrée dans l'historique de navigation, sans recharger le code HTML.
-
-> Remarque : Bien que l'élément d'ancrage HTML [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) puisse être utilisé seul pour créer des liens hypertexte à des URL différentes, il fera le navigateur recharger le HTML par défaut. Il est nécessaire d'empêcher ce comportement lors de la gestion du routage avec un javascript personnalisé, en utilisant la fonction preventDefault() sur l'événement click.
-
-### Tâche
-
-Créons une nouvelle fonction que nous pouvons utiliser pour naviguer dans notre application:
-
-```js
-function navigate(path) {
-  window.history.pushState({}, path, path);
-  updateRoute();
-}
-```
-
-Cette méthode met d'abord à jour l'URL actuelle en fonction du chemin donné, puis met à jour le modèle. La propriété `window.location.origin` renvoie la racine de l'URL, nous permettant de reconstruire une URL complète à partir d'un chemin donné.
-
-Maintenant que nous avons cette fonction, nous pouvons résoudre le problème que nous avons si un chemin ne correspond à aucun itinéraire défini. Nous modifierons la fonction `updateRoute` en ajoutant une solution de secours à l'une des routes existantes si nous ne trouvons pas de correspondance.
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  if (!route) {
-    return navigate('/login');
-  }
-
-  ...
-```
-
-Si un itinéraire ne peut pas être trouvé, nous allons maintenant rediriger vers la page de `login`.
-
-Créons maintenant une fonction pour obtenir l'URL lorsqu'un lien est cliqué et pour empêcher le comportement de lien par défaut du navigateur :
-
-```js
-function onLinkClick(event) {
-  event.preventDefault();
-  navigate(event.target.href);
-}
-```
-
-Complétons le système de navigation en ajoutant des liens à nos liens *Login* et *Logout* dans le HTML.
-
-```html
-<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
-...
-<a href="/login" onclick="onLinkClick(event)">Logout</a>
-```
-
-L'objet `event` ci-dessus capture l'événement `click` et le transmet à notre fonction `onLinkClick`.
-
-Utiliser l'attribut [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) lie l'événement `click` au code JavaScript, dans ce cas via l'appel à la fonction `navigate ()`.
-
-Essayez de cliquer sur ces liens, vous devriez maintenant pouvoir naviguer entre les différents écrans de votre application.
-
-✅ La méthode `history.pushState` fait partie de la norme HTML5 et est implémentée dans [tous les navigateurs modernes](https://caniuse.com/?search=pushState). Si vous créez une application Web pour les navigateurs plus anciens, il existe une astuce que vous pouvez utiliser à la place de cette API : en utilisant un [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) avant le chemin que vous pouvez implémenter un routage qui fonctionne avec la navigation d'ancrage standard et ne recharge pas la page, car son but était de créer des liens internes au sein d'une page.
-
-## Gestion des boutons Précédent et Suivant du navigateur
-
-L'utilisation de `history.pushState` crée de nouvelles entrées dans l'historique de navigation du navigateur. Vous pouvez vérifier qu'en maintenant enfoncé le *bouton de retour* de votre navigateur, il devrait afficher quelque chose comme ceci:
-
-![Capture d'écran de l'historique de navigation](./history.png)
-
-Si vous essayez de cliquer plusieurs fois sur le bouton Précédent, vous verrez que l'URL actuelle change et que l'historique est mis à jour, mais le même modèle reste affiché.
-
-C'est parce que l'application ne sait pas que nous devons appeler `updateRoute()` chaque fois que l'historique change. Si vous jetez un oeil à [ `la documentation de history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), vous pouvez voir que si l'état change - c'est que nous sommes passés à une URL différente - l'événement [ `popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) est déclenché. Nous allons l'utiliser pour résoudre ce problème.
-
-### Tâche
-
-Pour nous assurer que le modèle affiché est mis à jour lorsque l'historique du navigateur change, nous allons attacher une nouvelle fonction qui appelle `updateRoute()`. Nous le ferons au bas de notre fichier `app.js`:
-
-```js
-window.onpopstate = () => updateRoute();
-updateRoute();
-```
-
-> Remarque : nous avons utilisé une [fonction fléchée](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) ici pour déclarer notre gestionnaire d'événements `popstate` pour plus de concision, mais un la fonction normale fonctionnerait de la même manière.
-
-Voici une vidéo de rappel sur les fonctions fléchées :
-
-[![Fonctions fléchées](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Fonctions fléchées")
-
-> 🎥 Cliquez sur l'image ci-dessus pour une vidéo sur les fonctions fléchées.
-
-Essayez maintenant d'utiliser les boutons Précédent et Suivant de vos navigateurs, et vérifiez que la route affichée est bien mis à jour cette fois.
-
----
-
-## 🚀 Défi
-
-
-Ajoutez un nouveau modèle et une route pour une troisième page qui affiche les crédits de cette application.
-
-## Quiz de validation des connaissances
-
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42?loc=fr)
-
-## Révision et étude personnelle
-
-Le routage est l'une des parties étonnamment délicates du développement Web, d'autant plus que le Web passe des comportements d'actualisation des pages aux actualisations des pages d'application à page unique. En savoir plus sur [comment le service Azure Static Web App](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) gère le routage . Pouvez-vous expliquer pourquoi certaines des décisions décrites dans ce document sont nécessaires?
-
-## Affectation
-
-[Améliorer le routage](assignment.fr.md)
diff --git a/7-bank-project/1-template-route/translations/README.hi.md b/7-bank-project/1-template-route/translations/README.hi.md
deleted file mode 100644
index 8d47ab1f..00000000
--- a/7-bank-project/1-template-route/translations/README.hi.md
+++ /dev/null
@@ -1,304 +0,0 @@
-# एक वेब ऐप में बैंकिंग ऐप पार्ट 1: HTML टेम्प्लेट और रूट बनाएं
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41?loc=hi)
-
-### परिचय
-
-ब्राउज़रों में जावास्क्रिप्ट के आगमन के बाद से, वेबसाइटें पहले से कहीं अधिक इंटरैक्टिव और जटिल होती जा रही हैं। वेब प्रौद्योगिकियों का अब आमतौर पर पूरी तरह कार्यात्मक अनुप्रयोग बनाने के लिए उपयोग किया जाता है जो सीधे एक ब्राउज़र में चलता है जिसे हम [वेब एप्लिकेशन](https://en.wikipedia.org/wiki/Web_application) कहते हैं। चूंकि वेब ऐप्स अत्यधिक संवादात्मक हैं, इसलिए उपयोगकर्ता हर बार किसी क्रिया के पूरा होने तक पूर्ण पृष्ठ पुनः लोड होने की प्रतीक्षा नहीं करना चाहते हैं। यही कारण है कि एक चिकनी उपयोगकर्ता अनुभव प्रदान करने के लिए जावास्क्रिप्ट का उपयोग सीधे डोम का उपयोग करके HTML को अपडेट करने के लिए किया जाता है।
-
-इस पाठ में, हम बैंक वेब ऐप बनाने के लिए नींव रखने जा रहे हैं, HTML टेम्प्लेट का उपयोग करके ऐसी कई स्क्रीन बना सकते हैं जिन्हें प्रदर्शित किया जा सकता है और पूरे HTML पृष्ठ को फिर से लोड किए बिना अपडेट किया जा सकता है।
-
-### शर्त
-
-इस पाठ में हमारे द्वारा बनाए गए वेब ऐप का परीक्षण करने के लिए आपको एक स्थानीय वेब सर्वर की आवश्यकता होगी। यदि आपके पास एक नहीं है, तो आप [Node.js](https://nodejs.org) को स्थापित कर सकते हैं और अपने प्रोजेक्ट फ़ोल्डर से कमांड `npx lite-server` का उपयोग कर सकते हैं। यह एक स्थानीय वेब सर्वर बनाएगा और आपके ऐप को एक ब्राउज़र में खोलेगा।
-
-### तैयारी
-
-अपने कंप्यूटर पर, उसके अंदर `index.html` नामक फ़ाइल के साथ `bank` नामक एक फ़ोल्डर बनाएँ। हम इस HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code) से शुरू करेंगे :
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bank App</title>
-  </head>
-  <body>
-    <!-- This is where you'll work -->
-  </body>
-</html>
-```
-
----
-
-## HTML टेम्पलेट
-
-यदि आप एक वेब पेज के लिए कई स्क्रीन बनाना चाहते हैं, तो एक समाधान यह होगा कि आप जिस भी स्क्रीन को दिखाना चाहते हैं, उसके लिए एक HTML फाइल बनाई जाए। हालाँकि, यह समाधान कुछ असुविधा के साथ आता है:
-
-- आपको स्क्रीन स्विच करते समय पूरे HTML को फिर से लोड करना होगा, जो धीमा हो सकता है।
-- विभिन्न स्क्रीन के बीच डेटा साझा करना मुश्किल है।
-
-एक अन्य दृष्टिकोण में केवल एक HTML फ़ाइल है, और `<template>` तत्व का उपयोग करके कई [HTML टेम्पलेट्स](https://developer.mozilla.org/docs/Web/HTML/Element/template) को परिभाषित करें। एक टेम्पलेट एक पुन: प्रयोज्य HTML ब्लॉक है जो ब्राउज़र द्वारा प्रदर्शित नहीं किया जाता है, और जावास्क्रिप्ट का उपयोग करके रनटाइम पर तत्काल किया जाना चाहिए।
-
-### टास्क
-
-हम दो स्क्रीन के साथ एक बैंक ऐप बनाएंगे: लॉगिन पेज और डैशबोर्ड। सबसे पहले, एचटीएमएल बॉडी में एक प्लेसहोल्डर तत्व जोड़ें, जिसका उपयोग हम अपने ऐप की विभिन्न स्क्रीन को इंस्टेंट करने के लिए करेंगे:
-
-```html
-<div id="app">Loading...</div>
-```
-
-हम इसे एक `id` दे रहे हैं ताकि बाद में इसे जावास्क्रिप्ट के साथ ढूंढना आसान हो सके।
-
-> युक्ति: चूंकि इस तत्व की सामग्री को बदल दिया जाएगा, हम एक लोडिंग संदेश या संकेतक में डाल सकते हैं जो ऐप लोड होने के दौरान दिखाया जाएगा।
-
-अगला, लॉगिन पृष्ठ के लिए HTML टेम्पलेट के नीचे जोड़ें। अभी के लिए हम केवल एक शीर्षक और एक अनुभाग रखेंगे जिसमें एक लिंक होगा जिसका उपयोग हम नेविगेशन करने के लिए करेंगे।
-
-```html
-<template id="login">
-  <h1>Bank App</h1>
-  <section>
-    <a href="/dashboard">Login</a>
-  </section>
-</template>
-```
-
-फिर हम डैशबोर्ड पृष्ठ के लिए एक और HTML टेम्पलेट जोड़ेंगे। इस पृष्ठ में विभिन्न अनुभाग होंगे:
-
-- शीर्षक के साथ हैडर और लॉगआउट लिंक
-- बैंक खाते का वर्तमान संतुलन
-- लेनदेन की एक सूची, एक तालिका में प्रदर्शित
-
-```html
-<template id="dashboard">
-  <header>
-    <h1>Bank App</h1>
-    <a href="/login">Logout</a>
-  </header>
-  <section>
-    Balance: 100$
-  </section>
-  <section>
-    <h2>Transactions</h2>
-    <table>
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Object</th>
-          <th>Amount</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </section>
-</template>
-```
-
-> युक्ति: HTML टेम्प्लेट बनाते समय, यदि आप यह देखना चाहते हैं कि यह कैसा दिखेगा, तो आप `<template>` और `</template>` लाइनों को `<!-- -->` के साथ संलग्न करके टिप्पणी कर सकते हैं।
-
-✅ आपको क्या लगता है कि हम टेम्प्लेट पर `id` विशेषताओं का उपयोग क्यों करते हैं? क्या हम कक्षाओं की तरह कुछ और उपयोग कर सकते हैं?
-
-## जावास्क्रिप्ट के साथ टेम्पलेट्स प्रदर्शित करना
-
-यदि आप अपनी वर्तमान HTML फ़ाइल को किसी ब्राउज़र में आज़माते हैं, तो आप देखेंगे कि यह `Loading...` को प्रदर्शित करता है। ऐसा इसलिए है क्योंकि हमें HTML टेम्प्लेट को इंस्टेंट करने और प्रदर्शित करने के लिए कुछ जावास्क्रिप्ट कोड जोड़ना होगा।
-
-एक टेम्पलेट को तत्काल बनाना आमतौर पर 3 चरणों में किया जाता है:
- 1. DOM में टेम्पलेट तत्व को पुनः प्राप्त करें, उदाहरण के लिए [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getEgetById) का उपयोग करके।
-2. टेम्पलेट तत्व को क्लोन करें, [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode) का उपयोग करके।
-3. इसे एक दृश्य तत्व के तहत DOM में संलग्न करें, उदाहरण के लिए [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) का उपयोग करके।
-
-✅ DOM को संलग्न करने से पहले हमें टेम्प्लेट को क्लोन करने की आवश्यकता क्यों है? आपको क्या लगता है कि अगर हम इस कदम को छोड़ देते तो क्या होता?
-
-### टास्क
-
-अपने प्रोजेक्ट फ़ोल्डर में `app.js` नामक एक नई फ़ाइल बनाएँ और उस फ़ाइल को अपने HTML के `<head>`अनुभाग में आयात करें:
-
-```html
-<script src="app.js" defer></script>
-```
-
-अब `app.js` में, हम एक नया फ़ंक्शन `updateRoute` बनाएंगे:
-
-```js
-function updateRoute(templateId) {
-  const template = document.getElementById(templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-हम यहाँ क्या करते हैं, ऊपर वर्णित 3 चरण हैं। हम आईडी `templateId` के साथ टेम्पलेट को इंस्टेंट करते हैं, और हमारे ऐप प्लेसहोल्डर के भीतर इसकी क्लोन सामग्री डालते हैं। ध्यान दें कि हमें टेम्पलेट के पूरे उपप्रकार को कॉपी करने के लिए `cloneNode(true)` का उपयोग करने की आवश्यकता है।
-
-अब इस फंक्शन को टेम्प्लेट में से किसी एक पर कॉल करें और परिणाम देखें।
-
-```js
-updateRoute('login');
-```
-
-✅ इस कोड का उद्देश्य क्या है `app.innerHTML =' '; `? इसके बिना क्या होता है?
-
-## रूटस बनाना
-
-जब एक वेब ऐप के बारे में बात की जाती है, तो हम *रूटिंग* को मैप करने का इरादा **URL** विशिष्ट स्क्रीन पर प्रदर्शित करते हैं जिन्हें प्रदर्शित किया जाना चाहिए। एकाधिक HTML फ़ाइलों वाली वेब साइट पर, यह स्वचालित रूप से किया जाता है क्योंकि URL पर फ़ाइल पथ प्रतिबिंबित होते हैं। उदाहरण के लिए, अपने प्रोजेक्ट फ़ोल्डर में इन फ़ाइलों के साथ:
-
-```
-mywebsite/index.html
-mywebsite/login.html
-mywebsite/admin/index.html
-```
-
-यदि आप रूट के रूप में `mywebsite` के साथ एक वेब सर्वर बनाते हैं, तो URL मैपिंग निम्न होगी:
-
-```
-https://site.com            --> mywebsite/index.html
-https://site.com/login.html --> mywebsite/login.html
-https://site.com/admin/     --> mywebsite/admin/index.html
-```
-
-हालाँकि, हमारे वेब ऐप के लिए हम सभी स्क्रीन वाले एक एकल HTML फ़ाइल का उपयोग कर रहे हैं ताकि यह डिफ़ॉल्ट व्यवहार हमारी मदद न करे। हमें इस नक्शे को मैन्युअल रूप से बनाना होगा और जावास्क्रिप्ट का उपयोग करके प्रदर्शित टेम्प्लेट को अपडेट करना होगा।
-
-### टास्क
-
-URL पथ और हमारे टेम्प्लेट के बीच एक [मैप](https://en.wikipedia.org/wiki/Associative_array) को लागू करने के लिए हम एक साधारण वस्तु का उपयोग करेंगे। इस ऑब्जेक्ट को अपने `app.js` फ़ाइल के शीर्ष पर जोड़ें।
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard' },
-};
-```
-
-अब चलो `updateRoute` फ़ंक्शन को थोड़ा संशोधित करते हैं। एक तर्क के रूप में सीधे `templateId` पास करने के बजाय, हम पहले वर्तमान URL को देखकर इसे पुनः प्राप्त करना चाहते हैं, और फिर संबंधित टेम्पलेट आईडी मान प्राप्त करने के लिए हमारे मानचित्र का उपयोग करते हैं। URL से केवल पथ अनुभाग प्राप्त करने के लिए हम [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) का उपयोग कर सकते हैं।
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  const template = document.getElementById(route.templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-यहां हमने संबंधित टेम्प्लेट में घोषित मार्गों को मैप किया। आप इसे आज़मा सकते हैं कि यह आपके ब्राउज़र में URL को मैन्युअल रूप से बदलकर सही ढंग से काम करता है।
-
-✅ यदि आप URL में अज्ञात पथ दर्ज करते हैं तो क्या होगा? हम इसे कैसे हल कर सकते हैं?
-
-## नेवीगेशन जोड़ना
-
-हमारे एप्लिकेशन के लिए अगला चरण मैन्युअल रूप से URL बदलने के बिना पृष्ठों के बीच नेविगेट करने की संभावना को जोड़ना है। इसका तात्पर्य दो चीजों से है:
-
-  1. वर्तमान URL को अद्यतन करना
-  2. नए URL के आधार पर प्रदर्शित टेम्प्लेट को अपडेट करना
-
-हमने पहले ही `updateRoute` फ़ंक्शन के साथ दूसरे भाग का ध्यान रखा, इसलिए हमें यह पता लगाना होगा कि वर्तमान URL को कैसे अपडेट किया जाए।
-
-हमें जावास्क्रिप्ट और अधिक विशेष रूप से [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) का उपयोग करना होगा जो URL को अपडेट करने की अनुमति देता है HTML को पुनः लोड किए बिना, ब्राउज़िंग इतिहास में एक नई प्रविष्टि बनाएँ।
-
-> नोट: जबकि HTML एंकर तत्व [`<a href>`] (https://developer.mozilla.org/docs/Web/HTML/Element/a) का उपयोग हाइपरलिंक बनाने के लिए स्वयं किया जा सकता है विभिन्न यूआरएल, यह ब्राउज़र को डिफ़ॉल्ट रूप से HTML को फिर से लोड करेगा। क्लिक करें घटना पर preventDefault() फ़ंक्शन का उपयोग करके कस्टम जावास्क्रिप्ट के साथ रूटिंग को हैंडल करते समय इस व्यवहार को रोकना आवश्यक है।
-
-### टास्क
-
-आइए एक नया फ़ंक्शन बनाएं जिसे हम अपने ऐप में नेविगेट करने के लिए उपयोग कर सकते हैं:
-
-```js
-function navigate(path) {
-  window.history.pushState({}, path, path);
-  updateRoute();
-}
-```
-
-यह विधि पहले दिए गए पथ के आधार पर वर्तमान URL को अपडेट करती है, फिर टेम्पलेट को अपडेट करती है। प्रॉपर्टी `window.location.origin` URL रूट लौटाती है, जिससे हम किसी दिए गए पथ से एक पूर्ण URL का पुनर्निर्माण कर सकते हैं।
-
-अब जब हमारे पास यह फ़ंक्शन है, तो हम इस समस्या का ध्यान रख सकते हैं कि अगर कोई रास्ता किसी परिभाषित मार्ग से मेल नहीं खाता है। यदि हम एक मैच नहीं पा सकते हैं, तो हम मौजूदा मार्ग में से किसी एक में वापसी को जोड़कर `updateRoute` फ़ंक्शन को संशोधित करेंगे।
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  if (!route) {
-    return navigate('/login');
-  }
-
-  ...
-```
-
-यदि कोई मार्ग नहीं मिल रहा है, तो हम अब `login` पेज पर रीडायरेक्ट करेंगे।
-Now let's create a function to get the URL when a link is clicked, and to prevent the browser's default link behavior:
-
-```js
-function onLinkClick(event) {
-  event.preventDefault();
-  navigate(event.target.href);
-}
-```
-
-HTML में हमारे *लॉगिन* और *लॉगआउट* लिंक से बाइंडिंग जोड़कर नेविगेशन सिस्टम को पूरा करें।
-
-```html
-<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
-...
-<a href="/login" onclick="onLinkClick(event)">Logout</a>
-```
-
-[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) विशेषता का उपयोग करके जावास्क्रिप्ट कोड पर `click` ईवेंट को बांधें, यहाँ `navigate()` फ़ंक्शन पर कॉल करें।
-
-इन लिंक पर क्लिक करने का प्रयास करें, अब आपको अपने ऐप के विभिन्न स्क्रीन के बीच नेविगेट करने में सक्षम होना चाहिए।
-
-✅ `History.pushState` विधि HTML5 मानक का हिस्सा है और [सभी आधुनिक ब्राउज़रों](https://caniuse.com/?search=pushState) में लागू किया गया है। यदि आप पुराने ब्राउज़रों के लिए एक वेब ऐप बना रहे हैं, तो इस एपीआई के स्थान पर आप एक ट्रिक का उपयोग कर सकते हैं: इससे पहले [हैश (`#`)](https://en.wikipedia.org/wiki/URI_fragment) का उपयोग कर पथ आप नियमित एंकर नेविगेशन के साथ काम करने वाले रूटिंग को लागू कर सकते हैं और पृष्ठ को फिर से लोड नहीं करते हैं, क्योंकि इसका उद्देश्य एक पृष्ठ के भीतर आंतरिक लिंक बनाना था।
-
-## ब्राउजर के बैक और फॉरवर्ड बटन को हैंडल करना
-
-`History.pushState` का उपयोग करके ब्राउज़र के नेविगेशन इतिहास में नई प्रविष्टियाँ बनाता है। आप देख सकते हैं कि आपके ब्राउज़र का *बैक बटन* पकड़कर, इसे कुछ इस तरह प्रदर्शित करना चाहिए:
-
-![नेविगेशन इतिहास का स्क्रीनशॉट](../history.png)
-
-यदि आप कुछ बार बैक बटन पर क्लिक करने का प्रयास करते हैं, तो आप देखेंगे कि वर्तमान URL बदल जाता है और इतिहास अपडेट हो जाता है, लेकिन वही टेम्पलेट प्रदर्शित होता रहता है।
-
-ऐसा इसलिए है क्योंकि हमें नहीं पता है कि इतिहास बदलने के लिए हमें हर बार `updateRoute()` को कॉल करना होगा। यदि आप [`history.pushState` दस्तावेज़ीकरण](https://developer.mozilla.org/docs/Web/API/History/pushState) पर एक नज़र डालते हैं, तो आप देख सकते हैं कि यदि राज्य बदलता है - इसका अर्थ है कि हम एक अलग URL पर चले गए - [`popstate`] (https://developer.mozilla.org/docs/Web/API/Window/popstate_event) इवेंट ट्रिगर है। हम उस समस्या को ठीक करने के लिए इसका उपयोग करेंगे।
-
-### टास्क
-
-यह सुनिश्चित करने के लिए कि ब्राउज़र इतिहास में परिवर्तन होने पर प्रदर्शित टेम्प्लेट को अपडेट किया जाता है, हम एक नया फ़ंक्शन संलग्न करेंगे जो `updateRoute()` कहता है। हम अपने `app.js` फ़ाइल के नीचे करेंगे:
-
-```js
-window.onpopstate = () => updateRoute();
-updateRoute();
-```
-
-> नोट: हमने एक [एरो फंक्शन](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Reference/Arrow_functions) का इस्तेमाल किया है ताकि हम अपने `poopstate` ईवेंट हैंडलर को संक्षिप्तता के लिए घोषित कर सकें, लेकिन नियमित कार्य एक ही काम करेगा।
-
-यहां एरो फंक्शन पर एक ताज़ा वीडियो है:
-
-[![एरो फंक्शन](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "एरो फंक्शन")
-
-> तीर के कार्यों के बारे में वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
-
-अब अपने ब्राउज़र के बैक और फ़ॉरवर्ड बटन का उपयोग करने का प्रयास करें, और जांचें कि इस बार प्रदर्शित मार्ग सही ढंग से अपडेट किया गया है।
-
----
-
-## 🚀 चुनौती
-
-तीसरे पृष्ठ के लिए एक नया टेम्प्लेट और रूट जोड़ें जो इस ऐप के लिए क्रेडिट दिखाता है।
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-रूटिंग वेब विकास के आश्चर्यजनक रूप से मुश्किल भागों में से एक है, विशेष रूप से वेब पेज रीफ्रेश बिहेवियर से लेकर सिंगल पेज एप्लीकेशन पेज रिफ्रेश तक चलता है। [कैसे Azure स्टेटिक वेब ऐप सेवा](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) के बारे में थोड़ा पढ़ें रूटिंग । क्या आप बता सकते हैं कि उस दस्तावेज़ पर वर्णित कुछ निर्णय क्यों आवश्यक हैं?
-
-## असाइनमेंट
-
-[रूटिंग में सुधार करें](assignment.hi.md)
diff --git a/7-bank-project/1-template-route/translations/README.it.md b/7-bank-project/1-template-route/translations/README.it.md
deleted file mode 100644
index abac6f48..00000000
--- a/7-bank-project/1-template-route/translations/README.it.md
+++ /dev/null
@@ -1,306 +0,0 @@
-# Creazione di un'App Bancaria Parte 1: Modelli HTML e Rotte in un'app web
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41?loc=it)
-
-### Introduzione
-
-Dall'avvento di JavaScript nei browser, i siti web stanno diventando più interattivi e complessi che mai. Le tecnologie web sono ora comunemente utilizzate per creare applicazioni completamente funzionali che vengono eseguite direttamente in un browser che vengono chiamate [applicazioni web](https://it.wikipedia.org/wiki/Applicazione_web). Poiché le app web sono altamente interattive, gli utenti non desiderano attendere il ricaricamento di una pagina intera ogni volta che viene eseguita un'azione. Ecco perché JavaScript viene utilizzato per aggiornare l'HTML direttamente utilizzando il DOM, per fornire un'esperienza utente più fluida.
-
-In questa lezione, getteremo le basi per creare un'app web bancaria, utilizzando modelli HTML per creare più schermate che possono essere visualizzate e aggiornate senza dover ricaricare l'intera pagina HTML.
-
-### Prerequisito
-
-È necessario un server web locale per testare l'app web che verrà creata in questa lezione. Se non ne ha uno, si può installare [Node.js](https://nodejs.org) e utilizzare il comando `npx lite-server` dalla cartella del progetto. Creerà un server web locale e aprirà la propria app in un browser.
-
-### Preparazione
-
-Sul proprio computer, creare una cartella denominata `bank` con un file denominato `index.html` al suo interno. Si inizierà da questo codice [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code) HTML:
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bank App</title>
-  </head>
-  <body>
-    <!-- Qui è dove si lavorerà -->
-  </body>
-</html>
-```
-
----
-
-## Modelli HTML.
-
-Se si desidera creare più schermate per una pagina Web, una soluzione potrebbe essere la creazione di un file HTML per ogni schermata che si desidera visualizzare. Tuttavia, questa soluzione presenta alcuni inconvenienti:
-
-- È necessario ricaricare l'intero HTML quando si cambia schermata, il che può essere lento.
-- È difficile condividere i dati tra le diverse schermate.
-
-Un altro approccio consiste nell'avere un solo file HTML e definire più [modelli HTML](https://developer.mozilla.org/docs/Web/HTML/Element/template) utilizzando l'elemento `<template>`. Un modello è un blocco HTML riutilizzabile che non viene visualizzato dal browser e deve essere istanziato in fase di esecuzione utilizzando JavaScript.
-
-### Attività
-
-Verrà creata un'app bancaria con due schermate: la pagina di accesso e il cruscotto. Innanzitutto, si aggiunge nel corpo dell'HTML un elemento segnaposto che si utilizzerà per istanziare le diverse schermate dell'app:
-
-```html
-<div id="app">Loading...</div>
-```
-
-Viene fornito un `ID` all'elemento per renderlo più facilmente individuabile con JavaScript in seguito.
-
-> Suggerimento: poiché il contenuto di questo elemento verrà sostituito, si può  inserire un messaggio di caricamento o un indicatore che verrà mostrato durante il caricamento dell'app.
-
-Successivamente, si aggiunge il modello HTML seguente per la pagina di accesso. Per ora si inserirà solo un titolo e una sezione contenente un collegamento che si utilizzerà per eseguire la navigazione.
-
-```html
-<template id="login">
-  <h1>Bank App</h1>
-  <section>
-    <a href="/dashboard">Login</a>
-  </section>
-</template>
-```
-
-Quindi si aggiungerà un altro modello HTML per la pagina del cruscotto. Questa pagina conterrà diverse sezioni:
-
-- Un'intestazione con un titolo e un collegamento di disconnessione
-- Saldo corrente del conto bancario
-- Un elenco di transazioni, visualizzato in una tabella
-
-```html
-<template id="dashboard">
-  <header>
-    <h1>Bank App</h1>
-    <a href="/login">Logout</a>
-  </header>
-  <section>
-    Balance: 100$
-  </section>
-  <section>
-    <h2>Transactions</h2>
-    <table>
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Object</th>
-          <th>Amount</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </section>
-</template>
-```
-
-> Suggerimento: durante la creazione di modelli HTML, se si vuole vedere come apparirà, si possono commentare le righe tra `<template>` `</template>` racchiudendole `tra <!- ->-->`.
-
-✅ Perché si pensa che vengano utilizzati gli attributi `id` sui modelli? Si potrebbe usare qualcos'altro come le classi?
-
-## Visualizzazione di modelli con JavaScript
-
-Se si prova il proprio file HTML corrente in un browser, si vedrà che si blocca visualizzando `Loading ...` Questo perché si deve aggiungere del codice JavaScript per istanziare e visualizzare i modelli HTML.
-
-L'istanza di un modello viene solitamente eseguita in 3 passaggi:
-
-1. Recuperare l'elemento del modello nel DOM, ad esempio utilizzando [`document.getElementById`](https://developer.mozilla.org/it/docs/Web/API/Document/getElementById).
-2. Clonare l'elemento template, usando [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
-3. Collegarlo al DOM sotto un elemento visibile, ad esempio utilizzando [`appendChild`](https://developer.mozilla.org/it/docs/Web/API/Node/appendChild).
-
-✅ Perché è necessario clonare il modello prima di collegarlo al DOM? Cosa si pensa che accadrebbe se venisse saltato questo passaggio?
-
-### Attività
-
-Creare un nuovo file denominato `app.js` nella cartella del progetto e importare quel file nella sezione  `<head>` del proprio HTML:
-
-```html
-<script src="app.js" defer></script>
-```
-
-Ora in `app.js`, verrà creata una nuova funzione `updateRoute`:
-
-```js
-function updateRoute(templateId) {
-  const template = document.getElementById(templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-Quello che si fa qui sono esattamente i 3 passaggi descritti sopra. Si istanza il modello con l'id `templateId` e si inserisce il suo contenuto clonato nel segnaposto dell'app. Notare che si deve usare `cloneNode (true)` per copiare l'intero sottoalbero del modello.
-
-Ora chiamare questa funzione con uno dei template e guardare il risultato.
-
-```js
-updateRoute('login');
-```
-
-✅ Qual è lo scopo di questo codice `app.innerHTML = '';`? Cosa succede senza di essa?
-
-## Creazione di rotte
-
-Quando si parla di un'app web, si definisce *Routing* (instradamento) l'intento di mappare gli **URL** a schermate specifiche che dovrebbero essere visualizzate. Su un sito web con più file HTML, questa operazione viene eseguita automaticamente poiché i percorsi dei file si riflettono sull'URL. Ad esempio, con questi file nella cartella del progetto:
-
-```
-mywebsite/index.html
-mywebsite/login.html
-mywebsite/admin/index.html
-```
-
-Se si crea un server web con `mywebsite` come radice, la mappatura dell'URL sarà:
-
-```
-https://site.com            --> mywebsite/index.html
-https://site.com/login.html --> mywebsite/login.html
-https://site.com/admin/     --> mywebsite/admin/index.html
-```
-
-Tuttavia, per l'app web in costruzione si utilizza un singolo file HTML contenente tutte le schermate, quindi questo comportamento predefinito non sarà di aiuto. Si deve creare questa mappa manualmente ed eseguire l'aggiornamento del modello visualizzato utilizzando JavaScript.
-
-### Attività
-
-Si userà un semplice oggetto per implementare una [mappa](https://it.wikipedia.org/wiki/Array_associativo) tra i percorsi degli URL e i propri modelli. Aggiungere questo oggetto all'inizio del file `app.js`.
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard' },
-};
-```
-
-Ora modificare un po' la funzione `updateRoute`. Invece di passare direttamente il `templateId` come argomento, lo si vuole recuperare guardando prima l'URL corrente, quindi utilizzndo la mappa per ottenere il valore dell'ID del modello corrispondente. Si può  usare [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) per ottenere solo la sezione del percorso dall'URL.
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  const template = document.getElementById(route.templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-Qui sono state mappato le rotte che sono state dichiarate al modello corrispondente. Si può provare se funziona correttamente modificando manualmente l'URL nel proprio browser.
-
-✅ Cosa succede se si inserisce un percorso sconosciuto nell'URL? Come potrebbe essere risolto questo problema?
-
-## Aggiungere navigazione
-
-Il prossimo passo per la costruzione dell'app è aggiungere la possibilità di navigare tra le pagine senza dover modificare manualmente l'URL. Questo implica due cose:
-
-1. Aggiornamento dell'URL corrente
-2. Aggiornamento del modello visualizzato in base al nuovo URL
-
-E' già stata trattata la seconda parte con la funzione `updateRoute`, quindi occorre capire come aggiornare l'URL corrente.
-
-Si dovrà utilizzare JavaScript e più precisamente [history.pushState](https://developer.mozilla.org/docs/Web/API/History/pushState) che permette di aggiornare l'URL e creare una nuova voce nella cronologia di navigazione, senza ricaricare l'HTML.
-
-> Nota: Sebbene l'elemento HTML ancora [`<a href>`](https://developer.mozilla.org/it/docs/Web/HTML/Element/a) possa essere usato da solo per creare collegamenti ipertestuali a diversi URL, è anche in grado di fare ricaricare al browser l'HTML nella modalità predefinita. È necessario prevenire questo comportamento quando si gestisce il routing con javascript personalizzato, utilizzando la funzione preventDefault() sull'evento click.
-
-### Attività
-
-Si crea una nuova funzione da utilizzare per navigare nell'app:
-
-```js
-function navigate(path) {
-  window.history.pushState({}, path, path);
-  updateRoute();
-}
-```
-
-Questo metodo aggiorna prima l'URL corrente in base al percorso fornito, quindi aggiorna il modello. La proprietà `window.location.origin` restituisce l'URL radice, permettendo di ricostruire un URL completo da un dato percorso.
-
-Ora che si ha questa funzione, ci si può occupare del problema che si verifica se un percorso non corrisponde a nessuna rotta definita. Si modificherà la funzione `updateRoute` aggiungendo una soluzione di contingenza per indirizzare verso una delle rotte esistenti se non viene trovata una corrispondenza.
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  if (!route) {
-    return navigate('/login');
-  }
-
-  ...
-```
-
-Se non è possibile trovare una rotta, si esegue un reindirizzamento alla pagina `login`.
-
-Ora si crea una funzione per ottenere l'URL quando si fa clic su un collegamento e per impedire il comportamento predefinito del browser per un collegamento:
-
-```js
-function onLinkClick(event) {
-  event.preventDefault();
-  navigate(event.target.href);
-}
-```
-
-Si completa il sistema di navigazione aggiungendo collegamenti ai link di accesso (*Login*) e di disconnessione (*Logout*) nell'HTML.
-
-```html
-<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
-...
-<a href="/login" onclick="onLinkClick(event)">Logout</a>
-```
-
-Utilizzando l 'attributo [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) associare l'evento `click` al codice JavaScript, in questo caso la chiamata alla funzione `navigate()` .
-
-Provare a fare clic su questi collegamenti, ora si dovrebbe essere in grado di navigare tra le diverse schermate dell'app.
-
-✅ Il metodo `history.pushState` fa parte dello standard HTML5 e implementato in [tutti i browser moderni](https://caniuse.com/?search=pushState). Se si sta creando un'app web per browser meno recenti, c'è un trucco che si può usare al posto di questa API: usando un [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) prima del percorso si può implementare un instradatamento che funziona con la normale navigazione dell'elemento ancora e non ricarica la pagina, poiché il suo scopo era creare collegamenti all'interno di una pagina.
-
-## Gestione dei pulsanti Avanti e Indietro del browser
-
-L'utilizzo di `history.pushState` crea nuove voci nella cronologia di navigazione del browser. Si può verificare tenendo premuto il *pulsante Indietro* del proprio browser, dovrebbe visualizzare qualcosa del genere:
-
-![Videata della cronologia di navigazione](../history.png)
-
-Se si prova a fare clic sul pulsante Indietro alcune volte, si vedrà che l'URL corrente cambia e la cronologia viene aggiornata, ma lo stesso modello continua a essere visualizzato.
-
-Questo perché il browser non sa che si deve chiamare `updateRoute()` ogni volta che cambia la cronologia. Se si dà un'occhiata alla documentazione di [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) si può vedere che se lo stato cambia, vale a dire che si è passati a un URL diverso, viene attivato l'[evento](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) `popstate`. Verrà usato per risolvere quel problema.
-
-### Attività
-
-Per assicurarsi che il modello visualizzato venga aggiornato quando la cronologia del browser cambia, si aggiungerà una nuova funzione che chiama `updateRoute()`. Verrà fatto in fondo al file `app.js`:
-
-```js
-window.onpopstate = () => updateRoute();
-updateRoute();
-```
-
-> Nota: è stata usata una [funzione freccia](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) qui per dichiarare il gestore di eventi `popstate` per concisione, ma una funzione normale andrebbe bene allo stesso modo.
-
-Ecco un video di aggiornamento sulle funzioni freccia:
-
-[![Funzionifreccia](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "")
-
-> Fare clic sull'immagine sopra per un video sulle funzioni freccia
-
-Ora provare a utilizzare i pulsanti Indietro e Avanti del proprio browser e controllare che il percorso visualizzato sia aggiornato correttamente questa volta.
-
----
-
-## 🚀 Sfida
-
-Aggiungere un nuovo modello e instradare per una terza pagina che mostra i crediti per questa app.
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42?loc=it)
-
-## Revisione e Auto Apprendimento
-
-Il routing (instradamento) è una delle parti sorprendentemente complicate dello sviluppo web, soprattutto perché il web passa dai comportamenti di aggiornamento della pagina all'aggiornamento della pagina dell'applicazione a pagina singola. Leggere alcune informazioni su [come il servizio App Web Static di Azure](https://docs.microsoft.com/azure/static-web-apps/routes?WT.mc_id=academic-4621-cxa) gestisce il routing. Si può spiegare perché alcune delle decisioni descritte in quel documento sono necessarie?
-
-## Compito
-
-[Migliorare l'instradamento](assignment.it.md)
diff --git a/7-bank-project/1-template-route/translations/README.ja.md b/7-bank-project/1-template-route/translations/README.ja.md
deleted file mode 100644
index e5e2fd58..00000000
--- a/7-bank-project/1-template-route/translations/README.ja.md
+++ /dev/null
@@ -1,304 +0,0 @@
-# バンキングアプリを作ろう その 1: Web アプリの HTML テンプレートとルート
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41?loc=ja)
-
-### イントロダクション
-
-ブラウザに JavaScript が登場して以来、Web サイトはこれまで以上にインタラクティブで複雑になっています。Web 技術は現在では、ブラウザに直接実行される完全に機能的なアプリケーションを作成するために一般的に使用されており、[Web アプリケーション](https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3)と呼ばれています。Web アプリケーションは高度にインタラクティブであるため、ユーザーはアクションが実行されるたびに全ページのリロードを待ちたくありません。そのため、JavaScript は DOM を使用して HTML を直接更新し、よりスムーズなユーザーエクスペリエンスを提供するために使用されます。
-
-このレッスンでは、HTML テンプレートを使用して、HTML ページ全体をリロードすることなく表示・更新できる複数の画面を作成し、銀行の Web アプリを作成するための基礎を構築していきます。
-
-### 前提条件
-
-このレッスンで構築する Web アプリをテストするためには、ローカルの Web サーバーが必要です。もし持っていない場合は、[Node.js](https://nodejs.org/ja) をインストールして、プロジェクトフォルダから `npx lite-server` コマンドを使用してください。これでローカルの Web サーバーが作成され、ブラウザでアプリを開くことができます。
-
-### 準備
-
-コンピュータ上に `bank` という名前のフォルダを作成し、その中に `index.html` というファイルを作成します。この HTML [ボイラープレート](https://en.wikipedia.org/wiki/Boilerplate_code) から始めます。
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bank App</title>
-  </head>
-  <body>
-    <!-- ここで作業することになります。 -->
-  </body>
-</html>
-```
-
----
-
-## HTML テンプレート
-
-Web ページに複数の画面を作成したい場合、表示したい画面ごとに1つの HTML ファイルを作成するのが1つの解決策です。しかし、この方法にはいくつかの不都合があります。
-
-- 画面切り替えの際に HTML 全体を再読み込みしなければならず、時間がかかることがあります
-- 画面間でデータを共有するのは難しいです
-
-もう一つのアプローチは、HTML ファイルを一つだけ持ち、`<template>` 要素を使って複数の [HTML テンプレート](https://developer.mozilla.org/ja/docs/Web/HTML/Element/template)を定義することです。テンプレートはブラウザに表示されない再利用可能な HTML ブロックであり、JavaScript を使って実行時にインスタンス化する必要があります。
-
-### タスク
-
-ログインページとダッシュボードの 2 つの画面を持つ銀行アプリを作成します。まず、アプリの異なる画面をインスタンス化するために使用するプレースホルダ要素を HTML の body に追加します。
-
-```html
-<div id="app">Loading...</div>
-```
-
-JavaScript での検索が容易になるように、`id` を付与しています。
-
-> ヒント: この要素の内容が置き換えられるので、アプリの読み込み中に表示される読み込みメッセージやインジケータを入れることができます。
-
-次に、ログインページの HTML テンプレートを下に追加します。今のところ、私たちはそこにタイトルとナビゲーションを実行するために使用するリンクを含むセクションを置くだけです。
-
-```html
-<template id="login">
-  <h1>Bank App</h1>
-  <section>
-    <a href="/dashboard">Login</a>
-  </section>
-</template>
-```
-
-次に、ダッシュボードページ用に別の HTML テンプレートを追加します。このページには異なるセクションが含まれます。
-
-- タイトルとログアウトリンクのあるヘッダー
-- 銀行口座の当座預金残高
-- 表に表示されるトランザクションのリスト
-
-```html
-<template id="dashboard">
-  <header>
-    <h1>Bank App</h1>
-    <a href="/login">Logout</a>
-  </header>
-  <section>
-    Balance: 100$
-  </section>
-  <section>
-    <h2>Transactions</h2>
-    <table>
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Object</th>
-          <th>Amount</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </section>
-</template>
-```
-
-> ヒント: HTML テンプレートを作成する際に、どのように見えるかを確認したい場合は、`<template>` と `</template>` の行を `<!-- -->` で囲んでコメントアウトすることができます。
-
-✅ なぜテンプレートに `id` 属性を使うと思いますか? クラスのような他のものを使うことはできないのでしょうか?
-
-## JavaScript でテンプレートを表示する
-
-現在の HTML ファイルをブラウザで試してみると、`Loading...` と表示されて動かなくなるのがわかるでしょう。これは、HTML テンプレートをインスタンス化して表示するために JavaScript コードを追加する必要があるためです。
-
-テンプレートのインスタンス化は通常3つのステップで行われます。
-
-1. 例えば、[`document.getElementById`](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById) を使用して、DOM 内のテンプレート要素を取得します
-2. [`cloneNode`](https://developer.mozilla.org/ja/docs/Web/API/Node/cloneNode) を使用して、テンプレート要素のクローンを作成します
-3. 例えば [`appendChild`](https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild) を使用して、可視要素の下の DOM にアタッチします
-
-✅ なぜ DOM にアタッチする前にテンプレートをクローンする必要があるのでしょうか? このステップをスキップしたらどうなると思いますか?
-
-### タスク
-
-プロジェクトフォルダに `app.js` という名前の新しいファイルを作成し、そのファイルを HTML の `<head>` セクションにインポートします。
-
-```html
-<script src="app.js" defer></script>
-```
-
-では、`app.js` で新しい関数 `updateRoute` を作成します。
-
-```js
-function updateRoute(templateId) {
-  const template = document.getElementById(templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-ここで行うことは、上記の3つのステップとまったく同じです。テンプレートを `templateId` という名前でインスタンス化し、そのクローンされたコンテンツをアプリのプレースホルダ内に配置します。テンプレートのサブツリー全体をコピーするには、`cloneNode(true)` を使用する必要があることに注意してください。
-
-テンプレートのサブツリー全体をコピーするには、`cloneNode(true)` を使用する必要があることに注意してください。
-
-```js
-updateRoute('login');
-```
-
-✅ このコード `app.innerHTML = '';` の目的は何ですか？これがないとどうなるのでしょうか?
-
-## ルートの作成
-
-Web アプリの話をするときに、**URL** を表示すべき特定の画面にマッピングする意図を *ルーティング* と呼んでいます。複数の HTML ファイルを持つ Web サイトでは、ファイルパスが URL に反映されるため、これは自動的に行われます。たとえば、プロジェクトフォルダにこれらのファイルがあるとします。
-
-```
-mywebsite/index.html
-mywebsite/login.html
-mywebsite/admin/index.html
-```
-
-ルートに `mywebsite` を指定して Web サーバを作成した場合、URL のマッピングは以下のようになる。
-
-```
-https://site.com            --> mywebsite/index.html
-https://site.com/login.html --> mywebsite/login.html
-https://site.com/admin/     --> mywebsite/admin/index.html
-```
-
-しかし、私たちの Web アプリでは、すべての画面を含む単一の HTML ファイルを使用しているので、このデフォルトの動作は役に立ちません。この map を手動で作成し、JavaScript を使用して表示されるテンプレートの更新を実行する必要があります。
-
-### タスク
-
-URL パスとテンプレート間の [map](https://en.wikipedia.org/wiki/Associative_array) を実装するために、シンプルなオブジェクトを使用します。このオブジェクトを `app.js` ファイルの先頭に追加します。
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard' },
-};
-```
-
-では、`updateRoute` 関数を少し修正してみましょう。引数に `templateId` を直接渡すのではなく、まず現在の URL を見て、map を使って対応するテンプレート ID の値を取得したいと思います。URL からパス部分だけを取得するには、[`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname)を使うことができます。
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  const template = document.getElementById(route.templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-ここでは、宣言したルートを対応するテンプレートにマッピングしてみました。ブラウザの URL を手動で変更することで正常に動作するか試してみてください。
-
-✅ URL に未知のパスを入力するとどうなるでしょうか? どうすれば解決できるのでしょうか?
-
-## ナビゲーションの追加
-
-私たちのアプリの次のステップは、URL を手動で変更することなく、ページ間を移動する可能性を追加することです。これは2つのことを意味します。
-
-  1. 現在の URL を更新する
-  2. 新しい URL に基づいて表示されるテンプレートを更新する
-
-2番目の部分はすでに `updateRoute` 関数で処理したので、現在の URL を更新する方法を見つけなければなりません。
-
-JavaScript、特に [`history.pushState`](https://developer.mozilla.org/ja/docs/Web/API/History/pushState) を使う必要があります。これは HTML をリロードせずに URL を更新して閲覧履歴に新しいエントリを作成することができます。
-
-> 注: HTML アンカー要素[`<a href>`](https://developer.mozilla.org/ja/docs/Web/HTML/Element/a)は単独で使用して異なる URL へのハイパーリンクを作成することができますが、ブラウザはデフォルトで HTML をリロードさせることになります。カスタム javascript でルーティングを扱う際には、クリックイベントの preventDefault() 関数を使用して、この動作を防ぐ必要があります。
-
-### タスク
-
-アプリ内でナビゲートするために使用できる新しい関数を作成してみましょう。
-
-```js
-function navigate(path) {
-  window.history.pushState({}, path, path);
-  updateRoute();
-}
-```
-
-このメソッドは最初に与えられたパスに基づいて現在の URL を更新し、その後テンプレートを更新します。プロパティ `window.location.origin` は URL のルートを返すので、与えられたパスから完全な URL を再構築することができます。
-
-これでこの関数ができたので、パスが定義されたルートにマッチしない場合の問題を解決することができます。一致するルートが見つからなかった場合は、既存のルートにフォールバックを追加して `updateRoute` 関数を修正する。
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  if (!route) {
-    return navigate('/login');
-  }
-
-  ...
-```
-
-ルートが見つからない場合は、`login` ページにリダイレクトします。
-
-リンクがクリックされたときに URL を取得し、ブラウザのデフォルトのリンク動作を防ぐための関数を作ってみましょう。
-
-```js
-function onLinkClick(event) {
-  event.preventDefault();
-  navigate(event.target.href);
-}
-```
-
-HTML の *Login* と *Logout* リンクにバインディングを追加してナビゲーションシステムを完成させましょう。
-
-```html
-<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
-...
-<a href="/login" onclick="onLinkClick(event)">Logout</a>
-```
-
-[`onclick`](https://developer.mozilla.org/ja/docs/Web/API/GlobalEventHandlers/onclick) 属性を使用して、`click` イベントを JavaScript コードにバインドし、ここでは `navigate()` 関数の呼び出しを行います。
-
-これらのリンクをクリックしてみると、アプリの異なる画面間を移動できるようになるはずです。
-
-✅ `history.pushState` メソッドは HTML5 標準の一部であり、[すべての最新ブラウザ](https://caniuse.com/?search=pushState)で実装されています。古いブラウザ用の Web アプリを構築している場合、この API の代わりに使用できるトリックがあります。パスの前に[ハッシュ (`#`)](https://en.wikipedia.org/wiki/URI_fragment) を使用すると、通常のアンカーナビゲーションで動作し、ページを再読み込みしないルーティングを実装することができます。その目的は、ページ内に内部リンクを作成することです。
-
-## ブラウザの戻るボタンと進むボタンの扱い
-
-`history.pushState` を使うと、ブラウザのナビゲーション履歴に新しいエントリが作成されます。ブラウザの *戻るボタン* を押すと、以下のように表示されることを確認することができます。
-
-![ナビゲーション履歴のスクリーンショット](../history.png)
-
-何度か戻るボタンをクリックしてみると、現在の URL が変わって履歴が更新されていますが、同じテンプレートが表示され続けています。
-
-これは、履歴が変わるたびに `updateRoute()` を呼び出す必要があることを知らないからです。[`history.pushState` のドキュメント](https://developer.mozilla.org/ja/docs/Web/API/History/pushState)を見てみると、状態が変化した場合、つまり別の URL に移動した場合には、[`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event)イベントが発生することがわかります。これを使ってこの問題を解決しましょう。
-
-### タスク
-
-ブラウザの履歴が変更されたときに表示されるテンプレートが更新されるようにするために、`updateRoute()` を呼び出す新しい関数をアタッチします。これは `app.js` ファイルの下部で行います。
-
-```js
-window.onpopstate = () => updateRoute();
-updateRoute();
-```
-
-> 注: ここでは簡潔さのために `popstate` イベントハンドラを宣言するために [アロー関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions) を使用していますが、通常の関数でも同じように動作します。
-
-これは、アロー関数についてのリフレッシュビデオです。
-
-[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
-
-今度はブラウザの戻るボタンと進むボタンを使ってみて、今回表示されたルートが正しく更新されているかどうかを確認してみてください。
-
----
-
-## 🚀 チャレンジ
-
-このアプリのクレジットを表示する3ページ目のテンプレートとルートを追加します。
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42?loc=ja)
-
-## 復習と自己学習
-
-ルーティングは Web 開発の驚くほどトリッキーな部分の1つで、特に Web がページ更新の動作からシングルページアプリケーションのページ更新へと移行するにつれ、そのような部分が増えてきています。[Azure Static Web Apps プレビューでのルート](https://docs.microsoft.com/ja-jp/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon)がルーティングを扱うことについて少し読んでみてください。そのドキュメントに記載されているいくつかの決定が必要な理由を説明できますか？
-
-## 課題
-
-[ルーティングの改善](assignment.ja.md)
diff --git a/7-bank-project/1-template-route/translations/README.ko.md b/7-bank-project/1-template-route/translations/README.ko.md
deleted file mode 100644
index 723c6b21..00000000
--- a/7-bank-project/1-template-route/translations/README.ko.md
+++ /dev/null
@@ -1,295 +0,0 @@
-# 은행 앱 제작하기 파트 1: 웹 앱의 HTML 템플릿과 라우터
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41?loc=ko)
-
-### 소개
-
-브라우저에 JavaScript가 등장한 이후, 웹 사이트는 그 어느 순간보다 상호 작용하며 복잡해지고 있습니다. 웹 기술은 일반적으로 [web applications](https://en.wikipedia.org/wiki/Web_application)라고 불리는 브라우저로 직접 실행되는 완전한 기능의 애플리케이션을 만들 때 사용됩니다. 웹 앱은 매우 대화형이므로, 사용자는 작업되는 순간에 전체 페이지가 다시 불러오며 기다리는 것을 원치 않습니다. 원활한 사용자 경험을 제공하기 위해, JavaScript로 DOM을 사용하여 HTML을 직접 갱신합니다.
-
-이번 강의에서는, 전체 HTML 페이지를 다시 불러오지 않으면서 출력하고 갱신할 여러 화면을 만들기 위해 HTML 템플릿을 사용할 것이므로, 은행 웹 앱을 만들기 위한 기초를 레이아웃합니다.
-
-### 준비물
-
-이 강의에서 만들 웹 앱을 테스트하려면 로컬 웹 서버가 필요합니다. 없는 경우에는, [Node.js](https://nodejs.org)를 설치하고 프로젝트 폴더에서 `npx lite-server` 명령을 수행할 수 있습니다. 로컬 웹 서버를 만들고 브라우저에서 앱을 엽니다.
-
-### 준비
-
-컴퓨터에서, `index.html` 파일이 있는 `bank`라는 폴더를 만듭니다. 이 HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code)에서 시작할 것 입니다.
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bank App</title>
-  </head>
-  <body>
-    <!-- This is where you'll work -->
-  </body>
-</html>
-```
-
----
-
-## HTML 템플릿
-
-웹 페이지에 여러 화면을 만드려는 경우에는, 하나의 솔루션은 출력하려는 모든 화면에 대해 각자 HTML 파일을 만드는 것입니다. 그러나, 이 솔루션에는 몇 가지 불편한 점이 있습니다:
-
-- 화면 전환 시 전체 HTML을 다시 불러와야 하므로, 속도가 느릴 수 있습니다.
-- 서로 다른 화면 간 데이터 공유가 어렵습니다.
-
-또 다른 방법은 HTML 파일이 하나일 때, `<template>` 요소로 여러 [HTML templates](https://developer.mozilla.org/docs/Web/HTML/Element/template)을 정의하는 것입니다. 템플릿은 브라우저에 보이지 않는 재사용 가능한 HTML 블록이면서, JavaScript를 사용해서 런타임에 인스턴스화합니다.
-
-### 작업
-
-두 화면이 있는 은행 앱을 만들 것입니다: 로그인 페이지와 대시보드. 먼저, 앱의 다양한 화면을 인스턴스화할 때 사용할 placeholder 요소를 HTML 본문에 추가하겠습니다:
-
-```html
-<div id="app">Loading...</div>
-```
-
-나중에 JavaScript로 쉽게 찾도록 `id`를 제공합니다.
-
-> Tip: 이 요소의 내용은 바뀌므로, 앱이 불러와지는 동안 보여지는 로딩 메시지 또는 인디케이터를 넣을 수 있습니다.
-
-다음은, 로그인 페이지 HTML 템플릿 아래에 추가하겠습니다. 지금은 탐색하며 사용할 버튼이 포함된 제목과 섹션만 여기에 넣겠습니다.
-
-```html
-<template id="login">
-  <h1>Bank App</h1>
-  <section>
-    <button>Login</button>
-  </section>
-</template>
-```
-
-그러고 대시보드 페이지에 대한 다른 HTML 템플릿을 추가합니다. 이 페이지에는 다른 섹션도 포함됩니다:
-
-- 제목과 로그아웃 버튼이 있는 헤더
-- 은행 계정의 현재 잔액
-- 테이블에 표시된, 트랜잭션 목록
-
-```html
-<template id="dashboard">
-  <header>
-    <h1>Bank App</h1>
-    <button>Logout</button>
-  </header>
-  <section>
-    Balance: 100$
-  </section>
-  <section>
-    <h2>Transactions</h2>
-    <table>
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Object</th>
-          <th>Amount</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </section>
-</template>
-```
-
-> Tip: HTML 템플릿을 만들 때, 모양을 확인하려면, `<!-->`로 묶어 `<template>` 혹은 `</template>` 줄을 주석 처리할 수 있습니다.
-
-✅ 템플릿에 `id` 속성을 사용하는 이유는 무엇일까요? 강의처럼 다른 것을 쓸 수 있나요?
-
-## JavaScript로 템플릿 출력하기
-
-브라우저에서 현재 HTML 파일을 시도하면, `Loading...`이 출력되는 것을 볼 수 있습니다. HTML 템플릿을 인스턴스화하고 출력하기 위해 JavaScript 코드를 추가했기 때문입니다.
-
-템플릿 인스턴스화는 일반적으로 3 단계로 진행됩니다:
-
-1. [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById)를 사용한 예시로, DOM에서 템플릿 요소 검색합니다.
-2. [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode)로, 템플릿 요소를 복제합니다.
-3. [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild)를 사용한 예시로, 보이는 요소 아래의 DOM에 붙입니다.
-
-✅ DOM에 붙이기 전에 템플릿을 복제해야하는 이유는 무엇일까요? 이 단계를 넘기면 어떻게 될까요?
-
-### 작업
-
-프로젝트 폴더에 `app.js`라는 새 파일을 만들고 HTML의 `<head>` 섹션에서 해당 파일을 가져옵니다:
-
-```html
-<script src="app.js" defer></script>
-```
-
-이제 `app.js`에서, 새로운 함수인 `updateRoute`를 만듭니다: 
-
-```js
-function updateRoute(templateId) {
-  const template = document.getElementById(templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-우리가 하는 일은 정확히 위에서 설명한 3단계입니다. id `templateId`로 템플릿을 인스턴스화하고, 복제된 콘텐츠를 앱 placeholder에 넣습니다. 템플릿의 전체 하위 트리를 복사하려면 `cloneNode(true)`로 사용해야 합니다.
-
-이제 템플릿 중 하나를 사용하여 이 함수를 호출하고 결과를 봅니다.
-
-```js
-updateRoute('login');
-```
-
-✅ 이 `app.innerHTML = '';` 코드의 목적은 무엇인가요? 없다면 어떻게 될까요?
-
-## 라우터 생성하기
-
-웹 앱에 대해 이야기할 때, **URLs**을 보여주기 위해 특정 화면에 매핑하려는 의도를 *Routing*이라고 합니다. 여러 HTML 파일에, 웹 사이트에서 파일 경로가 URL에 반영되므로 자동으로 수행됩니다. 예를 들면, 프로젝트 폴더에 다음 파일이 있습니다:
-
-```
-mywebsite/index.html
-mywebsite/login.html
-mywebsite/admin/index.html
-```
-
-만약 상위에 `mywebsite`로 웹 서버를 생성하면, URL 맵핑은 이렇게 이루어집니다:
-
-```
-https://site.com            --> mywebsite/index.html
-https://site.com/login.html --> mywebsite/login.html
-https://site.com/admin/     --> mywebsite/admin/index.html
-```
-
-그러나, 웹 앱이라면 모든 화면이 포함된 단일 HTML 파일을 사용하므로 이러한 기본 동작은 도와주지 못합니다. 이 맵을 수동으로 만들고 JavaScript로 출력되는 템플릿을 갱신해야 합니다.
-
-### 작업
-
-간단한 객체로 URL 경로와 템플릿 사이에서 [map](https://en.wikipedia.org/wiki/Associative_array)을 구현합니다. `app.js` 파일의 상단에 객체를 추가합니다.
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard' },
-};
-```
-
-이제 `updateRoute` 함수를 약간 수정합니다. `templateId`를 인수로 직접 주는 대신, 먼저 현재 URL을 보고 찾은 다음, 맵을 사용하여 해당 템플릿 ID 값을 가져오려 합니다. [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname)으로 URL에서 경로 섹션만 가져올 수 있습니다.
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  const template = document.getElementById(route.templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-여기에서 선언한 라우터를 해당 템플릿에 매핑했습니다. 브라우저에서 수동으로 URL을 변경하여 잘 작동하는지 볼 수 있습니다.
-
-✅ URL에 알 수 없는 경로를 입력하면 어떤 일이 벌어지나요? 어떻게 해결할 수 있나요?
-
-## 네비게이션 추가하기
-
-앱의 다음 단계는 URL을 수동으로 안 바꾸고 페이지 사이를 이동할 수 있도록 추가하는 것입니다. 이는 두 가지를 의미합니다:
-
-  1. 현재 URL로 갱신하기
-  2. 새로운 URL를 기반으로 출력된 템플릿 갱신하기
-
-두 번째 부분은 `updateRoute` 함수로 이미 처리했으므로, 현재 URL로 갱신하는 방법을 알아냅니다.
-
-HTML 앵커 요소 [`<a>`](https://developer.mozilla.org/docs/Web/HTML/Element/a)를 사용하여 다른 URL에 대한 하이퍼링크를 만들 수 있지만, 여기에서 사용하면 브라우저가 HTML을 다시 불러오게 됩니다.
-
-대신 URL을 업데이트 할 수 있는 JavaScript와 더 구체적으로 [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState)를 사용해야합니다. HTML을 다시 불러오지 않고 검색 기록에 새로운 항목을 만듭니다.
-
-### 작업
-
-앱에서 탐색할 때 사용할 수 있는 새로운 함수를 만들어 보겠습니다:
-
-```js
-function navigate(path) {
-  window.history.pushState({}, path, path);
-  updateRoute();
-}
-```
-
-이 메소드는 먼저 주어진 경로에 따라 현재 URL을 갱신한 다음에, 템플릿을 업데이트합니다. `window.location.origin` 속성은 URL 최상위를 반환하므로, 주어진 경로에서 전체 URL을 다시 구성할 수 있습니다.
-
-이제 함수가 있으므로, 경로가 정의된 라우터와 일치하지 않는 경우에 발생할 문제를 해결할 수 있습니다. 일치하는 경로를 찾을 수 없는 경우에는 기존 경로 중 하나에 fallback로 추가하고자 `updateRoute` 함수를 수정합니다.
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  if (!route) {
-    return navigate('/login');
-  }
-
-  ...
-```
-
-만약 라우터를 찾지 못한다면, `login` 페이지로 리다이렉트됩니다.
-
-HTML의 *Login*과 *Logout* 버튼에 바인딩을 추가하여 내비게이션 시스템을 완성해봅니다.
-
-```html
-<button onclick="navigate('/dashboard')">Login</button>
-...
-<button onclick="navigate('/login')">Logout</button>
-```
-
-[`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) 속성을 사용하여 `click` 이벤트를 JavaScript 코드로 바인딩합니다, 여기에서 `navigate()` 함수를 호출합니다.
-
-이 버튼들을 클릭해보세요, 이제 앱의 여러 화면들을 이동할 수 있습니다.
-
-✅ `history.pushState` 메소드는 HTML5 표준의 일부이며 [모든 모던 브라우저](https://caniuse.com/?search=pushState)에서 구현됩니다. 옛날 브라우저의 웹 앱을 제작하는 경우, 이 API 대신 사용할 수 있는 트릭이 있습니다: 경로 앞에 [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment)를 사용한다면 일반 앵커 탐색처럼 동작하면서 페이지를 다시 안 불러오는 라우팅을 구현할 수 있습니다, 페이지 내에 내부 링크를 만드는 것이 목적입니다.
-
-## 브라우저의 뒤로가기와 앞으로가기 버튼 제어하기
-
-`history.pushState`를 사용하면 브라우저의 탐색 기록에 새로운 항목이 생성됩니다. 브라우저의 *back button*을 누르고 있으면 다음처럼 내용이 표시되는지 볼 수 있습니다:
-
-![Screenshot of navigation history](.././history.png)
-
-뒤로가기 버튼을 몇 번 클릭하면, 현재 URL이 변경되며 히스토리가 갱신되지만 동일한 템플릿이 계속 출력되는 것을 볼 수 있습니다.
-
-히스토리가 바뀔 때마다 `updateRoute()`를 호출해야 한다는 사실을 모르기 때문입니다. [`history.pushState` documentation](https://developer.mozilla.org/docs/Web/API/History/pushState)을 살펴보면, 상태가 바뀌는 지 확인할 수 있습니다 - 다른 URL로 이동했다고 의미합니다. - [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) 이벤트가 연결됩니다. 이 이슈를 해결하는 데 사용할 것입니다.
-
-### 작업
-
-브라우저 히스토리가 바뀔 때마다 출력된 템플릿을 갱신하도록 `updateRoute()`를 호출하는 새 함수를 붙입니다. `app.js` 파일 하단에서 작업합니다:
-
-```js
-window.onpopstate = () => updateRoute();
-updateRoute();
-```
-
-> Note: 여기서는 간결함을 위해 [arrow function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)을 사용하여 `popstate` 이벤트 핸들러를 선언했지만, 일반적인 함수와 동일하게 작동합니다.
-
-다음은 화살표 함수에 대한 복습 동영상입니다:
-
-[![Arrow Functions](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Arrow Functions")
-
-이제 브라우저의 뒤로가기와 앞으로가기 버튼을 사용해보세요, 그리고 이 순간마다 올바르게 갱신되어 출력되는 지에 대하여 확인합니다.
-
----
-
-## 🚀 도전
-
-이 앱의 크레딧을 보여주는 세 번째 페이지에 새로운 템플릿과 라우터를 추가합니다.
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-라우팅은 웹 개발의 놀랍고 까다로운 부분 중 하나입니다, 특히 웹의 페이지 새로고침 동작에서 단일 페이지 애플리케이션 페이지 새로고침으로 이동함에 따라 더욱 더 그렇습니다. [how the Azure Static Web App service](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon)의 라우터 제어에 대해 약간 봅니다. 그 문서에 기술된 몇 가지 결정이 필요한 이유를 설명할 수 있나요?
-
-## 과제
-
-[Improve the routing](../assignment.md)
diff --git a/7-bank-project/1-template-route/translations/README.ms.md b/7-bank-project/1-template-route/translations/README.ms.md
deleted file mode 100644
index 1f8d5bdf..00000000
--- a/7-bank-project/1-template-route/translations/README.ms.md
+++ /dev/null
@@ -1,306 +0,0 @@
-# Bina Aplikasi Perbankan Bahagian 1: Templat dan Laluan HTML dalam Aplikasi Web
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41)
-
-### Arahan
-
-Sejak munculnya JavaScript di penyemak imbas, laman web menjadi lebih interaktif dan kompleks daripada sebelumnya. Teknologi web kini biasa digunakan untuk membuat aplikasi berfungsi sepenuhnya yang langsung masuk ke penyemak imbas yang kita panggil [aplikasi web](https://en.wikipedia.org/wiki/Web_application). Oleh kerana aplikasi Web sangat interaktif, pengguna tidak mahu menunggu muat semula halaman penuh setiap kali tindakan dilakukan. Itulah sebabnya JavaScript digunakan untuk mengemas kini HTML secara langsung menggunakan DOM, untuk memberikan pengalaman pengguna yang lebih lancar.
-
-Dalam pelajaran ini, kita akan meletakkan dasar untuk membuat aplikasi web bank, menggunakan templat HTML untuk membuat banyak layar yang dapat ditampilkan dan diperbarui tanpa harus memuat ulang seluruh halaman HTML.
-
-### Prasyarat
-
-Anda memerlukan pelayan web tempatan untuk menguji aplikasi web yang akan kami bina dalam pelajaran ini. Sekiranya tidak memilikinya, anda boleh memasang [Node.js](https://nodejs.org) dan menggunakan arahan `npx lite-server` dari folder projek anda. Ini akan membuat pelayan web tempatan dan membuka aplikasi anda di penyemak imbas.
-
-### Penyediaan
-
-Di komputer anda, buat folder bernama `bank` dengan fail bernama `index.html` di dalamnya. Kami akan bermula dari HTML [boilerplate](https://en.wikipedia.org/wiki/Boilerplate_code):
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bank App</title>
-  </head>
-  <body>
-    <!-- This is where you'll work -->
-  </body>
-</html>
-```
-
----
-
-## Templat HTML
-
-Jika anda ingin membuat beberapa layar untuk halaman web, satu penyelesaiannya adalah dengan membuat satu file HTML untuk setiap layar yang ingin anda tampilkan. Walau bagaimanapun, penyelesaian ini disertakan dengan beberapa kesulitan:
-
-- Anda harus memuat semula keseluruhan HTML ketika menukar skrin, yang boleh menjadi lambat.
-- Sukar untuk berkongsi data antara skrin yang berbeza.
-
-Pendekatan lain hanya mempunyai satu fail HTML, dan menentukan beberapa [templat HTML](https://developer.mozilla.org/docs/Web/HTML/Element/template) menggunakan elemen `<template>`. Templat adalah blok HTML yang dapat digunakan kembali yang tidak ditampilkan oleh penyemak imbas, dan perlu dibuat pada waktu berjalan menggunakan JavaScript.
-
-### Tugas
-
-Kami akan membuat aplikasi bank dengan dua skrin: halaman log masuk dan papan pemuka. Pertama, mari kita tambahkan elemen penanda tempat pada badan HTML yang akan kita gunakan untuk menunjukkan pelbagai skrin aplikasi kita:
-
-```html
-<div id="app">Loading...</div>
-```
-
-Kami memberikannya `id` untuk memudahkan pencarian dengan JavaScript kemudian.
-
-> Petua: kerana kandungan elemen ini akan diganti, kita dapat memasukkan pesan pemuatan atau penunjuk yang akan ditunjukkan semasa aplikasi dimuat.
-
-Seterusnya, mari kita tambahkan di bawah templat HTML untuk halaman log masuk. Buat masa ini kami hanya akan memasukkan tajuk dan bahagian yang mengandungi pautan yang akan kami gunakan untuk melakukan navigasi.
-
-```html
-<template id="login">
-  <h1>Bank App</h1>
-  <section>
-    <a href="/dashboard">Login</a>
-  </section>
-</template>
-```
-
-Kemudian kami akan menambahkan templat HTML lain untuk halaman papan pemuka. Halaman ini akan mengandungi bahagian yang berbeza:
-
-- Tajuk dengan tajuk dan pautan log keluar
-- Baki semasa akaun bank
-- Senarai urus niaga, ditunjukkan dalam jadual
-
-```html
-<template id="dashboard">
-  <header>
-    <h1>Bank App</h1>
-    <a href="/login">Logout</a>
-  </header>
-  <section>
-    Balance: 100$
-  </section>
-  <section>
-    <h2>Transactions</h2>
-    <table>
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Object</th>
-          <th>Amount</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </section>
-</template>
-```
-
-> Petua: semasa membuat templat HTML, jika anda ingin melihat seperti apa, anda boleh memberi komen baris `<template>` `dan` `</template>` dengan melampirkannya dengan `<! - -> ` .
-
-✅ Menurut anda mengapa kami menggunakan atribut `id` pada templat? Bolehkah kita menggunakan sesuatu yang lain seperti kelas?
-
-## Memaparkan templat dengan JavaScript
-
-Sekiranya anda mencuba fail HTML semasa anda dalam penyemak imbas, anda akan melihat fail tersebut macet memaparkan `Memuat ... '. Itu kerana kita perlu menambahkan beberapa kod JavaScript untuk memberi contoh dan memaparkan templat HTML.
-
-Membuat templat biasanya dilakukan dalam 3 langkah:
-
-1. Dapatkan semula elemen templat di DOM, misalnya menggunakan [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById).
-2. Klon elemen templat, menggunakan [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode).
-3. Lampirkan ke DOM di bawah elemen yang kelihatan, misalnya menggunakan [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild).
-
-✅ Mengapa kita perlu mengklon templat sebelum melampirkannya ke DOM? Apa yang anda fikir akan berlaku sekiranya kita melangkau langkah ini?
-
-### Tugas
-
-Buat fail baru bernama `app.js` di folder projek anda dan import fail itu di bahagian `<head>` HTML anda:
-
-```html
-<script src="app.js" defer></script>
-```
-
-Sekarang di `app.js`, kami akan membuat fungsi baru `updateRoute`:
-
-```js
-function updateRoute(templateId) {
-  const template = document.getElementById(templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-Apa yang kami lakukan di sini adalah tepat 3 langkah yang dinyatakan di atas. Kami membuat templat dengan id `templateId`, dan memasukkan kandungan klonnya ke dalam ruang letak aplikasi kami. Perhatikan bahawa kita perlu menggunakan `cloneNode(true)` untuk menyalin keseluruhan subtree templat.
-
-Sekarang panggil fungsi ini dengan salah satu templat dan lihat hasilnya.
-
-```js
-updateRoute('login');
-```
-
-✅ Apa tujuan kod ini `app.innerHTML = '';`? Apa yang berlaku tanpanya?
-
-## Membuat laluan
-
-Ketika berbicara tentang aplikasi web, kami memanggil *Routing* niat untuk memetakan **URL** ke layar tertentu yang harus ditampilkan. Di laman web dengan banyak fail HTML, ini dilakukan secara automatik kerana jalur fail ditunjukkan pada URL. Contohnya, dengan fail ini dalam folder projek anda:
-
-```
-mywebsite/index.html
-mywebsite/login.html
-mywebsite/admin/index.html
-```
-
-Sekiranya anda membuat pelayan web dengan `mywebsite` sebagai root, pemetaan URL akan:
-
-```
-https://site.com            --> mywebsite/index.html
-https://site.com/login.html --> mywebsite/login.html
-https://site.com/admin/     --> mywebsite/admin/index.html
-```
-
-Walau bagaimanapun, untuk aplikasi web kami menggunakan satu fail HTML yang mengandungi semua skrin sehingga tingkah laku lalai ini tidak akan membantu kami. Kita harus membuat peta ini secara manual dan melakukan kemas kini templat yang dipaparkan menggunakan JavaScript.
-
-### Tugas
-
-Kami akan menggunakan objek sederhana untuk melaksanakan [peta](https://en.wikipedia.org/wiki/Associative_array) antara jalur URL dan templat kami. Tambahkan objek ini di bahagian atas fail `app.js` anda.
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard' },
-};
-```
-
-Sekarang mari kita ubah sedikit fungsi `updateRoute`. Daripada meneruskan secara langsung `templateId` sebagai argumen, kami ingin mendapatkannya dengan terlebih dahulu melihat URL semasa, dan kemudian menggunakan peta kami untuk mendapatkan nilai ID templat yang sesuai. Kita boleh menggunakan [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) untuk mendapatkan hanya bahagian jalan dari URL.
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  const template = document.getElementById(route.templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-Di sini kami memetakan laluan yang kami nyatakan ke templat yang sesuai. Anda boleh mencubanya agar berfungsi dengan betul dengan menukar URL secara manual di penyemak imbas anda.
-
-✅ Apa yang berlaku jika anda memasukkan jalan yang tidak diketahui dalam URL? Bagaimana kita dapat menyelesaikannya?
-
-## Tambahkan navigasi
-
-Langkah seterusnya untuk aplikasi kita adalah menambahkan kemungkinan untuk menavigasi antara halaman tanpa perlu mengubah URL secara manual. Ini menunjukkan dua perkara:
-
-  1. Mengemas kini URL semasa
-  2. Mengemas kini templat yang dipaparkan berdasarkan URL baru
-
-Kami sudah mengurus bahagian kedua dengan fungsi `updateRoute`, jadi kami harus memikirkan cara mengemas kini URL semasa.
-
-Kita mesti menggunakan JavaScript dan lebih khusus lagi [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState) yang memungkinkan untuk mengemas kini URL dan buat entri baru dalam sejarah penyemakan imbas, tanpa memuatkan semula HTML.
-
-> Catatan: Walaupun elemen anchor HTML [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) dapat digunakan sendiri untuk membuat hyperlink ke URL yang berbeza, ini akan menjadikan penyemak imbas memuat semula HTML secara lalai. Adalah perlu untuk mencegah tingkah laku ini ketika menangani routing dengan javascript khusus, menggunakan fungsi preventDefault () pada peristiwa klik.
-
-### Tugas
-
-Mari buat fungsi baru yang dapat kita gunakan untuk menavigasi di aplikasi kita:
-
-```js
-function navigate(path) {
-  window.history.pushState({}, path, path);
-  updateRoute();
-}
-```
-
-Kaedah ini terlebih dahulu mengemas kini URL semasa berdasarkan jalan yang diberikan, kemudian mengemas kini templat. Properti `window.location.origin` mengembalikan akar URL, yang membolehkan kami membina semula URL lengkap dari jalan yang ditentukan.
-
-Sekarang kita mempunyai fungsi ini, kita dapat mengatasi masalah yang kita ada jika jalan tidak sesuai dengan rute yang ditentukan. Kami akan mengubah fungsi `updateRoute` dengan menambahkan fallback ke salah satu laluan yang ada jika kami tidak dapat mencari yang sesuai.
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  if (!route) {
-    return navigate('/login');
-  }
-
-  ...
-```
-
-Sekiranya laluan tidak dapat dijumpai, kami sekarang akan mengalihkan ke halaman `login`.
-
-Sekarang mari kita buat fungsi untuk mendapatkan URL apabila pautan diklik, dan untuk mengelakkan tingkah laku pautan lalai penyemak imbas:
-
-```js
-function onLinkClick(event) {
-  event.preventDefault();
-  navigate(event.target.href);
-}
-```
-
-Mari lengkapkan sistem navigasi dengan menambahkan pengikatan pada pautan *Login* dan *Logout* kami dalam HTML.
-
-```html
-<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
-...
-<a href="/login" onclick="onLinkClick(event)">Logout</a>
-```
-
-Menggunakan atribut [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) mengikat peristiwa`klik` ke kod JavaScript, di sini panggilan ke `navigasi() `fungsi.
-
-Cuba klik pada pautan-pautan ini, kini anda seharusnya dapat menavigasi antara pelbagai skrin aplikasi anda.
-
-✅ Kaedah `history.pushState` adalah sebahagian daripada standard HTML5 dan dilaksanakan di [semua penyemak imbas moden](https://caniuse.com/?search=pushState). Sekiranya anda membuat aplikasi web untuk penyemak imbas yang lebih lama, ada helah yang dapat Anda gunakan sebagai ganti API ini: menggunakan [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment) sebelum jalan yang dapat anda laksanakan perutean yang berfungsi dengan navigasi jangkar biasa dan tidak memuat semula halaman, kerana tujuannya adalah untuk membuat pautan dalaman dalam halaman.
-
-## Mengendalikan butang belakang dan hadapan penyemak imbas
-
-Menggunakan `history.pushState` membuat entri baru dalam sejarah navigasi penyemak imbas. Anda boleh memastikan bahawa dengan menahan * butang belakang * penyemak imbas anda, ia akan memaparkan sesuatu seperti ini:
-
-![Tangkapan skrin sejarah navigasi](../history.png)
-
-Sekiranya anda cuba mengklik butang kembali beberapa kali, anda akan melihat bahawa URL semasa berubah dan sejarahnya dikemas kini, tetapi templat yang sama terus dipaparkan.
-
-Ini kerana tidak tahu bahawa kita perlu memanggil `updateRoute()` setiap kali sejarah berubah. Sekiranya anda melihat dokumentasi [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState), anda dapat melihat bahawa jika keadaan berubah - yang bermaksud bahawa kami berpindah ke URL yang berbeza - peristiwa [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) dicetuskan. Kami akan menggunakannya untuk menyelesaikan masalah itu.
-
-### Tugas
-
-Untuk memastikan templat yang ditampilkan diperbaharui ketika sejarah penyemak imbas berubah, kami akan melampirkan fungsi baru yang memanggil `updateRoute ()`. Kami akan melakukannya di bahagian bawah fail `app.js` kami:
-
-```js
-window.onpopstate = () => updateRoute();
-updateRoute();
-```
-
-> Catatan: kami menggunakan [fungsi panah](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions) di sini untuk menyatakan pengendali acara `popstate` kami untuk kesimpulan, fungsi biasa akan berfungsi sama.
-
-Berikut adalah video penyegaran mengenai fungsi anak panah:
-
-[![Fungsi Anak Panah](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "Fungsi Anak Panah")
-
-> Klik gambar di atas untuk video mengenai fungsi anak panah.
-
-Sekarang cuba gunakan butang belakang dan depan penyemak imbas anda, dan periksa bahawa laluan yang dipaparkan dikemas kini dengan betul kali ini.
-
----
-
-## 🚀 Cabaran
-
-Tambahkan templat dan laluan baru untuk halaman ketiga yang menunjukkan kredit untuk aplikasi ini.
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42)
-
-## Mengkaji & Belajar Sendiri
-
-Perutean adalah salah satu bahagian pengembangan web yang sangat mengejutkan, terutama ketika web beralih dari tingkah laku penyegaran halaman ke penyegaran halaman Aplikasi Halaman Tunggal. Baca sedikit mengenai [bagaimana perkhidmatan Aplikasi Web Statik Azure](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon) menangani penghalaan . Bolehkah anda menjelaskan mengapa beberapa keputusan yang dijelaskan pada dokumen itu diperlukan?
-
-## Tugasan
-
-[Tingkatkan penghalaan](assignment.ms.md)
diff --git a/7-bank-project/1-template-route/translations/README.zh-tw.md b/7-bank-project/1-template-route/translations/README.zh-tw.md
deleted file mode 100644
index a4385f26..00000000
--- a/7-bank-project/1-template-route/translations/README.zh-tw.md
+++ /dev/null
@@ -1,307 +0,0 @@
-# 建立銀行網頁應用程式 Part 1：HTML 模板與網頁路由
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/41?loc=zh_tw)
-
-### 大綱
-
-自從 JavaScript 出現在瀏覽器後，網頁開始變得更複雜、更多互動。網頁技術已經普遍地用於建立功能齊全的應用程式，執行在瀏覽器上，我們稱之為[網頁應用程式](https://zh.wikipedia.org/zh-tw/%E7%BD%91%E7%BB%9C%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F)。基於網頁應用程式的高互動性，使用者不會想在互動後做所有頁面載入所需的等待。這也是為什麼 JavaScript 使用 DOM 來更新 HTML，提供使用者更流暢的網頁體驗。
-
-在這堂課程中，我們會譜出銀行網頁應用程式的基礎，使用 HTML 模板建立不同的畫面，各自顯示並更新內容，而不必每次都需要載入整個 HTML 頁面。
-
-### 開始之前
-
-你需要一個網頁伺服器來測試我們要建的專案。如果你還沒有，你可以安裝 [Node.js](https://nodejs.org) 並在你的專案資料夾中使用指令 `npx lite-server`。這會建立一個本地端的網頁伺服器，在瀏覽器上開啟你的網頁程式。
-
-### 準備
-
-在你的電腦上，建立資料夾 `bank`，並在裡面建立檔案 `index.html`。我們以這個 HTML [樣板](https://en.wikipedia.org/wiki/Boilerplate_code)來開始：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bank App</title>
-  </head>
-  <body>
-    <!-- This is where you'll work -->
-  </body>
-</html>
-```
-
----
-
-## HTML 模板(templates)
-
-如果你想在同一個網頁上建立不同的畫面，其中一種方法是各自建立一個 HTML 檔給每一個你想呈現的子畫面。然而，這個方式有許多不便之處：
-
-- 你需要在切換頁面時，重新載入整個網頁。這會很花時間。
-- 在不同子頁面上共享數據會是一大難題。
-
-另一個解決方案是只有一個 HTML 檔案，並使用 `<template>` 元素定義多個 [HTML 模板](https://developer.mozilla.org/docs/Web/HTML/Element/template)。
-一個模板提供可重複利用的 HTML 區塊，它不會顯示在瀏覽器上，而在需要之時由 JavaScript 以呈現出來。
-
-### 課題
-
-我們會建立一個銀行網頁應用程式，其中包含兩個子畫面：登入頁面與儀表板頁面。首先，我們在網頁應用程式的 HTML body 上，建立放置區來放置模板的子頁面。
-
-```html
-<div id="app">Loading...</div>
-```
-
-我們給它 `id`，以利後續 JavaScript 對它的追蹤。
-
-> 提示：因為它裡面元素的內容會被置換，我們可以建立載入中訊息或提示，在應用程式載入時顯示出來。
-
-接下來，我們加入下列的 HTML 模板，給登入畫面使用。現在我們只加入一行標題與一個有連結的區塊，進行簡單的功能。
-
-```html
-<template id="login">
-  <h1>Bank App</h1>
-  <section>
-    <a href="/dashboard">Login</a>
-  </section>
-</template>
-```
-
-接著，加入另一個 HTML 模板給儀表板頁面。這個頁面就會包含不同的區塊：
-
-- 包含標題與登出連結的網頁標頭
-- 現在的銀行帳戶餘額
-- 一個歷史交易清單的表格
-
-```html
-<template id="dashboard">
-  <header>
-    <h1>Bank App</h1>
-    <a href="/login">Logout</a>
-  </header>
-  <section>
-    Balance: 100$
-  </section>
-  <section>
-    <h2>Transactions</h2>
-    <table>
-      <thead>
-        <tr>
-          <th>Date</th>
-          <th>Object</th>
-          <th>Amount</th>
-        </tr>
-      </thead>
-      <tbody></tbody>
-    </table>
-  </section>
-</template>
-```
-
-> 提示：在建立 HTML 模板時，如果你想知道它的呈現樣子為何，你可以註解掉 `<template>` 與 `</template>`。使用 `<!-- -->` 來註解它們。
-
-✅ 你知道為什麼我們需要使用模板的 `id` 屬性嗎？我們可以使用別的屬性，例如 classes 嗎？
-
-## 利用 JavaScript 顯示模板
-
-現在，如果你使用瀏覽器打開你的應用程式，你會看到畫面卡在 `Loading...` 的畫面。那是因為我們需要為它新增一些 JavaScript 的程式碼來顯示出這些 HTML 模板。
-
-展現模板通常需要三個步驟：
-
-1. 在 DOM 內接收模板元素，舉例來說，使用 [`document.getElementById`](https://developer.mozilla.org/docs/Web/API/Document/getElementById)。
-2. 複製模板元素，使用 [`cloneNode`](https://developer.mozilla.org/docs/Web/API/Node/cloneNode)。
-3. 將複製元素接到 DOM 的顯示元素上，例如使用 [`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild)。
-
-✅ 我們為什麼需要在接到 DOM 前，複製一份模板？你能想像如果我們省略了此步驟後，會發生什麼事嗎？
-
-### 課題
-
-在資料夾中建立新檔案 `app.js`，並在你的 HTML 檔案的 `<head>` 區塊中中匯入這個新檔案：
-
-```html
-<script src="app.js" defer></script>
-```
-
-在 `app.js` 中，我們建立新函式 `updateRoute`：
-
-```js
-function updateRoute(templateId) {
-  const template = document.getElementById(templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-這裡做的事情就是我們上述提及過的三個步驟。我們使用 `templateId` 展現了模板，並將複製的內容接在我們的放置區中。注意我們需要使用 `cloneNode(true)` 來複製整個模板的子樹。
-
-現在我們呼叫這個函式，指定特定的模板並觀察結果。
-
-```js
-updateRoute('login');
-```
-
-✅ 程式碼中 `app.innerHTML = '';` 的目的為何？如果刪去它會發生什麼事？
-
-## 建立網頁路由(Routing)
-
-當提及網頁應用程式時，我們稱呼 *路由(Routing)* 來連接**網址(URLs)**到特定的畫面上，呈現相關內容。一個含有多個 HTML 檔的網頁，網址又象徵著檔案路徑，這能自動地完成網址與檔案的轉換。舉例來說，專案資料夾內有這些檔案：
-
-```
-mywebsite/index.html
-mywebsite/login.html
-mywebsite/admin/index.html
-```
-
-若我們建立網路伺服器，根目錄為 `mywebsite`，則 URL 路由為：
-
-```
-https://site.com            --> mywebsite/index.html
-https://site.com/login.html --> mywebsite/login.html
-https://site.com/admin/     --> mywebsite/admin/index.html
-```
-
-然而，在我們的網頁應用中，我們使用單一個 HTML 檔包含所有的子畫面到其中，所以預設的路由行為並不能幫助到本次專案。我們需要手動進行連接，使用 JavaScript 更新該被顯示出來的模板。
-
-### 課題
-
-我們使用簡單的物件來達成 URL 網址與模板的[關聯實體關係](https://en.wikipedia.org/wiki/Associative_array)。加入這個物件到 `app.js` 檔案的最上方。
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard' },
-};
-```
-
-現在，我們對函式 `updateRoute` 做一些更動。我們不直接將 `templateId` 作為參數傳遞，而是接收現在的 URL 網址，在使用關聯表來取得相對應的模板 ID 數值。我們可以使用 [`window.location.pathname`](https://developer.mozilla.org/docs/Web/API/Location/pathname) 來取得網址的部分路徑。
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  const template = document.getElementById(route.templateId);
-  const view = template.content.cloneNode(true);
-  const app = document.getElementById('app');
-  app.innerHTML = '';
-  app.appendChild(view);
-}
-```
-
-這邊我們建立了模板的路由關係。你可以藉由修改網址，來測試你的網頁是否正確的轉移。
-
-✅ 如果你輸入了不存在的網址，它會發生什麼事？我們該如何解決呢？
-
-## 加入網頁訪問
-
-下一個步驟為在不更改網址的情況下，新增網頁訪問的途徑。這會做出兩件事情：
-
-  1. 更新現在的網址
-  2. 更新要被顯示的模板到新的網址中
-
-我們已經完成了第二點，藉由使用函式 `updateRoute` 來完成，所以我們需要釐清該如何更新現在的網址。
-
-我們需要使用 JavaScript，詳細來看為 [`history.pushState`](https://developer.mozilla.org/docs/Web/API/History/pushState)，更新網址位置並建立瀏覽紀錄，同時不更新整個 HTML 頁面。
-
-> 筆記：網頁超連結元素 [`<a href>`](https://developer.mozilla.org/docs/Web/HTML/Element/a) 可以建立不同網址的連接，但它預設上會讓瀏覽器重新載入 HTML 檔。我們需要手動新增 JavaScript 處理路由以避免此行為發生，在點擊事件中使用函式 preventDefault() 。
-
-### 課題
-
-我們來建立新的函式，讓應用程式得以做網頁的訪問：
-
-```js
-function navigate(path) {
-  window.history.pushState({}, path, path);
-  updateRoute();
-}
-```
-
-這個方法根據導入的路徑位置，更新了現在的網址位置，再更新模板上去。`window.location.origin` 回傳了網址的根路徑，允許我們重新構築完整的網址。
-
-現在，藉由上述的函式，我們可以解決找不到網頁路徑的問題。我們修改函式 `updateRoute`，在找不到該網頁時強制轉移到一個存在的網頁。
-
-```js
-function updateRoute() {
-  const path = window.location.pathname;
-  const route = routes[path];
-
-  if (!route) {
-    return navigate('/login');
-  }
-
-  ...
-```
-
-如果找不到網頁路由時，我們會導往 `login` 的頁面。
-
-現在，我們建立新的函式，在連結被點擊時取得網址位置，並避免瀏覽器進行預設上的重新載入：
-
-```js
-function onLinkClick(event) {
-  event.preventDefault();
-  navigate(event.target.href);
-}
-```
-
-現在我們完成應用程式的網頁訪問系統，在 HTML 檔的 *Login* 與 *Logout* 連結加入此函式。
-
-```html
-<a href="/dashboard" onclick="onLinkClick(event)">Login</a>
-...
-<a href="/login" onclick="onLinkClick(event)">Logout</a>
-```
-
-使用 [`onclick`](https://developer.mozilla.org/docs/Web/API/GlobalEventHandlers/onclick) 屬性會將 `click` 事件連接到 JavaScript 程式碼中，這邊會再呼叫函式 `navigate()`。
-
-試著點擊這些連結，你應該能造訪網頁中不同的的畫面了。
-
-✅ `history.pushState` 這個方法是 HTML5 標準的一部份，支援在[所有當代的瀏覽器](https://caniuse.com/?search=pushState)上。如果你要為舊款的瀏覽器設計網頁應用程式的話，這邊有一個技巧來加在這個 API 上：在路徑前面加上 [hash (`#`)](https://en.wikipedia.org/wiki/URI_fragment)，你可以完成網頁路由與不須重載網頁的功能，它的目的就是在同一個網頁中做內部連結的切換。
-
-## 處理瀏覽器的「上一頁」與「下一頁」
-
-使用 `history.pushState` 會建立瀏覽器的瀏覽紀錄。你可以使用瀏覽器的*上一頁*來確認，它應該要能呈現像這樣的畫面：
-
-![瀏覽歷史的截圖](../history.png)
-
-點擊上一頁數次，你會看到網址會改變且歷史紀錄也更新上去了，但同一個模板還是被顯示出來。
-
-這是因為網頁不知道該如何依據歷史紀錄來呼叫 `updateRoute()`。如果你閱讀了 [`history.pushState` 技術文件](https://developer.mozilla.org/docs/Web/API/History/pushState)，你會發現如果狀態改變 ── 同時代表著網址改變 ── [`popstate`](https://developer.mozilla.org/docs/Web/API/Window/popstate_event) 事件就會被觸發。我們會利用此特徵來修復這個問題。
-
-### 課題
-
-為了在瀏覽器歷史改變時更新該被顯示的模板，我們會以新函式來呼叫 `updateRoute()`。我們在 `app.js` 檔最下方加入：
-
-```js
-window.onpopstate = () => updateRoute();
-updateRoute();
-```
-
-> 筆記：我們在這裡使用[箭頭函式](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Functions/Arrow_functions)，簡短地宣告 `popstate` 事件處理器。它與正規的函式的功能是一樣的。
-
-這是關於箭頭函式的回想影片：
-
-[![箭頭函式](https://img.youtube.com/vi/OP6eEbOj2sc/0.jpg)](https://youtube.com/watch?v=OP6eEbOj2sc "箭頭函式")
-
-> 點擊上方圖片以觀看關於箭頭函式的影片。
-
-現在，試著點擊瀏覽器上的上一頁與下一頁，檢查這次模板是否正確地更新出來。
-
----
-
-## 🚀 挑戰
-
-加入新的模板與對應的關聯表，顯示出本應用程式第三頁的功能 ── 帳戶餘額。
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/42?loc=zh_tw)
-
-## 複習與自學
-
-網頁路由是網頁開發中很棘手的部分，特別是將網頁切換轉變為單一頁面應用程式(Single Page Application)。閱讀關於[Azure Static Web App 提供服務的方式](https://docs.microsoft.com/azure/static-web-apps/routes/?WT.mc_id=academic-77807-sagibbon)以處理網頁路由。你能解釋為什麼文件上的某些決定會如此重要呢？
-
-## 作業
-
-[增進網頁路由](assignment.zh-tw.md)
diff --git a/7-bank-project/1-template-route/translations/assignment.es.md b/7-bank-project/1-template-route/translations/assignment.es.md
deleted file mode 100644
index 49fabfad..00000000
--- a/7-bank-project/1-template-route/translations/assignment.es.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Mejorar el enrutamiento
-
-## Instrucciones
-
-La declaración de rutas contiene actualmente solo el ID de plantilla a usar. Pero cuando se muestra una página nueva, a veces se necesita un poco más. Mejoremos nuestra implementación de enrutamiento con dos características adicionales:
-
-- Dé títulos a cada plantilla y actualice el título de la ventana con él cuando cambie la plantilla.
-- Agregue una opción para ejecutar código después de que cambie la plantilla. Queremos imprimir `'Se muestra el panel'` en la consola del desarrollador cada vez que se muestra la página del panel.
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | --------- | -------- | ----------------- |
-| | Las dos características están implementadas y funcionando. La adición de título y código también funciona para una nueva ruta agregada en la declaración de `routes`. | Las dos características funcionan, pero el comportamiento está codificado y no se puede configurar a través de la declaración de `routes`. Agregar una tercera ruta con la adición de título y código no funciona o funciona parcialmente. | Una de las funciones falta o no funciona correctamente.
\ No newline at end of file
diff --git a/7-bank-project/1-template-route/translations/assignment.fr.md b/7-bank-project/1-template-route/translations/assignment.fr.md
deleted file mode 100644
index d9deac57..00000000
--- a/7-bank-project/1-template-route/translations/assignment.fr.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Améliorer le routage
-
-## Instructions
-
-
-La déclaration de routes ne contient actuellement que l'ID de modèle à utiliser. Mais lors de l'affichage d'une nouvelle page, un peu plus que celà est parfois nécessaire. Améliorons notre implémentation de routage avec deux fonctionnalités supplémentaires :
-
-- Donnez des titres à chaque modèle et mettez à jour le titre de la fenêtre avec ce nouveau titre lorsque le modèle change.
-- Ajouter une option pour exécuter du code après les modifications du modèle. Nous voulons afficher « Le tableau de bord est affiché » dans la console du développeur à chaque fois que la page du tableau de bord est affichée. 
-
-## Rubrique
-
-| Critères | Exemplaire                                                                                                                          | Adéquat                                                                                                                                                                                  | Besoin d'amélioration                                       |
-| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-|          | Les deux fonctionnalités sont implémentées et fonctionnent. L'ajout de titre et de code fonctionne également pour une nouvelle route ajoutée dans la déclaration `routes`. | Les deux fonctionnalités fonctionnent, mais le comportement est codé en dur et non configurable via la déclaration `routes`. L'ajout d'une troisième route avec une addition de titre et de code ne fonctionne pas ou fonctionne partiellement. | L'une des fonctionnalités est manquante ou ne fonctionne pas correctement. |
\ No newline at end of file
diff --git a/7-bank-project/1-template-route/translations/assignment.hi.md b/7-bank-project/1-template-route/translations/assignment.hi.md
deleted file mode 100644
index e89ea8bc..00000000
--- a/7-bank-project/1-template-route/translations/assignment.hi.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# रूटिंग में सुधार करें
-
-## अनुदेश
-
-मार्गों की घोषणा में वर्तमान में उपयोग करने के लिए केवल टेम्पलेट आईडी है। लेकिन एक नया पृष्ठ प्रदर्शित करते समय, कभी-कभी थोड़ा और अधिक की आवश्यकता होती है। आइए दो अतिरिक्त सुविधाओं के साथ हमारे रूटिंग कार्यान्वयन में सुधार करें:
-
-- प्रत्येक टेम्पलेट को शीर्षक दें और जब टेम्पलेट बदलता है तो इस नए शीर्षक के साथ विंडो शीर्षक को अपडेट करें।
-- टेम्पलेट परिवर्तन के बाद कुछ कोड चलाने के लिए एक विकल्प जोड़ें। हम हर बार डैशबोर्ड पृष्ठ प्रदर्शित होने पर डेवलपर कंसोल में `'Dashboard is shown'` प्रिंट करना चाहते हैं
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                                                                                                    | पर्याप्त                                                                                                                                                                                 | सुधार की जरूरत                                           |
-| ------ | ------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
-|        | दो विशेषताएं कार्यान्वित और काम कर रही हैं। शीर्षक और कोड जोड़ भी `routes` घोषणा में जोड़े गए एक नए मार्ग के लिए काम करते हैं. | दो सुविधाएँ काम करती हैं, लेकिन व्यवहार कठिन है और `routes` घोषणा के माध्यम से विन्यास योग्य नहीं है। शीर्षक और कोड जोड़ के साथ तीसरा मार्ग जोड़ना आंशिक रूप से काम या काम नहीं करता है. | सुविधाओं में से एक गायब है या ठीक से काम नहीं कर रहा है. |
diff --git a/7-bank-project/1-template-route/translations/assignment.it.md b/7-bank-project/1-template-route/translations/assignment.it.md
deleted file mode 100644
index 51dd5958..00000000
--- a/7-bank-project/1-template-route/translations/assignment.it.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Migliorare l'instradamento
-
-## Istruzioni
-
-La dichiarazione delle rotte contiene attualmente solo l'ID del modello da utilizzare. Quando si visualizza una nuova pagina, a volte è necessario un po 'di più. L'implementazione del routing viene migliorata con due funzionalità aggiuntive:
-
-- Assegnare titoli a ciascun modello e aggiornare il titolo della finestra con questo nuovo titolo quando il modello cambia.
-- Aggiungere un'opzione per eseguire del codice dopo le modifiche al modello. Si vuole stampare `"Il cruscotto è mostrato" nella` console per sviluppatori ogni volta che viene visualizzata la pagina del dashboard.
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-|          | Le due funzionalità sono implementate e funzionanti. L'aggiunta di titolo e codice funziona anche per una nuova rotta aggiunta nella dichiarazione di `routes` . | Sono funzionanti i due comportamenti aggiuntivi, ma il comportamento è fisso nel codice e non è configurabile tramite la dichiarazione di `routes`. L'aggiunta di una terza rotta con l'aggiunta di titolo e codice non funziona o funziona parzialmente. | Una delle funzionalità manca o non funziona correttamente. |
\ No newline at end of file
diff --git a/7-bank-project/1-template-route/translations/assignment.ja.md b/7-bank-project/1-template-route/translations/assignment.ja.md
deleted file mode 100644
index 73ffef85..00000000
--- a/7-bank-project/1-template-route/translations/assignment.ja.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# ルーティングの改善
-
-## 説明書
-
-The routes declaration contains currently only the template ID to use. But when displaying a new page, a bit more is needed sometimes. Let's improve our routing implementation with two additional features:
-
-- Give titles to each template and update the window title with this new title when the template changes.
-- Add an option to run some code after the template changes. We want to print `'Dashboard is shown'` in the developer console every time the dashboard page is displayed. 
-
-## ルーブリック
-
-| Criteria | Exemplary                                                                                                                          | Adequate                                                                                                                                                                                  | Needs Improvement                                       |
-| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-|          | The two features are implemented and working. Title and code addition also work for a new route added in the `routes` declaration. | The two features work, but the behavior is hardcoded and not configurable via the `routes` declaration. Adding a third route with title and code addition does not work or works partially. | One of the features is missing or not working properly. |
\ No newline at end of file
diff --git a/7-bank-project/1-template-route/translations/assignment.ko.md b/7-bank-project/1-template-route/translations/assignment.ko.md
deleted file mode 100644
index ef9b14b9..00000000
--- a/7-bank-project/1-template-route/translations/assignment.ko.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# 라우팅 개선
-
-## 설명
-
-경로 선언에는 현재 사용할 템플릿 ID만 포함됩니다. 하지만 새 페이지를 표시할 때는 추가할 것이 더 생기는 경우가 있습니다. 두 가지 추가 기능을 사용하여 라우팅 구현을 개선해 봅시다.
-
-- 각 템플릿에 제목을 부여하고 템플릿이 변경되면 새 제목으로 창 제목을 변경합니다.
-- 템플릿 변경 후 일부 코드를 실행하는 옵션을 추가합니다. 대시보드 페이지가 표시될 때마다 개발자 콘솔에 `'대시보드가 보임'`을 출력합니다.
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 두 기능이 구현되고 작동하는 경우. 제목 및 코드 추가는 `routes` 선언에 추가된 새 경로에서도 작동합니다. | 두 기능은 작동하지만, 동작은 하드 코딩되어 있으며 `routes` 선언을 통해 구성할 수 없는 경우. <br> 세 번째 경로를 제목과 코드와 함께 추가하면 작동하지 않거나 부분적으로 작동합니다. | 기능 중 하나가 없거나 제대로 작동하지 않는 경우
diff --git a/7-bank-project/1-template-route/translations/assignment.ms.md b/7-bank-project/1-template-route/translations/assignment.ms.md
deleted file mode 100644
index 52e33f5c..00000000
--- a/7-bank-project/1-template-route/translations/assignment.ms.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Tingkatkan penghalaan
-
-## Arahan
-
-Deklarasi laluan hanya mengandungi ID templat yang akan digunakan. Tetapi ketika memaparkan halaman baru, kadang-kadang diperlukan lebih banyak lagi. Mari tingkatkan pelaksanaan penghalaan kami dengan dua ciri tambahan:
-
-- Berikan tajuk untuk setiap templat dan kemas kini tajuk tetingkap dengan tajuk baru ini apabila templat berubah.
-- Tambahkan pilihan untuk menjalankan beberapa kod setelah templat berubah. Kami ingin mencetak `"Papan Pemuka ditunjukkan"` di konsol pembangun setiap kali halaman papan pemuka dipaparkan.
-
-## Rubrik
-
-| Kriteria | Contoh                                                                                                                          | Mencukupi                                                                                                                                                                                 | Usaha Lagi                                     |
-| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-|          | Kedua-dua ciri tersebut dilaksanakan dan berfungsi. Penambahan tajuk dan kod juga berfungsi untuk laluan baru yang ditambahkan dalam deklarasi `route` | Kedua-dua ciri berfungsi, tetapi tingkah laku itu dikodkan keras dan tidak dapat dikonfigurasi melalui deklarasi `route`. Menambah laluan ketiga dengan penambahan tajuk dan kod tidak berfungsi atau berfungsi secara separa. | Salah satu ciri hilang atau tidak berfungsi dengan baik. |
\ No newline at end of file
diff --git a/7-bank-project/1-template-route/translations/assignment.nl.md b/7-bank-project/1-template-route/translations/assignment.nl.md
deleted file mode 100644
index 6706bfdf..00000000
--- a/7-bank-project/1-template-route/translations/assignment.nl.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# Verbeter de routing
-
-## Instructies
-
-De routes-declaratie bevat momenteel alleen de te gebruiken sjabloon-ID. Maar bij het tonen van een nieuwe pagina is soms iets meer nodig. Laten we onze routeringsimplementatie verbeteren met twee extra functies:
-
-- Geef elk sjabloon een titel en werk de venstertitel bij met deze nieuwe titel wanneer de sjabloon verandert.
-- Voeg een optie toe om wat code uit te voeren nadat de sjabloon is gewijzigd. Elke keer dat de dashboardpagina wordt weergegeven willen we `'Dashboard wordt weergegeven'` in de ontwikkelaarsconsole afdrukken. 
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                                                                                                          | Voldoende                                                                                                                                                                                  | Moet worden verbeterd                                       |
-| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-|          | De twee functies zijn geïmplementeerd en werken. Titel en codetoevoeging werken ook voor een nieuwe route die is toegevoegd in de `routes`-aangifte. | De twee functies werken, maar het gedrag is hard gecodeerd en kan niet worden geconfigureerd via de `routes`-aangifte. Het toevoegen van een derde route met toevoeging van titel en code werkt niet of gedeeltelijk. | Een van de functies ontbreekt of werkt niet goed. |
\ No newline at end of file
diff --git a/7-bank-project/1-template-route/translations/assignment.zh-tw.md b/7-bank-project/1-template-route/translations/assignment.zh-tw.md
deleted file mode 100644
index d9eb3b26..00000000
--- a/7-bank-project/1-template-route/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# 增進網頁路由
-
-## 簡介
-
-我們的網頁路由的定義只包含模板的 ID。但當顯示新的網頁頁面時，我們或許會用到更多東西。讓我們來增進我們的網頁路由方式，新增兩項功能：
-
-- 給各個模板標題，在模板切換後同時更新網頁視窗的標題。
-- 加入額外選項，在模板切換後執行特定程式。我們希望在切換到儀表板頁面時，在開發者命令欄顯示 `'Dashboard is shown'`。 
-
-## 學習評量
-
-| 作業內容 | 優良                                                     | 普通                                                                                          | 待改進                   |
-| -------- | -------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------ |
-|          | 兩個新功能運作正常，標題與程式也能執行新的 `routes` 規則 | 兩個新功能運作正常，但行為是 hardcoded 上去而非使用 `routes` 規則。新的路由規則無法完整地運作 | 新功能不完全或不正常運行 |
diff --git a/7-bank-project/2-forms/translations/README.es.md b/7-bank-project/2-forms/translations/README.es.md
deleted file mode 100644
index fbcd8f13..00000000
--- a/7-bank-project/2-forms/translations/README.es.md
+++ /dev/null
@@ -1,291 +0,0 @@
-# Cree un formulario de inicio de sesión y registro
-
-## [Prueba previa a la conferencia](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
-
-### Introducción
-
-En casi todas las aplicaciones web modernas, puede crear una cuenta para tener su propio espacio privado. Como varios usuarios pueden acceder a una aplicación web al mismo tiempo, necesita un mecanismo para almacenar los datos personales de cada usuario por separado y seleccionar qué información mostrar. No cubriremos cómo administrar [la identidad del usuario de forma segura](https://en.wikipedia.org/wiki/Authentication) ya que es un tema extenso en sí mismo, pero nos aseguraremos de que cada usuario pueda crear uno. O más cuenta bancaria en nuestra aplicación.
-
-En esta parte usaremos formularios HTML para agregar inicio de sesión y registro a nuestra aplicación web. Veremos cómo enviar los datos a una API de servidor de forma programática y, en última instancia, cómo definir reglas de validación básicas para las entradas del usuario.
-
-### Requisito previo
-
-Debe haber completado las [plantillas HTML y enrutamiento](../1-template-route/README.md) de la aplicación web para esta lección. También necesita instalar [Node.js](https://nodejs.org) y [ejecutar la API del servidor](../api/README.md) localmente para poder enviar datos para crear cuentas.
-
-Puede probar que el servidor está funcionando correctamente ejecutando este comando en una terminal:
-
-```sh
-curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
-```
-
----
-
-## Forma y controles
-
-El elemento `<form>` encapsula una sección de un documento HTML donde el usuario puede ingresar y enviar datos con controles interactivos. Hay todo tipo de controles de interfaz de usuario (UI) que se pueden usar dentro de un formulario, siendo el más común los elementos `<input>` y `<button>`.
-
-Hay muchos [types diferentes](https://developer.mozilla.org/docs/Web/HTML/Element/input) de `<input>`, por ejemplo, para crear un campo donde el usuario puede ingresar su nombre de usuario que puede usar:
-
-
-```html
-<input name="username" type="text">
-```
-
-El atributo `name` se usa para identificar el control y se usará como el nombre de la propiedad cuando se envíen los datos del formulario.
-
-> Eche un vistazo a la lista completa de [`<input>` tipos](https://developer.mozilla.org/docs/Web/HTML/Element/input) y [otros controles de formulario](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) para tener una idea de todos los elementos nativos de la interfaz de usuario que puede utilizar al crear su interfaz de usuario.
-
-✅ Tenga en cuenta que `<input>` es un [elemento vacío](https://developer.mozilla.org/docs/Glossary/Empty_element) en el que *no* debe agregar una etiqueta de cierre coincidente. Sin embargo, puede usar la notación de cierre automático `<input/>`, pero no es necesaria.
-
-El elemento `<button>` dentro de un formulario es un poco especial. Si no especifica su atributo `type`, automáticamente enviará los datos del formulario al servidor cuando se presione. Estos son los posibles valores de tipo:
-
-- `enviar`: el valor predeterminado dentro de un` <formulario> `, el botón activa la acción de envío del formulario.
-- `reset`: El botón restablece todos los controles de formulario a sus valores iniciales.
-- `button`: No asigna un comportamiento predeterminado cuando se presiona el botón. A continuación, puede asignarle acciones personalizadas mediante JavaScript.
-
-### Tarea:
-
-Comencemos agregando un formulario a la plantilla de inicio de sesión. Necesitaremos un campo *nombre de usuario* y un botón *Iniciar sesión*.
-
-
-```html
-<template id="login">
-  <h1>Bank App</h1>
-  <section>
-    <h2>Login</h2>
-    <form id="loginForm">
-      <label for="user">Username</label>
-      <input name="user" type="text">
-      <button>Login</button>
-    </form>
-  </section>
-</template>
-```
-
-Si observa más de cerca, puede notar que también agregamos un elemento `<label>` aquí. Las `<label>` se utilizan para agregar un título para los controles de la IU, como nuestro campo de nombre de usuario. Las etiquetas son importantes para la legibilidad de sus formularios, pero también tienen beneficios adicionales:
-
-- Al asociar una etiqueta a un control de formulario, ayuda a los usuarios que utilizan tecnologías de asistencia (como un lector de pantalla) a comprender qué datos se espera que proporcionen.
-- Puede hacer clic en la etiqueta para centrarse directamente en la entrada asociada, lo que facilita el acceso a los dispositivos con pantalla táctil.
-
-> [Accesibilidad](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) en la web es un tema muy importante que a menudo se pasa por alto. Gracias a los [elementos semánticos HTML5](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) no es difícil crear contenido accesible si los usas correctamente. Puede [leer más sobre accesibilidad](https://developer.mozilla.org/docs/Web/Accessibility) para evitar errores comunes y convertirse en un desarrollador responsable.
-
-Ahora agregaremos un segundo formulario para el registro, justo debajo del anterior:
-
-
-```html
-<hr/>
-<h2>Register</h2>
-<form id="registerForm">
-  <label for="user">Username</label>
-  <input name="user" type="text">
-  <label for="currency">Currency</label>
-  <input name="currency" type="text" value="$">
-  <label for="description">Description</label>
-  <input name="description" type="text">
-  <label for="balance">Current balance</label>
-  <input name="balance" type="number" value="0">
-  <button>Register</button>
-</form>
-```
-
-Usando el atributo `value` podemos definir un valor predeterminado para una entrada dada.
-Observe también que la entrada para `balance` tiene el tipo `number`. ¿Se ve diferente a las otras entradas? Intenta interactuar con él.
-
-✅ ¿Puede navegar e interactuar con los formularios usando solo un teclado? ¿Cómo lo harías tú?
-
-## Envío de datos al servidor
-
-Ahora que tenemos una interfaz de usuario funcional, el siguiente paso es enviar los datos a nuestro servidor. Hagamos una prueba rápida con nuestro código actual: ¿qué sucede si hace clic en el botón *Iniciar sesión* o *Registrarse*?
-
-¿Notó el cambio en la sección de URL de su navegador?
-
-! [Captura de pantalla del cambio de URL del navegador después de hacer clic en el botón Registrar](./images/click-register.png)
-
-La acción predeterminada para un `<form>` es enviar el formulario a la URL del servidor actual utilizando el [método GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3 ), agregando los datos del formulario directamente a la URL. Sin embargo, este método tiene algunas deficiencias:
-
-- Los datos enviados son de tamaño muy limitado (unos 2000 caracteres)
-- Los datos son directamente visibles en la URL (no es ideal para contraseñas)
-- No funciona con cargas de archivos.
-
-Es por eso que puede cambiarlo para usar el [método POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) que envía los datos del formulario al servidor en el cuerpo de la solicitud HTTP, sin ninguna de las limitaciones anteriores.
-
-> Si bien POST es el método más utilizado para enviar datos, [en algunos escenarios específicos](https://www.w3.org/2001/tag/doc/whenToUseGet.html) es preferible utilizar el método GET, al implementar un campo de búsqueda, por ejemplo.
-
-### Tarea
-
-Agregue las propiedades `action` y `method` al formulario de registro:
-
-```html
-<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
-```
-
-Ahora intente registrar una nueva cuenta con su nombre. Después de hacer clic en el botón * Registrarse *, debería ver algo como esto:
-
-![](./images/form-post.png)
-
-Si todo va bien, el servidor debe responder a su solicitud con una respuesta [JSON](https://www.json.org/json-en.html) que contenga los datos de la cuenta que se creó.
-
-✅ Intente registrarse nuevamente con el mismo nombre. ¿Lo que pasa?
-
-## Envío de datos sin recargar la página
-
-Como probablemente haya notado, hay un pequeño problema con el enfoque que acabamos de usar: al enviar el formulario, salimos de nuestra aplicación y el navegador redirige a la URL del servidor. Estamos tratando de evitar todas las recargas de páginas con nuestra aplicación web, ya que estamos creando una [Aplicación de una sola página (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
-
-Para enviar los datos del formulario al servidor sin forzar la recarga de una página, tenemos que usar código JavaScript. En lugar de poner una URL en la propiedad `action` de un elemento `<form>`, puede usar cualquier código JavaScript precedido por la cadena `javascript:` para realizar una acción personalizada. Usar esto también significa que tendrá que implementar algunas tareas que anteriormente el navegador realizaba automáticamente:
-
-- Recuperar los datos del formulario
-- Convierta y codifique los datos del formulario a un formato adecuado
-- Crea la solicitud HTTP y envíala al servidor
-
-### Tarea
-
-Reemplace el formulario de registro `acción` con:
-
-```html
-<form id="registerForm" action="javascript:register()">
-```
-
-Abra `app.js` agregue una nueva función llamada `registro`:
-
-```js
-function register() {
-  const registerForm = document.getElementById('registerForm');
-  const formData = new FormData(registerForm);
-  const data = Object.fromEntries(formData);
-  const jsonData = JSON.stringify(data);
-}
-```
-
-Aquí recuperamos el elemento del formulario usando `getElementById()` y usamos el ayudante [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) para extraer los valores del formulario controles como un conjunto de pares clave/valor. Luego convertimos los datos a un objeto regular usando [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) y finalmente serialice los datos en [JSON](https://www.json.org/json-en.html), un formato que se utiliza comúnmente para intercambiar datos en la web.
-
-Los datos ahora están listos para enviarse al servidor. Cree una nueva función llamada `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' };
-  }
-}
-```
-
-¿Qué hace esta función? Primero, observe la palabra clave `async` aquí. Esto significa que la función contiene código que se ejecutará [** asincrónicamente**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Cuando se usa junto con la palabra clave `await`, permite esperar a que se ejecute el código asincrónico, como esperar la respuesta del servidor aquí, antes de continuar.
-
-Aquí hay un video rápido sobre el uso de `async/await`:
-
-[![Async y Await para administrar promesas](https://img.youtube.com/vi/4yJUTjtIlww/0.jpg)](https://youtube.com/watch?v=4yJUTjtIlww "Async y Await para administrar promesas")
-
-Usamos la API `fetch()` para enviar datos JSON al servidor. Este método toma 2 parámetros:
-
-- La URL del servidor, por lo que volvemos a colocar `//localhost:5000/api/accounts` aquí.
-- La configuración de la solicitud. Ahí es donde establecemos el método en `POST` y proporcionamos el `body` de la solicitud. Como estamos enviando datos JSON al servidor, también necesitamos establecer el encabezado `Content-Type` en `application/json` para que el servidor sepa cómo interpretar el contenido.
-
-Como el servidor responderá a la solicitud con JSON, podemos usar `await response.json()` para analizar el contenido JSON y devolver el objeto resultante. Tenga en cuenta que este método es asíncrono, por lo que usamos la palabra clave `await` aquí antes de regresar para asegurarnos de que también se detecta cualquier error durante el análisis.
-
-Ahora agregue un código a la función `register` para llamar a `createAccount()`:
-
-```js
-const result = await createAccount(jsonData);
-```
-
-Debido a que usamos la palabra clave `await` aquí, necesitamos agregar la palabra clave `async` antes de la función de registro:
-
-```js
-async function register() {
-```
-
-Finalmente, agreguemos algunos registros para verificar el resultado. La función final debería verse así:
-
-```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 occured:', result.error);
-  }
-
-  console.log('Account created!', result);
-}
-```
-
-¡Eso fue un poco largo pero llegamos allí! Si abre sus [herramientas de desarrollo del navegador](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) e intenta registrar una nueva cuenta, no debería ver ningún cambio en la página web pero aparecerá un mensaje en la consola confirmando que todo funciona.
-
-![Captura de pantalla que muestra el mensaje de registro en la consola del navegador](../images/browser-console.png)
-
-✅ ¿Crees que los datos se envían al servidor de forma segura? ¿Y si alguien pudiera interceptar la solicitud? Puede leer sobre [HTTPS](https://en.wikipedia.org/wiki/HTTPS) para saber más sobre la comunicación segura de datos.
-
-## Validación de datos
-
-Si intenta registrar una nueva cuenta sin establecer un nombre de usuario primero, puede ver que el servidor devuelve un error con el código de estado [400 (Solicitud incorrecta)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
-
-Antes de enviar datos a un servidor, es una buena práctica [validar los datos del formulario](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) de antemano cuando sea posible, para asegurarse de enviar un solicitud válida. Los controles de formularios HTML5 proporcionan una validación incorporada utilizando varios atributos:
-
-- `required`: el campo debe completarse; de ​​lo contrario, el formulario no se podrá enviar
-- `minlength` y `maxlength`: define el número mínimo y máximo de caracteres en los campos de texto.
-- `min` y `max`: define el valor mínimo y máximo de un campo numérico.
-- `type`: define el tipo de datos esperados, como `number`, `email`, `file` u [otros tipos integrados](https://developer.mozilla.org/docs/Web/HTML/Element/input). Este atributo también puede cambiar la representación visual del control de formulario.
-- `patrón`: permite definir un patrón [expresión regular](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) para probar si los datos ingresados ​​son válidos o no.
-
-> Consejo: puedes personalizar el aspecto de los controles de tu formulario dependiendo de si son válidos o no usando las pseudoclases CSS `:valid` y `:invalid`.
-
-
-### Tarea
-
-Hay 2 campos obligatorios para crear una nueva cuenta válida, el nombre de usuario y la moneda, los otros campos son opcionales. Actualice el formulario en HTML para reflejar que:
-
-```html
-<input name="user" type="text" required>
-...
-<input name="currency" type="text" value="$" required>
-```
-
-Si bien esta implementación de servidor en particular no impone límites específicos en la longitud máxima de los campos, siempre es una buena práctica definir límites razonables para cualquier entrada de texto del usuario.
-
-Agrega un atributo `maxlength` a los campos de texto:
-
-```html
-<input name="user" type="text" maxlength="20" required>
-...
-<input name="currency" type="text" value="$" maxlength="5" required>
-...
-<input name="description" type="text" maxlength="100">
-```
-
-Ahora, si presiona el botón *Registrar* y un campo no respeta una regla de validación que definimos, debería ver algo como esto:
-
-![Captura de pantalla que muestra el error de validación al intentar enviar el formulario](../images/validation-error.png)
-
-Una validación como esta realizada *antes* de enviar cualquier dato al servidor se llama validación **del lado del cliente**. Pero tenga en cuenta que no siempre es posible realizar todas las comprobaciones sin enviar los datos. Por ejemplo, no podemos comprobar aquí si ya existe una cuenta con el mismo nombre de usuario sin enviar una solicitud al servidor. La validación adicional realizada en el servidor se denomina validación **del lado del servidor**.
-
-Por lo general, ambos deben implementarse y, si bien el uso de la validación del lado del cliente mejora la experiencia del usuario al proporcionar comentarios instantáneos al usuario, la validación del lado del servidor es crucial para garantizar que los datos del usuario que manipula sean sólidos y seguros.
-
----
-
-## 🚀 Desafío
-
-Muestra un mensaje de error en el HTML si el usuario ya existe.
-
-Aquí hay un ejemplo de cómo puede verse la página de inicio de sesión final después de un poco de estilo:
-
-![Captura de pantalla de la página de inicio de sesión después de agregar estilos CSS](../images/result.png)
-
-## [Prueba posterior a la conferencia](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
-
-## Revisión y autoestudio
-
-Los desarrolladores se han vuelto muy creativos en sus esfuerzos de creación de formularios, especialmente en lo que respecta a las estrategias de validación. Obtenga información sobre los diferentes flujos de formularios consultando [CodePen](https://codepen.com); ¿Puedes encontrar algunas formas interesantes e inspiradoras?
-
-## Asignación
-
-[Diseña tu aplicación bancaria](assignment.es.md)
diff --git a/7-bank-project/2-forms/translations/README.fr.md b/7-bank-project/2-forms/translations/README.fr.md
deleted file mode 100644
index e67d3cab..00000000
--- a/7-bank-project/2-forms/translations/README.fr.md
+++ /dev/null
@@ -1,301 +0,0 @@
-# Créer une application bancaire Partie 2: Créer un formulaire de connexion et d'inscription
-
-## Quiz préalable
-
-[Quiz préalable](https://ashy-river-0debb7803.1.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://ashy-river-0debb7803.1.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/README.hi.md b/7-bank-project/2-forms/translations/README.hi.md
deleted file mode 100644
index cdf46f5a..00000000
--- a/7-bank-project/2-forms/translations/README.hi.md
+++ /dev/null
@@ -1,295 +0,0 @@
-# बैंकिंग ऐप पार्ट 2 बनाएँ: एक लॉगिन और पंजीकरण फॉर्म बनाएँ
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43?loc=hi)
-
-### परिचय
-
-लगभग सभी आधुनिक वेब ऐप्स में, आप अपना निजी स्थान रखने के लिए एक खाता बना सकते हैं। चूंकि एक ही समय में कई उपयोगकर्ता वेब ऐप तक पहुंच सकते हैं, इसलिए आपको प्रत्येक उपयोगकर्ता के व्यक्तिगत डेटा को अलग से संग्रहीत करने के लिए एक तंत्र की आवश्यकता होती है और जानकारी प्रदर्शित करने के लिए कौन सी जानकारी का चयन करना चाहिए। हम [उपयोगकर्ता पहचान को सुरक्षित](https://en.wikipedia.org/wiki/Authentication) रूप से प्रबंधित करने के लिए को कवर नहीं करेंगे  क्योंकि यह अपने आप में एक व्यापक विषय है, लेकिन हम सुनिश्चित करेंगे कि प्रत्येक उपयोगकर्ता एक बनाने में सक्षम है (या अधिक) हमारे ऐप पर बैंक खाता।
-
-इस भाग में हम अपने वेब ऐप में लॉगिन और पंजीकरण को जोड़ने के लिए HTML रूपों का उपयोग करेंगे। हम देखेंगे कि डेटा को सर्वर एपीआई को प्रोग्रामेटिक रूप से कैसे भेजा जाए, और अंततः उपयोगकर्ता इनपुट के लिए बुनियादी सत्यापन नियमों को कैसे परिभाषित किया जाए।
-
-### शर्त
-
-इस पाठ के लिए आपको वेब ऐप का [HTML टेम्प्लेट और रूटिंग](../../1-template-route/translations/README.hi.md)) पूरा करना होगा। आपको स्थानीय रूप से [Node.js](https://nodejs.org) और [सर्वर एपीआई चलाने](../../api/README.hi.md) स्थापित करने की आवश्यकता है ताकि आप खाते बनाने के लिए डेटा भेज सकें।
-
-आप परीक्षण कर सकते हैं कि सर्वर टर्मिनल में इस कमांड को निष्पादित करके ठीक से चल रहा है:
-
-```sh
-curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
-```
-
----
-
-## फोरम और कोन्टरोल्स
-
-`<form>` एलेमेन्ट एक HTML दस्तावेज़ के एक भाग को एन्क्रिप्ट करता है जहां उपयोगकर्ता इनपुट कर सकता है और इंटरैक्टिव नियंत्रणों के साथ डेटा जमा कर सकता है। सभी प्रकार के उपयोगकर्ता इंटरफ़ेस (UI) नियंत्रण हैं जिनका उपयोग एक फॉर्म के भीतर किया जा सकता है, सबसे आम है `<input>` और `<button>` एलेमेन्ट ।
-
-`<input>` के विभिन्न [प्रकार](https://developer.mozilla.org/docs/Web/HTML/Element/input) के कई उदाहरण हैं, उदाहरण के लिए एक फ़ील्ड बनाने के लिए जहां उपयोगकर्ता आप उपयोग कर सकते हैं इसके उपयोगकर्ता नाम दर्ज कर सकते हैं:
-
-```html
-<input id="username" name="username" type="text">
-```
-
-जब फॉर्म डेटा को भेज दिया जाएगा तो `name` विशेषता को संपत्ति के नाम के रूप में उपयोग किया जाएगा। `id` विशेषता का उपयोग फॉर्म नियंत्रण के साथ एक `label` को जोड़ने के लिए किया जाता है।
-
-> 
-एक विचार पाने के लिए [`<input>` प्रकार](https://developer.mozilla.org/docs/Web/HTML/Element/input) और [अन्य फोरम कोन्टरोल्स](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) की संपूर्ण सूची पर एक नज़र डालें अपने UI का निर्माण करते समय आप उपयोग कर सकते हैं सभी देशी UI तत्व।
-
-✅ ध्यान दें कि `<input>` एक [खाली एलेमेन्ट](https://developer.mozilla.org/docs/Glossary/Empty_element) है, जिस पर आपको एक मिलान समापन टैग नहीं जोड़ना चाहिए। हालाँकि आप स्व-समापन `<input/>` संकेतन का उपयोग कर सकते हैं, लेकिन इसकी आवश्यकता नहीं है।
-
-फॉर्म के भीतर `<button>` एलेमेन्ट थोड़ा विशेष है। यदि आप इसकी `type` विशेषता निर्दिष्ट नहीं करते हैं, तो यह स्वचालित रूप से दबाए जाने पर सर्वर को फॉर्म डेटा प्रस्तुत करेगा। यहां संभावित `type` मान दिए गए हैं:
-
-- `submit`: एक `form` के भीतर डिफ़ॉल्ट, बटन फार्म सबमिट एक्शन को ट्रिगर करता है।
-- `reset`: बटन उनके प्रारंभिक मूल्यों पर सभी फॉर्म नियंत्रणों को रीसेट करता है।
-- `button`: बटन दबाए जाने पर डिफ़ॉल्ट व्यवहार न निर्दिष्ट करें। फिर आप जावास्क्रिप्ट का उपयोग करके इसे कस्टम एक्शन दे सकते हैं।
-
-### टास्क
-
-आइए `login` टेम्प्लेट में एक फ़ॉर्म जोड़कर शुरू करें। हमें एक *उपयोगकर्ता नाम* फ़ील्ड और एक *लॉगिन* बटन की आवश्यकता होगी।
-
-```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>
-```
-
-यदि आप एक करीब से देखते हैं, तो आप देख सकते हैं कि हमने यहां एक `<label>` एलेमेन्ट भी जोड़ा है। `<label>` एलेमेन्टस का उपयोग UI नियंत्रणों में एक नाम जोड़ने के लिए किया जाता है, जैसे कि हमारा उपयोगकर्ता नाम फ़ील्ड। लेबल आपके रूपों की पठनीयता के लिए महत्वपूर्ण हैं, लेकिन अतिरिक्त लाभ के साथ भी आते हैं:
-
-- एक लेबल को फोरम कोन्टरोल्स से जोड़कर, यह उपयोगकर्ताओं को सहायक तकनीकों (जैसे कि स्क्रीन रीडर) का उपयोग करके यह समझने में मदद करता है कि उन्हें क्या डेटा प्रदान करने की उम्मीद है।
-- आप संबंधित इनपुट पर सीधे ध्यान केंद्रित करने के लिए लेबल पर क्लिक कर सकते हैं, जिससे टच-स्क्रीन आधारित उपकरणों तक पहुंचना आसान हो जाता है।
-
-> वेब पर [एक्सेसिबिलिटी](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) एक बहुत ही महत्वपूर्ण विषय है जिसकी अक्सर अनदेखी की जाती है। [अर्थ संबंधी HTML एलेमेन्टस](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) के लिए धन्यवाद यदि आप इन्हें ठीक से उपयोग करते हैं तो सुलभ सामग्री बनाना मुश्किल नहीं है। सामान्य गलतियों से बचने और एक जिम्मेदार डेवलपर बनने के लिए आप (पहुंच के बारे में और अधिक पढ़ सकते हैं](https://developer.mozilla.org/docs/Web/Accessibility)।
-
-अब हम पंजीकरण के लिए दूसरा रूप जोड़ेंगे, पिछले एक के नीचे:
-
-```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>
-```
-
-`value` विशेषता का उपयोग करके हम दिए गए इनपुट के लिए एक डिफ़ॉल्ट मान को परिभाषित कर सकते हैं।
-सूचना यह भी है कि `balance` के इनपुट में `number` प्रकार है। क्या यह अन्य इनपुटों की तुलना में अलग दिखता है? इसके साथ बातचीत करने का प्रयास करें।
-
-✅ क्या आप केवल कीबोर्ड का उपयोग करके फ़ॉर्म के साथ नेविगेट और इंटरैक्ट कर सकते हैं? आप वह कैसे करेंगें?
-
-## सर्वर पर डेटा जमा करना
-
-अब जब हमारे पास एक कार्यात्मक UI है, तो अगला चरण हमारे सर्वर पर डेटा भेजने के लिए है। चलो हमारे वर्तमान कोड का उपयोग करके एक त्वरित परीक्षण करें: यदि आप *लॉगिन* या *रजिस्टर* बटन पर क्लिक करते हैं तो क्या होता है?
-
-क्या आपने अपने ब्राउज़र के URL अनुभाग में परिवर्तन को देखा है?
-
-![रजिस्टर बटन पर क्लिक करने के बाद ब्राउज़र के URL का स्क्रीनशॉट बदल जाता है](../images/click-register.png)
-
-`<form>` के लिए डिफ़ॉल्ट क्रिया [GET मेथड](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html##ecec9.3) का उपयोग करके वर्तमान सर्वर URL को फ़ॉर्म सबमिट करना है , फॉर्म डेटा को सीधे URL में जोड़ना। इस विधि में कुछ कमियाँ हैं:
-
-- भेजा गया डेटा आकार में बहुत सीमित है (लगभग 2000 वर्ण)
-- डेटा सीधे URL में दिखाई देता है (पासवर्ड के लिए महान नहीं)
-- यह फ़ाइल अपलोड के साथ काम नहीं करता है
-
-इसीलिए आप इसे [POST विधि](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) का उपयोग करने के लिए बदल सकते हैं, जो शरीर में सर्वर को फॉर्म डेटा भेजता है HTTP अनुरोध, पिछली सीमाओं के बिना।
-
-> जबकि POST डेटा को भेजने के लिए सबसे आम तौर पर उपयोग की जाने वाली विधि है, [कुछ विशिष्ट परिदृश्यों में](https://www.w3.org/2001/tag/doc/whenToUseGet.html) यह GET विधि का उपयोग करने के लिए बेहतर है, जब उदाहरण के लिए खोज क्षेत्र लागू करना।
-
-### टास्क
-
-पंजीकरण फॉर्म में `action` और `method` गुण जोड़ें:
-
-```html
-<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
-```
-
-अब अपने नाम के साथ एक नया खाता पंजीकृत करने का प्रयास करें। * रजिस्टर * बटन पर क्लिक करने के बाद आपको कुछ इस तरह से देखना चाहिए:
-
-![उपयोगकर्ता के डेटा के साथ एक JSON स्ट्रिंग दिखाते हुए, पता localhost:5000/api/accounts पर एक ब्राउज़र विंडो](../images/form-post.png)
-
-यदि सब कुछ ठीक हो जाता है, तो सर्वर को आपके अनुरोध का जवाब एक [JSON](https://www.json.org/json-en.html) प्रतिक्रिया के साथ देना चाहिए जिसमें खाता डेटा बनाया गया था।
-
-✅ एक ही नाम के साथ फिर से पंजीकरण करने का प्रयास करें। क्या होता है?
-
-## पृष्ठ को फिर से लोड किए बिना डेटा सबमिट करना
-
-जैसा कि आपने शायद देखा है, हमारे द्वारा अभी उपयोग किए गए दृष्टिकोण के साथ एक मामूली समस्या है: फॉर्म जमा करते समय, हम अपने ऐप से बाहर निकलते हैं और ब्राउज़र सर्वर URL पर रीडायरेक्ट करता है। हम अपने वेब ऐप के साथ सभी पेज रीलोड से बचने की कोशिश कर रहे हैं, क्योंकि हम एक [सिंगल-पेज एप्लिकेशन (SPA)](https://en.wikipedia.org/wiki/Single-page_application) हैं।
-
-पृष्ठ पुनः लोड किए बिना सर्वर को फ़ॉर्म डेटा भेजने के लिए, हमें जावास्क्रिप्ट कोड का उपयोग करना होगा। एक `<form>` तत्व की `action` प्रॉपर्टी में एक यूआरएल डालने के बजाय, आप कस्टम क्रिया करने के लिए `javascript` स्ट्रिंग द्वारा प्रचलित किसी भी जावास्क्रिप्ट कोड का उपयोग कर सकते हैं। इसका उपयोग करने का अर्थ यह भी है कि आपको कुछ कार्यों को लागू करना होगा जो पहले ब्राउज़र द्वारा स्वचालित रूप से किए गए थे:
-
-- फॉर्म डेटा को पुनः प्राप्त करें
-- फ़ॉर्म डेटा को एक उपयुक्त प्रारूप में कनवर्ट और एन्कोड करें
-- HTTP रिक्वेस्ट बनाएं और इसे सर्वर पर भेजें
-
-### टास्क
-
-पंजीकरण फॉर्म को `action` से बदलें:
-
-```html
-<form id="registerForm" action="javascript:register()">
-```
-
-`app.js` खोलें `register` नामक एक नया फ़ंक्शन जोड़ें:
-
-```js
-function register() {
-  const registerForm = document.getElementById('registerForm');
-  const formData = new FormData(registerForm);
-  const data = Object.fromEntries(formData);
-  const jsonData = JSON.stringify(data);
-}
-```
-
-यहाँ हम `getElementById()` का उपयोग कर फॉर्म एलिमेंट को पुनः प्राप्त करते हैं और फॉर्म से मान निकालने के लिए [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData/) का उपयोग करते हैं। की/वैल्यू जोड़े के एक सेट के रूप में नियंत्रण। फिर हम [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Object/Object/fromEntries) का उपयोग करके डेटा को एक नियमित ऑब्जेक्ट में परिवर्तित करते हैं और अंत में डेटा को [JSON](https://www.json.org/json-en.html) में क्रमबद्ध करते हैं, आमतौर पर वेब पर डेटा के आदान-प्रदान के लिए उपयोग किया जाने वाला प्रारूप।
-
-डेटा अब सर्वर पर भेजे जाने के लिए तैयार है। `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' };
-  }
-}
-```
-
-यह क्या कार्य कर रहा है? सबसे पहले, यहां `async` कीवर्ड देखें। इसका मतलब है कि फ़ंक्शन में कोड शामिल है जो [**asynchronously**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function) को निष्पादित करेगा। जब `await` कीवर्ड का उपयोग किया जाता है, तो यह एसिंक्रोनस कोड को निष्पादित करने के लिए प्रतीक्षा करने की अनुमति देता है - जैसे सर्वर प्रतिक्रिया का इंतजार यहां जारी रखने से पहले।
-
-यहाँ `async/await` उपयोग के बारे में एक त्वरित वीडियो है:
-
-[![परोमीसेस के प्रबंधन के लिए Async और Await](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "परोमीसेस के प्रबंधन के लिए Async और Await")
-
-> async/await के वीडियो के लिए ऊपर दी गई छवि पर क्लिक करें।
-
-हम JSON डेटा को सर्वर पर भेजने के लिए `fetch()` API का उपयोग करते हैं। इस विधि में 2 पैरामीटर हैं:
-
-- सर्वर का URL, इसलिए हमने यहां `//localhost:5000/api/accounts` वापस रखा है।
-- अनुरोध की सेटिंग। यही कारण है कि हम अनुरोध के लिए `POST` विधि निर्धारित करते हैं और `body` प्रदान करते हैं। जैसा कि हम JSON डेटा सर्वर पर भेज रहे हैं, हमें `Content-type` हेडर को `application/json` पर सेट करने की भी आवश्यकता है, इसलिए सर्वर को पता है कि सामग्री की व्याख्या कैसे करें।
-
-जैसा कि सर्वर JSON के साथ अनुरोध का जवाब देगा, हम JSON सामग्री को पार्स करने के लिए `await response.json()` का उपयोग कर सकते हैं और परिणामी वस्तु वापस कर सकते हैं। ध्यान दें कि यह विधि अतुल्यकालिक है, इसलिए हम यह सुनिश्चित करने के लिए कि प्रतीक्षा के दौरान किसी भी त्रुटि को भी पकड़ा जाता है, लौटने से पहले हम यहाँ `await` कीवर्ड का उपयोग करते हैं।
-
-अब `createAccount()` कहने के लिए `register` फ़ंक्शन में कुछ कोड जोड़ें:
-
-```js
-const result = await createAccount(jsonData);
-```
-
-चूँकि हम यहाँ `await` कीवर्ड का उपयोग करते हैं, हमें रजिस्टर फंक्शन से पहले `async` कीवर्ड जोड़ना होगा:
-
-```js
-async function register() {
-```
-
-अंत में, परिणाम को जांचने के लिए कुछ लॉग जोड़ें। अंतिम कार्य इस तरह दिखना चाहिए:
-
-```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 occured:', result.error);
-  }
-
-  console.log('Account created!', result);
-}
-```
-
-वह थोड़ा लंबा था लेकिन हम वहां पहुंच गए! यदि आप अपने [ब्राउज़र डेवलपर टूल] (https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) खोलते हैं, और एक नया खाता आज़माते हैं, तो आपको वेब पेज पर कोई बदलाव नहीं देखना चाहिए लेकिन एक संदेश कंसोल में दिखाई देगा जो पुष्टि करता है कि सब कुछ काम करता है।
-
-![ब्राउज़र कंसोल में लॉग संदेश दिखाते हुए स्क्रीनशॉट](../images/browser-console.png)
-
-✅ क्या आपको लगता है कि डेटा सर्वर पर सुरक्षित रूप से भेजा जाता है? क्या होगा यदि कोई व्यक्ति अनुरोध को बाधित करने में सक्षम था? सुरक्षित डेटा संचार के बारे में अधिक जानने के लिए आप [HTTPS](https://en.wikipedia.org/wiki/HTTPS) के बारे में पढ़ सकते हैं।
-
-## डेटा मान्य
-
-यदि आप पहले उपयोगकर्ता नाम सेट किए बिना एक नया खाता पंजीकृत करने का प्रयास करते हैं, तो आप देख सकते हैं कि सर्वर स्थिति कोड [400 (खराब अनुरोध)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).) के साथ एक त्रुटि देता है
-
-किसी सर्वर पर डेटा भेजने से पहले, जब संभव हो, एक वैध अनुरोध भेजना सुनिश्चित करने के लिए पहले से [फॉर्म डेटा को मान्य करें](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) यह एक अच्छा अभ्यास है। HTML5 फॉर्म नियंत्रण विभिन्न विशेषताओं का उपयोग करके अंतर्निहित मान्यता प्रदान करता है:
-
-- `required`: फ़ील्ड को भरने की आवश्यकता है अन्यथा फॉर्म जमा नहीं किया जा सकता है।
-- `minlength` और `maxlength`: टेक्स्ट क्षेत्रों में न्यूनतम और अधिकतम वर्णों को परिभाषित करता है।
-- `min` और `max`:एक संख्यात्मक क्षेत्र के न्यूनतम और अधिकतम मूल्य को परिभाषित करता है।
-- `type`: अपेक्षित डेटा के प्रकार को परिभाषित करता है, जैसे `number`, `email`, `file` या [अन्य निर्मित प्रकार](https://developer.mozilla.org/docs/Web/HTML/Element/input). यह विशेषता फॉर्म नियंत्रण के दृश्य रेंडरिंग को भी बदल सकती है.
-- `pattern`: एक [रेगुलर इक्स्प्रेशन](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) पैटर्न को निर्धारित करने के लिए परीक्षण करने की अनुमति देता है कि दर्ज किया गया डेटा वैध है या नहीं।
-
-> युक्ति: यदि आप मान्य हैं और `:valid` और `:invalid` CSS छद्म-क्लेसे का उपयोग नहीं कर रहे हैं, तो आप अपने फ़ॉर्म नियंत्रणों को अनुकूलित कर सकते हैं।s.
-
-### टास्क
-
-वैध नया खाता बनाने के लिए 2 आवश्यक फ़ील्ड हैं, उपयोगकर्ता नाम और मुद्रा, अन्य फ़ील्ड वैकल्पिक हैं। फॉर्म के HTML को अपडेट करें, फ़ील्ड के लेबल में `required` विशेषता और टेक्स्ट दोनों का उपयोग करके:
-
-```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>
-```
-
-हालांकि यह विशेष सर्वर कार्यान्वयन अधिकतम लंबाई वाले क्षेत्रों पर विशिष्ट सीमाएँ लागू नहीं करता है, यह किसी भी उपयोगकर्ता पाठ प्रविष्टि के लिए उचित सीमा को परिभाषित करने के लिए हमेशा एक अच्छा अभ्यास है।
-
-टेक्स्ट फ़ील्ड में एक `maxlength` विशेषता जोड़ें:
-
-```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">
-```
-
-अब यदि आप *रजिस्टर* बटन दबाते हैं और एक फ़ील्ड हमारे द्वारा परिभाषित सत्यापन नियम का सम्मान नहीं करता है, तो आपको कुछ इस तरह से देखना चाहिए:
-
-![फॉर्म जमा करने का प्रयास करते समय सत्यापन त्रुटि दिखाते हुए स्क्रीनशॉट](../images/validation-error.png)
-
-इस तरह के सत्यापन *से पहले* किसी भी डेटा को सर्वर पर भेजने के लिए **क्लाइंट-साइड** सत्यापन कहा जाता है। लेकिन ध्यान दें कि डेटा भेजे बिना हमेशा सभी जांचों को बेहतर बनाना संभव नहीं है। उदाहरण के लिए, यदि सर्वर पर रिक्वेस्ट भेजे बिना एक ही यूज़रनेम के साथ कोई खाता पहले से मौजूद है तो हम यहाँ जाँच नहीं कर सकते। सर्वर पर निष्पादित अतिरिक्त सत्यापन को **सर्वर-साइड** सत्यापन कहा जाता है।
-
-आमतौर पर दोनों को लागू करने की आवश्यकता होती है, और क्लाइंट-साइड सत्यापन का उपयोग करते समय उपयोगकर्ता को त्वरित प्रतिक्रिया प्रदान करके उपयोगकर्ता के अनुभव को बेहतर बनाता है, यह सुनिश्चित करने के लिए सर्वर-साइड सत्यापन महत्वपूर्ण है कि जिस उपयोगकर्ता डेटा में आप हेरफेर करते हैं वह ध्वनि और सुरक्षित है।
-
----
-
-## 🚀 चुनौती
-
-यदि उपयोगकर्ता पहले से मौजूद है, तो HTML में एक त्रुटि संदेश दिखाएं।
-
-यहाँ एक उदाहरण दिया गया है कि अंतिम लॉगिन पृष्ठ स्टाइल के थोड़े समय बाद कैसा दिख सकता है:
-
-![CSS स्टाइल जोड़ने के बाद लॉगिन पेज का स्क्रीनशॉट](../images/result.png)
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44?loc=hi)
-
-## समीक्षा और स्व अध्ययन
-
-डेवलपर्स ने अपने फॉर्म निर्माण प्रयासों के बारे में, विशेष रूप से सत्यापन रणनीतियों के बारे में बहुत रचनात्मक जानकारी प्राप्त की है। [CodePen](https://codepen.com) के माध्यम से देख कर विभिन्न प्रकार के प्रवाह के बारे में जानें; क्या आप कुछ दिलचस्प और प्रेरक रूप पा सकते हैं?
-
-## असाइनमेंट
-
-[अपने बैंक ऐप को स्टाइल करें](assignment.hi.md)
diff --git a/7-bank-project/2-forms/translations/README.it.md b/7-bank-project/2-forms/translations/README.it.md
deleted file mode 100644
index cc3e787a..00000000
--- a/7-bank-project/2-forms/translations/README.it.md
+++ /dev/null
@@ -1,293 +0,0 @@
-# Creazione di un'App Bancaria Parte 2: Creazione di un form di accesso e registrazione
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43?loc=it)
-
-### Introduzione
-
-In quasi tutte le moderne app web, si può  creare un account per avere il proprio spazio privato. Poiché più utenti possono accedere a un'app web contemporaneamente, è necessario un meccanismo per archiviare i dati personali di ciascun utente separatamente e selezionare le informazioni da visualizzare. Non verrà trattato come gestire [l'identità dell'utente in modo sicuro](https://it.wikipedia.org/wiki/Autenticazione) poiché si tratta di un argomento ampio di per sé, ma ci si assicurerà che ogni utente sia in grado di creare uno (o più) conto bancario nella app.
-
-In questa parte si utilizzeranno form HTML per aggiungere login e registrazione all'app. Si vedrà come inviare i dati a un'API del server a livello di programmazione e, infine, come definire le regole di convalida di base per gli input dell'utente.
-
-### Prerequisito
-
-È necessario aver completato i [modelli HTML e il routing](../../1-template-route/translations/README.it.md) dell'app web per questa lezione. È inoltre necessario installare [Node.js](https://nodejs.org) ed  [eseguirel'API del server](../../api/README.md) in locale in modo da poter inviare dati per creare account.
-
-Si può verificare che il server funzioni correttamente eseguendo questo comando in un terminale:
-
-```sh
-curl http://localhost:5000/api
-# -> dovrebbe restituire "Bank API v1.0.0" come risultato
-```
-
----
-
-## Form e controlli
-
-L'elemento  `<form>` incapsula una sezione di un documento HTML in cui l'utente può inserire e inviare dati con controlli interattivi. Esistono tutti i tipi di controlli dell'interfaccia utente (UI) che possono essere utilizzati all'interno di un form, i più comuni sono gli elementi `<input>` e `<button>`.
-
-Esistono molti [tipi](https://developer.mozilla.org/docs/Web/HTML/Element/input) diversi di `<input>`, ad esempio per creare un campo in cui l'utente può inserire il proprio nome utente si può  utilizzare:
-
-```html
-<input id="username" name="username" type="text">
-```
-
-L'attributo `name` verrà utilizzato come nome della proprietà quando verranno inviati i dati del form. L'attributo `id` viene utilizzato per associare un'etichetta (`<label>`) al relativo controllo nel form.
-
-> Si dia un'occhiata all'intero elenco di  [tipi di `<input>`](https://developer.mozilla.org/docs/Web/HTML/Element/input) e [altri controlli del form](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) per avere un'idea di tutti gli elementi nativi dell'interfaccia utente che si possono utilizzare durante la creazione della propria interfaccia utente.
-
-✅ Si noti che  `<input>` è un [elemento vuoto](https://developer.mozilla.org/docs/Glossary/Empty_element) su cui *non* si dovrebbe aggiungere un tag di chiusura corrispondente. È comunque possibile utilizzare la notazione a chiusura automatica  `<input/>` , ma non è richiesta.
-
-L'elemento `<button>` all'interno di un form è un po' speciale. Se non si specifica il suo attributo di tipo (`type`) , invierà automaticamente i dati del form al server quando viene premuto. Ecco i possibili valori di `type` :
-
-- `submit`: l'impostazione predefinita all'interno di un `<form>`, il pulsante attiva l'azione di invio del form.
-- `reset`: il pulsante ripristina tutti i controlli del form ai valori iniziali.
-- `button`: non assegna un comportamento predefinito quando viene premuto il pulsante. È quindi possibile assegnargli azioni personalizzate utilizzando JavaScript.
-
-### Attività
-
-Si comincia aggiungendo un form al modello di accesso `login` . Servirà di un campo *username* per il nome utente e di un pulsante *Login* .
-
-```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>
-```
-
-Se si guarda più attentamente, si può notare che è stato aggiunto anche un elemento `<label>` (etichetta). Gli elementi `<label>` vengono utilizzati per aggiungere un nome ai controlli dell'interfaccia utente, come il campo username. Le etichette sono importanti per la leggibilità dei form, ma offrono anche vantaggi aggiuntivi:
-
-- Associaer un'etichetta a un controllo in un form, aiuta gli utenti che utilizzano tecnologie assistite (come unlettore di schremo) a capire quali dati dovrebbero fornire.
-- È possibile fare clic sull'etichetta per portare direttamente il focus sull'input associato, rendendolo più facile da raggiungere su dispositivi basati su touch screen.
-
-> [L'accessibilità](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) sul Web è un argomento molto importante che spesso viene trascurato. Grazie agli [elementi HTML semantici](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) non è difficile creare contenuti accessibili se usati correttamente. Si può [leggere di più sull'accessibilità](https://developer.mozilla.org/docs/Web/Accessibility) per evitare errori comuni e diventare uno sviluppatore responsabile.
-
-Ora si aggiungerà un secondo modulo per la registrazione, appena sotto il precedente:
-
-```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>
-```
-
-Utilizzando l'attributo `value` si può impostare un valore predefinito per un dato input. Si noti inoltre che l'input per il saldo(`balance`) ha il tipo `number` (numero). Sembra diverso dagli altri input? Provare a interagire con esso.
-
-✅ Si può  navigare e interagire con i form utilizzando solo una tastiera? E come si pensa di fare?
-
-## Invio dei dati al server
-
-Ora che si ha un'interfaccia utente funzionale, il passaggio successivo è inviare i dati al server. Fare un rapido test utilizzando il codice attuale: cosa succede se si fa clic sul pulsante *Login* o *Register* ?
-
-Si è notato il cambiamento nella sezione URL del proprio browser?
-
-![Videata della modifica dell'URL del browser dopo aver fatto clic sul pulsante Registra](../images/click-register.png)
-
-L'azione predefinita per un `<form>` consiste nell'inviare il form all'URL del server corrente utilizzando il [metodo GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3), aggiungendo i dati del modulo direttamente all'URL. Questo metodo presenta però alcuni difetti:
-
-- I dati inviati sono di dimensioni molto limitate (circa 2000 caratteri)
-- I dati sono direttamente visibili nell'URL (non eccezionale per le password)
-- Non funziona con i caricamenti di file
-
-Ecco perché si può cambiare e utilizzare il [metodo POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) che invia i dati del modulo al server nel corpo della richiesta HTTP, senza nessuna delle limitazioni precedenti.
-
-> Sebbene POST sia il metodo più comunemente utilizzato per inviare i dati, [in alcuni scenari specifici](https://www.w3.org/2001/tag/doc/whenToUseGet.html) è preferibile utilizzare il metodo GET, ad esempio quando si implementa un campo di ricerca.
-
-### Attività
-
-Aggiungere le proprietà `action` e `method` al form di registrazione:
-
-```html
-<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
-```
-
-Provare ora a registrare un nuovo account con il proprio nome. Dopo aver fatto clic sul pulsante *Register* si dovrebbe vedere qualcosa del genere:
-
-![Una finestra del browser all'indirizzo localhost:5000/api/ accounts, che mostra una stringa JSON con i dati dell'utente](../images/form-post.png)
-
-Se tutto va bene, il server dovrebbe rispondere alla richiesta con una risposta [JSON](https://www.json.org/json-en.html) contenente i dati dell'account che è stato creato.
-
-✅ Provare una nuova registrazione con lo stesso nome. Che cosa accade?
-
-## Invio di dati senza ricaricare la pagina
-
-Come probabilmente si è notato, c'è un piccolo problema con l'approccio appena usato: quando si invia il modulo, si esce dalla propria app e il browser reindirizza all'URL del server. Si sta cercando qui di evitare tutti i ricaricamenti delle pagine con quest app web, poiché si sta creando un'[applicazione a pagina singola (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
-
-Per inviare i dati del modulo al server senza forzare il ricaricamento di una pagina, si deve utilizzare il codice JavaScript. Invece di inserire un URL nella proprietà `action` di un  `<form>`, si può  utilizzare qualsiasi codice JavaScript anteposto dalla stringa `javascript:` per eseguire un'azione personalizzata. Usarlo significa anche che si dovranno implementare alcune attività che erano state precedentemente eseguite automaticamente dal browser:
-
-- Recuperare i dati del form
-- Convertire e codificare i dati del form in un formato adatto
-- Creare la richiesta HTTP e inviarla al server
-
-### Attività
-
-Sostituire `action` nel form di registrazione con:
-
-```html
-<form id="registerForm" action="javascript:register()">
-```
-
-Aprire `app.js` aggiungere una nuova funzione denominata `register`:
-
-```js
-function register() {
-  const registerForm = document.getElementById('registerForm');
-  const formData = new FormData(registerForm);
-  const data = Object.fromEntries(formData);
-  const jsonData = JSON.stringify(data);
-}
-```
-
-Qui si recupera l'elemento form utilizzando `getElementById()` e si utilizza il [metodo di supporto FormData](https://developer.mozilla.org/docs/Web/API/FormData)  per estrarre i valori dai controlli del forma come un insieme di coppie chiave/valore. Quindi si convertono i dati in un oggetto normale utilizzando [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) e infine si serializzano i dati in [JSON](https://www.json.org/json-en.html), un formato comunemente utilizzato per lo scambio di dati sul web.
-
-I dati sono ora pronti per essere inviati al server. Creare una nuova funzione denominata `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' };
-  }
-}
-```
-
-Cosa fa questa funzione? Per prima cosa notare la  parola chiave `async`. Ciò significa che la funzione contiene codice che verrà eseguito [**in modo asincrono**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Quando viene utilizzato insieme alla parola chiave `await`, consente di attendere l'esecuzione del codice asincrono, come l'attesa della risposta del server qui, prima di continuare.
-
-Ecco un breve video sull'utilizzo di `async/await`:
-
-[![Async e Await per la](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk " gestione di promesse")
-
-> Fare clic sull'immagine sopra per un video su async/await.
-
-Si usa l'API `fetch()` per inviare dati JSON al server. Questo metodo richiede 2 parametri:
-
-- L'URL del server, quindi rimettere `//localhost:5000/api/accounts` qui.
-- Le impostazioni della richiesta. È qui che si imposta il metodo su `POST` e si fornisce il corpo (`body`) della richiesta. Dato che si inviano dati JSON al server, si deve anche impostare l'intestazione `Content-Type` su `application/json` in modo che il server sappia come interpretare il contenuto.
-
-Poiché il server risponderà alla richiesta con JSON, si può  utilizzare `await response.json()` per analizzare il contenuto JSON e restituire l'oggetto risultante. Notare che questo metodo è asincrono, quindi si usa la parola chiave `await` qui prima di tornare per assicurarsi che vengano rilevati anche eventuali errori durante l'analisi.
-
-Ora aggiungere del codice alla funzione di `register` per chiamare `createAccount()`:
-
-```js
-const result = await createAccount(jsonData);
-```
-
-Poiché qui si usa la parola chiave `await`, si deve aggiungere la parola chiave `async` prima della funzione di registrazione
-
-```js
-async function register() {
-```
-
-Infine, aggiungere alcuni log per verificare il risultato. La funzione finale dovrebbe essere simile a questa:
-
-```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 occured:', result.error);
-  }
-
-  console.log('Account created!', result);
-}
-```
-
-È stato un po' lungo ma si è arrivati! Se si apre [strumenti di sviluppo del browser](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools) e si prava a registrare un nuovo account, non si dovrebbe  vedere alcun cambiamento nella pagina web ma apparirà un messaggio nella console che conferma che tutto funziona.
-
-![Videata che mostra il messaggio di registro nella console del browser](../images/browser-console.png)
-
-✅ Si pensa che i dati vengano inviati al server in modo sicuro? E se qualcuno fosse in grado di intercettare la richiesta? Si possono leggere informazioni su [HTTPS](https://en.wikipedia.org/wiki/HTTPS) per saperne di più sulla comunicazione sicura dei dati.
-
-## Convalida dati
-
-Se si prova a registrare un nuovo account senza prima impostare un nome utente, si può  vedere che il server restituisce un errore con codice di stato [400 Bad Request](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).), (richiesta non valida)
-
-Prima di inviare i dati a un server è buona norma [convalidare i dati del modulo](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) in anticipo quando possibile, per assicurarsi di inviare una richiesta valida. I controlli dei form HTML5 forniscono la convalida incorporata utilizzando vari attributi:
-
-- `requested`: il campo deve essere compilato altrimenti il modulo non può essere inviato.
-- `minlength` e `maxlength`: definisce il numero minimo e massimo di caratteri nei campi di testo.
-- `min` e `max`: definisce il valore minimo e massimo di un campo numerico.
-- `type`: definisce il tipo di dati attesi, come `number`, `email`, `file` o [altri tipi incorporati](https://developer.mozilla.org/docs/Web/HTML/Element/input). Questo attributo può anche modificare il rendering visivo del form.
-- `pattern`: permette di definire un modello di [espressione regolare](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) per verificare se i dati inseriti sono validi o meno.
-
-> Suggerimento: si può  personalizzare l'aspetto dei controlli del form a seconda che siano validi o meno utilizzando le pseudo-classi CSS `:valid` e `:invalid` .
-
-### Attività
-
-Ci sono 2 campi obbligatori per creare un nuovo account valido,  nome utente (username) e la valuta (currency), gli altri campi sono opzionali. Aggiornare l'HTML del form, utilizzando sia l'attributo `required` che il testo nell'etichetta del campo in questo modo:
-
-```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>
-```
-
-Sebbene questa particolare implementazione del server non imponga limiti specifici sulla lunghezza massima dei campi, è sempre buona norma definire limiti ragionevoli per qualsiasi voce di testo inserita dell'utente.
-
-Aggiungere un attributo `maxlength` ai campi di testo:
-
-```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">
-```
-
-Ora se si preme il pulsante *Register* e un campo non rispetta una regola di convalida che è stata definita, si dovrebbe vedere qualcosa del genere:
-
-![Videata che mostra l'errore di convalida durante il tentativo di inviare il form](../images/validation-error.png)
-
-La convalida come questa eseguita *prima* di inviare qualsiasi dato al server è chiamata convalida **lato client** . Tenere presente che non è sempre possibile eseguire tutti i controlli senza inviare i dati. Ad esempio, non si può  verificare qui se esiste già un account con lo stesso nome utente senza inviare una richiesta al server. La convalida aggiuntiva eseguita sul server è denominata convalida **lato server** .
-
-Di solito devono essere implementate entrambe; mentre l'utilizzo della convalida lato client migliora l'esperienza dell'utente fornendo un feedback immediato all'utente, la convalida lato server è fondamentale per assicurarsi che i dati utente da manipolare siano validi e sicuri.
-
----
-
-## 🚀 Sfida
-
-Mostrare un messaggio di errore nell'HTML se l'utente esiste già.
-
-Ecco un esempio di come può apparire la pagina di accesso finale dopo l'applicazione di un po' di stile:
-
-![Videata della pagina di accesso dopo l'aggiunta di stili CSS](../images/result.png)
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44?loc=it)
-
-## Revisione e Auto Apprendimento
-
-Gli sviluppatori sono diventati molto creativi nei loro sforzi di costruzione di form, in particolare per quanto riguarda le strategie di convalida. Scoprire i diversi flussi di form cercando su [CodePen](https://codepen.com); si riescono a trovare dei form interessanti e stimolanti?
-
-## Compito
-
-[Dare uno stile alla propria app bancaria](assignment.it.md)
diff --git a/7-bank-project/2-forms/translations/README.ja.md b/7-bank-project/2-forms/translations/README.ja.md
deleted file mode 100644
index 507bde3a..00000000
--- a/7-bank-project/2-forms/translations/README.ja.md
+++ /dev/null
@@ -1,292 +0,0 @@
-# バンキングアプリを作ろう その 2: ログインと登録フォームの構築
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43?loc=ja)
-
-### イントロダクション
-
-最近のほとんどの Web アプリでは、アカウントを作成して自分だけのプライベート空間を持つことができます。複数のユーザーが同時に Web アプリにアクセスすることができるため、各ユーザーの個人情報を個別に保存し、どの情報を表示するかを選択する仕組みが必要になります。ここでは、[ユーザー ID を安全に管理する方法](https://en.wikipedia.org/wiki/Authentication)については、それ自体が広範なトピックなので取り上げませんが、各ユーザーがアプリ上で1つ(または複数)の銀行口座を作成できるようにしておきます。
-
-このパートでは、HTML フォームを使用して、Web アプリにログインと登録を追加します。プログラムでサーバー API にデータを送信する方法、最終的にユーザー入力の基本的な検証ルールを定義する方法を見ていきます。
-
-### 前提条件
-
-このレッスンでは、Web アプリの [HTML テンプレートとルーティング](../../1-template-route/translations/README.ja.md)が完了している必要があります。また、アカウントを作成するためのデータを送信できるように、ローカルに [Node.js](https://nodejs.org/ja) と[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。
-
-ターミナルでこのコマンドを実行することで、サーバーが正常に動作していることを確認することができます。
-
-```sh
-curl http://localhost:5000/api
-# -> 結果として "Bank API v1.0.0" を返す必要があります。
-```
-
----
-
-## フォームとコントロール
-
-`<form>` 要素は HTML ドキュメントのセクションをカプセル化し、ユーザがインタラクティブなコントロールを使ってデータを入力したり送信したりすることができます。フォームの中で利用できるユーザーインターフェイス (UI) コントロールには様々な種類がありますが、最も一般的なものは `<input>` と `<button>` 要素です。
-
-例えば、ユーザがユーザ名を入力できるフィールドを作成するには、`<input>` 要素を使用することができます。
-
-```html
-<input id="username" name="username" type="text">
-```
-
-`name` 属性はフォームデータを送信する際のプロパティ名として使われます。`id` 属性は `<label>` をフォームコントロールに関連付けるために使われます。
-
-> UI を構築する際に使用できるすべてのネイティブ UI 要素のアイデアを得るために、[`<input>` タイプ](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input) と [その他のフォームコントロール](https://developer.mozilla.org/ja/docs/Learn/Forms/Other_form_controls) のリスト全体を見てみましょう。
-
-✅ `<input>` は [空の要素](https://developer.mozilla.org/ja/docs/Glossary/Empty_element) であることに注意してください。それは一致するクロージングタグを追加すべき*ではありません*。タグ自身で閉じる `<input/>` 記法を使うことはできますが、必須ではありません。
-
-フォーム内の `<button>` 要素は少し特殊です。`type` 属性を指定しないと、ボタンが押されたときに自動的にフォームデータをサーバに送信します。以下に可能な `type` の値を示します。
-
-- `submit`: `<form>`内のデフォルトの値で、ボタンはフォームの送信アクションをトリガーします
-- `reset`: ボタンはすべてのフォームコントロールを初期値にリセットします
-- `button`: ボタンが押されたときのデフォルトの動作を割り当てないでください。その後、JavaScript を使ってカスタムアクションを割り当てることができます
-
-### タスク
-
-まずは `login` テンプレートにフォームを追加してみましょう。*ユーザ名*フィールドと*ログイン*ボタンが必要です。
-
-```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>
-```
-
-よく見ると、ここに `<label>` 要素が追加されていることがわかります。`<label>` 要素はユーザー名フィールドなどの UI コントロールに名前を追加するために使われます。ラベルはフォームを読みやすくするために重要ですが、それだけではありません。
-
-- ラベルをフォームコントロールに関連付けることで、(スクリーンリーダーのような) 支援技術を使用しているユーザーが、どのようなデータを提供することが求められているのかを理解するのに役立ちます
-- ラベルをクリックすると、関連する入力に直接フォーカスを当てることができるので、タッチスクリーンベースのデバイスでも手が届きやすくなります
-
-> ウェブ上の [アクセシビリティ](https://developer.mozilla.org/ja/docs/Learn/Accessibility/What_is_accessibility) は、見落とされがちな非常に重要なトピックです。[セマンティックな HTML 要素](https://developer.mozilla.org/ja/docs/Learn/Accessibility/HTML) のおかげで、適切に使用すれば、アクセシブルなコンテンツを作成することは難しくありません。[アクセシビリティについての詳細を読む](https://developer.mozilla.org/ja/docs/Web/Accessibility)ことで、よくある間違いを回避し、責任ある開発者になることができます。
-
-あとは、前のもののすぐ下に登録用の第二形態を追加します。
-
-```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>
-```
-
-`value` 属性を用いて、与えられた入力に対してデフォルト値を定義することができます。
-また、`balance` の入力が `number` 型であることにも注目してください。他の入力とは違うように見えますか? これを使ってみてください。
-
-✅ キーボードだけでフォームをナビゲートして対話することができますか? あなたならどうしますか?
-
-## サーバーへのデータ送信
-
-機能的な UI ができたので、次のステップはデータをサーバーに送信することです。現在のコードを使って簡単なテストをしてみましょう。*ログイン*または*登録*ボタンをクリックするとどうなりますか?
-
-ブラウザの URL セクションの変化に気付きましたか？
-
-![登録ボタンをクリックした後のブラウザのURL変更のスクリーンショット](../images/click-register.png)
-
-`<form>` のデフォルトのアクションは、フォームを現在のサーバの URL に [GET メソッド](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3) を使って送信し、フォームのデータを URL に直接追加することです。この方法にはいくつかの欠点があります。
-
-- 送信されるデータのサイズが非常に限られています (2000 文字程度)
-- データは URL で直接見ることができます (パスワードには向いていません)
-- ファイルのアップロードでは動作しません
-
-そのため、これまでの制限を受けずに、HTTP リクエストの本文でフォームデータをサーバに送信する [POST メソッド](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)を利用するように変更することができます。
-
-> POST はデータを送信するために最も一般的に使用される方法ですが、[いくつかの特定のシナリオ](https://www.w3.org/2001/tag/doc/whenToUseGet.html)では、例えば検索フィールドを実装する場合には、GET メソッドを使用することが望ましいです。
-
-### タスク
-
-登録フォームに `action` と `method` プロパティを追加します。
-
-```html
-<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
-```
-
-ここで、あなたの名前で新しいアカウントを登録してみてください。*登録*ボタンをクリックすると、このような画面が表示されるはずです。
-
-![アドレス localhost:5000/api/accounts のブラウザウィンドウで、ユーザーデータを含む JSON 文字列を表示しています。](./images/form-post.png)
-
-すべてがうまくいけば、サーバーはあなたのリクエストに、作成されたアカウントデータを含む [JSON](https://www.json.org/json-ja.html) レスポンスを返すはずです。
-
-✅ 同じ名前で再度登録してみてください。どうなるでしょうか?
-
-## ページを再読み込みせずにデータを送信する
-
-お気づきのように、先ほど使用したアプローチに若干の問題があります。フォームを送信するときです。これが発生するとアプリを終了し、ブラウザはサーバーの URL にリダイレクトします。[シングルページアプリケーション(SPA)](https://en.wikipedia.org/wiki/Single-page_application) を作成しているので、ウェブアプリですべてのページのリロードを回避しようとしています。
-
-ページのリロードを強制せずにフォームデータをサーバに送信するには、JavaScript のコードを使用しなければなりません。`<form>` 要素の `action` プロパティに URL を記述する代わりに、カスタムアクションを実行するために `javascript:` 文字列の前に任意の JavaScript コードを使用することができます。これを使うと、これまでブラウザが自動的に行っていたタスクを実装しなければならないことになります。
-
-- フォームデータを取得する
-- フォームデータを適切なフォーマットに変換してエンコードする
-- HTTPリクエストを作成してサーバーに送信する
-
-### タスク
-
-登録フォームの `action` は、次のように置き換えてください。
-
-```html
-<form id="registerForm" action="javascript:register()">
-```
-
-`app.js`を開いて `register` という名前の関数を追加します。
-
-```js
-function register() {
-  const registerForm = document.getElementById('registerForm');
-  const formData = new FormData(registerForm);
-  const data = Object.fromEntries(formData);
-  const jsonData = JSON.stringify(data);
-}
-```
-
-ここでは、`getElementById()`を使ってフォーム要素を取得し、[`FormData`](https://developer.mozilla.org/ja/docs/Web/API/FormData) ヘルパーを使ってフォームコントロールからキーと値のペアのセットとして値を抽出します。次に、[`Object.fromEntries()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) を使用してデータを通常のオブジェクトに変換し、最後に Web 上でデータを交換するために一般的に使用されるフォーマットである [JSON](https://www.json.org/json-ja.html) にデータをシリアライズします。
-
-これで、データをサーバに送信する準備ができました。`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' };
-  }
-}
-```
-
-この関数は何をしているのでしょうか？まず、ここでの `async` キーワードに注目してください。これは、この関数が [**非同期的に**](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function) を実行するコードを含んでいることを意味します。await` キーワードと一緒に使用すると、非同期コードが実行されるのを待つことができます。
-
-以下に、`async/await` の使用法についての簡単なビデオを示します。
-
-[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
-
-JSON データをサーバに送信するには、`fetch()` API を使用します。このメソッドは2つのパラメータを受け取ります。
-
-- サーバの URL なので、ここに `/localhost:5000/api/accounts` を返します
-- リクエストの設定。ここでメソッドを `POST` に設定し、リクエストのための `body` を提供します。JSON データをサーバに送るので、`Content-Type` ヘッダを `application/json` に設定する必要があります
-
-サーバはリクエストに対して JSON で応答するので、`await response.json()` を使って JSON の内容を解析し、結果のオブジェクトを返すことができます。このメソッドは非同期なので、返す前に `await` キーワードを使って、解析中のエラーが発生した場合にはそれもキャッチするようにしています。
-
-次に、`register` 関数にコードを追加して `createAccount()` を呼び出すようにします。
-
-```js
-const result = await createAccount(jsonData);
-```
-
-ここでは `await` キーワードを使用しているので、レジスタ関数の前に `async` キーワードを追加する必要があります。
-
-```js
-async function register() {
-```
-
-最後に、結果を確認するためのログを追加してみましょう。最終的な関数は以下のようになるはずです。
-
-```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 occured:', result.error);
-  }
-
-  console.log('Account created!', result);
-}
-```
-
-ちょっと長かったですが、無事にたどり着きました! [ブラウザの開発者ツール](https://developer.mozilla.org/ja/docs/Learn/Common_questions/What_are_browser_developer_tools)を開いて、新しいアカウントを登録してみると、Web ページには何も変化がないはずなのですが、コンソールにはすべてが正常に動作することを確認するメッセージが表示されます。
-
-![ブラウザコンソールにログメッセージを表示するスクリーンショット](../images/browser-console.png)
-
-✅ データは安全にサーバーに送られていると思いますか? もし何者かにリクエストを傍受されたらどうしますか? 安全なデータ通信については、[HTTPS](https://ja.wikipedia.org/wiki/HTTPS) を読むとより詳しく知ることができます。
-
-## データの検証
-
-最初にユーザー名を設定せずに新規アカウントを登録しようとすると、サーバーがステータスコード [400 (Bad Request)](https://developer.mozilla.org/ja/docs/Web/HTTP/Status/400) でエラーを返していることがわかります。
-
-サーバーにデータを送信する前に、可能な限り事前に [フォームデータの検証](https://developer.mozilla.org/ja/docs/Learn/Forms/Form_validation) を行い、有効なリクエストを送信していることを確認するのが良い方法です。HTML5 フォームコントロールは、様々な属性を使った組み込みのバリデーションを提供しています。
-
-- `required`: フィールドには入力する必要があります。そうでない場合は、フォームを送信することができません
-- `minlength` と `maxlength`: テキストフィールドの最小文字数と最大文字数を定義します
-- `min` と `max`: 数値フィールドの最小値と最大値を定義します
-- `type`: `number`, `email`, `file` や [その他の組み込み型](https://developer.mozilla.org/ja/docs/Web/HTML/Element/input) のような、期待されるデータの種類を定義します。この属性はフォームコントロールの視覚的なレンダリングを変更することもできます
-- `pattern`: これを使用すると、入力されたデータが有効かどうかをテストするための [正規表現](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions) パターンを定義することができます
-
-> ヒント: CSS 疑似クラス `:valid` と `:invalid` を利用して、フォームコントロールの見た目を有効か無効かによってカスタマイズすることができます。
-
-### タスク
-
-有効な新規アカウントを作成するためには、ユーザー名と通貨の2つの必須フィールドがあり、その他のフィールドは任意です。フォームの HTML を更新し、`required` 属性とフィールドのラベルのテキストの両方を使用してください。
-
-```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>
-```
-
-このサーバの実装ではフィールドの最大長に特定の制限はありませんが、ユーザのテキスト入力に対して合理的な制限を定義することは常に良い習慣です。
-
-テキストフィールドに `maxlength` 属性を追加します。
-
-```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">
-```
-
-これで、*Register* ボタンを押したときに、フィールドが定義したバリデーションルールに準拠していない場合は、次のように表示されるはずです。
-
-![フォームを送信しようとしたときの検証エラーを示すスクリーンショット](../images/validation-error.png)
-
-このように、サーバにデータを送信する前に実行されるバリデーションのことを **クライアントサイド** のバリデーションと呼びます。しかし、データを送信せずにすべてのチェックを実行できるとは限らないことに注意してください。例えば、サーバーにリクエストを送らずに、同じユーザー名のアカウントが既に存在するかどうかを確認することはできません。サーバー上で実行される追加のバリデーションは、**サーバーサイド**のバリデーションと呼ばれます。
-
-通常は両方を実装する必要があり、クライアントサイドのバリデーションを使用すると、ユーザーへのフィードバックを即座に提供することでユーザーエクスペリエンスが向上しますが、サーバーサイドのバリデーションは、操作するユーザーデータが健全で安全であることを確認するために非常に重要です。
-
----
-
-## 🚀 チャレンジ
-
-ユーザーが既に存在する場合には、エラーメッセージを HTML に表示します。
-
-ここでは、少しのスタイリングの後に最終的なログインページがどのように見えるかの例を示します。
-
-![CSSスタイルを追加した後のログインページのスクリーンショット](../images/result.png)
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44?loc=ja)
-
-## 復習と自己学習
-
-開発者は、フォーム構築の取り組み、特に検証戦略に関して、非常にクリエイティブになっています。[CodePen](https://codepen.com) を見て、さまざまなフォームの流れについて学びましょう。
-
-## 課題
-
-[銀行アプリのスタイル設定](assignment.ja.md)
diff --git a/7-bank-project/2-forms/translations/README.ko.md b/7-bank-project/2-forms/translations/README.ko.md
deleted file mode 100644
index 17e3dfb6..00000000
--- a/7-bank-project/2-forms/translations/README.ko.md
+++ /dev/null
@@ -1,290 +0,0 @@
-# 은행 앱 제작하기 파트 2: 로그인과 가입 폼 작성하기
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43?loc=ko)
-
-### 소개
-
-모든 모던 웹 앱에서 대부분은, 자신의 개인 공간을 가질 계정을 만들 수 있습니다. 여러 사용자가 동시에 웹 앱에 접근할 수 있으므로, 각자 사용자의 개인 데이터를 별도로 저장하고 어느 정보를 보여줄 지에 대하여 선택하는 메커니즘이 필요합니다. 자체적으로 광범위한 주제이므로 [user identity securely](https://en.wikipedia.org/wiki/Authentication) 관리하는 방법은 다루지 않지만, 각자가 앱에서 하나 (이상)의 은행 계좌를 만들 수 있는지 확인합니다.
-
-이 파트에서는 HTML 폼으로 웹 앱에 로그인과 가입을 추가합니다. 프로그래밍 방식으로 데이터를 서버 API에 보내는 방법과, 최종적으로 사용자 입력에 대한 기본 유효성 검사 규칙을 정의하는 방법에 대해 보겠습니다.
-
-### 준비물
-
-이 강의를 위해 웹 앱의 [HTML templates and routing](../../1-template-route/translations/README.ko.md)을 완료해야합니다. 또한 [Node.js](https://nodejs.org)와 [run the server API](../../api/README.md)를 로컬에 설치해야 계정을 만들 데이터를 보낼 수 있습니다.
-
-터미널에서 다음 명령을 실행하여 서버가 잘 실행되고 있는지 테스트할 수 있습니다:
-
-```sh
-curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
-```
-
----
-
-## 폼과 컨트롤
-
-`<form>` 요소는 사용자가 대화형 컨트롤을 사용하여 데이터를 입력하고 제출할 수 있는 HTML 문서의 섹션을 캡슐화합니다. 폼 내에서 쓸 수 있는 모든 종류의 사용자 인터페이스(UI) 컨트롤이 있으며, 가장 일반적인 컨트롤은 `<input>`과 `<button>` 요소입니다.
-
-`<input>`에는 다양한 [types](https://developer.mozilla.org/docs/Web/HTML/Element/input)이 많이 있습니다, 예를 들어 사용자 이름으로 입력 가능한 필드를 만들려면 다음과 같이 사용할 수 있습니다:
-
-```html
-<input name="username" type="text">
-```
-
-`name` 속성은 컨트롤을 식별하는 데 사용되고 폼 데이터를 전송할 때 속성 이름으로 사용됩니다.
-
-> UI를 작성할 때 쓸 수 있는 모든 네이티브 UI 요소에 대한 아이디어를 얻으려면 [`<input>` types](https://developer.mozilla.org/docs/Web/HTML/Element/input)과 [other form controls](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls)의 전체 목록을 찾아봅시다.
-
-✅ `<input>`은 닫는 태그를 맞추지 *않는* [empty element](https://developer.mozilla.org/docs/Glossary/Empty_element)입니다. 자동으로-닫는 `<input/>` 표기법을 사용할 수 있지만, 필수는 아닙니다.
-
-폼 내의 `<button>` 요소는 약간 특별합니다. `type` 속성을 지정하지 않으면, 눌렀을 때 폼 데이터가 자동으로 서버에 제출됩니다. 가능한 `type` 값은 다음과 같습니다:
-
-- `submit`: `<form>`내의 기본값이며, 버튼은 폼 제출 작업으로 연결합니다.
-- `reset`: 버튼은 모든 폼 컨트롤을 초기 값으로 다시 설정합니다.
-- `button`: 버튼을 눌렀을 때 기본 동작을 지정하지 않습니다. JavaScript를 사용하여 커스텀 작업을 할당할 수 있습니다.
-
-### 작업
-
-`login` 템플릿에 폼을 추가하는 것으로 시작하겠습니다. *username* 필드와 *Login* 버튼이 필요합니다.
-
-```html
-<template id="login">
-  <h1>Bank App</h1>
-  <section>
-    <h2>Login</h2>
-    <form id="loginForm">
-      <label for="user">Username</label>
-      <input name="user" type="text">
-      <button>Login</button>
-    </form>
-  </section>
-</template>
-```
-
-자세히 살펴보면, 여기에 `<label>` 요소도 추가된 것을 알 수 있습니다. `<label>`은 username 필드와 같은, UI 컨트롤의 캡션을 추가하는 데 사용됩니다. 라벨은 폼의 가독성을 위해서 중요하지만, 추가적인 장점도 제공합니다:
-
-- 라벨을 폼 컨트롤에 연결하면, (화면 판독기와 같은) 보조 기술을 사용하는 사용자가 받는 것으로 예상되는 데이터를 이해하는 데 도움이 됩니다.
-- 라벨을 클릭하여 연결된 입력에 직접 맞출 수 있으므로, 터치-스크린 기반 장치에서 더 쉽게 접근할 수 있습니다.
-
-> 웹에서의 [Accessibility](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility)은 종종 간과되는 매우 중요한 주제입니다. [HTML5 semantic elements](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) 덕분에 이를 적절하게 사용한다면 접근성 콘텐츠로 만드는 것은 어렵지 않습니다. 일반적인 실수를 피하고 책임있는 개발자가 되기 위해 [accessibility에 대하여 읽을 수](https://developer.mozilla.org/docs/Web/Accessibility) 있습니다.
-
-이제 이전 항목의 바로 아래에, 가입을 위한 두번째 폼을 추가합니다:
-
-```html
-<hr/>
-<h2>Register</h2>
-<form id="registerForm">
-  <label for="user">Username</label>
-  <input name="user" type="text">
-  <label for="currency">Currency</label>
-  <input name="currency" type="text" value="$">
-  <label for="description">Description</label>
-  <input name="description" type="text">
-  <label for="balance">Current balance</label>
-  <input name="balance" type="number" value="0">
-  <button>Register</button>
-</form>
-```
-
-`value` 속성을 사용하여 주어진 입력에 대한 기본값을 정의할 수 있습니다.
-`balance`에 대한 입력에는 `number` 타입이 존재 합니다. 다른 입력과 다르게 보이나요? 상호작용 해보세요.
-
-✅ 키보드만 사용하여 폼을 탐색하고 상호 작용할 수 있나요? 어떻게 하나요?
-
-## 서버에 데이터 제출하기
-
-이제 기능 UI가 있으므로, 다음 단계는 데이터를 서버로 보내는 것입니다. 현재 코드를 사용하여 간단한 테스트를 해봅시다. *Login* 혹은 *Register* 버튼을 클릭하면 어떻게 되나요?
-
-브라우저의 URL 섹션에서 변경된 것을 알고 있나요?
-
-![Screenshot of the browser's URL change after clicking the Register button](.././images/click-register.png)
-
-`<form>`의 기본 작업은 [GET method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3)를 사용하여 현재 서버 URL에 폼을 제출하고, 폼 데이터를 URL에 직접 추가하는 것입니다. 이 방식에는 몇 가지 단점이 있습니다:
-
-- 전송되는 데이터는 크기가 매우 제한적입니다 (2000 자)
-- 데이터가 URL에 직접 보입니다 (비밀번호에 적절하지 않습니다)
-- 파일 업로드는 작동하지 않습니다
-
-그러므로 아무런 제한없이 하려면, HTTP 요청 본문에서 폼 데이터를 서버로 보내는 [POST method](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)를 사용하게 변경할 수 있습니다.
-
-> POST는 데이터를 보낼 때 가장 일반적인 방식이지만, [some specific scenarios](https://www.w3.org/2001/tag/doc/whenToUseGet.html)에서 검색 필드를 구현할 때는, GET 방법을 사용하는 것이 더 좋습니다.
-
-### 작업
-
-가입 폼에 `action`과 `method` 속성을 추가합니다:
-
-```html
-<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
-```
-
-이제 이름으로 새로운 계정을 가입합니다. *Register* 버튼을 클릭하면 다음과 같은 내용이 표시됩니다:
-
-![](.././images/form-post.png)
-
-모든 것이 잘 되면, 서버에 생성된 계정 데이터가 포함되어 [JSON](https://www.json.org/json-en.html)으로 응답해야 합니다.
-
-✅ 같은 이름으로 다시 가입해보세요. 무슨 일이 일어났나요?
-
-## 페이지를 다시 불러오지 않고 데이터 제출하기
-
-알다시피, 사용한 접근 방식에는 약간 이슈가 있습니다: 폼을 제출할 때, 앱에서 나가면서 브라우저가 서버 URL로 리디렉션됩니다. [Single-page application (SPA)](https://en.wikipedia.org/wiki/Single-page_application)을 만들고 있으므로, 웹 앱으로 모든 페이지를 다시 불러오지 않으려 합니다.
-
-페이지를 강제로 다시 불러오지 않고 폼 데이터를 서버로 보내려면, JavaScript 코드를 사용해야 합니다. `<form>` 요소의 `action` 속성에 URL을 넣는 대신, `javascript:` 문자열이 앞에 붙은 JavaScript 코드를 사용하여 커스텀 작업을 할 수 있습니다. 이를 사용하면 이전에 끝낸 브라우저로 자동 수행한 일부 작업을 구현해야 합니다:
-
-- 폼 데이터 검색하기
-- 폼 데이터를 알맞은 포맷으로 변환하고 인코딩하기
-- HTTP 요청을 생성하고 서버로 전송하기
-
-### 작업
-
-가입 폼 `action`을 다음으로 바꿉니다:
-
-```html
-<form id="registerForm" action="javascript:register()">
-```
-
-`app.js` 열어서 `register`라고 지어진 새로운 함수를 추가합니다:
-
-```js
-function register() {
-  const registerForm = document.getElementById('registerForm');
-  const formData = new FormData(registerForm);
-  const data = Object.fromEntries(formData);
-  const jsonData = JSON.stringify(data);
-}
-```
-
-여기서는 `getElementById()`를 사용하여 폼 요소를 검색하고, [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) 헬퍼를 사용하여 키/값 쌍 집합으로 폼 컨트롤에서 값을 추출합니다. 그러고 [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries)를 사용하여 데이터를 일반 객체로 변환하여 최종적으로 웹에서 데이터를 교환할 때, 일반적으로 사용되는 포맷인 [JSON](https://www.json.org/json-en.html)으로 데이터를 직렬화합니다.
-
-데이터는 이제 서버에 보낼 준비가 되었습니다. `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' };
-  }
-}
-```
-
-이 함수는 어떤 일을 할까요? 먼저, 여기있는 `async` 키워드를 확인하세요. 이 함수는 [**asynchronously**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)하게 실행하는 코드가 포함되어 있다는 것을 의미합니다. `await` 키워드와 함께 사용하면, 비동기 코드가 실행될 때까지 기다릴 수 있습니다 - 여기에서 서버의 응답을 기다리는 것과 같습니다 - 계속하기 전에.
-
-여기는 ``async/await` 사용 방식에 대한 간단한 영상입니다:
-
-[![Async and Await for managing promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async and Await for managing promises")
-
-`fetch()` API를 사용하여 JSON 데이터를 서버로 보냅니다. 이 메소드는 2개의 파라미터가 사용됩니다:
-
-- 서버의 URL이므로, 여기에 `//localhost:5000/api/accounts`를 다시 넣습니다.
-- 요청의 설정입니다. 여기서 메소드를 `POST`로 설정하고 요청한 `body`를 줍니다. JSON 데이터를 서버로 보낼 때, `Content-Type` 헤더를 `application/json`으로 설정하여 서버가 인터프리터하는 방식을 알 수 있도록 합니다.
-
-서버가 JSON으로 응답하므로, `await response.json()`을 사용하여 JSON 콘텐츠를 파싱하고 결과 객체를 반환할 수 있습니다. 이 메소드는 비동기이므로, 반환하기 전 여기에서 `await` 키워드를 사용하여 파싱하는 도중에도 오류가 발생하는지 확인합니다.
-
-이제 `register` 함수에 코드를 추가하여 `createAccount()`를 호출합니다:
-
-```js
-const result = await createAccount(jsonData);
-```
-
-`await` 함수를 여기에서 사용하기 때문에, 가입 함수 전에 `async` 키워드를 추가해야 합니다:
-
-```js
-async function register() {
-```
-
-마지막으로, 결과를 보기 위해서 로그를 추가하겠습니다. 최종 함수은 다음과 같습니다:
-
-```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 occured:', result.error);
-  }
-
-  console.log('Account created!', result);
-}
-```
-
-조금 길지만 도착했습니다! [browser developer tools](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools)를 열고, 새 계정을 가입하면, 웹 페이지에 변경 사항이 표시되지 않으면서 콘솔에 작동을 확인할 메시지가 나타납니다.
-
-![Screenshot showing log message in the browser console](.././images/browser-console.png)
-
-✅ 데이터가 안전하게 서버로 보내졌다고 생각하나요? 누군가 요청을 가져갈 수 있다면 어떤가요? 보안 데이터 통신에 대해 자세히 보려면 [HTTPS](https://en.wikipedia.org/wiki/HTTPS)를 읽어보세요.
-
-## Data 검증하기
-
-사용자 이름을 먼저 설정하지 않고 새 계정을 가입하려하면, 서버에서 상태 코드 [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).) 오류를 반환하는 것으로 볼 수 있습니다.
-
-데이터를 서버로 보내기 전에 할 수 있다면, 유요한 요청을 보낼 수 있도록, 미리 [validate the form data](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)를 실습하는 것이 좋습니다. HTML5 포맷 컨트롤은 다양한 속성을 사용하여 빌트인 유효성 검사를 제공합니다:
-
-- `required`: 필드를 채워야하며 안 채운다면 폼을 제출할 수 없습니다.
-- `minlength`와 `maxlength`: 텍스트 입력의 최소 및 최대 문자 수를 정의합니다.
-- `min`과 `max`: 숫자 필드의 최소값과 최대값을 정의합니다.
-- `type`: `number`, `email`, `file` 또는 [other built-in types](https://developer.mozilla.org/docs/Web/HTML/Element/input)처럼, 예상되는 데이터의 종류를 정의합니다. 이 속성은 폼 컨트롤의 비주얼 렌더링을 바꿀 수도 있습니다.
-- `pattern`: 입력된 데이터가 유효한지 테스트하기 위해 [regular expression](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) 패턴을 정의할 수 있습니다.
-
-> Tip: 유효하거나 `:valid`와 `:invalid` CSS pseudo-classes를 사용하지 않는 여부에 따라 폼 컨트롤의 모양을 커스텀할 수 있습니다.
-
-### 작업
-
-유효한 새로운 계정을 만들 때에 username과 currency라는 2개의 필수 필드가 필요하며, 다른 필드는 옵션입니다. HTML에서 폼을 갱신하여 다음 사항을 반영합니다:
-
-```html
-<input name="user" type="text" required>
-...
-<input name="currency" type="text" value="$" required>
-```
-
-이 특정 서버을 구현하는 것은 필드의 최대 길이에 제한을 걸진 않지만, 항상 사용자 텍스트 항목에 대하여 적당한 제한을 두는 것이 좋습니다.
-
-`maxlength` 속성을 이 텍스트 필드에 추가합니다:
-
-```html
-<input name="user" type="text" maxlength="20" required>
-...
-<input name="currency" type="text" value="$" maxlength="5" required>
-...
-<input name="description" type="text" maxlength="100">
-```
-
-이제 *Register* 버튼을 누르고 정의한 유효성 검사 규칙을 필드가 따르지 않는 경우에는, 다음과 같이 보입니다:
-
-![Screenshot showing the validation error when trying to submit the form](./images/validation-error.png)
-
-서버에 데이터를 보내기 *전에 하는* 유효성 검사를 **client-side** 유효성 검사라고 합니다. 그러나 데이터를 보내지 않고 모든 검사를 하는 것은 항상 가능하지 않습니다. 예를 들면, 서버에 요청을 보내지 않고 동일한 사용자 이름을 가진 계정이 이미 존재하는지 확인할 수 있는 방식은 없습니다. 서버에서 수행되는 추가적인 유효성 검사를 **server-side** 유효성 검사라고합니다.
-
-일반적으로 모두 구현해야하며, 클라이언트-측 유효성 검사를 사용하면 사용자에게 즉시 피드백을 주고 사용자 경험도 향상되지만, 서버-측 유효성 검사도 바뀌는 사용자 데이터가 건전하고 안전한지 확인하려면 중요합니다.
-
----
-
-## 🚀 도전
-
-이미 사용자가 존재한다면 HTML 오류 메시지가 나옵니다.
-
-다음은 살짝 스타일을 적용한 뒤에 최종 로그인 페이지를 보여주는 예시입니다:
-
-![Screenshot of the login page after adding CSS styles](.././images/result.png)
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44?loc=ko)
-
-## 리뷰 & 자기주도 학습
-
-개발자는 특히 유효성 검사 전략과 관련하여, 폼을 작성하는 노력에 대해 매우 창의적으로 생각했습니다. [CodePen](https://codepen.com)으로 다양한 폼 흐름에 대해 알아보세요; 흥미롭고 영감이 생기는 폼을 찾을 수 있나요?
-
-## 과제
-
-[Style your bank app](../assignment.md)
diff --git a/7-bank-project/2-forms/translations/README.ms.md b/7-bank-project/2-forms/translations/README.ms.md
deleted file mode 100644
index 68795d17..00000000
--- a/7-bank-project/2-forms/translations/README.ms.md
+++ /dev/null
@@ -1,294 +0,0 @@
-# Bina Aplikasi Perbankan Bahagian 2: Bina Log Masuk dan Borang Pendaftaran
-
-# Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43)
-
-### Pengenalan
-
-Di hampir semua aplikasi web moden, anda boleh membuat akaun untuk mempunyai ruang peribadi anda sendiri. Oleh kerana banyak pengguna dapat mengakses aplikasi web pada masa yang sama, anda memerlukan mekanisme untuk menyimpan data peribadi setiap pengguna secara berasingan dan memilih maklumat yang akan ditampilkan. Kami tidak akan membahas bagaimana menguruskan [identiti pengguna dengan selamat](https://en.wikipedia.org/wiki/Authentication) kerana ia adalah topik yang luas sendiri, tetapi kami akan memastikan setiap pengguna dapat membuatnya (atau lebih) akaun bank di aplikasi kami.
-
-Di bahagian ini kami akan menggunakan borang HTML untuk menambahkan log masuk dan pendaftaran ke aplikasi web kami. Kami akan melihat cara mengirim data ke API pelayan secara terprogram, dan akhirnya bagaimana menentukan peraturan pengesahan asas untuk input pengguna.
-
-### Prasyarat
-
-Anda perlu melengkapkan [templat HTML dan perutean](../../1-template-rute/README.md) aplikasi web untuk pelajaran ini. Anda juga perlu memasang [Node.js](https://nodejs.org) dan [jalankan API pelayan](../../api/README.md) secara tempatan supaya anda dapat menghantar data untuk membuat akaun.
-
-Anda boleh menguji bahawa pelayan berjalan dengan betul dengan menjalankan perintah ini di terminal:
-
-```sh
-curl http://localhost:5000/api
-# -> harus mengembalikan "Bank API v1.0.0" sebagai hasilnya
-```
-
----
-
-## Bentuk dan kawalan
-
-Elemen `<form>` merangkumi bahagian dokumen HTML di mana pengguna dapat memasukkan dan menyerahkan data dengan kawalan interaktif. Terdapat pelbagai jenis kawalan antara muka pengguna (UI) yang dapat digunakan dalam bentuk, yang paling umum adalah elemen `<input>` dan elemen `<button>`.
-
-Terdapat banyak [jenis yang berbeza](https://developer.mozilla.org/docs/Web/HTML/Element/input) dari `<input>`, misalnya untuk membuat bidang di mana pengguna boleh memasukkan nama penggunanya yang boleh anda gunakan:
-
-```html
-<input id="username" name="username" type="text">
-```
-
-Atribut `name` akan digunakan sebagai nama harta ketika data borang akan dihantar. Atribut `id` digunakan untuk mengaitkan` <label>` dengan kawalan bentuk.
-
-> Lihat keseluruhan senarai [`<input>` types](https://developer.mozilla.org/docs/Web/HTML/Element/input) dan [kawalan bentuk lain](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls) untuk mendapatkan idea tentang semua elemen UI asli yang boleh anda gunakan semasa membina UI anda.
-
-✅ Perhatikan bahawa `<input>` adalah [elemen kosong](https://developer.mozilla.org/docs/Glossary/Empty_element) di mana anda seharusnya *tidak* menambahkan tag penutup yang sepadan. Anda bagaimanapun boleh menggunakan notasi `<input/>` tutup sendiri, tetapi tidak diperlukan.
-
-Elemen `<button>` dalam bentuk agak istimewa. Sekiranya anda tidak menentukan atribut `type`, ia akan secara automatik mengirimkan data borang ke pelayan ketika ditekan. Berikut adalah nilai `type` yang mungkin:
-
-- `submit`: Lalai dalam `<form>`, butang memicu tindakan pengiriman borang.
-- `reset`: Butang menetapkan semula semua kawalan bentuk ke nilai awalnya.
--  `button`: Jangan berikan tingkah laku lalai semasa butang ditekan. Anda kemudian dapat menetapkan tindakan khusus untuknya menggunakan JavaScript.
-
-### Tugas
-
-Mari mulakan dengan menambahkan borang ke templat `login`. Kami memerlukan medan *nama pengguna* dan butang *Log masuk*.
-
-```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>
-```
-
-Sekiranya anda melihat lebih dekat, anda dapat melihat bahawa kami juga menambahkan elemen `<label>` di sini. Elemen `<label>` digunakan untuk menambahkan nama ke kawalan UI, seperti bidang nama pengguna kami. Label penting untuk keterbacaan borang anda, tetapi juga dilengkapi dengan faedah tambahan:
-
-- Dengan mengaitkan label dengan kawalan bentuk, ia membantu pengguna menggunakan teknologi bantu (seperti pembaca skrin) untuk memahami data apa yang diharapkan dapat mereka berikan.
-- Anda dapat mengklik label untuk memberi fokus langsung pada input yang berkaitan, sehingga lebih mudah dijangkau pada peranti berdasarkan layar sentuh.
-
-> [Kebolehcapaian](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility) di web adalah topik yang sangat penting yang sering diabaikan. Terima kasih kepada [elemen HTML semantik](https://developer.mozilla.org/docs/Learn/Accessibility/HTML) tidak sukar untuk membuat kandungan yang boleh diakses jika anda menggunakannya dengan betul. Anda boleh [baca lebih lanjut mengenai kebolehaksesan](https://developer.mozilla.org/docs/Web/Accessibility) untuk mengelakkan kesilapan biasa dan menjadi pembangun yang bertanggungjawab.
-
-Sekarang kita akan menambah borang kedua untuk pendaftaran, tepat di bawah yang sebelumnya:
-
-```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>
-```
-
-Dengan menggunakan atribut `value` kita dapat menentukan nilai lalai untuk input yang diberikan.
-Perhatikan juga bahawa input untuk `balance` mempunyai jenis `number`. Adakah ia kelihatan berbeza daripada input lain? Cuba berinteraksi dengannya.
-
-✅ Bolehkah anda menavigasi dan berinteraksi dengan borang hanya menggunakan papan kekunci? Bagaimana anda akan melakukannya?
-
-## Menyerahkan data ke pelayan
-
-Sekarang kita mempunyai UI yang berfungsi, langkah seterusnya adalah mengirim data ke pelayan kita. Mari buat ujian cepat menggunakan kod kami sekarang: apa yang berlaku jika anda mengklik butang *Login* atau *Register*?
-
-Adakah anda melihat perubahan pada bahagian URL penyemak imbas anda?
-
-![Tangkapan skrin perubahan URL penyemak imbas setelah mengklik butang Daftar](../images/click-register.png)
-
-Tindakan lalai untuk `<form>` adalah menyerahkan borang ke URL pelayan semasa menggunakan [kaedah GET](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3 ), menambahkan data borang terus ke URL. Kaedah ini mempunyai beberapa kekurangan walaupun:
-
-- Ukuran data yang dikirim sangat terhad (sekitar 2000 aksara)
-- Data dapat dilihat secara langsung di URL (tidak bagus untuk kata laluan)
-- Ia tidak berfungsi dengan muat naik fail
-
-Itulah sebabnya anda boleh mengubahnya untuk menggunakan [kaedah POST](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5) yang menghantar data borang ke pelayan di badan permintaan HTTP, tanpa batasan sebelumnya.
-
-> Walaupun POST adalah kaedah yang paling sering digunakan untuk mengirim data, [dalam beberapa senario tertentu](https://www.w3.org/2001/tag/doc/whenToUseGet.html) lebih baik menggunakan kaedah GET, semasa melaksanakan bidang carian misalnya.
-
-### Tugas
-
-Tambahkan sifat `action` dan `method` ke borang pendaftaran:
-
-```html
-<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
-```
-
-Sekarang cuba daftarkan akaun baru dengan nama anda. Setelah mengklik butang * Daftar * anda akan melihat sesuatu seperti ini:
-
-![Tetingkap penyemak imbas di alamat localhost:5000/api/akaun, menunjukkan rentetan JSON dengan data pengguna](../images/form-post.png)
-
-Sekiranya semuanya berjalan lancar, pelayan harus menjawab permintaan anda dengan respons [JSON](https://www.json.org/json-en.html) yang mengandungi data akaun yang telah dibuat.
-
-✅ Cuba daftar sekali lagi dengan nama yang sama. Apa yang berlaku?
-
-## Mengirim data tanpa memuatkan semula halaman
-
-Seperti yang anda perhatikan, ada sedikit masalah dengan pendekatan yang baru kami gunakan: semasa menghantar borang, kami keluar dari aplikasi kami dan penyemak imbas mengalihkan ke URL pelayan. Kami berusaha untuk mengelakkan semua muat semula halaman dengan aplikasi web kami, kerana kami sedang membuat [Aplikasi satu halaman (SPA)](https://en.wikipedia.org/wiki/Single-page_application).
-
-Untuk mengirim data formulir ke pelayan tanpa memaksa muat ulang halaman, kita harus menggunakan kod JavaScript. Daripada meletakkan URL di properti `action` elemen `<form>`, Anda dapat menggunakan kod JavaScript apa pun yang disiapkan oleh string `javascript:` untuk melakukan tindakan khusus. Menggunakan ini juga bermaksud bahawa anda harus melaksanakan beberapa tugas yang sebelumnya dilakukan secara automatik oleh penyemak imbas:
-
-- Dapatkan semula data borang
-- Tukar dan kodkan data bentuk ke format yang sesuai
-- Buat permintaan HTTP dan kirimkan ke pelayan
-
-### Tugas
-
-Ganti borang tindakan `action` dengan:
-
-```html
-<form id="registerForm" action="javascript:register()">
-```
-
-Buka `app.js` tambahkan fungsi baru bernama `register`:
-
-```js
-function register() {
-  const registerForm = document.getElementById('registerForm');
-  const formData = new FormData(registerForm);
-  const data = Object.fromEntries(formData);
-  const jsonData = JSON.stringify(data);
-}
-```
-
-Di sini kita mengambil elemen borang menggunakan `getElementById()` dan menggunakan pembantu [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) untuk mengekstrak nilai dari borang kawalan sebagai satu set pasangan kunci / nilai. Kemudian kami menukar data ke objek biasa menggunakan [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) dan akhirnya bersiri data ke [JSON](https://www.json.org/json-en.html), format yang biasa digunakan untuk pertukaran data di web.
-
-Data kini siap dihantar ke pelayan. Buat fungsi baru bernama `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' };
-  }
-}
-```
-
-Apakah fungsi ini? Pertama, perhatikan kata kunci `async` di sini. Ini bermaksud bahawa fungsi tersebut mengandungi kod yang akan menjalankan [**asynchronously**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function). Apabila digunakan di sepanjang kata kunci `await`, ia membolehkan menunggu kod tak segerak untuk dilaksanakan - seperti menunggu tindak balas pelayan di sini - sebelum meneruskan.
-
-Berikut adalah video ringkas mengenai penggunaan `async/await`:
-
-[![Async dan Tunggu untuk menguruskan janji](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async dan Tunggu untuk mengurus janji")
-
-> Klik gambar di atas untuk video mengenai async / waiting.
-
-Kami menggunakan API `fetch()` untuk mengirim data JSON ke pelayan. Kaedah ini mengambil 2 parameter:
-
-- URL pelayan, jadi kami meletakkan kembali `//localhost5000/api/akaun` di sini.
-- Tetapan permintaan. Di situlah kami menetapkan kaedah untuk `POST` dan memberikan `body` untuk permintaan tersebut. Semasa kami menghantar data JSON ke pelayan, kami juga perlu menetapkan tajuk `Content-Type` ke` application/json` sehingga pelayan tahu bagaimana menafsirkan isi.
-
-Oleh kerana pelayan akan menjawab permintaan dengan JSON, kita dapat menggunakan `tunggu tunggu.json()` untuk mengurai kandungan JSON dan mengembalikan objek yang dihasilkan. Perhatikan bahawa kaedah ini tidak segerak, jadi kami menggunakan kata kunci `tunggu 'di sini sebelum kembali untuk memastikan sebarang ralat semasa penghuraian juga terperangkap.
-
-Sekarang tambahkan beberapa kod ke fungsi `register` untuk memanggil `createAccount()`:
-
-```js
-const result = await createAccount(jsonData);
-```
-
-Kerana kita menggunakan kata kunci `await` di sini, kita perlu menambahkan kata kunci `async` sebelum fungsi daftar:
-
-```js
-async function register() {
-```
-
-Akhirnya, mari kita tambahkan beberapa log untuk memeriksa hasilnya. Fungsi terakhir kelihatan seperti ini:
-
-```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 occured:', result.error);
-  }
-
-  console.log('Account created!', result);
-}
-```
-
-Itu agak lama tetapi kami sampai di sana! Sekiranya anda membuka [alat pembangun penyemak imbas](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools), dan cuba mendaftarkan akaun baru, anda tidak akan melihat perubahan di laman web tetapi mesej akan muncul di konsol yang mengesahkan bahawa semuanya berfungsi.
-
-![Tangkapan skrin yang menunjukkan mesej log di konsol penyemak imbas](../images/browser-console.png)
-
-✅ Anda fikir data dihantar ke pelayan dengan selamat? Bagaimana jika seseorang yang dapat memintas permintaan itu? Anda boleh membaca mengenai [HTTPS](https://en.wikipedia.org/wiki/HTTPS) untuk mengetahui lebih lanjut mengenai komunikasi data yang selamat.
-
-## Pengesahan data
-
-Sekiranya anda cuba mendaftarkan akaun baru tanpa menetapkan nama pengguna terlebih dahulu, anda dapat melihat bahawa pelayan mengembalikan ralat dengan kod status [400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).).
-
-Sebelum menghantar data ke pelayan, adalah amalan yang baik untuk [mengesahkan data borang](https://developer.mozilla.org/docs/Learn/Forms/Form_validation) terlebih dahulu apabila mungkin, untuk memastikan anda menghantar permintaan yang sah. Kawalan borang HTML5 memberikan pengesahan terbina dalam menggunakan pelbagai atribut:
-
-- `diperlukan`: bidang perlu diisi jika tidak, borang tidak dapat dihantar.
-- `minlength` dan` maxlength`: menentukan bilangan aksara minimum dan maksimum dalam bidang teks.
-- `min` dan `max`: menentukan nilai minimum dan maksimum medan angka.
-- `type`: mentakrifkan jenis data yang diharapkan, seperti `number`, `email`, `file` atau [other built-in types](https://developer.mozilla.org/docs/Web/HTML/Elemen/input). Atribut ini juga dapat mengubah rendering visual kawalan bentuk.
-- `pattern`: memungkinkan untuk menentukan [ungkapan biasa](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions) untuk menguji sama ada data yang dimasukkan sah atau tidak.
-
-> Petua: anda boleh menyesuaikan rupa kawalan borang anda bergantung pada apakah itu sah atau tidak menggunakan kelas pseudo CSS `:invalid` dan`:valid`.
-
-### Tugas
-
-Terdapat 2 medan yang diperlukan untuk membuat akaun baru yang sah, nama pengguna dan mata wang, medan lain menjadi pilihan. Kemas kini HTML borang, menggunakan atribut `required` dan teks di label medan untuk itu:
-
-```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>
-```
-
-Walaupun pelaksanaan pelayan tertentu ini tidak memaksakan had khusus pada panjang maksimum medan, selalu menjadi amalan yang baik untuk menentukan had yang munasabah untuk setiap entri teks pengguna.
-
-Tambahkan atribut `maxlength` ke medan teks:
-
-```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">
-```
-
-Sekarang jika anda menekan butang *Daftar* dan medan tidak mematuhi peraturan pengesahan yang kami tetapkan, anda akan melihat sesuatu seperti ini:
-
-![Tangkapan skrin menunjukkan ralat pengesahan semasa cuba menghantar borang](../images/validation-error.png)
-
-Pengesahan seperti ini dilakukan *sebelum* menghantar sebarang data ke pelayan dipanggil pengesahan **client-side**. Tetapi perhatikan bahawa tidak semestinya melakukan semua pemeriksaan tanpa menghantar data. Sebagai contoh, kami tidak dapat memeriksa di sini jika akaun sudah ada dengan nama pengguna yang sama tanpa menghantar permintaan ke pelayan. Pengesahan tambahan yang dilakukan di pelayan dipanggil pengesahan **server-side**.
-
-Biasanya kedua-duanya perlu dilaksanakan, dan semasa menggunakan pengesahan sisi klien meningkatkan pengalaman pengguna dengan memberikan maklum balas segera kepada pengguna, pengesahan sisi pelayan sangat penting untuk memastikan data pengguna yang anda manipulasi adalah baik dan selamat.
-
----
-
-## 🚀 Cabaran
-
-Tunjukkan mesej ralat dalam HTML jika pengguna sudah ada.
-
-Berikut adalah contoh bagaimana rupa halaman log masuk akhir setelah sedikit gaya:
-
-![Tangkapan skrin halaman log masuk setelah menambahkan gaya CSS](../images/result.png)
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44)
-
-## Mengkaji & Belajar Sendiri
-
-Pembangun menjadi sangat kreatif mengenai usaha membina bentuk mereka, terutama mengenai strategi pengesahan. Ketahui mengenai aliran bentuk yang berbeza dengan melihat melalui [CodePen](https://codepen.com); bolehkah anda mencari beberapa bentuk yang menarik dan memberi inspirasi?
-
-## Tugasan
-
-[Gayakan bank app anda](assignment.ms.md)
\ No newline at end of file
diff --git a/7-bank-project/2-forms/translations/README.zh-tw.md b/7-bank-project/2-forms/translations/README.zh-tw.md
deleted file mode 100644
index fbec8191..00000000
--- a/7-bank-project/2-forms/translations/README.zh-tw.md
+++ /dev/null
@@ -1,297 +0,0 @@
-# 建立銀行網頁應用程式 Part 2：登入與註冊表單
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/43?loc=zh_tw)
-
-### 大綱
-
-在大多數當代網頁應用程式中，你可以建立自己的帳戶來擁有自己的私人空間。許多用戶在同一時間可以存取同一個網頁應用程式，你就必須有一套機制分開儲存不同用戶的資料並顯示適當的資訊。我們不會涉及到如何管理[用戶個資的安全](https://zh.wikipedia.org/wiki/%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81)，它是個相當廣泛的主題，我們僅會確保每個用戶能在這款銀行應用上建立一到多個數位帳戶。
-
-在這單元中，我們會使用 HTML 表單來新增登入與註冊的功能。我們會看到如何使用伺服器 API 傳遞資料，定義基本的用戶字串輸入之檢查機制。
-
-### 開始之前
-
-你需要完成第一單元 [HTML 模板與網頁路由](../../1-template-route/translations/README.zh-tw.md)的應用程式。你還需要安裝 [Node.js](https://nodejs.org) 與在本地端[運行伺服器 API](../../api/translations/README.zh-tw.md) 以傳輸建立帳戶所需的資料。
-
-你可以測試伺服器是否運作正常，在終端機內輸入指令：
-
-```sh
-curl http://localhost:5000/api
-# -> 會回傳結果 "Bank API v1.0.0" 
-```
-
----
-
-## 表單與其控制
-
-`<form>` 元素打包了 HTML 文件中使用者輸入與提交資料的地方。有許多種使用者介面(UI)以表單的方式呈現，最常見的內容會包含 `<input>` 與 `<button>` 元素。
-
-有許多種 `<input>` 的[種類](https://developer.mozilla.org/docs/Web/HTML/Element/input)，舉例來說，若要建立使用者輸入使用者名稱的地方，你可以：
-
-```html
-<input id="username" name="username" type="text">
-```
-
-`name` 屬性同時亦是表單傳輸資料的名稱。`id` 屬性是用來與 `<label>` 做表單控制(form control)的連接。
-
-> 花點時間看看 [`<input>` 種類](https://developer.mozilla.org/docs/Web/HTML/Element/input)的清單與[其他表單控制](https://developer.mozilla.org/docs/Learn/Forms/Other_form_controls)，讓你在建立使用者介面時，有全部供你使用的原生 UI 元素可以參考。
-
-✅ 紀錄一下 `<input>` 是種[空元素](https://developer.mozilla.org/docs/Glossary/Empty_element)，你*不應該*在它後面加上對應的結束標籤。然而，你仍然可以在它的後面使用 `<input/>`，這沒有強制規定。
-
-表單中的 `<button>` 元素是有些特別。如果你沒有指定它的 `type` 屬性，它會在你輸入文字時，自動地提交表單內容給伺服器。這邊有一些你可以設定的 `type` 內容：
-
-- `submit`： `<form>` 內的預設型態，按鈕會觸發表單提交這項行為。
-- `reset`： 按鈕會重置所有表單控制回初始狀態。
-- `button`： 在按鈕按下時不執行預設行為。你可以藉由 JavaScript 自由定義之後的動作。
-
-### 課題
-
-在 `login` 模板內加入表單。我們需要 *使用者名稱(username)* 的輸入框與 *登入(Login)* 的按鈕。 
-
-```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>
-```
-
-如果你仔細地看，你會注意到我們在這裡還加了 `<label>` 元素。`<label>` 元素被用來新增文字到 UI 上，譬如說我們的使用者名稱。為了讓表單得以被閱讀，標籤是很重要的，此外它還有額外的優點：
-
-- 連結標籤到表單控制上，它能幫助使用者的額外工具，好比說螢幕報讀器，理解接下來該提供何種資料。
-- 你可以點擊標籤，它會跳轉到相對應的輸入框，讓使用觸控型裝置的用戶更容易操作。
-
-> [網頁親和力](https://developer.mozilla.org/docs/Learn/Accessibility/What_is_accessibility)是非常重要但常被忽視的主題。感謝[語義化 HTML 元素](https://developer.mozilla.org/docs/Learn/Accessibility/HTML)的幫助，建立無障礙的網頁內容變得更加容易。你可以[閱讀更多有關網頁親和力的文章](https://developer.mozilla.org/docs/Web/Accessibility)，避免觸犯到常見的錯誤並成為負責任的開發者。
-
-現在，我們加入第二張表單給用戶註冊使用，就像前一張一樣：
-
-```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>
-```
-
-藉由 `value` 屬性，我們可以定義輸入框內的預設值。
-注意一下 `balance` 的輸入類型為 `number`。它看起來與其他輸入框不一樣嗎？試著與它互動看看。
-
-✅ 你能只利用鍵盤造訪表格，與表格互動嗎？你是如何做到的？
-
-## 提交資料給伺服器
-
-現在我們有可以使用的 UI 了，下一個步驟要將資料送給我們的伺服器。讓我們來快速地測試一下程式：在點擊 *Login* 或 *Register* 按鈕後，發生了什麼事？
-
-你有注意到瀏覽器的網址列改變了嗎？
-
-![截圖：點擊 Register 按鈕後，瀏覽器網址列改變](../images/click-register.png)
-
-`<form>` 預設的行為：使用 [GET 方法](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.3)提交表格，將表格資料接在網址後面，傳送給目前網址的伺服器。然而這個方法有一些缺點：
-
-- 資料大小有上限限制(大約 2000 字元)
-- 可以直接在網址內看到資料(對密碼而言，這並不恰當)
-- 它不能做檔案的上傳
-
-這也是為什麼你需要將它轉換為 [POST 方法](https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html#sec9.5)，將表單資料存在 HTTP 請求的內容中。這樣就不會遇到上述的限制。
-
-> POST 是常見的資料傳輸方法，[在一些特別的情況下](https://www.w3.org/2001/tag/doc/whenToUseGet.html)，使用 GET 方法相對起來比較恰當。例如進行搜尋的時候。
-
-### 課題
-
-加入 `action` 與 `method` 屬性到註冊表單之中：
-
-```html
-<form id="registerForm" action="//localhost:5000/api/accounts" method="POST">
-```
-
-現在，試著以你的名字申請新的帳戶。在點擊 *Register* 按鈕後，你應該能看到像這樣的畫面：
-
-![瀏覽器網址為 localhost:5000/api/accounts，並顯示 JSON 的資料字串。](../images/form-post.png)
-
-若所有事情都運作正常，伺服器應該會回應你的請求，附帶 [JSON](https://www.json.org/json-en.html) 包含著你剛建立的帳戶資料。
-
-✅ 試著以相同名字再註冊一次。發生了什麼事？
-
-## 不重新載入地提交資料
-
-你可能會注意到，這些行動間出現了一個小問題：在提交表單時，我們離開了網頁應用，瀏覽器又重新導回到伺服器的網址。我們試著避免網頁應用重新載入所有的頁面，做出[單一頁面應用程式 (SPA)](https://zh.wikipedia.org/zh-tw/%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8)。
-
-為了讓傳遞資料給伺服器時，不發生頁面重新載入的情況，我們需要使用 JavaScript。 
-
-比起直接在 `<form>` 元素的 `action` 屬性加入網址，你可以使用 `javascript:` 字串接在程式語句前頭來執行自訂的行為。使用這方法也意味著你需要額外修改一些原本瀏覽器會做的行為。
-
-- 接收表單資料
-- 轉換並編碼表單資料成合適的格式
-- 建立 HTTP 請求並傳遞給伺服器
-
-### 課題
-
-將註冊表單的 `action` 替換為：
-
-```html
-<form id="registerForm" action="javascript:register()">
-```
-
-開啟 `app.js`，加入新的函式 `register`：
-
-```js
-function register() {
-  const registerForm = document.getElementById('registerForm');
-  const formData = new FormData(registerForm);
-  const data = Object.fromEntries(formData);
-  const jsonData = JSON.stringify(data);
-}
-```
-
-我們使用 `getElementById()` 蒐集表單的元素，使用 [`FormData`](https://developer.mozilla.org/docs/Web/API/FormData) 協助從表單控制中取出 key/value 的數據對。
-之後，利用 [`Object.fromEntries()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries) 轉換資料成正規物件，最後再將檔案轉成 [JSON](https://www.json.org/json-en.html) ── 一個在網路上常見的資料交換格式。
-
-現在資料已經準備提交給伺服器了。建立新函式 `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' };
-  }
-}
-```
-
-這個函式做了什麼？首先，注意關鍵字 `async`，代表著函式包含了[**非同步化程式**](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/async_function)。在與關鍵字 `await` 一起使用時，它會在繼續運行程式前，等待非同步的程式被執行，就像等待伺服器回應一樣。
-
-這邊有關於使用 `async/await` 的影片：
-
-[![Async 與 Await 管理 promises](https://img.youtube.com/vi/YwmlRkrxvkk/0.jpg)](https://youtube.com/watch?v=YwmlRkrxvkk "Async 與 Await 管理 promises")
-
-> 點擊上方圖片以觀看關於 async/await 的影片。
-
-我們使用 API `fetch()` 來傳送 JSON 資料給伺服器。這個方法需要使用兩個參數：
-
-- 伺服器的網址，在此使用 `//localhost:5000/api/accounts`。
-- 網頁請求的設定，就是我們定義 `POST` 方法與提供請求的 `body`。當我們傳輸 JSON 資料給伺服器，我們還需要在標頭的 `Content-Type` 定為 `application/json`，伺服器才知道該如何解讀裡面的內容。
-
-當伺服器以 JSON 回應請求後，我們可以使用 `await response.json()` 來取得 JSON 的內容並回傳結果。注意在此為非同步程式的方法，我們使用關鍵字 `await` 回傳任何在解讀封包時產生的錯誤訊息。
-
-現在，在函式 `register` 中呼叫 `createAccount()`：
-
-```js
-const result = await createAccount(jsonData);
-```
-
-因為我們在這此使用了關鍵字 `await`，我們需要在註冊函式前新增關鍵字 `async`：
-
-```js
-async function register() {
-```
-
-最後，我們儲存一些紀錄來檢查結果。最後的函式應該會如下方格式：
-
-```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 occured:', result.error);
-  }
-
-  console.log('Account created!', result);
-}
-```
-
-過程有些冗長，但我們達成了！當你開啟[瀏覽器開發者工具](https://developer.mozilla.org/docs/Learn/Common_questions/What_are_browser_developer_tools)，試著註冊新的帳戶，你應該能看到網頁並沒有改變，但命令欄中會顯示帳戶成功註冊的訊息。
-
-![瀏覽器命令欄中顯示紀錄訊息之截圖](../images/browser-console.png)
-
-✅ 你覺得傳給伺服器的資料是安全的嗎？其他人有辦法攔截網頁請求嗎？你可以閱讀 [HTTPS](https://en.wikipedia.org/wiki/HTTPS)，了解更多關於安全的資料傳輸。
-
-## 資料驗證
-
-試著在註冊新帳戶時，不輸入你的使用者名稱，你會發現伺服器回傳了錯誤狀態訊息：[400 (Bad Request)](https://developer.mozilla.org/docs/Web/HTTP/Status/400#:~:text=The%20HyperText%20Transfer%20Protocol%20(HTTP,%2C%20or%20deceptive%20request%20routing).)。
-
-在傳輸資料給伺服器之前，最好先[驗證表單資料](https://developer.mozilla.org/docs/Learn/Forms/Form_validation)，以確保我們傳送合法的網頁請求。 HTML5 表單控制內建包含了驗證方法，使用了多樣的屬性： controls provides built-in validation using various attributes:
-
-- `required`： 輸入框必須被填寫，否則表單不能被提交。
-- `minlength` 和 `maxlength`： 定義輸入框的文字下限與文字上限。
-- `min` 和 `max`： 定義輸入框的數字下限與數字上限。
-- `type`： 定義輸入框內的資料格式，例如`數字`、`email`、`檔案`或是[其他內建的格式](https://developer.mozilla.org/docs/Web/HTML/Element/input)。這個屬性可能會改變表單控制的表現方法。
-- `pattern`： 允許定義[正規表示法](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions)的字串，測試輸入的內容是否滿足它。
-
-> 提示：你可以自定義表單控制的呈現方法，利用 CSS pseudo-classes `:valid` 和 `:invalid` 判斷內容是否合理。
-
-### 課題
-
-在建立新的合法帳戶時，有兩個必須被填寫的輸入框：使用者名稱與資產狀態，而其他選項則是可有可無。現在更新表單的 HTML 語法，使用 `required` 屬性並標記提示在標籤中：
-
-```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>
-```
-
-伺服器並沒設定輸入框的文字上限，定義合理的文字輸入上限是必要的。
-
-在文字框內加入 `maxlength` 屬性：
-
-```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">
-```
-
-現在，如果文字框並沒有滿足我們所定義的規則時，在點擊了 *Register* 按鈕後，你會看到：
-
-![傳輸錯誤表單而出現驗證失敗的截圖](../images/validation-error.png)
-
-這類在傳輸資料給伺服器*之前*的驗證系統稱之為 **用戶端(client-side)** 驗證。但注意有些資料是沒有辦法在傳輸前被驗證的。舉例來說，我們沒辦法在發出請求前，確認是否已經存在著一組相同姓名的帳戶。伺服器上額外的驗證措施就稱之為 **伺服器端(server-side)** 驗證。
-
-通常這兩個驗證都需要去編寫，用戶端驗證能及時回饋給用戶，提升使用者體驗；伺服器端驗證確保你要處理的用戶資料是合理且安全的。
-
----
-
-## 🚀 挑戰
-
-當相同使用者名稱的帳戶已經存在時，在 HTML 上顯示錯誤訊息。
-
-這邊有做過一些造型的最終登入頁面範本。
-
-![加上 CSS 造型的登入頁面截圖](../images/result.png)
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/44?loc=zh_tw)
-
-## 複習與自學
-
-開發者在建立表單時需要發揮他們的創意，尤其是策畫資料驗證的規則。在 [CodePen](https://codepen.com) 上學習不同表單流程，你能發現什麼有趣且令人發想的表單嗎？
-
-## 作業
-
-[造型化你的銀行程式](assignment.zh-tw.md)
diff --git a/7-bank-project/2-forms/translations/assignment.es.md b/7-bank-project/2-forms/translations/assignment.es.md
deleted file mode 100644
index da0a1283..00000000
--- a/7-bank-project/2-forms/translations/assignment.es.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Diseña tu aplicación bancaria
-
-## Instrucciones
-
-Cree un nuevo archivo `styles.css` y agréguele un enlace en su archivo `index.html` actual. En el archivo CSS que acaba de crear, agregue algunos estilos para que la página *Inicio de sesión* y *Panel de control* se vea bien y ordenada. Intente crear un tema de color para darle a su aplicación su propia marca.
-
-> Consejo: puede modificar el HTML y agregar nuevos elementos y clases si es necesario.
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | ------------------- | ---------------------------- | ------------------------------------------- |
-| | Todas las páginas se ven limpias y legibles, con un tema de color consistente y las diferentes secciones destacando correctamente. | Las páginas tienen un estilo pero sin un tema o con secciones no claramente delimitadas. | Las páginas carecen de estilo, las secciones se ven desorganizadas y la información es difícil de leer. |
diff --git a/7-bank-project/2-forms/translations/assignment.fr.md b/7-bank-project/2-forms/translations/assignment.fr.md
deleted file mode 100644
index 88e164e1..00000000
--- a/7-bank-project/2-forms/translations/assignment.fr.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 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/2-forms/translations/assignment.hi.md b/7-bank-project/2-forms/translations/assignment.hi.md
deleted file mode 100644
index c80b2f78..00000000
--- a/7-bank-project/2-forms/translations/assignment.hi.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# अपने बैंक ऐप को स्टाइल करें
-
-## अनुदेश
-
-एक नई `style.css` फ़ाइल बनाएँ और अपने वर्तमान` index.html` फ़ाइल में एक लिंक जोड़ें. CSS फ़ाइल में आपने सिर्फ _लॉगिन_ और _डैशबोर्ड_ पेज बनाने के लिए कुछ स्टाइलिंग जोड़ दी है जो अच्छी और सुव्यवस्थित दिखती है. अपने ऐप को खुद की ब्रांडिंग देने के लिए कलर थीम बनाने की कोशिश करें.
-
-> युक्ति: आप HTML को संशोधित कर सकते हैं और यदि आवश्यक हो तो नए तत्व और क्लासेस जोड़ सकते हैं.
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                                                                       | पर्याप्त                                                                                                | सुधार की जरूरत                                                                         |
-| ------ | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-|        | सभी पृष्ठ साफ-सुथरे और पठनीय दिखते हैं, जिसमें एक सुसंगत रंग विषय और विभिन्न खंड ठीक से खड़े हैं. | पृष्ठों को स्टाइल किया गया है, लेकिन बिना थीम के या स्पष्ट रूप से परिसीमित नहीं किए गए अनुभागों के साथ. | पृष्ठों में स्टाइल की कमी है, खंड अव्यवस्थित दिखते हैं और जानकारी को पढ़ना मुश्किल है. |
diff --git a/7-bank-project/2-forms/translations/assignment.it.md b/7-bank-project/2-forms/translations/assignment.it.md
deleted file mode 100644
index 7c6f2a6e..00000000
--- a/7-bank-project/2-forms/translations/assignment.it.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Dare uno stile alla propria app bancaria
-
-## Istruzioni
-
-Creare un nuovo file `styles.css` e aggiungere un collegamento nel file `index.html` corrente. Nel file CSS appena creato aggiungere uno stile per rendere la pagina di *Login* e *cruscotto* bella e ordinata. Provare a creare un tema cromatico per dare alla app il proprio marchio.
-
-> Suggerimento: si può  modificare l'HTML e aggiungere nuovi elementi e classi se necessario.
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
-|          | Tutte le pagine sembrano pulite e leggibili, con un tema cromatico coerente e le diverse sezioni che risaltano correttamente. | Le pagine hanno uno stile ma senza un tema o con sezioni non chiaramente delimitate. | Le pagine mancano di stile, le sezioni sembrano disorganizzate e le informazioni sono difficili da leggere. |
\ No newline at end of file
diff --git a/7-bank-project/2-forms/translations/assignment.ja.md b/7-bank-project/2-forms/translations/assignment.ja.md
deleted file mode 100644
index 7566a2d8..00000000
--- a/7-bank-project/2-forms/translations/assignment.ja.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 銀行アプリのスタイル設定
-
-## 説明書
-
-新しい `styles.css` ファイルを作成し、現在の `index.html` ファイルにリンクを追加します。作成した CSS ファイルに、*Login* と *Dashboard* ページがすっきりと整然と見えるように、いくつかのスタイルを追加します。アプリに独自のブランディングを与えるために、カラーテーマを作成してみてください。
-
-> ヒント: 必要に応じて HTML を修正し、新しい要素やクラスを追加することができます。
-
-## ルーブリック
-
-| 基準 | 模範的な例                                                                                                               | 適切な                                                                       | 改善が必要                                                                             |
-| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
-|          | すべてのページは、一貫した色のテーマと異なるセクションが適切に立っていると、きれいで読みやすいように見えます。 | ページはスタイリングされていますが、テーマがなかったり、セクションが明確に区切られていなかったりします。 | ページにスタイルがなく、セクションが乱雑に見え、情報が読みにくい。 |
\ No newline at end of file
diff --git a/7-bank-project/2-forms/translations/assignment.ko.md b/7-bank-project/2-forms/translations/assignment.ko.md
deleted file mode 100644
index f8d20589..00000000
--- a/7-bank-project/2-forms/translations/assignment.ko.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 은행 앱 스타일링
-
-## 설명
-
-새 `styles.css` 파일을 만들고 현재 `index.html` 파일에 링크를 추가해봅니다. 방금 만든 CSS 파일에서 *로그인* 및 *대시 보드* 페이지가 멋지고 깔끔하게 보이도록 스타일을 추가합니다. 앱에 자체 브랜딩을 제공하기 위해 색상 테마를 만들어봅니다.
-
-> 팁 : HTML을 수정하고 필요한 경우 새 요소와 클래스를 추가 할 수 있습니다.
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 모든 페이지가 깔끔하고 읽기 쉬우며 일관된 색상 테마와 다양한 섹션들이 적절하게 돋보이는 경우 | 페이지가 스타일링되어있지만 테마가 없거나 섹션들이 명확하게 구분되지 않은 경우 | 페이지가 스타일링되어 있지 않았으며 섹션들이 질서가 없고 정보를 읽기가 어려운 경우
diff --git a/7-bank-project/2-forms/translations/assignment.ms.md b/7-bank-project/2-forms/translations/assignment.ms.md
deleted file mode 100644
index 70a04118..00000000
--- a/7-bank-project/2-forms/translations/assignment.ms.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Gaya aplikasi bank anda
-
-## Arahan 
-
-Buat fail `styles.css` baru dan tambahkan pautan ke dalam fail `index.html` semasa anda. Dalam fail CSS yang baru anda buat, tambahkan beberapa gaya untuk menjadikan halaman *Login* dan *Dashboard* kelihatan baik dan kemas. Cuba buat tema warna untuk memberikan jenama sendiri pada aplikasi anda.
-
-> Petua: anda boleh mengubah HTML dan menambahkan elemen dan kelas baru jika diperlukan.
-
-## Rubrik
-
-| kriteria | Contoh                                                                                                               | Mencukupi                                                                       | Usaha Lagi                                                                             |
-| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
-|          | Semua halaman kelihatan bersih dan mudah dibaca, dengan tema warna yang konsisten dan bahagian yang berbeza menonjol dengan betul. | Halaman digayakan tetapi tanpa tema atau bahagian yang tidak dibatasi dengan jelas. | Halaman kurang digayakan, bahagiannya kelihatan tidak teratur dan maklumatnya sukar dibaca. |
\ No newline at end of file
diff --git a/7-bank-project/2-forms/translations/assignment.nl.md b/7-bank-project/2-forms/translations/assignment.nl.md
deleted file mode 100644
index 16ea959e..00000000
--- a/7-bank-project/2-forms/translations/assignment.nl.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Style uw bank-app
-
-## Instructies
-
-Maak een nieuw `styles.css`-bestand en voeg er een link naar toe in uw huidige `index.html`-bestand. Voeg in het CSS-bestand dat u zojuist hebt gemaakt wat stijl toe om de pagina *Login* en *Dashboard* er netjes en opgeruimd uit te laten zien. Probeer een kleurenthema te maken om uw app een eigen branding te geven.
-
-> Tip: u kunt de HTML aanpassen en indien nodig nieuwe elementen en class toevoegen.
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                                                                                               | Voldoende                                                                       | Moet worden verbeterd                                                                             |
-| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
-|          | Alle pagina's zien er schoon en leesbaar uit, met een consistent kleurenthema en de verschillende secties vallen goed op. | Pagina's zijn opgemaakt maar zonder thema of met secties die niet duidelijk zijn afgebakend.| Pagina's missen stijl, de secties zien er ongeorganiseerd uit en de informatie is moeilijk te lezen. |
\ No newline at end of file
diff --git a/7-bank-project/2-forms/translations/assignment.zh-tw.md b/7-bank-project/2-forms/translations/assignment.zh-tw.md
deleted file mode 100644
index baa62cfd..00000000
--- a/7-bank-project/2-forms/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 造型化你的銀行程式
-
-## 簡介
-
-建立新的檔案 `styles.css`，匯入到你的 `index.html` 檔案中。藉由 CSS 檔，你能讓*登入*與*儀表板*頁面看起來更漂亮且整潔。試著為你的程式加入主題色彩，對應到你的品牌。
-
-> 提示：你可以修改 HTML 檔，在必要時新增元素與 classes。
-
-## 學習評量
-
-| 作業內容 | 優良                                               | 普通                                 | 待改進                                   |
-| -------- | -------------------------------------------------- | ------------------------------------ | ---------------------------------------- |
-|          | 所有的頁面整潔且易讀：統一的主題色彩且排版顯示正常 | 頁面有調整過，但缺乏主題且排版有瑕疵 | 頁面缺乏造型，排版凌亂且頁面資訊難以理解 |
diff --git a/7-bank-project/3-data/translations/README.es.md b/7-bank-project/3-data/translations/README.es.md
deleted file mode 100644
index 67241528..00000000
--- a/7-bank-project/3-data/translations/README.es.md
+++ /dev/null
@@ -1,59 +0,0 @@
-# [Tema de la lección]
-
-! [Insertar un video aquí](video-url)
-
-## [Prueba previa a la conferencia](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
-
-[Describe lo que aprenderemos]
-
-### Introducción
-
-Describe lo que se cubrirá
-
-- XHR y buscar
-- Análisis JSON
-- visualización de datos
-- plantilla de fila de tabla
-
-- asignación: comentario + código de refactorización
-- desafío: hazlo bonito
-
-> Notas
-
-### Requisito previo
-
-¿Qué pasos deberían haberse cubierto antes de esta lección?
-
-### Preparación
-
-Pasos preparatorios para comenzar esta lección
-
----
-
-[Recorrer el contenido en bloques]
-
-## [Tema 1]
-
-### Tarea:
-
-Trabajen juntos para mejorar progresivamente su base de código para construir el proyecto con código compartido:
-
-`` `html
-bloques de código
-''
-
-✅ Comprobación de conocimientos: aproveche este momento para ampliar el conocimiento de los estudiantes con preguntas abiertas
-
-## [Tema 2]
-
-## [Tema 3]
-
-🚀 Desafío: agregue un desafío para que los estudiantes trabajen en colaboración en clase para mejorar el proyecto
-
-Opcional: agregue una captura de pantalla de la interfaz de usuario de la lección completa si corresponde
-
-## [Prueba posterior a la conferencia](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
-
-## Revisión y autoestudio
-
-**Vencimiento de la asignación [MM/AA]**: [Nombre de la asignación](assignment.es.md)
diff --git a/7-bank-project/3-data/translations/README.fr.md b/7-bank-project/3-data/translations/README.fr.md
deleted file mode 100644
index d516a821..00000000
--- a/7-bank-project/3-data/translations/README.fr.md
+++ /dev/null
@@ -1,334 +0,0 @@
-# Créer une application bancaire Partie 3: Méthodes de récupération et d'utilisation des données
-
-## Quiz préalable
-
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45?loc=fr)
-
-### Introduction
-
-Au cœur de chaque application Web, il y a des *données*. Les données peuvent prendre de nombreuses formes, mais leur objectif principal est toujours d'afficher des informations pour l'utilisateur. Les applications Web devenant de plus en plus interactives et complexes, la manière dont l'utilisateur accède aux informations et interagit avec elles est désormais un élément clé du développement Web.
-
-Dans cette leçon, nous verrons comment récupérer des données d'un serveur de manière asynchrone et utiliser ces données pour afficher des informations sur une page Web sans recharger le code HTML.
-
-### Prérequis
-
-Vous devez avoir créé la partie [Formulaire de connexion et d'inscription](../../2-forms/translations/README.fr.md) de l'application Web pour cette leçon. Vous devez également installer [Node.js](https://nodejs.org) et [exécuter l'API du serveur](../../api/translations/README.fr.md) localement afin d'obtenir les données de compte.
-
-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
-```
-
----
-
-## AJAX et la récupération de données
-
-Les sites Web traditionnels mettent à jour le contenu affiché lorsque l’utilisateur sélectionne un lien ou soumet des données à l’aide d’un formulaire, en rechargeant la page HTML complète. Chaque fois que de nouvelles données doivent être chargées, le serveur Web renvoie une toute nouvelle page HTML qui doit être traitée par le navigateur, interrompant l’action actuelle de l’utilisateur et limitant les interactions pendant le rechargement. Ce flux de travail est également appelé *Application multipage* ou *AMP*.
-
-![Mettre à jour le flux de travail dans une application multipage](../images/mpa.png)
-
-Lorsque les applications Web ont commencé à devenir plus complexes et interactives, une nouvelle technique appelée [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) a émergé. Cette technique permet aux applications Web d’envoyer et de récupérer des données à partir d’un serveur de manière asynchrone à l’aide de JavaScript, sans avoir à recharger la page HTML, ce qui se traduit par des mises à jour plus rapides et des interactions utilisateur plus fluides. Lorsque de nouvelles données sont reçues du serveur, la page HTML actuelle peut également être mise à jour avec JavaScript à l’aide de l’API [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model). Au fil du temps, cette approche a évolué pour devenir ce qu’on appelle maintenant une [*Application d’une seule page* ou *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
-
-![Mettre à jour le flux de travail dans une application d’une seule page](../images/spa.png)
-
-Lors de l’introduction d’AJAX, la seule API disponible pour récupérer des données de manière asynchrone était [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Mais les navigateurs modernes implémentent désormais également [l’API `Fetch`](https://developer.mozilla.org/docs/Web/API/Fetch_API) plus pratique et plus puissante, qui utilise des promesses et est mieux adaptée à la manipulation des données JSON.
-
-> Bien que tous les navigateurs modernes prennent en charge l’API Fetch, si vous souhaitez que votre application Web fonctionne sur des navigateurs hérités ou anciens, il est toujours judicieux de vérifier d’abord le [tableau de compatibilité sur caniuse.com](https://caniuse.com/fetch).
-
-### Tâche
-
-Dans [la leçon précédente](../../2-forms/translations/README.fr.md) nous avons implémenté le formulaire d’inscription pour créer un compte. Nous allons maintenant ajouter du code pour vous connecter à l’aide d’un compte existant et récupérer ses données. Ouvrez le fichier `app.js` et ajoutez une nouvelle fonction `login`:
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-}
-```
-
-Ici, nous commençons par récupérer l’élément de formulaire avec `getElementById()`, puis nous obtenons le nom d’utilisateur à partir de l’entrée avec `loginForm.user.value`. Chaque contrôle de formulaire est accessible par son nom (défini dans le code HTML à l’aide de l’attribut `name`) en tant que propriété du formulaire.
-
-De la même manière que nous avons fait pour l’enregistrement, nous allons créer une autre fonction pour effectuer une demande de serveur, mais cette fois pour récupérer les données du compte:
-
-```js
-async function getAccount(user) {
-  try {
-    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
-    return await response.json();
-  } catch (error) {
-    return { error: error.message || 'Unknown error' };
-  }
-}
-```
-
-Nous utilisons l’API `fetch` pour demander les données de manière asynchrone au serveur, mais cette fois, nous n’avons pas besoin de paramètres supplémentaires autres que l’URL à appeler, car nous n’interrogeons que des données. Par défaut, `fetch` crée une requête HTTP [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET), ce que nous recherchons ici.
-
-✅ `encodeURIComponent()` est une fonction qui échappe les caractères spéciaux pour URL. Quels problèmes pourrions-nous avoir si nous n’appelons pas cette fonction et n’utilisons pas directement la valeur `user` dans l’URL?
-
-Mettons maintenant à jour notre fonction `login` pour utiliser `getAccount`:
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-  const data = await getAccount(user);
-
-  if (data.error) {
-    return console.log('loginError', data.error);
-  }
-
-  account = data;
-  navigate('/dashboard');
-}
-```
-
-Tout d’abord, comme `getAccount` est une fonction asynchrone, nous devons la faire correspondre avec le mot-clé `await` pour attendre le résultat du serveur. Comme pour toute demande de serveur, nous devons également traiter les cas d’erreur. Pour l’instant, nous allons seulement ajouter un message de journal pour afficher l’erreur, et y revenir plus tard.
-
-Ensuite, nous devons stocker les données quelque part afin de pouvoir les utiliser plus tard pour afficher les informations du tableau de bord. Étant donné que la variable `account` n’existe pas encore, nous allons créer une variable globale pour elle en haut de notre fichier:
-
-```js
-let account = null;
-```
-
-Une fois les données utilisateur enregistrées dans une variable, nous pouvons naviguer de la page *login* au *dashboard* en utilisant la fonction `navigate()` que nous avons déjà.
-
-Enfin, nous devons appeler notre fonction `login` lorsque le formulaire de login est soumis, en modifiant le HTML:
-
-```html
-<form id="loginForm" action="javascript:login()">
-```
-
-Vérifiez que tout fonctionne correctement en enregistrant un nouveau compte et en essayant de vous connecter à l’aide du même compte.
-
-Avant de passer à la partie suivante, nous pouvons également compléter la fonction `register` en ajoutant ceci au bas de la fonction:
-
-```js
-account = result;
-navigate('/dashboard');
-```
-
-✅ Saviez-vous que par défaut, vous ne pouvez appeler les API du serveur qu’à partir du *même domaine et port* que la page Web que vous consultez? Il s’agit d’un mécanisme de sécurité appliqué par les navigateurs. Mais attendez, notre application web s’exécute sur 'localhost:3000' alors que l’API du serveur s’exécute sur `localhost:3000`, pourquoi cela fonctionne-t-il? En utilisant une technique appelée [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), il est possible d’effectuer des requêtes HTTP inter-origines si le serveur ajoute des en-têtes spéciaux à la réponse, ce qui permet des exceptions pour des domaines spécifiques.
-
-> En savoir plus sur les API en suivant cette [leçon](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
-
-## Mettre à jour le code HTML pour afficher les données
-
-Maintenant que nous avons les données utilisateur, nous devons mettre à jour le code HTML existant pour l’afficher. Nous savons déjà comment récupérer un élément du DOM en utilisant par exemple `document.getElementById()`. Une fois que vous avez un élément de base, voici quelques API que vous pouvez utiliser pour le modifier ou y ajouter des éléments enfants:
-
-- En utilisant la propriété [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent), vous pouvez modifier le texte d’un élément. Notez que la modification de cette valeur supprime tous les enfants de l’élément (le cas échéant) et le remplace par le texte fourni. En tant que tel, c’est aussi une méthode efficace pour supprimer tous les enfants d’un élément donné en lui attribuant une chaîne vide `''` à celui-ci.
-
-- En utilisant [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) avec la méthode [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append), vous pouvez créer et attacher un ou plusieurs nouveaux éléments enfants.
-
-✅ En utilisant la propriété [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) d’un élément, il est également possible de modifier son contenu HTML, mais celui-ci doit être évité car il est vulnérable aux attaques [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting).
-
-### Tâche
-
-Avant de passer à l’écran du tableau de bord, il y a encore une chose que nous devrions faire sur la page *connexion*. Actuellement, si vous essayez de vous connecter avec un nom d’utilisateur qui n’existe pas, un message s’affiche dans la console, mais pour un utilisateur normal, rien ne change et vous ne savez pas ce qui se passe.
-
-Ajoutons un élément d’espace réservé dans le formulaire de connexion où nous pouvons afficher un message d’erreur si nécessaire. Un bon endroit serait juste avant la connexion `<button>`:
-
-```html
-...
-<div id="loginError"></div>
-<button>Login</button>
-...
-```
-
-Cet élément `<div>` est vide, ce qui signifie que rien ne sera affiché à l’écran tant que nous n’y aurons pas ajouté du contenu. Nous lui donnons également un `id` afin que nous puissions le récupérer facilement avec JavaScript.
-
-Revenez au fichier `app.js` et créez une nouvelle fonction d’assistance `updateElement`:
-
-```js
-function updateElement(id, text) {
-  const element = document.getElementById(id);
-  element.textContent = text;
-}
-```
-
-Celui-ci est assez simple: selon un élément *id* et *text*, il mettra à jour le contenu textuel de l’élément DOM avec l'`id` correspondant. Utilisons cette méthode à la place du message d’erreur précédent dans la fonction `login`:
-
-```js
-if (data.error) {
-  return updateElement('loginError', data.error);
-}
-```
-
-Maintenant, si vous essayez de vous connecter avec un compte non valide, vous devriez voir quelque chose comme ceci:
-
-![Capture d’écran montrant le message d’erreur affiché lors de la connexion](../images/login-error.png)
-
-Maintenant, nous avons un texte d’erreur qui apparaît visuellement, mais si vous l’essayez avec un lecteur d’écran, vous remarquerez que rien n’est annoncé. Pour que le texte ajouté dynamiquement à une page soit annoncé par les lecteurs d’écran, il devra utiliser quelque chose appelé [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Ici, nous allons utiliser un type spécifique de région en direct (live region) appelée alerte:
-
-```html
-<div id="loginError" role="alert"></div>
-```
-
-Implémentez le même comportement pour les erreurs de la fonction `register` (n’oubliez pas de mettre à jour le code HTML).
-
-## Afficher les informations sur le tableau de bord
-
-En utilisant les mêmes techniques que nous venons de voir, nous nous occuperons également d’afficher les informations du compte sur la page du tableau de bord.
-
-Voici à quoi ressemble un objet de compte reçu du serveur:
-
-```json
-{
-  "user": "test",
-  "currency": "$",
-  "description": "Test account",
-  "balance": 75,
-  "transactions": [
-    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
-    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
-    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
-  ],
-}
-```
-
-> Remarque: pour vous faciliter la vie, vous pouvez utiliser le compte `test` préexistant qui est déjà rempli de données.
-
-### Tâche
-
-Commençons par remplacer la section "Balance" dans le code HTML pour ajouter des éléments d’espace réservé:
-
-```html
-<section>
-  Balance: <span id="balance"></span><span id="currency"></span>
-</section>
-```
-
-Nous ajouterons également une nouvelle section juste en dessous pour afficher la description du compte:
-
-```html
-<h2 id="description"></h2>
-```
-
-✅ Étant donné que la description du compte fonctionne comme un titre pour le contenu en dessous, elle est marquée sémantiquement comme un en-tête. Apprenez-en davantage sur l’importance de [structure de titre](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) pour l’accessibilité, et jetez un coup d’œil critique à la page pour déterminer ce qui pourrait être un autre titre.
-
-Ensuite, nous allons créer une nouvelle fonction dans `app.js` pour remplir l’espace réservé:
-
-```js
-function updateDashboard() {
-  if (!account) {
-    return navigate('/login');
-  }
-
-  updateElement('description', account.description);
-  updateElement('balance', account.balance.toFixed(2));
-  updateElement('currency', account.currency);
-}
-```
-
-Tout d’abord, nous vérifions que nous avons les données de compte dont nous avons besoin avant d’aller plus loin. Ensuite, nous utilisons la fonction `updateElement()` que nous avons créée précédemment pour mettre à jour le code HTML.
-
-> Pour rendre l’affichage de la balance plus joli, nous utilisons la méthode [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) pour forcer l’affichage de la valeur avec 2 chiffres après la virgule.
-
-Maintenant, nous devons appeler notre fonction `updateDashboard()` chaque fois que le tableau de bord est chargé. Si vous avez déjà terminé le [devoir de la leçon 1](../../1-template-route/translations/README.fr.md) cela devrait être simple, sinon vous pouvez utiliser l’implémentation suivante.
-
-Ajoutez ce code à la fin de la fonction `updateRoute()`:
-
-```js
-if (typeof route.init === 'function') {
-  route.init();
-}
-```
-
-Et mettez à jour la définition des itinéraires avec:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
-};
-```
-
-Avec ce changement, chaque fois que la page du tableau de bord est affichée, la fonction `updateDashboard()` est appelée. Après une connexion, vous devriez alors être en mesure de voir le solde du compte, la devise et la description.
-
-## Créer dynamiquement des lignes de tableau avec des modèles HTML
-
-Dans la [première leçon](../../1-template-route/translations/README.fr.md) nous avons utilisé des modèles HTML avec la méthode [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) pour implémenter la navigation dans notre application. Les modèles peuvent également être plus petits et utilisés pour remplir dynamiquement des parties répétitives d’une page.
-
-Nous utiliserons une approche similaire pour afficher la liste des transactions dans le tableau HTML.
-
-### Tâche
-
-Ajoutez un nouveau modèle dans le code HTML `<body>`:
-
-```html
-<template id="transaction">
-  <tr>
-    <td></td>
-    <td></td>
-    <td></td>
-  </tr>
-</template>
-```
-
-Ce modèle représente une seule ligne de tableau, avec les 3 colonnes que nous voulons remplir: *date*, *object* et *amount* d’une transaction.
-
-Ensuite, ajoutez cette propriété `id` à l’élément `<tbody>` du tableau dans le modèle de tableau de bord pour faciliter la recherche à l’aide de JavaScript:
-
-```html
-<tbody id="transactions"></tbody>
-```
-
-Notre HTML est prêt, passons au code JavaScript et créons une nouvelle fonction `createTransactionRow`:
-
-```js
-function createTransactionRow(transaction) {
-  const template = document.getElementById('transaction');
-  const transactionRow = template.content.cloneNode(true);
-  const tr = transactionRow.querySelector('tr');
-  tr.children[0].textContent = transaction.date;
-  tr.children[1].textContent = transaction.object;
-  tr.children[2].textContent = transaction.amount.toFixed(2);
-  return transactionRow;
-}
-```
-
-Cette fonction fait exactement ce que ses noms impliquent: en utilisant le modèle que nous avons créé précédemment, elle crée une nouvelle ligne de tableau et remplit son contenu à l’aide de données de transaction. Nous l’utiliserons dans notre fonction `updateDashboard()` pour remplir la table:
-
-```js
-const transactionsRows = document.createDocumentFragment();
-for (const transaction of account.transactions) {
-  const transactionRow = createTransactionRow(transaction);
-  transactionsRows.appendChild(transactionRow);
-}
-updateElement('transactions', transactionsRows);
-```
-
-Ici, nous utilisons la méthode [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) qui crée un nouveau fragment DOM sur lequel nous pouvons travailler, avant de finalement l’attacher à notre tableau HTML.
-
-Il reste encore une chose à faire avant que ce code puisse fonctionner, car notre fonction `updateElement()` ne prend actuellement en charge que le contenu texte. Changeons un peu son code:
-
-```js
-function updateElement(id, textOrNode) {
-  const element = document.getElementById(id);
-  element.textContent = ''; // Removes all children
-  element.append(textOrNode);
-}
-```
-
-Nous utilisons la méthode [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) car elle permet d’attacher du texte ou des [nœuds DOM](https://developer.mozilla.org/docs/Web/API/Node) à un élément parent, ce qui est parfait pour tous nos cas d’utilisation.
-
-Si vous essayez d’utiliser le compte `test` pour vous connecter, vous devriez maintenant voir une liste de transactions sur le tableau de bord 🎉.
-
----
-
-## 🚀 Challenge
-
-Travaillez ensemble pour que la page du tableau de bord ressemble à une véritable application bancaire. Si vous avez déjà stylisé votre application, essayez d'utiliser des [requêtes multimédias](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) pour créer un [design réactif](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) qui fonctionne bien sur les ordinateurs de bureau et les appareils mobiles.
-
-Voici un exemple de page de tableau de bord stylisée:
-
-![Capture d'écran d'un exemple de résultat du tableau de bord après le style](../../images/screen2.png)
-
-## Quiz de validation des connaissances
-
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46?loc=fr)
-
-## Affectation
-
-[Refactorisez et commentez votre code](assignment.fr.md)
diff --git a/7-bank-project/3-data/translations/README.hi.md b/7-bank-project/3-data/translations/README.hi.md
deleted file mode 100644
index 3da0647f..00000000
--- a/7-bank-project/3-data/translations/README.hi.md
+++ /dev/null
@@ -1,337 +0,0 @@
-# एक बैंकिंग ऐप पार्ट 3 का निर्माण करें: डेटा प्राप्त करने और उपयोग करने के तरीके
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45?loc=hi)
-
-### परिचय
-
-हर वेब एप्लिकेशन के मूल में *डेटा* है। डेटा कई रूप ले सकता है, लेकिन इसका मुख्य उद्देश्य हमेशा उपयोगकर्ता को जानकारी प्रदर्शित करना है। वेब एप्लिकेशन तेजी से इंटरेक्टिव और जटिल होने के साथ, उपयोगकर्ता कैसे पहुंचता है और जानकारी के साथ सहभागिता करता है, अब वेब विकास का एक महत्वपूर्ण हिस्सा है।
-
-इस पाठ में, हम एक सर्वर से डेटा को असिंक्रोनोस  रूप से प्राप्त करने का तरीका देखेंगे, और HTML को पुनः लोड किए बिना वेब पेज पर जानकारी प्रदर्शित करने के लिए इस डेटा का उपयोग करेंगे।
-
-### शर्त
-
-इस पाठ के लिए आपको वेब ऐप का [लॉगिन और पंजीकरण फॉर्म](../../2-forms/translations/README.hi.md) भाग बनाने की आवश्यकता है। आपको स्थानीय रूप से [Node.js](https://nodejs.org) और [सर्वर एपीआई चलाने](../../api/translations/README.hi.md) स्थापित करने की आवश्यकता है ताकि आपको खाता डेटा प्राप्त हो सके।
-
-आप परीक्षण कर सकते हैं कि सर्वर टर्मिनल में इस कमांड को निष्पादित करके ठीक से चल रहा है:
-
-```sh
-curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
-```
-
----
-
-## AJAX और डेटा लाना
-
-पारंपरिक वेब साइटें प्रदर्शित सामग्री को अपडेट करती हैं जब उपयोगकर्ता एक लिंक का चयन करता है या पूर्ण HTML पृष्ठ को फिर से लोड करके एक फॉर्म का उपयोग करके डेटा सबमिट करता है। हर बार नए डेटा को लोड करने की आवश्यकता होती है, वेब सर्वर एक नया HTML पृष्ठ लौटाता है जिसे ब्राउज़र द्वारा संसाधित करने की आवश्यकता होती है, वर्तमान उपयोगकर्ता कार्रवाई को बाधित करता है और पुनः लोड के दौरान इंटरैक्शन को सीमित करता है। इस वर्कफ़्लो को *मल्टी-पेज एप्लिकेशन* या *एमपीए* भी कहा जाता है।
-
-![मल्टी-पेज एप्लिकेशन में वर्कफ़्लो अपडेट करें](../images/mpa.png)
-
-जब वेब एप्लिकेशन अधिक जटिल और संवादात्मक होने लगे, तो [AJAX (असिंक्रोनोस  जावास्क्रिप्ट और XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) नामक एक नई तकनीक सामने आई। यह तकनीक वेब ऐप्स को HTML पेज को फिर से लोड किए बिना, जावास्क्रिप्ट के उपयोग से सर्वर से असिंक्रोनोस  रूप से डेटा भेजने और पुनः प्राप्त करने की अनुमति देती है, जिसके परिणामस्वरूप तेज़ अपडेट और सुगम उपयोगकर्ता सहभागिता होती है। जब सर्वर से नया डेटा प्राप्त होता है, तो वर्तमान HTML पृष्ठ को [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Melel) API का उपयोग करके जावास्क्रिप्ट के साथ भी अपडेट किया जा सकता है। समय के साथ, यह दृष्टिकोण अब एक [* सिंगल-पेज एप्लिकेशन* या *एसपीए*](https://en.wikipedia.org/wiki/Single-page_application) कहलाता है।
-
-![एकल-पृष्ठ एप्लिकेशन में वर्कफ़्लो अपडेट करें](../images/spa.png)
-
-जब AJAX पहली बार पेश किया गया था, तो डेटा को अतुल्य रूप से लाने के लिए उपलब्ध एकमात्र API [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) था। लेकिन आधुनिक ब्राउज़र अब अधिक सुविधाजनक और शक्तिशाली [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API) लागू करते हैं, जो प्रामिसेस का उपयोग करता है और हेरफेर करने के लिए बेहतर अनुकूल है JSON डेटा।
-
-> जबकि सभी आधुनिक ब्राउज़र `Fetch API` का समर्थन करते हैं, यदि आप चाहते हैं कि आपका वेब एप्लिकेशन विरासत या पुराने ब्राउज़रों पर काम करे, तो यह हमेशा एक अच्छा विचार है कि [caniuse.com पर संगतता तालिका](https://caniuse.com/fetch) पहले की जाँच करें।
-
-### टास्क
-
-[पिछले पाठ में](../../2-forms/translations/README.hi.md) हमने खाता बनाने के लिए पंजीकरण फ़ॉर्म लागू किया था। अब हम किसी मौजूदा खाते का उपयोग कर लॉगिन करने के लिए कोड जोड़ेंगे और उसका डेटा प्राप्त करेंगे। `app.js` फ़ाइल खोलें और एक नया `login` फ़ंक्शन जोड़ें:
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-}
-```
-
-यहाँ हम `getElementById()` के साथ फॉर्म एलिमेंट को पुनः प्राप्त करके शुरू करते हैं, और फिर हम `loginForm.user.value` के साथ इनपुट से यूज़रनेम प्राप्त करते हैं। प्रत्येक प्रपत्र नियंत्रण को उसके नाम (फॉर्म का गुण के रूप में HTML में `name` विशेषता का उपयोग करके सेट) तक पहुँचा जा सकता है।
-
-पंजीकरण के लिए हमने जो कुछ किया था, उसी तरह से, हम सर्वर अनुरोध करने के लिए एक और कार्य करेंगे, लेकिन इस बार खाता डेटा प्राप्त करने के लिए:
-
-```js
-async function getAccount(user) {
-  try {
-    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
-    return await response.json();
-  } catch (error) {
-    return { error: error.message || 'Unknown error' };
-  }
-}
-```
-
-हम सर्वर से एसिंक्रोनस रूप से डेटा का अनुरोध करने के लिए `fetch` एपीआई का उपयोग करते हैं, लेकिन इस बार हमें कॉल करने के लिए URL के अलावा किसी भी अतिरिक्त पैरामीटर की आवश्यकता नहीं है, क्योंकि हम केवल डेटा क्वेरी कर रहे हैं। डिफ़ॉल्ट रूप से, 'fetch' एक [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET)  HTTP अनुरोध बनाता है , जो हम यहाँ चाह रहे हैं।
-
-✅ `encodeURIComponent()` एक फ़ंक्शन है जो URL के लिए विशेष वर्णों से बच जाता है। यदि हम इस फ़ंक्शन को कॉल नहीं करते हैं और URL में सीधे `user` वैल्यू का उपयोग करते हैं, तो संभवतः हमारे पास क्या समस्याएँ हो सकती हैं?
-
-आइए अब `getAccount` का उपयोग करने के लिए हमारे `login` फ़ंक्शन को अपडेट करें:
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-  const data = await getAccount(user);
-
-  if (data.error) {
-    return console.log('loginError', data.error);
-  }
-
-  account = data;
-  navigate('/dashboard');
-}
-```
-
-सबसे पहले, जैसा कि `getAccount` एक असिंक्रोनोस  फ़ंक्शन है, जिसे हमें सर्वर परिणाम की प्रतीक्षा करने के लिए `await` कीवर्ड के साथ मेल खाना चाहिए। किसी भी सर्वर अनुरोध के साथ, हमें त्रुटि मामलों से भी निपटना होगा। अभी के लिए हम केवल त्रुटि प्रदर्शित करने के लिए एक लॉग संदेश जोड़ेंगे, और बाद में वापस आएँगे।
-
-फिर हमें डेटा को कहीं स्टोर करना होगा ताकि हम बाद में इसे डैशबोर्ड इनफार्मेशन्स को प्रदर्शित कर सकें। चूंकि `account` चर अभी तक मौजूद नहीं है, हम अपनी फ़ाइल के शीर्ष पर इसके लिए एक वैश्विक चर बनाएंगे।
-
-```js
-let account = null;
-```
-
-उपयोगकर्ता डेटा को एक चर में सहेजे जाने के बाद हम पहले से मौजूद `navigate()` फ़ंक्शन का उपयोग करके *लॉगिन* पृष्ठ से *डैशबोर्ड* तक नेविगेट कर सकते हैं।
-
-अंत में, हमें HTML को संशोधित करके लॉगिन फ़ॉर्म सबमिट करने पर हमारे `login` फ़ंक्शन को कॉल करने की आवश्यकता है:
-
-```html
-<form id="loginForm" action="javascript:login()">
-```
-
-परीक्षण करें कि नया खाता पंजीकृत करके और उसी खाते का उपयोग करके लॉगिन करने का प्रयास करके सब कुछ सही ढंग से काम कर रहा है।
-
-अगले भाग पर जाने से पहले, हम फ़ंक्शन के निचले भाग में इसे जोड़कर `register` फ़ंक्शन को भी पूरा कर सकते हैं:
-
-```js
-account = result;
-navigate('/dashboard');
-```
-
-✅ क्या आप जानते हैं कि डिफ़ॉल्ट रूप से, आप सर्वर API को केवल उसी वेब पेज से *उसी डोमेन और पोर्ट* से कॉल कर सकते हैं जो आप देख रहे हैं? यह सुरक्षा तंत्र है जो ब्राउज़र द्वारा लागू किया जाता है। लेकिन रुकिए, हमारा वेब ऐप `localhost:3000` पर चल रहा है जबकि सर्वर एपीआई `localhost:5000` पर चल रहा है, यह काम क्यों नहीं करता है? [क्रॉस-ओरिजिनल रिसोर्स शेयरिंग (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS) नामक तकनीक का उपयोग करके, क्रॉस-ऑरिजनल HTTP रिक्वेस्ट करना संभव है अगर सर्वर प्रतिक्रिया के लिए विशेष हेडर जोड़ता है, विशिष्ट डोमेन के लिए अपवाद की अनुमति देता है।
-
-> इसे [पाठ](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon) ले कर एपीआई के बारे में और जानें
-
-## डेटा प्रदर्शित करने के लिए HTML अपडेट करें
-
-अब जब हमारे पास उपयोगकर्ता डेटा है, तो हमें इसे प्रदर्शित करने के लिए मौजूदा HTML को अपडेट करना होगा। हम पहले से ही जानते हैं कि DOM से एक एलेमेन्ट कैसे प्राप्त किया जा सकता है उदाहरण के लिए `document.getElementById()` का उपयोग करना। आपके पास आधार एलेमेन्ट होने के बाद, यहां कुछ API हैं जिनका उपयोग आप इसे संशोधित करने या इसमें बाल एलेमेन्ट जोड़ने के लिए कर सकते हैं:
-
-- [`TextContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) प्रॉपर्टी का उपयोग करके आप किसी एलेमेन्ट का पाठ बदल सकते हैं। ध्यान दें कि इस मान को बदलने से सभी एलेमेन्ट के बच्चे (यदि कोई हो) को हटा देता है और प्रदान किए गए पाठ के साथ बदल देता है। जैसे, यह किसी दिए गए एलेमेन्ट के सभी बच्चों को एक खाली स्ट्रिंग `''` को निर्दिष्ट करके निकालने की एक कुशल विधि है।
-
-- [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement)  के साथ [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) विधि का उपयोग करके आप बना सकते हैं और एक या अधिक नए बाल एलेमेन्ट संलग्न करें।
-
-✅ किसी एलेमेन्ट की प्रॉपर्टी का उपयोग करते हुए [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) का उपयोग करना संभव है, लेकिन यह एक होना चाहिए [क्रॉस-साइट स्क्रिप्टिंग (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) हमलों के कारण इसकी चपेट में आने से बचा जा सकता है।
-
-### टास्क
-
-डैशबोर्ड स्क्रीन पर जाने से पहले, एक और चीज़ है जो हमें *लॉगिन* पेज पर करनी चाहिए। वर्तमान में, यदि आप एक उपयोगकर्ता नाम के साथ लॉगिन करने की कोशिश करते हैं जो मौजूद नहीं है, तो कंसोल में एक संदेश दिखाया जाता है लेकिन एक सामान्य उपयोगकर्ता के लिए कुछ भी नहीं बदलता है और आपको नहीं पता कि क्या चल रहा है।
-
-आइए लॉगिन फॉर्म में एक प्लेसहोल्डर एलेमेन्ट जोड़ें जहां हम एक त्रुटि संदेश प्रदर्शित कर सकते हैं यदि आवश्यक हो। लॉगिन `<button>` के ठीक पहले एक अच्छी जगह होगी:
-
-```html
-...
-<div id="loginError"></div>
-<button>Login</button>
-...
-```
-
-यह `<div>` एलेमेन्ट रिक्त है, जिसका अर्थ है कि स्क्रीन पर कुछ भी प्रदर्शित नहीं किया जाएगा जब तक हम इसमें कुछ सामग्री नहीं जोड़ते। हम इसे एक `id` भी देते हैं ताकि हम इसे जावास्क्रिप्ट के साथ आसानी से प्राप्त कर सकें।
-
-
-`app.js` फ़ाइल पर वापस जाएँ और एक नया सहायक फ़ंक्शन `updateElement` बनाएँ:
-
-```js
-function updateElement(id, text) {
-  const element = document.getElementById(id);
-  element.textContent = text;
-}
-```
-
-यह एक बहुत सीधा है: एक एलेमेन्ट *आईडी* और *टेक्स्ट* दिया गया है, यह DOM एलेमेन्ट के टेक्स्ट कंटेंट को `id` के मेल से अपडेट करेगा। आइए `login` फ़ंक्शन में पिछले त्रुटि संदेश के स्थान पर इस मेथड का उपयोग करें:
-
-```js
-if (data.error) {
-  return updateElement('loginError', data.error);
-}
-```
-
-अब यदि आप अमान्य खाते से लॉगिन करने का प्रयास करते हैं, तो आपको कुछ इस तरह से देखना चाहिए:
-
-![लॉगिन के दौरान प्रदर्शित त्रुटि संदेश दिखाने वाला स्क्रीनशॉट](../images/login-error.png)
-
-अब हमारे पास त्रुटि पाठ है जो नेत्रहीन रूप से दिखाई देता है, लेकिन यदि आप इसे एक स्क्रीन रीडर के साथ आज़माते हैं तो आप देखेंगे कि कुछ भी घोषित नहीं हुआ है। पाठ पाठकों के लिए गतिशील रूप से एक पृष्ठ में जोड़े जाने की घोषणा के लिए, इसे [लाइव रीजन](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) नामक कुछ का उपयोग करने की आवश्यकता होगी। यहां हम एक विशिष्ट प्रकार के लाइव क्षेत्र का उपयोग करने जा रहे हैं, जिसे अलर्ट कहा जाता है:
-
-```html
-<div id="loginError" role="alert"></div>
-```
-
-`register` फ़ंक्शन त्रुटियों के लिए समान व्यवहार को लागू करें (एचटीएमएल को अपडेट करना न भूलें)।
-
-## डैशबोर्ड पर जानकारी प्रदर्शित करें
-
-हमने अभी जो तकनीक देखी है, उसी का उपयोग करते हुए, हम डैशबोर्ड पृष्ठ पर खाता जानकारी प्रदर्शित करने का भी ध्यान रखेंगे।
-
-सर्वर से प्राप्त खाता ऑब्जेक्ट ऐसा दिखता है:
-
-```json
-{
-  "user": "test",
-  "currency": "$",
-  "description": "Test account",
-  "balance": 75,
-  "transactions": [
-    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
-    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
-    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
-  ],
-}
-```
-
-> नोट: अपने जीवन को आसान बनाने के लिए, आप पहले से मौजूद `test` खाते का उपयोग कर सकते हैं जो पहले से ही डेटा से आबाद है।
-
-### टास्क
-
-प्लेसहोल्डर एलिमेंटस को जोड़ने के लिए HTML में "बैलेंस" अनुभाग को प्रतिस्थापित करके शुरू करें:
-
-```html
-<section>
-  Balance: <span id="balance"></span><span id="currency"></span>
-</section>
-```
-
-
-खाता विवरण प्रदर्शित करने के लिए हम नीचे एक नया अनुभाग भी जोड़ेंगे:
-
-```html
-<h2 id="description"></h2>
-```
-
-✅ चूंकि खाता विवरण इसके नीचे की सामग्री के लिए एक शीर्षक के रूप में कार्य करता है, इसलिए इसे एक शीर्षक के रूप में शब्दार्थ के रूप में चिह्नित किया जाता है। पहुँच क्षमता के लिए [शीर्षक संरचना](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) के बारे में और जानें, और क्या निर्धारित करने के लिए पृष्ठ पर एक महत्वपूर्ण नज़र डालें एक शीर्षक हो सकता है।
-
-अगला, हम प्लेसहोल्डर में भरने के लिए `app.js` में एक नया फ़ंक्शन बनाएंगे:
-
-```js
-function updateDashboard() {
-  if (!account) {
-    return navigate('/login');
-  }
-
-  updateElement('description', account.description);
-  updateElement('balance', account.balance.toFixed(2));
-  updateElement('currency', account.currency);
-}
-```
-
-पहले, हम जाँचते हैं कि आगे जाने से पहले हमारे पास खाता डेटा है जो हमें चाहिए। तब हम HTML को अपडेट करने के लिए पहले बनाए गए `updateElement()` फ़ंक्शन का उपयोग करते हैं।
-
-> बैलेंस डिस्प्ले को प्रीटियर करने के लिए, हम दशमलव बिंदु के बाद 2 अंकों के साथ मान प्रदर्शित करने के लिए मजबूर करने के लिए [`toFixed (2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) विधि का उपयोग करते हैं।
-
-अब हमें अपने `updateDashboard()` को हर बार डैशबोर्ड लोड होने पर कॉल करने की आवश्यकता है। यदि आपने पहले ही [पाठ 1 असाइनमेंट](../../1-template-route/translations/assignment.hi.md) को पूरा कर लिया है, तो यह स्ट्रेचेफोवर्ड होना चाहिए, अन्यथा आप निम्नलिखित कार्यान्वयन का उपयोग कर सकते हैं।
-
-इस कोड को `updateRoute()` फ़ंक्शन के अंत में जोड़ें:
-
-```js
-if (typeof route.init === 'function') {
-  route.init();
-}
-```
-
-और मार्गों की परिभाषा के साथ अद्यतन करें:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
-};
-```
-
-इस परिवर्तन के साथ, हर बार डैशबोर्ड पृष्ठ प्रदर्शित होने पर, फ़ंक्शन `updateDashboard()` कल किया जाता है। एक लॉगिन के बाद, आपको तब खाता शेष, मुद्रा और विवरण देखने में सक्षम होना चाहिए।
-
-## HTML टेम्पलेट के साथ गतिशील रूप से तालिका पंक्तियाँ बनाएं
-
-[पहला पाठ](../../1-template-route/translations/README.hi.md) मे हमने एचटीएमएल टेम्पलेटके साथ [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) मेथड को नेवीगेशनके लिए अपने एप मे लागू किया था । टेम्प्लेट छोटे भी हो सकते हैं और किसी पृष्ठ के दोहराए गए भागों को गतिशील रूप से आबाद करने के लिए उपयोग किए जा सकते हैं।
-
-हम एचटीएमएल तालिका में लेनदेन की सूची प्रदर्शित करने के लिए एक समान दृष्टिकोण का उपयोग करेंगे।
-
-### टास्क
-
-HTML `<body>` में एक नया टेम्प्लेट जोड़ें :
-
-```html
-<template id="transaction">
-  <tr>
-    <td></td>
-    <td></td>
-    <td></td>
-  </tr>
-</template>
-```
-
-यह टेम्प्लेट एक एकल तालिका पंक्ति का प्रतिनिधित्व करता है, 3 कॉलम जिन्हें हम आबाद करना चाहते हैं: *डेट*, *ऑब्जेक्ट* और लेनदेन की *अमाउन्ट*।
-
-फिर, इस `<id>` गुण को डैशबोर्ड टेम्पलेट के भीतर स्थित तालिका के तत्व `<tbody>` में जोड़ें, जिससे जावास्क्रिप्ट का उपयोग करना आसान हो:
-
-```html
-<tbody id="transactions"></tbody>
-```
-
-हमारा HTML तैयार है, चलो जावास्क्रिप्ट कोड पर जाएँ और एक नया फ़ंक्शन `createTransactionRow` बनाएं :
-
-```js
-function createTransactionRow(transaction) {
-  const template = document.getElementById('transaction');
-  const transactionRow = template.content.cloneNode(true);
-  const tr = transactionRow.querySelector('tr');
-  tr.children[0].textContent = transaction.date;
-  tr.children[1].textContent = transaction.object;
-  tr.children[2].textContent = transaction.amount.toFixed(2);
-  return transactionRow;
-}
-```
-
-यह फ़ंक्शन ठीक वही करता है जो इसके नाम का अर्थ है: हमने पहले बनाए गए टेम्पलेट का उपयोग करके, यह एक नई तालिका पंक्ति बनाता है और लेनदेन डेटा का उपयोग करके अपनी सामग्री में भरता है। हम टेबल को आबाद करने के लिए अपने `updateDashboard()` फ़ंक्शन में इसका उपयोग करेंगे:
-
-```js
-const transactionsRows = document.createDocumentFragment();
-for (const transaction of account.transactions) {
-  const transactionRow = createTransactionRow(transaction);
-  transactionsRows.appendChild(transactionRow);
-}
-updateElement('transactions', transactionsRows);
-```
-
-यहां हम उस मेथड का उपयोग करते हैं [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) जो एक नया DOM टुकड़ा बनाता है जिस पर हम काम कर सकते हैं, अंत में इसे हमारे HTML तालिका में संलग्न करने से पहले।
-
-इस कोड के काम करने से पहले अभी भी हमें एक और काम करना है, क्योंकि हमारा `updateElement()` फ़ंक्शन वर्तमान में केवल टेक्स्ट सामग्री का सपोर्ट करता है। आइए इसके कोड को थोड़ा बदलें:
-
-```js
-function updateElement(id, textOrNode) {
-  const element = document.getElementById(id);
-  element.textContent = ''; // Removes all children
-  element.append(textOrNode);
-}
-```
-
-हम [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) मेथड का उपयोग करते हैं क्योंकि यह टेक्स्ट या [DOM नोड्स](https://developer.mozilla.org/docs/Web/API/Node) को पेरन्ट एलेमेन्टसे जोड़ने की अनुमति देता है , जो हमारे सभी उपयोग मामलों के लिए एकदम सही है।
-
-यदि आप लॉगिन करने के लिए `टेस्ट` खाते का उपयोग करने का प्रयास करते हैं, तो आपको अब डैशबोर्ड पर एक लेनदेन सूची देखनी चाहिए 🎉.
-
----
-
-## 🚀 चुनौती
-
-डैशबोर्ड पृष्ठ को वास्तविक बैंकिंग ऐप की तरह बनाने के लिए एक साथ काम करें। यदि आप पहले से ही अपने ऐप को स्टाइल करते हैं, तो डेस्कटॉप और मोबाइल डिवाइस दोनों पर अच्छी तरह से काम करते हुए [उत्तरदायी डिज़ाइन](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) बनाने के लिए [मीडिया क्वेरीज़](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) का उपयोग करने का प्रयास करें।
-
-यहाँ एक सत्यलेड डैशबोर्ड पृष्ठ का उदाहरण दिया गया है:
-
-![
-स्टाइल के बाद डैशबोर्ड के उदाहरण परिणाम का स्क्रीनशॉट](../../images/screen2.png)
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46?loc=hi)
-
-## असाइनमेंट
-
-[Refactor and comment your code](assignment.hi.md)
diff --git a/7-bank-project/3-data/translations/README.it.md b/7-bank-project/3-data/translations/README.it.md
deleted file mode 100644
index 8e21744a..00000000
--- a/7-bank-project/3-data/translations/README.it.md
+++ /dev/null
@@ -1,334 +0,0 @@
-# Creazione di un'App Bancaria Parte 3: Metodi di Recupero e Utilizzo Dati
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45?loc=it)
-
-### Introduzione
-
-Al centro di ogni applicazione web ci sono i *dati*. I dati possono assumere molte forme, ma il loro scopo principale è sempre quello di mostrare le informazioni all'utente. Con le app web che diventano sempre più interattive e complesse, il modo in cui l'utente accede e interagisce con le informazioni è ora una parte fondamentale dello sviluppo web.
-
-In questa lezione si vedrà come recuperare i dati da un server in modo asincrono e utilizzare questi dati per visualizzare le informazioni su una pagina web senza ricaricare l'HTML.
-
-### Prerequisito
-
-Per questa lezinoe è necessario aver creato la parte [Form di Accesso e Registrazione](../../2-forms/translations/README.it.md) dell'app web. È inoltre necessario installare [Node.js](https://nodejs.org) ed eseguire [l'API del server](../../api/translations/README.it.md)  in locale in modo da ottenere i dati dell'account.
-
-Si può verificare che il server funzioni correttamente eseguendo questo comando in un terminale:
-
-```sh
-curl http://localhost:5000/api
-# -> dovrebbe restituire  "Bank API v1.0.0" come risultato
-```
-
----
-
-## AJAX e recupero dati
-
-I siti Web tradizionali aggiornano il contenuto visualizzato quando l'utente seleziona un collegamento o invia dati utilizzando un form, ricaricando l'intera pagina HTML. Ogni volta che è necessario caricare nuovi dati, il server web restituisce una nuova pagina HTML che deve essere elaborata dal browser, interrompendo l'azione corrente dell'utente e limitando le interazioni durante il ricaricamento. Questo flusso di lavoro è anche chiamato *Applicazione MultiPagina*   o *MPA* (Multi-Page Application) .
-
-![Aggiornare il flusso di lavoro in un'applicazione multipagina](../images/mpa.png)
-
-Quando le applicazioni web hanno iniziato a diventare più complesse e interattive, è emersa una nuova tecnica chiamata [AJAX (Asynchronous JavaScript and XML)](https://it.wikipedia.org/wiki/AJAX)). Questa tecnica consente alle app web di inviare e recuperare dati da un server in modo asincrono utilizzando JavaScript, senza dover ricaricare la pagina HTML, con conseguenti aggiornamenti più rapidi e interazioni utente più fluide. Quando vengono ricevuti nuovi dati dal server, la pagina HTML corrente può anche essere aggiornata con JavaScript utilizzando l'API [DOM](https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model). Nel tempo, questo approccio si è evoluto in quella che ora viene chiamata [*Applicazione a Pagina Singola* o *SPA*](https://it.wikipedia.org/wiki/Single-page_application)  (Single-Page Application).
-
-![Aggiornare il flusso di lavoro in un'applicazione a pagina singola](../images/spa.png)
-
-Quando è stato introdotto per la prima volta AJAX, l'unica API disponibile per recuperare i dati in modo asincrono era [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). I browser moderni ora implementano anche l'[API Fetch](https://developer.mozilla.org/it/docs/Web/API/Fetch_API), più conveniente e potente, che utilizza le promesse ed è più adatta per manipolare i dati JSON.
-
-> Sebbene tutti i browser moderni supportino l'`API Fetch`, se si desidera che la propria applicazione web funzioni su browser legacy o vecchi, è sempre una buona idea controllare prima la [tabella di compatibilità su caniuse.com](https://caniuse.com/fetch).
-
-### Attività
-
-[Nella lezione precedente](../../2-forms/translations/README.it.md) si è implementato il form di registrazione per creare un account. Ora verrà aggiunto il codice per accedere utilizzando un account esistente e recuperarne i dati. Aprire il file `app.js` e aggiungere una nuova funzione di accesso (`login`):
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-}
-```
-
-Qui si inizia recuperando l'elemento form con `getElementById()`, quindi si ottiene il nome utente (user) dall'input con `loginForm.user.value`. È possibile accedere a ogni controllo del form tramite il suo nome (impostato nell'HTML utilizzando l'attributo `name`) come proprietà del form.
-
-In modo simile a quanto fatto per la registrazione, verrà creata un'altra funzione per eseguire una richiesta al server, ma questa volta per recuperare i dati dell'account:
-
-```js
-async function getAccount(user) {
-  try {
-    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
-    return await response.json();
-  } catch (error) {
-    return { error: error.message || 'Unknown error' };
-  }
-}
-```
-
-Si usa l'API `fetch` per richiedere i dati in modo asincrono dal server, ma questa volta non servono parametri aggiuntivi oltre all'URL da chiamare, poiché si sta solo interrogando i dati. Per impostazione predefinita, `fetch` crea una richiesta  HTTP [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET), che è ciò che serve qui.
-
-✅ `encodeURIComponent()` è una funzione che evita i caratteri speciali per l'URL. Quali problemi si potrebbero avere se non viene chiamata questa funzione e si utilizza direttamente il valore del campo `user` nell'URL?
-
-Aggiornare ora la funzione `login` per utilizzare `getAccount`:
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-  const data = await getAccount(user);
-
-  if (data.error) {
-    return console.log('loginError', data.error);
-  }
-
-  account = data;
-  navigate('/dashboard');
-}
-```
-
-Innanzitutto, poiché `getAccount` è una funzione asincrona, occorre associarla alla parola chiave `await` per attendere il risultato dal server. Come con qualsiasi richiesta al server, occorre anche gestire i casi di errore. Per ora si aggiungerà solo un messaggio di log per visualizzare l'errore e verrà indirizzato più tardi.
-
-Quindi si deve memorizzare i dati da qualche parte in modo da poterli utilizzare in seguito per visualizzare le informazioni nel cruscotto. Poiché la variabile `account` non esiste ancora, verrà creata come variabile globale all'inizio del file:
-
-```js
-let account = null;
-```
-
-Dopo che i dati dell'utente sono stati salvati in una variabile, si può navigare dalla pagina di accessi (*login*) al cruscotto (*dashboard*) utilizzando la funzione `navigate()` che già esiste.
-
-Infine, si deve chiamare la funzione `login` quando viene inviato il form di accesso, modificando l'HTML:
-
-```html
-<form id="loginForm" action="javascript:login()">
-```
-
-Verificare che tutto funzioni correttamente registrando un nuovo account e provando ad accedere utilizzando lo stesso account.
-
-Prima di passare alla parte successiva, si può anche completare la funzione di registrazione (`register`) aggiungendola in fondo alla funzione:
-
-```js
-account = result;
-navigate('/dashboard');
-```
-
-✅ Si sa che per impostazione predefinita, si possono  chiamare solo le API di un server che ha *stesso dominio e porta* della pagina web che si sta visualizzando? Questo è un meccanismo di sicurezza applicato dai browser. Un momento, la nostra app web è in esecuzione su `localhost:3000` mentre l'API del server è in esecuzione su  `localhost:5000`, come mai funziona? Utilizzando una tecnica chiamata CORS [Cross-Origin Resource Sharing](https://developer.mozilla.org/it/docs/Web/HTTP/CORS), è possibile eseguire richieste HTTP con diverse origini (cross-origin) se il server aggiunge intestazioni speciali alla risposta, consentendo eccezioni per domini specifici.
-
-> Ulteriori informazioni sulle API sono disponibili seguendo questa [lezione](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art?WT.mc_id=academic-4621-cxa)
-
-## Aggiornare HTML per visualizzare i dati
-
-Ora che si hanno i dati dell'utente, occorre aggiornare l'HTML esistente per visualizzarli. E'  già noto come recuperare un elemento dal DOM utilizzando ad esempio `document.getElementById()`. Dopo aver ottenuto un elemento base, ecco alcune API che si possono utilizzare per modificarlo o aggiungervi elementi figlio:
-
-- Usando la proprietà [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent)  si può  cambiare il testo di un elemento. Notare che la modifica di questo valore rimuove tutti i figli dell'elemento (se presenti) e li sostituisce con il testo fornito. In quanto tale, è anche un metodo efficiente per rimuovere tutti i figli di un dato elemento assegnandogli una stringa vuota  `""` .
-
-- Usando [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) insieme al metodo [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) si può  creare e allegare uno o più nuovi elementi figlio.
-
-✅ Utilizzando la proprietà [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) di un elemento è anche possibile modificare il suo contenuto HTML, ma questo dovrebbe essere evitato poiché è vulnerabile agli attacchi di [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) .
-
-### Attività
-
-Prima di passare alla schermata del cruscotto, c'è ancora una cosa da fare nella pagina di accesso (*login*). Attualmente, se si prova ad accedere con un nome utente che non esiste, viene mostrato un messaggio nella console ma per un utente normale non cambia nulla e non sa cosa sta succedendo.
-
-Si aggiunge ora un elemento segnaposto nel form di accesso dove si può  visualizzare un messaggio di errore se necessario. Un buon posto sarebbe subito prima del pulsante (`<button>`) con testo Login:
-
-```html
-...
-<div id="loginError"></div>
-<button>Login</button>
-...
-```
-
-Questo elemento `<div>` è vuoto, il che significa che non verrà visualizzato nulla sullo schermo fino a quando non verrà aggiunto del contenuto. Occorre anche assegnarli un `ID` in modo da poterlo recuperare facilmente con JavaScript.
-
-Tornare al  file `app.js` e creare una nuova funzione di supporto `updateElement`:
-
-```js
-function updateElement(id, text) {
-  const element = document.getElementById(id);
-  element.textContent = text;
-}
-```
-
-Questo è abbastanza semplice: dato un *ID* di un elemento e un *testo*, si aggiornerà il contenuto del testo dell'elemento DOM con l'`id` corrispondente. Si usa questo metodo al posto del precedente messaggio di errore nella funzione `login` :
-
-```js
-if (data.error) {
-  return updateElement('loginError', data.error);
-}
-```
-
-Ora se si prova ad accedere con un account non valido, si dovrebbe vedere qualcosa del genere:
-
-![Videata che mostra il messaggio di errore visualizzato durante l'accesso](../images/login-error.png)
-
-Ora si ha un testo di errore che viene visualizzato, ma se si prova con un lettore di schermo si noterà che non viene annunciato nulla. Affinché il testo che viene aggiunto dinamicamente a una pagina venga annunciato dai lettori di schermo, sarà necessario utilizzare qualcosa chiamato [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Qui verrà utilizzato un tipo specifico di live region chiamato alert:
-
-```html
-<div id="loginError" role="alert"></div>
-```
-
-Implementare lo stesso comportamento per gli errori della funzione `register` (non dimenticare di aggiornare l'HTML).
-
-## Visualizzare le informazioni sulla dashboard
-
-Utilizzando le stesse tecniche appena viste, ci si occuperà anche di visualizzare le informazioni dell'account nella pagina del cruscotto.
-
-Ecco come appare un oggetto account ricevuto dal server:
-
-```json
-{
-  "user": "test",
-  "currency": "$",
-  "description": "Test account",
-  "balance": 75,
-  "transactions": [
-    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
-    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
-    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
-  ],
-}
-```
-
-> Nota: per semplificare, si può  utilizzare l'account `test` preesistente già popolato di dati.
-
-### Attività
-
-Iniziare sostituendo la sezione "Balance" (saldo) nell'HTML per aggiungere elementi segnaposto:
-
-```html
-<section>
-  Balance: <span id="balance"></span><span id="currency"></span>
-</section>
-```
-
-Si aggiungerà anche una nuova sezione appena sotto per visualizzare la descrizione dell'account:
-
-```html
-<h2 id="description"></h2>
-```
-
-✅ Poiché la descrizione del'account funge da titolo per il contenuto sottostante, viene contrassegnata semanticamente come intestazione (heading). Scoprire di più su come [la struttura delle intestazioni](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) è importante per l'accessibilità ed esaminare la pagina per determinare cos'altro potrebbe essere un'intestazione.
-
-Successivamente, verrà creata una nuova funzione in `app.js` per riempire il segnaposto:
-
-```js
-function updateDashboard() {
-  if (!account) {
-    return navigate('/login');
-  }
-
-  updateElement('description', account.description);
-  updateElement('balance', account.balance.toFixed(2));
-  updateElement('currency', account.currency);
-}
-```
-
-Innanzitutto, controllare di avere i dati dell'account necessari prima di andare oltre. Quindi si usa la funzione `updateElement()` creata in precedenza per aggiornare l'HTML.
-
-> Per rendere la visualizzazione del saldo più bella, si usa il metodo [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) per forzare la visualizzazione del valore con 2 cifre per la parte decimale.
-
-Ora occorre chiamare la funzione `updateDashboard()` ogni volta che viene caricato il cruscotto. Se si è già terminato il [compito della lezione 1](../../1-template-route/translations/assignment.it.md) , questo dovrebbe essere immediato, altrimenti si può  utilizzare la seguente implementazione.
-
-Aggiungere questo codice alla fine della funzione `updateRoute()`:
-
-```js
-if (typeof route.init === 'function') {
-  route.init();
-}
-```
-
-Aggiornare la definizione delle rotte con:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
-};
-```
-
-Con questa modifica, ogni volta che viene visualizzata la pagina del cruscotto viene chiamata la funzione `updateDashboard()`. Dopo un accesso, si dovrebbe essere in grado di vedere il saldo del conto, la valuta e la descrizione.
-
-## Creare righe di tabelle dinamicamente con modelli HTML
-
-Nella [prima lezione](../../1-template-route/translations/README.it.md) sono stati utilizzati modelli HTML insieme al metodo [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) per implementare la navigazione nell'app. I modelli possono anche essere più piccoli e utilizzati per popolare dinamicamente parti ripetitive di una pagina.
-
-Verrà usato un approccio simile per visualizzare l'elenco delle transazioni nella tabella HTML.
-
-### Attività
-
-Aggiungere un nuovo modello nell'elemento HTML `<body>`:
-
-```html
-<template id="transaction">
-  <tr>
-    <td></td>
-    <td></td>
-    <td></td>
-  </tr>
-</template>
-```
-
-Questo modello rappresenta una singola riga di tabella, con le 3 colonne che si vuole popolare: *data*, *oggetto* e *importo* di una transazione.
-
-Aggiungere quindi la proprietà `id` all'elemento `<tbody>` della tabella all'interno del modello del cruscotto per semplificare la ricerca dell'elemento utilizzando JavaScript:
-
-```html
-<tbody id="transactions"></tbody>
-```
-
-L'HTML è pronto, ora si passa al codice JavaScript e si crea una nuova funzione `createTransactionRow`:
-
-```js
-function createTransactionRow(transaction) {
-  const template = document.getElementById('transaction');
-  const transactionRow = template.content.cloneNode(true);
-  const tr = transactionRow.querySelector('tr');
-  tr.children[0].textContent = transaction.date;
-  tr.children[1].textContent = transaction.object;
-  tr.children[2].textContent = transaction.amount.toFixed(2);
-  return transactionRow;
-}
-```
-
-Questa funzione fa esattamente ciò che implica il suo nome: utilizzando il modello creato in precedenza, crea una nuova riga di tabella e riempie il suo contenuto utilizzando i dati della transazione. Verrà usata nella funzione `updateDashboard()` per popolare la tabella:
-
-```js
-const transactionsRows = document.createDocumentFragment();
-for (const transaction of account.transactions) {
-  const transactionRow = createTransactionRow(transaction);
-  transactionsRows.appendChild(transactionRow);
-}
-updateElement('transactions', transactionsRows);
-```
-
-Qui si utilizza il metodo [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) che crea un nuovo frammento DOM su cui si può  lavorare, prima di collegarlo finalmente alla tabella HTML.
-
-C'è ancora un'altra cosa da fare prima che questo codice possa funzionare, poiché la funzione `updateElement()` attualmente supporta solo contenuto di testo. Occorre cambiare un poco il suo codice:
-
-```js
-function updateElement(id, textOrNode) {
-  const element = document.getElementById(id);
-  element.textContent = ''; // Rimuove tutti i figli
-  element.append(textOrNode);
-}
-```
-
-Si usa il metodo [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) in quanto consente di allegare testo o [nodi DOM](https://developer.mozilla.org/docs/Web/API/Node) a un elemento genitore, che è perfetto per tutti i casi d'uso.
-
-Se si prova a utilizzare l'account `test` per accedere, ora si dovrebbe vedere un elenco di transazioni sul cruscotto 🎉.
-
----
-
-## 🚀 Sfida
-
-Collaborare per far sembrare la pagina del cruscotto una vera app bancaria. Se è già stato definito lo stile della propria app, provare a utilizzare le [media query](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) per creare una [disposizione reattiva](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) che funzioni bene sia su dispositivi desktop che mobili.
-
-Ecco un esempio di una pagina cruscotto con applicato uno stile:
-
-![Videata di un risultato di esempio del cruscotto dopo l'applicazione dello stile](../../images/screen2.png)
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46?loc=it)
-
-## Compito
-
-[Refattorizzare e commentare il codice](assignment.it.md)
diff --git a/7-bank-project/3-data/translations/README.ja.md b/7-bank-project/3-data/translations/README.ja.md
deleted file mode 100644
index febb76d6..00000000
--- a/7-bank-project/3-data/translations/README.ja.md
+++ /dev/null
@@ -1,332 +0,0 @@
-# バンキングアプリを作ろう その 3: データの取得と利用方法
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45?loc=ja)
-
-### イントロダクション
-
-すべての Web アプリケーションの中核には、*データ*があります。データには様々な形がありますが、その主な目的は常にユーザーに情報を表示することです。Web アプリケーションがますますインタラクティブで複雑になってきているため、ユーザーがどのように情報にアクセスして対話するかは、現在では Web 開発の重要な部分となっています。
-
-このレッスンでは、サーバーから非同期にデータを取得し、このデータを使用して HTML をリロードせずに Web ページに情報を表示する方法を見ていきます。
-
-### 前提条件
-
-このレッスンでは、Web アプリの[ログインと登録フォーム](../../2-forms/translations/README.ja.md)の部分をビルドしておく必要があります。また、アカウントデータを取得するためには、ローカルに [Node.js](https://nodejs.org) と [サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。
-
-ターミナルで以下のコマンドを実行することで、サーバーが正常に動作していることを確認できます。
-
-```sh
-curl http://localhost:5000/api
-# -> 結果として "Bank API v1.0.0" を返す必要があります。
-```
-
----
-
-## AJAX とデータ取得
-
-従来の Web サイトでは、ユーザーがリンクをクリックしたり、フォームを使用してデータを送信したりした際に、HTML ページ全体をリロードすることで表示されるコンテンツを更新しています。新しいデータの読み込みが必要になるたびに、Web サーバはブラウザで処理する必要のある新しい HTML ページを返し、現在のユーザのアクションを中断し、リロード中のインタラクションを制限します。このワークフローは、*マルチページアプリケーション* または *MPA* とも呼ばれます。
-
-![複数ページのアプリケーションでワークフローを更新する](../images/mpa.png)
-
-Web アプリケーションがより複雑でインタラクティブになり始めた頃、[AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming))と呼ばれる新しい技術が登場しました。この技術は、Web アプリケーションが HTML ページをリロードすることなく、JavaScript を使ってサーバーから非同期にデータを送受信することを可能にし、結果として、より高速な更新とよりスムーズなユーザーのインタラクションを実現します。サーバーから新しいデータを受信すると、[DOM](https://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model) API を使用して現在の HTML ページを JavaScript で更新することもできます。時間の経過とともに、このアプローチは現在では [*シングルページアプリケーション* または *SPA*](https://en.wikipedia.org/wiki/Single-page_application) と呼ばれているものへと発展してきました。
-
-![シングルページアプリケーションでワークフローを更新](../images/spa.png)
-
-AJAX が最初に導入されたとき、データを非同期で取得できる唯一の API は [`XMLHttpRequest`](https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest) でした。しかし、現在のブラウザはより便利で強力な [`Fetch` API](https://developer.mozilla.org/ja/docs/Web/API/Fetch_API) を実装しており、Promise を使用し、JSON データを操作するのに適しています。
-
-> 最新のブラウザはすべて `Fetch API` をサポートしていますが、もしあなたの Web アプリケーションをレガシーブラウザや古いブラウザで動作させたいのであれば、最初に [caniuse.com の互換性テーブル](https://caniuse.com/fetch) をチェックするのが良いでしょう。
-
-### タスク
-
-[前回のレッスン](../../2-forms/translations/README.ja.md)では、アカウントを作成するための登録フォームを暗示しました。ここでは、既存のアカウントを使ってログインし、そのデータを取得するコードを追加します。`app.js` ファイルを開き、新しい `login` 関数を追加します。
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-}
-```
-
-ここではまずフォーム要素を `getElementById()` で取得し、入力からユーザ名を `loginForm.user.value` で取得します。すべてのフォームコントロールは、フォームのプロパティとしてその名前 (HTML では `name` 属性を使って設定されています) によってアクセスすることができます。
-
-登録の際に行ったことと同様の方法で、フォームコントロールにアクセスすることができます。サーバーリクエストを実行するために別の関数を作成しますが、今回はアカウントデータを取得します。
-
-```js
-async function getAccount(user) {
-  try {
-    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
-    return await response.json();
-  } catch (error) {
-    return { error: error.message || 'Unknown error' };
-  }
-}
-```
-
-ここでは `fetch` API を使ってサーバから非同期にデータを要求しますが、今回はデータを問い合わせるだけなので、呼び出す URL 以外の余分なパラメータは必要ありません。デフォルトでは、`fetch` は [`GET`](https://developer.mozilla.org/ja/docs/Web/HTTP/Methods/GET) HTTP リクエストを作成します。
-
-✅ `encodeURIComponent()` は URL の特殊文字をエスケープする関数です。この関数を呼び出さずに URL の `user` の値を直接使うと、どのような問題が発生する可能性があるのでしょうか?
-
-それでは、`login` 関数を `getAccount` を使うように更新してみましょう。
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-  const data = await getAccount(user);
-
-  if (data.error) {
-    return console.log('loginError', data.error);
-  }
-
-  account = data;
-  navigate('/dashboard');
-}
-```
-
-まず、`getAccount` は非同期関数なので、これを `await` キーワードにマッチさせてサーバの結果を待つ必要があります。他のサーバからのリクエストと同様に、エラーが発生した場合にも対処しなければなりません。今のところ、エラーを表示するためのログメッセージを追加して、それをレイヤーに戻すだけです。
-
-その後、データをどこかに保存しておく必要があるので、後でダッシュボードの情報を表示するためにデータを使用することができます。変数 `account` はまだ存在しないので、ファイルの先頭にグローバル変数を作成します。
-
-```js
-let account = null;
-```
-
-ユーザデータが変数に保存された後、既に持っている `navigate()` 関数を使って *ログイン* ページから *ダッシュボード* に移動することができます。
-
-最後に、HTML を修正してログインフォームが送信されたときに `login` 関数を呼び出す必要があります。
-
-```html
-<form id="loginForm" action="javascript:login()">
-```
-
-すべてが正しく動作していることをテストします。新しいアカウントを登録して、同じアカウントを使ってログインしようとすることで、`register` 関数を完成させることができます。
-
-次の部分に移る前に、関数の下部にこれを追加することで `register` 関数を完成させることもできます。
-
-```js
-account = result;
-navigate('/dashboard');
-```
-
-✅ デフォルトでは、閲覧している Web ページよりも*同じドメインとポート*からしかサーバー API を呼び出すことができないことをご存知でしょうか? これはブラウザによって強制されたセキュリティメカニズムです。しかし待ってください、私たちの Web アプリは `localhost:3000` で動作していますが、サーバー API は `localhost:5000` で動作しています。[Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/ja/docs/Web/HTTP/CORS)と呼ばれる技術を使用することで、サーバーがレスポンスに特殊なヘッダを追加し、特定のドメインの例外を許可することで、クロスオリジンの HTTP リクエストを実行することが可能になります。
-
-## データを表示するために HTML を更新する
-
-ユーザーデータが手に入ったので、それを表示するために既存の HTML を更新しなければなりません。DOM から要素を取得する方法は既に知っていますが、例として `document.getElementById()` を使用します。ベースとなる要素ができたら、それを修正したり、子要素を追加したりするために使えるAPIをいくつか紹介します。
-
-- 要素のテキストを変更するには、[`textContent`](https://developer.mozilla.org/ja/docs/Web/API/Node/textContent)プロパティを使用します。この値を変更すると、(あれば) すべての要素の子要素が削除され、提供されたテキストに置き換えられることに注意してください。このように、与えられた要素に空の文字列 `''` を代入することで、与えられた要素のすべての子を削除する効率的な方法でもあります。
-
-- [`document.createElement()`](https://developer.mozilla.org/ja/docs/Web/API/Document/createElement) と [`append()`](https://developer.mozilla.org/ja/docs/Web/API/ParentNode/append) メソッドを使用すると、1つ以上の新しい子要素を作成して添付することができます
-
-✅ 要素の [`innerHTML`](https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML) プロパティを使用して HTML の内容を変更することも可能ですが、これは [クロスサイトスクリプティング (XSS)](https://developer.mozilla.org/ja/docs/Glossary/Cross-site_scripting) 攻撃に対して脆弱なので避けるべきです。
-
-### タスク
-
-ダッシュボード画面に移る前に、*ログイン* ページでもう一つやるべきことがあります。現在、存在しないユーザ名でログインしようとすると、コンソールにメッセージが表示されますが、通常のユーザの場合は何も変わらず、何が起こっているのかわかりません。
-
-必要に応じてエラーメッセージを表示できるように、ログインフォームにプレースホルダ要素を追加してみましょう。良い場所はログインの直前の `<button>` です。
-
-```html
-...
-<div id="loginError"></div>
-<button>Login</button>
-...
-```
-
-この `<div>` 要素は空で、コンテンツを追加するまで何も表示されません。また、JavaScript で簡単に取得できるように `id` を与えています。
-
-ファイル `app.js` に戻り、新しいヘルパー関数 `updateElement` を作成します。
-
-```js
-function updateElement(id, text) {
-  const element = document.getElementById(id);
-  element.textContent = text;
-}
-```
-
-これは非常に簡単で、要素 *id* と *text* が与えられると、一致する `id` で DOM 要素のテキスト内容を更新します。このメソッドを `login` 関数の先ほどのエラーメッセージの代わりに使ってみましょう。
-
-```js
-if (data.error) {
-  return updateElement('loginError', data.error);
-}
-```
-
-無効なアカウントでログインしようとすると、このように表示されるはずです。
-
-![ログイン中に表示されるエラーメッセージを示すスクリーンショット](../images/login-error.png)
-
-これで、視覚的にはエラーテキストが表示されるようになりましたが、スクリーンリーダーで試してみると、何もアナウンスされないことに気づくでしょう。ページに動的に追加されたテキストをスクリーンリーダーでアナウンスするには、[ライブリージョン](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) と呼ばれるものを使用する必要があります。ここでは、アラートと呼ばれる特定のタイプのライブリージョンを使用するつもりです。
-
-```html
-<div id="loginError" role="alert"></div>
-```
-
-`register` 関数のエラーに対しても同様の動作を実装する (HTML の更新を忘れずに)。
-
-## ダッシュボードに情報を表示する
-
-先ほど見たのと同じテクニックを使って、ダッシュボード・ページにアカウント情報を表示してみましょう。
-
-サーバから受け取ったアカウントオブジェクトはこんな感じです。
-
-```json
-{
-  "user": "test",
-  "currency": "$",
-  "description": "Test account",
-  "balance": 75,
-  "transactions": [
-    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
-    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
-    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
-  ],
-}
-```
-
-> 注: 生活を楽にするためには、すでにデータが登録されている `test` アカウントを使用することができます。
-
-### タスク
-
-まずは HTML の「バランス」の部分を置き換えてプレースホルダ要素を追加してみましょう。
-
-```html
-<section>
-  Balance: <span id="balance"></span><span id="currency"></span>
-</section>
-```
-
-また、アカウントの説明を表示するためのセクションをすぐ下に追加します。
-
-```html
-<h2 id="description"></h2>
-```
-
-✅ アカウントの説明は、その下にあるコンテンツのタイトルとして機能するため、意味的には見出しとしてマークアップされます。アクセシビリティにとって[見出し構造](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility)がどのように重要であるかについて詳しく知り、他に何が見出しになり得るかを判断するためにページを批判的に見てみましょう。
-
-次に、プレースホルダを埋めるための新しい関数を `app.js` に作成します。
-
-```js
-function updateDashboard() {
-  if (!account) {
-    return navigate('/login');
-  }
-
-  updateElement('description', account.description);
-  updateElement('balance', account.balance.toFixed(2));
-  updateElement('currency', account.currency);
-}
-```
-
-まず、先に進む前に必要なアカウントデータがあることを確認します。次に、先ほど作成した `updateElement()` 関数を使って HTML を更新します。
-
-> 残高表示をよりきれいにするために、メソッド [`toFixed(2)`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) を使用して、小数点以下2桁の値を強制的に表示します。
-
-これで、ダッシュボードがロードされるたびに `updateDashboard()` 関数を呼び出す必要があります。既に [レッスン1の課題](../../1-template-route/translations/README.ja.md) を終了している場合は簡単ですが、そうでない場合は以下の実装を使用することができます。
-
-このコードを `updateRoute()` 関数の最後に追加します。
-
-```js
-if (typeof route.init === 'function') {
-  route.init();
-}
-```
-
-ルート定義を更新します。
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
-};
-```
-
-この変更により、ダッシュボードページが表示されるたびに関数 `updateDashboard()` が呼び出されるようになりました。ログインすると、アカウントの残高、通貨、説明が表示されるようになります。
-
-## HTML テンプレートを使用してテーブルの行を動的に作成
-
-[最初のレッスン](../../1-template-route/translations/README.ja.md)では、アプリのナビゲーションを実装するために HTML テンプレートを [`appendChild()`](https://developer.mozilla.org/ja/docs/Web/API/Node/appendChild) メソッドと一緒に使用しました。テンプレートは小さくして、ページの繰り返し部分を動的に埋め込むために使用することもできます。
-
-同様のアプローチを使用して、HTML テーブルにトランザクションのリストを表示します。
-
-### タスク
-
-HTML `<body>` に新しいテンプレートを追加します。
-
-```html
-<template id="transaction">
-  <tr>
-    <td></td>
-    <td></td>
-    <td></td>
-  </tr>
-</template>
-```
-
-このテンプレートは1つのテーブル行を表し、3つのカラムを入力します。*日付*、*オブジェクト*、トランザクションの*金額*です。
-
-次に、この `id` プロパティをダッシュボードテンプレート内のテーブルの `<tbody>` 要素に追加すると、JavaScript を使って見つけやすくなります。
-
-```html
-<tbody id="transactions"></tbody>
-```
-
-HTML の準備ができたので、JavaScript のコードに切り替えて新しい関数 `createTransactionRow` を作成しましょう。
-
-```js
-function createTransactionRow(transaction) {
-  const template = document.getElementById('transaction');
-  const transactionRow = template.content.cloneNode(true);
-  const tr = transactionRow.querySelector('tr');
-  tr.children[0].textContent = transaction.date;
-  tr.children[1].textContent = transaction.object;
-  tr.children[2].textContent = transaction.amount.toFixed(2);
-  return transactionRow;
-}
-```
-
-この関数はその名前が示す通りのことを行います。先ほど作成したテンプレートを使って新しいテーブルの行を作成し、トランザクションデータを使ってその内容を埋めます。先ほど作成したテンプレートを使って新しいテーブル行を作成し、トランザクションデータを使って内容を埋めます。
-
-```js
-const transactionsRows = document.createDocumentFragment();
-for (const transaction of account.transactions) {
-  const transactionRow = createTransactionRow(transaction);
-  transactionsRows.appendChild(transactionRow);
-}
-updateElement('transactions', transactionsRows);
-```
-
-ここでは [`document.createDocumentFragment()`](https://developer.mozilla.org/ja/docs/Web/API/Document/createDocumentFragment) というメソッドを使用しています。これは新しい DOM フラグメントを作成し、その上で作業を行い、最終的にそれを HTML テーブルにアタッチする前のものです。
-
-このコードが動作する前に、もう一つやらなければならないことがあります。というのは、現在のところ `updateElement()` 関数はテキストコンテンツのみをサポートしているからです。コードを少し変更してみましょう。
-
-```js
-function updateElement(id, textOrNode) {
-  const element = document.getElementById(id);
-  element.textContent = ''; // Removes all children
-  element.append(textOrNode);
-}
-```
-
-私たちは [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) メソッドを使用しています。これにより、テキストや [DOM Nodes](https://developer.mozilla.org/ja/docs/Web/API/Node) を親要素にアタッチすることができ、すべてのユースケースに最適です。
-
-`test` アカウントを使ってログインしてみると、ダッシュボード上にトランザクションリストが表示されるはずです 🎉。
-
----
-
-## 🚀 チャレンジ
-
-ダッシュボードページを実際の銀行アプリのように見せるために一緒に作業しましょう。すでにアプリのスタイルを設定している場合は、[メディアクエリ](https://developer.mozilla.org/ja/docs/Web/CSS/Media_queries)を使用して、デスクトップとモバイルデバイスの両方でうまく機能する[レスポンシブデザイン](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks)を作成してみてください。
-
-ダッシュボードページのスタイリング例です。
-
-![スタイリング後のダッシュボードの結果例のスクリーンショット](../../images/screen2.png)
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46?loc=ja)
-
-## 課題
-
-[コードのリファクタとコメント](assignment.ja.md)
diff --git a/7-bank-project/3-data/translations/README.ko.md b/7-bank-project/3-data/translations/README.ko.md
deleted file mode 100644
index ccd2611e..00000000
--- a/7-bank-project/3-data/translations/README.ko.md
+++ /dev/null
@@ -1,326 +0,0 @@
-# 은행 앱 제작하기 파트 3: 데이터를 가져오고 사용하는 방식
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45?loc=ko)
-
-### 소개
-
-모든 웹 애플리케이션의 핵심에는 *data*가 있습니다. 데이터는 다양한 폼을 가질 수 있지만, 기본적인 목적은 항상 사용자에게 정보를 보여준다는 것입니다. 웹 앱이 점점 더 상호 작용하고 복잡해지면서, 사용자가 정보에 접근하고 상호 작용하는 방식은 이제 웹 개발에서 중요한 부분입니다.
-
-이 강의에서는, 서버에서 비동기로 데이터를 가져오고, 이 데이터로 HTML을 다시 불러오지 않으면서 웹 페이지에 보여주는 방법으로 살펴봅니다.
-
-### 준비물
-
-이 강의에서 웹 앱의 [Login and Registration Form](../../2-forms/translations/README.ko.md) 부분을 작성하는 것이 필요합니다. 또한 계정 데이터를 가져오려면 [Node.js](https://nodejs.org)와 [run the server API](../../api/README.md)를 로컬에 설치해야 합니다.
-
-터미널에서 이 명령을 실행하여 서버가 실행되고 있는지 테스트할 수 있습니다:
-
-```sh
-curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
-```
-
----
-
-## AJAX와 데이터 가져오기
-
-기존 웹 사이트는 모든 HTML 페이지를 다시 불러오기 위해서 사용자가 링크를 클릭하거나 폼으로 데이터를 제출할 때 표시되는 콘텐츠를 갱신합니다. 새로운 데이터를 불러와야 할 때마다, 웹 서버는 브라우저에서 처리하는 새 HTML 페이지를 반환하여, 현재 사용자의 액션을 중단하고 다시 불러오는 동안 상호 작용을 제한합니다. 이 과정을 *Multi-Page Application* 혹은 *MPA*라고 합니다.
-
-![Update workflow in a multi-page application](.././images/mpa.png)
-
-웹 애플리케이션이 더 복잡해지고 상호 작용하기 시작하면서, [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming))이라는 새로운 기술이 나타났습니다. 이 기술을 쓰면 웹 앱은 HTML 페이지를 다시 불러오지 않고, JavaScript를 사용하여 비동기로 서버에서 데이터를 보내고 찾을 수 있으므로, 갱신 속도가 빨라지고 사용자 상호 작용이 부드러워집니다. 서버에서 새로운 데이터를 받으면, [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API로 현재 HTML 페이지를 JavaScript로 갱신할 수도 있습니다. 시간이 지나면서, 이 방식은 이제 [*Single-Page Application* or *SPA*](https://en.wikipedia.org/wiki/Single-page_application)라는 것으로 발전했습니다.
-
-![Update workflow in a single-page application](.././images/spa.png)
-
-AJAX가 처음 소개되었을 때, 데이터를 비동기로 가져올 유일한 API는 [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)였습니다. 그러나 모던 브라우저는 이제 promises를 사용하고 JSON 데이터를 조작할 때 적당하며, 더 편리하고 강력한 [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API)도 구현합니다.
-
-> 모든 모던 브라우저는 `Fetch API`를 지원하지만, 웹 애플리케이션이 레거시 혹은 옛날 브라우저에서 작동하도록 하려면 항상 [compatibility table on caniuse.com](https://caniuse.com/fetch)를 먼저 보는 것이 좋습니다.
-
-### 작업
-
-[이전 강의](../../2-forms/translations/README.ko.md)에서는 계정을 만들기 위해 가입 폼을 구현했습니다. 이제 이미 있는 계정으로 로그인하는 코드를 추가하고, 데이터를 가져올 것 입니다. `app.js` 파일을 열고 새로운 `login` 함수를 추가합니다:
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-}
-```
-
-여기서 `getElementById()`로 폼 요소를 찾는 것으로 시작한 다음, `loginForm.user.value`로 입력에서 username을 가져옵니다. 모든 폼 컨트롤은 폼의 속성에 있는 이름(HTML에서 `name`속성으로 설정)으로 제어할 수 있습니다.
-
-가입을 위해서 작업했던 것과 비슷한 방식으로, 서버 요청하는 또 다른 함수를 만들지만, 이번에는 계정 데이터를 찾기 위한 것입니다:
-
-```js
-async function getAccount(user) {
-  try {
-    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
-    return await response.json();
-  } catch (error) {
-    return { error: error.message || 'Unknown error' };
-  }
-}
-```
-
-비동기로 서버에 데이터를 요청하기 위해서 `fetch` API를 사용하지만, 이번에는 데이터만 쿼리하므로, 호출할 URL 이외 추가 파라미터는 필요하지 않습니다. 기본적으로, `fetch`는 여기에서 찾는 것처럼 [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) 요청을 생성합니다.
-
-✅ `encodeURIComponent()`는 URL에 대한 특수 문자를 이스케이프하는 함수입니다. 이 함수를 호출하지 않고 URL에서 `user` 값을 직접 사용하면 어떤 이슈가 발생할 수 있나요?
-
-이제 `getAccount`를 사용하여 `login` 함수를 갱신합니다:
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-  const data = await getAccount(user);
-
-  if (data.error) {
-    return console.log('loginError', data.error);
-  }
-
-  account = data;
-  navigate('/dashboard');
-}
-```
-
-먼저, `getAccount`는 비동기 함수이므로 서버 결과를 기다리려면 `await` 키워드로 맞춰야 합니다. 모든 서버 요청처럼, 오류 케이스도 처리해야 합니다. 지금은 오류를 보여주는 로그 메시지만 추가하고, 이 레이어로 돌아옵니다.
-
-그러고 나중에 대시보드 정보를 보여줄 수 있도록 데이터를 어딘가 저장해야 합니다. `account` 변수가 아직 없으므로, 파일 상단에 전역 변수를 생성합니다:
-
-```js
-let account = null;
-```
-
-사용자 데이터가 변수에 저장되면 이미 있는 `navigate()` 함수를 사용하여 *login* 페이지에서 *dashboard*로 이동할 수 있습니다.
-
-마지막으로, HTML을 수정하여 로그인 폼을 제출할 때마다 `login` 함수를 호출해야 합니다:
-
-```html
-<form id="loginForm" action="javascript:login()">
-```
-
-새로운 계정을 가입하고 같은 계정으로 로그인을 시도하여 모두 잘 작동하는지 테스트합니다.
-
-다음 부분으로 가기 전에, 함수 하단에 다음을 추가하여 `register` 함수를 완성할 수도 있습니다:
-
-```js
-account = result;
-navigate('/dashboard');
-```
-
-✅ 기본적으로, 보고있는 웹 페이지에 *동일한 도메인와 포트*에서만 서버 API를 호출할 수 있다는 사실을 알고 있었나요? 이것은 브라우저에 의해 시행되는 보안 메커니즘입니다. 하지만, 웹 앱은 `localhost:3000`에서 실행되고 서버 API가 `localhost:5000`에서 실행됩니다. 왜 작동할까요? [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS)라는 기술을 사용하면 서버가 응답에 특별한 헤더를 추가하여 특정 도메인에 대한 예외를 허용하므로, cross-origin HTTP 요청을 수행 할 수 있습니다.
-
-## 데이터를 보여주기 위해 HTML 갱신하기
-
-이제 사용자 데이터가 있으므로, 기존 HTML을 갱신해서 보여줘야 합니다. 예시로 `document.getElementById()`를 사용하여 DOM에서 요소를 검색하는 방법은 이미 있습니다. 바탕 요소가 있으면, 수정하거나 하위 요소를 추가하는 방식으로 사용할 수 있는 몇 가지 API가 있습니다:
-
-- [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) 속성을 사용하여 요소의 텍스트를 바꿀 수 있습니다. 이 값을 변경하면 모든 요소의 하위가(있는 경우) 제거되고 주어진 텍스트로 대체됩니다. 따라서, 빈 문자열 `''`을 할당하여 주어진 요소의 모든 하위를 제거하는 효율적인 방법일 수도 있습니다.
-
-- [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement)를 [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append)메소드와 함께 사용하면 하나 이상의 새로운 하위 요소를 만들고 붙일 수 있습니다.
-
-✅ 요소의 [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) 속성을 사용하여 HTML 내용을 바꿀 수 있지만, [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) 공격에 취약하므로 피해야 합니다.
-
-### 작업
-
-대시보드 화면으로 이동하기 전에, *login* 페이지에서 할 일이 더 있습니다. 현재, 없는 사용자 이름으로 로그인하면, 콘솔에는 메시지가 보이지만 일반적인 사용자의 경우에는 하나도 안 바뀌므로 어떤 일이 나는지 알 수 없습니다.
-
-필요한 경우에 오류 메시지를 볼 수 있는 로그인 폼에 placeholder 요소를 추가하겠습니다. 로그인 `<button>` 바로 전에 두는 것이 좋습니다:
-
-```html
-...
-<div id="loginError"></div>
-<button>Login</button>
-...
-```
-
-이 `<div>` 요소는 비어 있으므로, 내용를 더 할 때까지 화면에 아무것도 나오지 않습니다. 또한 JavaScript로 쉽게 찾을 수 있도록 `id`를 제공합니다.
-
-`app.js` 파일로 돌아오고 새로운 헬퍼 함수인 `updateElement`를 만듭니다:
-
-```js
-function updateElement(id, text) {
-  const element = document.getElementById(id);
-  element.textContent = text;
-}
-```
-
-이는 매우 간편합니다, *id*와 *text* 요소가 주어지는 순간에 일치하는 `id`로 DOM 요소의 텍스트 내용이 갱신됩니다. `login` 함수의 이전 오류 메시지 대신에 이 방법을 사용하겠습니다:
-
-```js
-if (data.error) {
-  return updateElement('loginError', data.error);
-}
-```
-
-이제 유효하지 않은 계정으로 로그인 시도하면, 다음과 같이 보입니다:
-
-![Screenshot showing the error message displayed during login](.././images/login-error.png)
-
-`register` 함수 오류와 동일한 동작을 하도록 구현합니다 (HTML을 갱신하는 것을 잊지 마세요).
-
-## 대시보드로 정보 출력하기
-
-방금 전 같은 기술을 사용하여 대시보드 페이지에서 계정 정보를 보여주는 작업도 합니다.
-
-서버에서 받은 계정 객체는 다음과 같습니다:
-
-```json
-{
-  "user": "test",
-  "currency": "$",
-  "description": "Test account",
-  "balance": 75,
-  "transactions": [
-    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
-    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
-    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
-  ],
-}
-```
-
-> Note: 더 쉽게 진행하기 위해서, 이미 데이터로 채워진 기존 `test` 계정을 사용할 수 있습니다.
-
-### 작업
-
-HTML의 "Balance" 섹션을 교체하고 placeholder 요소를 추가하는 것으로 시작합니다:
-
-```html
-<section>
-  Balance: <span id="balance"></span><span id="currency"></span>
-</section>
-```
-
-또한 바로 밑에 새로운 섹션을 추가하여 계정 설명을 출력합니다:
-
-```html
-<section id="description" aria-label="Account description"></section>
-```
-
-✅ 이 섹션의 내용을 설명하는 텍스트 라벨이 없기 때문에, `aria-label` 속성을 사용하여 접근성 힌트를 줍니다. 모두 웹 앱에 접근할 수 있도록 [ARIA attributes](https://developer.mozilla.org/docs/Web/Accessibility/ARIA)에 대해 더 알아보세요.
-
-다음으로, `app.js`에 placeholder를 채우기 위해서 새로운 함수를 만듭니다:
-
-```js
-function updateDashboard() {
-  if (!account) {
-    return navigate('/login');
-  }
-
-  updateElement('description', account.description);
-  updateElement('balance', account.balance.toFixed(2));
-  updateElement('currency', account.currency);
-}
-```
-
-먼저, 나아가기 전 필요한 계정 데이터가 있는지 확인합니다. 그러고 일찍 만들어 둔 `updateElement()` 함수로 HTML을 업데이트합니다.
-
-> 잔액을 더 예쁘게 보이게 만드려면, [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) 방법으로 소수점 이하 2자리 값을 강제로 출력합니다.
-
-이제 대시보드를 불러올 때마다 `updateDashboard()` 함수를 호출해야 합니다. 이미 [lesson 1 assignment](../../1-template-route/assignment.md)를 완료했다면 간단해야 합니다. 그렇지 않다면 이미 구현된 내용으로 쓸 수 있습니다.
-
-`updateRoute()` 함수 끝에 이 코드를 추가합니다:
-
-```js
-if (typeof route.init === 'function') {
-  route.init();
-}
-```
-
-그리고 라우터 정의를 업데이트합니다:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
-};
-```
-
-이 변경점으로, 대시보드 페이지가 나올 때마다 `updateDashboard()` 함수가 호출됩니다. 로그인하고나서, 계정 잔액, 통화와 설명을 볼 수 있습니다.
-
-## HTML 템플릿으로 동적 테이블 row 만들기
-
-[first lesson](../../1-template-route/translations/README.ko.md)에서는 HTML 템플릿과 [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) 메소드로 앱의 탐색을 구현했습니다. 템플릿은 더 작아 질 수 있고 페이지의 반복적인 부분을 동적으로 채우는 데 쓸 수 있습니다.
-
-유사한 접근 방식을 사용하여 HTML 테이블에 트랜잭션 목록을 출력합니다.
-
-### 작업
-
-HTML `<body>`에서 새로운 템플릿을 추가합니다:
-
-```html
-<template id="transaction">
-  <tr>
-    <td></td>
-    <td></td>
-    <td></td>
-  </tr>
-</template>
-```
-
-이 템플릿은 하나의 테이블 행을 나타내고 있으며, 앞으로 채워나갈 3 개의 열이 있습니다: *date*, *object* 그리고 트랜젝션의 *amount*.
-
-그러고, 이 `id` 속성을 대시보드 템플릿 내 테이블의 `<tbody>` 요소에 추가하여 JavaScript로 쉽게 찾을 수 있게 작성합니다:
-
-```html
-<tbody id="transactions"></tbody>
-```
-
-HTML은 준비되었습니다, JavaScript 코드로 전환하고 새로운 함수 `createTransactionRow`를 만들겠습니다:
-
-```js
-function createTransactionRow(transaction) {
-  const template = document.getElementById('transaction');
-  const transactionRow = template.content.cloneNode(true);
-  const tr = transactionRow.querySelector('tr');
-  tr.children[0].textContent = transaction.date;
-  tr.children[1].textContent = transaction.object;
-  tr.children[2].textContent = transaction.amount.toFixed(2);
-  return transactionRow;
-}
-```
-
-이 함수는 이름이 의미한대로 정확히 수행합니다: 이전에 만든 템플릿을 사용하면서, 새 테이블 행을 만들고 트랜잭션 데이터로 내용을 채웁니다. `updateDashboard()` 함수에서 이것으로 테이블을 채울 것입니다:
-
-```js
-const transactionsRows = document.createDocumentFragment();
-for (const transaction of account.transactions) {
-  const transactionRow = createTransactionRow(transaction);
-  transactionsRows.appendChild(transactionRow);
-}
-updateElement('transactions', transactionsRows);
-```
-
-여기서는 새로운 DOM 프래그먼트를 만들 [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) 메소드로 최종적인 HTML 테이블에 붙입니다.
-
-현재 `updateElement()` 함수가 텍스트 내용만 지원하므로 이 코드가 실행되기 전에 할 일이 하나 더 있습니다. 코드를 약간 바꿔 보겠습니다:
-
-```js
-function updateElement(id, textOrNode) {
-  const element = document.getElementById(id);
-  element.textContent = ''; // Removes all children
-  element.append(textOrNode);
-}
-```
-
-[`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append)] 메소드를 사용하면 상위 요소에 텍스트 혹은 [DOM Nodes](https://developer.mozilla.org/docs/Web/API/Node)를 붙일 수 있으므로, 모든 사용 케이스에 적당합니다.
-
-`test` 계정을 사용하여 로그인을 해보면, 지금 대시보드에 거래 목록이 보입니다 🎉.
-
----
-
-## 🚀 도전
-
-대시보드 페이지를 실제 은행 앱처럼 보이도록 함께 작업해보세요. 이미 앱 스타일한 경우, [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries)를 사용하여 데스크톱과 모바일 장치 다 잘 작동하는 [responsive design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks)으로 만들어보세요.
-
-여기는 꾸며진 대시보드 페이지의 예시입니다:
-
-![Screenshot of an example result of the dashboard after styling](../../images/screen2.png)
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46?loc=ko)
-
-## 과제
-
-[Refactor and comment your code](../assignment.md)
diff --git a/7-bank-project/3-data/translations/README.ms.md b/7-bank-project/3-data/translations/README.ms.md
deleted file mode 100644
index 548dcb10..00000000
--- a/7-bank-project/3-data/translations/README.ms.md
+++ /dev/null
@@ -1,334 +0,0 @@
-# Bina Aplikasi Perbankan Bahagian 3: Kaedah Mengambil dan Menggunakan Data
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45)
-
-### Pengenalan
-
-Inti setiap aplikasi web ada *data*. Data boleh dilakukan dalam pelbagai bentuk, tetapi tujuan utamanya adalah untuk menunjukkan maklumat kepada pengguna. Dengan aplikasi web menjadi semakin interaktif dan kompleks, bagaimana pengguna mengakses dan berinteraksi dengan maklumat kini menjadi bahagian penting dalam pembangunan web.
-
-Dalam pelajaran ini, kita akan melihat cara mengambil data dari pelayan secara asinkron, dan menggunakan data ini untuk memaparkan maklumat di laman web tanpa memuatkan semula HTML.
-
-### Prasyarat
-
-Anda perlu membina bahagian [Borang Log Masuk dan Pendaftaran](../2-forms/README.md) dari aplikasi web untuk pelajaran ini. Anda juga perlu memasang [Node.js](https://nodejs.org) dan [jalankan API pelayan](../api/README.md) secara tempatan supaya anda mendapat data akaun.
-
-Anda boleh menguji bahawa pelayan berjalan dengan betul dengan menjalankan perintah ini di terminal:
-
-```sh
-curl http://localhost:5000/api
-# -> harus mengembalikan "Bank API v1.0.0" sebagai hasilnya
-```
-
----
-
-## AJAX dan pengambilan data
-
-Laman web tradisional mengemas kini kandungan yang dipaparkan ketika pengguna memilih pautan atau mengirimkan data menggunakan borang, dengan memuatkan semula halaman HTML penuh. Setiap kali data baru dimuat, pelayan web mengembalikan halaman HTML baru yang perlu diproses oleh penyemak imbas, mengganggu tindakan pengguna semasa dan membatasi interaksi semasa muat semula. Alur kerja ini juga disebut *Aplikasi Multi-Halaman* atau *MPA*.
-
-![Kemas kini aliran kerja dalam aplikasi berbilang halaman](./images/mpa.png)
-
-Ketika aplikasi web mula menjadi lebih kompleks dan interaktif, teknik baru yang disebut [AJAX (Asynchronous JavaScript and XML)](https://en.wikipedia.org/wiki/Ajax_(programming)) muncul. Teknik ini membolehkan aplikasi web mengirim dan mengambil data dari pelayan secara asinkron menggunakan JavaScript, tanpa harus memuat semula halaman HTML, menghasilkan kemas kini yang lebih cepat dan interaksi pengguna yang lebih lancar. Apabila data baru diterima dari pelayan, halaman HTML semasa juga dapat diperbarui dengan JavaScript menggunakan API [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model). Dari masa ke masa, pendekatan ini telah berkembang menjadi apa yang sekarang disebut [*Aplikasi Halaman Tunggal* atau *SPA*](https://en.wikipedia.org/wiki/Single-page_application).
-
-![Kemas kini alur kerja dalam aplikasi satu halaman](./images/spa.png)
-
-Semasa AJAX pertama kali diperkenalkan, satu-satunya API yang tersedia untuk mengambil data secara asinkron adalah [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest). Tetapi penyemak imbas moden kini juga melaksanakan [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API), yang menggunakan janji dan lebih sesuai untuk dimanipulasi Data JSON.
-
-> Walaupun semua penyemak imbas moden menyokong `Fetch API`, jika anda mahu aplikasi web anda berfungsi pada penyemak imbas lama atau penyemak imbas lama, sebaiknya periksa [jadual keserasian di caniuse.com](https://caniuse.com/fetch) pertama.
-
-### Tugas
-
-Dalam [pelajaran sebelumnya](../2-form/README.md) kami melaksanakan borang pendaftaran untuk membuat akaun. Kami sekarang akan menambahkan kod untuk log masuk menggunakan akaun yang ada, dan mengambil datanya. Buka fail `app.js` dan tambahkan fungsi `login` baru:
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-}
-```
-
-Di sini kita mulakan dengan mengambil elemen borang dengan `getElementById()`, dan kemudian kita mendapat nama pengguna dari input dengan `loginForm.user.value`. Setiap kawalan borang dapat diakses dengan namanya (diatur dalam HTML menggunakan atribut `name`) sebagai harta bentuk.
-
-Dengan cara yang serupa dengan apa yang kami lakukan untuk pendaftaran, kami akan membuat fungsi lain untuk melakukan permintaan pelayan, tetapi kali ini untuk mengambil data akaun:
-
-```js
-async function getAccount(user) {
-  try {
-    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
-    return await response.json();
-  } catch (error) {
-    return { error: error.message || 'Unknown error' };
-  }
-}
-```
-
-Kami menggunakan API `fetch` untuk meminta data secara tidak serentak dari pelayan, tetapi kali ini kami tidak memerlukan parameter tambahan selain URL untuk dipanggil, kerana kami hanya meminta data. Secara lalai, `fetch` membuat permintaan HTTP [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET), itulah yang kami cari di sini.
-
-✅ `encodeURIComponent()` adalah fungsi yang melarikan diri daripada watak khas untuk URL. Masalah apa yang mungkin kita hadapi jika kita tidak memanggil fungsi ini dan menggunakan nilai `pengguna` secara langsung di URL?
-
-Sekarang mari kita kemas kini fungsi `login` kami untuk menggunakan `getAccount`:
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-  const data = await getAccount(user);
-
-  if (data.error) {
-    return console.log('loginError', data.error);
-  }
-
-  account = data;
-  navigate('/dashboard');
-}
-```
-
-Pertama, kerana `getAccount` adalah fungsi tak segerak, kita perlu memadankannya dengan kata kunci `await` untuk menunggu hasil pelayan. Seperti permintaan pelayan, kami juga harus menangani kes ralat. Buat masa ini kami hanya akan menambahkan mesej log untuk memaparkan ralat, dan kembali kepadanya kemudian.
-
-Kemudian kita harus menyimpan data di suatu tempat sehingga nanti kita dapat menggunakannya untuk memaparkan maklumat papan pemuka. Oleh kerana pemboleh ubah `account` belum ada, kami akan membuat pemboleh ubah global untuknya di bahagian atas fail kami:
-
-```js
-let account = null;
-```
-
-Setelah data pengguna disimpan ke dalam variabel kita dapat menavigasi dari halaman *login* ke papan pemuka * menggunakan fungsi `navigate()` yang sudah kita miliki.
-
-Akhirnya, kita perlu memanggil fungsi `login` kita semasa borang log masuk dihantar, dengan mengubah HTML:
-
-```html
-<form id="loginForm" action="javascript:login()">
-```
-
-Uji bahawa semuanya berfungsi dengan betul dengan mendaftarkan akaun baru dan cuba log masuk menggunakan akaun yang sama.
-
-Sebelum beralih ke bahagian seterusnya, kita juga dapat menyelesaikan fungsi `register` dengan menambahkan ini di bahagian bawah fungsi:
-
-```js
-account = result;
-navigate('/dashboard');
-```
-
-✅ Tahukah anda bahawa secara lalai, anda hanya dapat memanggil API pelayan dari *domain dan port yang sama* daripada halaman web yang anda lihat? Ini adalah mekanisme keselamatan yang dikuatkuasakan oleh penyemak imbas. Tetapi tunggu, aplikasi web kami berjalan di `localhost: 3000` sedangkan API pelayan berjalan di `localhost: 5000`, mengapa ia berfungsi? Dengan menggunakan teknik yang disebut [Cross-Origin Resource Sharing (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS), adalah mungkin untuk melakukan permintaan HTTP bersilang asal jika pelayan menambah tajuk khas untuk respons, yang memungkinkan pengecualian untuk domain tertentu.
-
-> Ketahui lebih lanjut mengenai API dengan mengambil [pelajaran](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)
-
-## Kemas kini HTML untuk memaparkan data
-
-Sekarang kita mempunyai data pengguna, kita harus mengemas kini HTML yang ada untuk memaparkannya. Kami sudah tahu cara mendapatkan elemen dari DOM menggunakan contohnya `document.getElementById()`. Setelah anda mempunyai elemen asas, berikut adalah beberapa API yang boleh anda gunakan untuk mengubahnya atau menambahkan elemen anak padanya:
-
-- Dengan menggunakan sifat [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent), anda boleh mengubah teks elemen. Perhatikan bahawa mengubah nilai ini akan membuang semua anak elemen (jika ada) dan menggantinya dengan teks yang disediakan. Oleh itu, ini juga kaedah yang berkesan untuk membuang semua anak dari elemen tertentu dengan memberikan string kosong "" kepadanya.
-
-- Menggunakan [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/DocumentcreateElement) bersama dengan [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) kaedah anda boleh membuat dan melampirkan satu atau lebih elemen anak baru.
-
-✅ Menggunakan sifat [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) elemen juga mungkin untuk mengubah kandungan HTMLnya, tetapi yang ini harus dielakkan kerana terdedah kepada serangan [cross-site scripting (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting) serangan.
-
-### Tugas
-
-Sebelum beralih ke skrin papan pemuka, ada satu perkara lagi yang harus kita lakukan di halaman *log masuk*. Pada masa ini, jika anda cuba log masuk dengan nama pengguna yang tidak ada, mesej ditunjukkan di konsol tetapi untuk pengguna biasa tidak ada yang berubah dan anda tidak tahu apa yang berlaku.
-
-Mari tambahkan elemen placeholder dalam borang log masuk di mana kita dapat memaparkan mesej ralat jika diperlukan. Tempat yang bagus adalah tepat sebelum log masuk `<button>`:
-
-```html
-...
-<div id="loginError"></div>
-<button>Login</button>
-...
-```
-
-Elemen `<div>` ini kosong, yang bermaksud bahawa tidak ada yang akan dipaparkan di layar sehingga kami menambahkan beberapa kandungan ke dalamnya. Kami juga memberikannya `id` sehingga kami dapat mengambilnya dengan mudah dengan JavaScript.
-
-Kembali ke fail `app.js` dan buat fungsi pembantu baru `updateElement`:
-
-```js
-function updateElement(id, text) {
-  const element = document.getElementById(id);
-  element.textContent = text;
-}
-```
-
-Yang ini cukup mudah: diberi elemen *id* dan *teks*, ia akan mengemas kini kandungan teks elemen DOM dengan `id` yang sepadan. Mari gunakan kaedah ini sebagai ganti mesej ralat sebelumnya dalam fungsi `login`:
-
-```js
-if (data.error) {
-  return updateElement('loginError', data.error);
-}
-```
-
-Sekiranya anda cuba log masuk dengan akaun yang tidak sah, anda akan melihat seperti ini:
-
-![Tangkapan skrin yang menunjukkan mesej ralat yang ditunjukkan semasa log masuk](../images/login-error.png)
-
-Sekarang kita mempunyai teks ralat yang muncul secara visual, tetapi jika anda mencubanya dengan pembaca skrin, anda akan melihat bahawa tidak ada yang diumumkan. Agar teks yang ditambahkan secara dinamis ke halaman diumumkan oleh pembaca skrin, ia perlu menggunakan sesuatu yang disebut [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions). Di sini kita akan menggunakan jenis kawasan langsung yang disebut amaran:
-
-```html
-<div id="loginError" role="alert"></div>
-```
-
-Terapkan tingkah laku yang sama untuk kesalahan fungsi `register` (jangan lupa untuk mengemas kini HTML).
-
-## Paparkan maklumat di papan pemuka
-
-Dengan menggunakan teknik yang sama seperti yang baru kita lihat, kita juga akan menjaga memaparkan maklumat akaun di halaman papan pemuka.
-
-Seperti inilah objek akaun yang diterima dari pelayan:
-
-```json
-{
-  "user": "test",
-  "currency": "$",
-  "description": "Test account",
-  "balance": 75,
-  "transactions": [
-    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
-    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
-    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
-  ],
-}
-```
-
-> Catatan: untuk menjadikan hidup anda lebih mudah, anda boleh menggunakan akaun `test` yang sudah ada yang sudah diisi dengan data.
-
-### Tugas
-
-Mari mulakan dengan mengganti bahagian "Baki" dalam HTML untuk menambahkan elemen ruang letak:
-
-```html
-<section>
-  Balance: <span id="balance"></span><span id="currency"></span>
-</section>
-```
-
-Kami juga akan menambah bahagian baru di bawah untuk memaparkan keterangan akaun:
-
-```html
-<h2 id="description"></h2>
-```
-
-✅ Oleh kerana perihalan akaun berfungsi sebagai tajuk untuk kandungan di bawahnya, ia ditandakan secara semantik sebagai tajuk. Ketahui lebih lanjut mengenai bagaimana [struktur tajuk](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility) penting untuk dilayari, dan lihat halaman secara kritis untuk menentukan apa lagi boleh menjadi tajuk.
-
-Seterusnya, kami akan membuat fungsi baru di `app.js` untuk mengisi ruang letak:
-
-```js
-function updateDashboard() {
-  if (!account) {
-    return navigate('/login');
-  }
-
-  updateElement('description', account.description);
-  updateElement('balance', account.balance.toFixed(2));
-  updateElement('currency', account.currency);
-}
-```
-
-Pertama, kami memeriksa bahawa kami mempunyai data akaun yang kami perlukan sebelum melangkah lebih jauh. Kemudian kami menggunakan fungsi `updateElement()` yang kami buat sebelumnya untuk mengemas kini HTML.
-
-> Untuk menjadikan paparan keseimbangan lebih cantik, kami menggunakan kaedah [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) untuk daya memaparkan nilai dengan 2 digit selepas titik perpuluhan.
-
-Sekarang kita perlu memanggil fungsi `updateDashboard()` setiap kali papan pemuka dimuat. Sekiranya anda sudah menyelesaikan [tugasan 1](../1-template-route/assignment.md) ini harus dilakukan dengan mudah, jika tidak, anda boleh menggunakan pelaksanaan berikut.
-
-Tambahkan kod ini ke akhir fungsi `updateRoute()`:
-
-```js
-if (typeof route.init === 'function') {
-  route.init();
-}
-```
-
-And update the routes definition with:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
-};
-```
-
-Dengan perubahan ini, setiap kali halaman dashboard ditampilkan, fungsi `updateDashboard()` dipanggil. Selepas log masuk, anda seharusnya dapat melihat baki akaun, mata wang dan keterangan.
-
-## Buat baris jadual secara dinamik dengan templat HTML
-
-Dalam [first lesson](../1-template-route/README.md) kami menggunakan templat HTML bersama dengan [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) kaedah untuk melaksanakan navigasi di aplikasi kami. Templat juga dapat lebih kecil dan digunakan untuk mengisi bahagian halaman yang berulang secara dinamis.
-
-Kami akan menggunakan pendekatan yang serupa untuk memaparkan senarai transaksi dalam jadual HTML.
-
-### Tugas 
-
-Tambahkan templat baru dalam HTML `<body>`:
-
-```html
-<template id="transaction">
-  <tr>
-    <td></td>
-    <td></td>
-    <td></td>
-  </tr>
-</template>
-```
-
-Templat ini mewakili satu baris jadual, dengan 3 lajur yang ingin kita isi: *tarikh*, *objek* dan *jumlah* transaksi.
-
-Kemudian, tambahkan sifat `id` ini ke elemen` <tbody> `di dalam templat papan pemuka untuk memudahkan pencarian menggunakan JavaScript:
-
-```html
-<tbody id="transactions"></tbody>
-```
-
-HTML kami sudah siap, mari beralih ke kod JavaScript dan buat fungsi baru `createTransactionRow`:
-
-```js
-function createTransactionRow(transaction) {
-  const template = document.getElementById('transaction');
-  const transactionRow = template.content.cloneNode(true);
-  const tr = transactionRow.querySelector('tr');
-  tr.children[0].textContent = transaction.date;
-  tr.children[1].textContent = transaction.object;
-  tr.children[2].textContent = transaction.amount.toFixed(2);
-  return transactionRow;
-}
-```
-
-Fungsi ini melakukan apa yang disiratkan namanya: menggunakan templat yang kita buat sebelumnya, ia membuat baris jadual baru dan mengisi isinya menggunakan data transaksi. Kami akan menggunakannya dalam fungsi `updateDashboard()` kami untuk mengisi jadual:
-
-```js
-const transactionsRows = document.createDocumentFragment();
-for (const transaction of account.transactions) {
-  const transactionRow = createTransactionRow(transaction);
-  transactionsRows.appendChild(transactionRow);
-}
-updateElement('transactions', transactionsRows);
-```
-
-Di sini kita menggunakan kaedah [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment) yang membuat serpihan DOM baru yang boleh kita gunakan , sebelum akhirnya melampirkannya ke jadual HTML kami.
-
-Masih ada satu perkara lagi yang harus kita lakukan sebelum kod ini dapat berfungsi, kerana fungsi `updateElement()` kami pada masa ini hanya menyokong kandungan teks. Mari ubah kodnya sedikit:
-
-```js
-function updateElement(id, textOrNode) {
-  const element = document.getElementById(id);
-  element.textContent = ''; // Removes all children
-  element.append(textOrNode);
-}
-```
-
-Kami menggunakan kaedah [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) kerana ia membolehkan melampirkan teks atau [DOM Nodes] (https : //developer.mozilla.org/docs/Web/API/Node) ke elemen induk, yang sangat sesuai untuk semua kes penggunaan kami.
-
-Sekiranya anda cuba menggunakan akaun `test` untuk log masuk, kini anda akan melihat senarai transaksi di papan pemuka 🎉.
-
----
-
-## 🚀 Cabaran
-
-Bekerjasama untuk menjadikan halaman papan pemuka kelihatan seperti aplikasi perbankan sebenar. Sekiranya anda sudah menggayakan aplikasi anda, cuba gunakan [pertanyaan media](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) untuk membuat [responsive design](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks) berfungsi dengan baik pada kedua-dua desktop dan peranti mudah alih.
-
-Berikut adalah contoh halaman papan pemuka yang digayakan:
-
-![Tangkapan skrin hasil contoh papan pemuka selepas menggayakan](../../images/screen2.png)
-
-## Kuiz Pasca Kuliah
-
-[Kuiz Pasca Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46)
-
-## Tugasan
-
-[Refaktor dan komen kod anda](assignment.ms.md)
\ No newline at end of file
diff --git a/7-bank-project/3-data/translations/README.zh-tw.md b/7-bank-project/3-data/translations/README.zh-tw.md
deleted file mode 100644
index 77ad7a29..00000000
--- a/7-bank-project/3-data/translations/README.zh-tw.md
+++ /dev/null
@@ -1,336 +0,0 @@
-# 建立銀行網頁應用程式 Part 3：取得並使用資料
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/45?loc=zh_tw)
-
-### 大綱
-
-每一個網頁應用程式的核心為*資料*。資料有很多種格式，但它們的目的都是為了顯示使用者需要的資訊。網頁應用程式變得高互動性與複雜，使用者如何取得內容並與之進行互動變成網頁開發重要的一環。
-
-在這堂課中，我們會了解伺服器是如何非同步地取得資料，並在不重新載入 HTML 的情況下，利用這些資料顯示在網頁上。
-
-### 開始之前
-
-你需要先完成系列課程 ── [登入與註冊表單](../../2-forms/translations/README.zh-tw.md)。你還需要安裝 [Node.js](https://nodejs.org) 並[執行伺服器 API](../../api/translations/README.zh-tw.md)。
-
-你可以測試伺服器是否運作正常，在終端機中輸入指令：
-
-```sh
-curl http://localhost:5000/api
-# -> 會回傳結果 "Bank API v1.0.0"
-```
-
----
-
-## AJAX 和取得資料
-
-傳統的網頁在使用者點擊連結，或是提交表單資料時，重新載入全部的 HTML 頁面來更新網頁內容。每當資料要被更新時，伺服器就需要回傳全新的 HTML 頁面給瀏覽器處理，同時也干涉到使用者正在進行的動作，重新載入的機制也限制了許多互動功能。這種工作流程被稱為*多頁面應用程式(Multi-Page Application)*，簡稱 *MPA*。
-
-![多頁面應用程式的更新流程](../images/mpa.png)
-
-網頁應用程式變得更加複雜，促使新的技術問世：[AJAX (Asynchronous JavaScript and XML)](https://zh.wikipedia.org/wiki/AJAX)。
-
-這個技巧允許網頁應用程式使用 JavaScript 非同步地傳遞與接收伺服器的資料，不需要重新載入 HTML 頁面，也反映在更快速的更新速率與更流暢的使用者體驗。在接收伺服器的新資料時，目前的 HTML 頁面可以被 JavaScript 利用 [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model) API 更新。自此之後，這種流程演變成現今的[*單一頁面應用程式(Single-Page Application)*，*SPA*](https://zh.wikipedia.org/wiki/%E5%8D%95%E9%A1%B5%E5%BA%94%E7%94%A8)。
-
-![單一頁面應用程式的更新流程](../images/spa.png)
-
-在 AJAX 早期，唯一取得資料的 API 為 [`XMLHttpRequest`](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)。但當代的瀏覽器已經建立出更方便且強大的 [`Fetch` API](https://developer.mozilla.org/docs/Web/API/Fetch_API)，它們使用 Promises 物件且更適合應用在 JSON 資料上。
-
-> 許多當代瀏覽器支援 `Fetch API`，如果你想確認你的網頁應用程式是否運作在舊款的瀏覽器，檢查 [caniuse.com 上的相容性測試](https://caniuse.com/fetch)是一個好方法。
-
-### 課題
-
-在[前一堂課程中](../../2-forms/translations/README.zh-tw.md)，我們製作出註冊表單來建立新帳戶。現在我們來加入新程式，使用現有的帳戶登入，並取得其相關資料。開啟檔案 `app.js` 並新增函式 `login`：
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-}
-```
-
-現在我們利用 `getElementById()` 接收表單元素，並藉由 `loginForm.user.value` 取得輸入框內的使用者名稱。每一個表單控制可以以各自名稱(即 HTML 內的 `name` 屬性)來存取。
-
-就像我們為註冊帳戶作的事一樣，我們建立另一個函式來執行伺服器請求，但這次是為了取得帳戶資料：
-
-```js
-async function getAccount(user) {
-  try {
-    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
-    return await response.json();
-  } catch (error) {
-    return { error: error.message || 'Unknown error' };
-  }
-}
-```
-
-我們使用 `fetch` API 來向伺服器做非同步資料請求。這次我們不需要添加額外的參數，如網址，我們只詢問資料內容。預設上，`fetch` 建立出 [`GET`](https://developer.mozilla.org/docs/Web/HTTP/Methods/GET) HTTP 請求，即我們想做的事情。
-
-✅ 函式 `encodeURIComponent()` 可以轉換網址內的特殊字元。如果我們不呼叫這個函式，而是直接將 `user` 這項數值放入網址中，這會發生什麼問題？
-
-讓我們來更新函式 `login`，使用 `getAccount`：
-
-```js
-async function login() {
-  const loginForm = document.getElementById('loginForm')
-  const user = loginForm.user.value;
-  const data = await getAccount(user);
-
-  if (data.error) {
-    return console.log('loginError', data.error);
-  }
-
-  account = data;
-  navigate('/dashboard');
-}
-```
-
-首先，`getAccount` 是一個非同步函式，它利用關鍵字 `await` 等待伺服器的回傳結果。就如其他伺服器請求一樣，我們也必須要處理錯誤的情況。現在我們只加錯誤訊息給這些情況，之後再回過頭解決這些問題。
-
-接著，我們必須儲存資料，在之後可以輸出成儀表板的資訊。目前變數 `account` 還沒存在，我們建立它的全域變數在檔案最上方：
-
-```js
-let account = null;
-```
-
-在用戶資料存到變數中後，我們可以使用函式 `navigate()` 從*登入*頁面切換到*儀表板*頁面。
-
-最後，在登入表單提交時，呼叫函式 `login`。修改 HTML 語法：
-
-```html
-<form id="loginForm" action="javascript:login()">
-```
-
-測試註冊功能，以及新註冊的帳戶的登入行為是否運作正常。
-
-在進行下一步驟前，我們還必須完成函式 `register`。在此函式的最下方加入：
-
-```js
-account = result;
-navigate('/dashboard');
-```
-
-✅ 你知道在預設上，你只能從*同一個網域(domain)與連接埠(port)*的網頁呼叫伺服器 APIs 嗎？這是瀏覽器強制性的安全機制。但我們的網頁應用程式在 `localhost:3000` 上執行，而伺服器 API 則在 `localhost:5000` 上執行。為什麼這樣能正常運作？利用[跨來源資源共用 (CORS)](https://developer.mozilla.org/docs/Web/HTTP/CORS)，只要伺服器添加特殊的標頭檔到網頁回應中，我們就可以處理跨資源的 HTTP 請求，允許特殊的網域進行呼叫。
-
-> 藉由前往[此課程](https://docs.microsoft.com/learn/modules/use-apis-discover-museum-art/?WT.mc_id=academic-77807-sagibbon)學習更多有關 API 的資訊。
-
-## 更新 HTML 顯示資料
-
-現在取得完用戶資料，我們必須更新到現有的 HTML 上。我們已經知道如何接收 DOM 的元素，例子為 `document.getElementById()`。只要你有元素，這邊有一些 API 讓你修改，或是新增子元素上去：
-
-- 使用 [`textContent`](https://developer.mozilla.org/docs/Web/API/Node/textContent) 屬性，你可以改變元素的文字內容。注意改變此數值會刪除它的所有子元素(若存在的話)，並以該文字內容來替換它。同時，這也是個有效的方法來刪去所有的子成員，只要賦予它空字串 `''`。
-
-- 使用 [`document.createElement()`](https://developer.mozilla.org/docs/Web/API/Document/createElement) 與 [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append) 這兩方法，你可以建立並接上一到多個子元素成員。
-
-✅ 使用 [`innerHTML`](https://developer.mozilla.org/docs/Web/API/Element/innerHTML) 元素屬性也能改變 HTML 的內容，但這方法要避免使用。這可能會遭遇有關[跨網站指令碼 (XSS)](https://developer.mozilla.org/docs/Glossary/Cross-site_scripting)的攻擊。
-
-### 課題
-
-在來到儀表板畫面之前，我們還需要幫*登入*頁面加一件事。目前，如果你試著使用不存在的帳戶進行登入，訊息只會出現在命令欄中，而使用者不會發覺到任何事情改變，也不清楚網頁發生了什麼事。
-
-我們在登入表單中新增顯示錯誤訊息的地方。最好的地方為登入按鈕 `<button>` 之前：
-
-```html
-...
-<div id="loginError"></div>
-<button>Login</button>
-...
-```
-
-這個 `<div>` 元素為空的，代表著畫面不會印出任何訊息，直到我們添加內容進去。我們還給了它 `id`，讓 JavaScript 可以容易地存取它。
-
-回到檔案 `app.js`，建立新的補助函數 `updateElement`：
-
-```js
-function updateElement(id, text) {
-  const element = document.getElementById(id);
-  element.textContent = text;
-}
-```
-
-這條就很直觀：給定元素的 *id* 與 *text*，它會更新 DOM 元素內符合 `id` 條件的文字內容。我們也使用這個方法到前面 `login` 函式的錯誤訊息中：
-
-```js
-if (data.error) {
-  return updateElement('loginError', data.error);
-}
-```
-
-現在，試著以不合法的帳戶進行登入，你應該能看到像這樣的畫面：
-
-![登入出現錯誤訊息之截圖](../images/login-error.png)
-
-現在我們印出錯誤訊息，但螢幕報讀器並沒有做任何報讀。為了讓被動態加入的文字能被螢幕報讀器閱讀出來，我們需要使用 [Live Region](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/ARIA_Live_Regions)。這邊我們使用一種 Live Region 的類型 alert：
-
-```html
-<div id="loginError" role="alert"></div>
-```
-
-建立同樣的行為到函式 `register` 的錯誤訊息當中，也別忘了更新你的 HTML。
-
-## 在儀表板顯示資訊
-
-使用同樣的技巧，我們需要將帳戶資訊印在儀表板頁面中。
-
-這是從伺服器接收到的帳戶資料物件：
-
-```json
-{
-  "user": "test",
-  "currency": "$",
-  "description": "Test account",
-  "balance": 75,
-  "transactions": [
-    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
-    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
-    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
-  ],
-}
-```
-
-> 筆記：為了讓開發更加的容易，你可以使用已經存在資料的帳戶 `test`。
-
-### 課題
-
-我們開始置換掉 HTML 檔內的 "Balance" 區域，加入放置區：
-
-```html
-<section>
-  Balance: <span id="balance"></span><span id="currency"></span>
-</section>
-```
-
-我們還需要在下方新增區域來顯示帳戶資訊：
-
-```html
-<h2 id="description"></h2>
-```
-
-✅ 表示帳戶資訊的函式剛好為在內容的標題處，我們可以將它作為語義化的標頭。學習更多關於[標頭結構](https://www.nomensa.com/blog/2017/how-structure-headings-web-accessibility)，它對於網頁親和力格外重要，也明顯地表達出頁面的標頭位置。
-
-接著，我們在 `app.js` 檔案中加入新的函式來為放置區新增內容：
-
-```js
-function updateDashboard() {
-  if (!account) {
-    return navigate('/login');
-  }
-
-  updateElement('description', account.description);
-  updateElement('balance', account.balance.toFixed(2));
-  updateElement('currency', account.currency);
-}
-```
-
-首先，我們需要先檢查帳戶的資料。使用我們之前建立的函式 `updateElement()` 來更新 HTML 檔。
-
-> 為了讓帳戶餘額漂亮地呈現，我們使用 [`toFixed(2)`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number/toFixed) 這個方法，強迫數值只顯示到小數點第二位。
-
-現在，每當儀表板被載入時，我們就需要呼叫函式 `updateDashboard()`。如果你已經完成[課程一的作業](../../1-template-route/translations/assignment.zh-tw.md)，就不需要額外做處理，不然你可以使用接下來的設定。
-
-加入這段程式碼到函式 `updateRoute()` 的下方：
-
-```js
-if (typeof route.init === 'function') {
-  route.init();
-}
-```
-
-並更新路由定義：
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
-};
-```
-
-做完這些更動後，當儀表板要被呈現時，函式 `updateDashboard() 就會被呼叫。在你登入後就能看到帳戶的描述、餘額與交易狀況。
-
-## 利用 HTML 模板動態建立表格列
-
-在[第一堂課](../../1-template-route/translations/README.zh-tw.md)中，我們使用 HTML 模板與方法 [`appendChild()`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) 來做出應用程式內的轉換。模板還能執行更小規模的行為，動態地改變一部份的頁面
-
-我們使用類似的方式來顯示 HTML 表格中的交易清單。
-
-### 課題
-
-加入新的模板到 HTML 的 `<body>` 中：
-
-```html
-<template id="transaction">
-  <tr>
-    <td></td>
-    <td></td>
-    <td></td>
-  </tr>
-</template>
-```
-
-這個模板表示單一條的表格列，其中包含了三格欄位：交易的*日期*、*物件* 與 *金額*。
-
-接著，加入 `id` 屬性到模板的表格 `<tbody>` 元素中，讓 JavaScript 能更容易地取得：
-
-```html
-<tbody id="transactions"></tbody>
-```
-
-當我們的 HTML 準備好時，我們切換到 JavaScript 檔案中，加入新函式 `createTransactionRow`：
-
-```js
-function createTransactionRow(transaction) {
-  const template = document.getElementById('transaction');
-  const transactionRow = template.content.cloneNode(true);
-  const tr = transactionRow.querySelector('tr');
-  tr.children[0].textContent = transaction.date;
-  tr.children[1].textContent = transaction.object;
-  tr.children[2].textContent = transaction.amount.toFixed(2);
-  return transactionRow;
-}
-```
-
-這個函式做就如它名字的功能：藉由剛建立的模板，建立出新的表格列並填入交易明細的資料。我們會在函式 `updateDashboard()` 中，利用它來更新表格：
-
-```js
-const transactionsRows = document.createDocumentFragment();
-for (const transaction of account.transactions) {
-  const transactionRow = createTransactionRow(transaction);
-  transactionsRows.appendChild(transactionRow);
-}
-updateElement('transactions', transactionsRows);
-```
-
-這裡我們使用了方法 [`document.createDocumentFragment()`](https://developer.mozilla.org/docs/Web/API/Document/createDocumentFragment)，建立新的 DOM 分段，再接到我們的 HTML 表格中。
-
-我們還需要做一件事才能讓程式運作正常，目前函式 `updateElement()` 只能接受文字類型的內容。我們稍微修改一下程式碼：
-
-```js
-function updateElement(id, textOrNode) {
-  const element = document.getElementById(id);
-  element.textContent = ''; // Removes all children
-  element.append(textOrNode);
-}
-```
-
-我們使用方法 [`append()`](https://developer.mozilla.org/docs/Web/API/ParentNode/append)，它能連接文字或者是 [DOM 節點](https://developer.mozilla.org/docs/Web/API/Node)到父元素中，正好滿足我們的需求。
-
-試著以 `test` 帳戶來登入，你應該能看到儀表板顯示出交易明細了 🎉。
-
----
-
-## 🚀 挑戰
-
-花功夫讓儀表板頁面看起來像是正規的銀行界面。如果你已經為你的應用程式做好造型，你可以試試 [media queries](https://developer.mozilla.org/docs/Web/CSS/Media_Queries) 來建立出[回應式網頁設計](https://developer.mozilla.org/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks)，它能完美地呈現在電腦或是行動裝置上。
-
-這邊有造型過後的儀表板例子：
-
-![造型化後的儀表板截圖](../../images/screen2.png)
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/46?loc=zh_tw)
-
-## 作業
-
-[重構並註解你的程式碼](assignment.zh-tw.md)
diff --git a/7-bank-project/3-data/translations/assignment.es.md b/7-bank-project/3-data/translations/assignment.es.md
deleted file mode 100644
index 59573270..00000000
--- a/7-bank-project/3-data/translations/assignment.es.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Refactoriza y comenta tu código
-
-## Instrucciones
-
-A medida que su código base crece, es importante refactorizar su código con frecuencia para mantenerlo legible y mantenible con el tiempo. Agregue comentarios y refactorice su `app.js` para mejorar la calidad del código:
-
-- Extraer constantes, como la URL base de la API del servidor
-- Factorizar código similar: por ejemplo, puede crear una función `sendRequest()` para reagrupar el código utilizado tanto en `createAccount()` como en `getAccount()`
-- Reorganice el código para que sea más fácil de leer y agregue comentarios
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- |  ------- | --------------------------------------------------  | -------------------------------------------------- |
-| | El código está comentado, bien organizado en diferentes secciones y fácil de leer. Se extraen las constantes y se ha creado una función factorizada `sendRequest()`. | El código está limpio pero aún se puede mejorar con más comentarios, extracción constante o factorización. | El código es desordenado, no comentado, las constantes no se extraen y el código no se factoriza. |
diff --git a/7-bank-project/3-data/translations/assignment.fr.md b/7-bank-project/3-data/translations/assignment.fr.md
deleted file mode 100644
index 8f13a9b2..00000000
--- a/7-bank-project/3-data/translations/assignment.fr.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Refactorisez et commentez votre code
-
-## Instructions
-
-Au fur et à mesure que votre base de code se développe, il est important de refactorisez votre code fréquemment pour qu'il reste lisible et maintenable dans le temps. Ajoutez des commentaires et refactorisez votre `app.js` pour améliorer la qualité du code :
-
-- Extrayez des constantes, telles que l'URL de base de l'API du serveur.
-- Factorisez tout code similaire : par exemple, vous pouvez créer une fonction `sendRequest()` pour regrouper le code utilisé dans les fonctions `createAccount()` et `getAccount()`.
-- Réorganisez le code pour le rendre plus facile à lire, et ajoutez des commentaires.
-
-## Rubrique
-
-| Critères | Exemplaire                                                                                                                                               | Adéquat                                                                                                                     | Besoin d'amélioration                                                                                     |
-| -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-|          | Le code est commenté, bien organisé en différentes sections et facile à lire. Les constantes sont extraites et une fonction `sendRequest()` a été créée. | Le code est propre mais peut encore être amélioré avec plus de commentaires, d'extraction de constantes ou de factorisation.| Le code est désordonné, non commenté, les constantes ne sont pas extraites et le code n'est pas factorisé.|
diff --git a/7-bank-project/3-data/translations/assignment.hi.md b/7-bank-project/3-data/translations/assignment.hi.md
deleted file mode 100644
index ea637896..00000000
--- a/7-bank-project/3-data/translations/assignment.hi.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# अपना कोड रिफैक्टर और टिप्पणी करें
-
-## अनुदेश
-
-जैसे-जैसे आपका कोडबेस बढ़ता है, समय के साथ-साथ पठनीय और बनाए रखने के लिए अपने कोड को बार-बार रिफलेक्टर करना महत्वपूर्ण है। टिप्पणी जोड़ें और कोड की गुणवत्ता में सुधार करने के लिए अपने `app.js` को फिर से फ़िल्टर करें:
-
-- सर्वर API बेस URL की तरह, स्थिरांक निकालें
-- समान कोड को फैक्टराइज़ करें: उदाहरण के लिए आप दोनों `createAccount()` और `getAccount()` में उपयोग किए गए कोड को फिर से इकट्ठा करने के लिए एक `sendRequest()` फ़ंक्शन बना सकते हैं।
-- कोड को पढ़ने, और टिप्पणी जोड़ने में आसान बनाने के लिए इसे पुनर्गठित करें
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                                                                                                                          | पर्याप्त                                                                                        | सुधार की जरूरत                                                                         |
-| ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
-|        | कोड टिप्पणी की गई है, विभिन्न वर्गों में सुव्यवस्थित और पढ़ने में आसान है। स्थिरांक निकाले जाते हैं और एक कारक `sendRequest()` फ़ंक्शन बनाया गया है. | कोड साफ है लेकिन फिर भी अधिक टिप्पणियों, निरंतर निष्कर्षण या कारक के साथ सुधार किया जा सकता है. | कोड गड़बड़ है, टिप्पणी नहीं की गई है, स्थिरांक नहीं निकाले गए हैं और कोड कारक नहीं है. |
diff --git a/7-bank-project/3-data/translations/assignment.it.md b/7-bank-project/3-data/translations/assignment.it.md
deleted file mode 100644
index 6baff51a..00000000
--- a/7-bank-project/3-data/translations/assignment.it.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Refattorizzare e commentare il codice
-
-## Istruzioni
-
-Man mano che la base del codice cresce, è importante rifattorizzare il codice frequentemente per mantenerlo leggibile e gestibile nel tempo. Aggiungere commenti e rifattorizzare la propria `app.js` per migliorare la qualità del codice:
-
-- Estrarre costanti, come l'URL di base dell'API del server
-- Fattorizzare codice simile: ad esempio si può creare una funzione `sendRequest()` per raggruppare il codice utilizzato sia in `createAccount()` che in `getAccount()`
-- Riorganizzare il codice per renderlo più facile da leggere e aggiungere commenti
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-|          | Il codice è commentato, ben organizzato in diverse sezioni e di facile lettura. Le costanti vengono estratte ed è stata creata una funzione `sendRequest()` fattorizzata. | Il codice è pulito ma può ancora essere migliorato con più commenti, estrazione di costanti o fattorizzazione. | Il codice è disordinato, non commentato, le costanti non vengono estratte e il codice non è fattorizzato |
diff --git a/7-bank-project/3-data/translations/assignment.ja.md b/7-bank-project/3-data/translations/assignment.ja.md
deleted file mode 100644
index 478cf5c8..00000000
--- a/7-bank-project/3-data/translations/assignment.ja.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# コードのリファクタとコメント
-
-## 説明書
-
-コードベースが大きくなってくると、読みやすく保守性の高いコードを維持するために、頻繁にリファクタリングを行うことが重要になってきます。コメントを追加して `app.js` をリファクタリングし、コードの品質を向上させましょう。
-
-- サーバー API のベース URL のような定数を抽出します
-- 類似したコードの因数分解: 例えば、`sendRequest()` 関数を作成して `createAccount()` と `getAccount()` の両方で使用するコードを再グループ化することができます
-- 読みやすいようにコードを再編成し、コメントを追加します
-
-## ルーブリック
-
-| 基準 | 模範的な例                                                                                                                                                     | 適切な                                                                                          | 改善が必要                                                                     |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-|          | コードはコメントされており、さまざまなセクションでよく整理されており、読みやすくなっています。定数が抽出され、因数分解された `sendRequest()` 関数が作成されています。 | コードはクリーンですが、より多くのコメント、定数抽出、因数分解などで改善することができます。 | コードは乱雑で、コメントされておらず、定数は抽出されておらず、コードは因数分解されていません。 |
diff --git a/7-bank-project/3-data/translations/assignment.ko.md b/7-bank-project/3-data/translations/assignment.ko.md
deleted file mode 100644
index 977d6e20..00000000
--- a/7-bank-project/3-data/translations/assignment.ko.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 코드 리팩터링 및 주석
-
-## 설명
-
-코드베이스가 커짐에 따라 코드를 자주 리팩터링하여 시간이 지남에 따라 가독성과 유지 관리가 가능하도록 유지하는 것이 중요합니다. 주석을 추가하고 `app.js` 를 리팩터링하여 코드 품질을 개선합니다.
-
-- 서버 API 기본 URL과 같은 상수 추출
-- 유사한 코드를 분해합니다. 예를 들어 `createAccount()` 및 `getAccount()` 모두에서 사용되는 코드를 다시 그룹화하는 `sendRequest()` 함수를 만들 수 있습니다.
-- 읽기 쉽도록 코드 재구성 및 주석 추가
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 코드 주석이 잘 짜여진 여러개의 섹션으로 나뉘며 읽기 쉬운 경우. 그리고 상수들이 추출되고 잘 쪼개진 `sendRequest()` 함수를 생성한 경우 | 코드는 깔끔하지만 더 많은 주석, 지속적인 추출 또는 분해를 통해 개선될 수 있는 경우 | 코드가 지저분하고 주석도 잘 작성하지 않았으며 상수 또한 추출되지 않고 코드도 분해되지 않은 경우
diff --git a/7-bank-project/3-data/translations/assignment.ms.md b/7-bank-project/3-data/translations/assignment.ms.md
deleted file mode 100644
index 4199ba24..00000000
--- a/7-bank-project/3-data/translations/assignment.ms.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Refaktor dan komen kod anda
-
-## Arahan
-
-Apabila pangkalan kod anda berkembang, penting untuk kerap mengubah kod anda agar tetap dapat dibaca dan dikekalkan dari masa ke masa. Tambahkan komen dan ubah semula `app.js` anda untuk meningkatkan kualiti kod:
-
-- Ekstrak pemalar, seperti URL asas API pelayan
-- Faktorkan kod yang serupa: misalnya, anda dapat membuat fungsi `sendRequest()` untuk mengumpulkan kembali kod yang digunakan dalam `createAccount()` dan `getAccount()`
-- Susun semula kod untuk memudahkan membaca, dan menambah komen
-
-## Rubrik
-
-| Kriteria | Contoh                                                                                                                                                     | Mencukupi                                                                                          | Usaha Lagi                                                                    |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-|          | Kod dikomentari, disusun dengan baik dalam pelbagai bahagian dan senang dibaca Pemalar diekstrak dan fungsi `sendRequest()` yang difaktorkan telah dibuat. | Kodnya bersih tetapi masih boleh diperbaiki dengan lebih banyak komen, pengekstrakan berterusan atau pemfaktoran. | Kod tidak kemas, tidak dikomentari, pemalar tidak diekstrak dan kod tidak difaktorkan. |
\ No newline at end of file
diff --git a/7-bank-project/3-data/translations/assignment.nl.md b/7-bank-project/3-data/translations/assignment.nl.md
deleted file mode 100644
index 6114def3..00000000
--- a/7-bank-project/3-data/translations/assignment.nl.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# Refactoreer en becommentarieer uw code
-
-## Instructies
-
-Naarmate uw codebase groeit, is het belangrijk om uw code regelmatig te refactoren om deze in de loop van de tijd leesbaar en onderhoudbaar te houden. Voeg opmerkingen toe en refactoreer uw `app.js` om de kwaliteit van de code te verbeteren:
-
-- Extraheer constanten, zoals de basis-URL van de server-API
-- Factoriseer vergelijkbare code: u kunt bijvoorbeeld een `sendRequest()` functie maken om de code die wordt gebruikt in zowel `createAccount()` als `getAccount()` groeperen
-- Reorganiseer de code zodat deze gemakkelijker leesbaar is en voeg opmerkingen toe
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                                                                                                                                     | Voldoende                                                                                          | Moet worden verbeterd                                                                     |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
-|          | Code is becommentarieerd, goed georganiseerd in verschillende secties en gemakkelijk te lezen. Constanten worden geëxtraheerd en er is een gefactoriseerde `sendRequest()`-functie gemaakt. | Code is schoon, maar kan nog worden verbeterd met meer opmerkingen, constante extractie of factorisatie. | Code is rommelig, er wordt geen commentaar op gegeven, constanten worden niet geëxtraheerd en code wordt niet in factoren verwerkt. |
diff --git a/7-bank-project/3-data/translations/assignment.zh-tw.md b/7-bank-project/3-data/translations/assignment.zh-tw.md
deleted file mode 100644
index 91b20b47..00000000
--- a/7-bank-project/3-data/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 重構並註解你的程式碼
-
-## 簡介
-
-正當你的程式碼越來越多時，頻繁地重構你的程式，讓程式碼容易去閱讀與維護變得十分重要。加入一些註解並重構檔案 `app.js` 來增進檔案的品質：
-
-- 取出常數，好比說伺服器 API 的根網址
-- 重構相同的程式碼：舉例來說，你可以建立函式 `sendRequest()` 來合併 `createAccount()` 與 `getAccount()`。
-- 重新編排你的程式和加入註解，讓它更容易地閱讀。
-
-## 學習評量
-
-| 作業內容 | 優良                                                                          | 普通                                                         | 待改進                                         |
-| -------- | ----------------------------------------------------------------------------- | ------------------------------------------------------------ | ---------------------------------------------- |
-|          | 程式碼有做註解，分塊地整理好。常數有被取出來且函式 `sendRequest()` 已設定完成 | 程式碼有做過處理，但仍可以藉由加入註解、排版與重構來增進品質 | 程式碼很雜亂，缺乏註解，常數與函式並沒有做規劃 |
diff --git a/7-bank-project/4-state-management/translations/README.es.md b/7-bank-project/4-state-management/translations/README.es.md
deleted file mode 100644
index eff6c893..00000000
--- a/7-bank-project/4-state-management/translations/README.es.md
+++ /dev/null
@@ -1,278 +0,0 @@
-# Conceptos de gestión del estado
-
-## [Pre-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
-
-### Introducción
-
-A medida que una aplicación web crece, mantener un seguimiento limpio de todos los flujos de datos se convierte en un desafío. Qué código obtiene los datos, qué página los consume, dónde y cuándo debe actualizarse, es fácil terminar con un código desordenado y difícil de mantener. Esto es especialmente cierto cuando necesita compartir datos entre diferentes páginas de su aplicación, por ejemplo, los datos del usuario. El concepto de *gestión estatal* siempre ha existido en todo tipo de programas, pero a medida que las aplicaciones web siguen creciendo en complejidad, ahora es un punto clave en el que pensar durante el desarrollo.
-
-En esta parte final, revisaremos la aplicación que creamos para repensar cómo se administra el estado, lo que permite la compatibilidad con la actualización del navegador en cualquier momento y la persistencia de datos en las sesiones de los usuarios.
-
-### Requisito previo
-
-Debe haber completado la parte [obtención de datos](../3-data/README.md) de la aplicación web para esta lección. También necesita instalar [Node.js](https://nodejs.org) y [ejecutar la API del servidor](../api/README.md) localmente para poder administrar los datos de la cuenta.
-
-Puede probar que el servidor está funcionando correctamente ejecutando este comando en una terminal:
-
-
-```sh
-curl http://localhost:5000/api
-# -> debe devolver "API bancaria v1.0.0" como resultado
-```
-
----
-
-## Repensar la gestión del estado
-
-En la [lección anterior](../3-data/README.md), empezamos con un concepto básico de estado en nuestra aplicación con la variable global `account` que contiene los datos bancarios del usuario actualmente conectado. Sin embargo, nuestra implementación actual tiene algunas fallas. Intente actualizar la página cuando esté en el panel. Pero ¿qué pasa?
-
-Hay 3 problemas con el código actual:
-
-- El estado no persiste, ya que una actualización del navegador lo lleva de regreso a la página de inicio de sesión.
-- Hay múltiples funciones que modifican el estado. A medida que la aplicación crece, puede dificultar el seguimiento de los cambios y es fácil olvidarse de actualizar uno.
-- El estado no se limpia, cuando hace clic en *Cerrar sesión*, los datos de la cuenta siguen ahí aunque esté en la página de inicio de sesión.
-
-Podríamos actualizar nuestro código para abordar estos problemas uno por uno, pero crearía más duplicación de código y haría que la aplicación sea más compleja y difícil de mantener. O podríamos hacer una pausa por unos minutos y repensar nuestra estrategia.
-
-> ¿Qué problemas estamos realmente tratando de resolver aquí?
-
-La [gestión del estado](https://en.wikipedia.org/wiki/State_management) se trata de encontrar un buen enfoque para resolver estos dos problemas particulares:
-
-- ¿Cómo mantener los flujos de datos en una aplicación fáciles de entender?
-- ¿Cómo mantener los datos de estado siempre sincronizados con la interfaz de usuario (y viceversa)?
-
-Una vez que se haya ocupado de esto, es posible que cualquier otro problema que pueda tener ya esté solucionado o que sea más fácil de solucionar. Hay muchos enfoques posibles para resolver estos problemas, pero optaremos por una solución común que consiste en **centralizar los datos y las formas de cambiarlos**. Los flujos de datos serían así:
-
-![](./images/data-flow.png)
-
-> No cubriremos aquí la parte en la que los datos activan automáticamente la actualización de la vista, ya que está vinculada a conceptos más avanzados de [Programación reactiva](https://en.wikipedia.org/wiki/Reactive_programming). Es un buen tema de seguimiento si estás preparado para una inmersión profunda.
-
-✅ Hay muchas bibliotecas con diferentes enfoques para la administración del estado, [Redux](https://redux.js.org) es una opción popular. Eche un vistazo a los conceptos y patrones utilizados, ya que a menudo es una buena manera de aprender qué problemas potenciales puede enfrentar en aplicaciones web grandes y cómo se pueden resolver.
-
-### Tarea
-
-Comenzaremos con un poco de refactorización. Reemplace la declaración `account`:
-
-```js
-let account = null;
-```
-
-Con:
-
-```js
-let state = {
-  account: null
-};
-```
-
-La idea es *centralizar* todos los datos de nuestra aplicación en un solo objeto de estado. Solo tenemos "cuenta" por ahora en el estado, por lo que no cambia mucho, pero crea un camino fácil para las evoluciones.
-
-También tenemos que actualizar las funciones usándolo. En las funciones `register()` y `login()`, reemplace `account=...` con `state.account=...`;
-
-En la parte superior de la función `updateDashboard()`, agregue esta línea:
-
-```js
-const account = state.account;
-```
-
-Esta refactorización por sí sola no trajo muchas mejoras, pero la idea era sentar las bases para los próximos cambios.
-
-## Seguimiento de cambios de datos
-
-Ahora que hemos implementado el objeto `state` para almacenar nuestros datos, el siguiente paso es centralizar las actualizaciones. El objetivo es facilitar el seguimiento de los cambios y cuándo ocurren.
-
-Para evitar que se realicen cambios en el objeto `state`, también es una buena práctica considerarlo [*inmutable*](https://en.wikipedia.org/wiki/Immutable_object), lo que significa que no se puede modificar en absoluto. También significa que debe crear un nuevo objeto de estado si desea cambiar algo en él. Al hacer esto, crea una protección contra [efectos secundarios](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) potencialmente no deseados y abre posibilidades para nuevas funciones en su aplicación, como implementar deshacer / rehacer, al mismo tiempo que facilita la depuración. Por ejemplo, puede registrar todos los cambios realizados en el estado y mantener un historial de los cambios para comprender el origen de un error.
-
-En JavaScript, puede usar [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) para crear una versión inmutable de un objeto. Si intenta realizar cambios en un objeto inmutable, se generará una excepción.
-
-✅ ¿Conoce la diferencia entre un objeto *superficial* y un objeto inmutable *profundo*? Puede leer sobre esto [aquí](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
-
-### Tarea
-
-Creemos una nueva función `updateState()`:
-
-```js
-function updateState(property, newData) {
-  state = Object.freeze({
-    ...state,
-    [property]: newData
-  });
-}
-```
-
-En esta función, estamos creando un nuevo objeto de estado y copiamos datos del estado anterior usando el operador [*spread (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Luego anulamos una propiedad particular del objeto de estado con los nuevos datos usando la [notación de corchetes](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` para asignación. Finalmente, bloqueamos el objeto para evitar modificaciones usando `Object.freeze()`. Solo tenemos la propiedad `account` almacenada en el estado por ahora, pero con este enfoque puede agregar tantas propiedades como necesite en el estado.
-
-También actualizaremos la inicialización del `estado` para asegurarnos de que el estado inicial también esté congelado:
-
-```js
-let state = Object.freeze({
-  account: null
-});
-```
-
-Después de eso, actualice la función `register` reemplazando la asignación `state.account = result;` con:
-
-```js
-updateState('account', result);
-```
-
-Haz lo mismo con la función `login`, reemplazando `state.account = data;` con:
-
-```js
-updateState('account', data);
-```
-
-Ahora aprovecharemos la oportunidad para solucionar el problema de que los datos de la cuenta no se borran cuando el usuario hace clic en *Cerrar sesión*.
-
-Cree una nueva función `logout()`:
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
-```
-
-En `updateDashboard()`, reemplace la redirección `return navigate('/login');` por `return logout()`;
-
-Intente registrar una nueva cuenta, cierre la sesión y vuelva a iniciarla para comprobar que todo sigue funcionando correctamente.
-
-> Consejo: puede echar un vistazo a todos los cambios de estado agregando `console.log(state)` en la parte inferior de `updateState()` y abriendo la consola en las herramientas de desarrollo de su navegador.
-
-## Persiste el estado
-
-La mayoría de las aplicaciones web necesitan conservar los datos para poder funcionar correctamente. Todos los datos críticos generalmente se almacenan en una base de datos y se accede a ellos a través de una API de servidor, como los datos de la cuenta de usuario en nuestro caso. Pero a veces, también es interesante conservar algunos datos en la aplicación cliente que se ejecuta en su navegador, para una mejor experiencia de usuario o para mejorar el rendimiento de carga.
-
-Cuando desee conservar los datos en su navegador, hay algunas preguntas importantes que debe hacerse:
-
-- *¿Son los datos confidenciales?* Debe evitar almacenar datos confidenciales en el cliente, como contraseñas de usuario.
-- *¿Por cuánto tiempo necesita conservar estos datos?* ¿Planea acceder a estos datos solo para la sesión actual o desea que se almacenen para siempre?
-
-Hay varias formas de almacenar información dentro de una aplicación web, dependiendo de lo que desee lograr. Por ejemplo, puede utilizar las URL para almacenar una consulta de búsqueda y hacer que se pueda compartir entre los usuarios. También puede utilizar [cookies HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies) si los datos deben compartirse con el servidor, como [autenticación](https://en.wikipedia.org/wiki/Authentication) de la información.
-
-Otra opción es utilizar una de las muchas API del navegador para almacenar datos. Dos de ellos son particularmente interesantes:
-
-- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): un [almacén de claves / valores](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) que permite conservar datos específicos del sitio web actual en diferentes sesiones. Los datos guardados en él nunca caducan.
-- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): este funciona igual que `localStorage` excepto que los datos almacenados en él se borran cuando finaliza la sesión (cuando se cierra el navegador).
-
-Tenga en cuenta que estas dos API solo permiten almacenar [cadenas](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Si desea almacenar objetos complejos, deberá serializarlos al formato [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) usando [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
-
-✅ Si desea crear una aplicación web que no funcione con un servidor, también es posible crear una base de datos en el cliente usando la [API de IndexedDB](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Este está reservado para casos de uso avanzados o si necesita almacenar una cantidad significativa de datos, ya que es más complejo de usar.
-
-### Tarea
-
-Queremos que nuestros usuarios permanezcan conectados hasta que hagan clic explícitamente en el botón *Cerrar sesión*, por lo que usaremos `localStorage` para almacenar los datos de la cuenta. Primero, definamos una clave que usaremos para almacenar nuestros datos.
-
-```js
-const storageKey = 'savedAccount';
-```
-
-Luego agregue esta línea al final de la función `updateState()`:
-
-```js
-localStorage.setItem(storageKey, JSON.stringify(state.account));
-```
-
-Con esto, los datos de la cuenta de usuario serán persistentes y siempre actualizados ya que centralizamos previamente todas nuestras actualizaciones de estado. Aquí es donde comenzamos a beneficiarnos de todas nuestras refactorizaciones anteriores 🙂.
-
-A medida que se guardan los datos, también tenemos que encargarnos de restaurarlos cuando se carga la aplicación. Ya que comenzaremos a tener más código de inicialización, puede ser una buena idea crear una nueva función `init`, que también incluya nuestro código anterior al final de `app.js`:
-
-```js
-function init() {
-  const savedAccount = localStorage.getItem(storageKey);
-  if (savedAccount) {
-    updateState('account', JSON.parse(savedAccount));
-  }
-
-  // Nuestro código de inicialización anterior
-  window.onpopstate = () => updateRoute();
-  updateRoute();
-}
-
-init();
-```
-
-Aquí recuperamos los datos guardados y, si hay alguno, actualizamos el estado en consecuencia. Es importante hacer esto *antes* de actualizar la ruta, ya que puede haber un código que dependa del estado durante la actualización de la página.
-
-También podemos hacer que la página *Panel de control* sea nuestra página predeterminada de la aplicación, ya que ahora estamos conservando los datos de la cuenta. Si no se encuentran datos, el panel se encarga de redirigir a la página *Iniciar sesión* de todos modos. En `updateRoute()`, reemplace el respaldo `return navigate('/login');` con `return navigate('dashboard');`.
-
-Ahora inicie sesión en la aplicación e intente actualizar la página, debe permanecer en el tablero. Con esa actualización nos hemos ocupado de todos nuestros problemas iniciales ...
-
-## Actualizar los datos
-
-... Pero también podríamos haber creado uno nuevo. Oups.
-
-Vaya al panel de control con la cuenta `test`, luego ejecute este comando en una terminal para crear una nueva transacción:
-
-```sh
-curl --request POST \
-     --header "Content-Type: application/json" \
-     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
-     http://localhost:5000/api/accounts/test/transactions
-```
-
-Intente actualizar la página del panel en el navegador ahora. ¿Qué ocurre? ¿Ves la nueva transacción?
-
-El estado se conserva indefinidamente gracias al `localStorage`, pero eso también significa que nunca se actualiza hasta que cierre la sesión de la aplicación y vuelva a iniciarla.
-
-Una posible estrategia para solucionarlo es volver a cargar los datos de la cuenta cada vez que se carga el panel, para evitar que se atasquen los datos.
-
-### Tarea
-
-Cree una nueva función `updateAccountData`:
-
-```js
-async function updateAccountData() {
-  const account = state.account;
-  if (!account) {
-    return logout();
-  }
-
-  const data = await getAccount(account.user);
-  if (data.error) {
-    return logout();
-  }
-
-  updateState('account', data);
-}
-```
-
-Este método comprueba que estamos conectados actualmente y luego vuelve a cargar los datos de la cuenta desde el servidor.
-
-Cree otro nombre de función `refresh`:
-
-```js
-async function refresh() {
-  await updateAccountData();
-  updateDashboard();
-}
-```
-
-Éste actualiza los datos de la cuenta, luego se encarga de actualizar el HTML de la página del tablero. Es lo que necesitamos llamar cuando se carga la ruta del tablero. Actualice la definición de ruta con:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: refresh }
-};
-```
-
-Intente volver a cargar el panel ahora, debería mostrar los datos de la cuenta actualizados.
-
----
-
-## 🚀 Desafío
-
-Ahora que recargamos los datos de la cuenta cada vez que se carga el panel, ¿cree que aún necesitamos conservar *todos los datos de la cuenta*?
-
-Intente trabajar juntos para cambiar lo que se guarda y carga desde `localStorage` para incluir solo lo que es absolutamente necesario para que la aplicación funcione.
-
-## [Post-lecture prueba](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
-
-## Asignación
-
-[Implementar el cuadro de diálogo "Agregar transacción"](assignment.es.md)
-
-Aquí hay un ejemplo de resultado después de completar la tarea:
-
-![Captura de pantalla que muestra un ejemplo de diálogo "Agregar transacción"](../images/dialog.png)
diff --git a/7-bank-project/4-state-management/translations/README.fr.md b/7-bank-project/4-state-management/translations/README.fr.md
deleted file mode 100644
index d632c0f6..00000000
--- a/7-bank-project/4-state-management/translations/README.fr.md
+++ /dev/null
@@ -1,281 +0,0 @@
-# Créer une application bancaire Partie 4: Concepts de gestion d'état
-
-## Quiz préalable
-
-[Quiz préalable](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47?loc=fr)
-
-### Introduction
-
-Au fur et à mesure qu’une application Web se développe, il devient difficile de suivre tous les flux de données. Quel code obtient les données, quelle page les consomme, où et quand doit-il être mis à jour... il est facile de se retrouver avec un code désordonné et difficile à maintenir. Cela est particulièrement vrai lorsque vous devez partager des données entre différentes pages de votre application, par exemple des données utilisateur. Le concept de *gestion de l’état* a toujours existé dans toutes sortes de programmes, mais comme les applications Web ne cessent de croître en complexité, c’est maintenant un point clé à prendre en compte pendant le développement.
-
-Dans cette dernière partie, nous examinerons l’application que nous avons créée pour repenser la façon dont l’état est géré, permettant la prise en charge de l’actualisation du navigateur à tout moment et la persistance des données entre les sessions utilisateur.
-
-### Prérequis
-
-Vous devez avoir terminé la [récupération des données](../../3-data/translations/README.fr.md) de l’application web pour cette leçon. Vous devez également installer [Node.js](https://nodejs.org) et [exécuter l’API du serveur](../../api/translations/README.fr.md) localement afin que vous puissiez gérer les données du compte.
-
-Vous pouvez tester que le serveur fonctionne correctement en exécutant cette commande dans un terminal:
-
-```sh
-curl http://localhost:5000/api
-# -> doit renvoyer "Bank API v1.0.0" comme résultat
-```
-
----
-
-## Repenser la gestion des états
-
-Dans la [leçon précédente](../../3-data/translations/README.fr.md), nous avons introduit un concept basique d’état dans notre application avec la variable globale `account` qui contient les données bancaires de l’utilisateur actuellement connecté. Cependant, notre mise en œuvre actuelle présente certains défauts. Essayez d’actualiser la page lorsque vous êtes sur le tableau de bord. Que se passe-t-il?
-
-Il y a 3 problèmes avec le code actuel:
-
-- L’état n’est pas persistant, car une actualisation du navigateur vous ramène à la page de connexion.
-- Il existe plusieurs fonctions qui modifient l’état. Au fur et à mesure que l’application se développe, il peut être difficile de suivre les modifications et il est facile d’oublier d’en mettre à jour une.
-- L’état n’est pas nettoyé, donc lorsque vous cliquez sur *Logout* les données du compte sont toujours là même si vous êtes sur la page de connexion.
-
-Nous pourrions mettre à jour notre code pour résoudre ces problèmes un par un, mais cela créerait plus de duplication de code et rendrait l’application plus complexe et difficile à maintenir. Ou nous pourrions faire une pause de quelques minutes et repenser notre stratégie.
-
-> Quels problèmes essayons-nous vraiment de résoudre ici?
-
-[La gestion de l’état](https://en.wikipedia.org/wiki/State_management) consiste à trouver une bonne approche pour résoudre ces deux problèmes particuliers:
-
-- Comment rendre compréhensibles les flux de données dans une application?
-- Comment garder les données d’état toujours synchronisées avec l’interface utilisateur (et vice versa)?
-
-Une fois que vous vous êtes occupé de ceux-ci, tous les autres problèmes que vous pourriez avoir peuvent être déjà résolus ou sont devenus plus faciles à résoudre. Il existe de nombreuses approches possibles pour résoudre ces problèmes, mais nous opterons pour une solution commune qui consiste à **centraliser les données et les moyens de les modifier**. Les flux de données se dérouleraient comme suit:
-
-![Schéma montrant les flux de données entre le code HTML, les actions de l’utilisateur et l’état](../images/data-flow.png)
-
-> Nous ne couvrirons pas ici la partie où les données déclenchent automatiquement la mise à jour de la vue, car elle est liée à des concepts plus avancés de [Programmation réactive](https://en.wikipedia.org/wiki/Reactive_programming). C’est un bon sujet de suivi si vous êtes prêt à plonger profondément.
-
-✅ Il existe de nombreuses bibliothèques avec différentes approches de la gestion des États, [Redux](https://redux.js.org) étant une option populaire. Jetez un coup d’œil aux concepts et aux modèles utilisés, car c’est souvent un bon moyen d’apprendre quels problèmes potentiels vous pouvez rencontrer dans les grandes applications Web et comment ils peuvent être résolus.
-
-### Tâche
-
-Nous allons commencer par un peu de refactorisation. Remplacer la déclaration `account`:
-
-```js
-let account = null;
-```
-
-Par:
-
-```js
-let state = {
-  account: null
-};
-```
-
-L’idée est de *centraliser* toutes nos données d’application dans un seul objet d’état. Nous n’avons que le `account` pour l’instant dans l’état, donc cela ne change pas beaucoup, mais cela crée un chemin pour les évolutions.
-
-Nous devons également mettre à jour les fonctions en l’utilisant. Dans les fonctions `register()` et `login()`, remplacez `account = ...` par `state.account = ...`;
-
-En haut de la fonction `updateDashboard()`, ajoutez cette ligne:
-
-```js
-const account = state.account;
-```
-
-Ce refactoring en lui-même n’a pas apporté beaucoup d’améliorations, mais l’idée était de jeter les bases des prochains changements.
-
-## Suivre les modifications de données
-
-Maintenant que nous avons mis en place l’objet `state` pour stocker nos données, l’étape suivante consiste à centraliser les mises à jour. L’objectif est de faciliter le suivi des changements et de leur moment.
-
-Pour éviter que des modifications soient apportées à l’objet `state`, il est également recommandé de le considérer comme [*immuable*](https://en.wikipedia.org/wiki/Immutable_object), ce qui signifie qu’il ne peut pas être modifié du tout. Cela signifie également que vous devez créer un nouvel objet d’état si vous souhaitez y modifier quoi que ce soit. Ce faisant, vous créez une protection contre les [effets secondaires](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) potentiellement indésirables et ouvrez des possibilités de nouvelles fonctionnalités dans votre application, telles que la mise en œuvre de l’annulation/rétablissement, tout en facilitant le débogage. Par exemple, vous pouvez consigner chaque modification apportée à l’état et conserver un historique des modifications pour comprendre la source d’un bogue.
-
-En JavaScript, vous pouvez utiliser [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) pour créer une version immuable d’un objet. Si vous essayez d’apporter des modifications à un objet immuable, une exception sera déclenchée.
-
-✅ Connaissez-vous la différence entre un objet immuable *peu profond* et un objet immuable *profond*? Vous pouvez en apprendre plus sur ce sujet [ici](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
-
-### Tâche
-
-Créons une nouvelle fonction `updateState()`:
-
-```js
-function updateState(property, newData) {
-  state = Object.freeze({
-    ...state,
-    [property]: newData
-  });
-}
-```
-
-Dans cette fonction, nous créons un nouvel objet d’état et copions les données de l’état précédent à l’aide de [*l’opérateur spread (`...`)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Ensuite, nous remplaçons une propriété particulière de l’objet d’état par les nouvelles données en utilisant la [notation entre crochets](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` pour l’affectation. Enfin, nous verrouillons l’objet pour empêcher les modifications en utilisant `Object.freeze()`. Nous n’avons que la propriété `account` stockée dans l’état pour l’instant, mais avec cette approche, vous pouvez ajouter autant de propriétés que nécessaire dans l’état.
-
-Nous allons également mettre à jour l’initialisation `state` pour nous assurer que l’état initial est également gelé:
-
-```js
-let state = Object.freeze({
-  account: null
-});
-```
-
-Après cela, mettez à jour la fonction `register` en remplaçant l’affectation `state.account = result;` par:
-
-```js
-updateState('account', result);
-```
-
-Faites de même avec la fonction `login`, en remplaçant `state.account = data;` par:
-
-```js
-updateState('account', data);
-```
-
-Nous allons maintenant saisir l’occasion de résoudre le problème des données de compte qui ne sont pas effacées lorsque l’utilisateur clique sur *Logout*.
-
-Créez une nouvelle fonction `logout()`:
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
-```
-
-Dans `updateDashboard()`, remplacez la redirection `return navigate('/login');` par `return logout()`;
-
-Essayez d’enregistrer un nouveau compte, de vous déconnecter et de vous reconnecter pour vérifier que tout fonctionne toujours correctement.
-
-> Conseil: vous pouvez jeter un coup d’œil à tous les changements d’état en ajoutant `console.log(state)` au bas de `updateState()` et en ouvrant la console dans les outils de développement de votre navigateur.
-
-## Conserver l’état
-
-La plupart des applications Web doivent conserver les données pour pouvoir fonctionner correctement. Toutes les données critiques sont généralement stockées dans une base de données et accessibles via une API de serveur, comme les données du compte utilisateur dans notre cas. Mais parfois, il est également intéressant de conserver certaines données sur l’application cliente qui s’exécute dans votre navigateur, pour une meilleure expérience utilisateur ou pour améliorer les performances de chargement.
-
-Lorsque vous souhaitez conserver des données dans votre navigateur, vous devez vous poser quelques questions importantes:
-
-- *Les données sont-elles sensibles?* Vous devez éviter de stocker des données sensibles sur le client, telles que les mots de passe des utilisateurs.
-- *Pendant combien de temps devez-vous conserver ces données?* Prévoyez-vous d’accéder à ces données uniquement pour la session en cours ou souhaitez-vous qu’elles soient stockées pour toujours?
-
-Il existe plusieurs façons de stocker des informations dans une application web, en fonction de ce que vous souhaitez réaliser. Par exemple, vous pouvez utiliser les URL pour stocker une requête de recherche et la rendre partageable entre les utilisateurs. Vous pouvez également utiliser des [cookies HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies) si les données doivent être partagées avec le serveur, comme les informations d'[authentification](https://en.wikipedia.org/wiki/Authentication).
-
-Une autre option consiste à utiliser l’une des nombreuses API de navigateur pour stocker des données. Deux d’entre eux sont particulièrement intéressants:
-
-- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): un [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) permettant de conserver des données spécifiques au site web actuel sur différentes sessions. Les données qui y sont enregistrées n’expirent jamais.
-- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): celui-ci fonctionne de la même manière que `localStorage` sauf que les données qui y sont stockées sont effacées à la fin de la session (lorsque le navigateur est fermé).
-
-Notez que ces deux API autorisent uniquement le stockage de [chaînes](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Si vous souhaitez stocker des objets complexes, vous devrez les sérialiser au format [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) à l’aide de [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
-
-✅ Si vous souhaitez créer une application web qui ne fonctionne pas avec un serveur, il est également possible de créer une base de données sur le client à l’aide de [l’API `IndexedDB`](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Celui-ci est réservé aux cas d’utilisation avancés ou si vous avez besoin de stocker une quantité importante de données, car il est plus complexe à utiliser.
-
-### Tâche
-
-Nous voulons que nos utilisateurs restent connectés jusqu’à ce qu’ils cliquent explicitement sur le bouton *Logout*, nous utiliserons donc `localStorage` pour stocker les données du compte. Tout d’abord, définissons une clé que nous utiliserons pour stocker nos données.
-
-```js
-const storageKey = 'savedAccount';
-```
-
-Ajoutez ensuite cette ligne à la fin de la fonction `updateState()`:
-
-```js
-localStorage.setItem(storageKey, JSON.stringify(state.account));
-```
-
-Avec cela, les données du compte utilisateur seront conservées et toujours à jour car nous avons centralisé précédemment toutes nos mises à jour d’état. C’est là que nous commençons à bénéficier de tous nos refactors précédents 🙂.
-
-Au fur et à mesure que les données sont enregistrées, nous devons également nous occuper de les restaurer lorsque l’application est chargée. Puisque nous allons commencer à avoir plus de code d’initialisation, il peut être judicieux de créer une nouvelle fonction `init`, qui inclut également notre code précédent au bas de `app.js`:
-
-```js
-function init() {
-  const savedAccount = localStorage.getItem(storageKey);
-  if (savedAccount) {
-    updateState('account', JSON.parse(savedAccount));
-  }
-
-  // Notre précédent code d'initialisation
-  window.onpopstate = () => updateRoute();
-  updateRoute();
-}
-
-init();
-```
-
-Ici, nous récupérons les données enregistrées, et s’il y en a, nous mettons à jour l’état en conséquence. Il est important de le faire *avant* de mettre à jour l’itinéraire, car il peut y avoir du code s’appuyant sur l’état lors de la mise à jour de la page.
-
-Nous pouvons également faire de la page *Dashboard* notre page par défaut de l’application, car nous conservons maintenant les données du compte. Si aucune donnée n’est trouvée, le tableau de bord se charge de rediriger vers la page *Login* de toute façon. Dans `updateRoute()`, remplacez le secours `return navigate('/login');` par `return navigate('/dashboard');`.
-
-Maintenant, connectez-vous à l’application et essayez d’actualiser la page. Vous devez rester sur le tableau de bord. Avec cette mise à jour, nous avons résolu tous nos problèmes initiaux...
-
-## Actualiser les données
-
-... Mais nous pourrions aussi en avoir créé un nouveau. Oups!
-
-Accédez au tableau de bord à l’aide du compte `test`, puis exécutez cette commande sur un terminal pour créer une nouvelle transaction:
-
-```sh
-curl --request POST \
-     --header "Content-Type: application/json" \
-     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
-     http://localhost:5000/api/accounts/test/transactions
-```
-
-Essayez d’actualiser la page du tableau de bord dans le navigateur maintenant. Que se passe-t-il? Voyez-vous la nouvelle transaction?
-
-L’état est conservé indéfiniment grâce au `localStorage`, mais cela signifie également qu’il n’est jamais mis à jour tant que vous ne vous déconnectez pas de l’application et que vous ne vous connectez pas à nouveau!
-
-Une stratégie possible pour résoudre ce problème consiste à recharger les données du compte chaque fois que le tableau de bord est chargé, afin d’éviter les données de blocage.
-
-### Tâche
-
-Créez une nouvelle fonction `updateAccountData`:
-
-```js
-async function updateAccountData() {
-  const account = state.account;
-  if (!account) {
-    return logout();
-  }
-
-  const data = await getAccount(account.user);
-  if (data.error) {
-    return logout();
-  }
-
-  updateState('account', data);
-}
-```
-
-Cette méthode vérifie que nous sommes actuellement connectés puis recharge les données du compte à partir du serveur.
-
-Créez une autre fonction nommée `refresh`:
-
-```js
-async function refresh() {
-  await updateAccountData();
-  updateDashboard();
-}
-```
-
-Celui-ci met à jour les données du compte, puis se charge de mettre à jour le code HTML de la page du tableau de bord. C’est ce que nous devons appeler lorsque l’itinéraire du tableau de bord est chargé. Mettez à jour la définition d’itinéraire avec:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: refresh }
-};
-```
-
-Essayez de recharger le tableau de bord maintenant, il devrait afficher les données de compte mises à jour.
-
----
-
-## 🚀 Challenge
-
-Maintenant que nous rechargeons les données du compte chaque fois que le tableau de bord est chargé, pensez-vous que nous devons encore conserver *toutes les données du compte*?
-
-Essayez de travailler ensemble pour modifier ce qui est enregistré et chargé à partir de `localStorage` pour n’inclure que ce qui est absolument nécessaire pour que l’application fonctionne.
-
-## Quiz de validation des connaissances
-
-[Quiz de validation des connaissances](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48?loc=fr)
-
-## Affectation
-
-[Implémenter la boîte de dialogue "Ajouter une transaction"](assignment.fr.md)
-
-Voici un exemple de résultat après avoir terminé l’affectation:
-
-![Capture d’écran montrant un exemple de boîte de dialogue "Ajouter une transaction"](../images/dialog.png)
diff --git a/7-bank-project/4-state-management/translations/README.hi.md b/7-bank-project/4-state-management/translations/README.hi.md
deleted file mode 100644
index aaa330fe..00000000
--- a/7-bank-project/4-state-management/translations/README.hi.md
+++ /dev/null
@@ -1,284 +0,0 @@
-# एक बैंकिंग ऐप का निर्माण करें भाग 4: स्टेट प्रबंधन की अवधारणा
-
-## पूर्व व्याख्यान प्रश्नोत्तरी
-
-[पूर्व व्याख्यान प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47?loc=hi)
-
-### परिचय
-
-जैसे-जैसे वेब एप्लिकेशन बढ़ता है, यह सभी डेटा फ्लो पर नज़र रखना एक चुनौती बन जाता है। किस कोड को डेटा मिलता है, कौन सा पेज इसका उपभोग करता है, कहां और कब इसे अपडेट करने की आवश्यकता होती है ... गंदे कोड को समाप्त करना आसान है जिसे बनाए रखना मुश्किल है। यह विशेष रूप से सच है जब आपको अपने ऐप के विभिन्न पृष्ठों के बीच डेटा साझा करने की आवश्यकता होती है, उदाहरण के लिए उपयोगकर्ता डेटा। *स्टेट प्रबंधन* की अवधारणा हमेशा सभी प्रकार के कार्यक्रमों में मौजूद रही है, लेकिन जैसा कि वेब ऐप जटिलता में बढ़ रहे हैं, यह अब विकास के दौरान सोचने का एक महत्वपूर्ण बिंदु है।
-
-इस अंतिम भाग में, हम उस ऐप पर नज़र डालेंगे जिसे हमने बनाया है कि स्टेट कैसे प्रबंधित किया जाता है, किसी भी बिंदु पर ब्राउज़र रीफ्रेश के लिए समर्थन और उपयोगकर्ता सत्रों में डेटा को बनाए रखने की अनुमति देता है।
-
-### शर्त
-
-आपको इस पाठ के लिए वेब ऐप का [डेटा प्राप्त करने](../../3-data/translations/README.hi.md) वाला भाग पूरा करना होगा। आपको स्थानीय रूप से [Node.js](https://nodejs.org) और [सर्वर एपीआई चलाने](../../api/translations/README.hi.md) को स्थापित करने की आवश्यकता है ताकि आप खाता डेटा प्रबंधित कर सकें।
-
-आप परीक्षण कर सकते हैं कि सर्वर टर्मिनल में इस कमांड को निष्पादित करके ठीक से चल रहा है:
-
-```sh
-curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
-```
-
----
-
-## स्टेट प्रबंधन पुनर्विचार
-
-[पिछले पाठ](../../3-data/translations/README.hi.md) में, हमने अपने ऐप में वैश्विक `account` चर के साथ स्टेट की एक बुनियादी अवधारणा पेश की, जिसमें वर्तमान में लॉग इन उपयोगकर्ता के लिए बैंक डेटा शामिल है। हालांकि, हमारे वर्तमान कार्यान्वयन में कुछ खामियां हैं। जब आप डैशबोर्ड पर हों तो पृष्ठ को ताज़ा करने का प्रयास करें। क्या होता है?
-
-वर्तमान कोड के साथ 3 समस्याएँ हैं:
-
-- स्टेट कायम नहीं है, क्योंकि ब्राउज़र रीफ़्रेश आपको लॉगिन पृष्ठ पर वापस ले जाता है।
-- स्टेट को संशोधित करने वाले कई कार्य हैं। जैसे-जैसे ऐप बढ़ता है, यह परिवर्तनों को ट्रैक करना मुश्किल बना सकता है और किसी एक को अपडेट करना भूल जाना आसान है।
-- स्टेट को साफ नहीं किया जाता है, इसलिए जब आप * लॉगआउट * पर क्लिक करते हैं, तो खाता डेटा अभी भी वहीं है जबकि आप लॉगिन पेज पर हैं।
-
-हम एक-एक करके इन मुद्दों से निपटने के लिए अपने कोड को अपडेट कर सकते हैं, लेकिन यह अधिक कोड दोहराव पैदा करेगा और ऐप को अधिक जटिल और बनाए रखना मुश्किल होगा। या हम कुछ मिनटों के लिए रुक सकते हैं और अपनी रणनीति पर फिर से विचार कर सकते हैं।
-
-> 
-हम वास्तव में किन समस्याओं को हल करने की कोशिश कर रहे हैं?
-
-[स्टेट प्रबंधन](https://en.wikipedia.org/wiki/State_management) इन दो विशेष समस्याओं को हल करने के लिए एक अच्छा तरीका खोजने के बारे में है:
-
-- ऐप में डेटा फ्लो को कैसे समझा जा सकता है?
-- उपयोगकर्ता इंटरफ़ेस (और इसके विपरीत) के साथ स्टेट के डेटा को हमेशा सिंक में कैसे रखा जाए?
-
-एक बार जब आप इनका ध्यान रख लेते हैं, तो हो सकता है कि कोई अन्य समस्या या तो पहले से ही ठीक हो जाए या जिसे ठीक करना आसान हो जाए। इन समस्याओं को हल करने के लिए कई संभावित दृष्टिकोण हैं, लेकिन हम एक सामान्य समाधान के साथ जाएंगे जिसमें डेटा को **केंद्रीकृत करना और इसे बदलने के तरीके** शामिल हैं। डेटा प्रवाह इस तरह होगा:
-
-![HTML, उपयोगकर्ता क्रियाओं और स्टेट के बीच डेटा प्रवाह दिखाती हुई स्कीमा](../images/data-flow.png)
-
-> हम यहां उस हिस्से को कवर नहीं करेंगे जहां डेटा स्वचालित रूप से दृश्य अद्यतन को ट्रिगर करता है, क्योंकि यह [रीऐक्टिव प्रोग्रामिंग](https://en.wikipedia.org/wiki/Reactive_programming) की अधिक उन्नत अवधारणाओं से बंधा है। यदि आप एक गहरी गोता लगाने के लिए एक अच्छा अनुवर्ती विषय है।
-
-✅ स्टेट प्रबंधन के विभिन्न दृष्टिकोणों के साथ वहाँ बहुत सारे पुस्तकालय हैं, [Redux](https://redux.js.org) एक लोकप्रिय विकल्प है। उपयोग की जाने वाली अवधारणाओं और पैटर्नों पर एक नज़र डालें क्योंकि यह अक्सर सीखने का एक अच्छा तरीका है कि आप बड़े वेब ऐप में किन संभावित मुद्दों का सामना कर रहे हैं और इसे कैसे हल किया जा सकता है।
-
-### टास्क
-
-हम थोड़ा सा रिफैक्टरिंग के साथ शुरुआत करेंगे। `account` घोषणा बदलें:
-
-```js
-let account = null;
-```
-
-With:
-
-```js
-let state = {
-  account: null
-};
-```
-
-एक स्टेट वस्तु में हमारे सभी एप्लिकेशन डेटा को *केंद्रीकृत* करने का विचार है। हमारे पास स्टेट में अभी के लिए `account` है, इसलिए यह बहुत अधिक नहीं बदलता है, लेकिन यह प्रस्तावों के लिए एक रास्ता बनाता है।
-
-
-हमें इसका उपयोग करके कार्यों को भी अपडेट करना होगा। `register()` और `login()` फंगक्शनसमे,`account = ...` को `state.account = ...` से बदले;
-
-`UpdateDashboard()` फ़ंक्शन के शीर्ष पर, यह पंक्ति जोड़ें:
-
-```js
-const account = state.account;
-```
-
-अपने आप में इस रिफ्रैक्टिंग  में बहुत सुधार नहीं हुआ, लेकिन विचार अगले बदलावों की नींव रखने का था।
-
-## डेटा परिवर्तन ट्रैक करें
-
-अब जब हमने अपने डेटा को स्टोर करने के लिए `state` ऑब्जेक्ट को रखा है, तो अगला चरण अपडेट को केंद्रीकृत करना है। लक्ष्य किसी भी परिवर्तन का ट्रैक रखना आसान है और जब वे होते हैं।
-
-`state` वस्तु में किए गए परिवर्तनों से बचने के लिए, यह [*अपरिवर्तनीय*](https://en.wikipedia.org/wiki/Immutable_object) पर विचार करने के लिए एक अच्छा अभ्यास है, जिसका अर्थ है कि इसे बिल्कुल भी संशोधित नहीं किया जा सकता है। इसका अर्थ यह भी है कि यदि आप इसमें कुछ भी बदलना चाहते हैं तो आपको एक नया स्टेट ऑब्जेक्ट बनाना होगा। ऐसा करने से, आप संभावित रूप से अवांछित [साइड इफेक्ट्स](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) के बारे में एक सुरक्षा का निर्माण करते हैं, और अपने ऐप में नई सुविधाओं के लिए संभावनाएं खोलते हैं जैसे कि undo/redo को लागू करना, जबकि डिबग करना भी आसान है। उदाहरण के लिए, आप स्टेट में किए गए प्रत्येक परिवर्तन को लॉग कर सकते हैं और बग के स्रोत को समझने के लिए परिवर्तनों का इतिहास रख सकते हैं।
-
-जावास्क्रिप्ट में, आप एक अपरिवर्तनीय संस्करण एक ऑब्जेक्ट बनाने के लिए [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) का उपयोग कर सकते हैं । यदि आप एक अपरिवर्तनीय वस्तु में परिवर्तन करने की कोशिश करते हैं, तो एक अपवाद उठाया जाएगा।
-
-✅ क्या आप एक *उथले* और एक *गहरी* अपरिवर्तनीय वस्तु के बीच का अंतर जानते हैं? आप इसके बारे में [यहां](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) पढ़ सकते हैं.
-
-### टास्क
-
-Let's create a new `updateState()` function:
-
-```js
-function updateState(property, newData) {
-  state = Object.freeze({
-    ...state,
-    [property]: newData
-  });
-}
-```
-
-इस फ़ंक्शन में, हम [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals) का उपयोग करके पिछले स्टेट से एक नया स्टेट ऑब्जेक्ट और कॉपी डेटा बना रहे हैं। फिर हम नए डेटा के साथ स्टेट ऑब्जेक्ट की एक विशेष प्रॉपर्टी को ओवरराइड करते हैं [ब्रैकेट नोटेशन] `[property]` असाइनमेंट के लिए। अंत में, हम `Object.freeze()` का उपयोग करके संशोधनों को रोकने के लिए ऑब्जेक्ट को लॉक करते हैं। हमारे पास अब केवल स्टेट में संग्रहीत `अकाउंट` प्रॉपर्टी है, लेकिन इस दृष्टिकोण के साथ आप स्टेट में जितनी आवश्यकता हो उतने गुण जोड़ सकते हैं।
-
-हम यह भी सुनिश्चित करेंगे कि प्रारंभिक अवस्था भी जम गई है, यह सुनिश्चित करने के लिए `state` आरंभीकरण को अद्यतन करेगा:
-
-```js
-let state = Object.freeze({
-  account: null
-});
-```
-
-उसके बाद, `state.account = result` के स्थान पर `register` फ़ंक्शन को अपडेट करें; असाइनमेंट के साथ:
-
-```js
-updateState('account', result);
-```
-
-`login` फ़ंक्शन के साथ भी ऐसा ही करें, `state.account = data;` के स्थान पर:
-
-```js
-updateState('account', data);
-```
-
-जब उपयोगकर्ता *लॉगआउट* पर क्लिक करेगा तो हम खाता डेटा के मुद्दे को ठीक करने का मौका नहीं लेंगे।
-
-एक नया `logout()` फंगक्शन बनाए:
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
-```
-
-`updateDashboard()` मे , पुनर्निर्देशन `return navigate('/login');` की जगह `return logout()` के साथ;
-
-एक नया खाता पंजीकृत करने की कोशिश करें, लॉग आउट करें और फिर से जाँच करें कि सब कुछ अभी भी सही ढंग से काम करता है।
-
-युक्ति: आप `updateState()` के तल पर `console.log(state)` जोड़कर और अपने ब्राउज़र के डेवलपमेंट टूल में कंसोल खोलकर सभी स्टेट परिवर्तनों पर एक नज़र डाल सकते हैं।
-
-## स्टेट को पर्सिस्ट करे
-
-अधिकांश वेब ऐप्स को डेटा को सही ढंग से काम करने में सक्षम बनाने के लिए लगातार बने रहने की आवश्यकता होती है। सभी महत्वपूर्ण डेटा को आमतौर पर डेटाबेस पर संग्रहीत किया जाता है और सर्वर एपीआई के माध्यम से एक्सेस किया जाता है, जैसे हमारे मामले में उपयोगकर्ता खाता डेटा। लेकिन कभी-कभी, एक बेहतर उपयोगकर्ता अनुभव के लिए या लोडिंग प्रदर्शन में सुधार करने के लिए आपके ब्राउज़र में चल रहे क्लाइंट ऐप पर कुछ डेटा को जारी रखना भी दिलचस्प है।
-
-जब आप अपने ब्राउज़र में डेटा को पर्सिस्ट रखना चाहते हैं, तो कुछ महत्वपूर्ण सवाल हैं जो आपको खुद से पूछना चाहिए:
-
-- *क्या डेटा संवेदनशील है?* आपको क्लाइंट पर किसी भी संवेदनशील डेटा, जैसे उपयोगकर्ता पासवर्ड को संग्रहीत करने से बचना चाहिए।
-- *आपको यह डेटा कब तक रखने की आवश्यकता है?* क्या आप इस डेटा को केवल वर्तमान सत्र के लिए एक्सेस करने की योजना बना रहे हैं या क्या आप चाहते हैं कि यह हमेशा के लिए स्टोर हो जाए?
-
-वेब ऐप के अंदर जानकारी संग्रहीत करने के कई तरीके हैं, जो इस बात पर निर्भर करता है कि आप क्या हासिल करना चाहते हैं। उदाहरण के लिए, आप खोज क्वेरी को संग्रहीत करने के लिए URL का उपयोग कर सकते हैं, और इसे उपयोगकर्ताओं के बीच साझा करने योग्य बना सकते हैं। यदि आप डेटा को सर्वर के साथ साझा करने की आवश्यकता है, जैसे कि [authentication](https://en.wikipedia.org/wiki/Authentication) की जानकारी।
-
-
-एक अन्य विकल्प डेटा भंडारण के लिए कई ब्राउज़र एपीआई में से एक का उपयोग करना है। उनमें से दो विशेष रूप से दिलचस्प हैं:
-
-- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): एक [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) विभिन्न सत्रों में वर्तमान वेब साइट के लिए विशिष्ट डेटा को बनाए रखने की अनुमति देते हैं। इसमें सहेजा गया डेटा कभी समाप्त नहीं होता है।
-- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): यह एक `sessionStorage` की तरह ही काम करता है, सिवाय इसके कि इसमें संग्रहीत डेटा सत्र समाप्त होने पर (जब ब्राउज़र बंद हो जाता है) साफ हो जाता है।
-
-यदि आप जटिल वस्तुओं को संग्रहीत करना चाहते हैं, तो आपको इसे [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) प्रारूप [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) का उपयोग करके क्रमबद्ध करना होगा। 
-
-✅ यदि आप एक वेब ऐप बनाना चाहते हैं जो सर्वर के साथ काम नहीं करता है, तो [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) का उपयोग करके क्लाइंट पर डेटाबेस बनाना भी संभव है। यह एक उन्नत उपयोग मामलों के लिए आरक्षित है या यदि आपको महत्वपूर्ण मात्रा में डेटा संग्रहीत करने की आवश्यकता है, क्योंकि यह उपयोग करने के लिए अधिक जटिल है।
-
-### टास्क
-
-हम चाहते हैं कि हमारे उपयोगकर्ता तब तक लॉग इन रहें जब तक कि वे स्पष्ट रूप से *लॉगआउट* बटन पर क्लिक न करें, इसलिए हम खाता डेटा संग्रहीत करने के लिए `localStorage` का उपयोग करेंगे। सबसे पहले, एक कुंजी परिभाषित करते हैं जिसका उपयोग हम अपने डेटा को संग्रहीत करने के लिए करेंगे।.
-
-```js
-const storageKey = 'savedAccount';
-```
-
-फिर इस लाइन को `updateState()` फ़ंक्शन के अंत में जोड़ें:
-
-```js
-localStorage.setItem(storageKey, JSON.stringify(state.account));
-```
-
-इसके साथ, उपयोगकर्ता खाते के डेटा को बनाए रखा जाएगा और हमेशा अप-टू-डेट रहेगा क्योंकि हमने अपने सभी स्टेट अपडेट पहले केंद्रीकृत किए थे। यह वह जगह है जहाँ हम अपने सभी पिछले रिफ्लेक्टरों से लाभान्वित होने लगते हैं 🙂.
-
-डेटा सहेजे जाने के साथ, हमें ऐप को लोड करने पर इसे पुनर्स्थापित करने का भी ध्यान रखना होगा। चूंकि हम अधिक आरंभीकरण कोड शुरू करेंगे, इसलिए यह एक नया `init` फ़ंक्शन बनाने के लिए एक अच्छा विचार हो सकता है, जिसमें `app.js` के नीचे हमारा पिछला कोड भी शामिल है।:
-
-```js
-function init() {
-  const savedAccount = localStorage.getItem(storageKey);
-  if (savedAccount) {
-    updateState('account', JSON.parse(savedAccount));
-  }
-
-  // Our previous initialization code
-  window.onpopstate = () => updateRoute();
-  updateRoute();
-}
-
-init();
-```
-
-यहां हम सहेजे गए डेटा को पुनर्प्राप्त करते हैं, और यदि कोई है तो हम तदनुसार स्टेट को अपडेट करते हैं। रूट अपडेट करने से *पहले* इसे करना महत्वपूर्ण है, क्योंकि पेज अपडेट के दौरान स्टेट पर कोड निर्भर हो सकता है।
-
-हम अपने एप्लिकेशन डिफॉल्ट पेज को भी * डैशबोर्ड * पेज बना सकते हैं, क्योंकि हम अब खाता डेटा को जारी रख रहे हैं। यदि कोई डेटा नहीं मिला है, तो डैशबोर्ड * लॉगिन * पेज वैसे भी पुनर्निर्देशित करने का ख्याल रखता है। `updateRoute()` में, फ़ॉलबैक `return navigate('/login');` को `return navigate('/dashboard');` से बदलें।
-
-अब ऐप में लॉगइन करें और पेज को रिफ्रेश करने की कोशिश करें। आपको डैशबोर्ड पर रहना चाहिए। उस अपडेट के साथ हमने अपने सभी शुरुआती मुद्दों का ध्यान रखा है ...
-
-## डाटाको रिफ्रेश करे
-
-...लेकिन हम एक नया भी बना सकते हैं। ऊपस!
-
- `test` खाते का उपयोग करके डैशबोर्ड पर जाएं, फिर एक नया लेनदेन बनाने के लिए इस कमांड को टर्मिनल पर चलाएं:
-
-```sh
-curl --request POST \
-     --header "Content-Type: application/json" \
-     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
-     http://localhost:5000/api/accounts/test/transactions
-```
-
-अब ब्राउज़र में अपने डैशबोर्ड पृष्ठ को रिफ्रेश करने का प्रयास करें। क्या होता है? क्या आप नया लेनदेन देखते हैं?
-
-स्टेट अनिश्चित काल तक `localStorage` की बदौलत कायम है, लेकिन इसका मतलब यह भी है कि यह तब तक अपडेट नहीं किया जाता जब तक आप ऐप से लॉग-आउट नहीं करते और फिर से लॉग इन नहीं करते!
-
-स्टेक डेटा से बचने के लिए, हर बार डैशबोर्ड को लोड करने के बाद खाते के डेटा को फिर से लोड करना एक निश्चित रणनीति है।
-
-### टास्क
-
-एक नया फंगक्शन `updateAccountData` बनाए:
-
-```js
-async function updateAccountData() {
-  const account = state.account;
-  if (!account) {
-    return logout();
-  }
-
-  const data = await getAccount(account.user);
-  if (data.error) {
-    return logout();
-  }
-
-  updateState('account', data);
-}
-```
-
-यह विधि जांचती है कि हम वर्तमान में लॉग इन हैं फिर सर्वर से खाता डेटा पुनः लोड करता है।
-
-एक दूसरा नया `refresh` नामका फंगक्शन बनाए:
-
-```js
-async function refresh() {
-  await updateAccountData();
-  updateDashboard();
-}
-```
-
-यह एक खाता डेटा अपडेट करता है, फिर डैशबोर्ड पृष्ठ के HTML को अपडेट करने का ध्यान रखता है। डैशबोर्ड मार्ग लोड होने पर हमें यह कॉल करना होगा। इसके साथ रूट की परिभाषा को अपडेट करें:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: refresh }
-};
-```
-
-डैशबोर्ड को अब पुनः लोड करने का प्रयास करें, इसे अद्यतन खाता डेटा प्रदर्शित करना चाहिए।
-
----
-
-## 🚀 चुनौती
-
-अब जब हम डैशबोर्ड लोड होने के बाद हर बार खाते के डेटा को लोड करते हैं, तो क्या आपको लगता है कि हमें अभी भी *सभी खाते* डेटा को बनाए रखने की आवश्यकता है?
-
-सहेजने और लोड करने के लिए एक साथ काम करने का प्रयास करें `localStorage` से केवल उस ऐप में काम करने के लिए जो आवश्यक है उसे शामिल करें।
-
-## व्याख्यान उपरांत प्रश्नोत्तरी
-
-[व्याख्यान उपरांत प्रश्नोत्तरी](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48?loc=hi)
-
-## असाइनमेंट
-
-["ट्रैन्सैक्शन जोड़े" डायलॉग इम्प्लमेन्ट करे](assignment.hi.md)
-
-यहां असाइनमेंट पूरा करने के बाद एक उदाहरण दिया गया है:
-
-![एक स्क्रीनशॉट "लेनदेन जोड़ें" डायलॉग दिखाते हुए](../images/dialog.png)
diff --git a/7-bank-project/4-state-management/translations/README.it.md b/7-bank-project/4-state-management/translations/README.it.md
deleted file mode 100644
index 567d832b..00000000
--- a/7-bank-project/4-state-management/translations/README.it.md
+++ /dev/null
@@ -1,281 +0,0 @@
-# Creare un'App Bancaria Parte 4: Concetti di Gestione dello Stato
-
-## Quiz Pre-Lezione
-
-[Quiz Pre-Lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47?loc=it)
-
-### Introduzione
-
-Man mano che un'applicazione web cresce, diventa una sfida tenere traccia di tutti i flussi di dati. Quale codice riceve i dati, quale pagina li consuma, dove e quando deve essere aggiornata ... è facile ritrovarsi con codice disordinato e difficile da mantenere. Ciò è particolarmente vero quando è necessario condividere dati tra diverse pagine della propria app, ad esempio i dati dell'utente. Il concetto di *gestione dello stato* è sempre esistito in tutti i tipi di programmi, ma poiché le app web continuano a crescere in complessità, ora è un punto chiave su cui riflettere durante lo sviluppo.
-
-In questa parte finale, si esaminerà l'app creata per ripensare a come viene gestito lo stato, consentendo il supporto per l'aggiornamento del browser in qualsiasi momento e persistendo i dati tra le sessioni utente.
-
-### Prerequisito
-
-È necessario aver completato la parte di [recupero dei dati](../../3-data/translations/README.it.md) dell'app web per questa lezione. È inoltre necessario installare [Node.js](https://nodejs.org) ed [eseguire l'API del server](../../api/translations/README.it.md) in locale in modo da ottenere i dati dell'account.
-
-Si può verificare che il server funzioni correttamente eseguendo questo comando in un terminale:
-
-```sh
-curl http://localhost:5000/api
-# -> dovrebbe restituire "Bank API v1.0.0" come risultato
-```
-
----
-
-## Ripensare la gestione dello stato
-
-Nella [lezione precedente](../../3-data/translations/README.it.md), è stato introdotto un concetto basico di stato nell'app con la variabile globale `account` che contiene i dati bancari per l'utente attualmente connesso. Tuttavia, l'attuale implementazione presenta alcuni difetti. Si provi ad aggiornare la pagina quando ci si trova nella pagina del cruscotto. Che cosa accade?
-
-Ci sono 3 problemi con il codice corrente:
-
-- Lo stato non è persistente, poiché un aggiornamento del browser riporta alla pagina di accesso.
-- Esistono più funzioni che modificano lo stato. Man mano che l'app cresce, può essere difficile tenere traccia delle modifiche ed è facile dimenticare di aggiornarne una.
-- Lo stato non viene cancellato, quando si fa clic su *Logout* i dati dell'account sono ancora lì anche se si è nella pagina di accesso.
-
-Si potrebbe aggiornare il codice per affrontare questi problemi uno per uno, ma creerebbe più duplicazioni del codice e renderebbe l'app più complessa e difficile da mantenere. Oppure ci si potrebbe fermare per qualche minuto e ripensare alla strategia.
-
-> Quali problemi si stanno davvero cercando di risolvere qui?
-
-La [gestione dello stato](https://en.wikipedia.org/wiki/State_management) consiste nel trovare un buon approccio per risolvere questi due problemi particolari:
-
-- Come mantenere comprensibile il flusso di dati in un'app?
-- Come mantenere i dati di stato sempre sincronizzati con l'interfaccia utente (e viceversa)?
-
-Una volta che ci si è preso cura di questi, qualsiasi altro problema che si potrebbe avere potrebbe essere già stato risolto o essere diventato più facile da sistemare. Ci sono molti possibili approcci per risolvere questi problemi, ma si andrà con una soluzione comune che consiste nel **centralizzare i dati e le modalità per cambiarli**. Il flusso di dati andrebbe così:
-
-![Schema che mostra i flussi di dati tra HTML, azioni dell'utente e stato](../images/data-flow.png)
-
-> Non verrà trattata qui la parte in cui i dati attivano automaticamente l'aggiornamento della vista, poiché è legato a concetti più avanzati di [programmazione reattiva](https://en.wikipedia.org/wiki/Reactive_programming). È un buon argomento da sviluppare successivamente se si è pronti per un'immersione profonda.
-
-✅ Esistono molte librerie con approcci diversi alla gestione dello stato, [Redux](https://redux.js.org)  è un'opzione popolare. Dare un'occhiata ai concetti e ai modelli utilizzati spesso è un buon modo per apprendere quali potenziali problemi si potrebbe dover affrontare nelle grandi app web e come risolverli.
-
-### Attività
-
-Si inizierà con un po' di refattorizzazione. Sostituire la dichiarazione di `account` :
-
-```js
-let account = null;
-```
-
-Con:
-
-```js
-let state = {
-  account: null
-};
-```
-
-L'idea è *centralizzare* tutti i dati dell'app in un unico oggetto di stato. Per ora c'è solo `account` nello stato, quindi non cambia molto, ma crea un percorso per le evoluzioni.
-
-Si devono anche aggiornare le funzioni che lo utilizzano. Nelle funzioni `register()` e `login()` , sostituire `account = ...` con `state.account = ...`;
-
-Nella parte superiore della funzione `updateDashboard()`, aggiungere questa riga:
-
-```js
-const account = state.account;
-```
-
-Questa refattorizzazione di per sé non ha portato molti miglioramenti, ma l'idea era di gettare le basi per i prossimi cambiamenti.
-
-## Tenere traccia delle modifiche ai dati
-
-Ora che si è impostato l'oggetto `state` per memorizzare i dati, il passaggio successivo è centralizzare gli aggiornamenti. L'obiettivo è rendere più facile tenere traccia di eventuali modifiche e quando si verificano.
-
-Per evitare che vengano apportate modifiche all'oggetto `state` è anche una buona pratica considerarlo [*immutabile*](https://en.wikipedia.org/wiki/Immutable_object), nel senso che non può essere modificato affatto. Significa anche che si deve creare un nuovo oggetto di stato se si vuole cambiare qualcosa in esso. In questo modo, si crea una protezione [dagli effetti collaterali](https://it.wikipedia.org/wiki/Effetto_collaterale_(informatica)) potenzialmente indesiderati e si aprono possibilità per nuove funzionalità nella propria app come l'implementazione di funzioni di annulla/ripristina, semplificando anche il debug. Ad esempio, è possibile registrare tutte le modifiche apportate allo stato e conservare una cronologia delle modifiche per comprendere l'origine di un bug.
-
-In JavaScript, si può  utilizzare [`Object.freeze()`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) per creare una versione immutabile di un oggetto. Se si prova ad apportare modifiche a un oggetto immutabile, verrà sollevata un'eccezione.
-
-✅ Si conosce la differenza tra un oggetto *shallow* e uno *deep* immutabile? Si può leggere [qui](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) per saperne di più.
-
-### Attività
-
-Creare una nuova funzione `updateState()` :
-
-```js
-function updateState(property, newData) {
-  state = Object.freeze({
-    ...state,
-    [property]: newData
-  });
-}
-```
-
-In questa funzione, si crea un nuovo oggetto di stato e si copiano i dati dallo stato precedente utilizzando l' [*operatore spread (`...`)*](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Spread_syntax). Quindi si sovrascrive una particolare proprietà dell'oggetto state con i nuovi dati usando la [notazione tra parentesi quadre](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` per l'assegnazione. Infine, si blocca l'oggetto per impedire modifiche utilizzando `Object.freeze()`. Per ora si ha solo la proprietà `account` memorizzata nello stato, ma con questo approccio si possono aggiungere tutte le proprietà che servono nello stato.
-
-Si aggiornerà anche l'inizializzazione di `state` per assicurarsi che anche lo stato iniziale sia congelato:
-
-```js
-let state = Object.freeze({
-  account: null
-});
-```
-
-Successivamente, aggiornare la funzione `register` sostituendo l'istruzione `state.account = result;` con:
-
-```js
-updateState('account', result);
-```
-
-Fare lo stesso con la funzione `login` , sostituendo `state.account = data;` con:
-
-```js
-updateState('account', data);
-```
-
-Si coglie ora l'occasione per risolvere il problema della mancata cancellazione dei dati dell'account quando l'utente fa clic su *Logout*.
-
-Creare una nuova funzione `logout ()`:
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
-```
-
-In `updateDashboard()`, sostituire il reindirizzamento `return navigate('/ login');` con `return logout()`;
-
-Provare a registrare un nuovo account, a disconnettersi e ad accedere nuovamente per verificare che tutto funzioni ancora correttamente.
-
-> Suggerimento: si può dare un'occhiata a tutti i cambiamenti di stato aggiungendo `console.log (state)` nella parte inferiore di `updateState()` e aprendo la console negli strumenti di sviluppo del  browser.
-
-## Persistere lo stato
-
-La maggior parte delle app web  deve conservare i dati per poter funzionare correttamente. Tutti i dati critici vengono solitamente archiviati su un database e accessibili tramite un'API del server, come nel nostro caso i dati dell'account utente. Ma a volte è anche interessante mantenere alcuni dati sulla parte client dell'app in esecuzione nel browser, per una migliore esperienza utente o per migliorare le prestazioni di caricamento.
-
-Quando si vuole mantenere i dati nel browser, ci sono alcune domande importanti da porsi:
-
-- *I dati sono sensibili?* Si dovrebbe evitare di memorizzare dati sensibili sul client, come le password degli utenti.
-- *Per quanto tempo si ha bisogno di conservare questi dati?* Si prevede di accedere a questi dati solo per la sessione corrente o si desidera che vengano memorizzati per sempre?
-
-Esistono diversi modi per archiviare le informazioni all'interno di un'app web, a seconda di ciò che si desidera ottenere. Ad esempio, si possono utilizzare gli URL per memorizzare una interrogazione di ricerca e renderla condivisibile tra gli utenti. Si possono anche utilizzare i [cookie HTTP](https://developer.mozilla.org/it/docs/Web/HTTP/Cookies) se i dati devono essere condivisi con il server, come le informazioni di [autenticazione](https://it.wikipedia.org/wiki/Autenticazione) .
-
-Un'altra opzione è utilizzare una delle tante API del browser per la memorizzazione dei dati. Due di loro sono particolarmente interessanti:
-
-- [`localStorage`](https://developer.mozilla.org/it/docs/Web/API/Window/localStorage): un [archivio chiave/valore](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) che consente di persistere i dati specifici del sito Web corrente in diverse sessioni. I dati salvati in esso non scadono mai.
-- [`sessionStorage`](https://developer.mozilla.org/it/docs/Web/API/Window/sessionStorage): funziona come `localStorage` tranne per il fatto che i dati in esso memorizzati vengono cancellati al termine della sessione (alla chiusura del browser).
-
-Notare che entrambe queste API consentono solo di memorizzare [stringhe](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/String). Se si desidera archiviare oggetti complessi, si dovranno serializzare nel formato [JSON](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/JSON) utilizzando [`JSON.stringify()`](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
-
-✅ Se si desidera creare un'app web che non funziona con un server, è anche possibile creare un database sul client utilizzando l' [`API` IndexedDB](https://developer.mozilla.org/it/docs/Web/API/IndexedDB_API). Questo è riservato a casi d'uso avanzati o se è necessario archiviare una quantità significativa di dati, poiché è più complesso da usare.
-
-### Attività
-
-Si vuole che gli utenti rimangano collegati fino a quando non fanno clic esplicitamente sul pulsante *Logout* , quindi si utilizzerà `localStorage` per memorizzare i dati dell'account. Per prima cosa, si definisce una chiave che verrà usata per memorizzare i  dati.
-
-```js
-const storageKey = 'savedAccount';
-```
-
-Aggiungere quindi questa riga alla fine della funzione `updateState()`:
-
-```js
-localStorage.setItem(storageKey, JSON.stringify(state.account));
-```
-
-Con questo, i dati dell'account utente verranno mantenuti e sempre aggiornati poiché si sono centralizzati in precedenza tutti gli aggiornamenti di stato. È qui che si inizia a trarre vantaggio da tutte le rifattorizzazioni precedenti 🙂.
-
-Poiché i dati vengono salvati, ci si deve anche occupare di ripristinarli quando l'app viene caricata. Dato che si inizierà ad avere più codice di inizializzazione, potrebbe essere una buona idea creare una nuova funzione di inizializzazione `init` , che includa anche il codice precedente nella parte inferiore di `app.js`:
-
-```js
-function init() {
-  const savedAccount = localStorage.getItem(storageKey);
-  if (savedAccount) {
-    updateState('account', JSON.parse(savedAccount));
-  }
-
-  // Il codice di inizializzazione precedente
-  window.onpopstate = () => updateRoute();
-  updateRoute();
-}
-
-init();
-```
-
-Qui si recuperano i dati salvati e, se ce ne sono, si aggiorna lo stato di conseguenza. È importante farlo *prima* di aggiornare la rotta, poiché potrebbe esserci del codice che si basa sullo stato durante l'aggiornamento della pagina.
-
-Si può anche rendere la pagina del *cruscotto* la pagina predefinita dell'applicazione, poiché ora si sta persistendo i dati dell'account. Se non vengono trovati dati, il cruscotto si occupa comunque di reindirizzare alla pagina di *Login* . In `updateRoute()`, sostituire le istruzioni di contingenza `return navigate ('/login');` con `return navigate ('/dashboard') ;`.
-
-Ora accedere all'app e provare ad aggiornare la pagina, si dovrebbe rimanere sul cruscotto. Con quell'aggiornamento ci si è presi cura di tutti i problemi iniziali...
-
-## Aggiornare i dati
-
-...Si potrebbe uttavia anche averne creato uno nuovo. Oops!
-
-Andare al cruscotto utilizzando l'account `test`, quindi eseguire questo comando su un terminale per creare una nuova transazione:
-
-```sh
-curl --request POST \
-     --header "Content-Type: application/json" \
-     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
-     http://localhost:5000/api/accounts/test/transactions
-```
-
-Provare subito ad aggiornare la pagina del cruscotto nel browser. Che cosa accade? Si vede la nuova transazione?
-
-Lo stato viene mantenuto indefinitamente grazie a `localStorage`, ma ciò significa anche che non viene aggiornato fino a quando non si esce dall'app e si accede di nuovo!
-
-Una possibile strategia per risolvere questo problema è ricaricare i dati dell'account ogni volta che viene caricato il cruscotto, per evitare lo stallo dei dati.
-
-### Attività
-
-Creare una nuova funzione `updateAccountData`:
-
-```js
-async function updateAccountData() {
-  const account = state.account;
-  if (!account) {
-    return logout();
-  }
-
-  const data = await getAccount(account.user);
-  if (data.error) {
-    return logout();
-  }
-
-  updateState('account', data);
-}
-```
-
-Questo metodo controlla che si sia attualmente collegati, quindi ricarica i dati dell'account dal server.
-
-Creare un'altra funzione chiamata `refresh`:
-
-```js
-async function refresh() {
-  await updateAccountData();
-  updateDashboard();
-}
-```
-
-Questa aggiorna i dati dell'account, quindi si occupa dell'aggiornamento dell'HTML della pagina del cruscotto. È ciò che si deve chiamare quando viene caricata la rotta del cruscotto (dashboard). Aggiornare la definizione del percorso con:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: refresh }
-};
-```
-
-Provare a ricaricare il cruscotto ora, dovrebbe visualizzare i dati dell'account aggiornati.
-
----
-
-## 🚀 Sfida
-
-Ora che i dati dell'account vengono ricaricati ogni volta che viene caricato il cruscotto, si pensa che sia ancora necessario persistere *tutti i dati dell'account* ?
-
-Provare a lavorare insieme per cambiare ciò che viene salvato e caricato da `localStorage` per includere solo ciò che è assolutamente necessario per il funzionamento dell'app.
-
-## Quiz Post-Lezione
-
-[Quiz post-lezione](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48?loc=it)
-
-## Compito
-
-[Implementare la finestra di dialogo "Aggiungi transazione"](assignment.it.md)
-
-Ecco un esempio di risultato dopo aver completato il compito:
-
-![Videata che mostra un esempio di dialogo "Aggiungi transazione"](../images/dialog.png)
diff --git a/7-bank-project/4-state-management/translations/README.ja.md b/7-bank-project/4-state-management/translations/README.ja.md
deleted file mode 100644
index 67d0d62e..00000000
--- a/7-bank-project/4-state-management/translations/README.ja.md
+++ /dev/null
@@ -1,281 +0,0 @@
-# バンキングアプリを作ろう その 4: 状態管理の概念
-
-## レッスン前の小テスト
-
-[レッスン前の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47?loc=ja)
-
-### イントロダクション
-
-Web アプリケーションが成長するにつれて、すべてのデータの流れを追跡することが難しくなります。どのコードがデータを取得し、どのページがデータを消費し、どこでいつ更新する必要があるのか...メンテナンスが難しい厄介なコードになってしまいがちです。これは、ユーザーデータなど、アプリの異なるページ間でデータを共有する必要がある場合に特に当てはまります。*状態管理*の概念は、あらゆる種類のプログラムに常に存在していますが、Web アプリの複雑さが増すにつれ、開発中に考えるべき重要なポイントになってきています。
-
-この最後のパートでは、状態の管理方法を再考するために構築したアプリを見ていきます。任意の時点でのブラウザの更新をサポートし、ユーザーセッション間でのデータの永続化を可能にします。
-
-### 前提条件
-
-このレッスンでは、Web アプリの[データ取得](../../3-data/translations/README.ja.md)の部分が完了している必要があります。また、アカウントデータを管理するためには、ローカルに [Node.js](https://nodejs.org/ja) をインストールし、[サーバー API を実行する](../../api/translations/README.ja.md)をインストールする必要があります。
-
-ターミナルでこのコマンドを実行することで、サーバーが正常に動作しているかどうかをテストすることができます。
-
-```sh
-curl http://localhost:5000/api
-# -> 結果として "Bank API v1.0.0" を返す必要があります。
-```
-
----
-
-## 状態管理を再考する
-
-[前回のレッスン](../../3-data/translations/README.ja.md)では、現在ログインしているユーザーの銀行データを含むグローバル変数 `account` を使って、アプリの基本的な状態の概念を紹介しました。しかし、現在の実装にはいくつかの欠陥があります。ダッシュボード上でページをリフレッシュしてみてください。何が起こるのでしょうか？
-
-現在のコードには3つの問題があります。
-
-- ブラウザをリフレッシュするとログインページに戻るため、状態は保持されません
-- 状態を変更する関数が複数あります。アプリが大きくなると、変更を追跡するのが難しくなり、1つの更新を忘れがちになります
-- 状態が片付かず、*Logout* をクリックしてもログインページになってもアカウントデータが残っています
-
-これらの問題に一つずつ対処するためにコードを更新することもできますが、コードの重複が多くなり、アプリがより複雑になり、メンテナンスが難しくなります。あるいは、数分間小休止して、戦略を再考することもできます。
-
-> ここで本当に解決しようとしている問題は何か?
-
-[状態管理](https://en.wikipedia.org/wiki/State_management)は、この2つの特定の問題を解決するための良いアプローチを見つけることがすべてです。
-
-- アプリ内のデータフローをわかりやすく保つには?
-- アプリ内のデータフローを理解しやすい状態に保つには?
-
-これらの問題を解決したら、他の問題はすでに解決されているか、簡単に解決できるようになっているかもしれません。これらの問題を解決するための多くの可能なアプローチがありますが、ここでは、**データとそれを変更する方法**を集中化することで構成される一般的な解決策を採用します。データの流れは次のようになります。
-
-![HTML、ユーザーアクション、状態間のデータフローを示すスキーマ](../images/data-flow.png)
-
-> ここでは、データが自動的にビューの更新のトリガーとなる部分は、[Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming)のより高度な概念に関連しているので、ここでは取り上げません。深く掘り下げたい方には良いフォローアップテーマになるでしょう。
-
-✅ 状態管理へのさまざまなアプローチを持つライブラリはたくさんありますが、[Redux](https://redux.js.org) は人気のあるオプションです。大規模な Web アプリケーションで直面する可能性のある問題や、それをどのように解決できるかを学ぶための良い方法として、使用されている概念やパターンを見てみましょう。
-
-### タスク
-
-まずは少しリファクタリングをしてみましょう。`account` 宣言を置換します。
-
-```js
-let account = null;
-```
-
-このようにします。
-
-```js
-let state = {
-  account: null
-};
-```
-
-このアイデアは、単一のステートオブジェクトにすべてのアプリデータを*中央集権化することです。今のところは `account` があるだけなので、あまり変化はありませんが、進化のためのパスを作成します。
-
-また、これを使って関数を更新しなければなりません。関数 `register()` と `login()` において、`account = ...` を `state.account = ...` に置き換えてください。
-
-関数 `updateDashboard()` の先頭に以下の行を追加します。
-
-```js
-const account = state.account;
-```
-
-今回のリファクタリングだけではあまり改善は見られませんでしたが、次の変更のための基礎を固めようと考えたのです。
-
-## データ変更の追跡
-
-データを保存するために `state` オブジェクトを配置したので、次のステップは更新を一元化することです。目的は、いつ変更があったのか、いつ変更が発生したのかを簡単に把握できるようにすることです。
-
-`state` オブジェクトに変更が加えられないようにするためには、`state` オブジェクトを [*immutable*](https://en.wikipedia.org/wiki/Immutable_object) と考えるのも良い方法です。これはまた、何かを変更したい場合には新しいステートオブジェクトを作成しなければならないことを意味します。このようにすることで、潜在的に望ましくない[副作用](https://ja.wikipedia.org/wiki/%E5%89%AF%E4%BD%9C%E7%94%A8_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0))についての保護を構築し、アンドゥ/リドゥの実装のようなアプリの新機能の可能性を開くと同時に、デバッグを容易にします。例えば、ステートに加えられたすべての変更をログに記録し、バグの原因を理解するために変更の履歴を保持することができます。
-
-JavaScript では、[`Object.freeze()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) を使って、オブジェクトの不変バージョンを作成することができます。不変オブジェクトに変更を加えようとすると例外が発生します。
-
-✅ *浅い*不変オブジェクトと*深い*不変オブジェクトの違いを知っていますか? それについては [こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze) を参照してください。
-
-### タスク
-
-新しい `updateState()` 関数を作成してみましょう。
-
-```js
-function updateState(property, newData) {
-  state = Object.freeze({
-    ...state,
-    [property]: newData
-  });
-}
-```
-
-この関数では、新しいステートオブジェクトを作成し、[*spread (`...`) operator*](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) を使用して前のステートからデータをコピーしています。次に、[ブラケット表記](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Working_with_Objects#objects_and_properties) `[property]` を使用して、ステートオブジェクトの特定のプロパティを新しいデータでオーバーライドします。最後に、`Object.freeze()`を使ってオブジェクトをロックし、変更を防ぎます。今のところ、`account` プロパティだけがステートに保存されていますが、この方法では必要なだけのプロパティをステートに追加することができます。
-
-また、`state` の初期化を更新して初期状態も凍結されるようにします。
-
-```js
-let state = Object.freeze({
-  account: null
-});
-```
-
-その後、`state.account = result;` の代入を `state.account = result;` に置き換えて `register` 関数を更新します。
-
-```js
-updateState('account', result);
-```
-
-同じことを `login` 関数で行い、`state.account = data;` に置き換えます。
-
-```js
-updateState('account', data);
-```
-
-ここで、ユーザーが *Logout* をクリックしたときにアカウントデータがクリアされない問題を修正します。
-
-新しい関数 `logout()` を作成します。
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
-```
-
-`updateDashboard()` で、リダイレクト `return navigate('/login');` を `return logout()` に置き換えてください。
-
-新しいアカウントを登録して、ログアウトとログインを繰り返してみて、すべてが正常に動作することを確認してください。
-
-> ヒント: `updateState()` の下部に `console.log(state)` を追加し、ブラウザの開発ツールでコンソールを開くことで、すべての状態の変化を見ることができます。
-
-## 状態を維持する
-
-ほとんどの Web アプリは、データを保持しておかないと正常に動作しません。すべての重要なデータは通常、データベースに保存され、サーバー API を介してアクセスされます。しかし、時には、より良いユーザーエクスペリエンスや読み込みパフォーマンスを向上させるために、ブラウザ上で実行されているクライアントアプリのデータを永続化することも興味深いことです。
-
-ブラウザにデータを永続化する場合、いくつかの重要な質問があります。
-
-- *データは機密性の高いものでしょうか?* ユーザーパスワードなどの機密性の高いデータをクライアントに保存することは避けるべきです
-- *このデータをどのくらいの期間保存する必要がありますか?* このデータにアクセスするのは現在のセッションのためだけですか、それとも永遠に保存したいですか?
-
-Web アプリ内の情報を保存する方法は、目的に応じて複数あります。例えば、URL を使用して検索クエリを保存し、ユーザー間で共有できるようにすることができます。また、[認証](https://en.wikipedia.org/wiki/Authentication)情報のように、データをサーバーと共有する必要がある場合は、[HTTP クッキー](https://developer.mozilla.org/ja/docs/Web/HTTP/Cookies)を使用することもできます。
-
-もう一つの選択肢は、データを保存するための多くのブラウザ API のうちの一つを使用することです。その中でも特に興味深いものが2つあります。
-
-- [`localStorage`](https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage): [Key/Value ストア](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)は、異なるセッションにまたがって現在の Web サイトに固有のデータを永続化することができます。保存されたデータは期限切れになることはありません
-- [`sessionStorage`](https://developer.mozilla.org/ja/docs/Web/API/Window/sessionStorage): これは `localStorage` と同じように動作しますが、保存されたデータはセッションの終了時(ブラウザが閉じられた時)に消去されます
-
-これらの API はどちらも[文字列](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String)しか保存できないことに注意してください。複雑なオブジェクトを格納したい場合は、[`JSON.stringify()`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) を使って [JSON](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON) 形式にシリアライズする必要があります。
-
-✅ サーバーで動作しない Web アプリを作成したい場合は、[`IndexedDB` API](https://developer.mozilla.org/ja/docs/Web/API/IndexedDB_API) を使用してクライアント上にデータベースを作成することも可能です。これは高度なユースケースや、かなりの量のデータを保存する必要がある場合には、使用するのがより複雑になるため、予約されています。
-
-### タスク
-
-ユーザーが明示的に *Logout* ボタンをクリックするまでログインしたままにしたいので、`localStorage` を使ってアカウントデータを保存します。まず、データを保存するためのキーを定義しましょう。
-
-```js
-const storageKey = 'savedAccount';
-```
-
-そして、この行を `updateState()` 関数の最後に追加します。
-
-```js
-localStorage.setItem(storageKey, JSON.stringify(state.account));
-```
-
-これで、以前はすべての状態の更新を一元化していたので、ユーザーアカウントのデータは永続化され、常に最新の状態になります。ここからが、以前のすべてのリファクタリングの恩恵を受け始めるところです 🙂。
-
-データが保存されているので、アプリが読み込まれたときに復元することにも気を配らなければなりません。初期化コードが増えてくるので、`app.js` の下部に以前のコードも含めた `init` 関数を新たに作成しておくといいかもしれません。
-
-```js
-function init() {
-  const savedAccount = localStorage.getItem(storageKey);
-  if (savedAccount) {
-    updateState('account', JSON.parse(savedAccount));
-  }
-
-  // 前回の初期化コード
-  window.onpopstate = () => updateRoute();
-  updateRoute();
-}
-
-init();
-```
-
-ここでは保存されたデータを取得し、もしあればそれに応じて状態を更新します。ページの更新中に状態に依存するコードがあるかもしれないので、ルートを更新する前にこれを行うことが重要です。
-
-アカウントデータを保持しているので、*ダッシュボード* ページをアプリケーションのデフォルトページにすることもできます。データが見つからない場合は、ダッシュボードが *ログイン* ページにリダイレクトします。`updateRoute()` で、フォールバックの `return navigate('/login');` を `return navigate('dashboard');` に置き換えます。
-
-アプリでログインしてページを更新してみてください。このアップデートで初期の問題はすべて解決しました。
-
-## データの更新
-
-...しかし、我々はまた、新しいものを作ったかもしれません。おっと!
-
-`test` アカウントを使ってダッシュボードに行き、ターミナルで以下のコマンドを実行して新しいトランザクションを作成します。
-
-```sh
-curl --request POST \
-     --header "Content-Type: application/json" \
-     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
-     http://localhost:5000/api/accounts/test/transactions
-```
-
-ダッシュボードのページをブラウザで更新してみてください。どうなりますか？新しいトランザクションが表示されましたか?
-
-この状態は `localStorage` のおかげで無期限に保持されますが、アプリからログアウトして再度ログインするまで更新されません。
-
-これを修正するために考えられる戦略の1つは、ダッシュボードがロードされるたびにアカウントデータをリロードして、データのストールを回避することです。
-
-### タスク
-
-新しい関数 `updateAccountData` を作成します。
-
-```js
-async function updateAccountData() {
-  const account = state.account;
-  if (!account) {
-    return logout();
-  }
-
-  const data = await getAccount(account.user);
-  if (data.error) {
-    return logout();
-  }
-
-  updateState('account', data);
-}
-```
-
-このメソッドは現在ログインしているかどうかをチェックし、サーバからアカウントデータをリロードします。
-
-`refresh` という名前の別の関数を作成します。
-
-```js
-async function refresh() {
-  await updateAccountData();
-  updateDashboard();
-}
-```
-
-これはアカウントデータを更新し、ダッシュボードページの HTML を更新する処理を行います。ダッシュボードルートがロードされたときに呼び出す必要があるものです。これでルート定義を更新します。
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: refresh }
-};
-```
-
-ダッシュボードをリロードしてみると、更新されたアカウントデータが表示されるはずです。
-
----
-
-## 🚀 チャレンジ
-
-ダッシュボードがロードされるたびにアカウントデータをリロードするようになりましたが、すべてのアカウントデータを保持する必要があると思いますか?
-
-アプリが動作するために絶対に必要なものだけを含むように、`localStorage` から保存およびロードされるものを変更するために、一緒に作業してみてください。
-
-## レッスン後の小テスト
-
-[レッスン後の小テスト](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48?loc=ja)
-
-## 課題
-
-[「トランザクションの追加」ダイアログの実装](assignment.ja.md)
-
-課題を終えた後の結果の一例です。
-
-![「トランザクションの追加」ダイアログの例を示すスクリーンショット](../images/dialog.png)
diff --git a/7-bank-project/4-state-management/translations/README.ko.md b/7-bank-project/4-state-management/translations/README.ko.md
deleted file mode 100644
index 4b5628a1..00000000
--- a/7-bank-project/4-state-management/translations/README.ko.md
+++ /dev/null
@@ -1,281 +0,0 @@
-# 은행 앱 제작하기 파트 4: 상태 관리의 컨셉
-
-## 강의 전 퀴즈
-
-[Pre-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47?loc=ko)
-
-### 소개
-
-웹 애플리케이션이 커지면서, 모든 데이터 흐름을 추적하는 것은 어렵습니다. 어떤 코드가 데이터를 가져오고, 어떤 페이지가 데이터를 사용하고, 언제 어디서 갱신해야 하는지... 관리하기 어려운 복잡한 코드로 끝날 수 있습니다. 이는 앱의 여러 페이지가 서로 데이터를 공유하는 경우에 특히 더 그렇습니다, 예시로 사용자 데이터. *상태 관리*의 컨셉은 항상 모든 종류의 프로그램에 존재했지만, 웹 앱이 계속 복잡해지면서 이제는 개발하면서 고려해야 할 키 포인트가 되었습니다.
-
-이 최종 부분에서는, 상태 관리하는 방법을 다시 생각해보며, 언제든 브라우저 새로고침을 지원하고, 사용자 세션에서 데이터를 유지하기 위해서 작성한 앱을 살펴 보겠습니다.
-
-### 준비물
-
-이 강의의 웹 앱 [data fetching](../../3-data/translations/README.ko.md) 파트를 완료해둬야 합니다. [Node.js](https://nodejs.org)와 [run the server API](../../api/README.md)를 로컬에 설치해야 계정 정보를 관리할 수 있습니다.
-
-터미널에서 다음 명령을 수행하여 서버가 잘 실행되고 있는지 테스트할 수 있습니다:
-
-```sh
-curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
-```
-
----
-
-## 상태 관리에 대하여 다시 생각하기
-
-[이전 강의](../../3-data/translations/README.ko.md)에서는, 현재 로그인한 사용자의 은행 데이터를 포함하는 전역 `account` 변수를 사용하여 앱에 기초 상태 개념을 도입했습니다. 그러나, 현재 구현에는 조금 취약점이 있습니다. 대시보드에서 페이지를 새로 고쳐보기 바랍니다. 무슨 일이 일어나고 있나요?
-
-현재 코드에는 3가지 이슈가 있습니다:
-
-- 브라우저를 새로 고치면 로그인 페이지로 돌아가기 때문에, 상태가 유지되지 않습니다.
-- 상태를 바꾸는 여러 함수들이 있습니다. 앱이 커지면서, 변경점을 추적하기 어렵고 갱신한 것을 잊어버리기 쉽습니다.
-- 상태가 정리되지 않았습니다, *로그아웃*을 클릭하면 로그인 페이지에 있어도 계정 데이터가 그대로 유지됩니다.
-
-이런 이슈를 하나씩 해결하기 위해 코드를 갱신할 수는 있지만, 코드 중복이 더 많이 발생되고 앱이 더 복잡해져서 유지 관리가 어려워집니다. 또는 몇 분 동안 잠시 멈춰서 다시 기획할 수도 있습니다.
-
-> 여기서 우리가 실제로 해결할 문제는 무엇인가요?
-
-[State management](https://en.wikipedia.org/wiki/State_management)는 다음 2가지 특정한 문제를 해결하기 위해 좋은 접근 방식을 찾습니다:
-
-- 이해하기 쉽게 앱의 데이터 흐름을 유지하는 방법은 무엇인가요?
-- 상태 데이터를 사용자 인터페이스와 항상 동기화하는 방법은 있나요 (혹은 그 반대로)?
-
-이런 문제를 해결한 후에는 다른 이슈가 이미 고쳐졌거나 더 쉽게 고칠 수 있습니다. 이러한 문제를 해결하기 위한 여러 가능한 방식들이 있지만, **데이터를 중앙 집중화하고 변경하는 방법**으로 구성된 공통 솔루션을 사용합니다. 데이터 흐름은 다음과 같습니다:
-
-![Schema showing the data flows between the HTML, user actions and state](.././images/data-flow.png)
-
-> 데이터와 뷰 갱신을 자동으로 연결하는 부분은, [Reactive Programming](https://en.wikipedia.org/wiki/Reactive_programming)의 고급 컨셉과 연결되었으므로 여기서 다루지는 않습니다. 깊게 분석한다면 좋게 팔로우 업할 주제입니다.
-
-✅ 상태 관리에 대한 접근 방식이 다른 수 많은 라이브러리가 있으며, [Redux](https://redux.js.org)는 인기있는 옵션입니다. 큰 웹 앱에서 마주할 수 있는 잠재적 이슈와 해결 방식을 알 수 있으므로 사용된 컨셉과 패턴을 살펴보세요.
-
-### 작업
-
-조금 리팩토링을 해보면서 시작해봅니다. `account` 선언을 바꿉니다:
-
-```js
-let account = null;
-```
-
-With:
-
-```js
-let state = {
-  account: null
-};
-```
-
-이 아이디어는 모든 앱 데이터를 단일 상태 개체에서 *중앙에 모으는* 것 입니다. 현재 상태에서는 `account`만 가지고 있으므로 많이 변하지 않지만, 발전을 위한 길을 닦아둡니다.
-
-또한 그것을 사용하여 함수를 갱신해야 합니다. `register()`와 `login()` 함수에서, `account = ...`를 `state.account = ...`로 바꿉니다.
-
-`updateDashboard()` 함수 상단에, 이 줄을 추가합니다:
-
-```js
-const account = state.account;
-```
-
-이 리팩토링만으로는 많은 개선이 이루어지지 않지만, 아이디어는 다음 변경점의 토대를 마련해줍니다.
-
-## 데이터 변경 추적하기
-
-데이터로 저장할 `state` 객체를 두었으므로, 다음 단계는 갱신 작업을 중앙 집중화하는 것입니다. 목표는 모든 변경점과 발생 시점을 쉽게 ​​추적하는 것입니다.
-
-`state` 객체가 변경되지 않으려면, [*immutable*](https://en.wikipedia.org/wiki/Immutable_object)한 것으로 간주하는 것이 좋습니다. 즉, 전혀 수정할 수 없다는 점을 의미합니다. 또한 변경하려는 경우에는 새로운 상태 객체를 만들어야 된다는 점을 의미합니다. 이렇게 하면, 잠재적으로 원하지 않는 [side effects](https://en.wikipedia.org/wiki/Side_effect_(computer_science))에 보호하도록 만들고, undo/redo를 구현하는 것 처럼 앱의 새로운 기능에 대한 가능성을 열어 디버깅을 더 쉽게 만듭니다. 예를 들자면, 상태에 대한 모든 변경점을 남기고 유지하여 버그의 원인을 파악할 수 있습니다.
-
-JavaScript에서, [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)를 사용하여 변경할 수 없는 버전의 객체를 만들 수 있습니다. 변경 불가능한 객체를 바꾸려고 하면 예외가 발생합니다.
-
-✅ *shallow*와 *deep* 불변 객체의 차이점을 알고 계시나요? [here](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze)에서 읽을 수 있습니다.
-
-### 작업
-
-새로운 `updateState()` 함수를 만듭니다:
-
-```js
-function updateState(property, newData) {
-  state = Object.freeze({
-    ...state,
-    [property]: newData
-  });
-}
-```
-
-이 함수에서는, 새로운 상태 객체를 만들고 [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals)로 이전 상태의 데이터를 복사합니다. 그러고  할당을 위해 [bracket notation](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]`를 사용하여 상태 객체의 특정한 속성을 새로운 데이터로 다시 정의합니다. 최종적으로, 변경되는 것을 막기 위해 `Object.freeze()`를 사용하여 객체를 잠급니다. 지금 상태에는 `account` 속성만 저장되어 있지만, 이 접근 방식으로 상태에 필요한 순간마다 많은 속성들을 추가할 수 있습니다.
-
-또한 초기 상태가 동결되도록 `state` 초기화 작업도 갱신합니다:
-
-```js
-let state = Object.freeze({
-  account: null
-});
-```
-
-그런 다음, `state.account = result;` 할당을 이 것으로 대체하여 `register` 함수를 갱신합니다:
-
-```js
-updateState('account', result);
-```
-
-`login` 함수에서도 동일하게 진행하고, `state.account = data;`도 이 것으로 바꿉니다:
-
-```js
-updateState('account', data);
-```
-
-이제 사용자가 *Logout*을 클릭 할 때 계정 데이터가 지워지지 않는 이슈를 해결할 수 있습니다.
-
-새로운 함수 `logout()`을 만듭니다:
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
-```
-
-`updateDashboard()` 에서, 리다이렉션하는 `return navigate('/login');`을 `return logout()`으로 바꿉니다;
-
-새로운 계정으로 가입을 시도하면, 로그아웃하고 다시 로그인하여 모두 잘 작동하는지 확인합니다.
-
-> Tip: `updateState()` 하단에 `console.log(state)`를 추가하고 브라우저의 개발 도구에서 콘솔을 열면 모든 상태 변경점을 볼 수 있습니다.
-
-## 상태 유지하기
-
-대부분 웹 앱이 잘 작동하려면 데이터를 유지할 필요가 있습니다. 모든 중요한 데이터는 일반적으로 데이터베이스에 저장되고 우리 케이스에는 사용자 계정 데이터처럼, 서버 API를 통해 접근됩니다. 그러나 때로는, 더 좋은 사용자 경험이나 로딩 퍼포먼스를 개선하기 위해서, 브라우저에서 실행중인 클라이언트 앱에 일부 데이터를 유지하는 것도 흥미롭습니다.
-
-브라우저에서 데이터를 유지하려면, 스스로에게 몇 중요한 질문을 해야합니다:
-
-- *민감한 데이터인가요?* 사용자 암호와 같은, 민감한 데이터는 클라이언트에 저장하지 않아야 합니다.
-- *데이터를 얼마나 오래 보관해야 하나요?* 현재 세션에서만 데이터에 접근하거나 계속 저장할 계획인가요?
-
-달성하려는 목표에 따라, 웹 앱 안에서 정보를 저장하는 방법에는 여러 가지가 있습니다. 예를 들면, URL을 사용하여 검색 쿼리를 저장하고, 사용자끼리 공유할 수 있습니다. [authentication](https://en.wikipedia.org/wiki/Authentication) 정보처럼, 데이터를 서버와 공유해야하는 경우에도 [HTTP cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)를 사용할 수 있습니다.
-
-다른 옵션으로는 데이터 저장을 위해 여러 브라우저 API 중 하나를 사용하는 것입니다. 그 중 2가지가 특히 흥미롭습니다:
-
-- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database)는 다른 세션에서 현재 웹 사이트에 대한 특정 데이터를 유지할 수 있습니다. 저장된 데이터는 만료되지 않습니다.
-- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): 이는 세션이 끝날 때(브라우저가 닫힐 때)에 저장된 데이터가 지워진다는 점을 제외하면 `localStorage`와 동일하게 작동합니다.
-
-이 두 API는 모두 [strings](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)만 저장할 수 있습니다. 복잡한 객체를 저장하려면, [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)를 사용하여 [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) 포맷으로 직렬화해야 합니다.
-
-✅ 서버에서 동작하지 않는 웹 앱을 만드려면, [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API)로 클라이언트에 데이터베이스를 만들 수도 있습니다. 이는 고급 사용 케이스이거나, 사용하기 복잡한 많은 양의 데이터를 저장해야 할 때에 사용하도록 되어있습니다.
-
-### 작업
-
-*Logout* 버튼을 명시적으로 클릭할 때까지 로그인 상태가 유지되기를 원하므로, `localStorage`로 계정 데이터를 저장합니다. 먼저, 데이터를 저장하는 데 사용할 키를 정의하겠습니다.
-
-```js
-const storageKey = 'savedAccount';
-```
-
-그러고 `updateState()` 함수의 하단에 이 줄을 추가합니다:
-
-```js
-localStorage.setItem(storageKey, JSON.stringify(state.account));
-```
-
-이를 통해, 이전의 모든 상태를 갱신하는 작업이 가운데로 모임에 따라 사용자 계정 데이터가 유지되고 항상 최신-상태를 유지합니다. 이것으로 이전 모든 리팩터링 작업의 혜택을 받기 시작했습니다 🙂.
-
-더 많은 초기화 코드를 가지게 될 예정이므로 새로운 `init` 함수를 만드는 것이 좋습니다, 여기에는 `app.js`의 하단에 이전 코드가 포함됩니다:
-
-```js
-function init() {
-  const savedAccount = localStorage.getItem(storageKey);
-  if (savedAccount) {
-    updateState('account', JSON.parse(savedAccount));
-  }
-
-  // Our previous initialization code
-  window.onpopstate = () => updateRoute();
-  updateRoute();
-}
-
-init();
-```
-
-여기에서 저장된 데이터를 검색하고, 그에 따라서 상태를 갱신합니다. 페이지를 갱신하다가 상태에 의존하는 코드가 있을 수 있으므로, 라우터를 갱신하기 *전에* 하는 것이 중요합니다.
-
-이제 계정 데이터를 유지하고 있으므로, *대시보드* 페이지를 애플리케이션 기본 페이지로 만들 수도 있습니다. 데이터가 없다면, 대시보드는 언제나 *로그인* 페이지로 리다이렉팅합니다. `updateRoute ()`에서, `return navigate('/login');`을 `return navigate('dashboard');`로 바꿉니다.
-
-이제 앱에 로그인하고 페이지를 새로 고쳐보면, 대시보드에 남아있어야 합니다. 이 업데이트로 모든 초기 이슈를 처리했습니다...
-
-## 데이터 새로 고치기
-
-...그러나 새로운 것을 만들 수도 있습니다. 웁스!
-
-`test` 계정을 사용하여 대시보드로 이동하면, 터미널에서 이 명령을 실행하여 새로운 트랜잭션을 만듭니다:
-
-```sh
-curl --request POST \
-     --header "Content-Type: application/json" \
-     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
-     http://localhost:5000/api/accounts/test/transactions
-```
-
-지금 브라우저에서 대시보드 페이지를 새로 고쳐봅니다. 어떤 일이 일어났나요? 새로운 트랜잭션이 보이나요?
-
-상태는 `localStorage` 덕분에 무한으로 유지하지만, 앱에서 로그아웃하고 다시 로그인할 때까지 갱신하지 않는다는 점을 의미합니다!
-
-해결할 수 있는 한 가지 전략은 대시보드를 불러올 때마다 계정 데이터를 다시 불러와서, 데이터가 오래되는 현상을 방지하는 것 입니다.
-
-### 작업
-
-새로운 함수 `updateAccountData`를 만듭니다:
-
-```js
-async function updateAccountData() {
-  const account = state.account;
-  if (!account) {
-    return logout();
-  }
-
-  const data = await getAccount(account.user);
-  if (data.error) {
-    return logout();
-  }
-
-  updateState('account', data);
-}
-```
-
-이 메소드는 현재 로그인되어 있는지 본 다음에 서버에서 계정 데이터를 다시 불러옵니다.
-
-`refresh`라고 이름을 지은 또 다른 함수를 만듭니다:
-
-```js
-async function refresh() {
-  await updateAccountData();
-  updateDashboard();
-}
-```
-
-이는 계정 데이터를 갱신하고나서, 대시보드 페이지의 HTML도 갱신하게 됩니다. 대시보드 라우터를 불러올 때마다 호출해야 합니다. 다음으로 라우터 정의를 갱신합니다:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: refresh }
-};
-```
-
-지금 대시보드를 다시 불러옵니다, 갱신된 계정 데이터를 볼 수 있어야 합니다.
-
----
-
-## 🚀 도전
-
-이제 대시보드를 불러올 때마다 계정 데이터가 다시 불러와지는데, 여전히 *모든 계정* 데이터를 유지해야 된다고 생각하나요?
-
-앱이 동작하는 데 꼭 필요한 것만 있도록 `localStorage` 에 저장하고 불러온 항목을 함께 바꿔봅니다.
-
-## 강의 후 퀴즈
-
-[Post-lecture quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48?loc=ko)
-
-## 과제
-
-[Implement "Add transaction" dialog](../assignment.md)
-
-다음은 과제를 완료한 뒤의 예시 결과입니다:
-
-![Screenshot showing an example "Add transaction" dialog](.././images/dialog.png)
diff --git a/7-bank-project/4-state-management/translations/README.ms.md b/7-bank-project/4-state-management/translations/README.ms.md
deleted file mode 100644
index 04331dfe..00000000
--- a/7-bank-project/4-state-management/translations/README.ms.md
+++ /dev/null
@@ -1,281 +0,0 @@
-# Bina Aplikasi Perbankan Bahagian 4: Konsep State Management
-
-## Kuiz Pra Kuliah
-
-[Kuiz Pra Kuliah](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47)
-
-### Pengenalan
-
-Apabila aplikasi web berkembang, menjadi cabaran untuk mengawasi semua aliran data. Kod mana yang mendapat data, halaman mana yang menggunakannya, di mana dan kapan ia perlu dikemas kini ... mudah untuk berakhir dengan kod tidak kemas yang sukar dijaga. Ini benar terutamanya apabila anda perlu berkongsi data di antara halaman aplikasi anda yang berbeza, misalnya data pengguna. Konsep *state management* selalu ada dalam semua jenis program, tetapi ketika aplikasi web terus berkembang dalam kerumitan, kini menjadi titik penting untuk dipikirkan semasa pembangunan.
-
-Pada bahagian akhir ini, kita akan melihat aplikasi yang kita buat untuk memikirkan kembali bagaimana keadaan dikendalikan, yang membolehkan sokongan penyegaran penyemak imbas pada bila-bila masa, dan data yang berterusan sepanjang sesi pengguna.
-
-### Prasyarat
-
-Anda perlu menyelesaikan bahagian [pengambilan data](../../3-data/translations/README.ms.md) pada aplikasi web untuk pelajaran ini. Anda juga perlu memasang [Node.js](https://nodejs.org) dan [jalankan API pelayan](../../api/README.ms.md) secara tempatan supaya anda dapat menguruskan data akaun.
-
-Anda boleh menguji bahawa pelayan berjalan dengan betul dengan menjalankan perintah ini di terminal:
-
-```sh
-curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
-```
-
----
-
-## Fikirkan semula state management
-
-Dalam [pelajaran sebelumnya](../../3-data/translations/README.md), kami memperkenalkan konsep dasar keadaan dalam aplikasi kami dengan pemboleh ubah `akaun` global yang mengandungi data bank untuk pengguna yang sedang log masuk. Walau bagaimanapun, pelaksanaan kami sekarang mempunyai beberapa kekurangan. Cuba muat semula halaman semasa anda berada di papan pemuka. Apa yang berlaku?
-
-Terdapat 3 masalah dengan kod semasa:
-
-- Keadaan tidak berterusan, kerana penyegaran penyemak imbas membawa anda kembali ke halaman log masuk.
-- Terdapat pelbagai fungsi yang mengubah keadaan. Apabila aplikasinya berkembang, ini akan menyukarkan untuk mengesan perubahan dan mudah untuk melupakan pembaharuan.
-- Keadaan tidak dibersihkan, apabila anda mengklik *Logout* data akaun masih ada walaupun anda berada di halaman log masuk.
-
-Kami dapat mengemas kini kod kami untuk mengatasi masalah ini satu demi satu, tetapi ini akan membuat lebih banyak pendua kod dan menjadikan aplikasi lebih rumit dan sukar untuk dijaga. Atau kita boleh berhenti sebentar dan memikirkan semula strategi kita.
-
-> Masalah apa yang sebenarnya ingin kita selesaikan di sini?
-
-[State Management](https://en.wikipedia.org/wiki/State_management) adalah mengenai mencari pendekatan yang baik untuk menyelesaikan dua masalah tertentu:
-
-- Bagaimana agar aliran data dalam aplikasi dapat difahami?
-- Bagaimana cara menjaga data keadaan selalu selari dengan antara muka pengguna (dan sebaliknya)?
-
-Setelah menyelesaikan masalah ini, masalah lain yang mungkin anda miliki mungkin sudah selesai atau menjadi lebih mudah untuk diselesaikan. Terdapat banyak kemungkinan pendekatan untuk menyelesaikan masalah ini, tetapi kami akan menggunakan penyelesaian bersama yang terdiri daripada **memusatkan data dan cara mengubahnya**. Aliran data akan seperti ini:
-
-![Skema yang menunjukkan aliran data antara HTML, tindakan pengguna dan keadaan](../images/data-flow.png)
-
-> Kami tidak akan membahas di sini bahagian di mana data secara automatik mencetuskan kemas kini paparan, kerana ia berkaitan dengan konsep [Pemrograman Reaktif](https://en.wikipedia.org/wiki/Reactive_programming). Ini adalah subjek susulan yang baik jika anda ingin menyelam.
-
-✅ Terdapat banyak perpustakaan di luar sana dengan pendekatan yang berbeza untuk pengurusan negeri, [Redux](https://redux.js.org) menjadi pilihan yang popular. Lihat konsep dan corak yang digunakan kerana ini sering kali merupakan kaedah yang baik untuk mengetahui potensi masalah yang mungkin anda hadapi dalam aplikasi web besar dan bagaimana ia dapat diselesaikan.
-
-### Tugas
-
-Kita akan mulakan dengan sedikit refactoring. Ganti pernyataan `akaun`:
-
-```js
-let account = null;
-```
-
-With:
-
-```js
-let state = {
-  account: null
-};
-```
-
-Ideanya adalah untuk *memusatkan* semua data aplikasi kami dalam satu objek keadaan. Kami hanya mempunyai `akaun` untuk saat ini di negeri ini sehingga tidak banyak berubah, tetapi ini menciptakan jalan untuk evolusi.
-
-Kita juga harus mengemas kini fungsi menggunakannya. Dalam fungsi `register()` dan `login()`, ganti `account = ...` dengan `state.account = ...`;
-
-Di bahagian atas fungsi `updateDashboard()`, tambahkan baris ini:
-
-```js
-const account = state.account;
-```
-
-Pemfaktoran semula ini dengan sendirinya tidak membawa banyak peningkatan, tetapi ideanya adalah untuk meletakkan asas untuk perubahan selanjutnya.
-
-## Jejak perubahan data
-
-Sekarang kita telah meletakkan objek `state` untuk menyimpan data kita, langkah seterusnya adalah memusatkan kemas kini. Tujuannya adalah untuk menjadikannya lebih mudah untuk mengikuti setiap perubahan dan kapan ia berlaku.
-
-Untuk mengelakkan berlakunya perubahan pada objek `state`, adalah praktik yang baik untuk mempertimbangkannya [*tidak berubah*](https://en.wikipedia.org/wiki/Immutable_object), yang bermaksud bahawa ia tidak dapat diubah sama sekali. Ini juga bermaksud bahawa anda harus membuat objek keadaan baru jika anda ingin mengubah apa-apa di dalamnya. Dengan melakukan ini, anda membina perlindungan mengenai [kesan sampingan](https://en.wikipedia.org/wiki/Side_effect_ (computer_science)), dan membuka kemungkinan untuk ciri baru dalam aplikasi anda seperti melaksanakan undo / redo, sambil mempermudah debug. Sebagai contoh, anda boleh mencatat setiap perubahan yang dibuat ke negeri dan menyimpan sejarah perubahan untuk memahami sumber pepijat.
-
-Dalam JavaScript, anda boleh menggunakan [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) untuk membuat versi yang tidak berubah dari sebuah objek. Sekiranya anda cuba membuat perubahan pada objek yang tidak dapat diubah, pengecualian akan ditimbulkan.
-
-✅ Adakah anda tahu perbezaan antara objek *cetek* dan *dalam* tidak berubah? Anda boleh membacanya [di sini](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze).
-
-### Tugas
-
-Mari buat fungsi `updateState()` baru:
-
-```js
-function updateState(property, newData) {
-  state = Object.freeze({
-    ...state,
-    [property]: newData
-  });
-}
-```
-
-Dalam fungsi ini, kami membuat objek keadaan baru dan menyalin data dari keadaan sebelumnya menggunakan operator [*spread (`...`) operator*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals). Kemudian kami menimpa harta benda objek tertentu dengan data baru menggunakan [notasi kurungan](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` untuk tugasan. Akhirnya, kita mengunci objek untuk mengelakkan pengubahsuaian menggunakan `Object.freeze()`. Kami hanya menyimpan harta `akaun` di negeri ini buat masa ini, tetapi dengan pendekatan ini anda dapat menambahkan seberapa banyak harta tanah yang anda perlukan di negeri ini.
-
-Kami juga akan mengemas kini inisialisasi `state` untuk memastikan keadaan awal juga dibekukan:
-
-```js
-let state = Object.freeze({
-  account: null
-});
-```
-
-After that, update the `register` function by replacing the `state.account = result;` assignment with:
-
-```js
-updateState('account', result);
-```
-
-Do the same with the `login` function, replacing `state.account = data;` with:
-
-```js
-updateState('account', data);
-```
-
-Kami sekarang akan mengambil kesempatan untuk memperbaiki masalah data akaun yang tidak dihapus ketika pengguna mengklik *Logout*.
-
-Buat fungsi baru `logout()`:
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
-```
-
-Di `updateDashboard()`, ganti pengalihan `return navigate('/login');` dengan `return logout()`;
-
-Cuba daftarkan akaun baru, log keluar dan masuk sekali lagi untuk memeriksa bahawa semuanya masih berfungsi dengan betul.
-
-> Petua: anda dapat melihat semua perubahan keadaan dengan menambahkan `console.log(state)` di bahagian bawah `updateState()` dan membuka konsol di alat pengembangan penyemak imbas anda.
-
-## Kekalkan keadaan
-
-Sebilangan besar aplikasi web perlu mengekalkan data agar dapat berfungsi dengan betul. Semua data kritikal biasanya disimpan di pangkalan data dan diakses melalui API pelayan, seperti data akaun pengguna dalam kes kami. Tetapi kadang-kadang, juga menarik untuk mengekalkan beberapa data pada aplikasi klien yang berjalan di penyemak imbas anda, untuk pengalaman pengguna yang lebih baik atau untuk meningkatkan prestasi pemuatan.
-
-Apabila anda ingin menyimpan data dalam penyemak imbas anda, terdapat beberapa soalan penting yang harus anda tanyakan kepada diri sendiri:
-
-- *Adakah data sensitif?* Anda harus mengelakkan menyimpan data sensitif pada pelanggan, seperti kata laluan pengguna.
-- *Berapa lama anda perlu menyimpan data ini?* Adakah anda merancang untuk mengakses data ini hanya untuk sesi semasa atau adakah anda ingin menyimpannya selamanya?
-
-Terdapat banyak cara untuk menyimpan maklumat di dalam aplikasi web, bergantung pada apa yang ingin anda capai. Sebagai contoh, anda boleh menggunakan URL untuk menyimpan pertanyaan carian, dan menjadikannya boleh dibagikan antara pengguna. Anda juga boleh menggunakan [kuki HTTP](https://developer.mozilla.org/docs/Web/HTTP/Cookies) jika data perlu dikongsi dengan pelayan, seperti [pengesahan](https://en.wikipedia.org/wiki/Authentication) maklumat.
-
-Pilihan lain adalah menggunakan salah satu dari banyak API penyemak imbas untuk menyimpan data. Dua daripadanya sangat menarik:
-
-- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage): a [Key/Value store](https://en.wikipedia.org/wiki/Key%E2%80%93value_database) yang memungkinkan untuk mengekalkan data khusus untuk laman web semasa di pelbagai sesi. Data yang disimpan di dalamnya tidak akan luput.
-- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage): ini berfungsi sama seperti `localStorage` kecuali data yang disimpan di dalamnya dibersihkan semasa sesi berakhir (semasa penyemak imbas ditutup).
-
-Perhatikan bahawa kedua-dua API ini hanya membenarkan menyimpan [string](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String). Sekiranya anda ingin menyimpan objek yang kompleks, anda perlu membuat siri ke siri [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) menggunakan [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify).
-
-✅ Sekiranya anda ingin membuat aplikasi web yang tidak berfungsi dengan pelayan, anda juga boleh membuat pangkalan data pada klien menggunakan [`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API). Yang ini dikhaskan untuk kes penggunaan lanjutan atau jika anda perlu menyimpan sejumlah besar data, kerana lebih kompleks untuk digunakan.
-
-### Tugas
-
-Kami mahu pengguna kami terus masuk sehingga mereka mengklik butang *Logout* secara eksplisit, jadi kami akan menggunakan `localStorage` untuk menyimpan data akaun. Pertama, mari tentukan kunci yang akan kami gunakan untuk menyimpan data kami.
-
-```js
-const storageKey = 'savedAccount';
-```
-
-Kemudian tambahkan baris ini pada akhir fungsi `updateState()`:
-
-```js
-localStorage.setItem(storageKey, JSON.stringify(state.account));
-```
-
-Dengan ini, data akaun pengguna akan dikekalkan dan sentiasa terkini semasa kami memusatkan semua kemas kini negeri sebelumnya. Di sinilah kita mula mendapat manfaat daripada semua reaktor kita sebelumnya 🙂.
-
-Semasa data disimpan, kita juga harus menjaga memulihkannya ketika aplikasi dimuat. Oleh kerana kita akan mempunyai lebih banyak kod inisialisasi, mungkin ada baiknya membuat fungsi `init` baru, yang juga merangkumi kod sebelumnya di bahagian bawah `app.js`:
-
-```js
-function init() {
-  const savedAccount = localStorage.getItem(storageKey);
-  if (savedAccount) {
-    updateState('account', JSON.parse(savedAccount));
-  }
-
-  // Kod permulaan kami sebelumnya
-  window.onpopstate = () => updateRoute();
-  updateRoute();
-}
-
-init();
-```
-
-Di sini kami mengambil data yang disimpan, dan jika ada, kami akan mengemas kini keadaan dengan sewajarnya. Penting untuk melakukan ini *sebelum* mengemas kini laluan, kerana mungkin ada kod yang bergantung pada keadaan semasa kemas kini halaman.
-
-Kami juga dapat menjadikan halaman *Dashboard* sebagai halaman lalai aplikasi kami, karena kami sekarang masih menyimpan data akun. Sekiranya tidak ada data, dashboard akan mengalihkan ke halaman *Login*. Dalam `updateRoute()`, ganti fallback `return navigate ('/login');` dengan `return navigate('dashboard');`.
-
-Sekarang log masuk dalam aplikasi dan cuba memuat semula halaman, anda harus terus berada di papan pemuka. Dengan kemas kini itu, kami telah menangani semua masalah awal kami ...
-
-## Muat semula data
-
-... Tetapi kita mungkin juga telah membuat yang baru. Alamak!
-
-Pergi ke papan pemuka menggunakan akaun `test`, kemudian jalankan perintah ini di terminal untuk membuat transaksi baru:
-
-```sh
-curl --request POST \
-     --header "Content-Type: application/json" \
-     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
-     http://localhost:5000/api/accounts/test/transactions
-```
-
-Cuba muat semula halaman papan pemuka anda di penyemak imbas sekarang. Apa yang berlaku? Adakah anda melihat transaksi baru?
-
-Keadaan ini berterusan selama-lamanya berkat `localStorage`, tetapi itu juga bermaksud ia tidak akan dikemas kini sehingga anda log keluar dari aplikasi dan log masuk semula!
-
-Salah satu strategi yang mungkin untuk diperbaiki adalah memuat semula data akaun setiap kali dashboard dimuat, untuk mengelakkan data terhenti.
-
-### Tugas
-
-Buat fungsi baru `updateAccountData`:
-
-```js
-async function updateAccountData() {
-  const account = state.account;
-  if (!account) {
-    return logout();
-  }
-
-  const data = await getAccount(account.user);
-  if (data.error) {
-    return logout();
-  }
-
-  updateState('account', data);
-}
-```
-
-Kaedah ini memeriksa bahawa kita sedang log masuk dan memuat semula data akaun dari pelayan.
-
-Buat fungsi lain bernama `refresh`:
-
-```js
-async function refresh() {
-  await updateAccountData();
-  updateDashboard();
-}
-```
-
-Yang ini mengemas kini data akaun, kemudian mengurus mengemas kini HTML halaman papan pemuka. Inilah yang perlu kita panggil semasa laluan papan pemuka dimuat. Kemas kini definisi laluan dengan:
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: refresh }
-};
-```
-
-Cuba muatkan semula papan pemuka sekarang, ia akan memaparkan data akaun yang dikemas kini.
-
----
-
-## 🚀 Cabaran
-
-Setelah kita memuatkan semula data akaun setiap kali papan pemuka dimuat, adakah anda fikir kita masih perlu meneruskan *semua data* akaun?
-
-Cuba bekerjasama untuk mengubah apa yang disimpan dan dimuat dari `localStorage` untuk hanya memasukkan perkara yang benar-benar diperlukan agar aplikasi berfungsi.
-
-## Post-Lecture Quiz
-
-[Post-Lecture Quiz](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48)
-
-## Tugasan
-
-[Laksanakan dialog "Tambah transaksi"](assignment.ms.md)
-
-Inilah hasil contoh setelah menyelesaikan tugasan:
-
-![Tangkapan skrin yang menunjukkan contoh dialog "Tambah transaksi"](../images/dialog.png)
\ No newline at end of file
diff --git a/7-bank-project/4-state-management/translations/README.zh-tw.md b/7-bank-project/4-state-management/translations/README.zh-tw.md
deleted file mode 100644
index 8f042caa..00000000
--- a/7-bank-project/4-state-management/translations/README.zh-tw.md
+++ /dev/null
@@ -1,284 +0,0 @@
-# 建立銀行網頁應用程式 Part 4： 狀態控管的概念
-
-## 課前測驗
-
-[課前測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/47?loc=zh_tw)
-
-### 大綱
-
-隨著網頁應用越來越龐大，追蹤資料流的動向也是一種挑戰。程式取得了何種資料、網頁如何處理它、何時何處被更新上去……這些很容易地導致程式碼凌亂而難以維護。尤其是當你需要在不同頁面上做資料共享時，好比說使用者的資料。*狀態控管(state management)* 的觀念已經存在於所有程式中，我們也開始需要在開發複雜的網頁應用程式時，注意這個關鍵點。
-
-在這個最終章內，我們會總覽整個程式並重新思考該如何管理程式狀態，讓瀏覽器能在任何時刻做重新整理，在不同的使用者階段維持資料的狀態。
-
-### 開始之前
-
-你需要先完成[取得資料](../../3-data/translations/README.zh-tw.md)的網頁開發章節。你還需要安裝 [Node.js](https://nodejs.org) 並於本地端[執行伺服器 API](../../api/translations/README.zh-tw.md)以管理使用者資料。 
-
-你可以測試伺服器是否運作正常，在終端機中輸入指令：
-
-```sh
-curl http://localhost:5000/api
-# -> should return "Bank API v1.0.0" as a result
-```
-
----
-
-## 思考狀態控管
-
-在[前一堂課](../../3-data/translations/README.zh-tw.md)中，我們介紹了應用程式基本的狀態，全域變數 `account` 提供登入帳戶的相關銀行資料。然而，現在的專案存在著一些瑕疵。試著在儀表板介面中重新整理。發生了什麼事？
-
-目前我們的程式碼有三個問題：
-
-- 網頁狀態並沒有被儲存，當瀏覽器重新整理時，會被導回登入頁面。
-- 有許多函式會修改網頁狀態。隨著應用程式變大，我們很難去追蹤之後的改變，時刻地去更新相關的網頁狀態。
-- 網頁狀態並不完整，當你*登出*帳戶時，帳戶資訊仍然顯示在登入頁面上。
-
-我們是可以逐一的解決這些問題，但這樣會創造出許多獨立的程式碼，讓應用程式更複雜而難以去管理。或者是我們停下來思考一下我們的策略。
-
-> 我們究竟要解決什麼問題？
-
-[狀態控管(State management)](https://en.wikipedia.org/wiki/State_management)可以為兩項問題提供良好的解決方案：
-
-- 如何讓應用程式中的資料流容易理解？
-- 如何讓網頁狀態一直與使用者介面，或是相關物件進行同步？
-
-一旦你處理好這些問題，其他問題可以被簡化，甚至被一併解決。有許多可能的方法能解決這些問題，但我們使用一種常見的解法：**中心化資料與更新方式**。資料流會呈現下列模式：
-
-![HTML、使用者行為與網頁狀態的架構圖](../images/data-flow.png)
-
-> 我們不會處理如何讓資料同步觸發頁面的更新，這比較像是關於[回應式程式設計](https://zh.wikipedia.org/wiki/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BC%96%E7%A8%8B)的更進階知識。當你更深入網頁開發領域時，這是個很好的發展方向。
-
-✅ 有許多函式庫提供狀態管理的方式，[Redux](https://redux.js.org) 就是常見的選擇。閱讀它的概念與運作模式，這是種有效的的學習方式，讓你在大型的網頁開發中預測潛在的風險，並預想解決方案。
-
-### 課題
-
-我們會先做一些程式重構。替換掉 `account` 的定義：
-
-```js
-let account = null;
-```
-
-變成：
-
-```js
-let state = {
-  account: null
-};
-```
-
-這個構想是要*中心化*應用程式資料到一個狀態物件中。目前我們只有 `account` 在狀態中，但這能提供未來新增新功能的基礎。
-
-我們還需要更新與它相關的函式。在函式 `register()` 和 `login()` ，將 `account = ...` 替換為 `state.account = ...`。
-
-在函式 `updateDashboard()` 的上方，加入此行：
-
-```js
-const account = state.account;
-```
-
-這個重構並不會帶來任何提升，但這是之後改變上的基礎。
-This refactoring by itself did not bring much improvements, but the idea was to lay out the foundation for the next changes.
-
-## 追蹤資料改變
-
-現在我們有 `state` 物件儲存資料了，接下來要來中心化這些更新。目標是能輕易地追蹤任何被觸發的改變。
-
-為了避免改動 `state` 物件，我們考慮使它[*不可變*](https://zh.wikipedia.org/wiki/%E4%B8%8D%E5%8F%AF%E8%AE%8A%E7%89%A9%E4%BB%B6)，意味著它不能被做任何的修改。
-這也代表你必須建立新的狀態物件來替換它。藉由這個方式，你就有一套保護措施阻絕潛在非預期[風險](https://zh.wikipedia.org/wiki/%E5%89%AF%E4%BD%9C%E7%94%A8_(%E8%AE%A1%E7%AE%97%E6%9C%BA%E7%A7%91%E5%AD%A6))，也開創出應用程式內還原與重做的功能，讓程式偵錯更加的容易。舉例來說，你可以紀錄狀態的改變，儲存狀態的歷史紀錄來了解錯誤的來源。
-
-在 JavaScript 中，你可以使用 [`Object.freeze()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) 來建立不可變物件。若你想在不可變物件上做更動，例外處理(exception)就會發生。
-
-✅ 你知道*淺複製(shallow)*和*深複製(deep)*這兩種不可變物件的差別嗎？你可以從[這裡](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze#What_is_shallow_freeze)閱讀相關資訊。
-
-### 課題
-
-我們來建立新的函式 `updateState()`：
-
-```js
-function updateState(property, newData) {
-  state = Object.freeze({
-    ...state,
-    [property]: newData
-  });
-}
-```
-
-在這個函式中，我們會建立新的狀態物件，並利用[*展開運算子(`...`)(Spread Operator)*](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals)複製前一個資料狀態。接著，我們使用[括弧記法(Bracket Notation)](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties) `[property]` 賦予並覆蓋特定的狀態物件。最後，我們為物件上鎖，`Object.freeze()` 避免任何的改動。目前我們只有 `account` 資料存在狀態中，利用此方法可以讓你新增任何你想要的資料。
-
-我們會更新 `state` 初始化設定，確保初始狀態也被上鎖：
-
-```js
-let state = Object.freeze({
-  account: null
-});
-```
-
-接著，更新函式 `register`，將 `state.account = result;` 替換為：
-
-```js
-updateState('account', result);
-```
-
-在函式 `login` 上做一樣的事，將 `state.account = data;` 替換為：
-
-```js
-updateState('account', data);
-```
-
-藉由這個機會，我們能解決帳戶資料在*登出*時，不會被清除的問題。
-
-建立新的函式 `logout()`：
-
-```js
-function logout() {
-  updateState('account', null);
-  navigate('/login');
-}
-```
-
-在 `updateDashboard()` 中，替換重新導向 `return navigate('/login');` 為 `return logout()`。
-
-試著註冊新的帳戶，登入登出以確保功能都運作正常。
-
-> 提示：你可以觀察所有的狀態改變，在 `updateState()` 裡的最下方加入 `console.log(state)`，開啟瀏覽器開發工具，命令欄就會顯示狀態的紀錄。
-
-## 紀錄狀態
-
-多數的網頁應用程式需要儲存資料以確保運作正常。所有重要的資料都會存在資料庫中，並藉由伺服器 API 來存取，就像我們專案中的帳戶資料。但有時候，瀏覽器用戶端的應用程式也需要儲存一些資料，提供更好的使用者體驗與增進負載效能。
-
-當你想在瀏覽器內儲存資料，你必須思考幾項重要的問題：
-
-- *這項資料很危險嗎？* 你應該要避免在用戶端儲存敏感的資料，例如帳戶密碼。
-- *你需要儲存資料多久？* 你打算短時間內做存取，還是永久地保存？
-
-網頁應用程式中有許多儲存資訊的方法，一切都取決於你想達成的目標。舉例來說，你可以利用網址來儲存搜尋資訊，讓使用者間能共享資訊。若資料需要與伺服器共享，好比說[認證](https://zh.wikipedia.org/wiki/%E8%BA%AB%E4%BB%BD%E9%AA%8C%E8%AF%81)資訊，你可以使用 [HTTP cookies](https://developer.mozilla.org/docs/Web/HTTP/Cookies)。
-
-另一個選擇是使用其中一個廣大的瀏覽器 API 來儲存資料。下列這兩項就特別有趣：
-
-- [`localStorage`](https://developer.mozilla.org/docs/Web/API/Window/localStorage)：[Key/Value 儲存法](https://zh.wikipedia.org/wiki/%E9%94%AE-%E5%80%BC%E5%AD%98%E5%82%A8)可以保存不同時刻的網頁資料。這些資料不會有期限的限制。
-- [`sessionStorage`](https://developer.mozilla.org/docs/Web/API/Window/sessionStorage)：它的運作模式與 `localStorage` 相同，只差在資料會在網頁段落結束時被清除，如瀏覽器關閉時。
-
-紀錄一下這兩個 API 只能儲存[字串](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/String)格式。
-如果你想儲存更複雜的物件，你需要利用 [`JSON.stringify()`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) 將資料整理成 [JSON](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/JSON) 格式。
-
-✅ 如果你想要建立不仰賴伺服器的網頁應用程式，你有辦法在用戶端建立資料庫。[`IndexedDB` API](https://developer.mozilla.org/docs/Web/API/IndexedDB_API) 可以應用在更進階的案例上，儲存更大量的資料，當然使用上也相對複雜。
-
-### 課題
-
-我們想讓使用者在登出之前，保持登入狀態。所以我們使用 `localStorage` 來儲存帳戶資料。首先，定義一組 key 來紀錄我們的資料內容。
-
-```js
-const storageKey = 'savedAccount';
-```
-
-在函式 `updateState()` 末端加入此行：
-
-```js
-localStorage.setItem(storageKey, JSON.stringify(state.account));
-```
-
-藉由此方式，帳戶資料就能保存下來，並隨著之前中心化後的狀態而更新。我們開始從之前的重構獲取效益了 🙂。
-
-當資料被儲存後，我們還需要在程式讀取時載入資料。在 `app.js` 下方編寫更多的初始化程式，建立新的函式 `init` 並收入之前的程式碼：
-
-```js
-function init() {
-  const savedAccount = localStorage.getItem(storageKey);
-  if (savedAccount) {
-    updateState('account', JSON.parse(savedAccount));
-  }
-
-  // 之前的初始化程式
-  window.onpopstate = () => updateRoute();
-  updateRoute();
-}
-
-init();
-```
-
-我們在此接收了儲存資料，並同步地更新狀態資訊。這必須在更新路由*之前*完成，否則有些程式碼會在頁面更新時，依據狀態來決定其行為。
-
-當儲存完帳戶資料後，我們也定義了*儀表板*頁面為我們的預設首頁。若程式沒有找到資料，儀表板頁面也能重新導向回*登入*頁面。在 `updateRoute()` 中，替換回傳值 `return navigate('/login');` 為 `return navigate('/dashboard');`。
-
-登入應用程式並重新整理頁面。你應該能維持在儀表板那頁。這個改變也解決了我們最初面臨的問題......
-
-## 重整資料
-
-......但我們可能也產生了新問題。啊呀！
-
-使用 `test` 帳戶進入儀表板頁面，在終端機內執行下列指令以建立新的交易項目：
-
-```sh
-curl --request POST \
-     --header "Content-Type: application/json" \
-     --data "{ \"date\": \"2020-07-24\", \"object\": \"Bought book\", \"amount\": -20 }" \
-     http://localhost:5000/api/accounts/test/transactions
-```
-
-試著重新整理瀏覽器內儀表板頁面。發生了什麼事？你有看到新的交易項目嗎？
-
-感謝 `localStorage` 的幫助，狀態成功的儲存下來，但也代表我們在登出登入之前，不能再改變它的內容了！
-
-一個可能的修復策略是在儀表板載入時，重新載入帳戶資訊以避免資料不同步。
-
-### 課題
-
-建立新的函式 `updateAccountData`：
-
-```js
-async function updateAccountData() {
-  const account = state.account;
-  if (!account) {
-    return logout();
-  }
-
-  const data = await getAccount(account.user);
-  if (data.error) {
-    return logout();
-  }
-
-  updateState('account', data);
-}
-```
-
-這個方法能檢查我們是否已經登入，重新從伺服器載入用戶資料。
-
-建立另一個函式 `refresh`：
-
-```js
-async function refresh() {
-  await updateAccountData();
-  updateDashboard();
-}
-```
-
-這能更新帳戶資料，更新 HTML 中的儀表板頁面。這是在儀表板路由被載入時，我們所需要呼叫的函式。更新路由定義為：
-
-```js
-const routes = {
-  '/login': { templateId: 'login' },
-  '/dashboard': { templateId: 'dashboard', init: refresh }
-};
-```
-
-試著重新載入儀表板，它現在應該能顯示更新後的帳戶資料。
-
----
-
-## 🚀 挑戰
-
-每一次儀表板載入時，我們都會重新載入帳戶資料，你認為我們還需要在用戶端儲存*所有的帳戶*資料嗎？
-
-試著改變 `localStorage` 內的儲存內容，只包含我們能運行程式的必要資料。
-
-## 課後測驗
-
-[課後測驗](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/48?loc=zh_tw)
-
-## 作業
-
-[編寫"加入交易明細"視窗](assignment.zh-tw.md)
-
-這邊有完成之後的結果：
-
-!["加入交易明細"視窗的例子截圖](../images/dialog.png)
diff --git a/7-bank-project/4-state-management/translations/assignment.es.md b/7-bank-project/4-state-management/translations/assignment.es.md
deleted file mode 100644
index c28d7ada..00000000
--- a/7-bank-project/4-state-management/translations/assignment.es.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Implementar el diálogo "Agregar transacción"
-
-## Instrucciones
-
-A nuestra aplicación bancaria todavía le falta una característica importante: la posibilidad de ingresar nuevas transacciones.
-Utilizando todo lo que ha aprendido en las cuatro lecciones anteriores, implemente un cuadro de diálogo "Agregar transacción":
-
-- Agregue un botón "Agregar transacción" en la página del panel
-- Cree una nueva página con una plantilla HTML o use JavaScript para mostrar / ocultar el cuadro de diálogo HTML sin salir de la página del tablero (puede usar [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) para eso, o clases CSS)
-- Implementar un formulario HTML para recibir datos de entrada.
-- Cree datos JSON a partir de los datos del formulario y envíelos a la API
-- Actualiza la página del tablero con los nuevos datos.
-
-Mire las [especificaciones de la API del servidor](../images/dialog.png) para ver a qué API debe llamar y cuál es el formato JSON esperado.
-
-Aquí hay un ejemplo de resultado después de completar la tarea:
-
-! [Captura de pantalla que muestra un ejemplo de diálogo "Agregar transacción"](../images/dialog.png)
-
-## Rúbrica
-
-| Criterios | Ejemplar | Adecuado | Necesita mejorar |
-| -------- | -------------------------------------------------- ---------------------------------------------- | -------------------------------------------------- -------------------------------------------------- ------------------- | -------------------------------------------- |
-| | La adición de una transacción se implementa completamente siguiendo todas las mejores prácticas que se ven en las lecciones. | Agregar una transacción está implementado, pero no siguiendo las mejores prácticas que se ven en las lecciones, o trabajando solo parcialmente. | Agregar una transacción no funciona en absoluto. |
\ No newline at end of file
diff --git a/7-bank-project/4-state-management/translations/assignment.fr.md b/7-bank-project/4-state-management/translations/assignment.fr.md
deleted file mode 100644
index d157c8a8..00000000
--- a/7-bank-project/4-state-management/translations/assignment.fr.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Implémenter la boîte de dialogue "Ajouter une transaction"
-
-## Instructions
-
-Il manque encore à notre application bancaire une fonctionnalité importante: la possibilité de saisir de nouvelles transactions.
-En utilisant tout ce que vous avez appris dans les quatre leçons précédentes, implémentez une boîte de dialogue « Ajouter une transaction » :
-
-- Ajouter un bouton "Ajouter une transaction" dans la page du tableau de bord
-- Créez une nouvelle page avec un modèle HTML ou utilisez JavaScript pour afficher/masquer le HTML de la boîte de dialogue sans quitter la page du tableau de bord (vous pouvez utiliser [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) pour celà, ou des classes CSS)
-- Assurez-vous de gérer [l'accessibilité du clavier et du lecteur d'écran](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) pour la boîte de dialogue
-- Implémenter un formulaire HTML pour recevoir les données d'entrée
-- Créer des données JSON à partir des données du formulaire et les envoyer à l'API
-- Mettre à jour la page du tableau de bord avec les nouvelles données
-
-Consultez les [spécifications de l'API du serveur](./../../api/translations/README.fr.md) pour voir quelle API vous devez appeler et quel est le format JSON attendu.
-
-Voici un exemple de résultat après avoir terminé le devoir :
-
-![Capture d'écran montrant un exemple de boîte de dialogue "Ajouter une transaction"](../images/dialog.png)
-
-## Rubrique
-
-| Critères | Exemplaire                                                                                        | Adéquat                                                                                                                | Besoin d'amélioration                           |
-| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
-|          | L'ajout d'une transaction est entièrement mis en œuvre en suivant toutes les meilleures pratiques vues dans les leçons. | L'ajout d'une transaction est implémenté, mais ne suit pas les meilleures pratiques vues dans les leçons, ou ne fonctionne que partiellement. | L'ajout d'une transaction ne fonctionne pas du tout. |
\ No newline at end of file
diff --git a/7-bank-project/4-state-management/translations/assignment.hi.md b/7-bank-project/4-state-management/translations/assignment.hi.md
deleted file mode 100644
index 1fff2d16..00000000
--- a/7-bank-project/4-state-management/translations/assignment.hi.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# लेनदेन जोड़ें डियलॉग लागू करें
-
-## अनुदेश
-
-हमारा बैंक ऐप अभी भी एक महत्वपूर्ण विशेषता को याद कर रहा है: नए लेनदेन दर्ज करने की संभावना।
-पिछले चार पाठों में आपने जो कुछ भी सीखा है, उसका उपयोग करके "लेनदेन जोड़ें" डियलॉग को लागू करें:
-
-- डैशबोर्ड पृष्ठ में "लेनदेन जोड़ें" बटन जोड़ें
-- या तो HTML टेम्पलेट के साथ एक नया पृष्ठ बनाएँ, या डैशबोर्ड पृष्ठ को छोड़े बिना संवाद HTML दिखाने / छिपाने के लिए जावास्क्रिप्ट का उपयोग करें (आप उसके लिए, या CSS कक्षाओं के लिए [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) हुई संपत्ति का उपयोग कर सकते हैं)
-- सुनिश्चित करें कि आप [कीबोर्ड और स्क्रीन रीडर एक्सेसिबिलिटी](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) डियलॉग संभालते हैं
-- इनपुट डेटा प्राप्त करने के लिए एक HTML फॉर्म को लागू करें
-- फॉर्म डेटा से JSON डेटा बनाएं और इसे API पर भेजें
-- नए डेटा के साथ डैशबोर्ड पृष्ठ को अपडेट करें
-
-[सर्वर एपीआई विनिर्देशों](../../api/README.md) को देखें कि आपको कौन सा एपीआई कॉल करने की आवश्यकता है और जो JSON प्रारूप अपेक्षित है उसे देखने के लिए।
-
-यहां असाइनमेंट पूरा करने के बाद एक उदाहरण परिणाम है:
-
-![एक उदाहरण "ट्रांसलेशन जोड़ें" डियलॉग दिखाते हुए स्क्रीनशॉट](../images/dialog.png)
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक                                                                                        | पर्याप्त                                                                                                                   | सुधार की जरूरत                               |
-| ------ | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- |
-|        | लेन-देन को जोड़ना पाठों में देखी जाने वाली सभी सर्वोत्तम प्रथाओं का पूरी तरह से पालन किया जाता है. | लेन-देन जोड़ना कार्यान्वयन है, लेकिन पाठों में देखी गई सर्वोत्तम प्रथाओं का पालन नहीं करना, या केवल आंशिक रूप से काम करना. | लेनदेन जोड़ना बिल्कुल भी काम नहीं कर रहा है. |
diff --git a/7-bank-project/4-state-management/translations/assignment.it.md b/7-bank-project/4-state-management/translations/assignment.it.md
deleted file mode 100644
index 4c60ca1d..00000000
--- a/7-bank-project/4-state-management/translations/assignment.it.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Implementare la finestra di dialogo "Aggiungi transazione"
-
-## Istruzioni
-
-All'app bancaria manca ancora una caratteristica importante: la possibilità di inserire nuove transazioni.
-Utilizzando tutto quanto appreso nelle quattro lezioni precedenti, implementare una finestra di dialogo "Aggiungi transazione":
-
-- Aggiungere un pulsante "Aggiungi transazione" nella pagina del cruscotto
-- Creare una nuova pagina con un modello HTML o usare JavaScript per mostrare/nascondere l'HTML della finestra di dialogo senza lasciare la pagina del cruscotto (si può  usare la proprietà [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) per quello o le classi CSS)
-- Assicurarsi di gestire l' [accessibilità dalla tastiera e dal lettore di schermo](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) per la finestra di dialogo
-- Implementare un form HTML per ricevere i dati di input
-- Creare dati JSON dai dati del form e inviarli all'API
-- Aggiorna la pagina del cruscotto con i nuovi dati
-
-Guardare [le specifiche dell'API del server](../api/README.md) per vedere quale API si devono chiamare e qual è il formato JSON previsto.
-
-Ecco un esempio di risultato dopo aver completato il compito:
-
-![Videata che mostra un esempio di dialogo "Aggiungi transizione"](../images/dialog.png)
-
-## Rubrica
-
-| Criteri | Ottimo | Adeguato | Necessita miglioramento |
-| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
-|          | L'aggiunta di una transazione viene implementata seguendo completamente tutte le migliori pratiche viste nelle lezioni. | L'aggiunta di una transazione è implementata, ma non seguendo le migliori pratiche viste nelle lezioni o funzionante solo parzialmente. | L'aggiunta di una transazione non funziona affatto. |
diff --git a/7-bank-project/4-state-management/translations/assignment.ja.md b/7-bank-project/4-state-management/translations/assignment.ja.md
deleted file mode 100644
index b707bf65..00000000
--- a/7-bank-project/4-state-management/translations/assignment.ja.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# 「トランザクションの追加」ダイアログの実装
-
-## 説明書
-
-私たちの銀行アプリには、1つの重要な機能がまだありません。
-前の4つのレッスンで学んだことをすべて使って、「トランザクションの追加」ダイアログを実装します。
-
-- ダッシュボードページに「トランザクションの追加」ボタンを追加します
-- HTML テンプレートで新しいページを作成するか、JavaScript を使用してダッシュボード・ページを離れることなくダイアログの HTML を表示/非表示にするかのいずれかを選択します (そのためには [`hidden`](https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/hidden) プロパティを使用するか、CSS クラスを使用することができます)
-- ダイアログの [キーボードとスクリーンリーダーのアクセシビリティ] (https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) が処理されていることを確認します
-- 入力データを受け取るための HTML フォームを実装する
-- フォームデータから JSON データを作成して API に送る
-- ダッシュボードページを新しいデータで更新する
-
-[サーバー API の仕様](./.../.../api/translations/README.ja.md)を見て、どの API を呼び出す必要があるか、期待される JSON 形式は何かを確認してください。
-
-以下は、課題を完了した後の結果の例です。
-
-![「トランジションの追加」ダイアログの例を示すスクリーンショット](../images/dialog.png)
-
-## ルーブリック
-
-| 基準 | 模範的な例                                                                                        | 適切な                                                                                                                | 改善が必要                           |
-| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
-|          | トランザクションの追加は、レッスンで見たすべてのベストプラクティスに従って完全に実装されています。 | トランザクションを追加することは実装されていますが、レッスンで見たベストプラクティスに従っていなかったり、部分的にしか動作しなかったりします。 | トランザクションを追加しても全く機能しません。 |
diff --git a/7-bank-project/4-state-management/translations/assignment.ko.md b/7-bank-project/4-state-management/translations/assignment.ko.md
deleted file mode 100644
index 7450e9e0..00000000
--- a/7-bank-project/4-state-management/translations/assignment.ko.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# "거래 추가" 대화 상자 구현
-
-## 설명
-
-우리 은행 앱에는 여전히 새로운 거래를 입력 할 수 있는 한 가지 중요한 기능이 없습니다. 이전 네 가지 수업에서 배운 모든 것을 사용하여 "트랜잭션 추가" 대화 상자를 구현해봅시다.
-
-- 대시 보드 페이지에 "거래 추가" 버튼 추가
-- HTML 템플릿으로 새 페이지를 만들거나 JavaScript를 사용하여 대시 보드 페이지를 벗어나지 않고 대화 상자 HTML을 표시하거나 숨깁니다(해당 항목에 대해 [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) 속성 또는 CSS 클래스를 사용할 수 있음).
-- 대화 상자에 대한 [키보드 및 화면 판독기 접근성](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)을 처리해야합니다.
-- 입력 데이터 수신을 위한 HTML 양식 구현
-- 양식 데이터에서 JSON 데이터를 만들어 API로 보냅니다.
-- 새 데이터로 대시 보드 페이지 업데이트
-
-호출해야하는 API와 예상되는 JSON 형식을 확인하려면 [서버 API 사양](../api/README.md) 을 살펴보세요.
-
-다음은 과제를 완료 한 후의 예시 결과입니다.
-
-![예시를 보여주는 스크린샷 이미지](./images/dialog.png)
-
-## 평가 기준
-
-기준 | 모범 답안 | 적당한 답안 | 개선이 필요한 답안
---- | --- | --- | ---
- | 거래 추가 기능이 수업에서 본 모든 모범 사례에 따라 완전히 구현된 경우 | 거래 추가기능은 구현되지만, 강의에 표시된 모범 사례를 따르지 않거나 부분적으로만 작동하는 경우 | 거래 추가기능이 전혀 동작하지 않는 경우
diff --git a/7-bank-project/4-state-management/translations/assignment.ms.md b/7-bank-project/4-state-management/translations/assignment.ms.md
deleted file mode 100644
index 180137be..00000000
--- a/7-bank-project/4-state-management/translations/assignment.ms.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Laksanakan dialog "Tambah transaksi"
-
-## Arahan
-
-Aplikasi bank kami masih belum mempunyai satu ciri penting: kemungkinan untuk melakukan transaksi baru.
-Menggunakan semua yang telah anda pelajari dalam empat pelajaran sebelumnya, laksanakan dialog "Tambah transaksi":
-
-- Tambahkan butang "Tambah transaksi" di halaman papan pemuka
-- Buat halaman baru dengan templat HTML, atau gunakan JavaScript untuk menunjukkan / menyembunyikan HTML dialog tanpa meninggalkan halaman papan pemuka (anda boleh menggunakan [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) property for that, or CSS classes) untuk itu, atau kelas CSS)
-- Pastikan anda mengendalikan [kebolehcapaian pembaca papan kekunci dan skrin](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) untuk dialog
-- Terapkan borang HTML untuk menerima data input
-- Buat data JSON dari data formulir dan kirimkan ke API
-- Kemas kini halaman papan pemuka dengan data baru
-
-Lihat [server API specifications](../../api/README.ms.md) untuk melihat API mana yang perlu anda panggil dan format JSON yang diharapkan.
-
-Inilah hasil contoh setelah menyelesaikan tugasan:
-
-![Tangkapan skrin yang menunjukkan contoh dialog "Tambahkan peralihan"](../images/dialog.png)
-
-## Rubrik
-
-| Kriteria | Contoh                                                                                        | Mencukupi                                                                                                                | Usaha Lagi                          |
-| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
-|          | Menambah transaksi dilaksanakan sepenuhnya mengikuti semua amalan terbaik yang dilihat dalam pelajaran. | Menambah urus niaga dilaksanakan, tetapi tidak mengikuti amalan terbaik yang dapat dilihat dalam pelajaran, atau hanya bekerja sebahagian. | Menambah urus niaga tidak berfungsi sama sekali. |
diff --git a/7-bank-project/4-state-management/translations/assignment.nl.md b/7-bank-project/4-state-management/translations/assignment.nl.md
deleted file mode 100644
index 3a3a316e..00000000
--- a/7-bank-project/4-state-management/translations/assignment.nl.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# Implementeer het dialoogvenster "Transactie toevoegen"
-
-## Instructies
-
-Onze bank-app mist nog één belangrijk kenmerk: de mogelijkheid om nieuwe transacties in te voeren.
-Gebruik alles wat u in de vier voorgaande lessen heeft geleerd en implementeer een dialoogvenster "Transactie toevoegen":
-
-- Voeg een knop "Transactie toevoegen" toe op de dashboardpagina
-- Maak een nieuwe pagina met een HTML-sjabloon of gebruik JavaScript om de HTML-dialoog weer te geven/te verbergen zonder de dashboardpagina te verlaten (u kunt [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) eigenschap daarvoor gebruiken, of CSS-class)
-- Zorg ervoor dat u [toetsenbord en schermlezer toegankelijkheid](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) afhandelt voor het dialoogvenster
-- Implementeer een HTML-formulier om invoergegevens te ontvangen
-- Maak JSON-gegevens van de formuliergegevens en stuur deze naar de API
-- Werk de dashboardpagina bij met de nieuwe gegevens
-
-Kijk naar de [server API-specificaties](../api/README.md) om te zien welke API u moet aanroepen en wat het verwachte JSON-formaat is.
-
-Hier is een voorbeeldresultaat na het voltooien van de opdracht:
-
-![Schermafbeelding met een voorbeeld "Transactie toevoegen" dialoogvenster](../images/dialog.png)
-
-## Rubriek
-
-| Criteria | Voorbeeldig                                                                                        | Voldoende                                                                                                                | Moet worden verbeterd                           |
-| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
-|          | Het toevoegen van een transactie wordt volledig geïmplementeerd volgens alle best practices uit de lessen. | Het toevoegen van een transactie is geïmplementeerd, maar volgt niet de best practices uit de lessen, of werkt slechts gedeeltelijk. | Het toevoegen van een transactie werkt helemaal niet. |
diff --git a/7-bank-project/4-state-management/translations/assignment.zh-tw.md b/7-bank-project/4-state-management/translations/assignment.zh-tw.md
deleted file mode 100644
index 372d5eb1..00000000
--- a/7-bank-project/4-state-management/translations/assignment.zh-tw.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# 編寫"加入交易明細"視窗
-
-## 簡介
-
-我們的銀行應用程式還缺乏一項重要的功能：輸入新的交易明細。
-使用你在這四堂課中學到的知識，編寫"加入交易明細"視窗：
-
-- 在儀表板頁面新增"加入交易明細"按鈕
-- 加入新的 HTML 模板建立新頁面，或是在同一頁面中使用 JavaScript 顯示 HTML 窗格(可以使用 [`hidden`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/hidden) 屬性，或是 CSS classes)
-- 確保視窗能滿足[鍵盤與螢幕報讀器的相容性](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/)
-- 編寫 HTML 表單來接收輸入資料
-- 建立 JSON 表單資料並傳送到 API 上
-- 使用新資料更新到儀表板頁面上
-
-看看[伺服器 API 規格](../../api/README.zh-tw.md)來查詢你需要呼叫的 API 和所需的 JSON 格式。
-
-這邊有完成作業後的成果：
-
-!["加入交易明細"視窗的例子截圖](../images/dialog.png)
-
-## 學習評量
-
-| 作業內容 | 優良                                 | 普通                                               | 待改進                 |
-| -------- | ------------------------------------ | -------------------------------------------------- | ---------------------- |
-|          | 利用課程內容完美的製作出交易明細功能 | 有製作出交易明細功能，但有缺少部分要點且功能不完全 | 新的交易明細功能不正常 |
diff --git a/7-bank-project/solution/translations/README.es.md b/7-bank-project/solution/translations/README.es.md
deleted file mode 100644
index 7cf90396..00000000
--- a/7-bank-project/solution/translations/README.es.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Aplicación bancaria
-
-> Solución de ejemplo para el proyecto de la aplicación bancaria, construida con HTML5 vanilla, CSS y JavaScript (sin entorno de trabajos ni bibliotecas).
-
-## Ejecutando la aplicación
-
-Primero asegúrese de tener el [servidor API](../api/README.md) en ejecución.
-
-Se puede usar cualquier servidor web para ejecutar la aplicación, pero dado que debe tener [Node.js](https://nodejs.org) instalado de todos modos para ejecutar la API, puede:
-
-1. Git clone este repositorio.
-2. Abra una terminal, luego ejecute `npx lite-server solution`. Iniciará un servidor web de desarrollo en el puerto `3000`
-3. Abra `http://localhost: 3000` en un navegador para ejecutar la aplicación.
diff --git a/7-bank-project/solution/translations/README.fr.md b/7-bank-project/solution/translations/README.fr.md
deleted file mode 100644
index 5158fe91..00000000
--- a/7-bank-project/solution/translations/README.fr.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Application bancaire
-
-> Exemple de solution pour le projet d'application bancaire, développé avec du HTML5 vanilla, du CSS et du JavaScript (pas de frameworks ni de bibliothèques utilisés).
-
-## Exécuter l'application
-
-Assurez-vous d'abord que le [serveur API](../../api/translations/README.fr.md) est en cours d'exécution.
-
-N'importe quel serveur Web peut être utilisé pour exécuter l'application, mais comme [Node.js](https://nodejs.org/fr) doit de toute façon être installé pour exécuter l'API, vous pouvez :
-
-1. Git cloner ce dépôt.
-2. Ouvrir un terminal, puis exécutez `npx lite-server solution`. Celà démarrera un serveur Web de développement sur le port `3000`
-3. Ouvrir `http://localhost:3000` dans un navigateur pour exécuter l'application.
\ No newline at end of file
diff --git a/7-bank-project/solution/translations/README.hi.md b/7-bank-project/solution/translations/README.hi.md
deleted file mode 100644
index ed614eb4..00000000
--- a/7-bank-project/solution/translations/README.hi.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# बैंक एप
-
-> बैंक ऐप परियोजना के लिए उदाहरण समाधान, वेनिला एचटीएमएल 5, सीएसएस और जावास्क्रिप्ट के साथ बनाया गया (कोई फ्रेमवर्क या लाइब्रेरी का उपयोग नहीं किया गया) है.
-
-## ऐप चल रहा हैं
-
-First make sure you have the [API server](../api/README.md) running पहले सुनिश्चित करें कि आपके पास [एपीआई सर्वर](../../api/translations/README.hi.md) चल रहा है.
-
-एप्लिकेशन को चलाने के लिए किसी भी वेब सर्वर का उपयोग किया जा सकता है, लेकिन चूंकि आपके पास एपीआई चलाने के लिए वैसे भी [नोडजेयस](https://nodejs.org) स्थापित होना चाहिए, आप कर सकते हैं:
-
-1. ये रेपो गिट क्लोन.
-2. एक टर्मिनल खोलें, फिर `npx lite-server solution` चलाएँ। यह पोर्ट `3000` पर एक विकास वेब सर्वर शुरू करेगा
-3. एप्लिकेशन चलाने के लिए ब्राउज़र में `http://localhost:3000` खोलें.
diff --git a/7-bank-project/solution/translations/README.it.md b/7-bank-project/solution/translations/README.it.md
deleted file mode 100644
index ad75f742..00000000
--- a/7-bank-project/solution/translations/README.it.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# App Bancaria
-
-> Soluzione di esempio per il progetto app bancaria, costruito con semplice HTML5, CSS e JavaScript (non è stata usato alcun framework o libreria).
-
-## Eseguire l'app
-
-Per prima cosa assicurarsi di avere in esecuzione il [server API](../../api/translations/README.it.md).
-
-Può essere usato un qualsiasi server web per eseguire l'app, ma visto che si dovrebbe avere installato comunque [Node.js](https://nodejs.org) per eseguire l'API, è possibile:
-
-1. Utilizzare il comando `git clone` con questo repository.
-2. Aprire un terminale, poi eseguire `npx lite-server solution`. Verrà fatto partire un server web di sviluppo sulla porta `3000`
-3. Aprire `http://localhost:3000` in un browser per eseguire l'app.
diff --git a/7-bank-project/solution/translations/README.ja.md b/7-bank-project/solution/translations/README.ja.md
deleted file mode 100644
index 87970d20..00000000
--- a/7-bank-project/solution/translations/README.ja.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# 銀行アプリ
-
-> バニラ HTML5、CSS、JavaScript で構築された銀行アプリプロジェクトのソリューション例 (フレームワークやライブラリは使用していません)。
-
-## アプリの実行
-
-まず、[API サーバー](../../api/translations/README.ja.md)が起動していることを確認します。
-
-アプリの実行にはどの Web サーバーを使用しても構いませんが、API を実行するためには [Node.js](https://nodejs.org/ja) がインストールされている必要があるので、以下のようにします。
-
-1. このレポを Git でクローンします
-2. ターミナルを開き、`npx lite-server solution` を実行します。これで、`3000` ポートで開発用ウェブサーバが起動します
-3. ブラウザで `http://localhost:3000` を開いてアプリを実行します
diff --git a/7-bank-project/solution/translations/README.ko.md b/7-bank-project/solution/translations/README.ko.md
deleted file mode 100644
index b8dd6390..00000000
--- a/7-bank-project/solution/translations/README.ko.md
+++ /dev/null
@@ -1,15 +0,0 @@
-# 은행 앱
-
-> 은행 앱 프로젝트의 예시 답안입니다. 바닐라 HTML5, CSS 그리고 JavaScript를 이용해 구현하였습니다(어떠한 프레임워크나 라이브러리도 사용되지 않았습니다).
-
-## 앱을 실행하기
-
-먼저 [API server](../api/README.md)가 동작하고 있는지 확인해주세요.
-
-Any web server can be used to run the app, but since you should have [Node.js](https://nodejs.org) installed anyway to run the API, you can:
-
-어느 웹서버나 이 앱을 사용할 수 있으나, 아직까지는 이 API를 실행하기 위해서는 [Node.js](https://nodejs.org)를 설치해야 합니다. 아래의 방법으로 실행하세요:
-
-1. 이 저장소를 Git clone 합니다.
-2. 터미널을 열고, `npx lite-server solution`을 입력해 실행합니다. 이 명령은 `3000`번 포트에 개발 웹 서버를 시작하게 합니다.
-3. 브라우저에서 `http://localhost:3000` 입력해 앱을 실행합니다.
\ No newline at end of file
diff --git a/7-bank-project/solution/translations/README.ml.md b/7-bank-project/solution/translations/README.ml.md
deleted file mode 100644
index b0a62de5..00000000
--- a/7-bank-project/solution/translations/README.ml.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# ബാങ്ക് ആപ്പ്
-
-> വാനില HTML5, CSS, JavaScript എന്നിവ ഉപയോഗിച്ച് നിർമ്മിച്ച ബാങ്ക് ആപ്പ് പ്രോജക്റ്റിനുള്ള ഉദാഹരണ പരിഹാരം (ചട്ടക്കൂടുകളോ ലൈബ്രറികളോ ഉപയോഗിച്ചിട്ടില്ല).
-
-## ആപ്പ് പ്രവർത്തിപ്പിക്കുന്നു
-
-ആദ്യം നിങ്ങൾക്ക് [API സെർവർ](../api/README.md) പ്രവർത്തിക്കുന്നുണ്ടെന്ന് ഉറപ്പാക്കുക.
-
-ആപ്പ് പ്രവർത്തിപ്പിക്കാൻ ഏത് വെബ് സെർവറും ഉപയോഗിക്കാം, എന്നാൽ API പ്രവർത്തിപ്പിക്കുന്നതിന് നിങ്ങൾക്ക് [Node.js](https://nodejs.org) ഇൻസ്റ്റാൾ ചെയ്തിരിക്കേണ്ടതിനാൽ, നിങ്ങൾക്ക് ഇവ ചെയ്യാനാകും:
-
-1. ഈ റിപ്പോ Git ക്ലോൺ ചെയ്യുക.
-2. ഒരു ടെർമിനൽ തുറക്കുക, തുടർന്ന് `npx lite-server solution` റൺ ചെയ്യുക. അത് `3000` പോർട്ടിൽ ഒരു വികസന വെബ് സെർവർ ആരംഭിക്കും
-3. ആപ്പ് പ്രവർത്തിപ്പിക്കുന്നതിന് ഒരു ബ്രൗസറിൽ `http://localhost:3000` തുറക്കുക.
diff --git a/7-bank-project/solution/translations/README.ms.md b/7-bank-project/solution/translations/README.ms.md
deleted file mode 100644
index b802cdb2..00000000
--- a/7-bank-project/solution/translations/README.ms.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# Aplikasi bank
-
-> Contoh penyelesaian untuk projek aplikasi bank, dibangun dengan vanilla HTML5, CSS dan JavaScript (tidak ada kerangka atau perpustakaan yang digunakan).
-
-## Menjalankan aplikasi
-
-Mula-mula pastikan anda menjalankan [pelayan API](../../api/translations/README.ms.md).
-
-Mana-mana pelayan web boleh digunakan untuk menjalankan aplikasi, tetapi kerana anda seharusnya memasang [Node.js](https://nodejs.org) untuk menjalankan API, anda boleh:
-
-1. Git klon repo ini.
-2. Buka terminal, kemudian jalankan `npx lite-server solution`. Ia akan memulakan pelayan web pengembangan di port `3000`
-3. Buka `http://localhost: 3000` di penyemak imbas untuk menjalankan aplikasi.
\ No newline at end of file
diff --git a/7-bank-project/translations/README.es.md b/7-bank-project/translations/README.es.md
deleted file mode 100644
index 1024adc3..00000000
--- a/7-bank-project/translations/README.es.md
+++ /dev/null
@@ -1,17 +0,0 @@
-# :dollar: Construir un banco
-
-En este proyecto, aprenderá a construir un banco ficticio. Estas lecciones incluyen instrucciones sobre cómo diseñar un sitio web y proporcionar rutas, crear formularios, administrar el estado y obtener datos de una API desde la cual puede obtener los datos del banco.
-
-| ![Screen1](../images/screen1.png) | ![Screen2](../images/screen2.png) |
-|-----------------------------------|-----------------------------------|
-
-## Lecciones
-
-1. [Rutas y plantillas HTML en una aplicación web](../1-template-route/translations/README.es.md)
-2. [Cree un formulario de inicio de sesión y registro](../2-forms/translations/README.es.md)
-3. [Métodos de obtención y uso de datos](../3-data/translations/README.es.md)
-4. [Conceptos de gestión de estado](../4-state-management/translations/README.es.md)
-
-### Credits
-
-Estas lecciones fueron escritas con :hearts: por [Yohan Lasorsa](https://twitter.com/sinedied)
diff --git a/7-bank-project/translations/README.fr.md b/7-bank-project/translations/README.fr.md
deleted file mode 100644
index 08d95304..00000000
--- a/7-bank-project/translations/README.fr.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# :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 routes, 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 routages 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/7-bank-project/translations/README.hi.md b/7-bank-project/translations/README.hi.md
deleted file mode 100644
index 711d4688..00000000
--- a/7-bank-project/translations/README.hi.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# : डॉलर: एक बैंक बनाएँ
-
-इस परियोजना में, आप सीखेंगे कि एक काल्पनिक बैंक कैसे बनाया जाए। इन पाठों में एक वेब ऐप को लेआउट करने और मार्ग प्रदान करने, प्रपत्र बनाने, राज्य का प्रबंधन करने और एपीआई से डेटा प्राप्त करने के निर्देश शामिल हैं, जिनसे आप बैंक का डेटा प्राप्त कर सकते हैं।.
-
-| ![स्क्रीन १](../images/screen1.png) | ![स्क्रीन २](../images/screen2.png) |
-| ----------------------------------- | ----------------------------------- |
-
-## पाठ
-
-1. [HTML टेम्पलेट्स और वेब ऐप में रूट](../1-template-route/README.hi.md)
-2. [एक लॉगिन और पंजीकरण फॉर्म बनाएँ](../2-forms/README.hi.md)
-3. [डेटा लाने और उपयोग करने के तरीके](../3-data/README.hi.md)
-4. [राज्य प्रबंधन की अवधारणाएँ](../4-state-management/README.hi.md)
-
-### आभार सूची
-
-[Yohan Lasorsa](https://twitter.com/sinedied) द्वारा इन पाठों को :hearts: के साथ लिखा गया था.
-
-यदि आप सीखना चाहते हैं कि इन पाठों में उपयोग किए जाने वाले [सर्वर एपीआई](../api/translations/README.hi.md) का निर्माण कैसे किया जाए, तो आप [वीडियो की यह श्रृंखला](https://aka.ms/NodeBeginner) का अनुसरण कर सकते हैं (विशेष रूप से वीडियो १७ से २१).
-
-आप [इस इंटरएक्टिव लर्न ट्यूटोरियल](https://aka.ms/learn/express-api) पर भी नज़र डाल सकते हैं.
diff --git a/7-bank-project/translations/README.it.md b/7-bank-project/translations/README.it.md
deleted file mode 100644
index 1c8aae8d..00000000
--- a/7-bank-project/translations/README.it.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# :dollar: Costruire una Banca
-
-In questo progetto si imparerà come costruire una banca immaginaria. Queste lezioni includono istruzioni su come disporre un'app web e fornire rotte, creare form, gestire lo stato e recuperare  dati da un'API da cui è possibile ottenere i dati della banca.
-
-| ![Videata1](../images/screen1.png) | ![Videata2](../images/screen2.png) |
-|--------------------------------|--------------------------------|
-
-## Lezioni
-
-1. [Modelli HTML e Rotte in un'app Web](../1-template-route/translations/README.it.md)
-2. [Creare un Form di Accesso e Registrazione](../2-forms/translations/README.it.md)
-3. [Metodi di Recupero e Utilizzo Dati](../3-data/translations/README.it.md)
-4. [Concetti di Gestione dello Stato](../4-state-management/translations/README.it.md)
-
-### Crediti
-
-Queste lezioni sono state scritte con il :hearts: da [Yohan Lasorsa](https://twitter.com/sinedied).
-
-Se interessati a imparare come costruire l' [API del server](../../api/tranlations/README.it.md) utilizzata in queste lezioni, è possibile seguire [questa serie di video](https://aka.ms/NodeBeginner) (in particolare i video da 17 a 21).
-
-Si può anche dare un'occhiata a [questo tutorial interattivo di apprendimento](https://aka.ms/learn/express-api).
\ No newline at end of file
diff --git a/7-bank-project/translations/README.ja.md b/7-bank-project/translations/README.ja.md
deleted file mode 100644
index 2df873f7..00000000
--- a/7-bank-project/translations/README.ja.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# :dollar: 銀行を作る
-
-このプロジェクトでは、架空の銀行を構築する方法を学びます。これらのレッスンでは、Web アプリのレイアウト方法やルートの提供、フォームの構築、状態の管理、銀行のデータを API からフェッチする方法などを説明します。
-
-| ![Screen1](../images/screen1.png) | ![Screen2](../images/screen2.png) |
-|--------------------------------|--------------------------------|
-
-## レッスン
-
-1. [Web アプリの HTML テンプレートとルート](../1-template-route/translations/README.ja.md)
-2. [ログインと登録フォームの構築](../2-forms/translations/README.ja.md)
-3. [データの取得と利用方法](../3-data/translations/README.ja.md)
-4. [状態管理の概念](../4-state-management/translations/README.ja.md)
-
-### クレジット
-
-These lessons were written with :hearts: by [Yohan Lasorsa](https://twitter.com/sinedied).
-
-これらのレッスンで使用した [server API](../api/translations/README.ja) の構築方法を学びたい方は、[このシリーズの動画](https://aka.ms/NodeBeginner) をご覧ください (特に動画17～21)。
-
-また、[このインタラクティブな学習チュートリアル](https://aka.ms/learn/express-api) もご覧ください。
\ No newline at end of file
diff --git a/7-bank-project/translations/README.ko.md b/7-bank-project/translations/README.ko.md
deleted file mode 100644
index 19f885eb..00000000
--- a/7-bank-project/translations/README.ko.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# :dollar: 은행 만들기
-
-이 프로젝트에서는, 가상의 은행을 만드는 방법을 배웁니다. 이 강의에는 웹 앱을 레이아웃과 라우트를 제공하고, 폼을 작성하며 상태를 관리하고, 은행 데이터 API에서 데이터를 가져오는 방법에 대한 지침이 포함되어 있습니다.
-
-| ![Screen1](../images/screen1.png) | ![Screen2](../images/screen2.png) |
-|-----------------------------------|-----------------------------------|
-
-## 강의
-
-1. [웹 앱에서 HTML 템플릿과 라우트](../1-template-route/translations/README.ko.md)
-2. [로그인과 가입 폼 제작](../2-forms/translations/README.ko.md)
-3. [데이터를 가져오고 사용하는 방식](../3-data/translations/README.ko.md)
-4. [상태 관리의 개념](../4-state-management/translations/README.ko.md)
-
-### 크레딧
-
-강의를 제작한 분 : :hearts: by [Yohan Lasorsa](https://twitter.com/sinedied)
-
-강의에 사용된 서버 API 만드는 것이 궁금하시면 [YouTube 영상](https://aka.ms/NodeBeginner)을 참고하세요. (17번 ~ 21번 영상 주목)
-
-Node.js와 Express로 웹 API를 만드는 참고 자료는 [여기](https://aka.ms/learn/express-api).
diff --git a/7-bank-project/translations/README.ml.md b/7-bank-project/translations/README.ml.md
deleted file mode 100644
index 164b16a9..00000000
--- a/7-bank-project/translations/README.ml.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# :dollar: ഒരു ബാങ്ക് നിർമ്മിക്കുക
-
-ഈ പ്രോജക്റ്റിൽ, ഒരു സാങ്കൽപ്പിക ബാങ്ക് എങ്ങനെ നിർമ്മിക്കാമെന്ന് നിങ്ങൾ പഠിക്കും. ഈ പാഠങ്ങളിൽ ഒരു വെബ് ആപ്പ് എങ്ങനെ ലേഔട്ട് ചെയ്യാം, റൂട്ടുകൾ നൽകാം, ഫോമുകൾ നിർമ്മിക്കാം, സ്റ്റേറ്റ് മാനേജുചെയ്യാം, നിങ്ങൾക്ക് ബാങ്കിന്റെ ഡാറ്റ ലഭ്യമാക്കാൻ കഴിയുന്ന ഒരു API-ൽ നിന്ന് ഡാറ്റ നേടുന്നത് എങ്ങനെ എന്നതിനുള്ള നിർദ്ദേശങ്ങൾ ഉൾപ്പെടുന്നു.
-
-| ![Screen1](images/screen1.png) | ![Screen2](images/screen2.png) |
-|--------------------------------|--------------------------------|
-
-## പാഠങ്ങൾ
-
-1. [ഒരു വെബ് ആപ്പിലെ HTML ടെംപ്ലേറ്റുകളും റൂട്ടുകളും](1-template-route/README.md)
-2. [ഒരു ലോഗിൻ, രജിസ്ട്രേഷൻ ഫോം നിർമ്മിക്കുക](2-forms/README.md)
-3. [ഡാറ്റ ലഭ്യമാക്കുന്നതിനും ഉപയോഗിക്കുന്നതിനുമുള്ള രീതികൾ](3-data/README.md)
-4. [സംസ്ഥാന മാനേജ്മെന്റിന്റെ ആശയങ്ങൾ](4-state-management/README.md)
-
-### ക്രെഡിറ്റുകൾ
-
-ഈ പാഠങ്ങൾ എഴുതിയത് :hearts: [Yohan Lasorsa](https://twitter.com/sinedied).
-
-ഈ പാഠങ്ങളിൽ ഉപയോഗിച്ചിരിക്കുന്ന [സെർവർ API](/7-bank-project/api/README.md) എങ്ങനെ നിർമ്മിക്കാമെന്ന് അറിയാൻ നിങ്ങൾക്ക് താൽപ്പര്യമുണ്ടെങ്കിൽ, നിങ്ങൾക്ക് [ഈ വീഡിയോ പരമ്പര](https://aka.ms/NodeBeginner) (പ്രത്യേകിച്ച് 17 മുതൽ 21 വരെയുള്ള വീഡിയോകൾ).
-
-നിങ്ങൾക്ക് [ഈ ഇന്ററാക്ടീവ് ലേൺ ട്യൂട്ടോറിയൽ](https://aka.ms/learn/express-api) നോക്കാവുന്നതാണ്.
diff --git a/7-bank-project/translations/README.ms.md b/7-bank-project/translations/README.ms.md
deleted file mode 100644
index f8fb7e83..00000000
--- a/7-bank-project/translations/README.ms.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# :dollar: Bina Bank
-
-Dalam projek ini, anda akan belajar membina bank fiksyen. Pelajaran ini merangkumi petunjuk bagaimana mengatur aplikasi web dan menyediakan laluan, membina borang, mengurus keadaan, dan mengambil data dari API dari mana anda dapat mengambil data bank.
-
-| ![Screen1](../images/screen1.png) | ![Screen2](../images/screen2.png) |
-|--------------------------------|--------------------------------|
-
-## Pembelajaran
-
-1. [Templat dan Laluan HTML dalam Aplikasi Web](../1-template-route/README.md)
-2. [Bina Log Masuk dan Borang Pendaftaran](../2-forms/README.md)
-3. [Kaedah Mengambil dan Menggunakan Data](../3-data/README.md)
-4. [Konsep Pengurusan Negeri](../4-state-management/README.md)
-
-### Kredit
-
-Pelajaran ini ditulis dengan :hearts: oleh [Yohan Lasorsa](https://twitter.com/sinedied).
-
-Sekiranya anda berminat untuk mempelajari cara membina [server API](./api/README) yang digunakan dalam pelajaran ini, anda boleh mengikuti [rangkaian video ini](https://aka.ms/NodeBeginner) (khususnya video 17 hingga 21).
-
-Anda juga boleh melihat [tutorial Belajar interaktif ini](https://aka.ms/learn/express-api). 
diff --git a/7-bank-project/translations/README.nl.md b/7-bank-project/translations/README.nl.md
deleted file mode 100644
index 024091e7..00000000
--- a/7-bank-project/translations/README.nl.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# :dollar: Bouw een bank
-
-In dit project leert u hoe u een fictieve bank bouwt. Deze lessen bevatten instructies voor het opmaken van een web-app en het aanbieden van routes, het bouwen van formulieren, het beheren van de staat en het ophalen van gegevens uit een API waaruit u de gegevens van de bank kunt ophalen.
-
-| ![Scherm1](../images/screen1.png) | ![Scherm2](../images/screen2.png) |
-|--------------------------------|--------------------------------|
-
-## Lessen
-
-1. [HTML-sjablonen en routes in een webapp](../1-template-route/translations/README.nl.md)
-2. [Bouw een aanmeldings- en registratieformulier](../2-forms/translations/README.nl.md)
-3. [Methoden voor het ophalen en gebruiken van gegevens](../3-data/translations/README.nl.md)
-4. [Concepten van staatsbeheer](../4-state-management/translations/README.nl.md)
-
-### Credits
-
-Deze lessen zijn geschreven met :hearts: door [Yohan Lasorsa](https://twitter.com/sinedied).
-
-Als u geïnteresseerd bent om te leren hoe u de [server API](../api/translations/README.nl.md) bouwt die in deze lessen wordt gebruikt, kunt u [deze reeks video's](https://aka.ms/NodeBeginner) volgen (in het bijzonder video's 17 t/m 21).
-
-U kunt ook een kijkje nemen op [deze interactieve Leer-tutorial](https://aka.ms/learn/express-api). 
\ No newline at end of file
diff --git a/7-bank-project/translations/README.pt-BR.md b/7-bank-project/translations/README.pt-BR.md
deleted file mode 100644
index 7a5096fa..00000000
--- a/7-bank-project/translations/README.pt-BR.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# :dollar: Construindo um banco
-
-Neste projeto, você aprenderá a construir um banco fictício. Essas lições incluem instruções sobre como fazer o layout de um aplicativo Web, fornecer rotas, criar formulários, gerenciar o estado e buscar dados de uma API da qual você buscará os dados do banco.
-
-| ![Screen1](../images/screen1.png) | ![Screen2](../images/screen2.png) |
-|--------------------------------|--------------------------------|
-
-## Lições
-
-1. [Templates HTML e Routes da aplicação Web](1-template-route/README.md)
-2. [Crie um formulário de login e registro](2-forms/README.md)
-3. [Métodos de busca e uso de dados](3-data/README.md)
-4. [Conceitos de Gestão do Estado](4-state-management/README.md)
-
-### Créditos
-
-Essas lições foram escritas com :hearts: por [Yohan Lasorsa](https://twitter.com/sinedied).
-
-Se você estiver interessado em aprender como construir uma [server API](/7-bank-project/api/README.md) usado nestas lições, você pode seguir [esta série de vídeos](https://aka.ms/NodeBeginner) (em particular os vídeos 17 à 21).
-
-Você também pode dar uma olhada [neste tutorial de aprendizagem interativa.](https://aka.ms/learn/express-api). 
diff --git a/7-bank-project/translations/README.ta.md b/7-bank-project/translations/README.ta.md
deleted file mode 100644
index 3fb4d0a5..00000000
--- a/7-bank-project/translations/README.ta.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# :dollar: வங்கி கட்டவும்
-
-இந்த திட்டத்தில், ஒரு கற்பனை வங்கியை எவ்வாறு உருவாக்குவது என்பதை நீங்கள் கற்றுக்கொள்வீர்கள். இந்த பாடங்களில் ஒரு வலை பயன்பாட்டை எவ்வாறு வடிவமைப்பது மற்றும் வழிகளை வழங்குவது, படிவங்களை உருவாக்குவது, மாநிலத்தை நிர்வகிப்பது மற்றும் வங்கியின் தரவை நீங்கள் பெறக்கூடிய ஏபிஐ யிலிருந்து தரவைப் பெறுதல் ஆகியவை அடங்கும்.
-
-| ![திரை1](../images/screen1.png) | ![திரை2](../images/screen2.png) |
-|--------------------------------|--------------------------------|
-
-## பாடங்கள்
-
-1. [ஹெச்டிஎம்எல் வார்ப்புருக்கள் மற்றும் வலை பயன்பாட்டில் வழிகள்](../1-template-route/README.md)
-2. [உள்நுழைவு மற்றும் பதிவு படிவத்தை உருவாக்கவும்](../2-forms/README.md)
-3. [தரவுகளை ப் பெறுதல் மற்றும் பயன்படுத்துதல் முறைகள்](../3-data/README.md)
-4. [நிலை மேலாண்மை பற்றிய கருத்துக்கள்](../4-state-management/README.md)
-
-### கடன்கள்
-
-இந்த பாடங்களை ♥️ எழுதினார் [யோஹான் லசோர்சா](https://twitter.com/sinedied).
-
-இந்தப் பாடங்களில் பயன்படுத்தப்படும் [சர்வர் ஏபிஐ](../../7-bank-project/api/README.md) எவ்வாறு உருவாக்குவது என்பதைக் கற்றுக்கொள்ள நீங்கள் ஆர்வமாக இருந்தால், நீங்கள் [வீடியோக்களின் இந்த தொடர்](https://aka.ms/NodeBeginner) (குறிப்பாக வீடியோக்கள் 17 முதல் 21 வரை) பின்பற்றலாம்.
-
-
-நீங்கள் ஒரு பார்வை பார்க்கலாம் [இந்த ஊடாடும் கற்றல் பயிற்சி](https://aka.ms/learn/express-api). 
diff --git a/7-bank-project/translations/README.zh-cn.md b/7-bank-project/translations/README.zh-cn.md
deleted file mode 100644
index 888367b4..00000000
--- a/7-bank-project/translations/README.zh-cn.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# :dollar: 建立银行
-
-在这个项目中，你将学习如何建立一个虚构的银行。这些课程包括指导如何布局网络应用和提供路由，构建表单，管理状态，以及从一个 API 中获取银行的数据。
-
-| ![屏幕1](../images/screen1.png) | ![屏幕2](../images/screen2.png) |
-| ------------------------------- | ------------------------------- |
-
-## 课程
-
-1. [HTML 模版与网页路由](../1-template-route/translations/README.md)
-2. [建立登陆与注册表单](../2-forms/translations/README.md)
-3. [取得并使用资料](../3-data/translations/README.md)
-4. [状态管理的概念](../4-state-management/translations/README.md)
-
-### 贡献者
-
-这些课程是由 [Yohan Lasorsa](https://twitter.com/sinedied) 用满满的 ♥️ 來编写。
-
-如果你有兴趣建立本课程使用的 [服务器 API](../api/translations/README.zh-tw.md)，你可以遵循[这一系列的视频](https://aka.ms/NodeBeginner)，特别是视频 17 到 21。
-
-你也可以访问[这款互动式教学网站](https://aka.ms/learn/express-api)。
diff --git a/7-bank-project/translations/README.zh-tw.md b/7-bank-project/translations/README.zh-tw.md
deleted file mode 100644
index e3bf6f0b..00000000
--- a/7-bank-project/translations/README.zh-tw.md
+++ /dev/null
@@ -1,21 +0,0 @@
-# :dollar: 建立銀行
-
-在這個專案中，你會學習如何建立虛擬銀行。這些課程包含許多教程：設計網頁應用程式的格式、提供網頁路由、建立表單、管理狀態和利用 API 抓取銀行的資料。
-
-| ![畫面1](../images/screen1.png) | ![畫面2](../images/screen2.png) |
-|---------------------------------|-----------------------------------|
-
-## 課程
-
-1. [HTML 模板與網頁路由](../1-template-route/translations/README.md)
-2. [建立登入與註冊表單](../2-forms/translations/README.md)
-3. [取得並使用資料](../3-data/translations/README.md)
-4. [狀態控管的概念](../4-state-management/translations/README.md)
-
-### 參與人員
-
-這些課程是由 [Yohan Lasorsa](https://twitter.com/sinedied) 用滿滿的 ♥️ 來編寫。
-
-如果你有興趣建立本課程使用的[伺服器 API](../api/translations/README.zh-tw.md)，你可以遵循[這一系列的影片](https://aka.ms/NodeBeginner)，特別是影片 17 至 21。
-
-你也可以造訪[這款互動式教學網站](https://aka.ms/learn/express-api)。 
\ No newline at end of file
diff --git a/8-code-editor/1-using-a-code-editor/translations/README.fr.md b/8-code-editor/1-using-a-code-editor/translations/README.fr.md
deleted file mode 100644
index f076b466..00000000
--- a/8-code-editor/1-using-a-code-editor/translations/README.fr.md
+++ /dev/null
@@ -1,161 +0,0 @@
-# Utilisation d'un éditeur de code
-
-Cette leçon couvre les bases de l'utilisation de [VSCode.dev](https://vscode.dev), un éditeur de code pour le Web qui vous permet d'apporter des modifications à votre code et de contribuer à un projet sans installer quoi que ce soit sur votre ordinateur.
-
-<!----
-TODO : ajouter une image optionnelle
-![Utilisation d'un éditeur de code](../../sketchnotes/webdev101-vscode-dev.png)
-> Sketchnote par [Nom de l'auteur](https://example.com)
----->
-
-<!---
-## Quiz pré-lecture
-[Quiz pré-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/3)
----->
-
-## Objectifs d'apprentissage
-
-Dans cette leçon, vous apprendrez à :
-
-- Utiliser un éditeur de code dans un projet de code
-- Suivre les modifications avec le contrôle de version
-- Personnaliser l'éditeur pour le développement
-
-### Prérequis
-
-Avant de commencer, vous devez créer un compte sur [GitHub] (https://github.com). Rendez-vous sur [GtiHub](https://github.com/) et créez un compte si ce n'est pas déjà fait.
-
-### Introduction
-
-Un éditeur de code est un outil essentiel pour écrire des programmes et collaborer à des projets de codage existants. Une fois que vous aurez compris les bases d'un éditeur et que vous saurez comment utiliser ses fonctionnalités, vous serez en mesure de les appliquer lors de l'écriture de code.
-
-## Démarrer avec VSCode.dev
-
-[VSCode.dev] (https://vscode.dev) est un éditeur de code sur le Web. Vous n'avez pas besoin d'installer quoi que ce soit pour l'utiliser, comme pour ouvrir n'importe quel autre site Web. Pour commencer à utiliser l'éditeur, ouvrez le lien suivant : [https://vscode.dev](https://vscode.dev). Si vous n'êtes pas connecté à [GtiHub](https://github.com/), suivez les instructions pour vous connecter ou créez un nouveau compte, puis connectez-vous.
-
-Une fois le site chargé, il devrait ressembler à cette image :
-
-![VSCode.dev par défaut](../images/default-vscode-dev.png)
-
-Il y a trois sections principales, en commençant par l'extrême gauche et en allant vers la droite :
-
-1. La _barre d'activité_ qui comprend quelques icônes, comme la loupe 🔎, l'engrenage ⚙️ et quelques autres.
-1. La barre d'acivité élargie qui s'affiche par défaut dans l'_Explorateur_, appelée _barre latérale_.
-1. Et enfin, la zone de code à droite.
-
-Cliquez sur chacune des icônes pour afficher un menu différent. Une fois que vous avez terminé, cliquez sur l'_Explorateur_ pour revenir à votre point de départ.
-
-Lorsque vous commencez à créer du code ou à modifier du code existant, cela se passe dans la plus grande zone à droite. Vous utiliserez également cette zone pour visualiser le code existant, ce que vous ferez ensuite.
-
-
-## Ouvrir un répertoire GitHub
-
-La première chose dont vous aurez besoin est d'ouvrir un répertoire GitHub. Il existe plusieurs façons d'ouvrir un dépôt. Dans cette section, vous verrez deux façons différentes d'ouvrir un dépôt afin de pouvoir commencer à travailler sur les changements.
-
-### 1. Avec l'éditeur
-
-Utilisez l'éditeur lui-même pour ouvrir un répertoire distant. Si vous allez sur [VSCode.dev](https://vscode.dev), vous verrez un bouton _"Open Remote Repository"_ :
-
-![Ouvrir un répertoire distant](../images/open-remote-repository.png)
-
-Vous pouvez également utiliser la palette de commande. La palette de commande est une boîte de saisie dans laquelle vous pouvez taper n'importe quel mot faisant partie d'une commande ou d'une action pour trouver la bonne commande à exécuter. Utilisez le menu en haut à gauche, puis sélectionnez _Visualisation_, et ensuite choisissez _Palette de commande_, ou en utilisant le raccourci clavier suivant : Ctrl-Shift-P (sur MacOS, ce serait Command-Shift-P).
-
-![Menu Palette](../images/palette-menu.png)
-
-Une fois le menu ouvert, tapez _open remote repository_, puis sélectionnez la première option. Plusieurs dépôts dont vous faites partie ou que vous avez ouverts récemment s'afficheront. Vous pouvez également utiliser une URL GitHub complète pour en sélectionner un. Utilisez l'URL suivante et collez-la dans le champ :
-
-```
-https://github.com/microsoft/Web-Dev-For-Beginners
-```
-
-✅ Si vous réussissez, vous verrez tous les fichiers de ce répertoire chargés dans l'éditeur de texte.
-
-
-### 2. Utilisation de l'URL
-
-Vous pouvez également utiliser une URL directement pour charger un répertoire. Par exemple, l'URL complète du dépôt actuel est [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners), mais vous pouvez remplacer le domaine GitHub par `VSCode.dev/github` et charger le répertoire directement. L'URL résultante serait [https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners).
-
-
-## Modifier les fichiers
-Une fois que vous avez ouvert le répertoire sur le navigateur/ vscode.dev, la prochaine étape serait d'effectuer des mises à jour ou des modifications du projet.
-
-### 1. Créer un nouveau fichier
-
-Vous pouvez soit créer un fichier dans un dossier existant, soit le créer dans le répertoire/dossier racine. Pour créer un nouveau fichier, ouvrez un emplacement/répertoire dans lequel vous souhaitez que le fichier soit enregistré et sélectionnez l'icône _'Nouveau fichier ...'_ dans la barre d'activité _(gauche)_, donnez-lui un nom et appuyez sur Entrée.
-
-![Créer un nouveau fichier](../images/create-new-file.png)
-
-### 2. Modifier et enregistrer un fichier sur le répertoire
-
-L'utilisation de vscode.dev est utile lorsque vous souhaitez effectuer des mises à jour rapides de votre projet sans avoir à charger un logiciel localement.
-Pour mettre à jour votre code, cliquez sur l'icône "Explorer", également située dans la barre d'activités, pour afficher les fichiers et les dossiers du répertoire.
-Sélectionnez un fichier pour l'ouvrir dans la zone de code, effectuez vos modifications et enregistrez.
-
-![Modifier un fichier](../images/edit-a-file.png)
-
-Une fois que vous avez terminé la mise à jour de votre projet, sélectionnez l'icône _`source control`_ qui contient toutes les nouvelles modifications que vous avez apportées à votre répertoire.
-
-Pour visualiser les modifications que vous avez apportées à votre projet, sélectionnez le(s) fichier(s) dans le dossier `Changes` dans la barre d'activité étendue. Cela ouvrira un "arbre de travail" pour vous permettre de voir visuellement les modifications que vous avez apportées au fichier. Le rouge indique une ommission dans le projet, tandis que le vert signifie un ajout.
-
-![Voir les modifications](../images/working-tree.png)
-
-Si vous êtes satisfait des changements que vous avez effectués, survolez le dossier `Changes` et cliquez sur le bouton `+` pour mettre en scène les changements. La mise en scène signifie simplement que vous préparez vos modifications pour les livrer sur GitHub.
-
-Si toutefois vous n'êtes pas à l'aise avec certains changements et que vous voulez les abandonner, survolez le dossier "Changes" et sélectionnez l'icône "annuler".
-
-Ensuite, tapez un `message de validation` _(Une description de la modification que vous avez apportée au projet)_, cliquez sur l'icône `check` pour valider et pousser vos modifications.
-
-Une fois que vous avez terminé de travailler sur votre projet, sélectionnez l'icône de menu "hamburger" en haut à gauche pour revenir au répertoire sur github.com.
-
-![Stage & commit changes](../images/edit-vscode.dev.gif)
-
-## Utilisation des extensions
-L'installation d'extensions sur VSCode vous permet d'ajouter de nouvelles fonctionnalités et des options d'environnement de développement personnalisé sur votre éditeur afin d'améliorer votre flux de travail de développement. Ces extensions vous aident également à ajouter le support de plusieurs langages de programmation et sont souvent soit des extensions génériques, soit des extensions basées sur le langage.
-
-Pour parcourir la liste de toutes les extensions disponibles, cliquez sur l'icône _`Extensions`_ de la barre d'activités et commencez à taper le nom de l'extension dans le champ de texte intitulé _'Search Extensions in Marketplace'_.
-Vous verrez une liste d'extensions, chacune contenant **le nom de l'extension, le nom de l'éditeur, une description d'une phrase, le nombre de téléchargements** et **un classement par étoiles**.
-
-![Détails de l'extension](../images/extension-details.png)
-
-Vous pouvez également voir toutes les extensions précédemment installées en développant le dossier _`Installed`_, les extensions populaires utilisées par la plupart des développeurs dans le dossier _`Popular`_ et les extensions recommandées pour vous par les utilisateurs du même espace de travail ou basées sur vos fichiers récemment ouverts dans le dossier _`recommended`_.
-
-![Voir les extensions](../images/extensions.png)
-
-
-### 1. Installer des extensions
-Pour installer une extension, tapez le nom de l'extension dans le champ de recherche et cliquez dessus pour afficher des informations supplémentaires sur l'extension dans la zone de code une fois qu'elle apparaît dans la barre d'activités étendue.
-
-Vous pouvez soit cliquer sur le _bouton d'installation bleu_ de la barre d'activité élargie pour l'installer, soit utiliser le bouton d'installation qui apparaît dans la zone de code une fois que vous avez sélectionné l'extension pour charger des informations supplémentaires.
-
-![Installer les extensions](../images/install-extension.gif)
-
-### 2. Personnaliser les extensions
-Après avoir installé l'extension, vous pouvez avoir besoin de modifier son comportement et de la personnaliser en fonction de vos préférences. Pour ce faire, sélectionnez l'icône Extensions, et cette fois, votre extension apparaîtra dans le dossier _Installed_, cliquez sur l'icône _**Gear**_ et naviguez jusqu'à _Extensions Setting_.
-
-![Modifier les paramètres de l'extension](../images/extension-settings.png)
-
-### 3. Gérer les extensions
-Après avoir installé et utilisé votre extension, vscode.dev offre des options pour gérer votre extension en fonction de différents besoins. Par exemple, vous pouvez choisir de :
-- **Désactiver:** _(Vous désactivez temporairement une extension lorsque vous n'en avez plus besoin mais ne souhaitez pas la désinstaller complètement)_.
-
-    Sélectionnez l'extension installée dans la barre d'activités étendue > cliquez sur l'icône en forme d'engrenage > sélectionnez "Désactiver" ou "Désactiver (espace de travail)". **OU** Ouvrez l'extension dans la zone de code et cliquez sur le bouton bleu Désactiver.
-
-   
-- **Désinstaller:** Sélectionnez l'extension installée dans la barre d'activité étendue > cliquez sur l'icône en forme d'engrenage > sélectionnez "Désinstaller" **OU** Ouvrez l'extension dans la zone de code et cliquez sur le bouton bleu de désinstallation.
-
-
-
----
-
-## Travail à faire
-[Créer un site web de CV en utilisant vscode.dev](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md)
-
-
-<!----
-## Quiz post-conférence
-[Quiz post-lecture](https://ashy-river-0debb7803.1.azurestaticapps.net/quiz/4)
----->
-
-## Révision et étude personnelle
-
-En savoir plus sur [VSCode.dev] (https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) et sur certaines de ses autres fonctionnalités.
\ No newline at end of file
diff --git a/lesson-template/translations/README.es.md b/lesson-template/translations/README.es.md
deleted file mode 100644
index bd165e96..00000000
--- a/lesson-template/translations/README.es.md
+++ /dev/null
@@ -1,50 +0,0 @@
-# [Tema de la lección]
-
-![Video embebido aqui](video-url)
-
-## [Cuestionario previo](quiz-url)
-
-[Describe lo que aprenderemos]
-
-### Introducción
-
-Describe lo que se cubrirá en esta lección
-
-> Notas
-
-### Requisitos previos
-
-¿Qué cosas deberían cubrirse antes de esta lección?
-
-### Preparación
-
-Pasos previos para comenzar esta lección
-
----
-
-[Recorre el contenido en bloques]
-
-## [Tema 1]
-
-### Tareas:
-
-Trabajen juntos para mejorar progresivamente su base de código para construir el proyecto con código compartido:
-
-```html
-fragmento de código
-```
-
-✅ Comprobación de conocimientos: aproveche este momento para ampliar el conocimiento de los estudiantes con preguntas abiertas
-
-## [Tema 2]
-
-## [Tema 3]
-
-🚀 Desafío: Agregue un desafío para que los estudiantes trabajen de manera colaborativa en clase para mejorar el proyecto
-
-Opcional: Agregue una captura de pantalla de la interfaz de usuario al completar la lección  - Si corresponde
-## [Cuestionario posterior a la lección ](quiz-url)
-
-## Revisión y autoestudio
-
-**Deberes asignados [MM/YY]**: [Nombre de la asignación](assignment.es.md)
diff --git a/lesson-template/translations/README.fr.md b/lesson-template/translations/README.fr.md
deleted file mode 100644
index 88f44b1d..00000000
--- a/lesson-template/translations/README.fr.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# [Sujet de la Leçon]
-
-![Vidéo intégrée ici](url-de-la-vidéo)
-
-## [Quizz précédant la leçon](url-du-quizz)
-
-[Décrire ce que nous avons appris]
-
-### Introduction
-
-Décrire ce que nous avons couvert
-
-> Notes
-
-### Prérequis
-
-Quelles étapes avons-nous couvert avant cette leçon?
-
-### Préparation
-
-Etapes de préparation afin de commencer cette leçon
-
----
-
-[Parcourir le contenu en blocs]
-
-## [Sujet 1]
-
-### Tâche:
-
-Travailler ensemble afin d'améliorer progressivement votre base de code afin de construire le projet avec du code partagé:
-
-```html
-code blocks
-```
-
-✅ Vérification de connaissance - utiliser ce moment pour augmenter la connaissance des étudiants avec des questions ouvertes
-
-## [Sujet 2]
-
-## [Sujet 3]
-
-🚀 Challenge: Ajouter un challenge pour les étudiants afin de travailler en collaboration en classe pour améliorer le projet
-
-Optionnel: ajouter une capture d'écran de l'interface utilisateur de la leçon complétée, le cas échéant
-
-## [Quizz suivant la leçon](url-du-quizz)
-
-## Relecture et Etude personelle
-
-**Devoir du au [MM/AA]**: [Nom du Devoir](assignment.fr.md)
diff --git a/lesson-template/translations/README.hi.md b/lesson-template/translations/README.hi.md
deleted file mode 100644
index 9537d39e..00000000
--- a/lesson-template/translations/README.hi.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# [पाठ विषय]
-
-![यहां एक वीडियो एम्बेड करें](video-url)
-
-## [पूर्व-पठन क्विज़](quiz-url)
-
-[वर्णन करें कि हम क्या सीखेंगे]
-
-### परिचय
-
-वर्णन करें कि क्या कवर किया जाएगा
-
-> टिप्पणियाँ
-
-### शर्त
-
-इस पाठ से पहले क्या कदम उठाए जाने चाहिए थे?
-
-### तैयारी
-
-इस पाठ को शुरू करने के लिए प्रारंभिक कदम
-
----
-
-[ब्लॉकों में सामग्री के माध्यम से कदम]
-
-## [विषय १]
-
-### कार्य:
-
-साझा कोड के साथ प्रोजेक्ट बनाने के लिए अपने कोडबेस को उत्तरोत्तर बढ़ाने के लिए मिलकर काम करें:
-
-```html
-code blocks
-```
-
-✅ नॉलेज चेक - इस पल का उपयोग खुले प्रश्नों के साथ छात्रों के ज्ञान को फैलाने के लिए करें
-
-## [विषय २]
-
-## [विषय ३]
-
-🚀 चुनौती: परियोजना को बढ़ाने के लिए कक्षा में सहयोगी रूप से काम करने के लिए छात्रों के लिए एक चुनौती जोड़ें
-
-वैकल्पिक: उपयुक्त होने पर पूर्ण पाठ के UI का स्क्रीनशॉट जोड़ें
-
-## [पोस्ट-व्याख्यान प्रश्नोत्तरी](quiz-url)
-
-## समीक्षा और स्व अध्ययन
-
-**बाकी असाइनमेंट [MM/YY]**: [असाइनमेंटका नाम](assignment.hi.md)
diff --git a/lesson-template/translations/assignment.es.md b/lesson-template/translations/assignment.es.md
deleted file mode 100644
index 79c03006..00000000
--- a/lesson-template/translations/assignment.es.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# [Nombre de la asignación]
-
-## Instrucciones
-
-## Rúbrica
-
-| Criterio | Ejemplo   | Adecuado | Necesita mejorar  |
-| -------- | --------- | -------- | ----------------- |
-|          |           |          |                   |
diff --git a/lesson-template/translations/assignment.fr.md b/lesson-template/translations/assignment.fr.md
deleted file mode 100644
index 5e9e0997..00000000
--- a/lesson-template/translations/assignment.fr.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# [Nom de la Mission]
-
-## Instructions
-
-## Rubrique
-
-| Critère | Exemplaire | Adéquat | A Améliorer |
-| ------- | ---------- | ------- | ----------- |
-|         |            |         |             |
\ No newline at end of file
diff --git a/lesson-template/translations/assignment.hi.md b/lesson-template/translations/assignment.hi.md
deleted file mode 100644
index 2f7752d3..00000000
--- a/lesson-template/translations/assignment.hi.md
+++ /dev/null
@@ -1,9 +0,0 @@
-# [असाइनमेंटका नाम]
-
-## अनुदेश
-
-## शीर्ष
-
-| मानदंड | उदाहरणात्मक | पर्याप्त | सुधार की जरूरत |
-| ------ | ----------- | -------- | -------------- |
-|        |             |          |                |