42 KiB

Raw Blame History Unescape Escape

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

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

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

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

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

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

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

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

Этот репозиторий содержит более 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"
Это даст вам все необходимое для прохождения курса с гораздо более быстрой загрузкой.

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

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

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

📣 Объявление - Новые задания с GitHub Copilot Agent mode!

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

📣 Объявление - Новый проект с использованием Generative AI

Новый проект AI Assistant только что добавлен, ознакомьтесь с проектом

📣 Объявление - Новая учебная программа по Generative AI для JavaScript уже выпущена

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

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

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

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

Подсказки и их разработка
Генерация приложений для текста и изображений
Поисковые приложения

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

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

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

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

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

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

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

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

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

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

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

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

Запуск учебной программы в Codespace

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

Запуск учебной программы локально на вашем компьютере

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

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

Клонируйте свой репозиторий на компьютер. Для этого нажмите кнопку Code и скопируйте URL:

CodeSpace

Затем откройте Терминал в Visual Studio Code и выполните следующую команду, заменив <your-repository-url> на только что скопированный URL:
```
git clone <your-repository-url>
```
Откройте папку в Visual Studio Code. Для этого нажмите File > Open Folder и выберите только что клонированную папку.

Рекомендуемые расширения 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, чтобы сделать террариум интерфейсом drag/drop, с фокусом на замыкания и манипуляции DOM	Замыкания и 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	Космическая игра	Обнаружение столкновений	Сделать так, чтобы элементы сталкивались и реагировали друг на друга с помощью нажатий клавиш и функции восстановления	Обнаружение столкновений	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, а также последним инструментам и методикам, используемым современными веб-разработчиками. Студенты получат возможность получить практический опыт, создавая игру на набор текста, виртуальный террариум, экологичное расширение для браузера, игру в стиле space-invader и банковское приложение для бизнеса. К концу курса студенты будут уверенно владеть основами веб-разработки.

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

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

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

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

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

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

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

📘 PDF

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

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

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

LangChain

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

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

Базовое обучение

Серия Copilot

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

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

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

Лицензия

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

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

42 KiB Raw Blame History Unescape Escape