Вже доступно! Дослідження Telegram за 2025 — головні інсайти року 
Вёрстка сайтов | 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 |
