Glo Academy
前往频道在 Telegram
Бесплатные уроки по HTML/CSS/JavaScript, лайфхаки для верстальщика и бесплатные дизайн-макеты для портфолио. По рекламе — @yankovsky_ads Купить рекламу напрямую https://telega.in/c/glo_academy
显示更多3 798
订阅者
-224 小时
-187 天
-1430 天
数据加载中...
相似频道
标签云
进出提及
---
---
---
---
---
---
吸引订阅者
八月 '26
八月 '26
+35
在1个频道中
七月 '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个频道中
| 日期 | 订阅者增长 | 提及 | 频道 | |
| 31 八月 | 0 | |||
| 30 八月 | 0 | |||
| 29 八月 | 0 | |||
| 28 八月 | +1 | |||
| 27 八月 | +1 | |||
| 26 八月 | 0 | |||
| 25 八月 | 0 | |||
| 24 八月 | 0 | |||
| 23 八月 | +2 | |||
| 22 八月 | +2 | |||
| 21 八月 | +1 | |||
| 20 八月 | 0 | |||
| 19 八月 | +2 | |||
| 18 八月 | +4 | |||
| 17 八月 | +19 | |||
| 16 八月 | 0 | |||
| 15 八月 | 0 | |||
| 14 八月 | 0 | |||
| 13 八月 | 0 | |||
| 12 八月 | 0 | |||
| 11 八月 | +1 | |||
| 10 八月 | 0 | |||
| 09 八月 | 0 | |||
| 08 八月 | 0 | |||
| 07 八月 | 0 | |||
| 06 八月 | +1 | |||
| 05 八月 | 0 | |||
| 04 八月 | +1 | |||
| 03 八月 | 0 | |||
| 02 八月 | 0 | |||
| 01 八月 | 0 |
频道帖子
🎨 Фокус на кнопке подсвечивает всю карточку
Кнопка внутри карточки при табе получает свою рамку фокуса — и она едет вместе с кнопкой, если та меняет размер или прыгает по карточке. Выглядит криво.
.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| 2 |  📐 Лендинг вебинара по профессии косметолога
Сложный макет на русском языке с адаптивом
@glo_academy | #макеты | 223 |
| 3 |  ⚡ Редактирование контента без форм
Делаешь доску задач — и упираешься в переименование карточки. Первое решение: модалка с кнопкой «Сохранить». На каждую правку — открыть окно, напечатать, закрыть.
<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 | 256 |
| 4 |  🧰 tegaki
Хочешь эффект «текст сам себя пишет» без танцев с SVG path animation вручную?
Tegaki превращает любой шрифт в анимацию рукописного письма — берёт контуры букв и рисует их штрих за штрихом с естественным таймингом
Есть готовые компоненты под React, Vue, Svelte, SolidJS, Astro и просто vanilla, плюс CLI, который генерит самостоятельно рисующийся SVG прямо из терминала — даже ничего не устанавливая
https://github.com/gkurt/tegaki
🔥 — если было полезно
@glo_academy | #инструменты | 297 |
| 5 |  😂😂😂
@glo_academy | 333 |
| 6 |  ✂️ Аккордеон без 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 | 371 |
| 7 |  🎨 Анимируем цвет без серого перехода
Анимируешь 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 | 337 |
| 8 |  Макет для вёрстки — цветочный магазин, многостраничный сайт
Сложный макет на русском языке с адаптивом
@glo_academy | #макеты | 391 |
| 9 |  ⚡ Копируем 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 | 404 |
| 10 |  DOMPurify — самая быстрая библиотека для санитизации
На сайте есть поля, куда текст пишет посетитель: комментарий под статьёй, отзыв о товаре, описание в профиле, сообщение в чате. Вместе с текстом туда можно вписать код — браузер не разбирает, кто автор строки. Он видит HTML, который надо выполнить, и выполняет: и жирный шрифт, и тег script из чужого комментария
Удаляет опасные теги и атрибуты, но сохраняет валидную разметку. Работает в браузере и Node.js, настраивается под любые нужды — от комментариев до rich-text редакторов
Must-have для любого проекта, где пользователи могут вставлять HTML
github.com/cure53/DOMPurify
🔥 — если было полезно
@glo_academy | #инструменты | 437 |
| 11 |  😁😁😁
@glo_academy | 436 |
| 12 |  ✂️ Размер шрифта для разных экранов без медиазапросов
Ради заголовка, который не разъезжается на мобильном и не теряется на большом экране, обычно пишут три медиазапроса. Каждый со своим font-size, и все три надо помнить при правках.
.title {
font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}
/* минимум 24px, максимум 48px,
между ними — плавно по ширине экрана */
clamp принимает три значения: минимум, желаемое и максимум. Среднее считается от ширины экрана, крайние работают ограничителями — шрифт плавно едет между ними и никогда не выходит за границы.
В среднем значении держи rem рядом с vw: от чистых vw текст перестаёт слушаться системного масштаба, а это ломает доступность.
❤️ — если понравился пост
@glo_academy | #snippets | 464 |
| 13 |  🎨 Переключение состояний на сайте без 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 | 570 |
| 14 |  📢 Реклама в этом канале
Аудитория в Telegram живее, чем кажется. Прежде чем принять решение о размещении — проверьте сами: индекс читаемости показывает динамику охватов по неделям в разных тематиках. Видно, где аудитория читает стабильно, а где активность просела.
ФАС в 2026 году официально подтвердил: реклама в Telegram разрешена.
Заказать рекламу в этом канале — через Telega.in, это займёт несколько минут.
Форматы и цены — по ссылке. | 161 |
| 15 |  Micron.js
JavaScript-библиотека для создания микроинтеракций с CSS-анимациями под JS-контролем.
Будет полезна для быстрого добавления клик-эффектов и bind-интеракций через data-атрибуты.
Пригодится для создания живых UI без сложного кода.
Перейти - https://webkul.github.io/micron/
#анимация #ui #css | 409 |
| 16 | ![[Начните отсюда] С 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 |
| 17 | [Начните отсюда]
С 17 по 23 мая стартуем интенсив для фронтендеров. В этот раз — напишем фронтенд для магазина на JavaScript и Nuxt
Можно участвовать бесплтано
👩💻Первый урок 17 мая в 10:00 мск
Как работаем:
— чтобы участвовтаь, нужно зарегистрироваться по ссылке ниже
🔥 каждый урок доступен 48 часов после выхода, не успел сделать часть проекта — вылет 😰
— домашку сдаём в комменты под урок
— среди всех, кто сдаст домашки, проведу розыгрыш, больше домашек — выше шанс выиграть
Помимо уроков буду отвечать на вопросы, разберём план старта во фронтенде с нуля, способы поиска заказчиков, ИИ, джунов и другие
Итак, ещё раз:
— 17-23 мая
— фронтенд для WB
— есть дедлайны
— подойдёт и новичкам, и с тем, кто опытом | 1 |
| 18 |  AAronn - макет лендинга портфолио веб-дизайнера.
Уровень сложности: лёгкий.
Ссылка на макет - https://www.figma.com/design/fX7GF1DjwR26N5IovTvdoP/Aaronn
P.S. Вы можете дублировать файл Figma себе, нажав на Duplicate.
#figma #макеты #портфолио #вебдизайн | 338 |
| 19 |  Бесплатный интенсив по вёрстке🔥
С 14 по 17 мая пройдёт интенсив по основам фронтенда — будем верстать сайт кинотеатра на HTML/CSS и добавлять интерактив на JS
Если вы только начинаете путь в этой сфере или хотите попробовать себя — интенсив вам подойдёт, если уже есть какой-то опыт — для вас тоже будут интересные элементы
За 4 урока узнаете основы разработки сайтов: как они создаются, что такое дизайн-макет, как с ним работать. В итоге — создадите полноценный сайт и опубликуете его в интернете
👩💻Первый урок 14 мая в 10:00 мск
Как работаем:
— чтобы участвовтаь, нужно зарегистрироваться по ссылке ниже
🔥 каждый урок доступен 48 часов после выхода, не успел сделать часть проекта — вылет 😰
— домашку сдаём в комменты
Помимо уроков в канале выйдут посты с ответами на вопросы, а на следующей неделе встретимся на стриме
Итак, ещё раз:
— 14-17 мая
— сайт кинотеатра на HTML/CSS + JS
— есть дедлайны | 349 |
| 20 |  Transition.css
JavaScript-библиотека для создания плавных анимаций переходов без CSS.
Будет полезна для быстрого прототипирования UI, добавления динамичных эффектов в React/Vue-проекты.
Пригодится для оптимизации hover-эффектов и микровзаимодействий без лишнего кода.
Перейти - https://www.transition.style/
#transition #Frontend #анимация | 328 |
