# Construire un jeu de l'espace - Partie 5: scores et vies
# Construire un jeu de l'espace - Partie 5: scores et vies
## Quiz de pré-lecture
@ -17,7 +17,7 @@ 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é!
✅ 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
@ -25,14 +25,14 @@ Le concept d'avoir une vie dans un jeu n'est qu'un nombre. Dans le contexte d'un
## Ce qu'il faut construire
Ajoutons les éléments suivants à votre jeu:
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).
- **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 .
## É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:
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
@ -44,7 +44,7 @@ Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire
-| package.json
```
Vous démarrez votre projet dans le dossier `your_work` en tapant:
Vous démarrez votre projet dans le dossier `your_work` en tapant:
```bash
cd your-work
@ -55,13 +55,13 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
### 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:
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:
1. Ajoutez le `lifeImg` à la liste des éléments:
```javascript
let heroImg,
@ -73,7 +73,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
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:
3. **Étendre la fonction `updateGameObjects()`**. Étendre la fonction `updateGameObjects()` pour gérer les collisions avec les ennemis:
```javascript
enemies.forEach(enemy => {
@ -85,14 +85,14 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
```
4. **Ajouter `life` et `points`**.
1. **Initialiser les variables**. Sous `this.cooldown = 0` dans la classe `Hero` , définissez la vie et les 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:
1. **Dessinez les variables à l'écran**. Dessinez ces valeurs à l'écran:
```javascript
function drawLife() {
@ -126,7 +126,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
drawLife();
```
1. **Mettre en œuvre les règles du jeu**. Mettez en œuvre les règles du jeu suivantes:
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.
@ -143,7 +143,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
2. **Pour chaque laser qui touche un ennemi**, augmentez le score du jeu de 100 points.
Étendez la classe Hero pour faire cet ajout:
Étendez la classe Hero pour faire cet ajout:
```javascript
incrementPoints() {
@ -151,7 +151,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
}
```
Ajoutez ces fonctions à vos émetteurs d'événements de collision:
Ajoutez ces fonctions à vos émetteurs d'événements de collision:
```javascript
eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => {
@ -166,15 +166,15 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
});
```
✅ Faites une petite recherche pour découvrir d'autres jeux créés à l'aide de JavaScript/Canvas. Quels sont leurs points communs?
✅ 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é.
À 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?
Votre code est presque complet. Pouvez-vous envisager vos prochaines étapes?
## Quiz post-lecture
@ -182,7 +182,7 @@ Votre code est presque complet. Pouvez-vous envisager vos prochaines étapes ?
## 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?
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?
# Construire un jeu de l'espace Partie 6: Fin et redémarrage
# Construire un jeu de l'espace Partie 6: Fin et redémarrage
## Quiz de prélecture
[Quiz de prélecture](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/39?loc=fr)
Il existe différentes façons d'exprimer une "condition de fin" dans un jeu. C'est à vous, en tant que créateur du jeu, de dire pourquoi le jeu est terminé. Voici quelques raisons, si nous supposons que nous parlons du jeu spatial que vous avez construit jusqu'à présent:
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é.
- **`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
@ -20,14 +20,14 @@ Si les gens apprécient votre jeu, ils auront probablement envie d'y rejouer. Lo
## Ce qu'il faut construire
Vous allez ajouter ces règles à votre jeu:
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é.
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:
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
@ -40,7 +40,7 @@ Localisez les fichiers qui ont été créés pour vous dans le sous-répertoire
-| package.json
```
Vous démarrez votre projet dans le dossier `your_work` en tapant:
Vous démarrez votre projet dans le dossier `your_work` en tapant:
```bash
cd your-work
@ -49,11 +49,11 @@ 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;`
> 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:
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() {
@ -66,7 +66,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
}
```
1. **Ajouter de la logique aux gestionnaires de messages**. Modifiez le `eventEmitter` pour gérer ces conditions:
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 }) => {
@ -100,7 +100,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
});
```
1. **Ajouter de nouveaux types de messages**. Ajoutez ces messages à l'objet constantes:
1. **Ajouter de nouveaux types de messages**. Ajoutez ces messages à l'objet constants:
```javascript
GAME_END_LOSS: "GAME_END_LOSS",
@ -109,7 +109,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
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:
1. **Écouter la touche pressée `Enter`**. Modifiez l'eventListener de votre fenêtre pour écouter cette pression:
```javascript
else if(evt.key === "Enter") {
@ -117,17 +117,17 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
}
```
1. **Ajouter un message de redémarrage**. Ajoutez ce message à votre constante de messages :
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. **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()`:
1. Tout d'abord, créez une fonction `displayMessage()`:
```javascript
function displayMessage(message, color = "red") {
@ -138,7 +138,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
}
```
1. Créez une fonction `endGame()`:
1. Créez une fonction `endGame()`:
```javascript
function endGame(win) {
@ -165,7 +165,7 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
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()`:
1. Créez la fonction `resetGame()`:
```javascript
function resetGame() {
@ -202,13 +202,13 @@ Ce qui précède va démarrer un serveur HTTP sur l'adresse `http://localhost:50
}
```
👽 💥 🚀 Félicitations, capitaine! Ton jeu est terminé! Bien joué! 🚀 💥 👽
👽 💥 🚀 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.
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.
@ -70,21 +70,21 @@ While we have purposefully avoided introducing JavaScript frameworks so as to co
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | More Advanced Game Development with JavaScript | Learn about Inheritance using both Classes and Composition and the Pub/Sub pattern, in preparation for building a game | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Drawing to canvas | Learn about the Canvas API, used to draw elements to a screen | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Moving elements around the screen | Discover how elements can gain motion using the cartesian coordinates and the Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Ending and restarting the game | Learn about ending and restarting the game, including cleaning up assets and resetting variable values | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML Templates and Routes in a Web App | Learn how to create the scaffold of a multipage website's architecture using routing and HTML templates | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Build a Login and Registration Form | Learn about building forms and handing validation routines | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Methods of Fetching and Using Data | How data flows in and out of your app, how to fetch it, store it, and dispose of it | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Concepts of State Management | Learn how your app retains state and how to manage it programmatically | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
| ০৭ | জেএস বেসিক | অ্যারে এবং লুপ | জাভাস্ক্রিপ্টে অ্যারে এবং লুপ ব্যবহার করে ডেটা নিয়ে কাজ করুন | [অ্যারে এবং লুপ](/2-js-basics/4-arrays-loops/README.md) | জেসমিন |
| ০৮ | [টেরারিয়াম](/3-terrarium/solution/README.md) | অনুশীলনে এইচটিএমএল | একটি লেআউট তৈরিতে ফোকাস করে একটি অনলাইন টেরারিয়াম তৈরি করতে এইছটিএমেল তৈরি করুন | [এইছটিএমেল এর ভূমিকা](/3-terrarium/1-intro-to-html/README.md) | জেন |
| ০৯ | [টেরারিয়াম](/3-terrarium/solution/README.md) | অনুশীলনে সিএসএস | অনলাইন টেরারিয়াম স্টাইল করার জন্য সিএসেস তৈরি করুন, পৃষ্ঠাটিকে প্রতিক্রিয়াশীল করা সহ সিএসেস এর মৌলিক বিষয়গুলিতে ফোকাস করুন | [সিএসেস এর ভূমিকা](/3-terrarium/2-intro-to-css/README.md) | জেন |
| ১০ | [টেরারিয়াম](/3-terrarium/solution) | জাভাস্ক্রিপ্ট বন্ধ, ডম ম্যানিপুলেশন | ক্লোজার এবং ডম ম্যানিপুলেশনের উপর ফোকাস করে টেরারিয়ামকে ড্র্যাগ/ড্রপ ইন্টারফেস হিসাবে কাজ করতে জাভাস্ক্রিপ্ট তৈরি করুন | [জাভাস্ক্রিপ্ট বন্ধ, ডম ম্যানিপুলেশন](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | জেন |
| ১১ | [টাইপিং খেলা](/4-typing-game/solution) | একটি টাইপিং গেম তৈরি করুন | আপনার জাভাস্ক্রিপ্ট অ্যাপের লজিক চালাতে কীবোর্ড ইভেন্টগুলি কীভাবে ব্যবহার করবেন তা শিখুন | [ইভেন্ট-চালিত প্রোগ্রামিং](/4-typing-game/typing-game/README.md) | ক্রিসটফার |
| ১২ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution) | ব্রাউজার নিয়ে কাজ করা | ব্রাউজারগুলি কীভাবে কাজ করে, তাদের ইতিহাস এবং ব্রাউজার এক্সটেনশনের প্রথম উপাদানগুলি কীভাবে ভারা হয় তা জানুন | [ব্রাউজার সম্পর্কে](/5-browser-extension/1-about-browsers/README.md) | জেন |
| ১৩ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution) | একটি ফর্ম তৈরি করা, একটি এপিয়াই কল করা এবং স্থানীয় স্টোরেজে ভেরিয়েবল সংরক্ষণ করা | স্থানীয় স্টোরেজে সঞ্চিত ভেরিয়েবল ব্যবহার করে একটি এপিয়াই কল করতে আপনার ব্রাউজার এক্সটেনশনের জাভাস্ক্রিপ্ট উপাদানগুলি তৈরি করুন | [এপিয়াই, ফর্ম, এবং স্থানীয় সঞ্চয়স্থান](/5-browser-extension/2-forms-browsers-local-storage/README.md) | জেন |
| ১৪ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution) | ব্রাউজারে ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরম্যান্স | এক্সটেনশনের আইকন পরিচালনা করতে ব্রাউজারের পটভূমি প্রক্রিয়াগুলি ব্যবহার করুন; ওয়েব পারফরম্যান্স এবং কিছু অপ্টিমাইজেশান সম্পর্কে জানুন | [পটভূমি কাজ এবং কর্মক্ষমতা](/5-browser-extension/3-background-tasks-and-performance/README.md) | জেন |
| ১৫ | [স্পেস গেম](/6-space-game/solution) | জাভাস্ক্রিপ্ট সহ আরও উন্নত গেম ডেভেলপমেন্ট | একটি গেম তৈরির প্রস্তুতির জন্য ক্লাস এবং কম্পোজিশন এবং পাব/সাব প্যাটার্ন উভয় ব্যবহার করে উত্তরাধিকার সম্পর্কে জানুন | [অ্যাডভান্সড গেম ডেভেলপমেন্টের ভূমিকা](/6-space-game/1-introduction/README.md) | ক্রিস |
| ১৬ | [স্পেস গেম](/6-space-game/solution) | ক্যানভাসে আঁকা | ক্যানভাস এপিয়াই সম্পর্কে জানুন, একটি স্ক্রিনে উপাদানগুলি আঁকতে ব্যবহৃত হয় | [ক্যানভাসে আঁকা](/6-space-game/2-drawing-to-canvas/README.md) | ক্রিস |
| ১৭ | [স্পেস গেম](/6-space-game/solution) | স্ক্রিনের চারপাশে উপাদান চলন্ত | কার্টেসিয়ান স্থানাঙ্ক এবং ক্যানভাস এপিয়াই ব্যবহার করে উপাদানগুলি কীভাবে গতি অর্জন করতে পারে তা আবিষ্কার করুন | [চলন্ত উপাদান চারপাশে](/6-space-game/3-moving-elements-around/README.md) | ক্রিস |
| ১৮ | [স্পেস গেম](/6-space-game/solution) | সংঘর্ষ সনাক্তকরণ | কীপ্রেস ব্যবহার করে উপাদানগুলিকে সংঘর্ষ এবং একে অপরের সাথে প্রতিক্রিয়া তৈরি করুন এবং গেমের কার্যক্ষমতা নিশ্চিত করতে একটি কুলডাউন ফাংশন প্রদান করুন | [সংঘর্ষ সনাক্তকরণ](/6-space-game/4-collision-detection/README.md) | ক্রিস |
| ১৯ | [স্পেস গেম](/6-space-game/solution) | স্কোর রাখা | গেমের স্থিতি এবং পারফরম্যান্সের উপর ভিত্তি করে গণিত গণনা করুন | [স্কোর রাখা](/6-space-game/5-keeping-score/README.md) | ক্রিস |
| ২০ | [স্পেস গেম](/6-space-game/solution) | খেলা শেষ এবং পুনরায় আরম্ভ | সম্পদ পরিষ্কার করা এবং পরিবর্তনশীল মান পুনরায় সেট করা সহ গেমটি শেষ এবং পুনরায় চালু করার বিষয়ে জানুন | [শেষ অবস্থা](/6-space-game/6-end-condition/README.md) | ক্রিস |
| ২১ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution) | একটি ওয়েব অ্যাপে HTML টেমপ্লেট এবং রুট | রাউটিং এবং এইচটিএমএল টেমপ্লেট ব্যবহার করে মাল্টিপেজ ওয়েবসাইটের আর্কিটেকচারের স্ক্যাফোল্ড তৈরি করতে শিখুন | [এইচটিএমএল টেমপ্লেট এবং রুট](/7-bank-project/1-template-route/README.md) | য়োহান |
| ২২ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution) | একটি লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি করুন | বিল্ডিং ফর্ম এবং হস্তান্তর বৈধতা রুটিন সম্পর্কে জানুন | [ফর্ম](/7-bank-project/2-forms/README.md) | য়োহান |
| ২৩ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution) | ডেটা আনা এবং ব্যবহার করার পদ্ধতি | আপনার অ্যাপের মধ্যে কীভাবে ডেটা প্রবাহিত হয়, কীভাবে এটি আনতে হয়, সংরক্ষণ করতে হয় এবং এটি নিষ্পত্তি করতে হয় | [ডেটা](/7-bank-project/3-data/README.md) | য়োহান |
| ২৪ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution) | রাষ্ট্র পরিচালনার ধারণা | আপনার অ্যাপ কীভাবে স্থিতি বজায় রাখে এবং কীভাবে এটি প্রোগ্রাম্যাটিকভাবে পরিচালনা করতে হয় তা জানুন | [রাজ্য ব্যবস্থাপনা](/7-bank-project/4-state-management/README.md) | য়োহান |
| ১০ | [টেরারিয়াম](/3-terrarium/solution/README.md) | জাভাস্ক্রিপ্ট বন্ধ, ডম ম্যানিপুলেশন | ক্লোজার এবং ডম ম্যানিপুলেশনের উপর ফোকাস করে টেরারিয়ামকে ড্র্যাগ/ড্রপ ইন্টারফেস হিসাবে কাজ করতে জাভাস্ক্রিপ্ট তৈরি করুন | [জাভাস্ক্রিপ্ট বন্ধ, ডম ম্যানিপুলেশন](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | জেন |
| ১১ | [টাইপিং খেলা](/4-typing-game/solution/README.md) | একটি টাইপিং গেম তৈরি করুন | আপনার জাভাস্ক্রিপ্ট অ্যাপের লজিক চালাতে কীবোর্ড ইভেন্টগুলি কীভাবে ব্যবহার করবেন তা শিখুন | [ইভেন্ট-চালিত প্রোগ্রামিং](/4-typing-game/typing-game/README.md) | ক্রিসটফার |
| ১২ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution/README.md) | ব্রাউজার নিয়ে কাজ করা | ব্রাউজারগুলি কীভাবে কাজ করে, তাদের ইতিহাস এবং ব্রাউজার এক্সটেনশনের প্রথম উপাদানগুলি কীভাবে ভারা হয় তা জানুন | [ব্রাউজার সম্পর্কে](/5-browser-extension/1-about-browsers/README.md) | জেন |
| ১৩ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution/README.md) | একটি ফর্ম তৈরি করা, একটি এপিয়াই কল করা এবং স্থানীয় স্টোরেজে ভেরিয়েবল সংরক্ষণ করা | স্থানীয় স্টোরেজে সঞ্চিত ভেরিয়েবল ব্যবহার করে একটি এপিয়াই কল করতে আপনার ব্রাউজার এক্সটেনশনের জাভাস্ক্রিপ্ট উপাদানগুলি তৈরি করুন | [এপিয়াই, ফর্ম, এবং স্থানীয় সঞ্চয়স্থান](/5-browser-extension/2-forms-browsers-local-storage/README.md) | জেন |
| ১৪ | [সবুজ ব্রাউজার এক্সটেনশন](/5-browser-extension/solution/README.md) | ব্রাউজারে ব্যাকগ্রাউন্ড প্রসেস, ওয়েব পারফরম্যান্স | এক্সটেনশনের আইকন পরিচালনা করতে ব্রাউজারের পটভূমি প্রক্রিয়াগুলি ব্যবহার করুন; ওয়েব পারফরম্যান্স এবং কিছু অপ্টিমাইজেশান সম্পর্কে জানুন | [পটভূমি কাজ এবং কর্মক্ষমতা](/5-browser-extension/3-background-tasks-and-performance/README.md) | জেন |
| ১৫ | [স্পেস গেম](/6-space-game/solution/README.md) | জাভাস্ক্রিপ্ট সহ আরও উন্নত গেম ডেভেলপমেন্ট | একটি গেম তৈরির প্রস্তুতির জন্য ক্লাস এবং কম্পোজিশন এবং পাব/সাব প্যাটার্ন উভয় ব্যবহার করে উত্তরাধিকার সম্পর্কে জানুন | [অ্যাডভান্সড গেম ডেভেলপমেন্টের ভূমিকা](/6-space-game/1-introduction/README.md) | ক্রিস |
| ১৬ | [স্পেস গেম](/6-space-game/solution/README.md) | ক্যানভাসে আঁকা | ক্যানভাস এপিয়াই সম্পর্কে জানুন, একটি স্ক্রিনে উপাদানগুলি আঁকতে ব্যবহৃত হয় | [ক্যানভাসে আঁকা](/6-space-game/2-drawing-to-canvas/README.md) | ক্রিস |
| ১৭ | [স্পেস গেম](/6-space-game/solution/README.md) | স্ক্রিনের চারপাশে উপাদান চলন্ত | কার্টেসিয়ান স্থানাঙ্ক এবং ক্যানভাস এপিয়াই ব্যবহার করে উপাদানগুলি কীভাবে গতি অর্জন করতে পারে তা আবিষ্কার করুন | [চলন্ত উপাদান চারপাশে](/6-space-game/3-moving-elements-around/README.md) | ক্রিস |
| ১৮ | [স্পেস গেম](/6-space-game/solution/README.md) | সংঘর্ষ সনাক্তকরণ | কীপ্রেস ব্যবহার করে উপাদানগুলিকে সংঘর্ষ এবং একে অপরের সাথে প্রতিক্রিয়া তৈরি করুন এবং গেমের কার্যক্ষমতা নিশ্চিত করতে একটি কুলডাউন ফাংশন প্রদান করুন | [সংঘর্ষ সনাক্তকরণ](/6-space-game/4-collision-detection/README.md) | ক্রিস |
| ১৯ | [স্পেস গেম](/6-space-game/solution/README.md) | স্কোর রাখা | গেমের স্থিতি এবং পারফরম্যান্সের উপর ভিত্তি করে গণিত গণনা করুন | [স্কোর রাখা](/6-space-game/5-keeping-score/README.md) | ক্রিস |
| ২০ | [স্পেস গেম](/6-space-game/solution/README.md) | খেলা শেষ এবং পুনরায় আরম্ভ | সম্পদ পরিষ্কার করা এবং পরিবর্তনশীল মান পুনরায় সেট করা সহ গেমটি শেষ এবং পুনরায় চালু করার বিষয়ে জানুন | [শেষ অবস্থা](/6-space-game/6-end-condition/README.md) | ক্রিস |
| ২১ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | একটি ওয়েব অ্যাপে HTML টেমপ্লেট এবং রুট | রাউটিং এবং এইচটিএমএল টেমপ্লেট ব্যবহার করে মাল্টিপেজ ওয়েবসাইটের আর্কিটেকচারের স্ক্যাফোল্ড তৈরি করতে শিখুন | [এইচটিএমএল টেমপ্লেট এবং রুট](/7-bank-project/1-template-route/README.md) | য়োহান |
| ২২ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | একটি লগইন এবং রেজিস্ট্রেশন ফর্ম তৈরি করুন | বিল্ডিং ফর্ম এবং হস্তান্তর বৈধতা রুটিন সম্পর্কে জানুন | [ফর্ম](/7-bank-project/2-forms/README.md) | য়োহান |
| ২৩ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | ডেটা আনা এবং ব্যবহার করার পদ্ধতি | আপনার অ্যাপের মধ্যে কীভাবে ডেটা প্রবাহিত হয়, কীভাবে এটি আনতে হয়, সংরক্ষণ করতে হয় এবং এটি নিষ্পত্তি করতে হয় | [ডেটা](/7-bank-project/3-data/README.md) | য়োহান |
| ২৪ | [ব্যাংকিং অ্যাপ](/7-bank-project/solution/README.md) | রাষ্ট্র পরিচালনার ধারণা | আপনার অ্যাপ কীভাবে স্থিতি বজায় রাখে এবং কীভাবে এটি প্রোগ্রাম্যাটিকভাবে পরিচালনা করতে হয় তা জানুন | [রাজ্য ব্যবস্থাপনা](/7-bank-project/4-state-management/README.md) | য়োহান |
| 07 | JS Basics | Πίνακες και επαναλήψεις | Εξάσκηση με δεδομένα χρησιμοποιώντας πίνακες και επαναλήψεις στη JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML στη πράξη | Δημιουργήστε το HTML για ένα online terrarium, εστιάζοντας στην κατασκευή της διάταξης | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS στη πράξη | Δημιουργήστε το CSS γιανα διαμορφώσετε το online terrarium, εστιάζοντας στα βασικά του CSS, συμπεριλαμβανομένης της απόκρισης της σελίδας (responsiveness) | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript Closures, DOM manipulation | Δημιουργήστε το JavaScript γιανα λειτουργήσει το terrarium ως διεπαφή drag/drop, εστιάζοντας στα closures και τον χειρισμό DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Δημιουργία παιχνιδιού πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε συμβάντα πληκτρολογίου γιανα τα συμπεριλάβετε στη λογική της εφαρμογής σας. | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Δουλεύοντας με προγράμματα περιήγησης | Μάθετε πώς λειτουργούν τα προγράμματα περιήγησης, το ιστορικό τους και πώς ξεκινάμε μια επέκταση | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στον τοπικό χώρο αποθήκευσης | Δημιουργήστε τον κώδικα JavaScript της επέκτασης του προγράμματος περιήγησής σας γιανα καλέσετε ένα API χρησιμοποιώντας μεταβλητές που είναι αποθηκευμένες στον τοπικό χώρο αποθήκευσης | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Διαδικασίες παρασκηνίου στο πρόγραμμα περιήγησης, απόδοση Ιστού | Χρήση των διαδικασιών πρασκηνίου του περιηγητή, για τη διαχείρηση του εικονιδίου της επέκτασης. Μάθετε για την απόδοση του ιστού και μερικες βελτιστοποιήσεις που πρέπει να κάνετε | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution) | Προηγμένη ανάπτυξη παιχνιδιών με JavaScript | Μάθετε σχετικά με την κληρονομικότητα, χρησιμοποιώντας τις κλάσεις και τη σύνθεση και το μοτίβο Pub/Sub, για τη προετοιμασία δημιουργίας ενός παιχνιδιού | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution) | Ζωγραφίζοντας στο canvas | Μάθετε περισσότερα για το Canvas API, που χρησιμοποιείται για την σχεδίαση στοιχείων στην οθόνη | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πως τα στοιχεία μπορύν να αποκτήσουν κίνηση χρησιμοποιώντας τις καρτεσιανές συντεταγμένες και το Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution) | Ανίχνευση σύγκρουσης | Καντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας τα πατήματα πλήκτρων όπως επίσης και η λειτουργία cooldown γιατην εξασφαλίση της απόδοσης του παιχνιδιού | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution) | Διατήρηση βαθμολογίας | Εκτελέστε μαθηματικούς υπολογισμούς με βάση την κατάσταση και την απόδοση του παιχνιδιού | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution) | Τερματισμός και επανεκκίνηση του παιχνιδιού | Μάθετε σχετικά με τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού στοιχείων και της επαναφοράς των τιμών των μεταβλητών | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution) | HTML Templates και Routes σε μια Web εφαρμογή | Μάθετε πώς μπορείτε να δημιουργήσετε τα θεμέλια της αρχιτεκτονικής ενος ιστοτόπου πολλαπλών σελίδων, χρησιμοποιώντας HTML templates και routing | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Δημιουργήστε μια φόρμα σύνδεσης και εγγραφής | Μάθετε σχετικά με τη δημιουργία φορμών και τη διαχείρηση επικύρωσης των στοιχείων | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution) | Μέθοδοι λήψης και χρήσης δεδομένων | Μάθετε για τη ροή των δεδομένων και πως να τα ανακτήσετε, να τα αποθηκεύσετε και να τα απορρίψετε | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Έννοιες του State Management | Μάθετε πως η εφαρμογή σας διατηρεί μια κατάσταση και πως να τη διαχειρίζεστε προγραμματιστικά | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Δημιουργήστε το JavaScript γιανα λειτουργήσει το terrarium ως διεπαφή drag/drop, εστιάζοντας στα closures και τον χειρισμό DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Δημιουργία παιχνιδιού πληκτρολόγησης | Μάθετε πώς να χρησιμοποιείτε συμβάντα πληκτρολογίου γιανα τα συμπεριλάβετε στη λογική της εφαρμογής σας. | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Δουλεύοντας με προγράμματα περιήγησης | Μάθετε πώς λειτουργούν τα προγράμματα περιήγησης, το ιστορικό τους και πώς ξεκινάμε μια επέκταση | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Δημιουργία φόρμας, κλήση API και αποθήκευση μεταβλητών στον τοπικό χώρο αποθήκευσης | Δημιουργήστε τον κώδικα JavaScript της επέκτασης του προγράμματος περιήγησής σας γιανα καλέσετε ένα API χρησιμοποιώντας μεταβλητές που είναι αποθηκευμένες στον τοπικό χώρο αποθήκευσης | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Διαδικασίες παρασκηνίου στο πρόγραμμα περιήγησης, απόδοση Ιστού | Χρήση των διαδικασιών πρασκηνίου του περιηγητή, για τη διαχείρηση του εικονιδίου της επέκτασης. Μάθετε για την απόδοση του ιστού και μερικες βελτιστοποιήσεις που πρέπει να κάνετε | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | Προηγμένη ανάπτυξη παιχνιδιών με JavaScript | Μάθετε σχετικά με την κληρονομικότητα, χρησιμοποιώντας τις κλάσεις και τη σύνθεση και το μοτίβο Pub/Sub, για τη προετοιμασία δημιουργίας ενός παιχνιδιού | [Introduction to Advanced Game Development](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Ζωγραφίζοντας στο canvas | Μάθετε περισσότερα για το Canvas API, που χρησιμοποιείται για την σχεδίαση στοιχείων στην οθόνη | [Drawing to Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Μετακίνηση στοιχείων στην οθόνη | Ανακαλύψτε πως τα στοιχεία μπορύν να αποκτήσουν κίνηση χρησιμοποιώντας τις καρτεσιανές συντεταγμένες και το Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Ανίχνευση σύγκρουσης | Καντε τα στοιχεία να συγκρούονται και να αντιδρούν μεταξύ τους χρησιμοποιώντας τα πατήματα πλήκτρων όπως επίσης και η λειτουργία cooldown γιατην εξασφαλίση της απόδοσης του παιχνιδιού | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Διατήρηση βαθμολογίας | Εκτελέστε μαθηματικούς υπολογισμούς με βάση την κατάσταση και την απόδοση του παιχνιδιού | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Τερματισμός και επανεκκίνηση του παιχνιδιού | Μάθετε σχετικά με τον τερματισμό και την επανεκκίνηση του παιχνιδιού, συμπεριλαμβανομένου του καθαρισμού στοιχείων και της επαναφοράς των τιμών των μεταβλητών | [The Ending Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | HTML Templates και Routes σε μια Web εφαρμογή | Μάθετε πώς μπορείτε να δημιουργήσετε τα θεμέλια της αρχιτεκτονικής ενος ιστοτόπου πολλαπλών σελίδων, χρησιμοποιώντας HTML templates και routing | [HTML Templates and Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Δημιουργήστε μια φόρμα σύνδεσης και εγγραφής | Μάθετε σχετικά με τη δημιουργία φορμών και τη διαχείρηση επικύρωσης των στοιχείων | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Μέθοδοι λήψης και χρήσης δεδομένων | Μάθετε για τη ροή των δεδομένων και πως να τα ανακτήσετε, να τα αποθηκεύσετε και να τα απορρίψετε | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Έννοιες του State Management | Μάθετε πως η εφαρμογή σας διατηρεί μια κατάσταση και πως να τη διαχειρίζεστε προγραμματιστικά | [State Management](/7-bank-project/4-state-management/README.md) | Yohan |
@ -67,21 +67,21 @@ Bagama't sinadya naming iwasan ang pagpapakilala ng mga balangkas ng JavaScript
| 07 | JS Basics | Mga Array at Loop | Makipagtulungan sa data gamit ang mga arrays at loops in JavaScript | [Mga Array at Loop](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML sa Practice | Buuin ang HTML upang lumikha ng isang online na terrarium, na nakatuon sa pagbuo ng isang layout | [Panimula sa HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS sa Practice | Buuin ang CSS upang mai-istilo ang online na terrarium, na tumutuon sa mga pangunahing kaalaman ng CSS kabilang ang paggawa ng page na tumutugon | [Panimula sa CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | Mga Pagsasara ng JavaScript, pagmamanipula ng DOM | Buuin ang JavaScript upang gawing function ang terrarium bilang isang drag/drop interface, na tumutuon sa mga pagsasara at pagmamanipula ng DOM | [Mga Pagsasara ng JavaScript, pagmamanipula ng DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Matutunan kung paano gumamit ng mga kaganapan sa keyboard upang himukin ang lohika ng iyong JavaScript app | [Programming na Batay sa Kaganapan](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Nagtatrabaho sa Mga Browser | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano scaffold ang mga unang elemento ng isang extension ng browser | [Tungkol sa Mga Browser](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Pagbuo ng form, pagtawag ng API at pag-iimbak ng mga variable sa lokal na storage | Buuin ang mga elemento ng JavaScript ng iyong extension ng browser upang tumawag sa isang API gamit ang mga variable na nakaimbak sa lokal na storage | [APIs, Forms, at Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Mga proseso sa background sa browser, pagganap ng web | Gamitin ang mga proseso sa background ng browser upang pamahalaan ang icon ng extension; alamin ang tungkol sa pagganap ng web at ilang mga pag-optimize na gagawin | [Mga Gawain sa Background at Pagganap](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution) | Higit pang Advanced na Pagbuo ng Laro gamit ang JavaScript | Alamin ang tungkol sa Inheritance gamit ang parehong Mga Klase at Komposisyon at ang pattern ng Pub/Sub, bilang paghahanda sa pagbuo ng isang laro | [Panimula sa Advanced na Pagbuo ng Laro](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution) | Pagguhit sa canvas | Matuto tungkol sa Canvas API, na ginagamit upang gumuhit ng mga elemento sa isang screen | [Pagguhit sa Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution) | Paglipat ng mga elemento sa paligid ng screen | Tuklasin kung paano makakakuha ng paggalaw ang mga elemento gamit ang mga cartesian coordinates at ang Canvas API | [Paglipat ng mga Elemento](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution) | Pagtuklas ng banggaan | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang mga keypress at magbigay ng cooldown function para matiyak ang performance ng laro | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution) | Pagpapanatiling Kalidad | Magsagawa ng mga kalkulasyon sa matematika batay sa katayuan at pagganap ng laro | [Pagpapanatiling Kalidad](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution) | Pagtapos at i-restart ang laro | Matuto tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga variable na value | [Ang Katapusang Kondisyon](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution) | Mga Template at Ruta ng HTML sa isang Web App | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage na website gamit ang pagruruta at mga HTML na template | [Mga Template at Ruta ng HTML](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Bumuo ng isang Login at Registration Form | Matuto tungkol sa pagbuo ng mga form at pagbibigay ng mga gawain sa pagpapatunay | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution) | Paraan ng Pagkuha at Paggamit ng Data | Paano dumadaloy ang data sa loob at labas ng iyong app, kung paano ito kunin, iimbak, at itapon ito | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Mga Konsepto ng Pamamahala ng Estado | Alamin kung paano napapanatili ng iyong app ang estado at kung paano ito pamahalaan sa pamamagitan ng program | [Estadong Pamamahala](/7-bank-project/4-state-management/README.md) | Yohan |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | Mga Pagsasara ng JavaScript, pagmamanipula ng DOM | Buuin ang JavaScript upang gawing function ang terrarium bilang isang drag/drop interface, na tumutuon sa mga pagsasara at pagmamanipula ng DOM | [Mga Pagsasara ng JavaScript, pagmamanipula ng DOM](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Build a Typing Game | Matutunan kung paano gumamit ng mga kaganapan sa keyboard upang himukin ang lohika ng iyong JavaScript app | [Programming na Batay sa Kaganapan](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Nagtatrabaho sa Mga Browser | Matutunan kung paano gumagana ang mga browser, ang kanilang kasaysayan, at kung paano scaffold ang mga unang elemento ng isang extension ng browser | [Tungkol sa Mga Browser](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Pagbuo ng form, pagtawag ng API at pag-iimbak ng mga variable sa lokal na storage | Buuin ang mga elemento ng JavaScript ng iyong extension ng browser upang tumawag sa isang API gamit ang mga variable na nakaimbak sa lokal na storage | [APIs, Forms, at Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Mga proseso sa background sa browser, pagganap ng web | Gamitin ang mga proseso sa background ng browser upang pamahalaan ang icon ng extension; alamin ang tungkol sa pagganap ng web at ilang mga pag-optimize na gagawin | [Mga Gawain sa Background at Pagganap](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Space Game](/6-space-game/solution/README.md) | Higit pang Advanced na Pagbuo ng Laro gamit ang JavaScript | Alamin ang tungkol sa Inheritance gamit ang parehong Mga Klase at Komposisyon at ang pattern ng Pub/Sub, bilang paghahanda sa pagbuo ng isang laro | [Panimula sa Advanced na Pagbuo ng Laro](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Space Game](/6-space-game/solution/README.md) | Pagguhit sa canvas | Matuto tungkol sa Canvas API, na ginagamit upang gumuhit ng mga elemento sa isang screen | [Pagguhit sa Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Space Game](/6-space-game/solution/README.md) | Paglipat ng mga elemento sa paligid ng screen | Tuklasin kung paano makakakuha ng paggalaw ang mga elemento gamit ang mga cartesian coordinates at ang Canvas API | [Paglipat ng mga Elemento](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Space Game](/6-space-game/solution/README.md) | Pagtuklas ng banggaan | Gawing magbanggaan at mag-react ang mga elemento sa isa't isa gamit ang mga keypress at magbigay ng cooldown function para matiyak ang performance ng laro | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Space Game](/6-space-game/solution/README.md) | Pagpapanatiling Kalidad | Magsagawa ng mga kalkulasyon sa matematika batay sa katayuan at pagganap ng laro | [Pagpapanatiling Kalidad](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Space Game](/6-space-game/solution/README.md) | Pagtapos at i-restart ang laro | Matuto tungkol sa pagtatapos at pag-restart ng laro, kabilang ang paglilinis ng mga asset at pag-reset ng mga variable na value | [Ang Katapusang Kondisyon](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | Mga Template at Ruta ng HTML sa isang Web App | Matutunan kung paano gumawa ng scaffold ng arkitektura ng isang multipage na website gamit ang pagruruta at mga HTML na template | [Mga Template at Ruta ng HTML](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Bumuo ng isang Login at Registration Form | Matuto tungkol sa pagbuo ng mga form at pagbibigay ng mga gawain sa pagpapatunay | [Forms](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Paraan ng Pagkuha at Paggamit ng Data | Paano dumadaloy ang data sa loob at labas ng iyong app, kung paano ito kunin, iimbak, at itapon ito | [Data](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Mga Konsepto ng Pamamahala ng Estado | Alamin kung paano napapanatili ng iyong app ang estado at kung paano ito pamahalaan sa pamamagitan ng program | [Estadong Pamamahala](/7-bank-project/4-state-management/README.md) | Yohan |
Azure Cloud Advocates de Microsoft sont heureux de vous offrir un cours de 24 leçons portant sur les bases du HTML, CSS et JavaScript.
Chaque leçon comporte des instructions, des projets et des quizs.
Grâce à la pédagogie basée sur la pratique, vous pouvez apprendre tout en créant des interfaces.
Grâce à la pédagogie basée sur la pratique, vous pouvez apprendre tout en créant des interfaces.
Ce qui représente une méthode qui consiste à acquérir des compétances et s'en rappelant !.
**Un très grand merci à Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, et Tomomi Imura!**
@ -34,7 +34,7 @@ Vous trouverez autres sujets complétants ce cours sur [Microsoft Learn](https:/
## Pedagogie
On a choisi deux pédagogies pour créer ce cours.
En premier lieu, on a veillé à ce qu'il soit basé sur un projet et en réalité, vous auriez à la fin de ce cours codé un jeu de typing, une extension web, une application bancaire et d'autres intéressants projets.
En premier lieu, on a veillé à ce qu'il soit basé sur un projet et en réalité, vous auriez à la fin de ce cours codé un jeu de typing, une extension web, une application bancaire et d'autres intéressants projets.
En dernier lieu, on a mis à votre disposition des quizs pour vous évaluez vous-même.
Et à la fin, vous auriez appris beaucoup de choses à propos du HTML, CSS et Javascript. Et vous voilà, un développeur web 🎓 !
@ -59,7 +59,7 @@ Vos retours sont vivement acceptés.
- Un sketchnote
- Une vidéo supplémentaire
- Quiz des dernières compétences acquises
- Quiz des dernières compétences acquises
- Les traces écrites
- Un challenge
- Une explication **très détaillée** pour réussir le challenge
@ -83,21 +83,21 @@ Ils sont accessible via le dossier `quiz-app`.
| 07 | JS Basics | Arrays and Loops | Work with data using arrays and loops in JavaScript | [Arrays and Loops](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML in Practice | Build the HTML to create an online terrarium, focusing on building a layout | [Introduction to HTML](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS in Practice | Build the CSS to style the online terrarium, focusing on the basics of CSS including making the page responsive | [Introduction to CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jeu de l'espace](/6-space-game/solution) | Développement avancé d'un jeu en Javascript | Savoir les bases de l'**Inheritance** avec les **Classes and Composition et les Pub/Sub pattern**, afin de créer un jeu | [Introduction au développement avancé d'un jeu en Javascript](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jeu de l'espace](/6-space-game/solution) | Les Canvas | Savoir à propos du Canvas API, utilisé pour dessiner des éléments | [Dessiner des Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jeu de l'espace](/6-space-game/solution) | Déplacer les éléments | En utilisant les données cartésiennes et le Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jeu de l'espace](/6-space-game/solution) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu de l'espace](/6-space-game/solution) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu de l'espace](/6-space-game/solution) | Commencer et finir un jeu | Savoir manipuler les variables, démarrer un jeu et mettre fin. | [Fin Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Application bancaire](/7-bank-project/solution) | HTML Templates et Routes dans une application web | Savoir l'utilité des Templates et Routes dans la gestion d'un site web multi-pages. | [HTML Templates et Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Application bancaire](/7-bank-project/solution) | Créer un formulaire de connexion | Apprendre le fonctionnement d'un formulaire et la vérification des données saisies | [Formulaires](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Application bancaire](/7-bank-project/solution) | Fetch et utilisation des données | Savoir comment une application manipule les données | [Données](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Application bancaire](/7-bank-project/solution) | Concepts de la gestion des states | En savoir comment une application gère les states | [Gestion des states](/7-bank-project/4-state-management/README.md) | Yohan |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript Closures, DOM manipulation | Build the JavaScript to make the terrarium function as a drag/drop interface, focusing on closures and DOM manipulation | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Build a Typing Game | Learn how to use keyboard events to drive the logic of your JavaScript app | [Event-Driven Programming](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Working with Browsers | Learn how browsers work, their history, and how to scaffold the first elements of a browser extension | [About Browsers](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Building a form, calling an API and storing variables in local storage | Build the JavaScript elements of your browser extension to call an API using variables stored in local storage | [APIs, Forms, and Local Storage](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Green Browser Extension](/5-browser-extension/solution/README.md) | Background processes in the browser, web performance | Use the browser's background processes to manage the extension's icon; learn about web performance and some optimizations to make | [Background Tasks and Performance](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jeu de l'espace](/6-space-game/solution/README.md) | Développement avancé d'un jeu en Javascript | Savoir les bases de l'**Inheritance** avec les **Classes and Composition et les Pub/Sub pattern**, afin de créer un jeu | [Introduction au développement avancé d'un jeu en Javascript](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jeu de l'espace](/6-space-game/solution/README.md) | Les Canvas | Savoir à propos du Canvas API, utilisé pour dessiner des éléments | [Dessiner des Canvas](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jeu de l'espace](/6-space-game/solution/README.md) | Déplacer les éléments | En utilisant les données cartésiennes et le Canvas API | [Moving Elements Around](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jeu de l'espace](/6-space-game/solution/README.md) | Collision detection | Make elements collide and react to each other using keypresses and provide a cooldown function to ensure performance of the game | [Collision Detection](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jeu de l'espace](/6-space-game/solution/README.md) | Keeping score | Perform math calculations based on the game's status and performance | [Keeping Score](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jeu de l'espace](/6-space-game/solution/README.md) | Commencer et finir un jeu | Savoir manipuler les variables, démarrer un jeu et mettre fin. | [Fin Condition](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Application bancaire](/7-bank-project/solution/README.md) | HTML Templates et Routes dans une application web | Savoir l'utilité des Templates et Routes dans la gestion d'un site web multi-pages. | [HTML Templates et Routes](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Application bancaire](/7-bank-project/solution/README.md) | Créer un formulaire de connexion | Apprendre le fonctionnement d'un formulaire et la vérification des données saisies | [Formulaires](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Application bancaire](/7-bank-project/solution/README.md) | Fetch et utilisation des données | Savoir comment une application manipule les données | [Données](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Application bancaire](/7-bank-project/solution/README.md) | Concepts de la gestion des states | En savoir comment une application gère les states | [Gestion des states](/7-bank-project/4-state-management/README.md) | Yohan |
@ -63,21 +63,21 @@ Microsoft के Azure Cloud Advocates को 12-सप्ताह, 24-पा
| 07 | जेएस की मूलबाते | अररेस और लूपस | जावास्क्रिप्ट में अररेस और लूपस का उपयोग कर डेटा के साथ काम करें | [अररेस और लूपस](/2-js-basics/4-arrays-loops/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | जैस्मिन |
| 08 | [टेरारियम](/3-terrarium/solution/translations/README.hi.md) | एचटीएमएल प्रैक्टिस में | लेआउट बनाने पर ध्यान केंद्रित करते हुए, एक ऑनलाइन टेरारियम बनाने के लिए HTML बनाएँ | [एचटीएमएल का परिचय](/3-terrarium/1-intro-to-html/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
| 09 | [टेरारियम](/3-terrarium/solution/translations/README.hi.md) | सीएसएस | पृष्ठ को उत्तरदायी बनाने सहित सीएसएस की मूल बातों पर ध्यान केंद्रित करते हुए, ऑनलाइन टेरेरियम को स्टाइल करने के लिए सीएसएस का निर्माण करें | [सीएसएसका परिचय](/3-terrarium/2-intro-to-css/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
| 10 | [टेरारियम](/3-terrarium/solution) | जावास्क्रिप्ट क्लोजर, डोम मनिप्यलैशन | एक टेरारियम फंगक्शन को ड्रैग/ड्रॉप इंटरफेस के रूप में बनाने के लिए जावास्क्रिप्ट का निर्माण करें ,क्लोजर और डोम मनिप्यलैशन पर ध्यान केंद्रित करके | [जावास्क्रिप्ट क्लोजर और डोम मनिप्यलैशन](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
| 11 | [टायपिंग गेम](/4-typing-game/solution) | एक टायपिंग गेम बनाए | अपने जावास्क्रिप्ट ऐप के तर्क को चलाने के लिए कीबोर्ड घटनाओं का उपयोग करना सीखें | [ईवेंट-संचालित प्रोग्रामिंग](/4-typing-game/typing-game/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | क्रिस्टोफर |
| 12 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution) | ब्राउज़रों के साथ काम करना | जानें कि ब्राउज़र कैसे काम करते हैं, उनका इतिहास और ब्राउज़र एक्सटेंशन के पहले एलिमेंट्स को कैसे मचानते हैं | [ब्राउज़रों के बारे में](/5-browser-extension/1-about-browsers/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
| 13 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution) | एक फॉर्म का निर्माण, एक एपीआई को कॉल करना और लोकल स्टॉरिज में चर को संग्रहीत करना | लोकल स्टॉरिज में संग्रहीत चर का उपयोग करके एपीआई को कॉल करने के लिए अपने ब्राउज़र एक्सटेंशन के जावास्क्रिप्ट एलिमेंट्स का निर्माण करें | [एपीआईज, फॉर्म्स, और लोकल स्टॉरिज](/5-browser-extension/2-forms-browsers-local-storage/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | जेन |
| 14 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution) | ब्राउज़र में पृष्ठभूमि प्रक्रियाएं, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र की पृष्ठभूमि प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और बनाने के लिए कुछ अनुकूलन के बारे में जानें | [पृष्ठभूमि कार्य और प्रदर्शन](/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | जेन |
| 15 | [स्पेस गेम](/6-space-game/solution) | जावास्क्रिप्ट के साथ और अधिक उन्नत खेल विकास | एक खेल के निर्माण की तैयारी में क्लाससेस और काम्पज़िशन और पब/सब पैटर्न दोनों का उपयोग करके इन्हेरीटेन्स के बारे में जानें | [उन्नत खेल विकास का परिचय](/6-space-game/1-introduction/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 16 | [स्पेस गेम](/6-space-game/solution) | कैनवास पर ड्रॉ करना | कैनवास एपीआई के बारे में जानें, जिसका उपयोग एलिमेंट्स को स्क्रीन पर खींचने के लिए किया जाता है | [कैनवास पर ड्रॉ करना](/6-space-game/2-drawing-to-canvas/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 17 | [स्पेस गेम](/6-space-game/solution) | स्क्रीन के चारों ओर बढ़ते एलिमेंट्स | पता करे कि कार्टेशियन निर्देशांक और कैनवस एपीआई का उपयोग करके तत्व कैसे गति प्राप्त कर सकते हैं | [चारों ओर बढ़ते एलिमेंट्स](/6-space-game/3-moving-elements-around/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 18 | [स्पेस गेम](/6-space-game/solution) | कॉलिजन डिटेक्शन | एलिमेंट्स को आपस में टकराएं और कीपरेसेस का उपयोग करते हुए एक दूसरे से प्रतिक्रिया करें और खेल के प्रदर्शन को सुनिश्चित करने के लिए एक कुलडाउन फ़ंक्शन प्रदान करें | [कॉलिजन डिटेक्शन](/6-space-game/4-collision-detection/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 19 | [स्पेस गेम](/6-space-game/solution) | स्कोर रखना | खेल की स्थिति और प्रदर्शन के आधार पर गणित की गणना करें | [स्कोर रखना](/6-space-game/5-keeping-score/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 20 | [स्पेस गेम](/6-space-game/solution) | खेल को समाप्त करना और पुनः आरंभ करना | खेल को समाप्त करने और पुनः आरंभ करने के बारे में जानें,असेट्स को साफ करने और चरकी वैल्यू को रीसेट करने सहित | [अंत की स्थिति](/6-space-game/6-end-condition/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 21 | [बैंकिंग एप](/7-bank-project/solution) | एचटीएमएल टेम्पलेट्स और वेब ऐप में रूट | राउटिंग और एचटीएमएल टेम्प्लेट का उपयोग करके एक मल्टीफ़ेज वेबसाइट की वास्तुकला का मचान बनाना सीखें | [एचटीएमएल टेम्पलेट और रूट](/7-bank-project/1-template-route/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
| 22 | [बैंकिंग एप](/7-bank-project/solution) | एक लॉगिन और पंजीकरण फॉर्म बनाएँ | फॉर्म के निर्माण और सत्यापन रूटीन सौंपने के बारे में जानें | [फॉर्म्स](/7-bank-project/2-forms/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
| 23 | [बैंकिंग एप](/7-bank-project/solution) | डेटा लाने और उपयोग करने के तरीके | डेटा आपके ऐप से कैसे और कैसे बहता है, इसे कैसे लाया जाए, इसे स्टोर करें और इसका दिसपोस करें | [डाटा](/7-bank-project/3-data/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
| 24 | [बैंकिंग एप](/7-bank-project/solution) | स्टेट प्रबंधन की अवधारणाएँ | जानें कि आपका ऐप किस तरह से स्थिति को बनाए रखता है और इसे कैसे व्यवस्थित रूप से प्रबंधित करता है | [स्टेट प्रबंधन](/7-bank-project/4-state-management/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | योहन |
| 10 | [टेरारियम](/3-terrarium/solution/README.md) | जावास्क्रिप्ट क्लोजर, डोम मनिप्यलैशन | एक टेरारियम फंगक्शन को ड्रैग/ड्रॉप इंटरफेस के रूप में बनाने के लिए जावास्क्रिप्ट का निर्माण करें ,क्लोजर और डोम मनिप्यलैशन पर ध्यान केंद्रित करके | [जावास्क्रिप्ट क्लोजर और डोम मनिप्यलैशन](/3-terrarium/3-intro-to-DOM-and-closures/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
| 11 | [टायपिंग गेम](/4-typing-game/solution/README.md) | एक टायपिंग गेम बनाए | अपने जावास्क्रिप्ट ऐप के तर्क को चलाने के लिए कीबोर्ड घटनाओं का उपयोग करना सीखें | [ईवेंट-संचालित प्रोग्रामिंग](/4-typing-game/typing-game/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | क्रिस्टोफर |
| 12 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | ब्राउज़रों के साथ काम करना | जानें कि ब्राउज़र कैसे काम करते हैं, उनका इतिहास और ब्राउज़र एक्सटेंशन के पहले एलिमेंट्स को कैसे मचानते हैं | [ब्राउज़रों के बारे में](/5-browser-extension/1-about-browsers/translations/README.hi.md) | ✅ | ✅ | ✅ | ✅ | ✅ | 🛑 | जेन |
| 13 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | एक फॉर्म का निर्माण, एक एपीआई को कॉल करना और लोकल स्टॉरिज में चर को संग्रहीत करना | लोकल स्टॉरिज में संग्रहीत चर का उपयोग करके एपीआई को कॉल करने के लिए अपने ब्राउज़र एक्सटेंशन के जावास्क्रिप्ट एलिमेंट्स का निर्माण करें | [एपीआईज, फॉर्म्स, और लोकल स्टॉरिज](/5-browser-extension/2-forms-browsers-local-storage/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | जेन |
| 14 | [ग्रीन ब्राउजर इक्स्टेन्शन](/5-browser-extension/solution/README.md) | ब्राउज़र में पृष्ठभूमि प्रक्रियाएं, वेब प्रदर्शन | एक्सटेंशन के आइकन को प्रबंधित करने के लिए ब्राउज़र की पृष्ठभूमि प्रक्रियाओं का उपयोग करें; वेब प्रदर्शन और बनाने के लिए कुछ अनुकूलन के बारे में जानें | [पृष्ठभूमि कार्य और प्रदर्शन](/5-browser-extension/3-background-tasks-and-performance/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | जेन |
| 15 | [स्पेस गेम](/6-space-game/solution/README.md) | जावास्क्रिप्ट के साथ और अधिक उन्नत खेल विकास | एक खेल के निर्माण की तैयारी में क्लाससेस और काम्पज़िशन और पब/सब पैटर्न दोनों का उपयोग करके इन्हेरीटेन्स के बारे में जानें | [उन्नत खेल विकास का परिचय](/6-space-game/1-introduction/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 16 | [स्पेस गेम](/6-space-game/solution/README.md) | कैनवास पर ड्रॉ करना | कैनवास एपीआई के बारे में जानें, जिसका उपयोग एलिमेंट्स को स्क्रीन पर खींचने के लिए किया जाता है | [कैनवास पर ड्रॉ करना](/6-space-game/2-drawing-to-canvas/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 17 | [स्पेस गेम](/6-space-game/solution/README.md) | स्क्रीन के चारों ओर बढ़ते एलिमेंट्स | पता करे कि कार्टेशियन निर्देशांक और कैनवस एपीआई का उपयोग करके तत्व कैसे गति प्राप्त कर सकते हैं | [चारों ओर बढ़ते एलिमेंट्स](/6-space-game/3-moving-elements-around/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 18 | [स्पेस गेम](/6-space-game/solution/README.md) | कॉलिजन डिटेक्शन | एलिमेंट्स को आपस में टकराएं और कीपरेसेस का उपयोग करते हुए एक दूसरे से प्रतिक्रिया करें और खेल के प्रदर्शन को सुनिश्चित करने के लिए एक कुलडाउन फ़ंक्शन प्रदान करें | [कॉलिजन डिटेक्शन](/6-space-game/4-collision-detection/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 19 | [स्पेस गेम](/6-space-game/solution/README.md) | स्कोर रखना | खेल की स्थिति और प्रदर्शन के आधार पर गणित की गणना करें | [स्कोर रखना](/6-space-game/5-keeping-score/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 20 | [स्पेस गेम](/6-space-game/solution/README.md) | खेल को समाप्त करना और पुनः आरंभ करना | खेल को समाप्त करने और पुनः आरंभ करने के बारे में जानें,असेट्स को साफ करने और चरकी वैल्यू को रीसेट करने सहित | [अंत की स्थिति](/6-space-game/6-end-condition/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | 🛑 | क्रिस |
| 21 | [बैंकिंग एप](/7-bank-project/solution/README.md) | एचटीएमएल टेम्पलेट्स और वेब ऐप में रूट | राउटिंग और एचटीएमएल टेम्प्लेट का उपयोग करके एक मल्टीफ़ेज वेबसाइट की वास्तुकला का मचान बनाना सीखें | [एचटीएमएल टेम्पलेट और रूट](/7-bank-project/1-template-route/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
| 22 | [बैंकिंग एप](/7-bank-project/solution/README.md) | एक लॉगिन और पंजीकरण फॉर्म बनाएँ | फॉर्म के निर्माण और सत्यापन रूटीन सौंपने के बारे में जानें | [फॉर्म्स](/7-bank-project/2-forms/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
| 23 | [बैंकिंग एप](/7-bank-project/solution/README.md) | डेटा लाने और उपयोग करने के तरीके | डेटा आपके ऐप से कैसे और कैसे बहता है, इसे कैसे लाया जाए, इसे स्टोर करें और इसका दिसपोस करें | [डाटा](/7-bank-project/3-data/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | ✅ | योहन |
| 24 | [बैंकिंग एप](/7-bank-project/solution/README.md) | स्टेट प्रबंधन की अवधारणाएँ | जानें कि आपका ऐप किस तरह से स्थिति को बनाए रखता है और इसे कैसे व्यवस्थित रूप से प्रबंधित करता है | [स्टेट प्रबंधन](/7-bank-project/4-state-management/translations/README.hi.md) | ✅ | 🛑 | ✅ | ✅ | ✅ | | योहन |
# തുടക്കക്കാർക്കുള്ള വെബ് വികസനം - ഒരു പാഠ്യപദ്ധതി
മൈക്രോസോഫ്റ്റിലെ അസുർ ക്ലൗഡ് അഡ്വക്കേറ്റ്സ് ജാവാസ്ക്രിപ്റ്റ്, സിഎസ്എസ്, എച്ച്ടിഎംഎൽ അടിസ്ഥാനകാര്യങ്ങൾ എന്നിവയെക്കുറിച്ച് 12-ആഴ്ച, 24-പാഠ പാഠ്യപദ്ധതി വാഗ്ദാനം ചെയ്യുന്നതിൽ സന്തോഷമുണ്ട്. ഓരോ പാഠത്തിലും പാഠത്തിന് മുമ്പും ശേഷവുമുള്ള ക്വിസുകൾ, പാഠം പൂർത്തിയാക്കാനുള്ള രേഖാമൂലമുള്ള നിർദ്ദേശങ്ങൾ, ഒരു പരിഹാരം, ഒരു അസൈൻമെന്റ് എന്നിവയും അതിലേറെയും ഉൾപ്പെടുന്നു. ഞങ്ങളുടെ പ്രോജക്റ്റ് അധിഷ്ഠിത അദ്ധ്യാപനം പുതിയ കഴിവുകൾ സ്വായത്തമാക്കൻ നിങ്ങളെ അനുവദിക്കുന്നു.
മൈക്രോസോഫ്റ്റിലെ അസുർ ക്ലൗഡ് അഡ്വക്കേറ്റ്സ് ജാവാസ്ക്രിപ്റ്റ്, സിഎസ്എസ്, എച്ച്ടിഎംഎൽ അടിസ്ഥാനകാര്യങ്ങൾ എന്നിവയെക്കുറിച്ച് 12-ആഴ്ച, 24-പാഠ പാഠ്യപദ്ധതി വാഗ്ദാനം ചെയ്യുന്നതിൽ സന്തോഷമുണ്ട്. ഓരോ പാഠത്തിലും പാഠത്തിന് മുമ്പും ശേഷവുമുള്ള ക്വിസുകൾ, പാഠം പൂർത്തിയാക്കാനുള്ള രേഖാമൂലമുള്ള നിർദ്ദേശങ്ങൾ, ഒരു പരിഹാരം, ഒരു അസൈൻമെന്റ് എന്നിവയും അതിലേറെയും ഉൾപ്പെടുന്നു. ഞങ്ങളുടെ പ്രോജക്റ്റ് അധിഷ്ഠിത അദ്ധ്യാപനം പുതിയ കഴിവുകൾ സ്വായത്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു.
**ഞങ്ങളുടെ രചയിതാക്കളായ ജെൻ ലൂപ്പർ, ക്രിസ് നോറിംഗ്, ക്രിസ്റ്റഫർ ഹാരിസൺ, ജാസ്മിൻ ഗ്രീൻവേ, യോഹാൻ ലസോർസ, ഫ്ലോർ ഡ്രീസ്, സ്കെച്ച്നോട്ട് ആർട്ടിസ്റ്റ് ടോമിമി ഇമുറ എന്നിവർക്ക് ഹൃദയം നിറഞ്ഞ നന്ദി!**
@ -29,7 +29,7 @@
## അദ്ധ്യാപനo
ഈ പാഠ്യപദ്ധതി നിർമ്മിക്കുമ്പോൾ ഞങ്ങൾ രണ്ട് പെഡഗോഗിക്കൽ സിദ്ധാന്തങ്ങൾ തിരഞ്ഞെടുത്തു: ഇത് പ്രോജക്റ്റ് അടിസ്ഥാനമാക്കിയുള്ളതാണെന്നും അതിൽ പതിവ് ക്വിസുകൾ ഉൾപ്പെടുന്നുവെന്നും ഉറപ്പാക്കുന്നു. ഈ പരമ്പരയുടെ അവസാനത്തോടെ, വിദ്യാർത്ഥികൾ ഒരു ടൈപ്പിംഗ് ഗെയിം, ഒരു വെർച്വൽ ടെറേറിയം, ഒരു 'ഗ്രീൻ' ബ്രൗസർ എക്സ്റ്റൻഷൻ, ഒരു 'സ്പെയ്സ് ഇൻവേഡേഴ്സ്' ടൈപ്പ് ഗെയിം, ഒരു ബിസിനസ്-ടൈപ്പ് ബാങ്കിംഗ് ആപ്പ് എന്നിവ നിർമ്മിക്കുകയും ജാവാസ്ക്രിപ്റ്റിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കുകയും ചെയ്യും , ഇന്നത്തെ വെബ് ഡെവലപ്പറിന്റെ ആധുനിക ടൂൾചെയിനിനൊപ്പം HTML, CSS എന്നിവയും.
ഈ പാഠ്യപദ്ധതി നിർമ്മിക്കുമ്പോൾ ഞങ്ങൾ രണ്ട് പെഡഗോഗിക്കൽ സിദ്ധാന്തങ്ങൾ തിരഞ്ഞെടുത്തു: ഇത് പ്രോജക്റ്റ് അടിസ്ഥാനമാക്കിയുള്ളതാണെന്നും അതിൽ പതിവ് ക്വിസുകൾ ഉൾപ്പെടുന്നുവെന്നും ഉറപ്പാക്കുന്നു. ഈ പരമ്പരയുടെ അവസാനത്തോടെ, വിദ്യാർത്ഥികൾ ഒരു ടൈപ്പിംഗ് ഗെയിം, ഒരു വെർച്വൽ ടെറേറിയം, ഒരു 'ഗ്രീൻ' ബ്രൗസർ എക്സ്റ്റൻഷൻ, ഒരു 'സ്പെയ്സ് ഇൻവേഡേഴ്സ്' ടൈപ്പ് ഗെയിം, ഒരു ബിസിനസ്-ടൈപ്പ് ബാങ്കിംഗ് ആപ്പ് എന്നിവ നിർമ്മിക്കുകയും ജാവാസ്ക്രിപ്റ്റിന്റെ അടിസ്ഥാനകാര്യങ്ങൾ പഠിക്കുകയും ചെയ്യും , ഇന്നത്തെ വെബ് ഡെവലപ്പറിന്റെ ആധുനിക ടൂൾചെയിനിനൊപ്പം HTML, CSS എന്നിവയും.
> 🎓 ഈ പാഠ്യപദ്ധതിയിലെ ആദ്യ കുറച്ച് പാഠങ്ങൾ നിങ്ങൾക്ക് മൈക്രോസോഫ്റ്റ് ലേൺ നെ കുറിച്ചുള്ള ഒരു[പഠന പാത](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) ആയി എടുക്കാം.
@ -45,12 +45,12 @@
- ഓപ്ഷണൽ സ്കെച്ച്നോട്ട്
- ഓപ്ഷണൽ അനുബന്ധ വീഡിയോ
- പാഠത്തിനു മുമ്പുള്ള വാംഅപ്പ് ക്വിസ്
- എഴുതിയ പാഠഭാഗം
- എഴുതിയ പാഠഭാഗം
- പ്രോജക്റ്റ് അധിഷ്ഠിത പാഠങ്ങൾക്കായി, പ്രോജക്റ്റ് എങ്ങനെ നിർമ്മിക്കാം എന്നതിനെക്കുറിച്ചുള്ള ഘട്ടം ഘട്ടമായുള്ള ഗൈഡുകൾ
- വിജ്ഞാന പരിശോധനകൾ
- ഒരു വെല്ലുവിളി
- അനുബന്ധ വായന
- അസ്സൈൻമെന്റ്
- അസ്സൈൻമെന്റ്
- പാഠാനന്തര ക്വിസ്
> **ക്വിസുകളെക്കുറിച്ചുള്ള ഒരു കുറിപ്പ്**: എല്ലാ ക്വിസുകളും [ഈ ആപ്പിൽ](https://happy-mud-02d95f10f.azurestaticapps.net/) അടങ്ങിയിരിക്കുന്നു, മൂന്ന് ചോദ്യങ്ങൾ വീതമടങ്ങിയ മൊത്തം 48 ക്വിസുകൾ. അവ പാഠങ്ങൾക്കുള്ളിൽ നിന്ന് ബന്ധിപ്പിച്ചിരിക്കുന്നു, പക്ഷേ ക്വിസ് ആപ്പ് പ്രാദേശികമായി പ്രവർത്തിപ്പിക്കാൻ കഴിയും; 'ക്വിസ്-ആപ്പ്' ഫോൾഡറിലെ നിർദ്ദേശം പാലിക്കുക. അവ ക്രമേണ പ്രാദേശികവൽക്കരിക്കപ്പെടുന്നു.
| 08 | [ടെറേറിയം](/3-terrarium/solution/README.md) | HTML ൽ പരിശീലിക്കുക | ഒരു ലേഔട്ട് നിർമ്മിക്കുന്നതിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ച് ഒരു ഓൺലൈൻ ടെറേറിയം സൃഷ്ടിക്കുന്നതിന് HTML നിർമ്മിക്കുക | [HTML ന്റെ ആമുഖം](/3-terrarium/1-intro-to-html/README.md) | ജെൻ |
| 09 | [ടെറേറിയം](/3-terrarium/solution/README.md) | CSS ൽ പരിശീലിക്കുക | പേജ് പ്രതികരണാത്മകമാക്കുന്നതുൾപ്പെടെ CSS-ന്റെ അടിസ്ഥാനകാര്യങ്ങളിൽ ശ്രദ്ധ കേന്ദ്രീകരിച്ചുകൊണ്ട് ഓൺലൈൻ ടെറേറിയം സ്റ്റൈൽ ചെയ്യുന്നതിന് സിഎസ്എസ് നിർമ്മിക്കുക | [CSS ന്റെ ആമുഖം](/3-terrarium/2-intro-to-css/README.md) | ജെൻ |
| 11 | [ടൈപ്പിംഗ് ഗെയിം](/4-typing-game/solution) | ടൈപ്പിംഗ് ഗെയിം നിർമ്മിക്കുക | നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ആപ്പിന്റെ ലോജിക് ഡ്രൈവ് ചെയ്യുന്നതിന് കീബോർഡ് ഇവന്റുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക | [ഇവന്റ്-ഡ്രൈവിംഗ് പ്രോഗ്രാമിംഗ്](/4-typing-game/typing-game/README.md) | ക്രിസ്റ്റഫർ |
| 12 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution) | ബ്രൗസറുകളുമായി പ്രവർത്തിക്കുന്നു | ബ്രൗസറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു, അവയുടെ ചരിത്രം, ബ്രൗസർ എക്സ്റ്റെൻഷന്റെ ആദ്യ ഘടകങ്ങൾ എങ്ങനെ സ്കഫോൾഡ് ആാമെന്ന് മനസിലാക്കുക | [ബ്രൗസറുകളെ കുറിച്ച്](/5-browser-extension/1-about-browsers/README.md) | ജെൻ |
| 13 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution) | ഒരു ഫോം നിർമ്മിക്കുക, ഒരു എപിഐ വിളിക്കുക, പ്രാദേശിക സംഭരണത്തിൽ വേരിയബിളുകൾ സംഭരിക്കുക | പ്രാദേശിക സംഭരണത്തിൽ സംഭരിച്ചിരിക്കുന്ന വേരിയബിളുകൾ ഉപയോഗിച്ച് ഒരു API വിളിക്കുന്നതിനായി നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റെൻഷന്റെ ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങൾ നിർമ്മിക്കുക | [APIs, ഫോമുകളും ലോക്കൽ സ്റ്റോറേജും](/5-browser-extension/2-forms-browsers-local-storage/README.md) | ജെൻ |
| 14 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution) | ബ്രൗസറിലെ പശ്ചാത്തല പ്രക്രിയകൾ, വെബ് പ്രകടനം | എക്സ്റ്റെൻഷന്റെ ഐക്കൺ കൈകാര്യം ചെയ്യുന്നതിന് ബ്രൗസറിന്റെ പശ്ചാത്തല പ്രക്രിയകൾ ഉപയോഗിക്കുക; വെബ് പ്രകടനത്തെക്കുറിച്ചും നിർമ്മിക്കുന്നതിനുള്ള ചില ഒപ്റ്റിമൈസേഷനുകളെ കുറിച്ചും അറിയുക | [പശ്ചാത്തല ജോലികളും പ്രകടനവും](/5-browser-extension/3-background-tasks-and-performance/README.md) | ജെൻ |
| 15 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് കൂടുതൽ അഡ്വാൻസ്ഡ് ഗെയിം ഡെവലപ്പ് മെന്റ് | ഒരു ഗെയിം നിർമ്മിക്കുന്നതിനുള്ള തയ്യാറെടുപ്പിൽ ക്ലാസുകളും കോമ്പോസിഷൻ, പബ്/സബ് പാറ്റേൺ എന്നിവ ഉപയോഗിച്ച് അനന്തരാവകാശത്തെക്കുറിച്ച് അറിയുക | [അഡ്വാൻസ്ഡ് ഗെയിം ഡെവലപ്പ്മെന്റിന്റെ ആമുഖം](/6-space-game/1-introduction/README.md) | ക്രിസ് |
| 16 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | ക്യാൻവാസിലേക്ക് വരയ്ക്കുന്നു | ഒരു സ്ക്രീനിലേക്ക് ഘടകങ്ങൾ വരയ്ക്കാൻ ഉപയോഗിക്കുന്ന കാൻവാസ് API കുറിച്ച് അറിയുക | [ക്യാൻവാസിലേക്ക് വരയ്ക്കുക ](/6-space-game/2-drawing-to-canvas/README.md) | ക്രിസ് |
| 17 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | സ്ക്രീനിന് ചുറ്റും എലമെൻറ് ചലിപ്പിക്കുന്നു | കാർട്ടീഷ്യൻ നിർദ്ദേശാങ്കങ്ങളും കാൻവാസ് API ഉപയോഗിച്ച് മൂലകങ്ങൾക്ക് എങ്ങനെ ചലനം നേടാൻ കഴിയുമെന്ന് കണ്ടെത്തുക | [ചുറ്റും എലമെൻറ് ചലിപ്പിക്കുന്നു](/6-space-game/3-moving-elements-around/README.md) | ക്രിസ് |
| 18 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | കോളിഷൻ കണ്ടെത്തൽ | കീപ്രസ്സുകൾ ഉപയോഗിച്ച് ഘടകങ്ങൾ കൂട്ടിമുട്ടുകയും പരസ്പരം പ്രതികരിക്കുകയും ഗെയിമിന്റെ പ്രകടനം ഉറപ്പാക്കുന്നതിന് ഒരു കൂൾഡൗൺ ഫംഗ്ഷൻ നൽകുകയും ചെയ്യുക | [കൂട്ടിയിടി കണ്ടെത്തൽ](/6-space-game/4-collision-detection/README.md) | ക്രിസ് |
| 19 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | സ്കോർ നിലനിർത്തൽ | ഗെയിമിന്റെ നിലയെയും പ്രകടനത്തെയും അടിസ്ഥാനമാക്കി ഗണിത കണക്കുകൂട്ടലുകൾ നിർവഹിക്കുക | [സ്കോർ നിലനിർത്തൽ](/6-space-game/5-keeping-score/README.md) | ക്രിസ് |
| 20 | [സ്പേസ് ഗെയിം](/6-space-game/solution) | ഗെയിം അവസാനിപ്പിക്കുകയും പുനരാരംഭിക്കുകയും ചെയ്യുന്നു | ആസ്തികൾ വൃത്തിയാക്കുന്നതും വേരിയബിൾ മൂല്യങ്ങൾ പുനക്രമീകരിക്കുന്നതും ഉൾപ്പെടെ ഗെയിം അവസാനിപ്പിക്കുന്നതിനെകുറിച്ചും പുനരാരംഭിക്കുന്നതിനെ കുറിച്ചും അറിയുക | [അവസാനങ്ങളുടെ നിബന്ധനകൾ ](/6-space-game/6-end-condition/README.md) | ക്രിസ് |
| 21 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | HTML ഒരു വെബ് ആപ്പിലെ ടെംപ്ലേറ്റുകളും റൂട്ടുകളും | റൂട്ടിംഗും എച്ച്ടിഎംഎൽ ടെംപ്ലേറ്റുകളും ഉപയോഗിച്ച് ഒരു മൾട്ടിപേജ് വെബ് സൈറ്റിന്റെ ആർക്കിടെക്ചറിന്റെ സ്കഫോൾഡ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് മനസിലാക്കുക | [HTML ടെംപ്ലേറ്റുകളും റൂട്ടുകളും](/7-bank-project/1-template-route/README.md) | യോഹാൻ |
| 22 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | ലോഗിൻ, രജിസ്ട്രേഷൻ ഫോം നിർമ്മിക്കുക | ഫോമുകൾ നിർമ്മിക്കുന്നതിനെ കുറിച്ചും വാലിഡേഷൻ റുട്ടീൻ കൈമാറുന്നതിനെ കുറിച്ചും അറിയുക | [ഫോമുകൾ](/7-bank-project/2-forms/README.md) | യോഹാൻ |
| 23 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | ഡാറ്റ കൊണ്ടുവരുന്നതും ഉപയോഗിക്കുന്നതുമായ രീതികൾ | ഡാറ്റ നിങ്ങളുടെ ആപ്പിലേക്ക് എങ്ങനെ ഒഴുകുന്നു, അത് എങ്ങനെ കൊണ്ടുവരാം, സംഭരിക്കാം, ഉപേക്ഷിക്കാം | [ഡാറ്റ](/7-bank-project/3-data/README.md) | യോഹാൻ |
| 24 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution) | സ്റ്റേറ്റ് മാനേജ്മെന്റിന്റെ ആശയങ്ങൾ | നിങ്ങളുടെ ആപ്പ് എങ്ങനെ സ്റ്റേറ്റ്നിലനിർത്തുന്നു, പ്രോഗ്രാമായി എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്ന് അറിയുക | [സ്റ്റേറ്റ് മാനേജ്മെന്റ്](/7-bank-project/4-state-management/README.md) | യോഹാൻ |
| 11 | [ടൈപ്പിംഗ് ഗെയിം](/4-typing-game/solution/README.md) | ടൈപ്പിംഗ് ഗെയിം നിർമ്മിക്കുക | നിങ്ങളുടെ ജാവാസ്ക്രിപ്റ്റ് ആപ്പിന്റെ ലോജിക് ഡ്രൈവ് ചെയ്യുന്നതിന് കീബോർഡ് ഇവന്റുകൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് മനസിലാക്കുക | [ഇവന്റ്-ഡ്രൈവിംഗ് പ്രോഗ്രാമിംഗ്](/4-typing-game/typing-game/README.md) | ക്രിസ്റ്റഫർ |
| 12 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution/README.md) | ബ്രൗസറുകളുമായി പ്രവർത്തിക്കുന്നു | ബ്രൗസറുകൾ എങ്ങനെ പ്രവർത്തിക്കുന്നു, അവയുടെ ചരിത്രം, ബ്രൗസർ എക്സ്റ്റെൻഷന്റെ ആദ്യ ഘടകങ്ങൾ എങ്ങനെ സ്കഫോൾഡ് ആാമെന്ന് മനസിലാക്കുക | [ബ്രൗസറുകളെ കുറിച്ച്](/5-browser-extension/1-about-browsers/README.md) | ജെൻ |
| 13 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution/README.md) | ഒരു ഫോം നിർമ്മിക്കുക, ഒരു എപിഐ വിളിക്കുക, പ്രാദേശിക സംഭരണത്തിൽ വേരിയബിളുകൾ സംഭരിക്കുക | പ്രാദേശിക സംഭരണത്തിൽ സംഭരിച്ചിരിക്കുന്ന വേരിയബിളുകൾ ഉപയോഗിച്ച് ഒരു API വിളിക്കുന്നതിനായി നിങ്ങളുടെ ബ്രൗസർ എക്സ്റ്റെൻഷന്റെ ജാവാസ്ക്രിപ്റ്റ് ഘടകങ്ങൾ നിർമ്മിക്കുക | [APIs, ഫോമുകളും ലോക്കൽ സ്റ്റോറേജും](/5-browser-extension/2-forms-browsers-local-storage/README.md) | ജെൻ |
| 14 | [ഗ്രീൻ ബ്രൗസർ എക്സ്റ്റെൻഷൻ](/5-browser-extension/solution/README.md) | ബ്രൗസറിലെ പശ്ചാത്തല പ്രക്രിയകൾ, വെബ് പ്രകടനം | എക്സ്റ്റെൻഷന്റെ ഐക്കൺ കൈകാര്യം ചെയ്യുന്നതിന് ബ്രൗസറിന്റെ പശ്ചാത്തല പ്രക്രിയകൾ ഉപയോഗിക്കുക; വെബ് പ്രകടനത്തെക്കുറിച്ചും നിർമ്മിക്കുന്നതിനുള്ള ചില ഒപ്റ്റിമൈസേഷനുകളെ കുറിച്ചും അറിയുക | [പശ്ചാത്തല ജോലികളും പ്രകടനവും](/5-browser-extension/3-background-tasks-and-performance/README.md) | ജെൻ |
| 15 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് കൂടുതൽ അഡ്വാൻസ്ഡ് ഗെയിം ഡെവലപ്പ് മെന്റ് | ഒരു ഗെയിം നിർമ്മിക്കുന്നതിനുള്ള തയ്യാറെടുപ്പിൽ ക്ലാസുകളും കോമ്പോസിഷൻ, പബ്/സബ് പാറ്റേൺ എന്നിവ ഉപയോഗിച്ച് അനന്തരാവകാശത്തെക്കുറിച്ച് അറിയുക | [അഡ്വാൻസ്ഡ് ഗെയിം ഡെവലപ്പ്മെന്റിന്റെ ആമുഖം](/6-space-game/1-introduction/README.md) | ക്രിസ് |
| 16 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | ക്യാൻവാസിലേക്ക് വരയ്ക്കുന്നു | ഒരു സ്ക്രീനിലേക്ക് ഘടകങ്ങൾ വരയ്ക്കാൻ ഉപയോഗിക്കുന്ന കാൻവാസ് API കുറിച്ച് അറിയുക | [ക്യാൻവാസിലേക്ക് വരയ്ക്കുക ](/6-space-game/2-drawing-to-canvas/README.md) | ക്രിസ് |
| 17 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | സ്ക്രീനിന് ചുറ്റും എലമെൻറ് ചലിപ്പിക്കുന്നു | കാർട്ടീഷ്യൻ നിർദ്ദേശാങ്കങ്ങളും കാൻവാസ് API ഉപയോഗിച്ച് മൂലകങ്ങൾക്ക് എങ്ങനെ ചലനം നേടാൻ കഴിയുമെന്ന് കണ്ടെത്തുക | [ചുറ്റും എലമെൻറ് ചലിപ്പിക്കുന്നു](/6-space-game/3-moving-elements-around/README.md) | ക്രിസ് |
| 18 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | കോളിഷൻ കണ്ടെത്തൽ | കീപ്രസ്സുകൾ ഉപയോഗിച്ച് ഘടകങ്ങൾ കൂട്ടിമുട്ടുകയും പരസ്പരം പ്രതികരിക്കുകയും ഗെയിമിന്റെ പ്രകടനം ഉറപ്പാക്കുന്നതിന് ഒരു കൂൾഡൗൺ ഫംഗ്ഷൻ നൽകുകയും ചെയ്യുക | [കൂട്ടിയിടി കണ്ടെത്തൽ](/6-space-game/4-collision-detection/README.md) | ക്രിസ് |
| 19 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | സ്കോർ നിലനിർത്തൽ | ഗെയിമിന്റെ നിലയെയും പ്രകടനത്തെയും അടിസ്ഥാനമാക്കി ഗണിത കണക്കുകൂട്ടലുകൾ നിർവഹിക്കുക | [സ്കോർ നിലനിർത്തൽ](/6-space-game/5-keeping-score/README.md) | ക്രിസ് |
| 20 | [സ്പേസ് ഗെയിം](/6-space-game/solution/README.md) | ഗെയിം അവസാനിപ്പിക്കുകയും പുനരാരംഭിക്കുകയും ചെയ്യുന്നു | ആസ്തികൾ വൃത്തിയാക്കുന്നതും വേരിയബിൾ മൂല്യങ്ങൾ പുനക്രമീകരിക്കുന്നതും ഉൾപ്പെടെ ഗെയിം അവസാനിപ്പിക്കുന്നതിനെകുറിച്ചും പുനരാരംഭിക്കുന്നതിനെ കുറിച്ചും അറിയുക | [അവസാനങ്ങളുടെ നിബന്ധനകൾ ](/6-space-game/6-end-condition/README.md) | ക്രിസ് |
| 21 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution/README.md) | HTML ഒരു വെബ് ആപ്പിലെ ടെംപ്ലേറ്റുകളും റൂട്ടുകളും | റൂട്ടിംഗും എച്ച്ടിഎംഎൽ ടെംപ്ലേറ്റുകളും ഉപയോഗിച്ച് ഒരു മൾട്ടിപേജ് വെബ് സൈറ്റിന്റെ ആർക്കിടെക്ചറിന്റെ സ്കഫോൾഡ് എങ്ങനെ സൃഷ്ടിക്കാമെന്ന് മനസിലാക്കുക | [HTML ടെംപ്ലേറ്റുകളും റൂട്ടുകളും](/7-bank-project/1-template-route/README.md) | യോഹാൻ |
| 22 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution/README.md) | ലോഗിൻ, രജിസ്ട്രേഷൻ ഫോം നിർമ്മിക്കുക | ഫോമുകൾ നിർമ്മിക്കുന്നതിനെ കുറിച്ചും വാലിഡേഷൻ റുട്ടീൻ കൈമാറുന്നതിനെ കുറിച്ചും അറിയുക | [ഫോമുകൾ](/7-bank-project/2-forms/README.md) | യോഹാൻ |
| 23 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution/README.md) | ഡാറ്റ കൊണ്ടുവരുന്നതും ഉപയോഗിക്കുന്നതുമായ രീതികൾ | ഡാറ്റ നിങ്ങളുടെ ആപ്പിലേക്ക് എങ്ങനെ ഒഴുകുന്നു, അത് എങ്ങനെ കൊണ്ടുവരാം, സംഭരിക്കാം, ഉപേക്ഷിക്കാം | [ഡാറ്റ](/7-bank-project/3-data/README.md) | യോഹാൻ |
| 24 | [ബാങ്കിംഗ് ആപ്പ്](/7-bank-project/solution/README.md) | സ്റ്റേറ്റ് മാനേജ്മെന്റിന്റെ ആശയങ്ങൾ | നിങ്ങളുടെ ആപ്പ് എങ്ങനെ സ്റ്റേറ്റ്നിലനിർത്തുന്നു, പ്രോഗ്രാമായി എങ്ങനെ കൈകാര്യം ചെയ്യണമെന്ന് അറിയുക | [സ്റ്റേറ്റ് മാനേജ്മെന്റ്](/7-bank-project/4-state-management/README.md) | യോഹാൻ |
## ഓഫ്ലൈൻ ആക്സസ്സ്
നിങ്ങൾക്ക് ഈ ഡോക്യുമെന്റേഷൻ [Docsify](https://docsify.js.org/#/) ഉപയോഗിച്ച് ഓഫ്ലൈനിൽ പ്രവർത്തിപ്പിക്കാനാകും. ഈ റിപ്പോ ഫോർക്ക് ചെയ്യുക, [Docsify ഇന്സ്റ്റോള് ചെയ്യുക](https://docsify.js.org/#/quickstart) നിങ്ങളുടെ പ്രാദേശിക മെഷീനിൽ,തുടർന്ന് ഈ റിപ്പോയുടെ റൂട്ട് ഫോൾഡറിൽ `docsify serve` ടൈപ്പ് ചെയ്യുക. നിങ്ങളുടെ ലോക്കൽഹോസ്റ്റിൽ പോർട്ട് 3000 ൽ വെബ്സൈറ്റ് കാണാം : `localhost:3000`.
## പിഡിഫ്
## പിഡിഫ്
എല്ലാ പാഠങ്ങളുടെയും ഒരു PDF കാണാം [ഇവിടെ](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf)
@ -77,21 +77,21 @@ Também podem ser acessados localmente pela pasta `quiz-app`.
| 07 | Básico de JS | Arrays e Loops | Trabalhe com dados usando arrays e loops em JavaScript | [Arrays e Loops](/2-js-basics/4-arrays-loops/translations/README.pt.md) | Jasmine |
| 08 | [Terrarium](/3-terrarium/solution/README.md) | HTML na Prática | Construa o HTML para criar um terrário online, focando em construir um layout | [Introdução a HTML](/3-terrarium/1-intro-to-html/translations/README.pt-BR.md) | Jen |
| 09 | [Terrarium](/3-terrarium/solution/README.md) | CSS na Prática | Construa o CSS para estilizar o terrário online, focando no básico de inclusão CSS fazendo a página responsiva | [Introdução a CSS](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [Terrarium](/3-terrarium/solution) | JavaScript closures, DOM manipulation | Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar / soltar, focando em fechamentos e manipulação de DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution) | Construa um jogo de digitação | Aprenda a usar eventos de teclado para conduzir a lógica de seu aplicativo JavaScript | [Programação Orientada a Eventos](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão de navegador verde](/5-browser-extension/solution) | Trabalhando com navegadores | Aprenda como os navegadores funcionam, seu histórico e como organizar os primeiros elementos de uma extensão do navegador | [Sobre navegadores](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão de navegador verde](/5-browser-extension/solution) | Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local | Construa os elementos JavaScript da extensão do seu navegador para chamar uma API usando variáveis armazenadas no armazenamento local | [APIs, Formulários e Armazenamento Local](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão de navegador verde](/5-browser-extension/solution) | Processos em segundo plano no navegador, desempenho da web | Use os processos de segundo plano do navegador para gerenciar o ícone da extensão; aprender sobre o desempenho da web e algumas otimizações para fazer | [Tarefas e desempenho em segundo plano](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](/6-space-game/solution) | Desenvolvimento de jogos mais avançado com JavaScript | Saiba mais sobre herança usando classes e composição e o padrão Pub / Sub, na preparação para a construção de um jogo | [Introdução ao desenvolvimento avançado de um jogo em Javascript](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](/6-space-game/solution) | Desenhar na tela | Saiba mais sobre a API Canvas, usada para desenhar elementos em uma tela | [Desenhando na Tela](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](/6-space-game/solution) | Movendo elementos pela tela | Descubra como os elementos podem ganhar movimento usando as coordenadas cartesianas e a API Canvas | [Movendo elementos pela Tela](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](/6-space-game/solution) | Detecção de Colisão | Faça os elementos colidirem e reagirem uns com os outros usando o pressionamento de teclas e fornecer uma função de resfriamento para garantir o desempenho do jogo | [Detecção de Colisão](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](/6-space-game/solution) | Mantendo a pontuação | Faça cálculos matemáticos com base no status e no desempenho do jogo | [Mantendo a pontuação](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](/6-space-game/solution) | Terminando e reiniciando o jogo | Saiba mais sobre como encerrar e reiniciar o jogo, incluindo limpeza de ativos e redefinição de valores de variáveis | [A condição de encerramento](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution) | Templates HTML e rotas em um aplicativo da web | Aprenda a criar o andaime da arquitetura de um site de várias páginas usando modelos de roteamento e HTML | [HTML Templates e Rotas](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution) | Criar um formulário de Login e Cadastro | Aprenda sobre a construção de formulários e rotinas de validação | [Formulários](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution) | Métodos de busca e uso de dados | Como os dados fluem para dentro e para fora do seu aplicativo, como buscá-los, armazená-los e descartá-los | [Dados](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution) | Conceitos de Gestão do Estado | Saiba como seu aplicativo mantém o estado e como gerenciá-lo de maneira programática | [Gestão de estados](/7-bank-project/4-state-management/README.md) | Yohan |
| 10 | [Terrarium](/3-terrarium/solution/README.md) | JavaScript closures, DOM manipulation | Construa o JavaScript para fazer o terrário funcionar como uma interface de arrastar / soltar, focando em fechamentos e manipulação de DOM | [JavaScript Closures, DOM manipulation](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [Typing Game](/4-typing-game/solution/README.md) | Construa um jogo de digitação | Aprenda a usar eventos de teclado para conduzir a lógica de seu aplicativo JavaScript | [Programação Orientada a Eventos](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [Extensão de navegador verde](/5-browser-extension/solution/README.md) | Trabalhando com navegadores | Aprenda como os navegadores funcionam, seu histórico e como organizar os primeiros elementos de uma extensão do navegador | [Sobre navegadores](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [Extensão de navegador verde](/5-browser-extension/solution/README.md) | Construindo um formulário, chamando uma API e armazenando variáveis no armazenamento local | Construa os elementos JavaScript da extensão do seu navegador para chamar uma API usando variáveis armazenadas no armazenamento local | [APIs, Formulários e Armazenamento Local](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [Extensão de navegador verde](/5-browser-extension/solution/README.md) | Processos em segundo plano no navegador, desempenho da web | Use os processos de segundo plano do navegador para gerenciar o ícone da extensão; aprender sobre o desempenho da web e algumas otimizações para fazer | [Tarefas e desempenho em segundo plano](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [Jogo Espacial](/6-space-game/solution/README.md) | Desenvolvimento de jogos mais avançado com JavaScript | Saiba mais sobre herança usando classes e composição e o padrão Pub / Sub, na preparação para a construção de um jogo | [Introdução ao desenvolvimento avançado de um jogo em Javascript](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [Jogo Espacial](/6-space-game/solution/README.md) | Desenhar na tela | Saiba mais sobre a API Canvas, usada para desenhar elementos em uma tela | [Desenhando na Tela](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [Jogo Espacial](/6-space-game/solution/README.md) | Movendo elementos pela tela | Descubra como os elementos podem ganhar movimento usando as coordenadas cartesianas e a API Canvas | [Movendo elementos pela Tela](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [Jogo Espacial](/6-space-game/solution/README.md) | Detecção de Colisão | Faça os elementos colidirem e reagirem uns com os outros usando o pressionamento de teclas e fornecer uma função de resfriamento para garantir o desempenho do jogo | [Detecção de Colisão](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [Jogo Espacial](/6-space-game/solution/README.md) | Mantendo a pontuação | Faça cálculos matemáticos com base no status e no desempenho do jogo | [Mantendo a pontuação](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [Jogo Espacial](/6-space-game/solution/README.md) | Terminando e reiniciando o jogo | Saiba mais sobre como encerrar e reiniciar o jogo, incluindo limpeza de ativos e redefinição de valores de variáveis | [A condição de encerramento](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [Banking App](/7-bank-project/solution/README.md) | Templates HTML e rotas em um aplicativo da web | Aprenda a criar o andaime da arquitetura de um site de várias páginas usando modelos de roteamento e HTML | [HTML Templates e Rotas](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [Banking App](/7-bank-project/solution/README.md) | Criar um formulário de Login e Cadastro | Aprenda sobre a construção de formulários e rotinas de validação | [Formulários](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [Banking App](/7-bank-project/solution/README.md) | Métodos de busca e uso de dados | Como os dados fluem para dentro e para fora do seu aplicativo, como buscá-los, armazená-los e descartá-los | [Dados](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Banking App](/7-bank-project/solution/README.md) | Conceitos de Gestão do Estado | Saiba como seu aplicativo mantém o estado e como gerenciá-lo de maneira programática | [Gestão de estados](/7-bank-project/4-state-management/README.md) | Yohan |
| 07 | జెఎస్ బేసిక్స్ | ఎరాయ్ లు మరియు లూప్ లు | జావాస్క్రిప్ట్ లో ఎరాయ్ లు మరియు లూప్ లను ఉపయోగించి డేటాతో పనిచేయండి. | [ఎరాయ్ లు మరియు లూప్ లు](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [టెర్రిరియం](/3-terrarium/solution/README.md) | ప్రాక్టీస్ లో హెచ్ టిఎమ్ ఎల్ | లేఅవుట్ నిర్మించడంపై దృష్టి సారించి, ఆన్ లైన్ టెర్రిరియం సృష్టించడం కొరకు హెచ్ టిఎమ్ ఎల్ ని రూపొందించండి. | [హెచ్ టిఎమ్ ఎల్ పరిచయం](/3-terrarium/1-intro-to-html/README.md) | Jen |
| 09 | [టెర్రిరియం](/3-terrarium/solution/README.md) | ఆచరణలో సిఎస్ఎస్ | పేజీని ప్రతిస్పందించేలా చేయడం సహా సిఎస్ఎస్ యొక్క ప్రాథమికాంశాలపై దృష్టి సారించి, ఆన్ లైన్ టెర్రరియంస్టైల్ చేయడానికి సిఎస్ఎస్ ని నిర్మించండి. | [సిఎస్ఎస్ పరిచయం](/3-terrarium/2-intro-to-css/README.md) | Jen |
| 10 | [టెర్రిరియం](/3-terrarium/solution) | జావాస్క్రిప్ట్ మూసివేతలు, డి.ఒ.ఎం మానిప్యులేషన్ | క్లోజర్లు మరియు డివోఎమ్ మానిప్యులేషన్ పై దృష్టి సారించి, డ్రాగ్/డ్రాప్ ఇంటర్ ఫేస్ వలే టెర్రిరియం పనిచేయడానికి జావాస్క్రిప్ట్ ని రూపొందించండి. | [జావాస్క్రిప్ట్ మూసివేతలు, డి.ఒ.ఎం మానిప్యులేషన్](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [టైపింగ్ గేమ్](/4-typing-game/solution) | టైపింగ్ గేమ్ నిర్మించండి | మీ జావాస్క్రిప్ట్ యాప్ యొక్క లాజిక్ డ్రైవ్ చేయడం కొరకు కీబోర్డ్ ఈవెంట్ లను ఎలా ఉపయోగించాలో తెలుసుకోండి. | [ఈవెంట్ ఆధారిత ప్రోగ్రామింగ్](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution) | బ్రౌజర్ లతో పనిచేయడం | బ్రౌజర్ లు ఏవిధంగా పనిచేస్తాయి, వాటి చరిత్ర మరియు బ్రౌజర్ పొడిగింపు యొక్క మొదటి ఎలిమెంట్ లను ఎలా పరంజా చేయాలో తెలుసుకోండి. | [బ్రౌజర్ల గురించి](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution) | ఒక ఫారాన్ని నిర్మించడం, APఐని పిలవడం మరియు స్థానిక స్టోరేజీలో వేరియబుల్స్ నిల్వ చేయడం | స్థానిక స్టోరేజీలో నిల్వ చేయబడ్డ వేరియబుల్స్ ఉపయోగించి APఐకి కాల్ చేయడం కొరకు మీ బ్రౌజర్ పొడిగింపు యొక్క జావాస్క్రిప్ట్ ఎలిమెంట్ లను రూపొందించండి. | [APఐలు, ఫారాలు మరియు స్థానిక స్టోరేజీ](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution) | బ్రౌజర్ లో నేపథ్య ప్రక్రియలు, వెబ్ పనితీరు | ఎక్స్ టెన్షన్ యొక్క ఐకాన్ ని నిర్వహించడం కొరకు బ్రౌజర్ యొక్క బ్యాక్ గ్రౌండ్ ప్రాసెస్ లను ఉపయోగించండి. వెబ్ పనితీరు మరియు కొన్ని ఆప్టిమైజేషన్ ల గురించి తెలుసుకోండి | [బ్యాక్ గ్రౌండ్ టాస్క్ లు మరియు పనితీరు](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [స్పేస్ గేమ్](/6-space-game/solution) | జావాస్క్రిప్ట్ తో మరింత అధునాతన గేమ్ డెవలప్ మెంట్ | ఒక గేమ్ ని రూపొందించడం కొరకు సిద్ధం చేయడం కొరకు క్లాసులు మరియు కంపోజిషన్ మరియు పబ్/సబ్ ప్యాట్రన్ రెండింటిని ఉపయోగించి ఇన్హెరిటెన్స్ గురించి తెలుసుకోండి. | [అధునాతన గేమ్ డెవలప్ మెంట్ పరిచయం](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [స్పేస్ గేమ్](/6-space-game/solution) | కాన్వాస్ కు డ్రాయింగ్ | స్క్రీన్ కు ఎలిమెంట్ లను గీయడం కొరకు ఉపయోగించే కాన్వాస్ APఐ గురించి తెలుసుకోండి. | [కాన్వాస్ కు డ్రాయింగ్](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [స్పేస్ గేమ్](/6-space-game/solution) | స్క్రీన్ చుట్టూ మూలకాలను కదిలించడం | కార్టేసియన్ కోఆర్డినేట్ లు మరియు కాన్వాస్ ఎపిఐఉపయోగించి ఎలిమెంట్ లు చలనాన్ని ఎలా పొందగలవో కనుగొనండి. | [చుట్టూ మూలకాలను తరలించడం](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [స్పేస్ గేమ్](/6-space-game/solution) | తాడన గుర్తింపు | కీప్రెస్ లను ఉపయోగించి ఎలిమెంట్ లు ఒకదానికొకటి ఢీకొనడం మరియు ప్రతిస్పందించేలా చేయడం మరియు గేమ్ యొక్క పనితీరును ధృవీకరించడం కొరకు కూల్ డౌన్ ఫంక్షన్ ని అందించడం | [తాడన గుర్తింపు](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [స్పేస్ గేమ్](/6-space-game/solution) | స్కోరును ఉంచడం | ఆట యొక్క స్థితి మరియు పనితీరు ఆధారంగా గణిత గణనలు నిర్వహించండి | [కీపింగ్ స్కోరు](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [స్పేస్ గేమ్](/6-space-game/solution) | ఆటను ముగించడం మరియు తిరిగి ప్రారంభించడం | ఆస్తులను శుభ్రం చేయడం మరియు వేరియబుల్ విలువలను రీసెట్ చేయడం సహా గేమ్ ని ముగించడం మరియు తిరిగి ప్రారంభించడం గురించి తెలుసుకోండి. | [ముగింపు పరిస్థితి](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | వెబ్ యాప్ లో హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లు మరియు రూట్ లు | రూటింగ్ మరియు హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లను ఉపయోగించి మల్టీపేజీ వెబ్ సైట్ యొక్క ఆర్కిటెక్చర్ యొక్క పరంజాను ఎలా సృష్టించాలో తెలుసుకోండి. | [హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లు మరియు రూట్ లు](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | లాగిన్ మరియు రిజిస్ట్రేషన్ ఫారాన్ని రూపొందించండి | బిల్డింగ్ ఫారాలు మరియు ధ్రువీకరణ రొటీన్ ల హ్యాండింగ్ గురించి తెలుసుకోండి | [రూపాలు](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | డేటాను పొందడం మరియు ఉపయోగించే విధానాలు | డేటా మీ యాప్ లో మరియు బయటకు ఎలా ప్రవహిస్తుంది, దానిని ఎలా తీసుకురావాలి, నిల్వ చేయాలి మరియు పారవేయాలి | [రూపాలు](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution) | స్టేట్ మేనేజ్ మెంట్ యొక్క భావనలు | మీ యాప్ స్థితిని ఎలా నిలుపుకుందో మరియు దానిని ప్రోగ్రామ్ గా ఎలా నిర్వహించాలో తెలుసుకోండి. | [రాష్ట్ర నిర్వహణ](/7-bank-project/4-state-management/README.md) | Yohan |
| 10 | [టెర్రిరియం](/3-terrarium/solution/README.md) | జావాస్క్రిప్ట్ మూసివేతలు, డి.ఒ.ఎం మానిప్యులేషన్ | క్లోజర్లు మరియు డివోఎమ్ మానిప్యులేషన్ పై దృష్టి సారించి, డ్రాగ్/డ్రాప్ ఇంటర్ ఫేస్ వలే టెర్రిరియం పనిచేయడానికి జావాస్క్రిప్ట్ ని రూపొందించండి. | [జావాస్క్రిప్ట్ మూసివేతలు, డి.ఒ.ఎం మానిప్యులేషన్](/3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | [టైపింగ్ గేమ్](/4-typing-game/solution/README.md) | టైపింగ్ గేమ్ నిర్మించండి | మీ జావాస్క్రిప్ట్ యాప్ యొక్క లాజిక్ డ్రైవ్ చేయడం కొరకు కీబోర్డ్ ఈవెంట్ లను ఎలా ఉపయోగించాలో తెలుసుకోండి. | [ఈవెంట్ ఆధారిత ప్రోగ్రామింగ్](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution/README.md) | బ్రౌజర్ లతో పనిచేయడం | బ్రౌజర్ లు ఏవిధంగా పనిచేస్తాయి, వాటి చరిత్ర మరియు బ్రౌజర్ పొడిగింపు యొక్క మొదటి ఎలిమెంట్ లను ఎలా పరంజా చేయాలో తెలుసుకోండి. | [బ్రౌజర్ల గురించి](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 13 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution/README.md) | ఒక ఫారాన్ని నిర్మించడం, APఐని పిలవడం మరియు స్థానిక స్టోరేజీలో వేరియబుల్స్ నిల్వ చేయడం | స్థానిక స్టోరేజీలో నిల్వ చేయబడ్డ వేరియబుల్స్ ఉపయోగించి APఐకి కాల్ చేయడం కొరకు మీ బ్రౌజర్ పొడిగింపు యొక్క జావాస్క్రిప్ట్ ఎలిమెంట్ లను రూపొందించండి. | [APఐలు, ఫారాలు మరియు స్థానిక స్టోరేజీ](/5-browser-extension/2-forms-browsers-local-storage/README.md) | Jen |
| 14 | [గ్రీన్ బ్రౌజర్ పొడిగింపు](/5-browser-extension/solution/README.md) | బ్రౌజర్ లో నేపథ్య ప్రక్రియలు, వెబ్ పనితీరు | ఎక్స్ టెన్షన్ యొక్క ఐకాన్ ని నిర్వహించడం కొరకు బ్రౌజర్ యొక్క బ్యాక్ గ్రౌండ్ ప్రాసెస్ లను ఉపయోగించండి. వెబ్ పనితీరు మరియు కొన్ని ఆప్టిమైజేషన్ ల గురించి తెలుసుకోండి | [బ్యాక్ గ్రౌండ్ టాస్క్ లు మరియు పనితీరు](/5-browser-extension/3-background-tasks-and-performance/README.md) | Jen |
| 15 | [స్పేస్ గేమ్](/6-space-game/solution/README.md) | జావాస్క్రిప్ట్ తో మరింత అధునాతన గేమ్ డెవలప్ మెంట్ | ఒక గేమ్ ని రూపొందించడం కొరకు సిద్ధం చేయడం కొరకు క్లాసులు మరియు కంపోజిషన్ మరియు పబ్/సబ్ ప్యాట్రన్ రెండింటిని ఉపయోగించి ఇన్హెరిటెన్స్ గురించి తెలుసుకోండి. | [అధునాతన గేమ్ డెవలప్ మెంట్ పరిచయం](/6-space-game/1-introduction/README.md) | Chris |
| 16 | [స్పేస్ గేమ్](/6-space-game/solution/README.md) | కాన్వాస్ కు డ్రాయింగ్ | స్క్రీన్ కు ఎలిమెంట్ లను గీయడం కొరకు ఉపయోగించే కాన్వాస్ APఐ గురించి తెలుసుకోండి. | [కాన్వాస్ కు డ్రాయింగ్](/6-space-game/2-drawing-to-canvas/README.md) | Chris |
| 17 | [స్పేస్ గేమ్](/6-space-game/solution/README.md) | స్క్రీన్ చుట్టూ మూలకాలను కదిలించడం | కార్టేసియన్ కోఆర్డినేట్ లు మరియు కాన్వాస్ ఎపిఐఉపయోగించి ఎలిమెంట్ లు చలనాన్ని ఎలా పొందగలవో కనుగొనండి. | [చుట్టూ మూలకాలను తరలించడం](/6-space-game/3-moving-elements-around/README.md) | Chris |
| 18 | [స్పేస్ గేమ్](/6-space-game/solution/README.md) | తాడన గుర్తింపు | కీప్రెస్ లను ఉపయోగించి ఎలిమెంట్ లు ఒకదానికొకటి ఢీకొనడం మరియు ప్రతిస్పందించేలా చేయడం మరియు గేమ్ యొక్క పనితీరును ధృవీకరించడం కొరకు కూల్ డౌన్ ఫంక్షన్ ని అందించడం | [తాడన గుర్తింపు](/6-space-game/4-collision-detection/README.md) | Chris |
| 19 | [స్పేస్ గేమ్](/6-space-game/solution/README.md) | స్కోరును ఉంచడం | ఆట యొక్క స్థితి మరియు పనితీరు ఆధారంగా గణిత గణనలు నిర్వహించండి | [కీపింగ్ స్కోరు](/6-space-game/5-keeping-score/README.md) | Chris |
| 20 | [స్పేస్ గేమ్](/6-space-game/solution/README.md) | ఆటను ముగించడం మరియు తిరిగి ప్రారంభించడం | ఆస్తులను శుభ్రం చేయడం మరియు వేరియబుల్ విలువలను రీసెట్ చేయడం సహా గేమ్ ని ముగించడం మరియు తిరిగి ప్రారంభించడం గురించి తెలుసుకోండి. | [ముగింపు పరిస్థితి](/6-space-game/6-end-condition/README.md) | Chris |
| 21 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution/README.md) | వెబ్ యాప్ లో హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లు మరియు రూట్ లు | రూటింగ్ మరియు హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లను ఉపయోగించి మల్టీపేజీ వెబ్ సైట్ యొక్క ఆర్కిటెక్చర్ యొక్క పరంజాను ఎలా సృష్టించాలో తెలుసుకోండి. | [హెచ్ టిఎమ్ ఎల్ టెంప్లెట్ లు మరియు రూట్ లు](/7-bank-project/1-template-route/README.md) | Yohan |
| 22 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution/README.md) | లాగిన్ మరియు రిజిస్ట్రేషన్ ఫారాన్ని రూపొందించండి | బిల్డింగ్ ఫారాలు మరియు ధ్రువీకరణ రొటీన్ ల హ్యాండింగ్ గురించి తెలుసుకోండి | [రూపాలు](/7-bank-project/2-forms/README.md) | Yohan |
| 23 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution/README.md) | డేటాను పొందడం మరియు ఉపయోగించే విధానాలు | డేటా మీ యాప్ లో మరియు బయటకు ఎలా ప్రవహిస్తుంది, దానిని ఎలా తీసుకురావాలి, నిల్వ చేయాలి మరియు పారవేయాలి | [రూపాలు](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [బ్యాంకింగ్ యాప్](/7-bank-project/solution/README.md) | స్టేట్ మేనేజ్ మెంట్ యొక్క భావనలు | మీ యాప్ స్థితిని ఎలా నిలుపుకుందో మరియు దానిని ప్రోగ్రామ్ గా ఎలా నిర్వహించాలో తెలుసుకోండి. | [రాష్ట్ర నిర్వహణ](/7-bank-project/4-state-management/README.md) | Yohan |
Charles Emmanuel S. Ndiaye
4 years ago
committed by
GitHub