Верстка адаптивного интернет-магазина гаджетов

Кейс показывает задачу, подход к работе и результат, который получил заказчик.

flag Задача

описана в кейсе

schedule Срок

по проекту

payments Бюджет

по договорённости

article Описание кейса

Разработал адаптивный сайт для интернет-магазина современных гаджетов по готовому макету в Figma.

Основной задачей было точно перенести дизайн в работающий веб-интерфейс, сохранив визуальное соответствие макету и обеспечив корректное отображение сайта на мобильных устройствах, планшетах и десктопах.

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

Перед началом разработки проанализировал макеты в Figma, определил структуру страниц и разделил интерфейс на переиспользуемые смысловые блоки.

Разметку реализовал на HTML5 с использованием семантических элементов, а стилизацию выполнил на CSS3. Для построения сеток и адаптивного расположения элементов использовал Flexbox и медиазапросы, благодаря чему интерфейс корректно перестраивается под различные размеры экрана.

Отдельно реализовал интерактивные элементы каталога. Для каруселей товаров использовал Glide.js, настроив поведение компонентов отдельно для мобильных устройств, планшетов и десктопов.

В процессе разработки уделял внимание точности воспроизведения макета: размерам и расположению элементов, типографике, отступам, состояниям интерактивных компонентов и поведению интерфейса при изменении ширины экрана.

В результате создан адаптивный интернет-магазин, визуально соответствующий предоставленному дизайну в Figma.

Сайт корректно работает на различных разрешениях экрана, а интерактивные элементы адаптированы под особенности мобильного и десктопного использования.

Моя роль: Frontend Developer

Стек: HTML5, CSS3, JavaScript, Glide.js