From Fedya With 💚
756 subscribers
533 photos
71 videos
2 files
225 links
Привет! Я - Катя Федяева @kate_stoltz , frontend и веб-дизайнер. Тут я делюсь своей жизнью, котами и немного работой.

А еще делаю сайты на тильде и webflow, люблю чистую верстку, веду стримы.
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
🤓Продолжаю повторять увиденные анимации на GSAP

GSAP — это библиотека по созданию анимаций на JavaScript, без которой не обходятся крупные проекты на Webflow.

Я уже рассказывала вам, что стараюсь верстать по одному примеру в день, чтобы развить насмотренность как это когда-то случилось с JavaScript (чтобы потом мне сказали, что мне все так легко даётся). Обычно, это совсем небольшие примеры, помогающие запомнить основные механизмы. Но в этот раз я решила устроить себе проверку, попросила мужа выбрать сайт и повторила с него анимацию.

☁️ посмотреть можно по ссылке


Кстати, она сверстана не на codepen {где я постоянно практикуюсь}, а в конструкторе TapTop. Помимо написанной анимации я добавила эффект обратного наведения в меню и немного переделанный эффект для "Send a message" из выпуска уверстки №18. На телефоне анимацию не правила.

Использовать GSAP в полноценной работе пока рано. Уж очень долго я буду ковыряться в таймингах и понимании где связать анимации, а где пустить вообще отдельно. Но считаю, что я неплохо продвинулась и написать привычные sbs-анимации с тильды смогу 🕺

#катяучится
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Инструкция как выбесить и расстроить меня одновременно.

Мне не ясно почему некоторые люди считают, что могут выражать своё недовольство в сети по принципу "открыты комментарии? ждите советы, критику и прочие вещи". Всегда интересно, сможет ли человек подойти и сказать все в лицо, или же просто пробухчит что-то под нос и пройдет мимо {я честно подойду и скажу всё, что думаю. потому что моя натура — это рельса}. Давайте по порядку. Я не верстальщик и это не канал верстальщика. И не канал с бесплатными решениями для тильды (в такой момент понимаешь, что бесплатно не нужно даже точку в блокноте ставить).


мадам отправлена в бан, конечно же. но паскудную энергию перед этим успела посеять
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
После/До переделки и группировки элементов 😏

Забыла добавить, что карточка новости тоже была переделана: перенесен тег и дата.

Живой пример можно посмотреть тут (ребята уже что-то переделали без меня, но потоки на месте).

#переверстка
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Только закончился созвон с клиентом длиной в почти три часа, я устала и осипла.

😏 Поэтому предлагаю обсудить обосрать Auto Lagaut тильды на пятничном стриме в 16:30 по МСК. Но если вам нужен пост с дайджестом и косяками новинки, то можем сделать.

Голосуйте, за удобный вариант:
❤️ — стрим с обзором
🔥 — пост со скринами


а вообще, на видео хотела показать как моя морда лица бликует чисто просто так, без кушонов всяких. новый ретинол и энзимка попадут в новые подборки.
Please open Telegram to view this post
VIEW IN TELEGRAM
Адекватно, ребятки просто прикрутили к функционалу группы display:flex и добавили выравнивание внутри flex-контейнера. Ничего общего с Auto Layout добавленный функционал не имеет 🤬

Пара плюсов есть:
(1) Если вам нужно собрать простую группу с одинаковым отступом, то работа станет немного быстрее.
(2) Можно задать внутренние отступы для группы элементов.

На стриме сегодня я попробую поправить Auto Layout и расскажу, почему разработчиков тильды ругать таки не стоит.
Please open Telegram to view this post
VIEW IN TELEGRAM
Сегодня на стриме кратко пробежалась по Auto Layout: как делать, какие есть атрибуты {какие кнопочки можно тыкац}. А после прямо в инспекторе показала как все должно работать на самом деле, дополнив стилями.

Я хочу сделать модификацию, которая поможет доработать авто лейауты до нормального вида, включая группировку групп. И мне будет приятно, если вы накидаете реакций под этот пост (потому что я старалась и не понимаю где реакции вообще).

❤️запись стрима

#стрим
Please open Telegram to view this post
VIEW IN TELEGRAM
Ну что ж, первые 10 километров в этом году Done

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

Мой старинный браслет выдал 12.6км, телефон 11км, apple watch коллеги 15.6км. Мы пробежали 30 кругов по 400 метров, значит ближе к правде оказался именно старый браслет. Темп 7 мин/км, ползли как черепахи из-за меня. Коллега сказал, что разминку пробежали :D


бежать было легче, чем подниматься на четвертый этаж после. курьер самоката наблюдал как я ставлю руки на ступеньки и так иду 🤣
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
😢 Я уже рассказывала, что скоро на месте мастерской мужа будут строить престижный район. Всё это время мы искали новое помещение (пока безрезультатно), переживали и пили двойную порцию магния.

Но есть и нормальные новости:
✧ Нам дали субсидию для покупки нужных инструментов (вы не представляете, как сильно мы рады купить их не в кредит😭).

✧ Я предложила делать скидку 5-10 процентов за отзыв. За пару недель прибавилось 16 отзывов на разных площадках. Хотя муж был уверен, что никто не станет писать отзыв прямо в мастерской.

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

✧ Вместе с субсидией были выделены деньги на создание сайта и фирменного стиля. Которые я не получу 😒 {на самом деле, я бы с радостью делегировала создание логотипа, но мы тот самый клиент с нулевым бюджетом, которому надо красивенько}.

На мне лежит написание постов, создание группы в TG, создание сайта с запросом "я не знаю, что мне нужно" и всё бесплатно 😃 Самый сложный клиент в моей жизни. Помогите.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Подборка странных сайтов №2

Я обещала в недавней навигации продолжить тег #референсы. Хочется сделать рубрику постоянной, ибо мне нравятся необычные сайты с деталями, которые вы никогда не увидите в Моте.

[1] benkwallace.com
Сайт с раздельной перемоткой, которую можно без проблем реализовать на тильде. Нравятся блоки, словно прикрепленные скрепкой на пробковую доску, закругления и затемнение страницы при наведении на публикации.

[2] studioroder.com
Экран разделен на три смысловые части (по типам объектов), каждую можно перематывать отдельно. Такой принцип сохраняется на внутренних страницах. Догадайтесь, могу ли я повторить такое с товарами на тильде 😉

[3] bernardo-rodrigues.com
На сайте не просто реализована раздельная перемотка. Проекты в каждой колонке при перезагрузке меняются.

[4] carolinebagley.co
Обычно, мы пытаемся спрятать Scrollbar, делаем его тоньше или вовсе отключаем (кидаю в вас помидорку, если вы так делаете, потому люди часто листают сайты ползунком и злятся, когда их нет). Тут же дизайнер сделал огромную кнопень для перемотки 😆

[5] hothouseseries.com
Сайт выглядит немного нелепо на первый взгляд, но меня очень зацепило зонирование, в центре которого новость о мероприятии. Слева и справа же дополнительная информация. Представьте как можно применить такую компоновку для выставок, ивентов и даже продажи курсов (для фоточек установлен mix-blend-mode: screen)

[6] stripe.press
Сайт с кучей деталей, которые я еще продолжу разглядывать: верстка в виде книги, книжное меню-бургер, красивые гарнитуры/цвета, летающий мужик. Трудно остановиться. Поэтому разглядывайте сами 😌

[7] newterritory.studio
Я планирую переделывать сайт-портфолио и постоянно подглядываю интересные детали. Сам сайт очень простой, но видим: необычное подменю, время работы, бегущую строку в кнопке и краткое Details+ проектов.

[8] bee-home
Милые и полезные домики для пчёлок. Нравится возможность настройки страницы: палитра, отключение анимаций, более низкое качество изображений.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM