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 |
