Каморка Геткурсовода 💻 | Канал Максима Елисеева
2.39K subscribers
194 photos
18 videos
10 files
107 links
Остались вопросы? Пишите — @Isagaya

Этот уютный канал посвещён фишкам и нестандартным решениям по дизайнам, интерфейсам и функционалам платформы от Куратора школы Магии Геткурса — Максима Елисеева.

Мой второй канал обо всём - https://t.me/closetmax ;)
Download Telegram
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Какой из них вам больше всего нравится и интересен в плане реализации?
А вот и тот самый анонс по итогу голосования! 😎

Победил макет "Книжный лендинг" (Шаблон-1). Именно его мы будем с вами верстать на очередном, уже 5-м по счёту стриме, в рамках клуба Train IT — Прожарке макетов. Стрим пройдёт 27 июля в 16:00.

Участвовать на стриме и посмотреть программу

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

Как и всегда, в данный момент действуют льготные цены до 24 июля 23:59:
Для счастливых обладателей GTFcard1790р.
Обычная льготная цена — 1990р.

А уже 25 июля цена изменится и станет 2590р. для всех.

Участвовать на стриме и посмотреть программу

И конечно же, если вы не сможете посетить эфир в этот день, то приобретая участие, запись стрима останется с вами навсегда в личном кабинете клуба Train IT.

Важные моменты:
Если вы владелец GTFcard, но на странице вы видите цену, не соответствующую владельцу карты, сперва авторизуйтесь в проекте под вашим аккаунтом, имеющим GTFcard.
Если вы авторизованы, являетесь владельцем GTFcard и всё равно видите несоответствующую цену, то убедитесь, что у вас подключён клуб Train IT в вашем аккаунте Клуба Магии, чтобы получить соответствующие преимущества.
Если у вас уже был аккаунт в клубе Train IT, пожалуйста, так же авторизуйтесь с него или восстановите пароль, чтобы корректно совершить покупку. Слияние двух аккаунтов чревато потерей доступов ко всему, что у вас было ранее.
Please open Telegram to view this post
VIEW IN TELEGRAM
Вот представьте ситуацию: вам прилетает макет с красивым дизайном, сделанным в Фигме. Всё очень круто, вы начинаете потихоньку верстать первый экран и осознаёте, что элементы попросту в него не помещаются, а в Фигме всё ровненько и красиво. 🤬

Не многие обращают внимание на то, что ширина самого контейнера, содержащего контент в Фигме, зачастую существенно отличается от ширины контейнера Геткурса, у которого есть ограничение в 1170px (плюс по 15 пикселям маргина/паддинга по бокам). И тут встаёт вопрос: как всё это уместить в пределы Геткурса?

Некоторые люди сдадутся и будут делать всё в соответствии с контейнером ГК. Но мы-то с вами не такие, правда же? 😉 Мы попросту изменим ширину контейнера и сделаем её такой же на всей странице, как и в макете. Делается это сверхпросто и быстро.

Предположим, что в Фигме контейнер самого контента имеет ширину в 1400px. А мы помним, что контейнеры Геткурса под контент составляют 1170px в ширину. Ставим CSS-блок в самый верх вашей страницы и просто добавляем туда следующее:

.my-container,
.container {
max-width: 1400px !important;
}

У Геткурса есть два селектора его контейнеров, которые по сути мы просто переназначили. И всё, ваши контейнеры растянулись как надо и теперь готовы попиксельно вместить весь дизайн, который был отрисован в Фигме.

#лайфхак
Please open Telegram to view this post
VIEW IN TELEGRAM
Каморка Геткурсовода 💻 | Канал Максима Елисеева
А вот и тот самый анонс по итогу голосования! 😎 Победил макет "Книжный лендинг" (Шаблон-1). Именно его мы будем с вами верстать на очередном, уже 5-м по счёту стриме, в рамках клуба Train IT — Прожарке макетов. Стрим пройдёт 27 июля в 16:00. Участвовать…
Какие ваши ощущения, когда вам прилетает макет в Фигме со сложными элементами, которые, как кажется, нереально собрать на Геткурсе? Хочется при этом передать макет "более опытному" товарищу, а у вас самих опускаются руки?

Если вам знакомы эти ощущения, то мой стрим 27 июля в 16:00 специально для вас 😎

Участвовать на стриме и посмотреть программу

Путём голосования был выбран макет "Книжного лендинга", который мы будем верстать в прямом эфире с кучей сложных элементов и нестандартных блоков. Я научу вас грамотному подходу к сложным макетам, правильной вёрстке и стилизации таких элементов. Постепенно избавимся от страха подобных макетов, ведь мы его прожарим в свойственной мне манере в прямом эфире! 😎

В данный момент действуют льготные цены до 24 июля 23:59:
Для счастливых обладателей GTFcard1790р.
Обычная льготная цена — 1990р.

А уже 25 июля цена изменится и станет 2590р. для всех.

Участвовать на стриме и посмотреть программу

Так же, если вы не сможете посетить эфир в этот день, то приобретая участие, запись стрима останется с вами навсегда в личном кабинете клуба Train IT 🔥

P.S. Важные моменты по GTFcard смотрите в закреплённом посте в самом низу сообщения.
Please open Telegram to view this post
VIEW IN TELEGRAM
Многим был интересен механизм работы "Читать далее". В этом посте я раскрою одну из его механик работы. Экспериментировать я буду на своём любимом блоке "Карточек".

Если вы хотите разметить много текста в описании вашего продукта в карточке, то логичнее не делать "портянку", а придерживаться единого ритма текстового контента, например, показывать лишь 3 строчки текста, чтобы всё остальное было скрыто. Но как так сделать? 🧐

Демонстрирую один из возможных вариантов:
1) Ставим блок карточек (см. скриншот)
2) Делаем описание карточки с подобной внутренней разметкой:

<p>... Очень много вашего текста...</p>
<p class="readmore"><a style="font-weight: bold;">Читать далее...</a></p>

3) Вставляем стили в Стили блока в "Подробные настройки":

.lt-tsr-content .description p {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}

.lt-tsr-content .description p.opened {
-webkit-line-clamp: initial;
}

.lt-tsr-content .description p.changed a {
font-size: 0;
}

.lt-tsr-content .description p.changed a:before {
content: 'Скрыть';
font-size: 16px;
}

4) В самом низу страницы или под блок с карточками ставим блок с JS-кодом:

$(function() {
let readBtns = document.querySelectorAll('.readmore');

readBtns.forEach(el => {
el.addEventListener('click', function() {
this.classList.toggle('changed');
this.previousElementSibling.classList.toggle('opened');
})
})
})

И наслаждаемся чудесным механизмом "Читать далее", который безумно сильно сокращает полотна текста на карточках, а так же делает эстетически приятный однородный вид элементов 😉

#полезная_фишка #лёгкая_кастомизация
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Всем хорошего вечера, и отличных выходных ☺️
Держите пятничный мемасик!

P.S.: Обновляю телеграм на мобильном, буду тестировать сторисы 😏
Please open Telegram to view this post
VIEW IN TELEGRAM
Хотел напомнить, что до окончания действия льготной цены на стрим "Прожарка макетов" осталось всего 3 дня! (до 24 июля 23:59)

Участвовать на стриме и посмотреть программу

Вас ждёт куча приёмов вёрстки по макету из Фигмы на платформе Геткурс, а так же секреты и фишки построения сложных элементов, которыми я с радостью поделюсь с вами 😊

Напоминаю, что стрим состоится 27 июля в 16:00. Если вы не сможете присутствовать в нашей ламповой тусовке в онлайне, то приобретая участие, запись стрима останется с вами навсегда в личном кабинете клуба Train IT.

Участвовать на стриме и посмотреть программу
Please open Telegram to view this post
VIEW IN TELEGRAM
И последнее напоминание 😉
Осталось менее 3-х часов до окончания действия льготной цены!

Участвовать на стриме и посмотреть программу

Буду ждать всех на стриме 27 июля в 16:00 😎
Please open Telegram to view this post
VIEW IN TELEGRAM
Через 30 минут (в 16:00) начинаю стрим "Прожарка макетов" Сезон 5!

Если вы приобрели участие, то ссылка будет доступна в самом низу на этой странице!
Так же все ссылки придут на указанную в вашем аккаунте почту и в бота-енота Мэтью 😎

P.S. Если на странице вы не видите внизу ссылок, пожалуйста авторизуйтесь.
Please open Telegram to view this post
VIEW IN TELEGRAM
Друзья, запись стрима "Прожарка макетов Сезон 5 - Вёрстка по макету" уже доступна для приобретавших участие!

Заранее извиняюсь за незначительно обрезанный экран снизу и справа, т.к. из-за нового монитора я забыл поменять настройки трансляции в программе. В течение стрима я выдвинул получше правую часть панелей, чтобы хоть как-то было видно что я там делаю. К следующему эфиру исправлюсь 😊

Перейти к записи можно по этой ссылке 😉
Please open Telegram to view this post
VIEW IN TELEGRAM
Друзья, я уже достаточно давно радую вас полезным контентом в канале, многим помогаю лично решать сложные задачи в рамках Геткурса и не только. Ко мне много обращаются за помощью, потому что меня знают в нашем сообществе мира EdTech. И я знаю, что многие из вас тоже хотели бы повысить свою узнаваемость, чтобы о качестве проводимых вами работ знали не понаслышке, ведь в конце концов каждый технический специалист работает над своим "личным брендом".

Мы вместе с коллегами "по цеху" достаточно долго разрабатывали интересный проект и наконец-то его реализовали при технической поддержке Геткурса, который поможет вам вознестись справедливо и достойно среди нашего большого сообщества. Этот проект — Технический специалист PRO.

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

🚀 А ещё, с сегодняшнего дня начинает работать единый портал помощи как заказчикам, так и техническим специалистам оказывать взаимопомощь друг другу — GetOverflow.

И самое главное, зарекомендовав себя на портале GetOverflow как знающий и умеющий находить выход из ситуаций грамотный специалист, у вас будет возможность получить PRO-статус уже в сентябре! Мы (PRO-команда сообщества) будем следить за вами и вашими успехами 😎
Please open Telegram to view this post
VIEW IN TELEGRAM
Хотите чтобы в вашем проекте регистрировались только с почты определённого домена? Можно устроить!

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

Делюсь пошаговым планом эвакуации 😱 действий:
1) Вам нужно поставить обычную форму на страницу (поле имейла должно быть не скрыто)
2) Поставить CSS-класс блоку с формой form в "Стилях" блока
3) В самый верх страницы поставить следующий CSS в отдельный блок "CSS-код":

.form [data-item-name="emailField"] {
position: relative;
}

.form [data-item-name="emailField"] .field-content:before {
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #333;
border-radius: 50%;
right: 20px;
top: 50%;
transform: translateY(-50%);
}

.form [data-item-name="emailField"].valid .field-content:before {
background: #0f0;
box-shadow: 0 0 5px #0f0,
0 0 10px #0f0,
0 0 20px #0f0;
}

.form [data-item-name="emailField"].invalid .field-content:before {
background: #f00;
box-shadow: 0 0 5px #f00,
0 0 10px #f00,
0 0 20px #f00;
}

4) Поставить JS-код в отдельный блок в самый низ страницы, либо под самой формой:

$(function() {
function validate() {
let emailInput = document.querySelector('.form [data-item-name="emailField"]');
let innerInput = document.querySelector('.form [data-item-name="emailField"] input').value;
let formButton = document.querySelector('.form button');
const pattern = /@gmail.com|@yandex.ru/;

if (innerInput.match(pattern)) {
emailInput.classList.add('valid');
emailInput.classList.remove('invalid');
formButton.disabled = false;
} else {
emailInput.classList.add('invalid');
emailInput.classList.remove('valid');
formButton.disabled = true;
}

if (innerInput == "") {
emailInput.classList.remove('valid');
emailInput.classList.remove('invalid');
formButton.disabled = true;
}
};

$('.form [data-item-name="emailField"] input').on('keyup',function() {
validate();
});

validate();
})

В данный момент скрипт настроен таким образом, что будет считать валидным строку имейла, если в ней присутствует @gmail.com или @yandex.ru. Эта настройка хранится в переменной pattern, вы не пропустите отдельное выделение данного паттерна в скрипте, когда будете ставить его на Геткурс. Вы можете изменить этот паттерн, например, вы хотите добавить так же @mail.ru, то паттерн будет выглядеть уже вот так /@gmail.com|@yandex.ru|@mail.ru/

Обратите внимание, все новые значения доменов перечисляйте через знак прямого слэша ( | ).

#полезная_фишка
Выходные, время работы над своими ошибками и переосмыслению ситуаций. Вот и я на выходных нашел для вас полезный сервис, который помогает выявлять ошибки в CSS-коде онлайн, если вы не понимаете, где у вас затык, и пересмотрели глазами всё вдоль и поперёк 😂

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

Будет полезно для тех, кому не хочется ставить сторонние специализированные программы по редактору кода 😎

#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Друзья, время отпусков подходит к концу и совсем скоро наступит новый учебный сезон. Да, специалисты тоже учатся, причём каждый день, бывает даже без выходных и летних каникул. В клубе Train IT стартует предосенняя распродажа! Подготовимся к осени с умом 😎

Распродажа продлится с 22 августа по 1 сентября включительно!

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

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

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

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

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

Ближайшие планы на сентябрь: в клубе Train IT по направлению «Веб с нуля» я начну цикл уроков по вёрстке отдельных интересных блоков из разных макетов. Думаю, будет что-то наподобие множества мини-курсов, чтобы показать и подробно рассказать, как собираются и верстаются те или иные блоки. Я буду показывать обычную вёрстку с нуля, а так же вёрстку такого же блока применимо к конкретной платформе (Геткурс, Тильда, и тд., но пока по потребности лидирует Геткурс). Будет обязательно познавательно и интересно!

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

Перейти к распродаже:
▶️ https://train-it.ru/pre-autumn-sale ◀️
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Когда вовлечён в астрологический проект и делаешь форму регистрации (чтобы никогда не зарегистрироваться 😄)

Всех с пятницей! ☺️

#пятничный_мем
Please open Telegram to view this post
VIEW IN TELEGRAM
Привет, друзья! 👋

Время летит незаметно, и вот уже осталось всего 5 дней до конца предосенней распродажи.

Напоминаю, что распродажа продлится до 1 сентября включительно!

Скидки 25% на абонементы и комбо-тарифы на 90 дней
Скидки 35% на абонементы и комбо-тарифы на 180 дней

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

Если работать с вёрсткой и кодами, то погружаться стоит всерьёз, т.к. велик шанс наделать кучу ошибок, впоследствии чего страница или весь проект попросту перестанет работать. В своём клубе я прорабатываю теорию и практику в направлении «Веб с нуля» для лучшего понимания, почему именно ТАК работает тот или иной код, а так же из этого понимания рождается правильной использование кода на практике. В наше время чем лучше подкован специалист, особенно в такой важной теме как фронтенд, тем больше он востребован, и таких специалистов отрывают с руками и ногами в любой крупный проект, не говоря уже о соответствующем доходе.

В направлении «Тильда» я собрал свои самые сочные решения по преображению платформы, и добавления в неё функционала. Да, Тильда красивее в плане выбора своих блоков, но имеет безумно скудные возможности по внедрению стороннего функционала. И эту проблему я прекрасно решаю в этом направлении.

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

Осень — время учёбы и достижения новых высот! 😉
Please open Telegram to view this post
VIEW IN TELEGRAM
Каморка Геткурсовода 💻 | Канал Максима Елисеева
Привет, друзья! 👋 Время летит незаметно, и вот уже осталось всего 5 дней до конца предосенней распродажи. Напоминаю, что распродажа продлится до 1 сентября включительно! Скидки 25% на абонементы и комбо-тарифы на 90 дней Скидки 35% на абонементы и комбо…
Напоминаю, осталось всего полтора дня до конца предосенней распродажи!

Завтра, 1 сентября в 23:59 все неоплаченные заказы будут отменены.

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

Время ещё есть, но осталось его совсем чуть-чуть, чтобы успеть приобрести доступы и стримы по вкусным ценам.

С такими знаниями, которые я даю в своём клубе, вы сможете творить чудеса вёрстки и кодинга не только в пределах конкретной платформы, но и любой другой, а так же на самописных сайтах 😎
Please open Telegram to view this post
VIEW IN TELEGRAM
Уже почти всё! ⌛️
Осталось 4 часа до конца распродажи, и это последнее напоминание.

У вас ещё есть шанс вступить в клуб с большой скидкой, а так же приобрести стримы, которые в свободном доступе, кроме как на распродаже, не найти.

Поезд Магия => Фронтенд скоро отправляется, запрыгнуть в последний вагон можно здесь 😃

Или по ссылке ниже:
▶️ https://train-it.ru/pre-autumn-sale ◀️
Please open Telegram to view this post
VIEW IN TELEGRAM
Скудный функционал виджетов?
— Да

Что с этим можно сделать?
— Много чего!

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

1) Переходим на редактор лендинга
2) Ставим блок, который хотим использовать в виджете
3) Экспортируем этот блок и импортируем в виджет
4) Наслаждаемся результатом (скриншот №2)

Вот такой простой лайфхак вы можете использовать, чтобы преобразить ваши виджеты в более функциональные. Так же вы можете экспортировать CSS/JS/HTML блоки 😎

#лайфхак
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM