Вёрстка сайтов | 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/fa/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/fa/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 |
