Web Dev For Beginners
1.0.0
Изучите основы веб-разработки с помощью нашего 12-недельного комплексного курса от Microsoft Cloud Advocates. Каждый из 24 уроков посвящен JavaScript, CSS и HTML посредством практических проектов, таких как террариумы, расширения для браузера и космические игры. Участвуйте в викторинах, обсуждениях и практических заданиях. Совершенствуйте свои навыки и оптимизируйте сохранение знаний с помощью нашей эффективной педагогики, основанной на проектах. Начните свой путь кодирования сегодня!
Посетите страницу Student Hub , где вы найдете ресурсы для начинающих, студенческие пакеты и даже способы получить бесплатный ваучер на сертификат. Это страница, которую вы хотите добавить в закладки и проверять время от времени, поскольку мы ежемесячно меняем контент.
Не пропустите нашу НОВУЮ программу из 12 уроков по генеративному искусственному интеллекту!
Каждый урок включает в себя задание, которое нужно выполнить, проверку знаний и задания, которые помогут вам освоить такие темы, как:
подсказка и оперативное проектирование
создание текстовых и графических приложений
поиск приложений
Посетите https://aka.ms/genai-beginners, чтобы начать!
Учителя , мы включили несколько предложений по использованию этой учебной программы. Мы будем рады вашим отзывам на нашем дискуссионном форуме!
Каждый урок учащиеся начинают с теста перед лекцией, затем читают лекционный материал, выполняют различные задания и проверяют свое понимание с помощью теста после лекции.
Чтобы улучшить свой учебный опыт, общайтесь со своими коллегами и вместе работайте над проектами! Обсуждения приветствуются на нашем дискуссионном форуме, где наша команда модераторов будет готова ответить на ваши вопросы.
Чтобы продолжить свое образование, мы настоятельно рекомендуем изучить Microsoft Learn для получения дополнительных учебных материалов.
Эта учебная программа имеет готовую среду разработки! Приступая к работе, вы можете запустить учебную программу в Codespace ( среда на основе браузера, не требующая установки ) или локально на своем компьютере с помощью текстового редактора, такого как Visual Studio Code.
Чтобы вы могли легко сохранить свою работу, рекомендуется создать собственную копию этого репозитория. Вы можете сделать это, нажав кнопку «Использовать этот шаблон» вверху страницы. В вашей учетной записи GitHub будет создан новый репозиторий с копией учебной программы.
Выполните следующие действия:
Форкнуть репозиторий : нажмите кнопку «Разветвить» в правом верхнем углу этой страницы.
Клонируйте репозиторий : git clone https://github.com/microsoft/Web-Dev-For-Beginners.git
В созданной вами копии этого репозитория нажмите кнопку «Код» и выберите «Открыть с помощью Codespaces» . Это создаст новое кодовое пространство для вашей работы.
Чтобы запустить эту учебную программу локально на своем компьютере, вам понадобится текстовый редактор, браузер и инструмент командной строки. Наш первый урок «Введение в языки программирования и профессиональные инструменты» познакомит вас с различными вариантами каждого из этих инструментов, чтобы вы могли выбрать тот, который лучше всего подходит для вас.
Мы рекомендуем использовать в качестве редактора Visual Studio Code, который также имеет встроенный терминал. Вы можете скачать код Visual Studio здесь.
Клонируйте репозиторий на свой компьютер. Вы можете сделать это, нажав кнопку «Код» и скопировав URL-адрес:
Затем откройте Терминал в Visual Studio Code и выполните следующую команду, заменив <your-repository-url> только что скопированным URL-адресом:
git clone <URL-адрес-вашего-репозитория>
Откройте папку в Visual Studio Code. Вы можете сделать это, нажав «Файл» > «Открыть папку» и выбрав папку, которую вы только что клонировали.
Рекомендуемые расширения кода Visual Studio:
Live Server — для предварительного просмотра HTML-страниц в Visual Studio Code.
Copilot — поможет вам быстрее писать код
дополнительная заметка
дополнительное дополнительное видео
разминка перед уроком
письменный урок
для уроков на основе проектов, пошаговые руководства по созданию проекта
проверка знаний
вызов
дополнительное чтение
назначение
викторина после урока
Примечание о викторинах : все тесты содержатся в папке приложения Quiz, всего 48 тестов по три вопроса в каждом. Они связаны внутри уроков. Приложение викторины можно запускать локально или развертывать в Azure; следуйте инструкциям в папке
quiz-app. Постепенно они локализуются.
| Название проекта | Преподаваемые концепции | Цели обучения | Связанный урок | Автор | |
|---|---|---|---|---|---|
| 01 | Начиная | Введение в программирование и инструменты торговли | Изучите основные основы большинства языков программирования и программное обеспечение, которое помогает профессиональным разработчикам выполнять свою работу. | Введение в языки программирования и профессиональные инструменты | Жасмин |
| 02 | Начиная | Основы GitHub, включая работу в команде. | Как использовать GitHub в своем проекте, как сотрудничать с другими над базой кода | Введение в GitHub | Пол |
| 03 | Начиная | Доступность | Изучите основы веб-доступности | Основы доступности | Кристофер |
| 04 | Основы JS | Типы данных JavaScript | Основы типов данных JavaScript | Типы данных | Жасмин |
| 05 | Основы JS | Функции и методы | Узнайте о функциях и методах управления логическим потоком приложения. | Функции и методы | Жасмин и Кристофер |
| 06 | Основы JS | Принятие решений с помощью JS | Узнайте, как создавать условия в коде, используя методы принятия решений. | Принятие решений | Жасмин |
| 07 | Основы JS | Массивы и циклы | Работайте с данными с помощью массивов и циклов в JavaScript. | Массивы и циклы | Жасмин |
| 08 | Террариум | HTML на практике | Создайте HTML-код для создания онлайн-террариума, уделив особое внимание созданию макета. | Введение в HTML | Джен |
| 09 | Террариум | CSS на практике | Создайте CSS для стилизации онлайн-террариума, сосредоточив внимание на основах CSS, включая обеспечение адаптивности страницы. | Введение в CSS | Джен |
| 10 | Террариум | Замыкания JavaScript, манипулирование DOM | Создайте JavaScript, чтобы террариум функционировал как интерфейс перетаскивания, уделяя особое внимание замыканиям и манипуляциям с DOM. | Замыкания JavaScript, манипулирование DOM | Джен |
| 11 | Печатная игра | Создайте игру для набора текста | Узнайте, как использовать события клавиатуры для управления логикой вашего приложения JavaScript. | Программирование, управляемое событиями | Кристофер |
| 12 | Зелёное расширение для браузера | Работа с браузерами | Узнайте, как работают браузеры, их историю и как создавать первые элементы расширения браузера. | О браузерах | Джен |
| 13 | Зелёное расширение для браузера | Создание формы, вызов API и сохранение переменных в локальном хранилище. | Создайте элементы JavaScript расширения вашего браузера для вызова API с использованием переменных, хранящихся в локальном хранилище. | API, формы и локальное хранилище | Джен |
| 14 | Зелёное расширение для браузера | Фоновые процессы в браузере, производительность в Интернете | Используйте фоновые процессы браузера для управления значком расширения; узнать о веб-производительности и некоторых оптимизациях, которые необходимо сделать | Фоновые задачи и производительность | Джен |
| 15 | Космическая игра | Более продвинутая разработка игр с использованием JavaScript | Узнайте о наследовании с использованием классов и композиции, а также шаблона Pub/Sub при подготовке к созданию игры. | Введение в продвинутую разработку игр | Крис |
| 16 | Космическая игра | Рисование на холсте | Узнайте об API Canvas, который используется для рисования элементов на экране. | Рисование на холсте | Крис |
| 17 | Космическая игра | Перемещение элементов по экрану | Узнайте, как элементы могут двигаться с помощью декартовых координат и Canvas API. | Перемещение элементов | Крис |
| 18 | Космическая игра | Обнаружение столкновений | Заставляйте элементы сталкиваться и реагировать друг на друга с помощью нажатий клавиш и обеспечивайте функцию восстановления для обеспечения производительности игры. | Обнаружение столкновений | Крис |
| 19 | Космическая игра | Ведение счета | Выполняйте математические вычисления в зависимости от состояния и производительности игры. | Ведение счета | Крис |
| 20 | Космическая игра | Завершение и перезапуск игры | Узнайте, как завершить и перезапустить игру, включая очистку ресурсов и сброс значений переменных. | Конечные условия | Крис |
| 21 | Банковское приложение | HTML-шаблоны и маршруты в веб-приложении | Узнайте, как создать каркас архитектуры многостраничного веб-сайта с использованием маршрутизации и шаблонов HTML. | HTML-шаблоны и маршруты | Йохан |
| 22 | Банковское приложение | Создайте форму входа и регистрации | Узнайте о создании форм и обработке процедур проверки. | Формы | Йохан |
| 23 | Банковское приложение | Методы получения и использования данных | Как данные передаются в ваше приложение и из него, как их получать, хранить и удалять | Данные | Йохан |
| 24 | Банковское приложение | Концепции государственного управления | Узнайте, как ваше приложение сохраняет состояние и как управлять им программно. | Государственное управление | Йохан |
Наша учебная программа разработана с учетом двух ключевых педагогических принципов:
обучение на основе проектов
частые викторины
Программа обучает основам JavaScript, HTML и CSS, а также новейшим инструментам и методам, используемым современными веб-разработчиками. Студенты получат возможность получить практический опыт, создав игру для набора текста, виртуальный террариум, экологически чистое расширение для браузера, игру в стиле космического захватчика и банковское приложение для бизнеса. К концу серии студенты получат четкое представление о веб-разработке.
? Вы можете пройти первые несколько уроков этой учебной программы в качестве курса обучения в Microsoft Learn!
Обеспечивая соответствие содержания проектам, процесс становится более интересным для учащихся и улучшается запоминание концепций. Мы также написали несколько начальных уроков по основам JavaScript для ознакомления с концепциями в сочетании с видео из коллекции видеоуроков «Серия для начинающих: JavaScript», некоторые авторы которой внесли свой вклад в эту учебную программу.
Кроме того, тест с низкими ставками перед уроком формирует намерение учащегося изучить тему, а второй тест после урока обеспечивает дальнейшее запоминание. Эта учебная программа была разработана так, чтобы быть гибкой и увлекательной, и ее можно изучать полностью или частично. Проекты начинаются с малого и к концу 12-недельного цикла становятся все более сложными.
Хотя мы намеренно избегали внедрения фреймворков JavaScript, чтобы сконцентрироваться на базовых навыках, необходимых веб-разработчику перед внедрением фреймворка, хорошим следующим шагом к завершению этой учебной программы было бы изучение Node.js с помощью другой коллекции видеороликов: «Серия для начинающих: Node.js".
Ознакомьтесь с нашим Кодексом поведения и рекомендациями по участию. Будем рады вашим конструктивным отзывам!
Вы можете запустить эту документацию в автономном режиме с помощью Docsify. Создайте форк этого репозитория, установите Docsify на свой локальный компьютер, а затем в корневой папке этого репозитория введите docsify serve . Веб-сайт будет обслуживаться через порт 3000 на вашем локальном хосте: localhost:3000 .
PDF-файл со всеми уроками можно найти здесь.
Наша команда выпускает и другие учебные программы! Проверить:
ИИ для начинающих
Наука о данных для начинающих
Генеративный ИИ для начинающих
НОВАЯ Кибербезопасность для начинающих
Интернет вещей для начинающих
Машинное обучение для начинающих
XR-разработка для начинающих
Освоение GitHub Copilot для парного программирования с искусственным интеллектом
Этот репозиторий лицензируется по лицензии MIT. Дополнительную информацию смотрите в файле LICENSE.
