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 ранее, он способен не только генерировать текст, но и создавать и редактировать файлы, запускать команды и многое другое.

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

Добавлен новый проект помощника на базе искусственного интеллекта, посмотрите проект

📣 Объявление — новая учебная программа по генеративному ИИ для 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 — для помощи в более быстром написании кода

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

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

Примечание о квизах: Все квизы находятся в папке Quiz-app, всего 48 квизов по 3 вопроса в каждом. Они доступны здесь, приложение квиза можно запускать локально или развернуть в 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	Игра в космос	Рисование на canvas	Изучить Canvas API для рисования элементов на экране	Рисование на Canvas	Chris
17	Игра в космос	Передвижение элементов по экрану	Узнать, как элементы приобретают движение с использованием декартовых координат и Canvas API	Передвижение элементов	Chris
18	Игра в космос	Обнаружение столкновений	Сделать так, чтобы элементы сталкивались и реагировали друг на друга, используя нажатия клавиш, и добавить функцию cooldown	Обнаружение столкновений	Chris
19	Игра в космос	Ведение счета	Выполнять математические вычисления на основе текущего состояния и прогресса игры	Ведение счета	Chris
20	Игра в космос	Завершение и перезапуск игры	Научиться завершать и перезапускать игру, включая очистку ресурсов и сброс переменных	Условие окончания	Chris
21	Банковское приложение	HTML-шаблоны и маршруты в веб-приложении	Узнать, как создать структуру многстраничного сайта, используя маршрутизацию и HTML-шаблоны	HTML-шаблоны и маршруты	Yohan
22	Банковское приложение	Создание форм для входа и регистрации	Изучить создание форм и обработку процедур валидации	Формы	Yohan
23	Банковское приложение	Методы получения и использования данных	Как данные поступают и уходят из приложения, как их получать, хранить и удалять	Данные	Yohan
24	Банковское приложение	Концепции управления состоянием	Как приложение сохраняет состояние и управляет им программно	Управление состоянием	Yohan
25	Код для браузера/VScode	Работа с VScode	Узнайте, как использовать редактор кода	Использование редактора кода VScode	Chris
26	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

---

Серия Generative AI

---

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

---

Серия Copilot

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

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

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

Лицензия

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

---

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