Вёрстка: от макета к работающей странице

1.

ПОНЯТНОЕ ОБЪЯСНЕНИЕ
Вёрстка — это
расстановка
объектов на странице
Текст, изображения, кнопки и блоки размещают по
макету: задают размеры, отступы, цвета и
поведение на разных экранах.
Содержание говорит, что показать. Вёрстка — как это
расположить.
1

2.

Один контент — разное впечатление
Текст, изображение и ссылка остаются теми же. Меняется их расположение.
До вёрстки
После вёрстки
Уют начинается с деталей
Небольшие вещи помогают сделать дом
теплее.
НОВАЯ КОЛЛЕКЦИЯ
Уют начинается
с деталей
Посмотреть товары
Небольшие вещи помогают
сделать дом теплее.
Вёрстка создаёт иерархию: сразу видно главное и куда
нажать.
2

3.

В Figma дизайнер задаёт будущий вид страницы
Макет служит инструкцией: где находится каждый объект и как он выглядит.
Frame / Desktop
В макете указаны
Позиция
где стоит объект
Размер
ширина и высота
Главный
заголовок
32 px
Отступы
расстояния между блоками
Стиль
цвета, шрифты и скругления
Кнопка
3

4.

Макет не вставляется — его воспроизводят кодом
Разработчик читает макет и последовательно переносит его решения в HTML и CSS.
1
2
3
4
Figma
HTML
CSS
Браузер
Расположение,
размеры, отступы и
цвета
Какие элементы
есть на странице
Как элементы
выглядят и
располагаются
Собирает код и
показывает
страницу
Figma остаётся образцом, а работающая страница строится из
веб-элементов.
4

5.

Кода немного — он описывает структуру и оформление
Запоминать команды не нужно: важно увидеть связь между кодом и результатом.
HTML + CSS
<section class="hero">
<h2>Уют начинается с деталей</h2>
<a>Посмотреть товары</a>
</section>
.hero {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 34px;
}
Что увидит пользователь
НОВАЯ КОЛЛЕКЦИЯ
Уют начинается
с деталей
Посмотреть
Небольшой пример — без подробного разбора
5

6.

Одна вёрстка подстраивается под разные экраны
На компьютере блоки стоят рядом, на телефоне — переходят в одну колонку.
Компьютер
Телефон
Уют начинается
с деталей
Уют начинается
с деталей
Содержание одинаковое. Меняется только расположение объектов.
6

7.

ИТОГ
Вёрстка переносит дизайн
в работающую страницу
Она расставляет объекты, повторяет макет Figma и адаптирует
результат под разные экраны.
Код — инструмент. Главная цель — понятная и удобная страница.
7