38 KiB
Веб-разработка для начинающих — учебная программа
Изучите основы веб-разработки с нашим комплексным 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:
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 с копией учебной программы.
Выполните следующие шаги:
- Форкните репозиторий: Нажмите на кнопку "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 — для помощи в более быстром написании кода
📂 Каждый урок включает:
- опциональные заметки
- опциональное вспомогательное видео
- разминку-квиз перед уроком
- письменный урок
- для проектных уроков — пошаговые инструкции по созданию проекта
- проверки знаний
- вызов (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 со всеми уроками доступен здесь.
🎒 Другие курсы
Наша команда выпускает и другие курсы! Ознакомьтесь:
LangChain
Azure / Edge / MCP / Agents
Серия Generative AI
-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}
Основное обучение
Серия Copilot
Получение помощи
Если вы застряли или у вас есть вопросы по созданию AI-приложений. Присоединяйтесь к другим учащимся и опытным разработчикам в обсуждениях о MCP. Это поддерживающее сообщество, где вопросы приветствуются, а знания свободно делятся.
Если у вас есть отзывы о продукте или ошибки при разработке, посетите:
Лицензия
Этот репозиторий лицензирован под лицензией MIT. Подробнее смотрите в файле LICENSE.
Отказ от ответственности: Этот документ был переведен с использованием автоматического сервиса перевода Co-op Translator. Несмотря на наши усилия по обеспечению точности, имейте в виду, что автоматический перевод может содержать ошибки или неточности. Оригинальный документ на его исходном языке следует рассматривать как авторитетный источник. Для важной информации рекомендуется использовать профессиональный перевод, выполненный человеком. Мы не несем ответственности за любые недоразумения или неправильное толкование, возникшие в результате использования данного перевода.