Лендинг: вёрстка web-portfolio по PSD макету - портфолио по верстке и дизайну

Лендинг: вёрстка web-portfolio по PSD макету

Верстка photoshop макета с применением Bootstrap

Сайт портфолио для команды веб разработчиков

Ссылка на работу:

Макет был сделан в единой версии, контентная часть шириной 1140px

Сайт был адаптирован в свободном стиле под все устройства

Для адаптивной верстки сайта применялся фреймворк bootstrap 4

Мобильная версия сайта Планшетная версия сайта Компьютерная версия сайта

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

На сайте присутствуют 3 слайдера, с разным контентом

Для всех слайдеров так же был использован фреймворк bootstrap 4

От разработки до продакшена

Сборка проекта происходила при помощи таск-менеджера Gulp

Для описания стилей был использован css-препроцессор less

Внедренная оптимизация:

Весь css код проходил минификацию и оптимизацию с помощью gulp плагина csso

В ходе оптимизации были подключены и соединены в один файл необходимые css библиотеки от фреймворков

Так же, специальном gulp плагином autoprefixer, были расставлены префиксы css3 свойств для старых браузеров

Похожая процедура по минификации и конкатенации кода была сделана и с JavaScript файлами

Последним этапом оптимизации стало сжатие изображений при помощи gulp плагина imagemin

__

Макет был предоставлен сайтом ‘htmlAcademy’