Учить HTML - Курс Кода
Учить HTML - Курс Кода — Курс HTML с редактором и предварительным просмотром в реальном времени у вас под рукой
Учить HTML - Курс Кода — это курс HTML для iPhone и Android, в котором редактор HTML с предварительным просмотром в реальном времени доступен в одно касание из каждого урока. Введите тег, посмотрите, как отображается страница, и постепенно перейдите от первого заголовка к формам, таблицам, семантическому HTML5, доступности и веб-компонентам в рамках 40 коротких курсов.
- Цена
- Бесплатно, обновление до Pro
- Платформы
- iOS и Android
- Языки
- 22
- Возрастной рейтинг
- 4+
- Требуется
- iOS 15.1 или новее
- App Store
- 3.0 ★ (1)
Тег приобретает смысл, когда вы уже видели, как он что-то отображает.
HTML — это язык разметки, поэтому самый быстрый способ понять новый элемент — ввести его и посмотреть на результат. Каждый урок в этом приложении заканчивается уже открытым редактором: рядом с вашей разметкой отображается предварительный просмотр, а файлы CSS или JavaScript можно добавлять, когда вы будете к этому готовы.
Что это
Учить HTML - Курс Кода — бесплатный HTML-курс для iOS и Android, который обучает разметке веб-страниц в 40 курсах и 159 коротких уроках, выстроенных от начального уровня (A1) до продвинутого (C1). Каждая тема сопровождается встроенным редактором кода HTML и мгновенным предварительным просмотром, 20 практическими проектами, включая форму обратной связи и доступную таблицу цен, 20 заданиями на отладку и наставником AI. Благодаря этому полный новичок сможет пройти путь от пустого документа до семантичных, доступных и хорошо структурированных страниц.
В приложении
Как это выглядит
Курс
Что входит в HTML-курс
40 курсов и 159 уроков из собственного списка курсов приложения — в том порядке, в котором их проходят по плану обучения.
Структура документа, текст, ссылки, изображения и списки
Основа каждой страницы: структура документа, заголовки и абзацы, ссылки и навигация, изображения и иллюстрации, нумерованные и маркированные списки.
Таблицы, атрибуты и глобальные атрибуты
Сначала — размещение данных в таблицах, затем атрибуты для настройки элемента, включая глобальные атрибуты, работающие с любым тегом.
Формы: основы, расширенные элементы управления и валидация
Сначала — базовые поля ввода, затем более функциональные элементы управления, а после — атрибуты валидации, с помощью которых браузер проверяет поле перед отправкой.
Семантический HTML5, head и метаданные, аудио и видео
Семантические элементы, head документа и его метаданные, а также элементы audio и video.
Специальные возможности, роли ARIA и расширенные шаблоны ARIA
Основы доступности, роли и атрибуты ARIA, а также расширенные шаблоны для пользовательских виджетов.
Атрибуты данных, шаблоны, Canvas, SVG и iframe
Пользовательские атрибуты данных, HTML-шаблоны, элемент canvas, SVG внутри HTML и встроенный контент в iframe.
Web Storage, Drag and Drop, SEO и шаблоны электронных писем
Web Storage и API Drag and Drop, SEO и социальные метатеги, а также особые правила HTML-шаблонов для электронных писем.
Web Components, производительность и HTML в крупных проектах
Пользовательские элементы, shadow DOM, import maps и progressive enhancement, а также производительность, безопасность, PWA и тестирование — вплоть до работы с HTML в крупных проектах.
Как это работает
Как вы изучаете тег: от чтения до отображения
Урок короткий, а редактор находится рядом, поэтому изучение концепции и её практика проходят за один сеанс.
Прочитайте один короткий урок
Продолжите обучение с того места, где остановились. Каждый урок посвящён одной идее, например маркированному списку или изображению с альтернативным текстом, и занимает несколько минут.
Введите код в редактор и наблюдайте за предварительным просмотром
Откройте редактор и напишите разметку. Предварительный просмотр перерисует страницу, а вкладки CSS и JavaScript будут готовы, когда вы захотите оформить страницу или добавить ей интерактивность.
Проверьте, исправьте, создайте
Каждая тема заканчивается тестом и заданием по программированию. Если тег или ошибка непонятны, наставник AI объяснит их; задание на отладку предложит исправить сломанную страницу, а практический проект поможет создать то, что можно показать другим.
Что внутри
Что входит в Learn HTML
40
Курсы от A1 до C1
159 уроков охватывают структуру документа, текст, ссылки, изображения и списки, затем таблицы, формы и семантический HTML5, а также доступность, веб-компоненты, безопасность и History and Navigation API.
В реальном времени
Редактор HTML с предварительным просмотром
Пишите разметку и наблюдайте, как обновляется отображаемая страница. В тот же проект можно добавлять файлы CSS и JavaScript, превращая обычный документ в небольшой работающий веб-сайт.
20
Практические проекты
Пошаговые проекты, включая страницу с рецептами, форму обратной связи, фотогалерею, панель навигации и доступную таблицу цен.
20
Задания на отладку
Настоящие неисправности, которые нужно найти: форма регистрации, которая ничего не отправляет, метка, по которой никто не может нажать, или страница, которая загружается на телефоне уменьшенной.
80
Шпаргалка по тегам
Список из 80 тегов, элементов и атрибутов HTML на случай, когда вы знаете, что хотите найти, но не знаете, как это называется.
50
Вопросы для собеседования
Пятьдесят вопросов с собеседований для веб-разработчиков и понятные ответы на них, а также библиотека кода с короткими примерами, которые можно открыть и отредактировать, и место для сохранения собственного кода и заметок.
Предыстория
Что такое HTML и можно ли научиться ему, печатая код на телефоне?
HTML (HyperText Markup Language) — это язык, который описывает структуру веб-страницы: какой текст является заголовком, какой — абзацем, куда ведёт ссылка и что запрашивает форма. Это не язык программирования, поэтому здесь нет циклов и переменных, с которыми пришлось бы бороться, — именно поэтому HTML обычно становится первым шагом в веб-разработке. Поскольку результат виден сразу после ввода, HTML хорошо подходит для коротких занятий с телефона: тег достаточно мал, чтобы набрать его большим пальцем, а предварительный просмотр сразу показывает, всё ли получилось.
Элементы, теги и атрибутытри слова, которые встречаются в каждом уроке
Элемент — это фрагмент содержимого со своим смыслом, записанный между открывающим и закрывающим тегами, например абзац или элемент списка. Атрибуты находятся внутри открывающего тега и настраивают его, например задают адрес, на который ведёт ссылка, или текстовое описание изображения. Почти каждая ошибка новичка — это пропущенный закрывающий тег или неправильно размещённый атрибут.
Семантический HTMLзаголовки, навигация, основной раздел и подвал
Семантические элементы сообщают, чем является блок страницы, а не как он выглядит. Для панели навигации, статьи и подвала есть отдельные элементы — это помогает программам чтения с экрана, поисковым системам и всем, кому позже придётся редактировать страницу. Именно эта привычка отличает аккуратную страницу от набора безликих контейнеров.
HTML, CSS и JavaScriptкто за что отвечает
HTML содержит структуру и контент, CSS управляет внешним видом этого контента, а JavaScript добавляет поведение, например реакцию на нажатие. Если сначала изучить HTML, двум другим технологиям будет к чему подключаться. В редакторе приложения есть отдельные вкладки HTML, CSS и JavaScript, поэтому с самого начала можно разделить эти три задачи.
Формы и доступностьгде простые страницы становятся серьёзнее
Формы позволяют странице запрашивать у посетителя любую информацию, и именно здесь чаще всего начинаются проблемы с доступностью: метка, по которой никто не может нажать, или поле, название которого не может определить программа чтения с экрана. Метки, атрибуты валидации и роли ARIA — небольшие фрагменты разметки, от которых зависит, будет ли страница работать для всех.
Подходит
Кому это подходит — а кому нет
Подойдёт, если вы
- Пишете свою первую веб-страницу и хотите, чтобы каждый тег объяснили до его использования
- Лучше всего учитесь, когда сразу видите результат выполнения каждой строки
- Ведёте блог, страницу магазина или портфолио и хотите редактировать разметку, которая за ними стоит
- Планируете перейти к CSS, JavaScript или фронтенд-разработке и сначала хотите заложить прочную основу
- Готовитесь к собеседованию на должность веб-разработчика и хотите потренироваться отвечать на вопросы
Это не тот инструмент, если вы
- Вам нужен полноценный рабочий процесс на компьютере с файлами, папками и локальным сервером
- Ожидаете, что каждый курс будет бесплатным; первый курс, первый проект с пошаговым сопровождением и две миссии доступны бесплатно, а Pro открывает остальное
- Уже каждый день пишете рабочий HTML-код и ищете справочник, а не курс
- Хотите изучить инструмент для дизайна; это приложение о разметке и коде, который стоит за страницами
Вопросы
Часто задаваемые вопросы
Что такое Учить HTML - Курс Кода?
Учить HTML - Курс Кода — приложение для iPhone и Android, которое обучает HTML, начиная с первого тега и заканчивая продвинутыми темами. Оно объединяет 40 коротких курсов, встроенный HTML-редактор с предпросмотром в реальном времени, 20 проектов с пошаговым сопровождением, 20 миссий по отладке и наставника на базе ИИ. Начать можно бесплатно; приложение доступно на 22 языках.
Действительно ли можно писать и просматривать HTML на телефоне?
Да. В редакторе Учить HTML - Курс Кода есть вкладки HTML, CSS и JavaScript, а в окне предпросмотра отображается страница, которую создаёт ваша разметка. Телефон удобен для сосредоточенной практики, необходимой при изучении HTML, поскольку теги короткие. Больший экран становится полезен лишь тогда, когда нужно одновременно работать с множеством файлов.
Нужен ли опыт программирования перед началом обучения?
Нет. Обучение начинается с того, как устроен HTML-документ, и объясняет каждый термин простым языком до его использования. В HTML нет циклов или переменных, которые нужно изучать вначале, поэтому Учить HTML - Курс Кода считает полных новичков обычными учениками, а не исключением.
В чём разница между HTML и CSS?
HTML определяет, что находится на странице и что означает каждая часть — например, заголовок, ссылка или поле формы. CSS отвечает за внешний вид, включая цвета, отступы и расположение элементов. Приложение сначала обучает HTML, а затем позволяет добавлять CSS-файлы в редакторе, чтобы вы видели их совместную работу, не смешивая их задачи.
Сколько времени нужно, чтобы освоить основы HTML?
Большинство людей могут написать простую корректную страницу уже после нескольких коротких занятий, потому что основных элементов немного: заголовки, абзацы, ссылки, изображения, списки и базовые формы. На более глубокие темы, такие как доступность, семантическая структура и Web Components, потребуется больше времени. Здешние уроки рассчитаны на прохождение за несколько минут, поэтому заниматься каждый день вполне реально.
Какие проекты можно создавать в приложении?
20 проектов с пошаговым сопровождением включают страницу с рецептами, контактную форму, фотогалерею, панель навигации и доступную таблицу цен. Каждый проект создаётся шаг за шагом. Они специально небольшие, чтобы вы успевали их завершить и сохраняли код в своих сохранённых фрагментах.
Рассказывает ли Learn HTML о доступности и формах?
Да, и довольно подробно. Формам посвящены три курса: основы, расширенные элементы управления и атрибуты валидации. Для доступности есть отдельные курсы об основах, ролях ARIA и расширенных шаблонах ARIA. В миссиях по отладке также встречаются ошибки вроде метки, на которую никто не может нажать, поэтому эти темы изучаются на практике, а не абстрактно.
Бесплатно ли приложение и что даёт Pro?
Вы можете бесплатно скачать приложение и сразу начать обучение: первый курс, первый проект с пошаговым сопровождением, две миссии и редактор с предпросмотром в реальном времени доступны бесплатно, как и ежедневный лимит обращений к наставнику на базе ИИ. Pro открывает все курсы, проекты и миссии, экзамен для получения сертификата и неограниченные вопросы наставнику на базе ИИ, а также убирает рекламу.
Начать
Введите свой первый тег и смотрите, как он отображается
Бесплатное начало на iOS и Android, 22 языка.
Другие приложения CoddyKit
Доступно на iOS и Android.