Верстка️ списка уроков в виде Адвент-календаря на GetCourse 🎄
На днях ко мне обратилась команда Екатерины Добронравовой — с просьбой заверстать страницу списка уроков новогоднего тренинга в формате адвент-календаря: 33 карточки, у каждой — своя картинка, разный размер, особое расположение, и всё это должно быть красиво, адаптивно и стабильно работать не только в десктопе, но и в мобильной версии, и в приложении.
Макеты делала дизайнер Света @Sveta_Olisova, и на каком-то этапе мы вместе ушли с головой в пиксели, сетки, пропорции и логику платформы: обсуждали размеры контейнеров у GetCourse, подгоняли карточки под грид-систему, перестраивали фигмовский фрейм так, чтобы верстка потом встала ровно, а фон с падающим снегом выглядел не как метеоритный дождь. Именно в этот момент от Светы прозвучала фраза, которая отлично описывает всё, что происходило:
«Я теперь понимаю, почему до этого верстка не вставала😅🙈»
А всё потому, что GetCourse — не Тильда и не Zero блок, где можно "нарисовать как хочешь". Тут сначала нужно понять, как работает контейнер, как тянутся карточки в строках и колонках, какие ограничения накладывает адаптив, и только потом придумывать, как эту красоту технически реализовать. С этим я помогла - просчитала и начертила схему расположения карточек в Адвенте, под которую дизайнер уже подогнала свой дизайн.
📌 Я собрала десктопную и мобильную версии, обошла ограничения приложения, а также подружила его с псевдоэлементами, с помощью которых добавила отсутствующие в нём заголовки.
В какой-то момент мы параллельно обсуждали прозрачность снежинок, радиусы скругления рамки у 11-й карточки, отступы в 20 и 63 пикселя и пропорции 3/5 и 2/5, причём всё это — не ради перфекционизма, а чтобы макет смотрелся не только красиво, но и живо, целостно и гармонично на всех устройствах.
________________________________________
✨ Проекты вроде этого — мой любимый формат: когда всё начинается с вопроса «А можно так?», а заканчивается словами «Вау, оно не просто красиво — оно идеально село».
Если у вас на подходе что-то нестандартное — новогодний адвент, квест, нестандартный список уроков, интерактивная карта или визуальный прогресс — смело пишите. Буду рада помочь и с вёрсткой, и с тем, как это лучше реализовать в рамках Геткурса.
🔥- огонь
✅ - норм
🪶 - легкотня
📬 Telegram: @laro4kaFr
🌐 Мой сайт: larafr.ru
#уроки #верстка
