Glo Academy
رفتن به کانال در Telegram
Бесплатные уроки по HTML/CSS/JavaScript, лайфхаки для верстальщика и бесплатные дизайн-макеты для портфолио. По рекламе — @yankovsky_ads Купить рекламу напрямую https://telega.in/c/glo_academy
نمایش بیشتر3 808
مشترکین
-524 ساعت
-97 روز
-1030 روز
در حال بارگیری داده...
کانالهای مشابه
ابر برچسبها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اوت '26
اوت '26
+33
در 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 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 27 اوت | 0 | |||
| 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 |
پستهای کانال
🧰 tegaki
Хочешь эффект «текст сам себя пишет» без танцев с SVG path animation вручную?
Tegaki превращает любой шрифт в анимацию рукописного письма — берёт контуры букв и рисует их штрих за штрихом с естественным таймингом
Есть готовые компоненты под React, Vue, Svelte, SolidJS, Astro и просто vanilla, плюс CLI, который генерит самостоятельно рисующийся SVG прямо из терминала — даже ничего не устанавливая
https://github.com/gkurt/tegaki
🔥 — если было полезно
@glo_academy | #инструменты
| 2 |  😂😂😂
@glo_academy | 239 |
| 3 |  ✂️ Аккордеон без 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 | 273 |
| 4 |  🎨 Анимируем цвет без серого перехода
Анимируешь 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 | 266 |
| 5 |  Макет для вёрстки — цветочный магазин, многостраничный сайт
Сложный макет на русском языке с адаптивом
@glo_academy | #макеты | 331 |
| 6 |  ⚡ Копируем 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 | 345 |
| 7 |  DOMPurify — самая быстрая библиотека для санитизации
На сайте есть поля, куда текст пишет посетитель: комментарий под статьёй, отзыв о товаре, описание в профиле, сообщение в чате. Вместе с текстом туда можно вписать код — браузер не разбирает, кто автор строки. Он видит HTML, который надо выполнить, и выполняет: и жирный шрифт, и тег script из чужого комментария
Удаляет опасные теги и атрибуты, но сохраняет валидную разметку. Работает в браузере и Node.js, настраивается под любые нужды — от комментариев до rich-text редакторов
Must-have для любого проекта, где пользователи могут вставлять HTML
github.com/cure53/DOMPurify
🔥 — если было полезно
@glo_academy | #инструменты | 383 |
| 8 |  😁😁😁
@glo_academy | 399 |
| 9 |  ✂️ Размер шрифта для разных экранов без медиазапросов
Ради заголовка, который не разъезжается на мобильном и не теряется на большом экране, обычно пишут три медиазапроса. Каждый со своим font-size, и все три надо помнить при правках.
.title {
font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}
/* минимум 24px, максимум 48px,
между ними — плавно по ширине экрана */
clamp принимает три значения: минимум, желаемое и максимум. Среднее считается от ширины экрана, крайние работают ограничителями — шрифт плавно едет между ними и никогда не выходит за границы.
В среднем значении держи rem рядом с vw: от чистых vw текст перестаёт слушаться системного масштаба, а это ломает доступность.
❤️ — если понравился пост
@glo_academy | #snippets | 428 |
| 10 |  🎨 Переключение состояний на сайте без 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 | 528 |
| 11 |  📢 Реклама в этом канале
Аудитория в Telegram живее, чем кажется. Прежде чем принять решение о размещении — проверьте сами: индекс читаемости показывает динамику охватов по неделям в разных тематиках. Видно, где аудитория читает стабильно, а где активность просела.
ФАС в 2026 году официально подтвердил: реклама в Telegram разрешена.
Заказать рекламу в этом канале — через Telega.in, это займёт несколько минут.
Форматы и цены — по ссылке. | 161 |
| 12 |  Micron.js
JavaScript-библиотека для создания микроинтеракций с CSS-анимациями под JS-контролем.
Будет полезна для быстрого добавления клик-эффектов и bind-интеракций через data-атрибуты.
Пригодится для создания живых UI без сложного кода.
Перейти - https://webkul.github.io/micron/
#анимация #ui #css | 409 |
| 13 | ![[Начните отсюда] С 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 |
| 14 | [Начните отсюда]
С 17 по 23 мая стартуем интенсив для фронтендеров. В этот раз — напишем фронтенд для магазина на JavaScript и Nuxt
Можно участвовать бесплтано
👩💻Первый урок 17 мая в 10:00 мск
Как работаем:
— чтобы участвовтаь, нужно зарегистрироваться по ссылке ниже
🔥 каждый урок доступен 48 часов после выхода, не успел сделать часть проекта — вылет 😰
— домашку сдаём в комменты под урок
— среди всех, кто сдаст домашки, проведу розыгрыш, больше домашек — выше шанс выиграть
Помимо уроков буду отвечать на вопросы, разберём план старта во фронтенде с нуля, способы поиска заказчиков, ИИ, джунов и другие
Итак, ещё раз:
— 17-23 мая
— фронтенд для WB
— есть дедлайны
— подойдёт и новичкам, и с тем, кто опытом | 1 |
| 15 |  AAronn - макет лендинга портфолио веб-дизайнера.
Уровень сложности: лёгкий.
Ссылка на макет - https://www.figma.com/design/fX7GF1DjwR26N5IovTvdoP/Aaronn
P.S. Вы можете дублировать файл Figma себе, нажав на Duplicate.
#figma #макеты #портфолио #вебдизайн | 338 |
| 16 |  Бесплатный интенсив по вёрстке🔥
С 14 по 17 мая пройдёт интенсив по основам фронтенда — будем верстать сайт кинотеатра на HTML/CSS и добавлять интерактив на JS
Если вы только начинаете путь в этой сфере или хотите попробовать себя — интенсив вам подойдёт, если уже есть какой-то опыт — для вас тоже будут интересные элементы
За 4 урока узнаете основы разработки сайтов: как они создаются, что такое дизайн-макет, как с ним работать. В итоге — создадите полноценный сайт и опубликуете его в интернете
👩💻Первый урок 14 мая в 10:00 мск
Как работаем:
— чтобы участвовтаь, нужно зарегистрироваться по ссылке ниже
🔥 каждый урок доступен 48 часов после выхода, не успел сделать часть проекта — вылет 😰
— домашку сдаём в комменты
Помимо уроков в канале выйдут посты с ответами на вопросы, а на следующей неделе встретимся на стриме
Итак, ещё раз:
— 14-17 мая
— сайт кинотеатра на HTML/CSS + JS
— есть дедлайны | 349 |
| 17 |  Transition.css
JavaScript-библиотека для создания плавных анимаций переходов без CSS.
Будет полезна для быстрого прототипирования UI, добавления динамичных эффектов в React/Vue-проекты.
Пригодится для оптимизации hover-эффектов и микровзаимодействий без лишнего кода.
Перейти - https://www.transition.style/
#transition #Frontend #анимация | 328 |
| 18 |  Всё сделал чётко по тз, значит вырастет - будет программистом.
#юмор | 387 |
| 19 |  Maral Realty - макет лендинга агентства недвижимости.
Уровень сложности: средний.
Ссылка на макет - https://www.figma.com/design/Wof5tJQtywlz2QcKOStHUb/Maral-Realty
P.S. Вы можете дублировать файл Figma себе, нажав на Duplicate.
#figma #макеты #недвижимость | 405 |
| 20 |  Dreamina
Инструмент для генерации изображений и коротких видео по тексту.
Будет полезен для быстрой визуализации идей, анимации макетов и подготовки материалов для соцсетей.
Перейти - https://dreamina.capcut.com/
#ии #нейросеть #генерация #видео #изображения | 377 |
