Урок 3.1 · Интерфейсы и сайты с нуля · Модуль 3. Раскладка: из блоков в страницу · Бесплатно
Цель урока: Собрать карточку с картинкой, заголовком и коротким описанием.
Нужно знать заранее: Урок 2.3
Зачем это нужно: Карточка — рабочая лошадка интерфейса. Товар в магазине, персонаж в игре, статья в блоге, курс в каталоге — всё это карточки. Если вы умеете собрать одну аккуратную карточку, вы умеете собрать и каталог из двадцати: принцип один.
Как это работает: Карточка — это блок-обёртка, внутри которой лежат картинка, заголовок и короткая подпись. Картинка вставляется тегом img, и у неё два обязательных атрибута: src (откуда взять картинку) и alt (текстовое описание для тех, кто картинку не видит). Атрибуты пишутся прямо в открывающем теге: <img src="foto.png" alt="Кружка" />. Закрывающего тега у картинки нет. Чтобы карточка не растягивалась на весь экран, задают max-width. А чтобы картинка не вылезала за края — width: 100% у картинки. Внутренние отступы (padding) дают воздух вокруг содержимого, border-radius скругляет углы, а border или box-shadow отделяют карточку от фона.
Пример с разбором: <div class="card"> <img class="photo" src="..." alt="Керамическая кружка" /> <h2>Кружка</h2> <p>Керамическая, 300 мл.</p> </div> Внутри карточки три элемента друг под другом: картинка, заголовок, подпись. Это уже готовая карточка товара. Осталось добавить CSS: .card { max-width: 280px; padding: 16px; border-radius: 16px; border: 1px solid #e2e8f0; } и .photo { width: 100%; border-radius: 12px; }.
Разбор по шагам: 1. Соберите разметку: блок .card, внутри img, h2 и p. 2. Задайте карточке max-width, padding и border-radius. 3. Картинке добавьте width: 100% и border-radius. 4. Проверьте alt: он должен описывать, что на картинке, а не «фото». 5. Посмотрите на превью на телефоне: карточка должна сжиматься, а не давать горизонтальную прокрутку.
Частая ошибка: Забыть alt у картинки. Без него незрячие пользователи не узнают, что на картинке, а если картинка не загрузится — останется пустое место. alt — не формальность, а часть работы. Вторая частая ошибка — задать карточке width: 280px вместо max-width: на телефоне такая карточка станет шире экрана и появится горизонтальная прокрутка.
Важно: alt — это не подпись под картинкой, а её замена для тех, кто её не видит. Пишите смысл: «Керамическая кружка» лучше, чем «картинка» или «фото 1». Если картинка чисто декоративная, alt оставляют пустым, но в карточке товара картинка почти всегда несёт смысл.
Итог: Карточка = блок + картинка + заголовок + подпись. Дальше мы научимся ставить несколько карточек в ряд.
<div class="card">
<img class="photo" src="https://fs.chatium.ru/get/image_msk_zymlBZbltO.1024x1024.png" alt="Керамическая кружка" />
<h2>Кружка</h2>
<p>Керамическая, 300 мл. Подходит для чая и какао.</p>
</div>Внутри блока .card должны быть: картинка (img), заголовок (h2 или h3) и абзац с описанием. Задайте карточке ограничение ширины (max-width), внутренние отступы, скругление и рамку или тень. Картинке добавьте скругление углов.
Критерий успеха: Карточка с картинкой (с alt), заголовком и подписью: ограниченная ширина, внутренние отступы, скругления у карточки и у картинки.