fa
Feedback

فریب کلاهبرداران را نخورید! تل‌متریو این کانال‌ها را شناسایی و برچسب‌گذاری می‌کند 👉 برای مشاهده برچسب، اشتراک تهیه کنید

Вёрстка сайтов | HTML, CSS, JS

Вёрстка сайтов | HTML, CSS, JS

رفتن به کانال در Telegram

👋 Привет, друг! В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду. Присоединяйся и начинай учиться! Связь: @Tigran1963

نمایش بیشتر
4 498
مشترکین
+124 ساعت
+17 روز
-2530 روز
جذب مشترکین
اکتبر '26
اکتبر '26
+30
در 2 کانال‌ها
سپتامبر '26
+73
در 10 کانال‌ها
Get PRO
اوت '26
+47
در 2 کانال‌ها
Get PRO
ژوئیه '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 کانال‌ها
تاریخ
رشد مشترکین
اشارات
کانال‌ها
17 اکتبر+1
16 اکتبر+5
15 اکتبر+2
14 اکتبر0
13 اکتبر+2
12 اکتبر+2
11 اکتبر+3
10 اکتبر0
09 اکتبر+4
08 اکتبر+1
07 اکتبر+1
06 اکتبر+1
05 اکتبر+1
04 اکتبر0
03 اکتبر+3
02 اکتبر0
01 اکتبر+4
پست‌های کانال
JS Задача: Объедините два массива по ID Описание: Учитывая два массива arr1 и arr2, верните новый массив joinedArray. Все объ
JS Задача: Объедините два массива по ID Описание: Учитывая два массива arr1 и arr2, верните новый массив joinedArray. Все объекты в каждом из двух входных массивов будут содержать поле id, которое имеет целочисленное значение. joinedArray - это массив, сформированный путем объединения arr1 и arr2 на основе их идентификационного ключа. Длина joinedArray должна быть равна длине уникальных значений id. Возвращаемый массив должен быть отсортирован в порядке возрастания на основе идентификационного ключа. Если данный идентификатор существует в одном массиве, но не в другом, то единственный объект с таким идентификатором должен быть включен в результирующий массив без изменений. Если два объекта имеют общий идентификатор, их свойства должны быть объединены в один объект: Если ключ существует только в одном объекте, эта единственная пара ключ-значение должна быть включена в объект. Если ключ включен в оба объекта, значение в объекте из arr2 должно переопределять значение из arr1. Пример:
Input: 
arr1 = [
    {"id": 1, "x": 1},
    {"id": 2, "x": 9}
], 
arr2 = [
    {"id": 3, "x": 5}
]
Output: 
[
    {"id": 1, "x": 1},
    {"id": 2, "x": 9},
    {"id": 3, "x": 5}
]
#домашка

2
«Там поправить на пять минут»: почему правка на сданном сайте съедает вечер Сайт сдан, а заказчик пишет: смените телефон, форма не доходит, страница грузится вечность. На деле это доступ к хостингу, поиск по шаблонам, кэш и проверка, что вёрстка не поехала. Что исправить, нейронка распишет за минуту, но в админку и файлы сама не полезет. Мы сделали ИИ-агента, который правит сайт сам: заходит в админку, шаблоны и файлы и вносит изменения, а не присылает ещё одно ТЗ. Он живёт в вашем браузере и работает под вашими доступами. Задачу можно наговорить голосовым, как коллеге: агент сделает её после вашего «да» и пришлёт «было — стало». Вот что агент уже сделал на сайтах довольных клиентов. 1. Окна, 1С-Битрикс. Сайт тормозил из-за старого виджета. После правки агента страница грузится в 20 раз быстрее, а форма заявки отвечает в 400 с лишним раз быстрее. 2. Магазин кирпича. Агент сам перенёс сайт: 403 страницы и 217 переадресаций. За месяц страниц в поиске Яндекса стало на 52% больше, показы выросли на 79%. 3. Панорамное остекление. Нашёл картинки без подписей на 149 страницах и поправил шаблон. Переходы из поиска за три месяца — плюс 48%. Пока «пятиминутная» правка ждёт свободного вечера, заказчик теряет заявки, а вы — выходные. С агентом правка выходит на сайт в день задачи, а стоит он от 15 000 ₽ в месяц — сайты можно брать на сопровождение и не сидеть над ними ночами. 👉 Запишитесь на демо — покажем на вашем сайте, что агент исправит первым. #реклама О рекламодателе
159
3
К каким элементам можно применить css св-во zoom?
203
4
Бесплатный курс по дизайну в FIGMA от Yudaev School Онлайн-программа с наставником и чатом. Внимание! 80% практики. ✅По резул
Бесплатный курс по дизайну в FIGMA от Yudaev School Онлайн-программа с наставником и чатом. Внимание! 80% практики. ✅По результату обучения у вас будет портфолио из нескольких работ. ✅Сертификат о прохождении курса. ✅Возможность пройти полное обучение и получить карьерное сопровождение! Учитесь дизайну у профессионалов в Yudaev Shool. Переходи по кнопки: "Подробнее" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе
224
5
Макет для тренировки (метры) Перейти к макету 🧑‍💻 #практика | #макет
Макет для тренировки (метры) Перейти к макету 🧑‍💻 #практика | #макет
242
6
Создаём красивую кнопку загрузки с анимацией на CSS Эффектная кнопка загрузки сделает ваш интерфейс более современным и прият
Создаём красивую кнопку загрузки с анимацией на CSS Эффектная кнопка загрузки сделает ваш интерфейс более современным и приятным для пользователя. Вот простой способ её реализации: HTML: <button class="loading-button"> <span class="loading-text">Загрузка...</span> <span class="spinner"></span> </button> .loading-button { position: relative; padding: 10px 20px; font-size: 16px; color: #fff; background: #007bff; border: none; border-radius: 5px; cursor: pointer; overflow: hidden; } .spinner { position: absolute; top: 50%; right: 10px; width: 15px; height: 15px; border: 2px solid transparent; border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; transform: translateY(-50%); } @keyframes spin { 0% { transform: rotate(0deg) translateY(-50%); } 100% { transform: rotate(360deg) translateY(-50%); } } Теперь у вашей кнопки есть анимация загрузки, которая мгновенно привлекает внимание. #какэтосделать
310
7
Хотите стать CIO? Узнайте, как ИИ меняет требования Готовитесь к роли CIO и хотите понимать, как ИИ меняет требования к этой
Хотите стать CIO? Узнайте, как ИИ меняет требования Готовитесь к роли CIO и хотите понимать, как ИИ меняет требования к этой позиции? Какие компетенции станут критичными в ближайшие годы? Присоединяйтесь к открытому уроку и узнайте, как ИИ меняет роль CIO. 📅 19 октября в 19:00. Сергей Фегон разберёт: - Как AI меняет роль CIO и требования бизнеса к IT-руководителю. - Как выбирать приоритетные сценарии применения ИИ. - Как оценивать ИИ-инициативы по бизнес-эффекту, стоимости и рискам. - Какие требования ИИ предъявляет к данным и IT-архитектуре. Вы научитесь организовывать переход от экспериментов к промышленному использованию ИИ и говорить с бизнесом на языке результатов. ✅ Запишитесь сейчас и сделайте шаг к роли CIO в эпоху ИИ! Узнать больше #реклама 16+ otus.ru О рекламодателе
191
8
Как использовать псевдокласс :has() для навигации С помощью :has() можно улучшить UX меню. Например, сделать так, чтобы актив
Как использовать псевдокласс :has() для навигации С помощью :has() можно улучшить UX меню. Например, сделать так, чтобы активный раздел подсвечивался, даже если вы находитесь на дочерней странице. HTML: <nav> <ul> <li><a href="/">Главная</a></li> <li> <a href="/blog">Блог</a> <ul> <li><a href="/blog/post1">Пост 1</a></li> <li><a href="/blog/post2">Пост 2</a></li> </ul> </li> </ul> </nav> CSS: nav li:has(a.active) > a { font-weight: bold; color: #007bff; } Если на любой из дочерних страниц будет класс active, родительский пункт меню автоматически подсветится. Это полезно для сложных сайтов. #какэтосделать
287
9
Почувствуйте ритм Дубая с отелями Jumeirah Семейный отдых обретает свой ритм - время для открытий, игр и особенных моментов в
Почувствуйте ритм Дубая с отелями Jumeirah Семейный отдых обретает свой ритм - время для открытий, игр и особенных моментов вместе. Узнать больше #реклама jumeirah.com О рекламодателе
215
10
Как создать адаптивный текстовый градиент Градиенты в тексте — это модный тренд, который можно использовать не только для заг
Как создать адаптивный текстовый градиент Градиенты в тексте — это модный тренд, который можно использовать не только для заголовков, но и для адаптивных интерфейсов. HTML: <h1 class="gradient-text">Смотри, я градиентный!</h1> CSS: .gradient-text { background: linear-gradient(90deg, #ff6ec4, #7873f5, #00d4ff); -webkit-background-clip: text; color: transparent; font-size: clamp(2rem, 5vw, 4rem); } clamp() обеспечивает адаптивный размер текста. linear-gradient() позволяет настроить цвета и направление. #какэтосделать
317
11
Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Атрибут rel="noreferrer" 2. Красивый шаблон для
Подборка лучших постов за прошлую неделю Лучшие статьи @free_html_lessons: 1. Атрибут rel="noreferrer" 2. Красивый шаблон для портфолио 3. Атрибут disabled Лучшие фронтенд вакансии @job_webdev: 1. frontend engineer 2. Fullstack JavaScript разработчик 3. HTML-верстальщик Лучшие дизайн вакансии @job_webdesign: 1. веб дизайнер для сайтов и промо-страниц 2. UX/UI-дизайнер цифровых продуктов Издательства 3. арт-директор автономного транспорта #лучшеезанеделю
337
12
Обучайте команду: 2 курса в подарок — Я.Практикум Расширьте навыки команды без доплат. Получите 3 курса Яндекс Практикума по
Обучайте команду: 2 курса в подарок — Я.Практикум Расширьте навыки команды без доплат. Получите 3 курса Яндекс Практикума по цене 1 Развивайте команду по трём направлениям — платите за одно. Так тоже можно. Оформите обучение в Практикуме для себя или сотрудников до 31 октября и получите бесплатно 2 курса: ✅ «Базовые навыки работы с ИИ» — о том, как применять ИИ в ежедневных рабочих задачах. ✅ «Экономика и бизнес-модель продукта» — о юнит-экономике и способах монетизации продуктов. Подберите обучение под любой запрос: в каталоге Практикума 180+ актуальных программ по ИИ, разработке, менеджменту, аналитике и другим направлениям. С нами уже сотрудничают 6000+ компаний. Начните и вы развивать команду с фокусом на бизнес-результат. Оставить заявку и получить бонусы Узнать больше #реклама 16+ practicum.yandex.ru О рекламодателе
342
13
Макет для тренировки (florist man) Перейти к макету 🧑‍💻 #практика | #макет
Макет для тренировки (florist man) Перейти к макету 🧑‍💻 #практика | #макет
321
14
Атрибут disabled С помощью атрибута disabled можно отключать интерактивные элементы форм. Пока этот атрибут есть, с элементом нельзя будет взаимодействовать. Это булевый атрибут. Само его наличие говорит браузеру, что элемент нужно отключить. Может применяться к следующим элементам формы: button, input, option, select, textarea, optgroup, filedset Атрибут disabled делает элемент неактивным: с ним нельзя взаимодействовать, кликнуть на него, на нём нельзя сфокусироваться, отключённое поле не будет отправлено вместе с остальными полями формы. Атрибут срабатывает не только на самом элементе, но и на всех его потомках. 💡 Элемент с атрибутом disabled можно стилизовать при помощи псевдокласса :disabled. По умолчанию браузер делает их серыми и менее контрастными. #html | #полезности
382
15
Как зарабатываются деньги на удалёнке в IT? Пройти симуляцию настоящего первого заказа, где за 3 дня без опыта ты: - Получишь
Как зарабатываются деньги на удалёнке в IT?   Пройти симуляцию настоящего первого заказа, где за 3 дня без опыта ты:   - Получишь первую задачу от «клиента» стоимостью 10 000 руб. и соберёшь структуру сайта на HTML; - Оформишь внешний вид сайта с помощью CSS по пожеланиям клиента; - Добавишь на страницу интерактивность с JavaScript — нажал → сработало; - Внесёшь финальную правку и сдашь готовый проект; - Оформишь этот проект как кейс в портфолио.   С нас задача, подсказки на каждом шаге и разбор, если что-то не получается. С тебя 20–30 минут в день.   👉 Начать бесплатно   К концу третьего дня у тебя будет не абстрактное «прошёл курс», а готовый проект и понимание, как зарабатываются деньги на удалёнке в IT.
222
16
Красивый шаблон для портфолио Смотреть на codepen 👨‍💻 #какэтосделать
Красивый шаблон для портфолио Смотреть на codepen 👨‍💻 #какэтосделать
412
17
Volkswagen Polo 2021 под ключ 1180000 р. Пробег: 33899 км. Двигатель: 1.5 Бензин. Коробка: Автомат. Привод: Передний. Хороший
Volkswagen Polo 2021 под ключ 1180000 р. Пробег: 33899 км. Двигатель: 1.5 Бензин. Коробка: Автомат. Привод: Передний. Хороший вариант за свои деньги. Больше информации в канале. Узнать больше #реклама О рекламодателе
255
18
Cтартовый шаблон для верстки и js проектов на vite (scss, PostCSS) Ссылка на github 👨‍💻 #полезности
Cтартовый шаблон для верстки и js проектов на vite (scss, PostCSS) Ссылка на github 👨‍💻 #полезности
450
19
Встречай смартфон Honor — с выгодой для себя! ✅ Стильный дизайн ✅ Заряд надолго ✅ Качественные фото ✅ Быстрая и плавная работ
Встречай смартфон Honor — с выгодой для себя! ✅ Стильный дизайн ✅ Заряд надолго ✅ Качественные фото ✅ Быстрая и плавная работа Выбирай свой Honor по привлекательной цене! Купить #реклама market.yandex.ru О рекламодателе
259
20
Атрибут rel="noreferrer" Читать 👨‍💻 #html | #полезности
Атрибут rel="noreferrer" Читать 👨‍💻 #html | #полезности
465