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