Первый и второй день конференции 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.

Забавный факт: сейчас фактически нет таких проектов на Геткурсе, которые используют параллакс анимации 😋

Вывод простой: начать предоставлять такую услугу 😎

Чем параллакс-анимации полезны для проекта?
✔️ Сразу же приковывает внимание пользователя, располагая его к проекту.
✔️ Пользователь явно захочет посмотреть, что же ещё есть у вас на странице и прочитает хотя бы минимальное количество контента.
✔️ Это безусловно способствует поднятию конверсии лендинга.
✔️ Нереально круто и красиво ☺️

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

Готовы преобразить проекты? Тогда жду вас у себя на стриме.

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

А для владельцев GTFcard льготная цена ещё ниже!

▶️Зарегистрироваться на стрим! ◀️

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

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

Речь пойдет о сервисе enjoycss.com который может генерировать целые, уже застилизованные шаблоны. У сервиса есть встроенный мощный редактор, который тоже приятно радует своими возможностями. Сервис поможет застилизовать блоки, инпуты, кнопки, сгенерировать текст, бекграунд, тени и многое другое. После того, как всё сделали, можно запросить выдачу кода и по смыслу подставить в Геткурс к своим блокам к нужным классам.

Надеюсь, будет полезно тем, кто пока боится писать код самостоятельно, а красоту наводить хочется 😎

P.S. Пригодится знание английского!
P.P.S. Или же воспользоваться автопереводом страницы 😁

#полезная_фишка