Дорогие девушки, я поздравляю вас с Международным женским днём! Желаю вам всегда ярких и солнечных дней, быть любимыми, радости в мелочах и неповторимой красоты! Вы наша главная мотивация 🥰

Предыдущая лёгкая кастомизация с полями формы вам определённо понравилась, поэтому я продолжу эту рубрику на канале ☺️

В этот раз я поделюсь с вами кастомизацией эффекта при наведении на мой любимый блок карточек (да-да, видели бы вы, сколько я издевался над ними в своих уроках в Магии Геткурса). Конкретно этот блок называется "Картинка - подзаголовок - заголовок - текст". При наведении на карточки получился интересный эффект преобразования формы картинки. В стили блока был прописан следующий CSS:

.lt-tsr-content .image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}

.lt-tsr-content .image {
    transition: 0.5s;
}

.lt-tsr-content:hover .image {
    border-radius: 50%;
    width: 200px;
    height: 200px;
}

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

P.S. для тех, кто в теме: обнаружил забавный факт, что если убрать галочку из Стилей "Гибкая вёрстка", то на image-wrapper появятся флексы, а с image-card уберутся ненужные абсолютные позиционирования с паддингом в размере 75%, что меня всегда сильно смущал. То есть flex ставится боксу с картинкой при отключении "Гибкой вёрстки". Л — логика 😆

#лёгкая_кастомизация #полезная_фишка

21 марта стартует главное событие для техспециалистов образовательного рынка — Global EdTech Conference 6, в котором я, в качестве спикера, открою вам секреты редизайна сеток визуальных блоков, где управлять ими может сам пользователь (как в современных мобильных приложениях).

Моё выступление запланировано на 22 марта в 19:00, где мы с вами разберём:
▶️ Как настроить автоматическую смену сетки блока под нужды пользователя;
▶️ Поработаем с творческим подходом: сделаем современное отображение фотогалереи;
▶️ Покажу возможности сортировки блоков с визуально-практичным удобным интерфейсом;
▶️ Поделюсь с вами эксклюзивными бонусами от меня.

Скидка 10% при покупке билета на Global EdTech Conference 6 по ссылке:
➡️ ХОЧУ СО СКИДКОЙ ⬅️

На конференции вы не только узнаете про вёрстку, скрипты и визуальные новшества, но и про тренды, дизайн, процессы, аналитику и, конечно, карьерные возможности и профессиональный рост специалистов.

Буду ждать вас в прямом эфире! 😎

📣 ГК опять что-то исправил и всё поломалось

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

Сейчас у них такой вид:
/teach/control/stream/view?id=362589288

А раньше был:
/teach/control/stream/view/id/362589288

Это повод переделать скрипт на динамическое подтягивание ссылки из атрибута и отказаться от статичного написания линков тренингов. Спасибо Геткурсу, он делает меня умнее 😂

P.S. Еще одна интересная вещь: попробовал залогиниться как ученик, после ввода логина и пароля перебрасывает на несуществующую страницу с 404 ошибкой. Возможно только у меня, но всё равно рекомендую проверить.

Первый и второй день конференции GETC6 были супер бомбическими! 👨‍💻

Моё выступление было вчера и я получил море кайфа, энергии и удовольствия от выступления, хотя мне казалось, что я взорвал людям мозг своими кодами. На конференции собрались потрясающие спикеры с багажом полезной информации, которую я с удовольствием сидел и впитывал сам. Сегодня последний день конференции и он будет не менее зажигательным, чем первые два 😈

Решил поделиться с вами гифкой-обзором того, что я делал и показывал вчера на конференции 😎

Всем хорошей пятницы и отличных выходных для восстановления сил 😉

В сегодняшнем пятничном меме отчасти олицетворение моей ситуации, когда после конференции вернулся доделывать код для своего тренажера в Train IT 😂

Без JS в современной web-разработке никуда 🙂

Поделюсь с вами очень простым, но безумно функциональным методом плавного открытия блока по кнопке. Буду использовать не нативный JS, а библиотеку JQuery, которую поддерживает Геткурс.

Для начала я создал блок, в котором разместил кнопку, и блок обычного текста. Самому тексту я присвоил класс text-block, а в кнопке поставил действие "Вызов JavaScript", которым, я уверен, мало кто пользуется.

В появившемся окне ниже я вставляю следующий код, который взаимодействует с классом text-block и применяю метод .slideToggle(), который помогает плавно открывать и закрывать блок:

$('.text-block').slideToggle();

А чтобы наш текстовый блок изначально не показывался на странице, зайдем в Стили блока и в "Подробных настройках" вставим следующий CSS:

.text-block {
display: none;
}

Благодаря таким простым действиям мы получили плавную "раскрывашку" текста по клику на кнопку и достаточно быстро нестандартно и интересно кастомизировали страницу. А если добавить нужные по вашему дизайну стили, будет ещё круче 😎

#лёгкая_кастомизация #полезная_фишка

Наконец-то! Я доделал первую ступень заданий для тренажера кода в Train IT, и рад открыть его для всех, у кого есть доступ (и он не заморожен) к направлениям «Веб с нуля» или «Тильда»!

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

➡️ Эксклюзивные доступы к направлениям клуба на 180 дней, включая комбо-тарифы;
➡️ Записи стримов (3 сезона), которые доступны исключительно на распродажах;
➡️ Доступы на 90 дней с ещё большей выгодой, включая комбо-тарифы.

Доступы на 90 дней — скидка 💰👍👍😍

Доступы на 180 дней — скидка 💰👍👍😍

Перейти к распродаже:
▶️ https://train-it.ru/springsale ◀️

Клуб Train IT нацелен на обучение фронтенду с нуля, поэтому любой желающий может без проблем обучиться всей магии закулисной жизни сайтов. В клубе я обучаю премудростям фронтенда (HTML/CSS/JS) в направлении «Веб с нуля» и делюсь с вами крутыми фишками и скриптами в направлении «Тильда». Я не люблю нудные пересказы "по учебнику", а рассказываю в своём понятном и доступном каждому стиле (кто смотрел мои стримы или любые уроки со мной, знают) 😎

Задания для второй и последующих ступеней тренажера находятся в активной разработке и не заставят себя долго ждать.

Распродажа продлится до 5 апреля 23:59❗️

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

Поэтому я решил создать свой собственный тренажер, и отличие моих испытаний и уроков Train IT в том, что все испытания приближены к реальным задачам повседневной жизни фронтендера, а уроки построены таким образом, что я делаю видео на одну конкретную тему, и рассказываю про эту тему исчерпывающую информацию. Поэтому никакой каши в голове, как у крупнейший известных проектов. А так же никаких испытаний в виде "подвигайте кубики туда... сюда... посмотрите как красиво..." которые ничему не учат по итогу. Всего этого я стараюсь избегать и делать свой клуб лучшим в сегменте обучения фронтенду 😊

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

Перейти к распродаже:
▶️ https://train-it.ru/springsale ◀️

Тренажер кода доступен для всех, у кого есть действующая подписка (и не заморожена) на направление «Веб с нуля» или «Тильда». В испытаниях действует ранговая система и особый учёт прохождения сложных заданий, который в будущем принесёт вам кое-какие привилегии, но об этом позже.

Зная вёрстку и скрипты, вы не только будете получать удовольствие от того, что написанный код работает, как надо! Ваши знания ещё и высоко оценят в валютном формате 🔥

Перейти к распродаже:
▶️ https://train-it.ru/springsale ◀️

Сегодня в рамках лёгкой кастомизации поделюсь с вами фишкой, которая украсит ваш блок и сделает более заметным и важным для восприятия на странице 🤔

На скриншоте я сделал на стандартном блоке в качестве примера, и опишу процесс, как нужно подходить к такому внедрению:

1) Я взял стандартный блок под названием "Текст в блоке";
2) Через панель разработчика выяснил, что родительский класс "серого" контейнера это block-box. Поэтому именно от него я буду делать псевдоэлементом этот треугольник в правой части. Чтобы треугольник правильно встал в правую часть, самому block-box надо прописать position: relative; в настройках стилей блока, вот так:

.block-box {
position: relative;
}

3) Поставил наш псевдоэлемент в правильное положение. Засчёт относительного позиционирования теперь правильно будет работать абсолютное положение у псевдоэлемента и, соответственно, прибиваем вправо вверх, то есть top: 0 и right: 0. Интересный момент, что треугольник полностью сделан на свойстве border, и манипулируя прозрачностью сторон бордеров можно добиться желаемого эффекта. Ниже вторым правилом дописываем так:

.block-box:before {
content: '';
position: absolute;
top: 0;
right: 0;
border: 25px solid red;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
}

Если вам нужно применить подобную фишку к своим блокам, найдите в инспекторе тот блок, который визуально максимально охватывает тот контейнер, который вам нужен, остановитесь на нём, кликните и посмотрите, какой блок покажет в инспекторе. От такого класса и отталкивайтесь, написав его вместо моего block-box 😉

#лёгкая_кастомизация

Напоминание! ⏰
До конца распродажи осталось всего 2 дня!

Последние 2 дня, чтобы забрать эксклюзивные доступы на 180 дней по скидке 35% и все сезоны стримов. Кстати, скоро анонсирую тему 4-го стрима 😎

Залетайте на распродажу:
https://train-it.ru/springsale

Тренажер кода так же доступен для всех, у кого есть доступ к направлениям «Веб с нуля» и «Тильда» (и они не заморожены).

Распродажа продлится до 5 апреля 23:59. В 0:00 все неоплаченные заказы будут отменены! 🤓

⚡️Осталось всего 6 часов до конца распродажи! И это последнее напоминание.

Многие откладывают всё на последний момент, и этот момент настал. В 0:00 все неоплаченные заказы будут отменены 😲

А я продолжу готовить новые вкусные уроки для клуба и заниматься подготовкой материала к новому стриму 😎

Какой же лендинг без кнопок?

На любом лендинге так или иначе есть кнопка, ведущая куда-нибудь дальше. И зачастую их надо красиво выделять, чтобы на них хотелось нажать. Настроить стиль кнопки мы с вами можем из настроек. Проблема начинается тогда, когда мы хотим в названии кнопки поставить какую-либо картинку. У многих наступает паника, что это очень много непонятного CSS + "найди класс кнопки и поставь куда надо" 🤨

Но не все знают, или по крайней мере не догадываются, что кнопка может принимать дополнительную разметку внутри себя. Каким образом? Прямо в названии кнопки можно вполне себе поставить div или span, а может и дополнительную большую вёрстку.

В нашем случае это прекрасная возможность без лишнего CSS поставить иконку внутрь с помощью FontAwesome 4.7, которая уже интегрирована в Геткурс. Нам остаётся найти нужную иконку, зайти внутрь и скопировать тег, отвечающий за её отображение, например: <i class="fa fa-envelope-open" aria-hidden="true"></i>

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

P.S. Бонусом прикладываю стилизацию и эффект, которые есть на гифке 😎

.btn {
    background: transparent !important;
    color: #000 !important;
    border: 2px solid #000;
    border-radius: 20px;
    transition: 0.3s;
}

.btn:hover {
    font-size: 1.2em;
}

P.P.S. Вставлять в "Стили" блока в "Подробные настройки"

#лайфхак #лёгкая_кастомизация

#пятничный_мем

Когда просят подойти к задаче творчески, не объясняя никаких деталей 😄

Всем отличных выходных!

Анимированные элементы всегда привлекают внимание

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

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

1) Ставим этому контейнеру position: relative. В моём случае это:

.stream-table tr td {
position: relative
}

2) Следующим правилом к классу этого элемента добавляем :before, и стилизуем:

.stream-table tr td:before {
content: "\261A \0a Хит!";
font-size: 16px;
position: absolute;
right: -55px;
color: goldenrod;
animation: 1s blink infinite;
}

3) Ставим анимацию в отдельный CSS блок. Если вы делаете это в тренингах, как у меня, то анимацию ставите в самый верх, там где пишется общий CSS:

@keyframes blink {
0% {
opacity: 0;
}

50% {
opacity: 1;
}

100% {
opacity: 0;
}
}

У меня так же стоит на .stream-table tr свойство display: flex; для того, чтобы контейнеры внутри tr стали занимать столько пространства, сколько внутри контента, чтобы не было распирания до краёв блока. Так что имейте в виду, если будете ставить на тренинги.

#лёгкая_кастомизация

Получился субботний мем, который просто не мог не запостить 😅

Почти всю неделю занимался тем, что экспериментировал над своим самописным ботом в телеграмме, сделанным на Node JS. Пока что бот умеет делать достаточно примитивные вещи, но я планирую сделать из него что-то очень крутое и функциональное, поскольку в программировании ничем не ограничиваюсь 😁

На следующей неделе будет анонс долгожданного очередного стрима в рамках проекта Train IT. Тема пока что в секрете, озвучу в соответствующем посте 😎

Всем отличных выходных!

А вот и долгожданный анонс моего четвёртого по счёту стрима в рамках клуба Train IT на тему "Секреты параллакса", который стартует 25 мая в 16:00!

▶️https://train-it.ru/frying-layouts◀️

➡️ Мечтаете преобразить проекты в современный презентабельный вид?
➡️ Надоели скучные монотонные блоки на странице?
➡️ Хотите чтобы лендинг радовал глаз и приносил больше прибыли?

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

Лендинг проекта/продукта/курса — это лицо вашей компании, и просто экологичный менеджер по продажам. Так почему бы не сделать его сразу притягательным?

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

Поймёт даже новичок, ни разу не прикасавшийся к JavaScript! Ну а если вы уже имеете даже самые базовые навыки владения, то будете в шоке от того, насколько просто такие эффекты создаются по моей методике.

В данный момент действует льготная цена до 22 мая до 23:59! А уже 23 мая в 0:00 цена вырастет.

Если на все три вопроса в начале вы ответили "Да" — то я жду вас у себя на стриме 😎

▶️https://train-it.ru/frying-layouts◀️

Важное напоминание❗️ Если вдруг вы по каким-то причинам не сможете прийти на стрим, то приобретая участие на стриме, запись мероприятия останется у вас навсегда в личном кабинете клуба Train IT.