📂 Напоминалка по HTTP-статусам!

Например, код 200 означает, что всё прошло успешно, а 404 сообщает, что страница не найдена.
Очень полезно держать под рукой, когда работаешь с API или отлаживаешь backend.

На картинке показаны самые часто используемые статусы от 100 до 599.

Сохрани, чтобы не забыть!

📣 Code Ready | #ресурсы

👩‍💻 Настраиваем чекбоксы, радиокнопки и другие элементы формы — без костылей и JavaScript!

С этим справится свойство accent-color, которое позволяет задать цвет нативным интерактивным элементам, вроде:

• чекбоксов
• радио-кнопок
• слайдеров (range)
• прогресс-баров

Вместо замороченных кастомных стилей — можно использовать одно свойство.

Поддерживается в большинстве современных браузеров. Даёт аккуратный, нативный результат с полной доступностью.

📣 Code Ready | #свойство

☕️ Frontend Practice — это коллекция реальных макетов сайтов для тренировки навыков HTML, CSS и JavaScript.

В отличие от скучных задачек, здесь — дизайны в духе Apple, Dropbox, Spotify, которые можно повторять прямо у себя, прокачивая верстку до продвинутого уровня.

📌 Оставляю ссылочку: frontendpractice.com

📣 Code Ready | #ресурсы

😎 UIverse — огромная коллекция современных UI-компонентов созданных на HTML, CSS и Tailwind.

Кнопки, карточки, загрузки и т.д, которые можно скопировать код прямо в проект, кастомизировать стили, и вдохновиться свежими UI-решениями от сообщества.

📌 Оставляю ссылочку: uiverse.io

📣 Code Ready | #ресурсы

Intersection Observer — отслеживаем появление элементов в области видимости!

Эффективная альтернатива scroll-событиям. Используется для ленивой загрузки, анимаций и инфинит-скролла.

Инициализируем наблюдатель:


const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});



Подключаем наблюдение:


document.querySelectorAll('.anim').forEach((el) => {
  observer.observe(el);
});



Стили для появления:


.anim { opacity: 0; transform: translateY(30px); transition: 0.4s ease; }
.visible { opacity: 1; transform: none; }



🔥 Простая и масштабируемая практика, которую используют в продакшене: YouTube, Medium, e-commerce.

📣 Code Ready | #практика