[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
[](https://open.vscode.dev/microsoft/Web-Dev-For-Beginners)
# ВебРазработка для Начинающих - ОКурсе
# Веб-разработка для Начинающих - ОКурсе
Специалисты из Microsoft Azure Cloud Advocates рады представить 12-ти недельный обучающий курс, состоящий из 24-х уроков, в котором будет рассказано об основах JavaScript, CSS и HTML. К каждому уроку прилагается: викторина, которую стоит пройти перед уроком, викторина, которую стоит пройти после урока, текстовый урок, решение поставленных в уроке задач, задания и многое другое. Наша стратегия обучения на проектах-примерах, позволяет вам применять полученные знания, прямо во время обучения - проверенный способ закрепить новые навыки.
Специалисты из Microsoft Azure Cloud Advocates рады представить 12-ти недельный обучающий курс, состоящий из 24-х уроков, в котором будет рассказано об основах JavaScript, CSS и HTML. К каждому уроку прилагается: викторина, которую стоит пройти перед уроком, викторина, которую стоит пройти после урока, текстовый урок, решение поставленных в уроке задач, задания и многое другое. Наша стратегия обучения на проектах-примерах, позволяет вам применять полученные знания, прямо во время обучения - проверенный способ закрепить новые навыки.
@ -30,17 +30,17 @@
## Стратегии обучения
## Стратегии обучения
При построении этого курса, мы придерживались двух педагогических принципов: помнить о том, что курс ориентирован на обучение, путем проектирования и что он должен содержать большое количество викторин. По окончании обычения, ученики создадут игру, тренирующую навыки печати, виртуальный террариум, "зелёное" расширение для браузера, игру типа "Space Invaders" и банковское приложение для бизнеса, изучат основы JavaScript, HTML и CSS, а также набор современных инструментов для веб-разработчика сегдня.
При построении этого курса, мы придерживались двух педагогических принципов: помнить о том, что курс ориентирован на обучение, путем проектирования и что он должен содержать большое количество викторин. По окончании обычения, ученики создадут игру, тренирующую навыки печати, виртуальный террариум, "зелёное" расширение для браузера, игру типа "Space Invaders" и банковское приложение для бизнеса, изучат основы JavaScript, HTML и CSS, а также набор современных инструментов для веб-разработчика сегодня.
> 🎓 Вы можете пройти несколько первых уроков, использую нашу пошаговую систему обучения [Learn Path](https://docs.microsoft.com/learn/paths/web-development-101?WT.mc_id=academic-13441-cxa) на сайте Microsoft Learn!
> 🎓 Вы можете пройти несколько первых уроков, используя нашу пошаговую систему обучения [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)". Некоторые из авторов этих видео также принимали участие и в создании этого курса.
Проектно-ориентированная стратегия обучения позволяет сделать процесс обучения более привлекательным и облегчить закрепление полученных навыков и информации. Мы также написали несколько уроков, чтобы помочь вам познакомиться с основами JavaScript. Эти уроки совмещены с видео из коллекции уроков "[Знакомсвто с JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript?WT.mc_id=academic-13441-cxa)". Некоторые из авторов этих видео также принимали участие и в создании этого курса.
В дополнение, простая викторина перед уроками позволяет заинтересовать ученика в изучении темы, в то время как вторая викторина после занятия позволяет закрепить полученные знания. Этот курс был создан, чтобы быть занимательным для каждого. Вы можете пройти курс от начала до конца или изучить лишь его часть. Проекты, которые вы будете делать на протяжении курса, просты вначале и станут более сложными по завершении 12-ти недельного курса.
В дополнение, простая викторина перед уроками позволяет заинтересовать ученика в изучении темы, в то время как вторая викторина после занятия позволяет закрепить полученные знания. Этот курс был создан, чтобы быть занимательным для каждого. Вы можете пройти курс от начала до конца или изучить лишь его часть. Проекты, которые вы будете делать на протяжении курса, просты вначале и станут более сложными по завершении 12-ти недельного курса.
Мы намеренно не раскрывали тему фреймворков JavaScript, чтобы сконцентрироваться получении базовых навыков, необходимых веб-разработчику. Следующим шагом, после прохождения этого курса, мы рекомендуем изучить Node.js, воспользовавшись этим набором видео-уроков: "[Знакомство с Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs?WT.mc_id=academic-13441-cxa)"
Мы намеренно не раскрывали тему фреймворков 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). Мы очень ждём ваших конструктивных отзывов!
> Вы можете ознакомиться с нашей [политикой взаимодействия с сообществом](../CODE_OF_CONDUCT.md), [правила внесения собственного вклада в развитие проекта](../CONTRIBUTING.md) и [правилами для переводчиков](../TRANSLATIONS.md). Мы очень ждём ваших конструктивных отзывов!
## Каждый урок включает в себя:
## Каждый урок включает в себя:
@ -55,35 +55,35 @@
- задания
- задания
- викторину для прохождения после урока
- викторину для прохождения после урока
> **На заметку о викторинах**: все викторины находятся в [этом приложении](https://happy-mud-02d95f10f.azurestaticapps.net/), всего мы подготовили 48 викторин, в каждой из которых по три вопроса. Ссылки на них расположены в уроках, но вы можете взаимодействовать с викторинами в отдельности. Для этого, обратитесь к инструкциям в папке `quiz-app`. Эти инструкции активно локализируются.
> **На заметку о викторинах**: все викторины находятся в [этом приложении](https://happy-mud-02d95f10f.azurestaticapps.net/), всего мы подготовили 48 викторин, в каждой из которых по три вопроса. Ссылки на них расположены в уроках, но вы можете взаимодействовать с викторинами в отдельности. Для этого, обратитесь к инструкциям в папке `quiz-app`. Эти инструкции активно локализуются.
## Уроки
## Уроки
| | Наименование проекта | Получаемые знания | Цели обучения | Ссылка на урок | Автор |
| | Наименование проекта | Получаемые знания | Цели обучения | Ссылка на урок | Автор |
| 01 | Начало | Введение в Программирование и Инструменты | Узнаем об основах, стоящих за большинством языков программирование и о программном обеспечении, которое помогает профессиональным разаботчиками в их делах. | [Введение в программирование и инструменты](/1-getting-started-lessons/1-intro-to-programming-languages/README.ru..md) | Jasmine |
| 01 | Начало | Введение в Программирование и Инструменты | Узнаем об основах, стоящих за большинством языков программирование и о программном обеспечении, которое помогает профессиональным разработчиками в их делах. | [Введение в программирование и инструменты](/1-getting-started-lessons/1-intro-to-programming-languages/README.ru..md) | Jasmine |
| 02 | Начало | Основы GiHhub, работа в команде | Как использовать GitHub в своих проектах, как писать од в команде | [Введение в GutHub](/1-getting-started-lessons/2-github-basics/README.ru.md) | Floor |
| 02 | Начало | Основы GiHhub, работа в команде | Как использовать GitHub в своих проектах, как писать од в команде | [Введение в GutHub](/1-getting-started-lessons/2-github-basics/README.ru.md) | Floor |
| 03 | Начало | Доступность | Изкчите основы доступности сети | [Основы доступности](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 03 | Начало | Доступность | Изучите основы доступности сети | [Основы доступности](/1-getting-started-lessons/3-accessibility/README.md) | Christopher |
| 04 | Основы JavaScript | Типы данных в JavaScript | Введение в типы данных в JavaScript. | [Типы данных](/2-js-basics/1-data-types/README.md) | Jasmine |
| 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 |
| 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 |
| 06 | Основы JavaScript | Принятие решений в JavaScript | Изучите, как задавать условия, если ваш код использует логику, основывающуюся на принятии решений. | [Принятие решений](/2-js-basics/3-making-decisions/README.md) | Jasmine |
| 07 | Основы JavaScript | Массивы и Циклы | Изучите работу с данными, используя массивы и циклы в JavaScript. | [Массивы и Циклы](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 07 | Основы JavaScript | Массивы и Циклы | Изучите работу с данными, используя массивы и циклы в JavaScript. | [Массивы и Циклы](/2-js-basics/4-arrays-loops/README.md) | Jasmine |
| 08 | [Террариум](/3-terraarium/solution/README.md) | HTML в действии | Постройте онлайн террариум, используя HTML, акцентируем внимание на потроении разметки. | [Введение в HTML](/3-Террариум/1-intro-to-html/README.md) | Jen |
| 08 | [Террариум](/3-terraarium/solution/README.md) | HTML в действии | Постройте онлайн террариум, используя HTML, акцентируем внимание на построении разметки. | [Введение в HTML](/3-Террариум/1-intro-to-html/README.md) | Jen |
| 09 | [Террариум](/3-terraarium/solution/README.md) | CSS в действии | Сделайте свой онлайн террариум уникальным, используя CSS. Акцентируем внимание на стиллизации страницы, в том числе с элементами, реагирующими на пользователя. | [Введение в CSS](/3-terraarium/2-intro-to-css/README.md) | Jen |
| 09 | [Террариум](/3-terraarium/solution/README.md) | CSS в действии | Сделайте свой онлайн террариум уникальным, используя CSS. Акцентируем внимание на стилизации страницы, в том числе с элементами, реагирующими на пользователя. | [Введение в CSS](/3-terraarium/2-intro-to-css/README.md) | Jen |
| 10 | [Террариум](/3-terraarium/solution/README.md) | Иерархия в JavaScript, взаимоджействие со страницей | Постройте JavaScript, превращающий ваш террариум в интерактивное потяни-и-отпусти приложение. Акцентируем внимание на взаимодействие со страницей и иерархиях в JavaScript. | [Иерархия в JavaScript, взаимоджействие со страницей](/3-terraarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 10 | [Террариум](/3-terraarium/solution/README.md) | Иерархия в JavaScript, взаимодействие со страницей | Постройте JavaScript, превращающий ваш террариум в интерактивное потяни-и-отпусти приложение. Акцентируем внимание на взаимодействие со страницей и иерархиях в JavaScript. | [Иерархия в JavaScript, взаимодействие со страницей](/3-terraarium/3-intro-to-DOM-and-closures/README.md) | Jen |
| 11 | ["Печатная игра"](/4-typing-game/solution/README.md) | Постройте "Печатную игру" | Научитесь использовать события с клавиатуры, чтобы управлять своим приложением JvaScript. | [Программирование, основанное на событиях](/4-typing-game/typing-game/README.md) | Christopher |
| 11 | ["Печатная игра"](/4-typing-game/solution/README.md) | Постройте "Печатную игру" | Научитесь использовать события с клавиатуры, чтобы управлять своим приложением JvaScript. | [Программирование, основанное на событиях](/4-typing-game/typing-game/README.md) | Christopher |
| 12 | ["Зелёное" расширение для браузера](/5-browser-extension/solution/README.md) | Работа с браузерами | Изучите, как работают браузеры, их историю и сделайте свои первые шаги в разработке расширений для браузера. | [О браузерах](/5-browser-extension/1-about-browsers/README.md) | Jen |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 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 |
| 23 | [Банковское приложение](/7-bank-project/solution/README.md) | Методы обработки и использования информации | Как информация проходит через ваше приложение, как обрабатывать, хранить и уничтожать её. | [Информация](/7-bank-project/3-data/README.md) | Yohan |
| 24 | [Банковское приложение](/7-bank-project/solution/README.md) | Концепции управления состояниями | Изучите, как ваше приложение запоминает состояния и как эти пользоваться. programmatically | [Управление состояниями](/7-bank-project/4-state-management/README.md) | Yohan |
| 24 | [Банковское приложение](/7-bank-project/solution/README.md) | Концепции управления состояниями | Изучите, как ваше приложение запоминает состояния и как эти пользоваться. programmatically | [Управление состояниями](/7-bank-project/4-state-management/README.md) | Yohan |
Smooth-E
4 years ago