Когда я начал работать с Тильдой, о коде знал совсем немного. Мне было интересно, как устроен конструктор.
Чтобы работать с кодом, необязательно быть программистом
об авторе
4+
30
230к
года в дизайне
проектов завершил
максимальный чек за проект
Решения стандартных блоков иногда были неудобными и могли выбиваться из общей концепции, а существующие модификации помогали не в полной мере. Тогда я начал вникать в код, чтобы научиться менять нужные мне параметры.
Эти решения часто выручали меня, заказчиков и коллег-дизайнеров. Поэтому я стал выкладывать модификации на своём сайте и в телеграм-канале. А в этом интенсиве хочу поделиться знаниями о том, как создавать их самостоятельно
Интенсив будет полезен для новичков и опытных дизайнеров
о чём интенсив
Сможете привлекать новых клиентов и повышать чек за уникальные решения кодом
Узнаете, как менять любые свойства элементов стандартного блока и добавлять свои
Научитесь расширять возможности Тильды без помощи сторонних разработчиков
Повысите качество работы за счёт более удобного функционала и проработанных деталей в дизайне
В стандартных блоках удобная вёрстка, а редактировать наполнение достаточно просто (что важно заказчикам). Но для некоторых задач в них не хатает гибкости
Научу обходить ограничения стандартных решений
о чём интенсив
Нужно делать несколько копий стандартного блока для адаптива текста под разные разрешения экранов
Нельзя настроить скругление углов у многих карточек, из-за чего весь дизайн не смотрится консистентно
Нет возможности выделить в блоке конкретные элементы или задать им анимацию по наведению
Скругление углов
Адаптив текста
Анимация при наведении
Нет настроек для гибкой регулировки отступов и размеров некоторых элементов и карточек внутри стандартного блока
Отступы и размеры
Нет возможности добавлять различные элементы в стандартные блоки, которые необходимы в процессе работы
Добавление элементов
Можно найти еще много ограничений при работе со стандартными блоками, а ещё можно научиться их обходить :)
возможных ограничений
Расскажу о возможностях кода простым языком
программа
Как работает код на Тильде
модуль #1
3 урока
Анимация
Разберём понятие css-стилей и их применение в работе над сайтом. Научимся работать с панелью разработчика, искать нужные элементы на странице и обращаться к ним
Рассмотрим, что такое css-анимация, научимся совмещать её с пошаговой анимацией, а также с анимацией, созданной через сторонние сервисы
Научимся менять параметры конкретных элементов внутри блока, в том числе по ховеру. Обсудим, как добавлять в код элементы и свойства, которых не было изначально
разберём понятие css-стилей и их применение в работе над сайтом. научимся работать с панелью разработчика, искать нужные элементы на странице и обращаться к ним
эфирвводный эфир познакомимся друг с другом, поговорим и рассмотрим примеры применения css в стандартных блоках на практике
урок #1панель разработчика рассмотрим способы вызова, разберём функционал и взаимодействие с панелью
урок #2обращение и поиск элементов научимся искать нужные элементы на странице, также обращаться к ним через класс, атрибут или тэг
урок #3добавление кода в тильду рассмотрим все способы добавления кода, работа с комментариями
стилизация стандартных блоков
изучим все основные и самые важные свойства css, которые могут пригодиться в работе со стандартными блоками, освоим их применение на практике
эфирвводный эфир обсудим план работы в этом модуле, рассмотрим структуру уроков, по отвечаю на вопросы
урок #1скругление углов и обводка рассмотрим варианты скругления углов и разберём оформление границ у элементов
урок #2отступы научимся управлять внутренними и внешними отступами у элементов любых стандартных блоков
урок #3ширина и высота разберём как регулировать вручную высоту и ширину элементов
урок #4трансформация научимся вращать, перемещать, масштабировать и искажать элементы
урок #5позиционирование рассмотрим способы позиционирования элементов, научимся располагать элементы друг относительно друга
урок #6фон научимся устанавливать цвет, градиент и изображение у фона элемента. подробно разберём все свойства
урок #7блочные и строчные элементы рассмотрим часть элементов из свойства display, научимся использовать их в стандартных блоках
урок #8работа с текстом рассмотрим все свойства, которые касаются шрифтов и научимся работать с ними
урок #9z-index разберём как работает z-index и где его можно применять
урок #10маски научимся добавлять маски к изображениям внутри стандартных блоков
урок #11тень рассмотрим как можно добавлять тень у любых элементов стандартных блоков
урок #12скрытие элементов рассмотрим способ и примеры скрытия элементов на странице
урок #13фильтры научимся размывать, обесцвечивать изображения в стандартных блоках, делать их более контрастными и т. д.
урок #14курсор рассмотрим возможные виды курсоров и научимся добавлять свой кастомный
урок #15css flexbox разберём конкретные примеры в стандартных блоках при работе с этим свойством
урок #16css grid разберём конкретные примеры в стандартных блоках при работе с этим свойством
урок #17отображение или обрезка контента рассмотрим как можно обрезать контент, который выходит за пределы блока, также научимся делать прокрутку
урок #181920px научимся у любого блока настраивать сетку под разрешение 1920 пикселей
урок #19обращение к стилям svg-элементов рассмотрим, как перекрашивать и трансформировать стандартные svg-элементы в стандартных блоках
урок #20медиа-запросы научимся работать с этими правилами, которые позволяет задавать разные стили для разных разрешений экрана
урок #21префиксы разберём для чего они нужны и почему иногда важно их использовать
урок #22переменные научимся добавлять переменные в коде для удобства редактирования стилей
эфиритоги модуля обсудим прохождение модуля, отвечу на вопросы, также проведу мастер-класс по работе с одним из стандартных блоков
псевдоклассы и псевдоэлементы
научимся менять параметры конкретных элементов внутри блока, в том числе по ховеру. обсудим, как добавлять в код элементы и свойства, которых не было изначально
урок #1дочерние элементы научимся обращаться к конкретным элементам внутри стандартного блока
урок #2наведение научимся стилизовать элементы или блоки при наведении на них + transition
урок #3маркеры рассмотрим как можно стилизовать маркеры элементов списка
урок #4псевдоэлементы ч.1 разберём как работать с псевдоэлементами before и after
урок #5псевдоэлементы ч.2 научимся стилизовать первую строку абзаца, первую букву и выделение при помощи мыши
эфирмастер-класс вместе с вами сделаю такие же карточки, как у меня в личном кабинете
анимация
рассмотрим, что такое css-анимация, научимся совмещать её с пошаговой анимацией, а также с анимацией, созданной через сторонние сервисы
урок #1css-анимация научимся работать с css-анимацией
урок #2css-анимация + sbs рассмотрим примеры как можно совместить css-анимацию с steb by step анимацией в зеро-блоке
урок #3svgator рассмотрим интерфейс программы, научимся создавать анимированную svg-графику
урок #4svg-анимация + sbs рассмотрим несколько вариантов использования анимированных svg вместе с step by step анимацией в зеро-блоке
эфирвыпускной поделимся впечатлением об интенсиве, пообщаемся, отвечу на ваши вопросы
Процесс обучения — лайтовей некуда
программа
Общайтесь с дизайнерами
После оплаты я добавлю вас в общий чат, где можно обсудить модификации с другими участниками, задать интересущие вопросы, а также узнать о выходе новых уроков
курс продлится 5 недель: вас ждут короткие обучающие ролики каждый день, которые я буду постепенно открывать, чтобы весь материал лучше усвоился
Практически к каждому уроку будет домашка для отработки практических навыков, прямые эфиры по каждому модулю и мастер-классы
по каждому модулю я буду проводить прямые эфиры, также будет несколько мастер-классов по кастомизации стандартных блоков
Обучайтесь в личном кабинете
Выполняйте домашние задания
смотрите прямые эфиры
Приготовил для участников приятные бонусы
бонусы
Розыгрыш годовой подписки на ANNEXX
Каждый сможет принять участие в розыгрыше подписки на ANNEXX, чтобы пользоваться незаменимыми модификациями для Тильды целый год
pdf-файл со всеми CSS свойствами с курса
каждый студент получит pdf-файл со всеми свойствами, которые мы будем проходить во время обучения
Полезные ссылки на ресурсы с кодом
подготовил для вас полезные ссылки на ресурсы, которые вам всегда пригодятся во время и после окончания обучения
Вы можете оплатить участие сразу целиком, внести 50% стоимости предоплатой и 50% перед началом обучения, также оформить рассрочку на 6 месяцев
Проходите курс самостоятельно или с моим наставничеством