Glo Academy
Открыть в Telegram
Бесплатные уроки по HTML/CSS/JavaScript, лайфхаки для верстальщика и бесплатные дизайн-макеты для портфолио. По рекламе — @yankovsky_ads Купить рекламу напрямую https://telega.in/c/glo_academy
Больше3 793
Подписчики
-124 часа
-167 дней
-1830 дней
Загрузка данных...
Похожие каналы
Облако тегов
Входящие и исходящие упоминания
---
---
---
---
---
---
Привлечение подписчиков
сентябрь '26
сентябрь '260
в 0 каналах
август '26
+35
в 1 каналах
Get PRO
июль '26
+6
в 0 каналах
Get PRO
июнь '26
+5
в 0 каналах
Get PRO
май '26
+9
в 0 каналах
Get PRO
апрель '26
+14
в 0 каналах
Get PRO
март '26
+11
в 0 каналах
Get PRO
февраль '26
+23
в 0 каналах
Get PRO
январь '26
+8
в 0 каналах
Get PRO
декабрь '25
+15
в 0 каналах
Get PRO
ноябрь '25
+16
в 0 каналах
Get PRO
октябрь '25
+10
в 0 каналах
Get PRO
сентябрь '25
+19
в 0 каналах
Get PRO
август '25
+16
в 0 каналах
Get PRO
июль '25
+19
в 0 каналах
Get PRO
июнь '25
+10
в 0 каналах
Get PRO
май '25
+13
в 0 каналах
Get PRO
апрель '25
+17
в 0 каналах
Get PRO
март '25
+20
в 0 каналах
Get PRO
февраль '25
+19
в 0 каналах
Get PRO
январь '25
+16
в 0 каналах
Get PRO
декабрь '24
+35
в 0 каналах
Get PRO
ноябрь '24
+25
в 0 каналах
Get PRO
октябрь '24
+32
в 0 каналах
Get PRO
сентябрь '24
+43
в 0 каналах
Get PRO
август '24
+52
в 0 каналах
Get PRO
июль '24
+49
в 0 каналах
Get PRO
июнь '24
+40
в 0 каналах
Get PRO
май '24
+30
в 0 каналах
Get PRO
апрель '24
+42
в 0 каналах
Get PRO
март '24
+44
в 0 каналах
Get PRO
февраль '24
+47
в 0 каналах
Get PRO
январь '24
+43
в 0 каналах
Get PRO
декабрь '23
+55
в 0 каналах
Get PRO
ноябрь '23
+65
в 0 каналах
Get PRO
октябрь '23
+50
в 0 каналах
Get PRO
сентябрь '23
+41
в 0 каналах
Get PRO
август '23
+72
в 0 каналах
Get PRO
июль '23
+74
в 0 каналах
Get PRO
июнь '23
+37
в 0 каналах
Get PRO
май '23
+85
в 0 каналах
Get PRO
апрель '23
+71
в 0 каналах
Get PRO
март '23
+49
в 0 каналах
Get PRO
февраль '23
+67
в 0 каналах
Get PRO
январь '23
+51
в 0 каналах
Get PRO
декабрь '22
+59
в 0 каналах
Get PRO
ноябрь '22
+102
в 0 каналах
Get PRO
октябрь '22
+63
в 0 каналах
Get PRO
сентябрь '22
+57
в 0 каналах
Get PRO
август '22
+103
в 0 каналах
Get PRO
июль '22
+64
в 0 каналах
Get PRO
июнь '22
+63
в 0 каналах
Get PRO
май '22
+50
в 0 каналах
Get PRO
апрель '22
+93
в 0 каналах
Get PRO
март '22
+82
в 0 каналах
Get PRO
февраль '22
+46
в 0 каналах
Get PRO
январь '22
+75
в 0 каналах
Get PRO
декабрь '21
+76
в 0 каналах
Get PRO
ноябрь '21
+110
в 0 каналах
Get PRO
октябрь '21
+123
в 0 каналах
Get PRO
сентябрь '21
+99
в 0 каналах
Get PRO
август '21
+139
в 0 каналах
Get PRO
июль '21
+149
в 0 каналах
Get PRO
июнь '21
+224
в 0 каналах
Get PRO
май '21
+183
в 0 каналах
Get PRO
апрель '21
+190
в 0 каналах
Get PRO
март '21
+263
в 0 каналах
Get PRO
февраль '21
+290
в 0 каналах
Get PRO
январь '21
+477
в 0 каналах
Get PRO
декабрь '20
+7 655
в 0 каналах
| Дата | Привлечение подписчиков | Упоминания | Каналы | |
| 03 сентября | 0 | |||
| 02 сентября | 0 | |||
| 01 сентября | 0 |
Посты канала
🧰 anime.js
Если GSAP кажется тяжеловатым, а на чистом CSS уже не вывозишь — держи anime.js.
Четвёртая версия работает через ES-модули, из коробки умеет stagger-анимации (когда элементы анимируются по очереди с задержкой), крутит SVG, CSS-свойства и просто JS-объекты. Апи простой: указал что анимировать, задал easing — готово.
https://github.com/juliangarnier/anime
🔥 — если было полезно
@glo_academy | #инструменты
| 2 |  👩💻👩💻
@glo_academy | 253 |
| 3 |  ✂️ Переключатель-тумблер из чекбокса без JS
Тумблер собирается из обычного чекбокса, без лишних элементов: сам <input> уезжает за экран, а рядом стоит <label>, стилизованный под переключатель. Кружок внутри рисуется через ::after.
.switch {
position: relative;
display: inline-block;
width: 46px; height: 24px;
background: rgba(0,0,0,.25);
border-radius: 22px;
transition: .3s;
}
.switch::after {
content: '';
position: absolute;
inset: 1px auto auto 1px;
width: 22px; height: 22px;
border-radius: 50%;
background: #fff;
transition: .3s;
}
:checked + .switch { background: #7983ff; }
:checked + .switch::after { transform: translateX(22px); }
Дальше всё делает селектор :checked — двигает кружок вправо и красит подложку. Состояние хранит сам чекбокс, JS не участвует.
Только не прячь его через display: none: элемент выпадет из фокуса, и с тумблером перестанут работать клавиатура и скринридеры. Уводи за экран позиционированием.
❤️ — если понравился пост
@glo_academy | #snippets | 273 |
| 4 |  🎨 Фокус на кнопке подсвечивает всю карточку
Кнопка внутри карточки при табе получает свою рамку фокуса — и она едет вместе с кнопкой, если та меняет размер или прыгает по карточке. Выглядит криво.
.bento-card:has(button:focus-visible) {
outline: 2px solid var(--color-primary);
}
.bento-card button {
outline: none;
}
Вместо рамки на самой кнопке подсвечиваем родителя через :has.
:has() — это селектор наоборот: обычно ты стилизуешь детей по родителю, а тут родитель проверяет, что происходит внутри него. .bento-card:has(button:focus-visible) читается как «карточка, в которой кнопка сейчас в фокусе от клавиатуры» — и рамку рисуем уже на всей карточке, а не на кнопке.
:focus-visible, а не :focus — иначе рамка будет появляться и при клике мышкой, а не только при навигации с клавиатуры. Chrome 105+, Firefox 121+, Safari 15.4+.
🔥 — если было полезно
@glo_academy | #css_day | 287 |
| 5 |  📐 Лендинг вебинара по профессии косметолога
Сложный макет на русском языке с адаптивом
@glo_academy | #макеты | 323 |
| 6 |  ⚡ Редактирование контента без форм
Делаешь доску задач — и упираешься в переименование карточки. Первое решение: модалка с кнопкой «Сохранить». На каждую правку — открыть окно, напечатать, закрыть.
<div class="card" contenteditable="plaintext-only">Сверстать шапку</div>
card.addEventListener('blur', () => save(card.textContent));
Второй заход: положить input прямо в карточку — и вылезает вёрстка. Своя рамка, фон и шрифт, их приходится сбрасывать, а высота фиксированная: длинное название уезжает за край.
contenteditable оставляет карточку карточкой. Ставишь атрибут на тот же div — стили остаются, блок тянется по содержимому, а курсор, выделение и Ctrl+Z браузер берёт на себя. Текст лежит в textContent, забираешь его по blur: кликнул мимо — дописал.
Браузер даёт только поле для ввода. Хранение — твоя работа: правки живут в DOM до перезагрузки, поэтому по тому же blur шлёшь текст на сервер. И ставь plaintext-only, иначе вставка из ворда притащит чужой HTML со стилями.
🔥 — если полезно
@glo_academy | #js_day | 352 |
| 7 |  🧰 tegaki
Хочешь эффект «текст сам себя пишет» без танцев с SVG path animation вручную?
Tegaki превращает любой шрифт в анимацию рукописного письма — берёт контуры букв и рисует их штрих за штрихом с естественным таймингом
Есть готовые компоненты под React, Vue, Svelte, SolidJS, Astro и просто vanilla, плюс CLI, который генерит самостоятельно рисующийся SVG прямо из терминала — даже ничего не устанавливая
https://github.com/gkurt/tegaki
🔥 — если было полезно
@glo_academy | #инструменты | 355 |
| 8 |  😂😂😂
@glo_academy | 401 |
| 9 |  ✂️ Аккордеон без JS на паре HTML-тегов
Раскрывающийся блок обычно собирают так: вешаем клик, дёргаем класс, в CSS играем с max-height. Потом выясняется, что контент выше заданной высоты, и появляется костыль с пересчётом.
<details>
<summary>Доставка и оплата</summary>
<p>Отправляем в день заказа.</p>
</details>
<details open>
<summary>Гарантия</summary>
<p>Год на всё, кроме расходников.</p>
</details>
Браузер умеет это сам: details — контейнер, summary — заголовок, по которому кликают. Открытие и закрытие, фокус с клавиатуры и работа со скринридером идут в комплекте.
Стрелку-маркер можно убрать через summary { list-style: none }, а атрибут open в разметке открывает блок сразу.
❤️ — если понравился пост
@glo_academy | #snippets | 417 |
| 10 |  🎨 Анимируем цвет без серого перехода
Анимируешь background-color с одного цвета на другой — и на середине перехода плашка сереет. Так устроено само свойство: браузер тянет каналы RGB по отдельности, и на полпути красный, зелёный и синий сходятся к одному числу — а три равных канала это и есть серый. Чтобы переход шёл живым цветом, используй свойство filter со значением hue-rotate():
@keyframes hueRotate {
to {
filter: hue-rotate(720deg);
}
}
.particle {
animation: hueRotate 1000ms;
}
На гифке оба варианта. Сверху background-color — смотри, как плашка сереет на середине. Снизу тот же цвет через hue-rotate: оттенок идёт по цветовому кругу и не выцветает нигде.
Цвета идут по кругу: красный, жёлтый, зелёный, голубой, синий и снова красный — полный оборот 360 градусов. deg — это degrees, градусы: число в hue-rotate говорит, сколько их цвет пройдёт по кругу за анимацию. 720deg за секунду — два оборота, резковато; спокойнее 180–540 или те же 720, но за 3 секунды.
🔥 — если было полезно
@glo_academy | #css_day | 395 |
| 11 |  Макет для вёрстки — цветочный магазин, многостраничный сайт
Сложный макет на русском языке с адаптивом
@glo_academy | #макеты | 427 |
| 12 |  ⚡ Копируем HTML-таблицу сразу в CSV
Дизайнер или менеджер просит «скинь табличку с сайта в эксель», а у тебя просто HTML-таблица на странице. Копировать руками — боль
table.querySelectorAll('tr').forEach(r => {
let row = [];
r.querySelectorAll('th, td').forEach(d => row.push(d.innerText));
data.push(row);
});
// data → CSV
const csv = data.map(row => row.join(',')).join('\n');
await navigator.clipboard.writeText(csv);
Вместо ручного выделения — кнопка, которая сама достаёт данные из таблицы и кладёт в буфер обмена уже в нужном формате
Сначала проходишь по строкам таблицы и собираешь обычный двумерный массив: строка — это массив ячеек. Дальше массив превращается в CSV склейкой через запятую и перенос строки, а navigator.clipboard.writeText кладёт результат в буфер — вставляется прямо в Google Таблицы или Excel
Тем же массивом легко собрать и Markdown-таблицу для доки — меняется только функция форматирования, данные те же
🔥 — если полезно
@glo_academy | #js_day | 434 |
| 13 |  DOMPurify — самая быстрая библиотека для санитизации
На сайте есть поля, куда текст пишет посетитель: комментарий под статьёй, отзыв о товаре, описание в профиле, сообщение в чате. Вместе с текстом туда можно вписать код — браузер не разбирает, кто автор строки. Он видит HTML, который надо выполнить, и выполняет: и жирный шрифт, и тег script из чужого комментария
Удаляет опасные теги и атрибуты, но сохраняет валидную разметку. Работает в браузере и Node.js, настраивается под любые нужды — от комментариев до rich-text редакторов
Must-have для любого проекта, где пользователи могут вставлять HTML
github.com/cure53/DOMPurify
🔥 — если было полезно
@glo_academy | #инструменты | 472 |
| 14 |  😁😁😁
@glo_academy | 473 |
| 15 |  ✂️ Размер шрифта для разных экранов без медиазапросов
Ради заголовка, который не разъезжается на мобильном и не теряется на большом экране, обычно пишут три медиазапроса. Каждый со своим font-size, и все три надо помнить при правках.
.title {
font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}
/* минимум 24px, максимум 48px,
между ними — плавно по ширине экрана */
clamp принимает три значения: минимум, желаемое и максимум. Среднее считается от ширины экрана, крайние работают ограничителями — шрифт плавно едет между ними и никогда не выходит за границы.
В среднем значении держи rem рядом с vw: от чистых vw текст перестаёт слушаться системного масштаба, а это ломает доступность.
❤️ — если понравился пост
@glo_academy | #snippets | 509 |
| 16 |  🎨 Переключение состояний на сайте без JS
Переключение вкладок или шагов онбординга часто тянет за собой JS-обработчик клика и стейт в компоненте. А ведь это чисто визуальная переменная — можно обойтись CSS
input[name="state"] {
appearance: none;
position: fixed;
pointer-events: none;
opacity: 0;
&:checked {
position: relative;
pointer-events: all;
opacity: 1;
}
}
Берём группу radio-кнопок с одинаковым name — каждая представляет своё состояние. Через <code>:checked</code> показываем нужный контент, остальные прячем opacity и pointer-events. Клик по любой кнопке автоматически переключает состояние, браузер делает это бесплатно
Не забудь про aria-label на каждой кнопке и видимый outline на фокусе — иначе клавиатурная навигация станет невидимой
🔥 — если было полезно
@glo_academy | #css_day | 595 |
| 17 |  📢 Реклама в этом канале
Аудитория в Telegram живее, чем кажется. Прежде чем принять решение о размещении — проверьте сами: индекс читаемости показывает динамику охватов по неделям в разных тематиках. Видно, где аудитория читает стабильно, а где активность просела.
ФАС в 2026 году официально подтвердил: реклама в Telegram разрешена.
Заказать рекламу в этом канале — через Telega.in, это займёт несколько минут.
Форматы и цены — по ссылке. | 161 |
| 18 |  Micron.js
JavaScript-библиотека для создания микроинтеракций с CSS-анимациями под JS-контролем.
Будет полезна для быстрого добавления клик-эффектов и bind-интеракций через data-атрибуты.
Пригодится для создания живых UI без сложного кода.
Перейти - https://webkul.github.io/micron/
#анимация #ui #css | 409 |
| 19 | ![[Начните отсюда] С 17 по 23 мая стартуем интенсив для фронтендеров. В этот раз — напишем фронтенд для магазина на JavaScript](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fn3.tlmtr.cc%2Fp%2F_cWZLhNckPvBLbripltqLi9_JhYkbI_mzWJovFcS8zgc%3Fty%3Dx&w=64&q=75){kind=small} [Начните отсюда]
С 17 по 23 мая стартуем интенсив для фронтендеров. В этот раз — напишем фронтенд для магазина на JavaScript и Nuxt
Можно участвовать бесплтано
👩💻Первый урок 17 мая в 10:00 мск
Как работаем:
— чтобы участвовтаь, нужно зарегистрироваться по ссылке ниже
🔥 каждый урок доступен 48 часов после выхода, не успел сделать часть проекта — вылет 😰
— домашку сдаём в комменты под урок
— среди всех, кто сдаст домашки, проведу розыгрыш, больше домашек — выше шанс выиграть
Помимо уроков буду отвечать на вопросы, разберём план старта во фронтенде с нуля, способы поиска заказчиков, ИИ, джунов и другие
Итак, ещё раз:
— 17-23 мая
— фронтенд для WB
— есть дедлайны
— подойдёт и новичкам, и с тем, кто опытом
https://telegram.me/gloacademy_bot?start=intensive-nuxt-may-2 | 325 |
| 20 | [Начните отсюда]
С 17 по 23 мая стартуем интенсив для фронтендеров. В этот раз — напишем фронтенд для магазина на JavaScript и Nuxt
Можно участвовать бесплтано
👩💻Первый урок 17 мая в 10:00 мск
Как работаем:
— чтобы участвовтаь, нужно зарегистрироваться по ссылке ниже
🔥 каждый урок доступен 48 часов после выхода, не успел сделать часть проекта — вылет 😰
— домашку сдаём в комменты под урок
— среди всех, кто сдаст домашки, проведу розыгрыш, больше домашек — выше шанс выиграть
Помимо уроков буду отвечать на вопросы, разберём план старта во фронтенде с нуля, способы поиска заказчиков, ИИ, джунов и другие
Итак, ещё раз:
— 17-23 мая
— фронтенд для WB
— есть дедлайны
— подойдёт и новичкам, и с тем, кто опытом | 1 |
