📂 Напоминалка по 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 | #практика

😎 Советую YeaHub — это IT платформа объединяющая обучение, подготовку к собеседованиям и развитие карьеры в одном месте!

База реальных собеседований от Т-Банк, Яндекса, Сбера и 100+ топовых компаний. 10 000+ вопросов по Frontend, Backend, DevOps и другим направлениям. Удобный тренажёр, персональная статистика и еженедельные обновления.

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

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

👩‍💻 Гибкость и чистота в стилях? Всё это про var!

Функция var() возвращает текущее значение кастомного свойства. Если оно поменяется, то функция сразу вернёт актуальное значение.

Где особенно полезно:

• При создании дизайн-систем — единый цвет, отступ или размер в одном месте.

• В тёмной/светлой темах — просто меняешь значение переменной.

• В анимациях — переменные можно менять динамически, и они участвуют в переходах.

Главное: var — это не просто про удобство, это про контроль и масштабируемость. Один раз задал, и используешь в 100 местах без дублирования.

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

👩‍💻 Шпаргалка по cursor в CSS.

Например, cursor: pointer; делает курсор в виде руки — это сигнализирует, что элемент кликабельный. А cursor: none; полностью скрывает курсор.

На картинке — 16 популярных значений свойства cursor.

Сохрани, чтобы не искать в документации каждый раз!

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