Урок 1.7 · Интерфейсы и сайты с нуля · Модуль 1. Первые шаги в интерфейсе · Бесплатно
Цель урока: Собрать первую настоящую страницу из структуры, текста, картинки, списка, ссылки и оформления.
Нужно знать заранее: Уроки 1.1–1.6
Зачем это нужно: Это первый проект. Здесь нет новых настроек — только то, что вы уже умеете: структура, текст, картинка, список, ссылка, классы и немного CSS. Проект нужен, чтобы увидеть: страница собирается не «магией», а по плану.
Как это работает: Любая страница собирается по одному и тому же плану. 1. Структура: header, main, footer. 2. Содержимое: заголовок, абзац, картинка, список, ссылка. 3. Оформление: фон, отступы, скругления, тень. 4. Проверка: откройте превью на телефоне и посмотрите, не развалилось ли.
Пример с разбором: Страница-визитка — это header с именем и коротким описанием, main с фото, списком навыков и ссылкой, footer с подписью. Всё это мы уже делали по отдельности: карточки — в модуле 2, ряд — в модуле 3, адаптивность — в 3.3.
Разбор по шагам: 1. Разложите блоки в HTML и посмотрите на превью без оформления. 2. Если структура понятна — добавьте фон и отступы. 3. Оформите карточку: padding, border-radius, тень. 4. Ссылку сделайте похожей на кнопку: padding, фон, скругление, color: white, text-decoration: none. 5. Проверьте на телефоне.
Частая ошибка: Начинать со стилей. Сначала разложите блоки в HTML и посмотрите на превью без оформления: если структура понятна и без CSS, оформление ляжет легко. Если наоборот — вы будете «латать» цвета вместо того, чтобы починить структуру. Ещё одна ошибка — забыть alt у картинки и href у ссылки.
Важно: Это проект, а не тест. Здесь не нужно угадывать единственно верное решение: подойдёт любая аккуратная страница, где все элементы на месте. Если что-то не сходится — откройте превью на телефоне, чаще всего дело в раскладке.
Проверь себя: С чего начинается страница? Со структуры. Зачем нужен alt? Чтобы описать картинку. Что делает text-decoration: none? Убирает подчёркивание у ссылки. Почему проверяем на телефоне? Чтобы страница не развалилась на узком экране.
Итог: Вы собрали настоящую страницу: структура, содержимое, оформление и проверка. Это тот же набор приёмов, из которого делают и меню игры, и магазин, и приложение.
Что дальше: В уроке 1.8 — разбор первой страницы: что поправить в чужой работе.
<style>
body { background: #f1f5f9; font-family: system-ui, sans-serif; line-height: 1.6; padding: 24px; }
header { max-width: 560px; margin: 0 auto 20px; }
main { max-width: 560px; margin: 0 auto; background: white; padding: 24px; border-radius: 16px; box-shadow: 0 4px 12px rgba(15,23,42,.08); }
img { width: 120px; border-radius: 16px; }
a { display: inline-block; padding: 12px 24px; border-radius: 12px; background: #4f46e5; color: white; text-decoration: none; }
footer { max-width: 560px; margin: 20px auto 0; color: #475569; }
</style>
<header>
<h1>Аня Смирнова</h1>
<p>Учусь собирать интерфейсы.</p>
</header>
<main>
<img src="https://fs.chatium.ru/get/image_msk_zymlBZbltO.1024x1024.png" alt="Моё фото" />
<ul>
<li>Вёрстка</li>
<li>Игровой UI</li>
<li>JavaScript</li>
</ul>
<a href="https://example.com">Написать мне</a>
</main>
<footer>
<p>© 2026</p>
</footer>Соберите визитку: header с заголовком и коротким описанием, main с картинкой (alt="Моё фото"), списком из трёх навыков и ссылкой, footer с подписью. Оформите: фон страницы не белый, у main есть внутренний отступ и скругление, ссылка выглядит как кнопка без подчёркивания.
Критерий успеха: Страница с header, main и footer, картинкой с alt, списком из трёх пунктов, ссылкой-кнопкой и оформленным фоном.