Вёрстка сайтов | HTML, CSS, JS
Відкрити в Telegram
👋 Привет, друг! В этом канале я выкладываю структурированные, обучающие уроки и материалы по вёрстке сайтов и фронтенду. Присоединяйся и начинай учиться! Связь: @Tigran1963
Показати більше
4 473
Підписники
-224 години
-87 днів
-2730 днів
Завантажуємо дані
Схожі канали
Хмара тегів
Вхідні та вихідні згадування
---
---
---
---
---
---
Залучення підписників
листопад '26лист '26
листопад '26
+9
в 0 каналах
жовтень '26
+43
в 2 каналах
Get PRO
вересень '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 каналах
| Дата | Залучення підписників | Згадування | Канали | |
| 07 листопада | +1 | |||
| 06 листопада | +1 | |||
| 05 листопада | 0 | |||
| 04 листопада | +2 | |||
| 03 листопада | +2 | |||
| 02 листопада | +3 | |||
| 01 листопада | 0 |
Дописи каналу
Что не так с этими 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 |
