profile_photo

Tony the Human

Мои навыки:

HTML
CSS
JS
SASS
BEM
JQuery
Bootstrap
Git
Figma
Photoshop

Заказчик:

Frontend Blok — обучающая онлайн-платформа.
Заказчик захотел обновить свой сайт, добавить новый функционал и улучшить дизайн.

Головоломка:

Дано: макет
Требуется: Обновление нескольких блоков для бесплатного марафона сайте frontendblok.com:
- сверстать и интегрировать верстку 3-х блоков "после прохождения марафона", "расписание", "автор марафона" в код действующего сайта

Рабочий процесс или трудовые будни

Открываем графический редактор figma, ищем присланный заказчиком макет. Оценивающе и внимательно смотрим на макет, попутно прикидывая объем работы и сроки на его реализацию. Первый и третий блоки довольно простые в реализации, а вот второй кажется сложнее и объемнее остальных. Еще немного крутим макет, экспортируем все нужные нам для работы изображения и приступаем к работе! Глаза боятся, а руки делают!

Расправляемся с первым блоком, переходим к верстке блока «Расписание»: реализуем колонки с днями, делаем буллиты к спискам и навешиваем эффект движения точки по линии при наведении мыши. Запускаем pixelperfect – есть небольшие расхождения с версткой, вносим небольшие правки. Блок готов!

С блоком «Об авторе» пришлось изрядно повозиться: в итоге, после долгих размышлений решено использовать Grid layout. Выстраиваем Grid сетку, выставляем нужные размеры элементов в соответствии с дизайн-макетом и размещаем иконки социальных сетей.

Приступаем к адаптации верстки под планшеты и мобильные устройства. Блок «Расписание» по ТЗ должен трансформироваться на размерах экрана 600-500рх в раскрывающийся список. Начинаем реализацию, изредка посматривая лежащий рядом бубен.
Получаем от заказчика доступ к проекту, в который необходимо внедрить код верстки трех блоков. Пробуем запустить сервер с проектом… Бубен все же пригождается, и после нескольких исполненных незамысловатых танцев сервер оживает, и можно работать! Видим, что сам проект сверстан по принципу mobile-first, то есть приоритет – мобильные устройства. Снова вносим правки и идем к заказчику. Код внедрен, связываемся с заказчиком, и с радостным криком: «Я сделаль!» Показываем результат – есть небольшие замечания по стилям и адаптиву. После вносим необходимые правки с учетом пожеланий заказчика.

Что в итоге? А в итоге проект успешно сдан заказчику, реализована плавная анимация раскрытия списка в блоке «Расписание» на мобильной версии проекта, реализована фронтенд-логика, а также адаптивная версия и приятные анимации по наведению на различные интерактивные элементы - ссылки и кнопки.

Результат