HTML Code Play: Learn HTML

Изучайте веб-разработку, изменяя код и наблюдая за его работой. HTML Code Play объединяет уроки по HTML, CSS и JavaScript с мобильным редактором кода, рабочими примерами, викторинами и играми по программированию. Используйте его для изучения концепции, пробуйте свои силы самостоятельно и отслеживайте свой прогресс на одном устройстве.
ЧИТАЙТЕ, РЕДАКТИРУЙТЕ И ЗАПУСКАЙТЕ
Изучите каталог обучающих материалов, откройте учебное пособие и прочтите его объяснение вместе с полным примером кода. Отправьте пример в редактор, запустите исходный код, затем измените тег, стиль или выражение и сравните результат. Этот практический рабочий процесс связывает прочитанный вами синтаксис со страницей или поведением, которое он создает.
Рабочее пространство поддерживает редактирование HTML, CSS и JavaScript с подсветкой синтаксиса. Используйте отмену и повтор во время экспериментов, находите текст, переходите к строке и регулируйте размер шрифта редактора. Создайте новую страницу или выберите доступный шаблон, если вам нужна отправная точка. Открывайте HTML-файлы, сохраняйте свою работу, используйте функцию «Сохранить как» для создания другой копии или поделитесь файлом кода через параметры общего доступа вашего устройства.
ПОСЛЕДОВАТЕЛЬНОЕ ОБУЧЕНИЕ И ПРАКТИКА
Каталог охватывает 11 тем веб-технологий, от структуры и стилизации страниц до скриптинга, векторной графики, адаптивной верстки и интерактивных примеров. Ищите уроки по названию или разделу, чтобы найти нужный материал. Закрепляйте полезные уроки для целенаправленного повторения, добавляйте собственные заметки к урокам и переключайтесь между уроками с помощью кнопок «Предыдущий» и «Следующий».
Каждый урок содержит объяснение, синтаксис и работающий пример. После урока пройдите тест по теме или выполните практическое задание. Практические упражнения предлагают вам дополнить недостающий код, с подсказками и обратной связью по ответам, чтобы помочь вам проверить детали, которые вы пропустили. Результаты теста позволяют проверить понимание перед возвращением к уроку.
ШЕСТЬ СПОСОБОВ ПРАКТИКИ
Выберите игру по программированию, чтобы поработать над другим навыком:
- Code Builder: переставляйте блоки, чтобы восстановить работающий код.
- Output Detective: предскажите, что выдает фрагмент кода.
- Bug Hunt: найдите ошибочную строку.
- Fill the Gap: выберите недостающий токен кода.
- Match Lab: сопоставьте термины с их значениями.
Rapid Fire: отвечайте на вопросы типа «верно/неверно» на время.
Уровни активности записывают результаты и открывают следующий шаг. Переигрывайте доступные уровни, чтобы улучшить свой результат, или используйте смешанные плейлисты для практики по мере их появления.
ОРГАНИЗУЙТЕ СВОЕ ОБУЧЕНИЕ
Экран прогресса суммирует пройденные уроки, тесты и упражнения по технологиям. Проверяйте свою карту навыков и предлагаемый следующий план обучения, продолжайте урок с главного экрана и выполняйте ежедневные задания. Серии и значки заданий делают вашу активность видимой. Дополнительные напоминания об обучении требуют разрешения на уведомления и могут быть отключены.
Ваш прогресс в уроках, заметки и результаты игр хранятся на устройстве. Элементы управления экраном обучения включают увеличенный шрифт, высокую контрастность и уменьшенное движение. Отдельные тесты по HTML, CSS и JavaScript предлагают сертификаты достижений внутри приложения; это записи об обучении в приложении, а не аккредитованная квалификация.
Сообщения в онлайн-сообществе предлагают еще один источник кода для изучения при подключении к сети. Для доступа к контенту, поддерживаемому сетью, и примерам, загружающим внешние ресурсы, требуется доступ в Интернет; Локальное хранилище прогресса не обеспечивает синхронизацию с облаком.
Для начинающих, студентов и учащихся, возвращающихся к изучению концепций фронтенда, начните с одного примера, внесите небольшое изменение и углубите понимание на практике.