Адаптивная верстка

Ко мне в руки попал дизайн-макет сайта, который нужно было сверстать за 2 дня. Обычно такая работа стоит 4000р, в нее входит:

• Адаптив — верстка под ноутбуки, планшеты и мобильные устройства
• Чистый код без использования Bootstrap
• Публикация сайта в интернете и привязка к домену
• Ускорение загрузки сайта

Для начала я поэтапно расписал задачу в Trello и дал заказчику ссылку, чтобы он в любой момент мог посмотреть, на каком этапе находится разработка. Так как сроки были ограничены, я сразу же приступил к работе и уже через 1.5 часа выложил на хостинг адаптированную шапку и первую секцию. Самым сложным оказался блок "до - после" — с ним мне пришлось немного повозиться.

Посреди работы закачик сказал, что ему не нравятся "пиксельные иконки" — было предложено использовать SVG формат, который никогда не теряет в качестве при любом масштабе. Я нашел все необходимые изображения на сайте Flat Icon.

Чтобы ускорить загрузку сайта, я конвертировал все PNG изображения в формат JPG, оптимизировал иконки и спрятал интерактивную карту до тех пор, пока пользователь по ней не кликнет — так карта загрузится только тогда, когда это действительно необходимо.

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

Посмотреть работу: https://persiklover.github.io/skinali