Вёрстка сайтов | HTML, CSS, JS
Kanalga Telegram’da o‘tish
👋 Привет, друг! В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду. Присоединяйся и начинай учиться! Связь: @Tigran1963
Ko'proq ko'rsatish
4 473
Obunachilar
-224 soatlar
-87 kun
-2730 kun
Ma'lumotlar yuklanmoqda
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Noyabr '26Noy '26
Noyabr '26
+9
0 kanalda
Oktabr '26
+43
2 kanalda
Get PRO
Sentabr '26
+73
10 kanalda
Get PRO
Avgust '26
+47
2 kanalda
Get PRO
Iyul '26
+39
2 kanalda
Get PRO
Iyun '26
+81
5 kanalda
Get PRO
May '26
+75
2 kanalda
Get PRO
Aprel '26
+93
7 kanalda
Get PRO
Mart '26
+83
3 kanalda
Get PRO
Fevral '26
+54
2 kanalda
Get PRO
Yanvar '26
+85
3 kanalda
Get PRO
Dekabr '25
+45
3 kanalda
Get PRO
Noyabr '25
+72
5 kanalda
Get PRO
Oktabr '25
+48
7 kanalda
Get PRO
Sentabr '25
+126
5 kanalda
Get PRO
Avgust '25
+74
8 kanalda
Get PRO
Iyul '25
+75
7 kanalda
Get PRO
Iyun '25
+49
2 kanalda
Get PRO
May '25
+73
10 kanalda
Get PRO
Aprel '25
+81
4 kanalda
Get PRO
Mart '25
+177
8 kanalda
Get PRO
Fevral '25
+176
10 kanalda
Get PRO
Yanvar '25
+155
6 kanalda
Get PRO
Dekabr '24
+91
9 kanalda
Get PRO
Noyabr '24
+119
9 kanalda
Get PRO
Oktabr '24
+224
8 kanalda
Get PRO
Sentabr '24
+222
10 kanalda
Get PRO
Avgust '24
+115
9 kanalda
Get PRO
Iyul '24
+153
4 kanalda
Get PRO
Iyun '24
+98
3 kanalda
Get PRO
May '24
+115
5 kanalda
Get PRO
Aprel '24
+126
4 kanalda
Get PRO
Mart '24
+110
3 kanalda
Get PRO
Fevral '24
+133
6 kanalda
Get PRO
Yanvar '24
+243
3 kanalda
Get PRO
Dekabr '23
+231
6 kanalda
Get PRO
Noyabr '23
+165
4 kanalda
Get PRO
Oktabr '23
+160
5 kanalda
Get PRO
Sentabr '23
+166
0 kanalda
Get PRO
Avgust '23
+221
0 kanalda
Get PRO
Iyul '23
+274
0 kanalda
Get PRO
Iyun '23
+137
0 kanalda
Get PRO
May '23
+143
0 kanalda
Get PRO
Aprel '23
+219
0 kanalda
Get PRO
Mart '23
+251
0 kanalda
Get PRO
Fevral '23
+415
0 kanalda
Get PRO
Yanvar '23
+265
0 kanalda
Get PRO
Dekabr '22
+193
0 kanalda
Get PRO
Noyabr '22
+229
0 kanalda
Get PRO
Oktabr '22
+681
0 kanalda
Get PRO
Sentabr '22
+216
0 kanalda
Get PRO
Avgust '22
+2 368
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 07 Noyabr | +1 | |||
| 06 Noyabr | +1 | |||
| 05 Noyabr | 0 | |||
| 04 Noyabr | +2 | |||
| 03 Noyabr | +2 | |||
| 02 Noyabr | +3 | |||
| 01 Noyabr | 0 |
Kanal postlari
Что не так с этими iPhone?
С телефонами — ничего! Небольшие повреждения есть только на упаковке, поэтому новые оригинальные iPhone можно приобрести по специальной цене.
iPhone 17 Pro Max — от 35 000 ₽
iPhone 17 Air — от 29 000 ₽
iPhone 16 Pro — от 27 000 ₽
Все устройства новые и запечатанные. Количество ограничено.
Посмотрите доступные модели и актуальные цены в нашем Telegram-канале!
Получить предложение
#реклама
О рекламодателе
| 2 |  Макет для тренировки (мойфрахт)
Перейти к макету 🧑💻
#практика | #макет | 156 |
| 3 |  Простой паралакс при скролле
Посмотреть на codepen👨💻
#практика | 215 |
| 4 | ResizeObserver
Читать 👨💻
#полезности | 246 |
| 5 | Почему fetch() не считает 404 ошибкой?
Представим, что мы отправляем запрос на сервер:
try {
const response = await fetch("/api/users");
const users = await response.json();
console.log(users);
} catch (error) {
console.error("Ошибка запроса:", error);
}
Кажется, всё правильно: отправили запрос, получили данные, обработали ошибку.
Но что произойдёт, если сервер вернёт 404 или 500?
Ничего. `catch` не выполнится.
Дело в том, что fetch() отклоняет Promise не при любом неуспешном HTTP-статусе, а при сетевых ошибках, прерывании запроса и некоторых других сбоях.
Ответы 404, 403 и 500 считаются успешно полученными HTTP-ответами.
Как правильно обрабатывать ошибки?
Для этого у объекта Response есть свойство ok:
try {
const response = await fetch("/api/users");
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
const users = await response.json();
console.log(users);
} catch (error) {
console.error(error);
}
response.ok возвращает true, если HTTP-статус находится в диапазоне от 200 до 299.
А ещё у fetch() нет таймаута по умолчанию
Если сервер долго не отвечает, запрос может ждать гораздо дольше, чем хотелось бы.
Можно использовать AbortSignal.timeout():
const response = await fetch("/api/users", {
signal: AbortSignal.timeout(5000),
});
Теперь запрос будет автоматически прерван примерно через 5 секунд, если не завершится раньше.
И ещё один нюанс
fetch() не отправляет cookies при кросс-доменных запросах по умолчанию.
Если сервер использует авторизацию через cookies, может понадобиться:
fetch("https://api.example.com/users", {
credentials: "include",
});
При этом сервер должен разрешать запросы с учётными данными через CORS, а сами cookies должны соответствовать ограничениям браузера.
Итог
fetch() кажется простым API, но у него есть особенности, которые важно учитывать:
- HTTP-ошибки не вызывают автоматический reject.
- Таймаут нужно задавать самостоятельно.
- Передача cookies зависит от credentials, CORS и настроек самих cookies.
Именно из таких мелочей складывается надёжная работа с API на фронтенде. | 253 |
| 6 | Почему JavaScript Date такой странный?
Казалось бы, что может быть проще работы с датами? Но в JavaScript даже здесь есть свои подводные камни.
1. Месяцы начинаются с нуля
new Date(2026, 0, 1) // 1 января
new Date(2026, 11, 1) // 1 декабря
Да, январь это 0, а декабрь это 11. При этом дни месяца начинаются с 1.
2. Несуществующие даты автоматически исправляются
new Date(2026, 1, 30)
// 2 марта 2026
В феврале 2026 года всего 28 дней, но вместо ошибки JavaScript просто переносит лишние дни на следующий месяц.
И это работает в обратную сторону:
new Date(2026, 2, 0)
// 28 февраля 2026
Нулевой день марта превращается в последний день февраля.
3. Одинаковые на вид даты могут означать разное
new Date("2026-01-01")
new Date("2026-01-01T00:00:00")
Первая строка интерпретируется как полночь по UTC, а вторая как полночь по локальному времени.
Из-за этого результат может отличаться в зависимости от часового пояса пользователя.
4. Сравнение дат работает не совсем очевидно
const a = new Date("2026-01-01");
const b = new Date("2026-01-01");
console.log(a === b); // false
console.log(a.getTime() === b.getTime()); // true
Date является объектом, поэтому === сравнивает ссылки, а не значения дат.
5. Date хранит не дату
Внутри объект Date хранит количество миллисекунд, прошедших с 1 января 1970 года, 00:00:00 UTC.
new Date(0).toISOString()
// "1970-01-01T00:00:00.000Z"
Часовой пояс не хранится внутри объекта. Он учитывается при отображении даты локальными методами.
Итог
Date выглядит простым API, но его поведение легко приводит к ошибкам, особенно при работе с часовыми поясами, пользовательским вводом и сравнением дат.
Поэтому при работе с датами важно понимать, что именно хранится, как дата создаётся и в каком часовом поясе интерпретируется. | 255 |
| 7 | ![Ловушки Python, SQL и Git с кодом и разбором Почему round(2.5) в Python даёт 2, а cart=[] в аргументе функции помнит прошлые](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fn3.tlmtr.cc%2Fp%2F_YfVVfP6vnV-ySocXsR1kyLtzI2bbjHzsdMy2XWdPK5Y%3Fty%3Dx&w=64&q=75){kind=small} Ловушки Python, SQL и Git с кодом и разбором
Почему round(2.5) в Python даёт 2, а cart=[] в аргументе функции помнит прошлые вызовы? И почему один NULL в подзапросе превращает NOT IN в пустой результат?
В канале Koddo — короткие разборы таких ловушек в Python, SQL, JavaScript, Linux и Git. В каждом посте код с выводом, объяснение и ссылка на полный разбор в справочнике koddo.ru.
Подписывайся, чтобы встречать их в ленте, а не на собеседовании.
Подписаться
#реклама 16+
О рекламодателе | 1 |
| 8 |  Зарабатывайте на установках Яндекс Браузера
Партнёрская программа для сервисных центров, магазинов компьютерной техники, сайтов для скачивания файлов и авторов статей.
Вы можете предлагать его своим клиентам и аудитории — и зарабатывать на новых установках.
Выплаты до 500₽ за каждую установку Яндекс Браузера.
Подать заявку
#реклама 0+
partner.browser.yandex.ru
О рекламодателе | 29 |
| 9 |  Яндекс Музыка до 360 дней бесплатно
Яндекс Музыка для вас и 3-х ваших близких.
Кинопоиск и Яндекс Книги тоже в мультиподписке Плюс.
Попробуйте бесплатно❤️
Слушать
#реклама 18+
music.yandex.ru
О рекламодателе | 149 |
| 10 |  Макет для тренировки (e2b)
Перейти к макету 🧑💻
#практика | #макет | 362 |
| 11 |  Пятница, 17:30. Макет почти готов
Но один сценарий всё ещё вызывает вопросы. Обсудить сейчас или вернуться в понедельник?
Решайте вместе с командой hh.ru в «Охэхэнных новостях».
Подписаться
#реклама
О рекламодателе | 217 |
| 12 | Изучаем Классы в JavaScript: Основы и Применение
Читать 👨💻
#js | #теория | 425 |
| 13 |  Монолит vs микросервисы: битва за ваши нервы
💻 Монолит или микросервисы? Кажется, что ответ очевиден, но почему-то одни проекты летают, а другие тонут в хаосе?
Присоединяйтесь к открытому уроку Сергея Прощаева и получите пошаговое руководство по выбору архитектуры.
📅 9 ноября в 20:00. Разберём:
- Как не попасть в ловушку «модных» микросервисов.
- Признаки, что пора выходить из монолита.
- Архитектурные паттерны перехода: Strangler Fig, BFF, Self-contained systems.
- Организационные и технические риски — что пойдёт не так.
- Роль DevOps, CI/CD и мониторинга.
Вы научитесь оценивать реальные риски и стоимость микросервисов, внедрять изменения без сбоев и хаоса и принимать взвешенные решения, сохраняя технический контроль и производительность команды.
✅ Запишитесь сейчас!
Узнать больше
#реклама 16+
otus.ru
О рекламодателе | 221 |
| 14 |  Основы событий мыши
Читать 👨💻
#js | #теория | 411 |
| 15 |  Grid Attack - игра для изучения css grid
Перейти на сайт 👨💻
#полезности | 428 |
| 16 |  Хотите разобраться, как создаются Telegram-боты?
Telegram-бот кажется простым для пользователя, но как он получает сообщение и решает, что ответить?
На открытом уроке разберём этот процесс на практике. Преподаватель в режиме лайвкодинга создаст бота на Python с библиотекой aiogram — от первого запуска до рабочего диалога с кнопками.
Вы узнаете, как получить токен, обрабатывать команды и сообщения, добавлять кнопки и ответы на действия пользователя.
В конце проверите работу готового бота прямо в Telegram. Урок подойдёт начинающим Python-разработчикам. 10 ноября в 20:00 МСК.
Зарегистрироваться
#реклама 16+
otus.ru
О рекламодателе | 222 |
| 17 | Как использовать css @property
Читать 👨💻
#css | #полезности | 433 |
| 18 | 🎁 Розыгрыш 3 плагинов для WordPress
Разработчик плагинов APEX SHOP дарит три ключа — каждый победитель выбирает любой плагин:
⚡️ Apex Optimizer — ускорение, SEO и защита сайта
🎯 Custom Popup — попапы, которые не бесят
🤖 DeepPress AI — SEO-статьи с ИИ
Лицензия на 1 год с обновлениями и поддержкой.
Условия простые: подписаться и написать в комментариях, какой у вас сайт на WP.
Всем участникам — скидка 20%.
👉 Участвовать: https://t.me/+zvQ3EcnBVhtiMjcx
Итоги — 1 ноября в 12:00 МСК | 254 |
| 19 |  Подборка лучших постов за прошлую неделю
Лучшие статьи @free_html_lessons:
1. Атрибут inert
2. AVIF или WebP?
3. Как сделать стилизацию скролла?
Лучшие фронтенд вакансии @job_webdev:
1. Frontend-разработчик (Vue 3 / Nuxt), Middle в IT-компанию
2. Frontend developer for a digital platform
3. frontend-разработчик CRM-систем
Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UX/UI-дизайнер цифровых продуктов
3. Дизайнер интерфейсов UI/UX для мобильных проектов
#лучшеезанеделю | 414 |
| 20 |  JS Задача: Редактор разметки текстов
Описание:
Чтобы упростить жизнь контент-менеджеру сайта, сделали простую CMS, в которой тексты статей набираются в кастомной разметке.
Набор операторов ограничен:
• Заголовки
• Неупорядоченные списки одного уровня вложенности
• Абзацы — Ссылки
Необходимо написать тело преобразующей функции
module.exports = (str) => {
// Ваш код здесь
};
Формат ввода
= head
text ((https://ya.ru link)) text.
* item
* item
Формат вывода
<h1>head</h1><p>text <a href="https://ya.ru">link</a> text.</p><ul><li>item</li><li>item</li></ul>
Примечание
Незначимые пробелы и переносы строк на выходе не имеют значения, т.к. в тестах html приводится к одной строке, а лишние пробелы удаляются;
Одинарные кавычки в тесте приводятся к двойным;
Формат заголовка (Начало строки, знак равно, пробел, текст заголовка, конец строки);
Формат абзаца (Начало строки, текст абзаца, конец строки);
Формат списка (Пункт списка, повторенный один и более раз: Начало строки, звёздочка, пробел, текст, конец строки. До и после списка пустые строки);
Формат ссылки (Две открывающие скобки, адрес ссылки, первый пробел, текст ссылки с любым кол-вом пробелов, две закрывающие скобки)
Задача из coderun.yandex.ru
#домашка | 384 |
