Сайт Верстка из Figma

Описание

Разработать адаптивный лендинг по макету Figma в рамках лабораторной работы. Основная цель — точно перенести дизайн в код, обеспечив кроссбраузерность, валидность и скорость загрузки. Проект демонстрирует навыки вёрстки, работу с макетами и умение решать типовые задачи фронтенд-разработки.

Решение

Анализ макета в Figma

Проверка слоёв, экспорт ресурсов (иконки, изображения).

Определение шрифтов, цветовой палитры, отступов.

Выявление адаптивных точек для мобильной и десктопной версий.

Структурирование проекта

Создание компонентов: шапка, герой-секция, преимущества, форма, футер.

Разработка файловой структуры (SCSS-модули, изображения в отдельных папках).

Вёрстка

Использование Flexbox/Grid для сложных сеток.

Реализация адаптивности через медиазапросы (мобильные устройства, планшеты).

Оптимизация изображений (форматы WebP/AVIF, ретина-дисплеи).

Валидация HTML/CSS через W3C Validator.

Интерактивные элементы

Бургер-меню для мобильной навигации.

Плавные скролл-анимации и ховер-эффекты кнопок.

Валидация формы (проверка email, вывод сообщений).

Сборка и деплой

Настройка Gulp для автоматической компиляции SCSS, минификации кода.

Деплой на Vercel с подключением кастомного домена (при необходимости).

Результат

Полнофункциональный адаптивный сайт, соответствующий макету Figma.

Чистый, поддерживаемый код с комментариями.

Высокий балл в Lighthouse (производительность > 90, доступность > 95).

Готовность к масштабированию: легко добавить новые секции или локализацию.

Ссылки на примеры реализации

 laba-wheat.vercel.app

Презентация проекта