HTML і CSS для дизайнера: основи, які варто знати

Крок 1

HTML — це зміст і сенс, а не вигляд

HTML описує структуру сторінки: що тут заголовок, що абзац, що список, що кнопка, а що посилання. Від цього залежить, як сторінку прочитають пошукові системи й програми зчитування з екрана, якими користуються незрячі люди. Тому в макеті важливо не лише як виглядає елемент, а й чим він є.

• •заголовки мають рівні: один головний h1 на сторінку, далі h2 для секцій, h3 — для підрозділів; розмір шрифту тут ні до чого;
• •кнопка (button) виконує дію на сторінці, посилання (a) веде на іншу адресу; у макеті їх варто розрізняти;
• •у зображень, які несуть сенс, має бути текстовий опис (alt) — підготуйте його разом з макетом.

💡 Подивіться на свій макет і підпишіть кожен блок: «header», «nav», «main», «section», «footer». Якщо не можете вирішити, чим є блок, — розробник теж гадатиме.

Крок 2

Бокс-модель: усе на сторінці — прямокутники

Як пише web.dev, усе, що показує CSS, — це прямокутник. Кожен має чотири шари: content (вміст), padding (внутрішній відступ), border (рамка) і margin (зовнішній відступ). Коли ви в макеті ставите текст у кнопці на відстані 16 px від краю, для розробника це padding. Коли між двома картками 24 px — це margin або gap.

• •у макеті тримайте відступи з короткого набору значень (наприклад, 4, 8, 16, 24, 32, 48) — тоді їх легко перенести в CSS;
• •блоки на вебі розтягуються від вмісту: заголовок у два рядки зробить картку вищою, і макет має це витримувати;
• •якщо текст «прилипає» до краю, у макеті, найімовірніше, немає padding, а є лише позиція на око.

Крок 3

Flexbox і grid: як будуються ряди й колонки

Для розміщення елементів у CSS є два головні інструменти. Flexbox вишиковує елементи в один ряд або одну колонку: меню, ряд кнопок, картка з іконкою й текстом. Grid будує двовимірну сітку з рядів і колонок: галерея, сітка карток, макет сторінки. Auto layout у Figma чи Flex Layout у Penpot працюють за схожою логікою: напрямок, проміжок між елементами, вирівнювання, внутрішні відступи. У Penpot Flex Layout прямо побудований на стандарті CSS Flexbox.

• •напрямок (row або column) — у ряд чи в колонку;
• •gap — однаковий проміжок між елементами, без окремих відступів у кожного;
• •justify-content і align-items — як елементи вирівнюються вздовж і впоперек напрямку;
• •flex-wrap — переносити елементи на новий рядок, коли місця не вистачає.

💡 Якщо ваш макет зроблено на auto layout без «плаваючих» елементів, його майже завжди легко зверстати. Якщо все розставлено вручну, розробнику доведеться вгадувати правила.

Крок 4

Одиниці й адаптивність

Екрани бувають різними, тому вебсторінка — не фіксований аркуш. Розміри в CSS задаються різними одиницями: px — фіксовані пікселі, % — частка від батьківського блоку, rem — відносно базового розміру шрифту. MDN зазначає, що базовий розмір шрифту в браузері зазвичай 16 px, а розміри шрифтів у px — погана ідея для доступності: у деяких браузерах користувач тоді не зможе збільшити текст. Для різних ширин екрана в CSS використовують медіазапити (media queries) — від них походять «брейкпоінти».

• •у макеті покажіть щонайменше дві версії: для телефона й для десктопа;
• •вирішіть, що відбувається з блоками між ними: колонки стають рядами, зображення зменшуються, меню ховається;
• •перевірте контраст тексту: для звичайного тексту WCAG вимагає щонайменше 4.5:1.

Крок 5

Вправа: зверстайте одну картку

Теорія осідає лише після практики. Візьміть одну картку зі свого макета — фото, заголовок, короткий текст, кнопку — і зверстайте її. Знадобляться лише текстовий редактор і браузер: створіть файл index.html, напишіть структуру, додайте стилі в тег style. Потім відкрийте файл у браузері, натисніть правою кнопкою на елемент і оберіть «Переглянути код» (Inspect): у DevTools видно бокс-модель кожного елемента, і стилі можна міняти наживо.

• •спершу HTML без стилів: перевірте, що порядок і сенс зрозумілі навіть без дизайну;
• •потім CSS: шрифт, кольори, padding, радіус, flexbox для кнопки з іконкою;
• •звузьте вікно браузера: чи не ламається картка на ширині телефона;
• •перевірте розмітку валідатором W3C — він покаже помилки в HTML.

💡 Порівняйте результат із макетом і запишіть усе, що вийшло інакше. Цей список — найкращий фідбек самому собі: він показує, які рішення в макеті не мали правила.