На уроках 1–6 мы изучили введение, HTML-структуру, списки и ссылки, таблицы и формы, CSS: селекторы и шрифты и блочную модель. Этот урок — практический. Этот урок — практический: закрепим навыки на комбинированных заданиях перед проектом «Визитка».
Сверстай блок статьи:
h2padding, border-radiusHTML: семантичные теги. CSS: класс .article-card.
Создай список «Преимущества» (3–5 пунктов). Каждый пункт:
Можно использовать list-style-type или убрать маркеры и добавить кастомный вид.
Форма с полями: имя, email, сообщение, кнопка. Стилизуй:
border, padding, border-radiuspaddingМы закрепили HTML и CSS на практических задачах. На следующем уроке создадим мини-проект «Визитка» — одностраничный сайт о себе.
px и % в одном контексте без понимания.Создай страницу о вымышленном проекте (приложение, сайт):
Используй контейнер, отступы, цвета, шрифты.
Сверстай три карточки (услуги, товары, курсы — на выбор):
inline-block или flex)Создай форму регистрации с полями: логин, пароль, подтверждение пароля, чекбокс согласия. Стилизуй все элементы: поля, кнопку, подписи. Добавь отступы между группами полей.
Создай блок с классом quote: цитата в кавычках, автор справа, левая граница-акцент, курсив для текста.
Сверстай карточку профиля: аватар (квадрат с фоном или placeholder), имя, статус, ссылки на соцсети. Всё стилизовано и выровнено.
Возьми таблицу из урока «HTML: таблицы и формы» и стилизуй: заголовки, чередование строк, hover на строках, рамки.
Три изображения (placeholder) в ряд. У каждого — рамка, скругление, отступы. При наведении — slight изменение (пока без :hover можно просто описать в комментарии, что добавишь позже).