39 KiB

Raw Blame History Unescape Escape

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

Изучите основы веб-разработки с нашим 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 (автоматически и всегда актуально)

Если вы хотите добавить дополнительные переводы, список поддерживаемых языков доступен здесь

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

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

📣 Анонс - Новые задания с режимом GitHub Copilot Agent!

Добавлено новое задание, ищите "GitHub Copilot Agent Challenge 🚀" в большинстве глав. Это новое задание, которое вы можете выполнить, используя GitHub Copilot и режим Agent. Если вы еще не использовали режим Agent, он способен не только генерировать текст, но и создавать и редактировать файлы, выполнять команды и многое другое.

📣 Анонс - Новый проект с использованием генеративного ИИ

Добавлен новый проект AI Assistant, ознакомьтесь с ним проект

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

📂 Каждый урок включает:

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

Примечание о тестах: Все тесты находятся в папке 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	Замыкания в 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
25	Редактор кода Browser/VScode	Работа с VScode	Узнайте, как использовать редактор кода	Использование редактора кода VScode	Chris
26	AI Assistants	Работа с ИИ	Узнайте, как создать собственного помощника на основе ИИ	Проект помощника на основе ИИ	Chris

🏫 Педагогика

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

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

Программа обучает основам 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. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

39 KiB Raw Blame History Unescape Escape