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

Задача: Умная виртуализация списка с переменной высотой:

Контекст
Есть длинный список карточек (чат, лента, лог событий).
Карточки имеют динамическую высоту (зависит от текста, картинок, раскрытых блоков).

Условие
Реализовать функцию, которая по:
- текущему scrollTop
- высоте контейнера viewportHeight
- массиву элементов, где высота известна только после рендера

возвращает:
- диапазон индексов элементов, которые нужно отрендерить
- корректный padding-top и padding-bottom, чтобы скролл не «прыгал»

Ограничения
- Нельзя рендерить все элементы
- Высоты элементов могут меняться после первого рендера
- Скролл должен оставаться плавным

#домашка

Макет для тренировки (kuzovkin)

Перейти к макету 🧑‍💻

#практика | #макет

Почему 100vh ломает мобильную вёрстку

height: 100vh ≠ высота экрана на мобильных.

Проблема:
• мобильный браузер скрывает и показывает адресную строку
• 100vh считается от полной высоты, включая UI браузера
• в итоге контент либо обрезается, либо появляется лишний скролл

Правильное решение в 2026:
.main {
min-height: 100dvh;
}

Единицы:
• vh — старая логика
• svh — малая высота
• lvh — большая высота
• dvh — динамическая, то что нужно почти всегда

Step indicator

Посмотреть на codepen👨‍💻

#практика

Почему position: sticky ломается и как это чинить

position: sticky кажется простым, но в реальных проектах часто “не работает”. Почти всегда причина одна из этих.

1. У родителя есть overflow: hidden / auto / scroll
Sticky работает относительно ближайшего скролл-контейнера. Если у родителя overflow не visible, элемент перестаёт быть sticky.

2. Не задано смещение (top, bottom)
Без top: 0 (или другого значения) sticky не активируется вообще.

3. Родитель слишком маленький
Sticky элемент не может выйти за пределы родителя. Если высота контейнера меньше высоты sticky-элемента, эффекта не будет.

4. transform у родителя
transform, filter, perspective создают новый контекст. Sticky внутри такого блока часто ломается.

Мини-чеклист, если sticky не работает:
- есть ли top
- нет ли overflow у родителей
- нет ли transform
- хватает ли высоты контейнера

#полезности

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Web workers
2. Что такое CORS
3. Задача на JavaScript

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. Front End Developer (React+HTML, Middle\Middle+)
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UX/UI дизайнер
3. Графический дизайнер

#лучшеезанеделю

Задача на 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

В этой задаче вы должны реализовать алгоритм с наилучшей временной сложностью.

#домашка

Макет для тренировки (nosis health)

Перейти к макету 🧑‍💻

#практика | #макет

Что такое CORS

Читать👨‍💻

#полезности

CSS трюки и хаки

Читать 👨‍💻

#css | #полезности

Web workers

Читать статью 👨‍💻

#js | #полезности

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Макет для тренировки
2. Критерии качественной верстки
3. Атрибут poster

Лучшие фронтенд вакансии @job_webdev:
1. Frontend разработчик
2. Верстальщик (Frontend)
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. UX/UI дизайнер
3. Web Designer

#лучшеезанеделю

Задача: Реализация функции debounce

Вам нужно написать функцию debounce, которая принимает в качестве аргумента другую функцию и время задержки (в миллисекундах). Функция debounce должна возвращать новую функцию, которая вызывает исходную функцию только после того, как прошло указанное время с момента последнего вызова. Если в течение этого времени функция вызывается снова, то таймер должен быть сброшен, и ожидание начнется заново.

Пример использования:

function sayHello() {
  console.log('Hello!');
}
const debounceSayHello = debounce(sayHello, 1000);
debounceSayHello(); // Вызовется сразу
debounceSayHello(); // Не вызовется
// Через 1000 мс
// Вывод: Hello!

Дополнительные требования:
Функция debounce должна быть универсальной и работать с любым количеством и типом аргументов.
Результат вызова функции debounce должен быть функцией.
Если функция debounce вызывается с аргументами, они должны быть переданы исходной функции при вызове.
Такая задача проверяет понимание асинхронности и обработки событий в JavaScript, а также умение создавать и использовать замыкания.

#домашка

Макет для тренировки (venusmed)

Перейти к макету 🧑‍💻

#практика | #макет

Дорогие друзья, поздравляю вас с наступающим Новым годом! 🎄

Пусть 2026 год принесёт мир, здоровье и спокойствие. Хочу верить, что он будет лучше прошедшего, а все цели станут чуть ближе, а желания начнут сбываться. Пусть будет больше поводов для радости и уверенности в завтрашнем дне. Будьте счастливы. С Новым годом!

Атрибут poster

Читать 👨‍💻

#html | #теория

Критерии качественной верстки

Читать 👨‍💻

#полезности

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Исследование про доступность
2. Атрибут accept
3. Атрибуты hreflang и alternate

Лучшие фронтенд вакансии @job_webdev:
1. React Developer
2. HTML-верстальщик
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Продуктовый UX/UI дизайнер.
3. Web Designer

#лучшеезанеделю

Расписание встреч (интервалы)

Даны:
- Рабочие интервалы двух людей, например:
A = [['09:00','11:30'], ['13:00','16:00']]
B = [[ '10:00','12:00'], ['14:30','18:00']]
- Длительность встречи в минутах, например 45.

Нужно написать функцию, которая найдёт все возможные интервалы времени, подходящие обоим, где можно вставить встречу указанной длительности.

Идеи:
- Перевести время в минуты.
- Найти пересечение интервалов A и B.
- Отфильтровать те пересечения, чья длина меньше требуемой.

#домашка

Макет для тренировки (alfa house)

Перейти к макету 🧑‍💻

#практика | #макет