|
|
[](https://github.com/microsoft/Web-Dev-For-Beginners/blob/master/LICENSE)
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/graphs/contributors/)
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/issues/)
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/pulls/)
|
|
|
[](http://makeapullrequest.com)
|
|
|
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/watchers/)
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/network/)
|
|
|
[](https://GitHub.com/microsoft/Web-Dev-For-Beginners/stargazers/)
|
|
|
|
|
|
[](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-77807-sagibbon), а также посмотреть видеоматериалы, приведённые ниже.
|
|
|
|
|
|
[](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-77807-sagibbon) на сайте Microsoft Learn!
|
|
|
|
|
|
Проектно-ориентированная стратегия обучения позволяет сделать процесс обучения более привлекательным и облегчить закрепление полученных навыков и информации. Мы также написали несколько уроков, чтобы помочь вам познакомиться с основами JavaScript. Эти уроки совмещены с видео из коллекции уроков "[Знакомство с JavaScript](https://channel9.msdn.com/Series/Beginners-Series-to-JavaScript/?WT.mc_id=academic-77807-sagibbon)". Некоторые из авторов этих видео также принимали участие и в создании этого курса.
|
|
|
|
|
|
В дополнение, простая викторина перед уроками позволяет заинтересовать ученика в изучении темы, в то время как вторая викторина после занятия позволяет закрепить полученные знания. Этот курс был создан, чтобы быть занимательным для каждого. Вы можете пройти курс от начала до конца или изучить лишь его часть. Проекты, которые вы будете делать на протяжении курса, просты вначале и станут более сложными по завершении 12-ти недельного курса.
|
|
|
|
|
|
Мы намеренно не раскрывали тему фреймворков JavaScript, чтобы сконцентрироваться получении базовых навыков, необходимых веб-разработчику. Следующим шагом, после прохождения этого курса, мы рекомендуем изучить Node.js, воспользовавшись этим набором видеоуроков: "[Знакомство с Node.js](https://channel9.msdn.com/Series/Beginners-Series-to-Nodejs/?WT.mc_id=academic-77807-sagibbon)"
|
|
|
|
|
|
> Вы можете ознакомиться с нашей [политикой взаимодействия с сообществом](../CODE_OF_CONDUCT.md), [правила внесения собственного вклада в развитие проекта](../CONTRIBUTING.md) и [правилами для переводчиков](../TRANSLATIONS.md). Мы очень ждём ваших конструктивных отзывов!
|
|
|
|
|
|
## Каждый урок включает в себя:
|
|
|
|
|
|
- необязательную зарисовку
|
|
|
- необязательное вспомогательное видео
|
|
|
- викторину для разминки перед уроком
|
|
|
- текстовый урок
|
|
|
- для проектно-ориентированных уроков, пошаговое описание того, как построить проект
|
|
|
- проверку знаний
|
|
|
- "вызов"
|
|
|
- вспомогательную литературу
|
|
|
- задания
|
|
|
- викторину для прохождения после урока
|
|
|
|
|
|
> **На заметку о викторинах**: все викторины находятся в [этом приложении](https://ashy-river-0debb7803.1.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)
|
