Изучите основы веб-разработки с нашим 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 и знакомьтесь с экспертами и другими разработчиками
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:
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 Challenge 🚀" в большинстве глав. Это новая задача для вас с использованием GitHub Copilot и режима агента. Если вы ранее не использовали режим агента, он способен не только генерировать текст, но и создавать и редактировать файлы, запускать команды и многое другое.
Новый проект AI Assistant только что добавлен, ознакомьтесь с проектом
Не пропустите нашу новую учебную программу по 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
В созданной вами копии репозитория нажмите кнопку Code и выберите Open with Codespaces. Это создаст для вас новый Codespace для работы.
Для запуска этой учебной программы локально вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок, Введение в языки программирования и инструменты, поможет вам выбрать наиболее подходящие инструменты.
Мы рекомендуем использовать Visual Studio Code в качестве редактора, который также имеет встроенный терминал. Скачать Visual Studio Code можно здесь.
-
Клонируйте свой репозиторий на компьютер. Для этого нажмите кнопку Code и скопируйте URL:
Затем откройте Терминал в 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 со всеми уроками можно найти здесь.
Наша команда выпускает и другие курсы! Ознакомьтесь:
-9333EA?style=for-the-badge&labelColor=E5E7EB&color=9333EA){kind=icon}
-C084FC?style=for-the-badge&labelColor=E5E7EB&color=C084FC){kind=icon}
-E879F9?style=for-the-badge&labelColor=E5E7EB&color=E879F9){kind=icon}
Если вы застряли или у вас есть вопросы по созданию AI-приложений, присоединяйтесь к обсуждениям вместе с другими учащимися и опытными разработчиками о MCP. Это поддерживающее сообщество, где приветствуются вопросы и свободно делятся знаниями.
Если у вас есть отзывы о продукте или ошибки во время разработки, посетите:
Этот репозиторий лицензирован по лицензии MIT. Подробнее см. в файле LICENSE.
Отказ от ответственности:
Этот документ был переведен с помощью автоматического сервиса перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, имейте в виду, что автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на языке оригинала следует считать главным и официальным источником. Для получения критически важной информации рекомендуется обращаться к профессиональному человеческому переводу. Мы не несем ответственности за любые недоразумения или неправильные толкования, возникшие в результате использования данного перевода.