Web-Dev-For-Beginners/translations/ru

Веб-разработка для начинающих - учебная программа

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

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

Выполните следующие шаги, чтобы начать использовать эти ресурсы:

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

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

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

Arabic | Bengali | Bulgarian | Burmese (Myanmar) | Chinese (Simplified) | Chinese (Traditional, Hong Kong) | Chinese (Traditional, Macau) | Chinese (Traditional, Taiwan) | Croatian | Czech | Danish | Dutch | Estonian | Finnish | French | German | Greek | Hebrew | Hindi | Hungarian | Indonesian | Italian | Japanese | Kannada | Korean | Lithuanian | Malay | Malayalam | Marathi | Nepali | Nigerian Pidgin | Norwegian | Persian (Farsi) | Polish | Portuguese (Brazil) | Portuguese (Portugal) | Punjabi (Gurmukhi) | Romanian | Russian | Serbian (Cyrillic) | Slovak | Slovenian | Spanish | Swahili | Swedish | Tagalog (Filipino) | Tamil | Telugu | Thai | Turkish | Ukrainian | Urdu | Vietnamese

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

Этот репозиторий включает более 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!

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

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

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

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

Не пропустите нашу новую учебную программу по генеративному ИИ!

Посетите https://aka.ms/genai-js-course, чтобы начать!

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

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

• Формулирование запросов и проектирование запросов
• Генерация текстовых и графических приложений
• Поисковые приложения

Посетите 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 — чтобы помочь вам писать код быстрее

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

• необязательная быстрая заметка (sketchnote)
• необязательное дополнительное видео
• разминка перед уроком в виде викторины
• письменный урок
• для проектных уроков — пошаговые руководства, как создать проект
• проверочные задания
• вызов (challenge)
• дополнительное чтение
• задание
• викторина после урока

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

🗃️ Уроки

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

🏫 Педагогика

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

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

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

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

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

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

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

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

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

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

📘 PDF

PDF всех уроков доступен здесь.

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

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

LangChain

Azure / Edge / MCP / Agents

---

Серия Generative AI

---

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

---

Серия Copilot

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

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

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

Лицензия

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

---

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