Web-Dev-For-Beginners/translations/ru

Веб-разработка для начинающих — учебный курс

Изучите основы веб-разработки с помощью нашего 12-недельного всестороннего курса от Microsoft Cloud Advocates. Каждое из 24 занятий посвящено JavaScript, CSS и HTML через практические проекты, такие как террариумы, расширения браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Повышайте свои навыки и оптимизируйте усвоение знаний с помощью нашей эффективной методики обучения на основе проектов. Начните свое путешествие в программировании уже сегодня!

Присоединяйтесь к сообществу Azure AI Foundry в Discord

Следуйте этим шагам, чтобы начать использовать эти ресурсы:

1. Форкните репозиторий: нажмите
2. Клонируйте репозиторий: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
3. Присоединяйтесь к Azure AI Foundry Discord и встречайте экспертов и коллег-разработчиков

🌐 Поддержка нескольких языков

Поддерживается через GitHub Action (автоматически и всегда актуально)

Арабский | Бенгальский | Болгарский | Бирманский (Мьянма) | Китайский (упрощённый) | Китайский (традиционный, Гонконг) | Китайский (традиционный, Макао) | Китайский (традиционный, Тайвань) | Хорватский | Чешский | Датский | Нидерландский | Эстонский | Финский | Французский | Немецкий | Греческий | Иврит | Хинди | Венгерский | Индонезийский | Итальянский | Японский | Каннада | Корейский | Литовский | Малайский | Малаялам | Маратхи | Непальский | Нигерийский пиджин | Норвежский | Персидский (Фарси) | Польский | Португальский (Бразилия) | Португальский (Португалия) | Пенджаби (Гурмукхи) | Румынский | Русский | Сербский (кириллица) | Словацкий | Словенский | Испанский | Суахили | Шведский | Тагалог (филиппинский) | Тамильский | Телугу | Тайский | Турецкий | Украинский | Урду | Вьетнамский

Предпочитаете клонировать локально?

Этот репозиторий включает более 50 языковых переводов, что значительно увеличивает размер загрузки. Чтобы клонировать без переводов, используйте sparse checkout:

git clone --filter=blob:none --sparse https://github.com/microsoft/Web-Dev-For-Beginners.git
cd Web-Dev-For-Beginners
git sparse-checkout set --no-cone '/*' '!translations' '!translated_images'

Это предоставит вам всё необходимое для прохождения курса с гораздо более быстрой загрузкой.

Если вы хотите добавить поддержку дополнительных языков, они перечислены здесь

🧑‍🎓 Вы студент?

Посетите страницу Student Hub, где вы найдете ресурсы для начинающих, студенческие пакеты и даже способы получения бесплатного ваучера на сертификат. Это страница, которую стоит добавить в закладки и периодически проверять, так как мы ежемесячно обновляем контент.

📣 Объявление — Новые задания в режиме GitHub Copilot Agent!

Добавлено новое задание — найдите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новое задание, которое вы можете выполнить с использованием GitHub Copilot и режима Agent. Если вы еще не использовали режим Agent, он позволяет не только генерировать текст, но и создавать и редактировать файлы, выполнять команды и многое другое.

📣 Объявление — Новый проект с использованием генеративного ИИ

Добавлен новый проект AI Assistant, посмотрите проект

📣 Объявление — Новый учебный курс по генеративному ИИ для JavaScript только что выпущен

Не пропустите наш новый курс по генеративному ИИ!

Начать можно по ссылке: https://aka.ms/genai-js-course

• Уроки, охватывающие всё от основ до RAG.
• Взаимодействуйте с историческими персонажами с помощью GenAI и нашего сопутствующего приложения.
• Весёлый и захватывающий нарратив, вы будете путешествовать во времени!

Каждый урок включает задание, проверку знаний и вызов, которые помогут вам освоить темы, такие как:

• Формулировка запросов и их оптимизация
• Создание текстовых и визуальных приложений
• Поисковые приложения

Начать можно по ссылке: https://aka.ms/genai-js-course!

🌱 Начало работы

Учителя, мы подготовили рекомендации по использованию этого учебного курса. Мы будем рады вашим отзывам в нашем форуме обсуждений!

Студенты, для каждого урока начните с предварительной викторины, затем читайте учебный материал, выполняйте различные задания и проверяйте свои знания с помощью итоговой викторины.

Для улучшения вашего учебного опыта подключайтесь к вашим сокурсникам для совместной работы над проектами! Обсуждения приветствуются в нашем форуме обсуждений, где команда модераторов будет доступна для ответов на ваши вопросы.

Для дальнейшего обучения настоятельно рекомендуем изучить Microsoft Learn для получения дополнительных учебных материалов.

📋 Настройка вашей среды

В этом учебном курсе уже есть готовая среда разработки! На начальном этапе вы можете выбрать работу с курсом в Codespace (браузерная среда без необходимости установки), или локально на вашем компьютере с помощью текстового редактора, например, Visual Studio Code.

Создайте ваш репозиторий

Чтобы легко сохранять свою работу, рекомендуем создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку Use this template вверху страницы. Это создаст новый репозиторий в вашем аккаунте GitHub с копией курса.

Выполните следующие шаги:

1. Форкните репозиторий: нажмите кнопку "Fork" в правом верхнем углу этой страницы.
2. Клонируйте репозиторий: git clone https://github.com/microsoft/Web-Dev-For-Beginners.git

Запуск курса в Codespace

В вашей копии этого репозитория, которую вы создали, нажмите кнопку Code и выберите Open with Codespaces. Это создаст для вас новый Codespace для работы.

Запуск курса локально на вашем компьютере

Для запуска этого курса локально вам потребуется текстовый редактор, браузер и инструмент командной строки. Наш первый урок, Введение в языки программирования и инструменты разработки, расскажет вам о различных вариантах каждого из этих инструментов, чтобы вы могли выбрать наиболее подходящий.

Мы рекомендуем использовать Visual Studio Code в качестве редактора, который также имеет встроенный терминал. Скачать Visual Studio Code можно здесь.

1. Клонируйте свой репозиторий на компьютер. Сделать это можно, нажав кнопку Code и скопировав URL:

   CodeSpace Затем откройте Терминал в Visual Studio Code и выполните следующую команду, заменив <your-repository-url> на URL, который вы только что скопировали:

   git clone <your-repository-url>
   

2. Откройте папку в Visual Studio Code. Для этого кликните Файл > Открыть папку и выберите папку, которую вы только что склонировали.

Рекомендуемые расширения Visual Studio Code:

• Live Server — для предварительного просмотра HTML-страниц в Visual Studio Code
• Copilot — для помощи в написании кода быстрее

📂 В каждом уроке есть:

• необязательная скетчноут
• необязательное дополнительное видео
• разминка-квиз перед уроком
• письменный урок
• для проектных уроков — пошаговые инструкции по созданию проекта
• проверки знаний
• задание
• дополнительное чтение
• квиз после урока

Примечание о квизах: Все квизы находятся в папке Quiz-app, всего 48 квизов по три вопроса каждый. Они доступны здесь, приложение для квизов можно запускать локально или деплоить в Azure; следуйте инструкциям в папке quiz-app.

🗃️ Уроки

	Название проекта	Изучаемые концепции	Цели обучения	Связанный урок	Автор
01	Начало работы	Введение в программирование и инструменты профессии	Узнать основы большинства языков программирования и о программном обеспечении, которое помогает профессиональным разработчикам	Введение в языки программирования и инструменты	Jasmine
02	Начало работы	Основы GitHub, работа в команде	Как использовать GitHub в вашем проекте, как сотрудничать с другими в кодовой базе	Введение в GitHub	Floor
03	Начало работы	Доступность	Узнать основы веб-доступности	Основы доступности	Christopher
04	Основы JS	Типы данных в JavaScript	Основы типов данных в JavaScript	Типы данных	Jasmine
05	Основы JS	Функции и методы	Узнать о функциях и методах управления логикой приложения	Функции и методы	Jasmine и Christopher
06	Основы JS	Создание условий в JS	Научиться создавать условия в коде с помощью методов принятия решений	Создание условий	Jasmine
07	Основы JS	Массивы и циклы	Работа с данными, используя массивы и циклы в JavaScript	Массивы и циклы	Jasmine
08	Террариум	HTML на практике	Создание HTML для онлайн-террариума, с акцентом на построение макета	Введение в HTML	Jen
09	Террариум	CSS на практике	Создание CSS для стилизации онлайн-террариума, основы в том числе адаптивности	Введение в CSS	Jen
10	Террариум	Замыкания JS, манипуляции с DOM	Создание JavaScript для функционала террариума с drag/drop, с упором на замыкания и работу с DOM	Замыкания JS, работа с DOM	Jen
11	Игра на набор текста	Создание игры для печати	Учимся использовать события клавиатуры для управления логикой приложения на JavaScript	Событийное программирование	Christopher
12	Расширение для браузера Green	Работа с браузерами	Узнать, как работают браузеры, их историю и создание начальных элементов расширения браузера	О браузерах	Jen
13	Расширение для браузера Green	Создание формы, вызов API и хранение переменных в local storage	Создать JavaScript элементы расширения для вызова API с использованием переменных, хранящихся в local storage	API, формы и local storage	Jen
14	Расширение для браузера Green	Фоновые процессы в браузере, производительность веба	Использовать фоновые процессы браузера для управления иконкой расширения; узнать о веб-производительности и оптимизациях	Фоновые задачи и производительность	Jen
15	Космическая игра	Продвинутая разработка игр на JavaScript	Изучить наследование через классы и композицию, паттерн Pub/Sub, подготовка к созданию игры	Введение в продвинутую разработку игр	Chris
16	Космическая игра	Рисование на canvas	Изучение Canvas API для отрисовки элементов на экране	Рисование на Canvas	Chris
17	Космическая игра	Перемещение элементов по экрану	Познакомиться с движением элементов с использованием декартовых координат и Canvas API	Перемещение элементов	Chris
18	Космическая игра	Обнаружение столкновений	Сделать так, чтобы элементы сталкивались и реагировали друг на друга с помощью нажатий клавиш, добавить функцию паузы для производительности	Обнаружение столкновений	Chris
19	Космическая игра	Ведение счета	Выполнять математические вычисления на основе состояния игры и производительности	Ведение счета	Chris
20	Космическая игра	Завершение и перезапуск игры	Узнать о завершении и перезапуске игры, включая очистку ресурсов и сброс значений переменных	Условие завершения	Chris
21	Банковское приложение	HTML-шаблоны и маршруты веб-приложения	Научиться создавать структуру многополосного сайта с маршрутизацией и HTML-шаблонами	HTML-шаблоны и маршруты	Yohan
22	Банковское приложение	Создание формы входа и регистрации	Изучить создание форм и обработку валидации	Формы	Yohan
23	Банковское приложение	Методы получения и использования данных	Как данные поступают в приложение и выходят из него, как их получать, хранить и удалять	Данные	Yohan
24	Банковское приложение	Концепции управления состоянием	Узнать, как приложение сохраняет состояние и как управлять им программно	Управление состоянием	Yohan
25	Код браузера/VScode	Работа с VScode	Научиться использовать редактор кода	Использование редактора кода VScode	Chris
26	AI помощники	Работа с ИИ	Научиться создавать собственного AI помощника	Проект AI помощника	Chris

🏫 Педагогика

Наша учебная программа основана на двух ключевых педагогических принципах:

• обучение на основе проектов
• частые квизы

Программа обучает основам JavaScript, HTML и CSS, а также последним инструментам и техникам, используемым современными веб-разработчиками. Студенты получат возможность приобрести практический опыт, создавая игру для печати, виртуальный террариум, экологичное расширение для браузера, игру в стиле космических захватчиков и банковское приложение для бизнеса. К концу серии студенты будут иметь твердое понимание веб-разработки.

🎓 Первые несколько уроков этой программы вы можете пройти как Учебный путь на Microsoft Learn!

Обеспечивая соответствие содержания проектам, процесс обучения становится более увлекательным для студентов, а запоминание концепций лучше. Мы также разработали несколько стартовых уроков по основам JavaScript для введения в концепции, дополненных видео из серии "Для начинающих: JavaScript", где авторы видеокурсов внесли вклад в эту учебную программу.

Кроме того, небольшой предварительный квиз перед занятием настраивает студента на изучение темы, а второй квиз после занятия укрепляет знания. Эта программа разработана быть гибкой и интересной, её можно проходить полностью или частично. Проекты начинаются с простого и становятся всё более сложными к концу 12-недельного цикла.

Хотя мы намеренно избегали введения JavaScript-фреймворков, чтобы сосредоточиться на базовых навыках веб-разработчика, хорошим следующим шагом после этой программы будет изучение Node.js через другую серию видео: "Для начинающих: Node.js".

Ознакомьтесь с нашими Правилами поведения и Правилами вклада. Мы приветствуем ваши конструктивные отзывы!

🧭 Оффлайн-доступ

Вы можете использовать эту документацию офлайн при помощи Docsify. Форкните этот репозиторий, установите Docsify на свой локальный компьютер, а затем в корневой папке репозитория введите docsify serve. Веб-сайт будет доступен по адресу localhost:3000 на вашем локальном хосте.

📘 PDF

PDF со всеми уроками можно найти здесь.

🎒 Другие курсы

Наша команда создает и другие курсы! Ознакомьтесь:

LangChain

---

Azure / Edge / MCP / Агенты

---

Серия по генеративному ИИ

---

Основное обучение

---

Серия Copilot

Получение помощи

Если вы застряли или у вас есть вопросы по созданию приложений с ИИ. Присоединяйтесь к другим учащимся и опытным разработчикам в обсуждениях MCP. Это поддерживающее сообщество, где вопросы приветствуются, а знания свободно делятся.

Если у вас есть отзывы о продукте или ошибки при разработке, посетите:

Лицензия

Этот репозиторий лицензирован по лицензии MIT. Подробнее смотрите в файле LICENSE.

---

Отказ от ответственности:
Этот документ был переведен с помощью сервиса машинного перевода Co-op Translator. Несмотря на стремление к точности, пожалуйста, учитывайте, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на его исходном языке следует считать авторитетным источником. Для важной информации рекомендуется профессиональный перевод специалистом. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования данного перевода.