Адаптивная верстка блога на основе дизайн макета Figma
Была задача
Необходимо сделать верстку блога по дизайн-макету Figma для дальнейшей интеграции в CMS Word Press.
Описание проекта
Вёрстка сделана на HTML, CSS, JS. При верстке использовал Flexbox и Grid сетку для качественного адаптива и надёжной структуры сайта. Для некоторых иконок сформировал иконочный шрифт на сервисе icomoon.io. Подключил библиотеку WOW JS (добавлены уместные анимации в моменты скролла страницы), сделал несколько слайдеров. Адаптируется под мобильные устройства до 320px.
Ссылка на работу:
Стадии разработки
✅ Открыли макет дизайна и сгенерировали дубликат этого макета в Figma.com
✅ Затем я открыл свой стартовый шаблон, чтобы начать работу над проектом.
✅ Далее я скачал все иконки из макета в формате SVG и с их помощью сгенерировал иконочный шрифт используя сервис icomoon.io
✅ Далее я разметил макет направляющими линиями, чтобы определить ограничивающий контейнер и высоту Header и Footer.
✅ Далее я определил какие шрифты использовались в макете и подключил их.
✅ Далее я приступил к разработке Header и Footer.
✅ После этого я приступил к разработке страниц сайта.
Проблемы
Во втором блоке на главной странице я сделал вертикальный слайдер с текстом внутри. При добавлении контента на слайды весь слайдер в итоге ломался и отказывался работать правильно, потому что некоторые слайды были выше других.
В конце концов я решил проблему, построив Grid сетку на CSS. Я сделал так, чтобы все слайды были одинаковой высоты, независимо от того, сколько в них контента.
Заключение
В итоге получился качественный, кроссбраузерный, адаптивный блог.
Делал работу 10 дней. Примерная стоимость 700$.