Адаптивная вёрстка интернет-магазина по продаже продуктов
Была задача
Необходимо сделать верстку интернет-магазина на основе дизайн-макета.
Описание проекта
Работа сделана на HTML, CSS, JS, FA-icons(подключил библиотеку с иконками fontawesome), сделал несколько slick слайдеров, а также многоуровневое меню. В процессе верстки использовал Flexbox и grid сетку для надёжной структуры сайта и качественного адаптива. На js реализовал переключатель карточек товаров на Grid view и List view. Сделал кастомные чекбокс и радио кнопки. Подстраивается под мобильные устройства до 320px.
Ссылка на работу:
Страница товара со всеми деталями
Стадии разработки
✅ Загрузил макет дизайна и открыл дубликат этого макета в Figma.
✅ Я открыл свой стартовый шаблон с подключенными CSS и JS файлами чтобы начать работу.
✅ Подключил библиотеку Fontawesome для работы с иконками.
✅ Далее я начал анализировать макет. Я включил линейку, которая позволяет мне устанавливать направляющие линии. С помощью этих линий я пытаюсь определить ограничивающий контейнер. На этом этапе я уже оценил глобальный план структуры.
✅ Далее я использовал плагин для определения шрифтов, используемых в макете, а также скачал и подключил их.
✅ После всех приготовлений я приступил к верстке Header и Footer.
✅ Далее я начал делать верстку каждой страницы.
Итоги
В итоге получился надёжный, кроссбраузерный, адаптивный интернет магазин готовый к интеграции в систему управления контентом.
Делал работу 7 дней. Примерная стоимость 400$.