Веб-разработка для начинающих - Учебный план

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

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

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

📣 Анонс - Новый учебный план по генеративному ИИ для 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:

Затем откройте Терминал в Visual Studio Code и выполните следующую команду, заменив <your-repository-url> на скопированный URL:
```
git clone <your-repository-url>
```
Откройте папку в 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	Основы JavaScript	Типы данных в JavaScript	Основы типов данных в JavaScript	Типы данных	Jasmine
05	Основы JavaScript	Функции и методы	Изучение функций и методов для управления логикой приложения	Функции и методы	Jasmine и Christopher
06	Основы JavaScript	Принятие решений в JavaScript	Как создавать условия в коде с использованием методов принятия решений	Принятие решений	Jasmine
07	Основы JavaScript	Массивы и циклы	Работа с данными с использованием массивов и циклов в 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	Зеленое расширение для браузера	Работа с браузерами	Как работают браузеры, их история и как создать первые элементы расширения для браузера	О браузерах	Jen
13	Зеленое расширение для браузера	Создание формы, вызов API и хранение переменных в локальном хранилище	Создание 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

🏫 Педагогика

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

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

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

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

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

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

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

Ознакомьтесь с нашим Кодексом поведения и Рекомендациями по внесению вклада. Мы приветствуем ваши конструктивные отзывы!

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

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

📘 PDF

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

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

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

Лицензия

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