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

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

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

Задача: Сделать кнопку "Добавить в корзину" с эффектом sticky

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

Требования:
- Кнопка должна быть изначально расположена под описанием товара.
- При прокрутке вниз кнопка должна "прилипать" к нижней части окна браузера.
- Кнопка должна занимать всю ширину экрана на мобильных устройствах и быть фиксированной внизу.

Ожидаемый результат:
При скролле вниз кнопка остаётся в нижней части окна браузера.
При возвращении наверх кнопка возвращается на своё место под описанием товара.

#домашка

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

Лучшие статьи @free_html_lessons:
1. Анимация печатания на css
2. Верстка HTML-писем. Часть 1
3. Верстка HTML-писем. Часть 2

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

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

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

Медиа-запрос prefers-reduced-motion

Когда мы создаем анимации и переходы, мы редко задумываемся о людях, которым такие эффекты могут причинять дискомфорт. Однако в операционных системах (Windows, macOS, Linux, iOS, Android) есть настройка "уменьшить движение", которая позволяет пользователям отключить излишние анимации.

В CSS мы можем учитывать это предпочтение с помощью медиа-запроса prefers-reduced-motion.

Как работает prefers-reduced-motion?
Этот медиа-запрос проверяет, включил ли пользователь настройку "уменьшить движение" в своей ОС. Если она включена, браузер применит стили, указанные внутри @media (prefers-reduced-motion: reduce).

Простой пример:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

Что делает этот код?
Убирает все анимации (animation: none).
Отключает плавные переходы (transition: none).
!important гарантирует, что правило переопределит любые другие стили.

Когда это особенно полезно?
Некоторым пользователям анимации могут вызывать дискомфорт или даже головокружение, например:
Людям с вестибулярными расстройствами (motion sickness).
Пользователям, у которых в системе включена опция «уменьшить движение».
Тем, кто просто не любит резкие анимации.

Важно: Этот медиа-запрос не отключает анимации для всех, а лишь адаптирует сайт для пользователей с особыми настройками.

#полезности

Красивая анимация скролла

Смотреть на codepen 🧑‍💻

#практика

Font-palette

Читать 👨‍💻

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

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

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

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

Задача: "Визуализация алгоритма сортировки пузырьком""

Создайте интерактивную визуализацию сортировки пузырьком. Пользователь должен видеть:
Исходный массив в виде столбцов разной высоты
Анимацию сравнения и перестановки элементов
Кнопки "Старт" и "Новый массив"
Требования:
Генерация массива:
При нажатии "Новый массив" генерируется массив из 10 случайных чисел (от 20 до 200)
Числа отображаются как вертикальные столбцы с высотой, пропорциональной значению
Визуализация:
Элементы, которые сравниваются, подсвечиваются разными цветами
Перемещение элементов плавно анимируется (500ms)
Каждый шаг алгоритма должен быть виден
Алгоритм:
Реализуйте сортировку пузырьком
Добавьте задержку между шагами (300-500ms)

#домашка

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

Лучшие статьи @free_html_lessons:
1. Font-palette
2. Как выбрать значение в раскрывающемся списке select с помощью JavaScript?
3. Медиа-запрос prefers-reduced-motion

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

Лучшие дизайн вакансии @job_webdesign:
1. Web дизайнер
2. Web-дизайнер
3. Senior web designer

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

Как не испортить вёрстку на последних этапах?

Ты сделал адаптив, всё работает, но вдруг при финальном тесте — БАЦ! Где-то поехали отступы, кнопка улетела, а текст выходит за границы блока. Знакомо?

Вот 5 частых ошибок, которые ломают вёрстку в последний момент:

1. Непредвиденные размеры контента
Никогда не ориентируйся только на тестовый текст. Добавь длинные заголовки, нестандартные картинки, проверь, как ведёт себя блок с max-content.

2. Игнорирование min-width и min-height
Если задал width: 100%, но контент вдруг исчезает — возможно, ему нужен min-width. Особенно это важно для интерактивных элементов.

3. Неправильное использование overflow
overflow: hidden может скрыть не только баги, но и важный контент. Проверь, нет ли неожиданных обрезаний внутри контейнеров.

4. Отсутствие проверки на разных устройствах
В браузере может быть всё идеально, но стоит открыть сайт на телефоне друга, и дизайн рушится. Проверь несколько размеров экранов + реальную технику.

5. Фиксированные height и width
Если ты жестко задаёшь height: 500px, а текст динамически загружается, рано или поздно он вылезет за границы. Используй min-height и flex-grow.

Как избежать таких проблем?
1. Тестируй контент на реальных данных
2. Проверяй адаптивность через DevTools
3. Открывай сайт на разных устройствах
4. Думай не только о "сейчас", но и о будущем наполнении

#полезнаястатья

Что такое CSS Paint API и зачем оно нужно?

CSS Paint API — это мощный инструмент, который позволяет создавать динамические и программируемые фоны (background) прямо в CSS, без использования изображений. С помощью JavaScript можно нарисовать что угодно и использовать это как фоновый стиль элемента.

Как это работает?
Определяем класс, который будет использовать кастомный фон.
Подключаем CSS Paint API в paintWorklet.
Реализуем свою "рисовалку" на JavaScript.
Пример кода

.my-element {
  background: paint(my-paint);
}

if (CSS && CSS.paintWorklet) {
  CSS.paintWorklet.addModule('paint.js');
}

В файле paint.js:

class MyPaint {
  static get inputProperties() {
    return ['--circle-color'];
  }

  paint(ctx, size, properties) {
    const color = properties.get('--circle-color').toString() || 'blue';
    ctx.fillStyle = color;
    ctx.beginPath();
    ctx.arc(size.width / 2, size.height / 2, 30, 0, 2 * Math.PI);
    ctx.fill();
  }
}

registerPaint('my-paint', MyPaint);
Где это может быть полезно?
Динамические фоны без изображений
Генерация паттернов на лету
Оптимизация графики без перегрузки сети

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

Примеры использования nth-child

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

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

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

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

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

Задача: Проверка на сбалансированные скобки

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

Пример

isBalanced("{[()]}") // true
isBalanced("{[(])}") // false
isBalanced("{[}")    // false

Указания
Функция должна поддерживать три типа скобок: круглые (), квадратные [] и фигурные {}.
Функция должна игнорировать все остальные символы в строке.
Строка может содержать любые символы, но интересуют только скобки.

Требования
Создайте функцию isBalanced с одним параметром — строкой, которую нужно проверить.
Функция должна вернуть true, если все скобки сбалансированы, и false в противном случае.

// Примеры использования
console.log(isBalanced("{[()]}")); // true
console.log(isBalanced("{[(])}")); // false
console.log(isBalanced("{[}"));    // false

Объяснение
Создаём пустой массив stack для отслеживания открывающих скобок.
Создаём объект brackets, в котором ключи — это открывающие скобки, а значения — соответствующие закрывающие скобки.
Итерируемся по каждому символу строки.
Если символ является открывающей скобкой, добавляем соответствующую закрывающую скобку в стек.
Если символ является закрывающей скобкой, проверяем, совпадает ли он с последним элементом в стеке. Если нет, возвращаем false.
В конце возвращаем true, если стек пустой (все скобки были правильно закрыты), и false в противном случае.

#домашка