34 KiB

Raw Blame History Unescape Escape

Следуйте этим шагам, чтобы начать использовать эти ресурсы:

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

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

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

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

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

📣 Объявление — Новый учебный курс по генеративному ИИ для 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. Для этого нажмите 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	Terrarium	Замыкания в JavaScript, работа с DOM	Напишите JavaScript, чтобы террариум работал как интерфейс с функцией перетаскивания, сосредоточив внимание на замыканиях и работе с DOM	Замыкания в JavaScript, работа с DOM	Jen
11	Typing Game	Создание игры на скорость печати	Узнайте, как использовать события клавиатуры для управления логикой вашего JavaScript-приложения	Программирование, основанное на событиях	Christopher
12	Green Browser Extension	Работа с браузерами	Узнайте, как работают браузеры, их историю, и как создать первые элементы расширения для браузера	О браузерах	Jen
13	Green Browser Extension	Создание формы, вызов API и сохранение переменных в локальном хранилище	Напишите элементы JavaScript для вашего расширения браузера, чтобы вызывать API, используя переменные, сохраненные в локальном хранилище	API, формы и локальное хранилище	Jen
14	Green Browser Extension	Фоновые процессы в браузере, производительность веб-страниц	Используйте фоновые процессы браузера для управления иконкой расширения; узнайте о производительности веб-страниц и некоторых оптимизациях	Фоновые задачи и производительность	Jen
15	Space Game	Более сложная разработка игр с использованием JavaScript	Узнайте об использовании наследования через классы и композицию, а также о паттерне Pub/Sub, готовясь к созданию игры	Введение в сложную разработку игр	Chris
16	Space Game	Рисование на Canvas	Узнайте об API Canvas, который используется для рисования элементов на экране	Рисование на Canvas	Chris
17	Space Game	Перемещение элементов по экрану	Узнайте, как элементы могут двигаться, используя декартовы координаты и API Canvas	Перемещение элементов	Chris
18	Space Game	Обнаружение столкновений	Сделайте так, чтобы элементы сталкивались и реагировали друг на друга, используя нажатия клавиш, и добавьте функцию задержки для повышения производительности игры	Обнаружение столкновений	Chris
19	Space Game	Подсчет очков	Выполняйте математические вычисления на основе статуса и производительности игры	Подсчет очков	Chris
20	Space Game	Завершение и перезапуск игры	Узнайте, как завершать и перезапускать игру, включая очистку ресурсов и сброс значений переменных	Условие завершения	Chris
21	Banking App	HTML-шаблоны и маршруты в веб-приложении	Узнайте, как создать структуру архитектуры многостраничного веб-сайта, используя маршрутизацию и HTML-шаблоны	HTML-шаблоны и маршруты	Yohan
22	Banking App	Создание формы входа и регистрации	Узнайте, как создавать формы и обрабатывать процедуры валидации	Формы	Yohan
23	Banking App	Методы получения и использования данных	Узнайте, как данные поступают в ваше приложение и выходят из него, как их получать, сохранять и удалять	Данные	Yohan
24	Banking App	Концепции управления состоянием	Узнайте, как ваше приложение сохраняет состояние и как управлять им программно	Управление состоянием	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.

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

34 KiB Raw Blame History Unescape Escape