Категория: Верстка

Обращение

Ко мне обратился директор компании Вебпрактик — Александр Букуров.

Задача

За 6 дней разработать лендинг по макету от дизайнера компании.

Был важен дедлайн, так как до карантина нужно было запустить в рекламу лендинг и обсудить вопросы с предпринимателями и сотрудниками образовательных учреждений. Это была не только коммерческая, но и государственная задача.

Результат

Сайт со всеми доработками утвержден и сдан клиенту 30 марта, за день до дедлайна.

Демонстрация работы сайта

Отзыв

«Очень благодарен тебе за работу по созданию лендинга для проекта НТИ. Спасибо за вовлечённость, желание сделать качественно.

Это на самом деле не так часто на рынке фриланса, когда стараются сделать не только то, что тебе сказали по ТЗ, но и предлагают сделать что-то лучше, более качественно, более интересно.

Это очень важная твоя характеристика, развивай, масштабируй, это очень востребовано на рынке.

Конечно самое главное это сроки. Был сжатый срок под сложный проект с дедлайном под масштабные мероприятия. Нельзя было подвести заказчика. Большой объем работы в очень сжатые сроки. Ты не только уложился в срок, но и сделал на один день раньше. При этом потратил на это кроме будних дней и все свои выходные. Так что спасибо большое, это очень ценно.

Рекомендуют сотрудничество с тобой. Делаешь быстро, качественно, надежно.»

Александр Букуров

Список выполненной работы

1. Сборка сайта на тильде
2. Вёрстка страницы вручную
3. Создание анимации при прокрутке
4. Установка админ-панели

Задача

Разработать страницу каталога и детальную товара для онлайн-магазина. Кроме вёрстки необходимо запрограммировать калькуляцию в детальной и интерактивность в списке товаров.

Демонстрация работы

Адреса страниц для просмотра

1. Каталог
2. Страница товара, 1 способ расчета
3. Страница товара, 2 способ расчета
4. Страница товара, 3 способ расчета
5. Страница товара, 4 способ расчета
6. Страница товара, 5 способ расчета

Результат

За 6 дней была сверстана страница каталога с мобильной версией и интерактивностью: смена вида, фильтр по цене, цвету, дополнитлеьные вкладки.

Также была сверстана детальная страница, для которой кроме вёрстки был запрограммирован калькулятор для 5 видов расчёта стоимости в зависимости от параметров

Отзыв

Ссылка на страницу клиента: https://vk.com/shambal

Задача

Разработать сайт по готовому дизайн-макету.

Оптимизация

При работе над проектом использовал новые методики оптимизации скорости, это позволило добиться высшей оценки от Google Page Speed как для мобильных, так и для компьютерной версии.

Скорость загрузки первой страницы: 1.5 секунды

Сетка на странице «Девушки»

Высота фотографий может быть разная, если бы просто вставить фото девушек и ничего не дорабатывать, это выглядело бы вот так:

Высота строки выставляется по самому высокому элементу. Я подумал, а что если разместить их по колонкам? Тогда строк не будет совсем и они будут вставать как полагается.

Да, этот вариант сработает, но структура списка сломается, программисты потратили бы гораздо больше времени на форматировании этого списка с данными из админ панели.

А я уважаю своих коллег и не делаю работу для них еще сложнее.

В итоге я нашел решение в виде библиотеки Masonry, теперь плитка выглядит как на макете и структура кода удобна для интеграции:

Cтраницы

1. Главная
2. Блог
3. Страница записи

Задача

Разработать 3 страницы для проекта InRed по готовому дизайн-макету. Страницы должны также корректно отображаться на ноутбуках, планшетах и мобильных.

Это был первый проект в сотрудничестве с студией «Рекламный знак».

Разработка была закончена за 7 дней.
Мы определили техническое задание, я задал уточняющие вопросы по всем непонятным для меня вопросам и мы начали разработку.

Интересно реализована прокрутка таблицы. Мы помещаем только несколько столбцов в видимую область, остальное скрываем и делаем блок прокручиваемым по горизонтали.

Кнопка с стрелкой выступает в роли намека, что можно прокручивать и в роли кнопки, после нажатии на нее блок прокручивает право.