Практическая работа №7

Начальная верстка публичной части сайта

Цель работы:

подготовить структуру HTML/CSS/JavaScript-проекта;
сверстать основные публичные страницы по макетам Figma;
реализовать компоновку страниц сайта;
создать базовое стилевое оформление с помощью CSS;
подготовить основу для дальнейшего подключения PHP и базы данных.

Основные теоретические положения

Верстка

Верстка — это процесс переноса макета интерфейса в HTML и CSS.

HTML отвечает за структуру страницы, а CSS — за внешний вид: цвета, шрифты, сетки, отступы и состояния элементов.

Семантическая разметка

Используйте HTML-теги по смыслу:

Тег	Назначение
`header`	шапка сайта
`nav`	навигация
`main`	основное содержимое
`section`	смысловой раздел
`footer`	подвал сайта

Производственная ситуация

На предыдущем этапе вы подготовили макеты страниц в Figma. Теперь необходимо начать переносить дизайн в код. На этом этапе backend ещё не требуется: данные могут быть статическими.

Основные требования к практической работе

В рамках практической работы необходимо выполнить проектный этап, подготовить указанные материалы и зафиксировать результат в Git-репозитории.

Работа должна соответствовать выбранной предметной области и использовать материалы, подготовленные на предыдущих этапах проекта.

Задания для выполнения

Подготовьте структуру проекта в папке public.
Создайте и подключите assets/css/style.css.
Создайте и подключите assets/js/main.js.
Сверстайте шапку и подвал сайта.
Сверстайте главную страницу.
Сверстайте страницу каталога.
Сверстайте карточку объекта.
Сверстайте детальную страницу объекта.
Добавьте базовые hover/focus-состояния.
Проверьте соответствие верстки макетам Figma.
Выполните коммит add public pages layout.

Требования к результату

К завершению практической работы должны быть подготовлены:

структура HTML/CSS/JS-проекта
сверстанная главная страница
сверстанный каталог
сверстанная детальная страница
карточки объектов
базовые состояния элементов
коммит в Git

Контрольные вопросы

Какова основная цель данной практической работы?
Какие результаты должны быть получены после выполнения этапа?
Как данный этап связан с предыдущими этапами проекта?
Какие решения были приняты в рамках работы и почему?
Какие файлы были добавлены или изменены в Git-репозитории?
Как результаты работы будут использоваться в следующих практических работах?