现已上线！2025 年 Telegram 研究 — 年度关键洞察 
Вёрстка сайтов | HTML, CSS, JS
前往频道在 Telegram
👋 Привет, друг! В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду. Присоединяйся и начинай учиться! Связь: @Tigran1963
显示更多4 653
订阅者
-424 小时
-97 天
+730 天
数据加载中...
相似频道
标签云
进出提及
---
---
---
---
---
---
吸引订阅者
七月 '26
七月 '26
+1
在0个频道中
六月 '26
+81
在5个频道中
Get PRO
五月 '26
+75
在2个频道中
Get PRO
四月 '26
+93
在7个频道中
Get PRO
三月 '26
+83
在3个频道中
Get PRO
二月 '26
+54
在2个频道中
Get PRO
一月 '26
+85
在3个频道中
Get PRO
十二月 '25
+45
在3个频道中
Get PRO
十一月 '25
+72
在5个频道中
Get PRO
十月 '25
+48
在7个频道中
Get PRO
九月 '25
+126
在5个频道中
Get PRO
八月 '25
+74
在8个频道中
Get PRO
七月 '25
+75
在7个频道中
Get PRO
六月 '25
+49
在2个频道中
Get PRO
五月 '25
+73
在10个频道中
Get PRO
四月 '25
+81
在4个频道中
Get PRO
三月 '25
+177
在8个频道中
Get PRO
二月 '25
+176
在10个频道中
Get PRO
一月 '25
+155
在6个频道中
Get PRO
十二月 '24
+91
在9个频道中
Get PRO
十一月 '24
+119
在9个频道中
Get PRO
十月 '24
+224
在8个频道中
Get PRO
九月 '24
+222
在10个频道中
Get PRO
八月 '24
+115
在9个频道中
Get PRO
七月 '24
+153
在4个频道中
Get PRO
六月 '24
+98
在3个频道中
Get PRO
五月 '24
+115
在5个频道中
Get PRO
四月 '24
+126
在4个频道中
Get PRO
三月 '24
+110
在3个频道中
Get PRO
二月 '24
+133
在6个频道中
Get PRO
一月 '24
+243
在3个频道中
Get PRO
十二月 '23
+231
在6个频道中
Get PRO
十一月 '23
+165
在4个频道中
Get PRO
十月 '23
+160
在5个频道中
Get PRO
九月 '23
+166
在0个频道中
Get PRO
八月 '23
+221
在0个频道中
Get PRO
七月 '23
+274
在0个频道中
Get PRO
六月 '23
+137
在0个频道中
Get PRO
五月 '23
+143
在0个频道中
Get PRO
四月 '23
+219
在0个频道中
Get PRO
三月 '23
+251
在0个频道中
Get PRO
二月 '23
+415
在0个频道中
Get PRO
一月 '23
+265
在0个频道中
Get PRO
十二月 '22
+193
在0个频道中
Get PRO
十一月 '22
+229
在0个频道中
Get PRO
十月 '22
+681
在0个频道中
Get PRO
九月 '22
+216
在0个频道中
Get PRO
八月 '22
+2 368
在0个频道中
| 日期 | 订阅者增长 | 提及 | 频道 | |
| 01 七月 | +1 |
频道帖子
Как стать востребованным дизайнером сайтов в эпоху ИИ?
Пока весь интернет говорит про нейросети, в эту пятницу в Школе Тильды разберут главные вопросы о реальной и актуальной онлайн-профессии:
1. Как сейчас с деньгами в сфере создания сайтов?
2. Тильда или ИИ — где всё-таки лучше делать сайты в 2026 году?
3. Какие дизайнеры регулярно получают дорогие заказы?
4. Как стать таким дизайнером: чёткий прямой путь?
Открытый эфир пройдет 3 июля (пятница) в 13:00 по Москве
✅ Участники эфира смогут получить личную карьерную консультацию от успешных дизайнеров в качестве подарка. Подробности — в конце эфира.
Чтобы записаться, переходите по ссылке ниже ⚡
Записаться онлайн
#реклама 16+
tg.pulse.is
О рекламодателе
| 2 | CSS inset
Читать 👨💻
#полезности | 213 |
| 3 | Получи грант до 3,48 млн на обучение дизайну
Поступай на дизайн в Центральный университет с грантом.
Для учеников 10–11-х классов и СПО. Освой графический, UI/UX и продуктовый дизайн. Создавай визуальные концепты будущего.
На программе студенты получают фундаментальную базу, развивают прикладные навыки, приобретают опыт работы над реальными проектами, собирают портфолио и строят связи внутри дизайн-сообщества
Подать заявку
#реклама 16+
cu.ru
О рекламодателе | 257 |
| 4 | Архитектура в верстке сайтов
Читать👨💻
#полезнаястатья | 260 |
| 5 | Новости с полей рекламы на CTV
Аукционная видеореклама на Connected TV продолжает развиваться: Яндекс Директ увеличил на 82% количество тематических каналов.
А главное для брендов — теперь можно выбирать, где будет показываться реклама на CTV:
— на федеральных каналах
— на тематических каналах
— при просмотре фильмов и сериалов
Больше каналов — больше точности в показах на Connected TV
Узнать больше
#реклама 16+
yandex.ru
О рекламодателе | 259 |
| 6 |  Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Свойство accent-color
2. Секретные фишки Google Chrome DevTools
3. Как сделать выпадающее меню?
Лучшие фронтенд вакансии @job_webdev:
1. angular developer
2. Senior HTML-верстальщик
3. vue.js разработчик
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Product-дизайнер (UX/UI)
3. Продуктовый дизайнер
#лучшеезанеделю | 278 |
| 7 | Запустите рекламу в телеграм-каналах через Яндекс Директ
Перфоманс-реклама в мессенджере продолжает работать:
• Таргетинг по тематикам и регионам
• Умный подбор каналов
• Гибкие модели оплаты (CPC и CPV)
Яндекс Директ знает, как привлечь целевую аудиторию 💰👌
Попробовать
#реклама
yandex.ru
О рекламодателе | 235 |
| 8 |  Задача на JavaScript:
Представим, что у нас есть массив чисел от 1 до 1000. Наша задача состоит в том, чтобы определить, сколько чисел из этого массива являются палиндромами (то есть числами, которые одинаково читаются слева направо и справа налево).
Чтобы решить эту задачу, мы можем использовать следующий алгоритм:
Создаем переменную count и устанавливаем ее значение равным 0. Эта переменная будет использоваться для подсчета количества палиндромов в массиве.
Итерируемся по каждому числу в массиве.
Преобразуем каждое число в строку с помощью метода toString().
Проверяем, является ли полученная строка палиндромом. Для этого мы сравниваем строку с ее обратной версией, которую мы получаем, используя метод split('').reverse().join(''). Если строки равны, значит число является палиндромом.
Если число является палиндромом, увеличиваем значение переменной count на 1.
По окончании итерации, выводим значение переменной count, которое указывает на количество палиндромов в массиве.
#домашка | 293 |
| 9 | Утраиваем бюджет на продвижение в Директе
Запустите первое продвижение в Яндекс Директе
с утроенным бюджетом и ИИ-помощником ✨
Используйте один из промокодов :
При пополнении от 10 000 ₽
+20 000 ₽
Промокод START20
При пополнении от 15 000 ₽
+30 000 ₽
Промокод START30
Зарегистрироваться
#реклама 16+
direct.yandex.ru
О рекламодателе | 232 |
| 10 | Как сделать выпадающее меню?
Читать 👨💻
#какэтосделать | 325 |
| 11 |  Макет для тренировки (romsem)
Перейти к макету 🧑💻
#практика | #макет | 345 |
| 12 | Web Animations API (WAAPI)
Обычно анимации на сайте делают двумя путями: либо пишут @keyframes в CSS (отлично для простых вещей), либо подключают тяжелые JS-библиотеки вроде GSAP / Anime.js (когда нужен сложный контроль, паузы, реверс или динамические значения).
Но мало кто помнит про Web Animations API (WAAPI) – нативный браузерный движок, который объединяет силу JS-управления и производительность CSS (анимации выполняются на уровне композитного слоя GPU).
простой пример: анимируем появление элемента по клику
const box = document.querySelector('.box');
document.querySelector('.btn').addEventListener('click', () => {
// Вызываем нативный метод .animate()
box.animate(
// 1. Описываем ключевые кадры (как в @keyframes)
[
{ transform: 'scale(0.5)', opacity: 0 },
{ transform: 'scale(1.2)', opacity: 0.8, offset: 0.8 }, // offset — это аналог 80% в CSS
{ transform: 'scale(1)', opacity: 1 }
],
// 2. Настройки тайминга
{
duration: 500, // Длительность в мс
easing: 'ease-out', // Функция плавности
fill: 'forwards' // Сохранить состояние после окончания
}
);
});
Почему это круче, чем просто вешать CSS-классы?
Потому что метод .animate() возвращает объект анимации, которым можно полностью управлять из JS кода:
const myAnimation = box.animate([...], {...});
myAnimation.pause(); // Поставить на паузу
myAnimation.play(); // Запустить снова
myAnimation.reverse(); // Проиграть в обратную сторону
myAnimation.playbackRate = 2; // Ускорить анимацию в 2 раза
// И даже отловить окончание через Промисы!
myAnimation.finished.then(() => {
console.log('Анимация успешно завершилась, можно удалить элемент из DOM!');
});
#полезнастатья | 367 |
| 13 | 🚨 США за 90 минут запретили самую мощную AI-модель в мире. Что дальше?
Обычные инженеры выходят в открытый космос, Китай резервирует 200 000 спутников, а мощнейшая нейросеть внезапно оказывается под тотальным запретом. SpaceX заключает сделку на $60 млрд, учёные публикуют фейковые статьи с помощью ИИ, а обычные люди уже запускают «запрещёнку» у себя на ноутбуке.
Коротко, жёстко и по делу — про то, как ИИ, космос и геополитика уже меняют твою жизнь.
Смотри до конца, будет интересно
🔥 https://tglink.io/2b5aa822fa0725?erid=2W5zFGar71K
Реклама. Гуржий Ю.В. ИНН 366302114107. | 212 |
| 14 |  Секретные фишки Google Chrome DevTools
Фишка 1: Идеальный скриншот конкретного HTML-узла
Часто нужно скинуть дизайнеру или заказчику скриншот отдельного блока (например, только сверстанной шапки или карточки), но вырезать его ножницами из экрана неудобно.
Откройте DevTools (F12) и выберите нужный тег во вкладке Elements.
Нажмите комбинацию клавиш Ctrl + Shift + P (на Mac: Cmd + Shift + P), чтобы открыть командное меню.
Введите слово screenshot и выберите пункт Capture node screenshot.
Браузер сделает скриншот ровно этого элемента с идеальным качеством, прозрачным фоном (если нет задника) и сохранит его как картинку!
Фишка 2: Эмуляция дефектов зрения (Проверка доступности)
Хороший интерфейс должен быть доступен всем, включая людей с дальтонизмом. Проверить, как видят ваш сайт разные пользователи, можно прямо в Chrome:
Откройте DevTools и снова вызовите командную строку через Ctrl + Shift + P (или Cmd + Shift + P).
Наберите слово Rendering и нажмите Enter. Откроется одноименная панель внизу.
Проскролльте ее до пункта Emulate vision deficiencies (Эмулировать дефекты зрения).
Выберите, например, Deuteranopia (протанопия/дейтеранопия) или Blurred vision (размытое зрение).
Вы увидите, как весь ваш сайт налету изменит цвета. Это сразу покажет, не сливаются ли важные кнопки с фоном и считывается ли текст.
#полезнаястатья | 382 |
| 15 |  Свойство accent-color
Каждый, кто хоть раз пытался сделать нативные чекбоксы (<input type="input">), радиокнопки или ползунки (<input type="range">) фирменного цвета бренда, знает эту боль. Приходилось скрывать стандартный инпут через appearance: none, верстать псевдоэлементы ::before / ::after и прописывать логику для состояний :checked и :focus.
Но в современном CSS есть потрясающее свойство – accent-color. Оно позволяет перекрасить интерактивные элементы UI буквально в одну строку!
/* Перекрасит ВСЕ нативные инпуты на сайте в ваш бренд-цвет */
root {
accent-color: #7b2cbf;
}
/* Или можно применить точечно к конкретной форме */
.custom-form {
accent-color: #ff007f;
}
Какими элементами управляет accent-color?
Чекбоксы (<input type="checkbox">)
Радиокнопки (<input type="radio">)
Ползунки (<input type="range">)
Индикаторы прогресса (<progress>)
Браузер не просто тупо заливает элемент вашим цветом. Он автоматически рассчитывает контрастность для галочки внутри чекбокса! Если ваш accent-color слишком темный, галочка станет белой, а если светлый — черной, чтобы сохранить доступность (A11y).
Да, это не заменит сложный кастомный дизайн с иконками, но для 90% стандартных проектов и админок – это идеальное решение, экономящее кучу времени и килобайты кода.
#полезности #css | 377 |
| 16 | Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. CSS Контейнерные запросы
2. Защита интерфейса: Атрибуты autocomplete для безопасности
3. Метод structuredClone()
Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик Cloud
2. Стажер frontend developer
3. HTML-верстальщик
Лучшие дизайн вакансии @job_webdesign:
1. ux/ui-дизайнер
2. Дизайнер интерфейсов
3. Продуктовый дизайнер
#лучшеезанеделю | 379 |
| 17 | Вы не пользуетесь даже 10% функциями нейросетей
Вы знали, что с помощью ChatGPT можно пересылать деньги с карты на карту? А слышали про режим в Claude, где он по голосовому сообщению создает 5-10 минутный ролик на YouTube?
Чтобы выжать из нейронок максимум, пользуйтесь каналом ИИнтеллигенциия. Там узнаете:
➜ Как бесплатно активировать Pro-тариф в ChatGPT и Gemini
➜ Какая нейронка за вас пройдет собеседование на работу
➜ Как с помощью ИИ восстановить удалённые сообщения в ТГ
Подписывайтесь, потом сами себе спасибо скажете: https://t.me/+mJ6_HW73Fy02NTgy | 351 |
| 18 | Задача на js: Список контактов
Читать 👨💻
#домашка | 411 |
| 19 |  Макет для тренировки (coffee cola)
Перейти к макету 🧑💻
#практика | #макет | 474 |
| 20 |  jFunctions - маленькая библиотека с полезными js функциями
Смотреть на codepen 👨💻
#практика | 553 |
