Glo Academy
الذهاب إلى القناة على Telegram
Бесплатные уроки по HTML/CSS/JavaScript, лайфхаки для верстальщика и бесплатные дизайн-макеты для портфолио. По рекламе — @yankovsky_ads Купить рекламу напрямую https://telega.in/c/glo_academy
إظهار المزيد3 794
المشتركون
-224 ساعات
-147 أيام
-1730 أيام
جاري تحميل البيانات...
القنوات المماثلة
سحابة العلامات
الإشارات الواردة والصادرة
---
---
---
---
---
---
جذب المشتركين
سبتمبر '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 |
منشورات القناة
| 2 |  ✂️ Переключатель-тумблер из чекбокса без 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 | 244 |
| 3 |  🎨 Фокус на кнопке подсвечивает всю карточку
Кнопка внутри карточки при табе получает свою рамку фокуса — и она едет вместе с кнопкой, если та меняет размер или прыгает по карточке. Выглядит криво.
.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 | 261 |
| 4 |  📐 Лендинг вебинара по профессии косметолога
Сложный макет на русском языке с адаптивом
@glo_academy | #макеты | 313 |
| 5 |  ⚡ Редактирование контента без форм
Делаешь доску задач — и упираешься в переименование карточки. Первое решение: модалка с кнопкой «Сохранить». На каждую правку — открыть окно, напечатать, закрыть.
<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 | 344 |
| 6 |  🧰 tegaki
Хочешь эффект «текст сам себя пишет» без танцев с SVG path animation вручную?
Tegaki превращает любой шрифт в анимацию рукописного письма — берёт контуры букв и рисует их штрих за штрихом с естественным таймингом
Есть готовые компоненты под React, Vue, Svelte, SolidJS, Astro и просто vanilla, плюс CLI, который генерит самостоятельно рисующийся SVG прямо из терминала — даже ничего не устанавливая
https://github.com/gkurt/tegaki
🔥 — если было полезно
@glo_academy | #инструменты | 342 |
| 7 |  😂😂😂
@glo_academy | 370 |
| 8 |  ✂️ Аккордеон без 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 |
| 9 |  🎨 Анимируем цвет без серого перехода
Анимируешь 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 | 388 |
| 10 |  Макет для вёрстки — цветочный магазин, многостраничный сайт
Сложный макет на русском языке с адаптивом
@glo_academy | #макеты | 422 |
| 11 |  ⚡ Копируем 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 | 430 |
| 12 |  DOMPurify — самая быстрая библиотека для санитизации
На сайте есть поля, куда текст пишет посетитель: комментарий под статьёй, отзыв о товаре, описание в профиле, сообщение в чате. Вместе с текстом туда можно вписать код — браузер не разбирает, кто автор строки. Он видит HTML, который надо выполнить, и выполняет: и жирный шрифт, и тег script из чужого комментария
Удаляет опасные теги и атрибуты, но сохраняет валидную разметку. Работает в браузере и Node.js, настраивается под любые нужды — от комментариев до rich-text редакторов
Must-have для любого проекта, где пользователи могут вставлять HTML
github.com/cure53/DOMPurify
🔥 — если было полезно
@glo_academy | #инструменты | 456 |
| 13 |  😁😁😁
@glo_academy | 471 |
| 14 |  ✂️ Размер шрифта для разных экранов без медиазапросов
Ради заголовка, который не разъезжается на мобильном и не теряется на большом экране, обычно пишут три медиазапроса. Каждый со своим font-size, и все три надо помнить при правках.
.title {
font-size: clamp(1.5rem, 4vw + 1rem, 3rem);
}
/* минимум 24px, максимум 48px,
между ними — плавно по ширине экрана */
clamp принимает три значения: минимум, желаемое и максимум. Среднее считается от ширины экрана, крайние работают ограничителями — шрифт плавно едет между ними и никогда не выходит за границы.
В среднем значении держи rem рядом с vw: от чистых vw текст перестаёт слушаться системного масштаба, а это ломает доступность.
❤️ — если понравился пост
@glo_academy | #snippets | 507 |
| 15 |  🎨 Переключение состояний на сайте без 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 | 592 |
| 16 |  📢 Реклама в этом канале
Аудитория в Telegram живее, чем кажется. Прежде чем принять решение о размещении — проверьте сами: индекс читаемости показывает динамику охватов по неделям в разных тематиках. Видно, где аудитория читает стабильно, а где активность просела.
ФАС в 2026 году официально подтвердил: реклама в Telegram разрешена.
Заказать рекламу в этом канале — через Telega.in, это займёт несколько минут.
Форматы и цены — по ссылке. | 161 |
| 17 |  Micron.js
JavaScript-библиотека для создания микроинтеракций с CSS-анимациями под JS-контролем.
Будет полезна для быстрого добавления клик-эффектов и bind-интеракций через data-атрибуты.
Пригодится для создания живых UI без сложного кода.
Перейти - https://webkul.github.io/micron/
#анимация #ui #css | 409 |
| 18 | ![[Начните отсюда] С 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 |
| 19 | [Начните отсюда]
С 17 по 23 мая стартуем интенсив для фронтендеров. В этот раз — напишем фронтенд для магазина на JavaScript и Nuxt
Можно участвовать бесплтано
👩💻Первый урок 17 мая в 10:00 мск
Как работаем:
— чтобы участвовтаь, нужно зарегистрироваться по ссылке ниже
🔥 каждый урок доступен 48 часов после выхода, не успел сделать часть проекта — вылет 😰
— домашку сдаём в комменты под урок
— среди всех, кто сдаст домашки, проведу розыгрыш, больше домашек — выше шанс выиграть
Помимо уроков буду отвечать на вопросы, разберём план старта во фронтенде с нуля, способы поиска заказчиков, ИИ, джунов и другие
Итак, ещё раз:
— 17-23 мая
— фронтенд для WB
— есть дедлайны
— подойдёт и новичкам, и с тем, кто опытом | 1 |
| 20 |  AAronn - макет лендинга портфолио веб-дизайнера.
Уровень сложности: лёгкий.
Ссылка на макет - https://www.figma.com/design/fX7GF1DjwR26N5IovTvdoP/Aaronn
P.S. Вы можете дублировать файл Figma себе, нажав на Duplicate.
#figma #макеты #портфолио #вебдизайн | 338 |
