diff --git a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md index 8774c935..4ab1f90c 100644 --- a/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md +++ b/1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md @@ -140,16 +140,16 @@ back add r0,r1 Некоторые разработчики предпочитают менее графическое представление для своих повседневных задач и полагаются на командную строку для достижения этой цели. Разработка кода требует значительного набора текста, и некоторые разработчики предпочитают не мешать работе с клавиатурой и будут использовать сочетания клавиш для переключения между окнами рабочего стола, работы с разными файлами и использования инструментов. Большинство задач можно выполнить с помощью мыши, но одним из преимуществ использования командной строки является то, что многое можно сделать с помощью инструментов командной строки без необходимости переключаться между мышью и клавиатурой. Еще одним преимуществом командной строки является то, что они настраиваются, и вы можете сохранить свою настраиваемую конфигурацию, изменить ее позже, а также импортировать ее на новые устройства для разработки. Поскольку среды разработки настолько уникальны для каждого разработчика, некоторые избегают использования командной строки, некоторые будут полностью полагаться на нее, а некоторые предпочитают сочетание двух. -### Популярные параметры командной строки +### Популярные варианты командной строки -Параметры командной строки зависят от используемой вами операционной системы. +Варианты командной строки зависят от используемой вами операционной системы. _💻 = предустановлен в операционной системе._ #### Windows - [Powershell](https://docs.microsoft.com/powershell/scripting/overview?view=powershell-7?WT.mc_id=academic-13441-cxa) 💻 -- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (also known as CMD) 💻 +- [Command Line](https://docs.microsoft.com/windows-server/administration/windows-commands/windows-commands?WT.mc_id=academic-13441-cxa) (также известный как CMD) 💻 - [Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-13441-cxa) - [mintty](https://mintty.github.io/) @@ -167,7 +167,7 @@ _💻 = предустановлен в операционной системе. #### Популярные инструменты командной строки -- [Git](https://git-scm.com/) (💻 on most operating systems) +- [Git](https://git-scm.com/) (💻 в большинстве операционных систем) - [NPM](https://www.npmjs.com/) - [Yarn](https://classic.yarnpkg.com/en/docs/cli/) @@ -200,4 +200,4 @@ _💻 = предустановлен в операционной системе. ## Задание -[Чтение документации](assignment.md) +[Чтение документации](assignment.ru.md) diff --git a/1-getting-started-lessons/2-github-basics/translations/README.ru.md b/1-getting-started-lessons/2-github-basics/translations/README.ru.md index 4129f918..4368b99c 100644 --- a/1-getting-started-lessons/2-github-basics/translations/README.ru.md +++ b/1-getting-started-lessons/2-github-basics/translations/README.ru.md @@ -170,7 +170,7 @@ _Если применить этот коммит, то он <ваше сооб ## Работа над проектами с другими разработчиками -В своем репозитории перейдите в `Insights> Community`, чтобы увидеть, как ваш проект сравнивается с рекомендованными стандартами сообщества. +В своем репозитории перейдите в `Insights > Community`, чтобы увидеть, как ваш проект сравнивается с рекомендованными стандартами сообщества. Вот несколько вещей, которые могут улучшить ваш репозиторий на GitHub: @@ -186,7 +186,7 @@ _Если применить этот коммит, то он <ваше сооб ### Задание: Слияние кода -Документ CONTRIBUTING.md помогает людям разобраться, как вносить свой вклад в проект. В нем объясняется, какие типы вкладов вас интересуют и как работает этот процесс. Чтобы внести свой вклад в ваш репозиторий на GitHub, участникам потребуется выполнить ряд шагов: +Правила соучастия (например, документ `CONTRIBUTING.md`) помогают людям разобраться, как вносить свой вклад в проект. В нем объясняется, какие типы вкладов вас интересуют и как работает этот процесс. Чтобы внести свой вклад в ваш репозиторий на GitHub, участникам потребуется выполнить ряд шагов: 1. **Сделать ответвление вашего репозитория (Forking)**. Вы, вероятно, захотите, чтобы люди сделали _ответвление (fork)_ вашего проекта. Ответвление означает создание копии вашего репозитория в их профиле GitHub. 1. **Клонировать**. Оттуда они будут клонировать проект на свой локальный компьютер. @@ -244,7 +244,7 @@ _Если применить этот коммит, то он <ваше сооб Приведенная выше команда создает ветку в вашем, ответвленном от основного, репозитории. -1. **Открытие PR**. Далее вы хотите открыть PR. Вы делаете это, перейдя к ответвленному репозиторию на GitHub. Вы увидите подсказку на GitHub, где вам предложат, хотите ли вы создать новый PR. Вы нажимаете на это указание, и попадаете в интерфейс, где вы можете изменить заголовок сообщения к пул реквесту, можете дать ему более подходящее описание. Теперь владелец репозитория, от которого вы сделали ответвление, увидит этот PR, и (_скрестим пальцы_) он одобрит и примет ваш PR в свой репозиторий. Теперь вы соавтор, ура :) +1. **Открытие PR**. Далее, вы хотите открыть PR. Вы делаете это, перейдя к ответвленному репозиторию на GitHub. Вы увидите подсказку на GitHub, где вам предложат, хотите ли вы создать новый PR. Вы нажимаете на это указание, и попадаете в интерфейс, где вы можете изменить заголовок сообщения к пул реквесту, можете дать ему более подходящее описание. Теперь владелец репозитория, от которого вы сделали ответвление, увидит этот PR, и (_скрестим пальцы_) он одобрит и примет ваш PR в свой репозиторий. Теперь вы соавтор, ура :) 1. **Чистка (Clean up)**. Хорошей практикой считается _чистка_ после успешного слияния PR. Вы хотите очистить как локальную ветку, так и ветку, которую вы отправили на GitHub. Сначала удалим ее локально с помощью следующей команды: diff --git a/2-js-basics/translations/README.ru.md b/2-js-basics/translations/README.ru.md new file mode 100644 index 00000000..a9bd5211 --- /dev/null +++ b/2-js-basics/translations/README.ru.md @@ -0,0 +1,14 @@ +# Введение в JavaScript + +JavaScript это язык веб-программирования. В этих четырёх уроках вы изучите его основы. + +### Уроки + +1. [Переменные и типы данных](#) +2. [Функции и методы](#) +3. [Принятие решений с помощью JavaScript](#) +4. [Массивы и циклы](#) + +### Благодарность + +Эти уроки были ♥️ созданы [Жасмин Гринуэй](https://twitter.com/paladique), [Кристофером Харрисоном](https://twitter.com/geektrainer) и [Крисом Норингом](https://twitter.com/chris_noring). \ No newline at end of file diff --git a/6-space-game/4-collision-detection/translations/README.fr.md b/6-space-game/4-collision-detection/translations/README.fr.md new file mode 100644 index 00000000..473389c3 --- /dev/null +++ b/6-space-game/4-collision-detection/translations/README.fr.md @@ -0,0 +1,297 @@ +# Construire un jeu spatial Partie 4: Ajouter un laser et détecter les collisions + +## Quiz préalable + +[Quiz préalable](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/35?loc=fr) + +Dans cette leçon, vous apprendrez à tirer des lasers avec JavaScript! Nous ajouterons deux choses à notre jeu: + +- **Un laser**: ce laser est tiré depuis le vaisseau de vos héros et verticalement vers le haut +- **La détection de collision**, dans le cadre de la mise en œuvre de la possibilité de *tirer*, nous ajouterons également quelques règles de jeu intéressantes: + - **Le laser frappe l'ennemi**: L'ennemi meurt s'il est touché par un laser + - **Le laser touche l'écran supérieur**: un laser est détruit s'il touche la partie supérieure de l'écran + - **Collision entre ennemis et héros**: Un ennemi et le héros sont détruits s'ils se frappent + - **L'ennemi touche le bas de l'écran**: Un ennemi et un héros sont détruits si l'ennemi touche le bas de l'écran + +En bref, vous -- *le héros* -- devez frapper tous les ennemis avec un laser avant qu'ils ne parviennent à se déplacer vers le bas de l'écran. + +✅ Faites une petite recherche sur le tout premier jeu vidéo jamais écrit. Quelle était sa fonctionnalité? + +Soyons héroïques ensemble! + +## La détection de collision + +Comment fait-on la détection de collision? Nous devons penser à nos objets de jeu comme des rectangles se déplaçant. Pourquoi vous pourriez vous demander? Eh bien, l'image utilisée pour dessiner un objet de jeu est un rectangle: il a un `x`, `y`, `width` et `height`. + +Si deux rectangles, c'est-à-dire un héros et un ennemi *se croisent*, vous avez une collision. Ce qui devrait arriver alors dépend des règles du jeu. Pour implémenter la détection de collision, vous avez donc besoin des éléments suivants: + +1. Un moyen d'obtenir une représentation rectangulaire d'un objet de jeu, quelque chose comme ça: + + ```javascript + rectFromGameObject() { + return { + top: this.y, + left: this.x, + bottom: this.y + this.height, + right: this.x + this.width + } + } + ``` + +2. Une fonction de comparaison, cette fonction peut ressembler à ceci: + + ```javascript + function intersectRect(r1, r2) { + return !(r2.left > r1.right || + r2.right < r1.left || + r2.top > r1.bottom || + r2.bottom < r1.top); + } + ``` + +## Comment détruire les objets + +Pour détruire des objets dans un jeu, vous devez faire savoir au jeu qu'il ne doit plus afficher cet objet dans la boucle de jeu qui se déclenche à un certain intervalle. Une façon de faire est de marquer un objet de jeu comme *mort* quand quelque chose se passe, comme ceci: + +```javascript +// la collision s'est produite +enemy.dead = true +``` + +Ensuite, vous procédez au tri des objets *morts* avant de repeindre l'écran, comme ceci: + +```javascript +gameObjects = gameObject.filter(go => !go.dead); +``` + +## Comment tirons-nous un laser + +Tirer un laser se traduit par répondre à un événement clé et créer un objet qui se déplace dans une certaine direction. Nous devons donc effectuer les étapes suivantes: + +1. **Créez un objet laser**: du haut du vaisseau de notre héros, celui-ci commence à se déplacer vers le haut de l'écran lors de sa création. +2. **Attacher un code à un événement clé**: nous devons choisir une touche du clavier qui représente le joueur tirant le laser. +3. **Créez un objet de jeu qui ressemble à un laser** lorsque la touche est enfoncée. + +## Cooldown sur notre laser + +Le laser doit se déclencher à chaque fois que vous appuyez sur une touche, comme *espace* par exemple. Pour éviter que le jeu ne produise trop de lasers en peu de temps, nous devons résoudre ce problème. La solution consiste à implémenter un soi-disant *cooldown*(temps de recharge), une minuterie, qui garantit qu'un laser ne peut être tiré aussi souvent. Vous pouvez implémenter cela de la manière suivante: + +```javascript +class Cooldown { + constructor(time) { + this.cool = false; + setTimeout(() => { + this.cool = true; + }, time) + } +} + +class Weapon { + constructor { + } + fire() { + if (!this.cooldown || this.cooldown.cool) { + // produire un laser + this.cooldown = new Cooldown(500); + } else { + // ne rien faire - il n'a pas encore refroidi. + } + } +} +``` + +✅ Reportez-vous à la leçon 1 de la série de jeux spatiaux pour vous rappeler des *temps de recharge* + +## Que construire + +Vous allez prendre le code existant (que vous avez dû nettoyer et refactoriser) de la leçon précédente et l'étendre. Commencez par le code de la partie II ou utilisez le code de la [partie III - démarreur](../../your-work). + +> astuce: le laser avec lequel vous allez travailler est déjà dans votre dossier assets et référencé par votre code + +- **Ajoutez la détection de collision**, lorsqu'un laser entre en collision avec quelque chose, les règles suivantes doivent s'appliquer: + 1. **Le laser touche l'ennemi**: l'ennemi meurt s'il est touché par un laser + 2. **Le laser touche l'écran supérieur**: un laser est détruit s'il touche la partie supérieure de notre écran + 3. **Collision ennemi et héros**: un ennemi et le héros sont détruits s'ils se frappent + 4. **L'ennemi touche le bas de l'écran**: un ennemi et un héros sont détruits si l'ennemi touche le bas de l'écran + +## Étapes recommandées + +Localisez les fichiers qui ont été créés pour vous dans le sous-dossier `your-work`. Il doit contenir les éléments suivants: + +```bash +-| assets + -| enemyShip.png + -| player.png + -| laserRed.png +-| index.html +-| app.js +-| package.json +``` + +Vous démarrez votre projet dans le dossier `your_work` en tapant: + +```bash +cd your-work +npm start +``` + +Ce qui précède démarrera un serveur HTTP à l'adresse `http://localhost:5000`. Ouvrez un navigateur et saisissez cette adresse, pour le moment, cela devrait rendre le héros et tous les ennemis, rien ne bouge - pour le moment :). + +### Ajouter un code + +1. **Configurez une représentation rectangulaire de votre objet de jeu, pour gérer les collisions** Le code ci-dessous vous permet d'obtenir une représentation rectangulaire d'un `GameObject`. Modifiez votre classe GameObject pour l'étendre: + + ```javascript + rectFromGameObject() { + return { + top: this.y, + left: this.x, + bottom: this.y + this.height, + right: this.x + this.width, + }; + } + ``` + +2. **Ajouter du code qui vérifie la collision** Il s'agira d'une nouvelle fonction qui teste si deux rectangles se croisent: + + ```javascript + function intersectRect(r1, r2) { + return !( + r2.left > r1.right || + r2.right < r1.left || + r2.top > r1.bottom || + r2.bottom < r1.top + ); + } + ``` + +3. **Ajouter une capacité de tir laser ** + 1. **Ajouter un message d'événement clé**. La touche *espace* devrait créer un laser juste au-dessus du vaisseau héros. Ajoutez trois constantes dans l'objet Messages: + + ```javascript + KEY_EVENT_SPACE: "KEY_EVENT_SPACE", + COLLISION_ENEMY_LASER: "COLLISION_ENEMY_LASER", + COLLISION_ENEMY_HERO: "COLLISION_ENEMY_HERO", + ``` + + 1. **Manipuler la touche espace**. Modifiez la fonction keyup `window.addEventListener` pour gérer les espaces: + + ```javascript + } else if(evt.keyCode === 32) { + eventEmitter.emit(Messages.KEY_EVENT_SPACE); + } + ``` + + 1. **Ajouter des auditeurs**. Modifiez la fonction `initGame()` pour vous assurer que le héros peut se déclencher lorsque la barre d'espace est enfoncée: + + ```javascript + eventEmitter.on(Messages.KEY_EVENT_SPACE, () => { + if (hero.canFire()) { + hero.fire(); + } + ``` + + et ajoutez une nouvelle fonction `eventEmitter.on()` pour assurer le comportement lorsqu'un ennemi entre en collision avec un laser: + + ```javascript + eventEmitter.on(Messages.COLLISION_ENEMY_LASER, (_, { first, second }) => { + first.dead = true; + second.dead = true; + }) + ``` + + 1. **Déplacez l'objet**, assurez-vous que le laser se déplace progressivement vers le haut de l'écran. Vous allez créer une nouvelle classe Laser qui étend `GameObject`, comme vous l'avez fait auparavant: + + ```javascript + class Laser extends GameObject { + constructor(x, y) { + super(x,y); + (this.width = 9), (this.height = 33); + this.type = 'Laser'; + this.img = laserImg; + let id = setInterval(() => { + if (this.y > 0) { + this.y -= 15; + } else { + this.dead = true; + clearInterval(id); + } + }, 100) + } + } + ``` + + 1. **Gérer les collisions**, Implémenter les règles de collision pour le laser. Ajouter une fonction `updateGameObjects()` qui teste les objets en collision pour les hits + + ```javascript + function updateGameObjects() { + const enemies = gameObjects.filter(go => go.type === 'Enemy'); + const lasers = gameObjects.filter((go) => go.type === "Laser"); + // laser hit something + lasers.forEach((l) => { + enemies.forEach((m) => { + if (intersectRect(l.rectFromGameObject(), m.rectFromGameObject())) { + eventEmitter.emit(Messages.COLLISION_ENEMY_LASER, { + first: l, + second: m, + }); + } + }); + }); + + gameObjects = gameObjects.filter(go => !go.dead); + } + ``` + + Assurez-vous d'ajouter `updateGameObjects()` dans votre boucle de jeu dans `window.onload`. + + 4. **Mettez en place un temps de recharge (cooldown)** sur le laser, de sorte qu'il ne peut être tiré qu'un certain temps. + + Enfin, modifiez la classe de héros afin qu'elle puisse se recharger: + + ```javascript + class Hero extends GameObject { + constructor(x, y) { + super(x, y); + (this.width = 99), (this.height = 75); + this.type = "Hero"; + this.speed = { x: 0, y: 0 }; + this.cooldown = 0; + } + fire() { + gameObjects.push(new Laser(this.x + 45, this.y - 10)); + this.cooldown = 500; + + let id = setInterval(() => { + if (this.cooldown > 0) { + this.cooldown -= 100; + } else { + clearInterval(id); + } + }, 200); + } + canFire() { + return this.cooldown === 0; + } + } + ``` + +À ce stade, votre jeu a quelques fonctionnalités! Vous pouvez naviguer avec vos touches fléchées, tirer un laser avec votre barre d'espace et les ennemis disparaissent lorsque vous les frappez. Bien joué! + +--- + +## 🚀 Challenge + +Ajoutez une explosion! Jetez un œil aux ressources du jeu dans [le référentiel Space Art](../../solution/spaceArt/readme.txt) et essayez d'ajouter une explosion lorsque le laser frappe un extraterrestre + +## Quiz de validation des connaissances + +[Quiz de validation des connaissances](https://happy-mud-02d95f10f.azurestaticapps.net/quiz/36?loc=fr) + +## Révision et étude personnelle + +Faites des expériences avec les intervalles de votre jeu à ce stade. Que se passe-t-il lorsque vous les modifiez? En savoir plus sur les [événements de minutage JavaScript](https://www.freecodecamp.org/news/javascript-timing-events-settimeout-and-setinterval/). + +## Affectation + +[Explorer les collisions](assignment.fr.md) diff --git a/quiz-app/src/assets/translations/en.json b/quiz-app/src/assets/translations/en.json index 5ad362d5..e049bb6f 100644 --- a/quiz-app/src/assets/translations/en.json +++ b/quiz-app/src/assets/translations/en.json @@ -189,7 +189,7 @@ ] }, { - "questionText": "How would you get all the commits from a remote branch?", + "questionText": "How would you get and integrate all the commits from a remote branch?", "answerOptions": [ { "answerText": "git fetch", diff --git a/translations/README.ru.md b/translations/README.ru.md new file mode 100644 index 00000000..be9c483b --- /dev/null +++ b/translations/README.ru.md @@ -0,0 +1,103 @@ +[![GitHub license](https://img.shields.io/github/license/microsoft/Web-Dev-For-Beginners.svg)](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE) +[![GitHub contributors](https://img.shields.io/github/contributors/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/) +[![GitHub issues](https://img.shields.io/github/issues/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/) +[![GitHub pull-requests](https://img.shields.io/github/issues-pr/microsoft/Web-Dev-For-Beginners.svg)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/) +[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) + +[![GitHub watchers](https://img.shields.io/github/watchers/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Watch&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/) +[![GitHub forks](https://img.shields.io/github/forks/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Fork&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/) +[![GitHub stars](https://img.shields.io/github/stars/microsoft/Web-Dev-For-Beginners.svg?style=social&label=Star&maxAge=2592000)](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/) + +[![Open in Visual Studio Code](https://open.vscode.dev/badges/open-in-vscode.svg)](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners) + +# Веб-разработка для Начинающих - О Курсе + +Специалисты из Microsoft Azure Cloud Advocates рады представить 12-ти недельный обучающий курс, состоящий из 24-х уроков, в котором будет рассказано об основах JavaScript, CSS и HTML. К каждому уроку прилагается: викторина (quiz), которую стоит пройти перед уроком, викторина, которую стоит пройти после урока, текстовый урок, решение поставленных в уроке задач, задания и многое другое. Наша стратегия обучения на проектах-примерах, позволяет вам применять полученные знания, прямо во время обучения - проверенный способ закрепить новые навыки. + +**От всей души благодарим наших авторов: Jen Looper, Chris Noring, Christopher Harrison, Jasmine Greenaway, Yohan Lasorsa, Floor Drees, и художника зарисовок Tomomi Imura!** + +# Давайте начнем! + +> **Преподавателям.** Мы подготовили [несколько советов](for-teachers.ru.md) о том, как использовать этот курс. Будем рады узнать о ваших впечатлениях на [нашем форуме](https://github.com/microsoft/Web-Dev-For-Beginners/discussions/categories/teacher-corner)! + +> **Ученикам.** Чтобы самостоятельно пройти этот курс, сделайте ответвление (fork) от этого репозитория и выполняйте упражнения из данного курса. Начните с предлекционной викторины, затем прочтите урок, после чего завершите оставшиеся задания и активности. Постарайтесь самостоятельно создавать проекты, используя информацию из уроков, нежели просто копировать текст из предложенных нами решений. Однако, вы всегда сможете найти код-решение в папке `/solutions` для каждого ориентированного на проект урока. Хорошей идеей будет собраться с друзьями и пройти курс всем вместе. Для дальнейшего изучения мы рекомендуем посетить [Microsoft Learn](https://docs.microsoft.com/users/jenlooper-2911/collections/jg2gax8pzd6o81?WT.mc_id=academic-13441-cxa), а также посмотреть видеоматериалы, приведённые ниже. + +[![Promo video](../images/web.gif)](https://youtube.com/watch?v=R1wrdtmBSII "Видео-Презентация") + +Автор GIF-анимации [Mohit Jaisal](https://linkedin.com/in/mohitjaisal) + +> 🎥 Кликните на изображение выше, чтобы посмотреть видео о нашем проекте и людях, создавших его! + +## Стратегии обучения + +При построении этого курса, мы придерживались двух педагогических принципов: помнить о том, что курс ориентирован на обучение, путем проектирования и что он должен содержать большое количество викторин. По окончании обучения, ученики создадут игру, тренирующую навыки печати, виртуальный террариум, "зелёное" расширение для браузера, игру типа "Space Invaders" и банковское приложение для бизнеса, изучат основы JavaScript, HTML и CSS, а также набор современных инструментов для веб-разработчика. + +> 🎓 Вы можете пройти несколько первых уроков, используя нашу пошаговую систему обучения [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) на сайте Microsoft Learn! + +Проектно-ориентированная стратегия обучения позволяет сделать процесс обучения более привлекательным и облегчить закрепление полученных навыков и информации. Мы также написали несколько уроков, чтобы помочь вам познакомиться с основами JavaScript. Эти уроки совмещены с видео из коллекции уроков "[Знакомство с JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)". Некоторые из авторов этих видео также принимали участие и в создании этого курса. + +В дополнение, простая викторина перед уроками позволяет заинтересовать ученика в изучении темы, в то время как вторая викторина после занятия позволяет закрепить полученные знания. Этот курс был создан, чтобы быть занимательным для каждого. Вы можете пройти курс от начала до конца или изучить лишь его часть. Проекты, которые вы будете делать на протяжении курса, просты вначале и станут более сложными по завершении 12-ти недельного курса. + +Мы намеренно не раскрывали тему фреймворков JavaScript, чтобы сконцентрироваться получении базовых навыков, необходимых веб-разработчику. Следующим шагом, после прохождения этого курса, мы рекомендуем изучить Node.js, воспользовавшись этим набором видеоуроков: "[Знакомство с Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)" + +> Вы можете ознакомиться с нашей [политикой взаимодействия с сообществом](../CODE_OF_CONDUCT.md), [правила внесения собственного вклада в развитие проекта](../CONTRIBUTING.md) и [правилами для переводчиков](../TRANSLATIONS.md). Мы очень ждём ваших конструктивных отзывов! + +## Каждый урок включает в себя: + +- необязательную зарисовку +- необязательное вспомогательное видео +- викторину для разминки перед уроком +- текстовый урок +- для проектно-ориентированных уроков, пошаговое описание того, как построить проект +- проверку знаний +- "вызов" +- вспомогательную литературу +- задания +- викторину для прохождения после урока + +> **На заметку о викторинах**: все викторины находятся в [этом приложении](https://happy-mud-02d95f10f.azurestaticapps.net/), всего мы подготовили 48 викторин, в каждой из которых по три вопроса. Ссылки на них расположены в уроках, но вы можете взаимодействовать с викторинами в отдельности. Для этого, обратитесь к инструкциям в папке `quiz-app`. Эти инструкции активно локализуются. + +## Уроки + +| | Наименование проекта | Получаемые знания | Цели обучения | Ссылка на урок | Автор | +| :-: | :------------------------------------------------------: | :--------------------------------------------------------------------: | ----------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------: | :---------------------: | +| 01 | Начало | Введение в Программирование и Инструменты | Узнать об основах, стоящих за большинством языков программирования и о программном обеспечении, которое помогает профессиональным разработчикам в их делах | [Введение в программирование и инструменты](../1-getting-started-lessons/1-intro-to-programming-languages/translations/README.ru.md) | Jasmine | +| 02 | Начало | Основы GitHub, работа в команде | Как использовать GitHub в своих проектах, как писать код в команде | [Введение в GitHub](../1-getting-started-lessons/2-github-basics/translations/README.ru.md) | Floor | +| 03 | Начало | Доступность | Изучить принципы доступности веб-среды для людей с ограниченными возможностями здоровья | [Основы доступности](../1-getting-started-lessons/3-accessibility/README.md) | Christopher | +| 04 | Основы JavaScript | Типы данных в JavaScript | Введение в типы данных в JavaScript | [Типы данных](../2-js-basics/1-data-types/README.md) | Jasmine | +| 05 | Основы JavaScript | Функции и Методы | Узнать о функциях и методах, чтобы регулировать поведение и логику приложений | [Функции и Методы](../2-js-basics/2-functions-methods/README.md) | Jasmine and Christopher | +| 06 | Основы JavaScript | Принятие решений в JavaScript | Изучить как задавать условия, если ваш код использует логику, основывающуюся на принятии решений | [Принятие решений](../2-js-basics/3-making-decisions/README.md) | Jasmine | +| 07 | Основы JavaScript | Массивы и Циклы | Изучить работу с данными, используя массивы и циклы в JavaScript | [Массивы и Циклы](../2-js-basics/4-arrays-loops/README.md) | Jasmine | +| 08 | [Террариум](../3-terrarium/solution/README.md) | HTML в действии | Создать свой онлайн террариум используя HTML. Акцентировать внимание на построении макета страницы | [Введение в HTML](../3-terrarium/1-intro-to-html/README.md) | Jen | +| 09 | [Террариум](../3-terrarium/solution/README.md) | CSS в действии | Оформить стиль своего онлайн террариума используя CSS. Акцентировать внимание на основах CSS, позволяющих сделать страницу адаптивной | [Введение в CSS](../3-terrarium/2-intro-to-css/README.md) | Jen | +| 10 | [Террариум](../3-terrarium/solution/README.md) | Иерархия в JavaScript, взаимодействие со страницей | Добавить JavaScript, превращающий ваш террариум в интерактивное "потяни-и-отпусти" приложение. Акцентировать внимание на взаимодействии со страницей и иерархиях в JavaScript | [Иерархия в JavaScript, взаимодействие со страницей](../3-terrarium/3-intro-to-DOM-and-closures/README.md) | Jen | +| 11 | ["Печатная игра"](../4-typing-game/solution/README.md) | Создадите "Печатную игру" | Научиться использовать события с клавиатуры, чтобы управлять своим приложением JavaScript | [Программирование, основанное на событиях](../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) | Строим форму, обращаемся к API и сохраняем данные | Создать элементы JavaScript для своего расширения, чтобы обращаться к API, использовать сохраненные данные | [API, формы и хранение данных](../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) | Более сложная разработка игр с использованием JavaScript | Узнать о наследовании, используя Классы и Композиции, а также познакомиться с паттерном "Pub/Sub" в качестве подготовки к построению игры | [Введение в более сложную разработку игр](../6-space-game/1-introduction/README.md) | Chris | +| 16 | [Космическая игра](../6-space-game/solution/README.md) | Рисование с использованием Canvas | Изучить Canvas API, чтобы рисовать элементы на экране | [Рисование с помощью Canvas](../6-space-game/2-drawing-to-canvas/README.md) | Chris | +| 17 | [Космическая игра](../6-space-game/solution/README.md) | Двигаем элементы на экране | Узнать, как вы можете заставить объекты на экране двигаться, используя координатную систему Canvas API | [Двигаем элементы](../6-space-game/3-moving-elements-around/README.md) | Chris | +| 18 | [Космическая игра](../6-space-game/solution/README.md) | Обработка столкновений | Заставить элементы сталкиваться друг с другом при нажатии на клавиши, а также добавьте cooldown-функцию, чтобы повысить эффективность игры | [Обработка столкновений](../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) | Пути и Шаблоны в веб-приложениях HTML | Изучить как начать построение мультистраничного веб-сайта с использованием путей и шаблонов HTML | [Пути и Шаблоны в HTML](../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 | + +## Оффлайн доступ + +Вы можете использовать эту документацию оффлайн при помощи [Docsify](https://docsify.js.org/#/). Сделайте fork этого репозитория, [установите Docsify](https://docsify.js.org/#/quickstart) на ваш компьютер, а затем в корневой директории этого репозитория воспользуйтесь командой `docsify serve`. Вебсайт будет доступен по адресу `localhost:3000`. + +## PDF + +Все уроки в формате PDF доступны [здесь](https://microsoft.github.io/Web-Dev-For-Beginners/pdf/readme.pdf) + +## Другие курсы + +Наша команда создает и другие курсы! Рекомендуем взглянуть: + +- [Машинное Обучение для Начинающих](https://aka.ms/ml-beginners) +- [IoT для Начинающих](https://aka.ms/iot-beginners) +- [Data Science для Начинающих](https://aka.ms/datascience-beginners)