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. Присоединиться к 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 | Khmer | 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:

Bash / macOS / Linux:

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'

CMD (Windows):

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. Вы можете сделать это, нажав File > Open Folder и выбрав только что склонированную папку.

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

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

📂 Каждый урок включает:

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

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

🗃️ Уроки

	Название проекта	Изучаемые концепции	Учебные цели	Связанный урок	Автор
01	Начало работы	Введение в программирование и используемые инструменты	Узнать основные принципы большинства языков программирования и о софте, который помогает профессиональным разработчикам	Введение в языки программирования и инструменты	Jasmine
02	Начало работы	Основы GitHub, включая работу в команде	Как использовать GitHub в проекте, как сотрудничать с другими над кодом	Введение в GitHub	Floor
03	Начало работы	Доступность	Узнайте основы доступности веб-сайтов	Основы доступности	Christopher
04	Основы JS	Типы данных в JavaScript	Основы типов данных в JavaScript	Типы данных	Jasmine
05	Основы JS	Функции и методы	Узнайте о функциях и методах для управления логикой приложения	Функции и методы	Jasmine and Christopher
06	Основы JS	Создание условий в JS	Узнайте, как создавать условия в коде с помощью конструкций для принятия решений	Создание условий	Jasmine
07	Основы JS	Массивы и циклы	Работа с данными с использованием массивов и циклов в JavaScript	Массивы и циклы	Jasmine
08	Террариум	Практика HTML	Создание HTML для онлайн-террариума с акцентом на построение макета	Введение в HTML	Jen
09	Террариум	Практика CSS	Создание CSS для стилизации онлайн-террариума, включая основы CSS и адаптивность страницы	Введение в CSS	Jen
10	Террариум	Замыкания в JavaScript, работа с DOM	Написание JavaScript для создания интерфейса перетаскивания в террариуме; изучение замыканий и манипуляций с DOM	Замыкания в JavaScript, работа с DOM	Jen
11	Игра на набор текста	Создание игры на набор текста	Узнайте, как использовать события клавиатуры для управления логикой вашего JavaScript-приложения	Событийно-ориентированное программирование	Christopher
12	Расширение браузера Green	Работа с браузерами	Узнайте, как работают браузеры, их история и как создать первые элементы расширения	О браузерах	Jen
13	Расширение браузера Green	Создание формы, вызов API и хранение данных в локальном хранилище	Создайте JavaScript-компоненты расширения браузера для вызова API с использованием данных из локального хранилища	API, формы и локальное хранилище	Jen
14	Расширение браузера Green	Фоновые процессы в браузере, производительность веб-сайта	Используйте фоновые процессы браузера для управления иконкой расширения; узнайте о производительности и оптимизациях	Фоновые задачи и производительность	Jen
15	Игра в космосе	Продвинутый разработка игр на JavaScript	Узнайте про наследование через классы и композицию, а также паттерн Pub/Sub для создания игры	Введение в продвинутую разработку игр	Chris
16	Игра в космосе	Рисование на холсте	Узнайте об API Canvas для рисования элементов на экране	Рисование на Canvas	Chris
17	Игра в космосе	Перемещение элементов по экрану	Узнайте, как элементы могут двигаться с использованием декартовых координат и API Canvas	Перемещение элементов	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. Сайт будет доступен на порту 3000 вашего локального хоста: localhost:3000.

📘 PDF

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

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

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

LangChain

Azure / Edge / MCP / Agents

---

Серия "Генеративный ИИ"

---

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

---

Серия Copilot

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

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

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

Лицензия

Этот репозиторий лицензирован по лицензии MIT. Дополнительную информацию смотрите в файле LICENSE.

---

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