Вёрстка сайтов | HTML, CSS, JS
Открыть в Telegram
👋 Привет, друг! В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду. Присоединяйся и начинай учиться! Связь: @Tigran1963
Больше
Сеть:4 556
Подписчики
-124 часа
-117 дней
-4730 день
Загрузка данных...
Похожие каналы
Облако тегов
Входящие и исходящие упоминания
---
---
---
---
---
---
Привлечение подписчиков
август '26
август '26
+39
в 2 каналах
июль '26
+39
в 2 каналах
Get PRO
июнь '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 каналах
| Дата | Привлечение подписчиков | Упоминания | Каналы | |
| 26 августа | +2 | |||
| 25 августа | +2 | |||
| 24 августа | +1 | |||
| 23 августа | +5 | |||
| 22 августа | 0 | |||
| 21 августа | +1 | |||
| 20 августа | +1 | |||
| 19 августа | +3 | |||
| 18 августа | +1 | |||
| 17 августа | +2 | |||
| 16 августа | +1 | |||
| 15 августа | 0 | |||
| 14 августа | 0 | |||
| 13 августа | +1 | |||
| 12 августа | +2 | |||
| 11 августа | +4 | |||
| 10 августа | +4 | |||
| 09 августа | +1 | |||
| 08 августа | +2 | |||
| 07 августа | +1 | |||
| 06 августа | +1 | |||
| 05 августа | 0 | |||
| 04 августа | +2 | |||
| 03 августа | +1 | |||
| 02 августа | 0 | |||
| 01 августа | +1 |
\n\n\n \n\n\nБесшовный переход\nОдин из главных плюсов концепции — постепенная интеграция (Opt-in). Вам не придётся переписывать всё приложение сразу:\n* Vapor-компоненты смогут работать внутри обычных VDOM-компонентов.\n* Обычные VDOM-компоненты можно будет вставлять в Vapor-дерево.\n\nКогда ждать и стоит ли переходить?\nVapor Mode всё ещё находится в активной разработке. Это не замена текущему Vue 3, а альтернативная стратегия компиляции для случаев, когда критически важна максимальная производительность.\n\nЕсли вы делаете стандартные SPA/dashboard текущего VDOM Vue 3 хватает с запасом. Но для высоконагруженных UI, мобильных webview и приложений с жесткими требованиями к перформансу Vapor станет мощнейшим бустом.\n\n#полезнаястатья","datePublished":"2026-08-17T07:05:16Z","dateModified":"2026-08-17T07:05:16Z","author":{"@type":"Organization","name":"Вёрстка сайтов | HTML, CSS, JS","url":"https://telemetr.io/ru/channels/1637025417-free_html_lessons","image":"https://img.tlmtr.io/c/1MMN5L/5199902427388692220?ty=x"},"publisher":{"@type":"Organization","name":"Вёрстка сайтов | HTML, CSS, JS","url":"https://telemetr.io/ru/channels/1637025417-free_html_lessons","image":"https://img.tlmtr.io/c/1MMN5L/5199902427388692220?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":395},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}}]}
Посты канала
Домашняя школа для 5-11 классов. Онлайн-обучение!
⚡Профориентологи помогут ученикам сделать осознанный и подходящий выбор вуза и будущей профессии, исследуя истинные желания, таланты и интересы.
⚡Наши психологи поддерживают эмоциональное благополучие учеников, помогая им справляться со стрессом, трудностями в учёбе, в познании себя и мира вокруг.
⚡Родители и дети не останутся в вакууме, мы создаём пространство, где учёба сочетается с живым общением и новыми открытиями — мы всегда рядом!
Узнать больше
#реклама 16+
s.salebot.pro
О рекламодателе
| 2 | Атрибут dir
Читать 👨💻
#html | #теория | 152 |
| 3 |  Дачная дача в Т-Банк Шопе
Футболки с огурцами, тыквами, капустой и другие крутые штуки, да еще и с финансовыми пожеланиями. Надо брать.
Посмотреть каталог
#реклама
tbank.ru
О рекламодателе | 1 |
| 4 | Выспался, собрал чат-бота в течения дня → заработал 27 000₽
Это не развод, а обычный день работы, тех. спеца:
Взял схему от заказчика → собрал бота по шаблону → отдал клиенту → получил деньги👌
Работы — 2–4 часа.
Оплата — 20–50 000₽ за проект.
✅ Не надо рано вставать и ехать на "любимую работу"
✅ Никакого долгого обучения или знаний программирования
✅ Если умеешь пользоваться браузером, то легко справишься
И спрос на это сейчас огромный, заказов куча.
Бизнесу нужны ИИ, чат-боты и автоматизация уже сегодня.
Это одна из самых быстрорастущих ниш 2026 года, просто заходи и бери заказы.
Инструкции здесь, открой пока доступна:
👉 https://t.me/Alekseicoach_bot?start=testdrivetg49
Если ты хочешь реально хорошо зарабатывать, от 150к в месяц без начальников, нужно решать важные задачи бизнесов.
Сейчас это задачи по сборке ботов на конструкторах (да, у тебя по-любому получится).
Пробуй 👇
https://t.me/Alekseicoach_bot?start=testdrivetg49 | 179 |
| 5 |  Квартиры. Петербург. Колпино. Новостройка. Скидки до 20%
Жилой комплекс "Квартал Заречье"
Санкт-Петербург. Колпино.
4 девятиэтажных жилых корпуса
8-этажный крытый гараж на 496 парковочных мест
В живописном месте у реки Ижора.
На первых этажах будут размещены магазины, кофейни, поликлиника и зона коворкинга.
Перейти на сайт
Финансовые услуги оказывает: ПАО «Сбербанк». Проектная декларация на сайте https://наш.дом.рф/. Застройщик: ООО «СЗ «ЗАГОРОДНАЯ, 71».
#реклама
квартал-заречье.рф
О рекламодателе | 153 |
| 6 |  Как сделать круговой текст?
Попробуем реализовать эту задачу при помощи svg.
Формат SVG поддерживает отображение текста вдоль любого пути, в том числе и дуги окружности. Легче всего поместить текст в элемент textPath внутри элемента text, который ссылается на элемент path, определяющий форму пути.
<svg class="circle-text" viewBox="0 0 100 100">
<path id="circle-text" d="M 0,50 a 50,50 0 1,1 0,1 z" />
<text>
<textPath xlink:href="#circle-text">
Круговой текст
</textPath>
</text>
</svg>
Добавляем стили, цвет текста в данном случае будет задаваться через свойство fill:
.circle-text {
display: block;
overflow: visible;
width: 100px;
font-size: 28px;
fill: red;
}
.circle-text path {
fill: none;
}
#полезности | 207 |
| 7 |  Решайте задачи и готовьтесь к техсекции на стажировку
А ты сможешь решить алгоритмическую задачу за час и без подсказок?
Яндекс проводит бесплатные тренировки по алгоритмам для тех, кто хочет систематизировать знания, прокачать решение задач и подготовиться к техническому собеседованию.
-Короткие видеоуроки
-Практические задачи
-Регулярные соревнования
-Решение задач на время
-Рейтинг и награды
-Возможность получить сертификат
Мы тренируем не только знание алгоритмов, но и умение применять их тогда, когда рядом нет подсказок.
Проверь свои алгоритмические навыки и прокачай слабые места.
Регистрируйся на бесплатные тренировки!
Записаться онлайн
#реклама 16+
yandex.ru
О рекламодателе | 210 |
| 8 |  Тег <map>
Тег <map> используется для создания областей с кликабельными ссылками на изображении. Он работает вместе с тегом <area>, который задает области на изображении, и делает их интерактивными.
Как работает <map>?
Задайте картинку с атрибутом usemap, указывающим на имя карты.
Создайте карту с определенными областями, которые станут ссылками:
<img src="image.jpg" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="34,44,270,350" href="page1.html" alt="Прямоугольник">
<area shape="circle" coords="337,300,44" href="page2.html" alt="Круг">
</map>
shape: Определяет форму области (прямоугольник, круг или многоугольник).
coords: Координаты, задающие область клика.
href: Ссылка, которая откроется при клике.
Почему <map> полезен?
Создание интерактивных изображений: Используется для создания сложных карт и схем, где каждая область может вести на отдельную страницу.
Лучший UX: Добавляет удобство для пользователей, которым нужно взаимодействовать с конкретными частями изображения.
#html | #теория | 262 |
| 9 |  Из разработчика в тимлиды: как говорить с людьми
Стать тимлидом — значит научиться говорить с людьми о сложном. Но как сказать разработчику, что код — "не очень", не обидев?
📅 16 сентября в 20:00 Александр Пряхин разберет техники обратной связи без эскалации. Узнаете, как формулировать по фактам, снижать защитную реакцию и завершать разговор договоренностями. Для разработчиков, готовящихся к лидерству.
Узнать больше
#реклама 16+
otus.ru
О рекламодателе | 232 |
| 10 |  Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Vue Vapor
2. Преимущества и недостатки CSS-in-JS
3. Макет для тренировки (keychap)
Лучшие фронтенд вакансии @job_webdev:
1. vue.js разработчик
2. Frontend-разработчик
3. frontend разработчик ai-продуктов
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Web-дизайнер
3. ux/ui дизайнер для цифрового продукта
#лучшеезанеделю | 257 |
| 11 |  +5Регистрируйтесь на Yandex Scale 2026
Главная конференция Yandex Cloud.
Узнайте о сервисах, которые меняют ваш бизнес.
4 офлайн-трека (AI, Infra + DevTools, Data, Security), онлайн-трек Deep Tech, воркшопы по ИИ и интерактивы. Подробнее о программе читайте в карточках🗒
📅24 сентября
🚗Москва + 💻онлайн
Участие бесплатное!
Зарегистрироваться
#реклама 16+
scale.yandex.cloud
О рекламодателе | 195 |
| 12 |  Задача на JavaScript:
У вас есть массив чисел, представляющих высоты столбов. Вам нужно найти максимальную площадь, которую можно охватить, выбрав два столба и протянув между ними горизонтальную линию.
Напишите функцию findMaxArea, которая принимает массив heights в качестве аргумента и возвращает максимальную площадь.
Примеры:
findMaxArea([1, 8, 6, 2, 5, 4, 8, 3, 7]); // Возвращает 49
findMaxArea([4, 3, 2, 1, 4]); // Возвращает 16
findMaxArea([1, 2, 1]); // Возвращает 2
В этой задаче вы должны реализовать алгоритм с наилучшей временной сложностью.
#домашка | 262 |
| 13 |  Бесплатный курс по дизайну в FIGMA от Yudaev School
Онлайн-программа с наставником и чатом.
Внимание! 80% практики.
✅По результату обучения у вас будет портфолио из нескольких работ.
✅Сертификат о прохождении курса.
✅Возможность пройти полное обучение и получить карьерное сопровождение!
Учитесь дизайну у профессионалов в Yudaev Shool.
Переходи по кнопки: "Подробнее" и начинай свое обучение.
Доступ 0 руб.
Узнать больше
#реклама 16+
yudaevschool24.online
О рекламодателе | 185 |
| 14 |  Макет для тренировки (keychap)
Перейти к макету 🧑💻
#практика | #макет | 292 |
| 15 |  Что читают ИТ-директора и ведущие инженеры сегодня?
Если ваша работа связана с инфраструктурой, базами данных,
импортозамещением или эксплуатацией корпоративных систем, времени на бесполезный контент просто нет.
«Онланта ТехЛаб» — это канал, где публикуют только то, что действительно пригодится в работе. Здесь разбирают новые отечественные продукты, сравнивают технологии, анализируют архитектурные решения, делятся результатами тестов. Реальные сценарии использования, ограничения платформ и практические рекомендации.
Регулярно выходят обзоры, интервью с разработчиками, новости рынка и материалы по PostgreSQL, Kubernetes, виртуализации, облакам и AI.
Если хотите быть в курсе технологий и принимать решения, опираясь на опыт практиков, этот канал точно заслуживает места в вашей ленте.
Подписаться
#реклама 16+
О рекламодателе | 171 |
| 16 | Адаптивный дашборд на react и tailwind
Смотреть на codepen 👨💻
#практика | 332 |
| 17 | Дачная дача в Т-Банк Шопе
Футболки с огурцами, тыквами, капустой и другие крутые штуки, да еще и с финансовыми пожеланиями. Надо брать.
Посмотреть каталог
#реклама
tbank.ru
О рекламодателе | 192 |
| 18 |  Преимущества и недостатки CSS-in-JS
Читать 👨💻
#полености | 419 |
| 19 |  Здесь делают hh.ru. И показывают, как именно.
Узнавайте первыми о митапах, подсматривайте, как принимаются продуктовые решения, и знакомьтесь с людьми, которые создают hh.ru.
Подписаться
#реклама
О рекламодателе | 227 |
| 20 | Vue Vapor
Если коротко: это новый стратегический режим компиляции, который полностью отказывается от Virtual DOM (VDOM) в пользу прямого манипулирования реальным DOM.
В чём суть?
Сейчас Vue 3 использует Virtual DOM: при изменении состояния создаётся новое виртуальное дерево, сравнивается со старым (diffing), и только потом изменения вносятся в реальный DOM. Это работает быстро, но не бесплатно с точки зрения памяти и CPU.
Vapor Mode берет вдохновение у Svelte и SolidJS. Он компилирует ваши шаблоны в чистый JavaScript, который при изменении состояния обновляет только конкретные узлы DOM напрямую, используя существующую систему реактивности (Signals / Reactivity API).
Главные преимущества
* Нулевой оверхед на VDOM: Нет этапа comparison/diffing виртуальных деревьев.
* Меньше памяти: Не нужно держать в памяти структуры виртуальных узлов.
* Микроскопический бандл: Если ваш проект полностью written/compiled в Vapor Mode, базовый runtime Vue становится катастрофически мал (не нужно тащить сам VDOM-движок).
* Молниеносный Performance: Особенно заметно на слабых устройствах и при работе с огромными списками/таблицами.
Как это выглядит в коде?
С точки зрения синтаксиса .vue файлов ничего не меняется. Вы пишете тот же <script setup> и тот же Composition API.
Разница происходит на этапе сборки. Включить Vapor Mode можно будет как на уровне отдельных компонентов (через суффикс, например, `.vapor.vue`), так и для всего приложения целиком.
<!-- Ваш привычный код будет компилироваться в прямой DOM-manipulation -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<button @click="count++">Count: {{ count }}</button>
</template>
Бесшовный переход
Один из главных плюсов концепции — постепенная интеграция (Opt-in). Вам не придётся переписывать всё приложение сразу:
* Vapor-компоненты смогут работать внутри обычных VDOM-компонентов.
* Обычные VDOM-компоненты можно будет вставлять в Vapor-дерево.
Когда ждать и стоит ли переходить?
Vapor Mode всё ещё находится в активной разработке. Это не замена текущему Vue 3, а альтернативная стратегия компиляции для случаев, когда критически важна максимальная производительность.
Если вы делаете стандартные SPA/dashboard текущего VDOM Vue 3 хватает с запасом. Но для высоконагруженных UI, мобильных webview и приложений с жесткими требованиями к перформансу Vapor станет мощнейшим бустом.
#полезнаястатья | 395 |
