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 (автоматически и всегда актуально)

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 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 и адаптивности страницы	Введение в CSS	Jen
10	Террариум	Замыкания JavaScript, работа с DOM	Написать JavaScript для реализации функционала перетаскивания в террариуме, акцент на замыкания и манипуляции DOM	Замыкания JS и работа с DOM	Jen
11	Игра на скорость набора	Создание игры для набора текста	Научиться использовать события клавиатуры для управления логикой JS приложения	Событийно-ориентированное программирование	Christopher
12	Расширение зеленого браузера	Работа с браузерами	Узнать, как работают браузеры, их историю и как построить первые элементы расширения	О браузерах	Jen
13	Расширение зеленого браузера	Создание формы, вызов API и хранение переменных в localStorage	Написать JavaScript для расширения браузера для вызова API с использованием переменных из локального хранилища	API, формы и локальное хранилище	Jen
14	Расширение зеленого браузера	Фоновые процессы в браузере, производительность веба	Использовать фоновые процессы браузера для управления иконкой расширения; изучить веб-производительность и оптимизации	Фоновые задачи и производительность	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 Ассистент	Chris

🏫 Педагогика

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

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

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

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

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

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

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

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

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

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

📘 PDF

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

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

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

LangChain

Azure / Edge / MCP / Agents

---

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

---

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

---

Серия Copilot

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

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

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

Лицензия

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

---

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