☕️ Codecademy — полезная интерактивная площадка для изучения JS!

На сайте можно учиться прямо в браузере, без установки среды и лишней теории. Уроки состоят из коротких заданий с кодом: пишешь, видишь результат, работаешь над ошибками и двигаешься дальше. Постепенно проходишь весь путь, от основ синтаксиса до работы с DOM и API.

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

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

❤️ Platform — реальный проект для прокачки фронтенда!

Это не демо и не учебный «туду-лист», а полноценная платформа с продуманной архитектурой и современным стеком: React, TypeScript, Redux Toolkit, React Hook Form, FSD.

Можно изучить каждую страницу, каждый компонент, посмотреть, как устроен код в боевом проекте, и забрать себе лучшие практики!

Оставляю ссылочку: GitHub 📱

📣 Code Ready | #репозиторий

👩‍💻 Как сделать адаптивные блоки без кучи media-запросов!

CSS уже умеет подстраивать размеры элементов без @media.

Для этого есть инструмент clamp():

.noscript {
  font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);
}

clamp(min, preferred, max) задаёт диапазон: шрифт будет плавно меняться вместе с шириной экрана,
но никогда не станет меньше 1rem и больше 2.5rem.

Работает для свойств, где можно задавать числовые значения:

.container {
  padding: clamp(1rem, 5vw, 3rem);
}

Для ещё большей гибкости можно использовать контейнерные единицы (cqw, @container), они подстраиваются под ширину контейнера, а не всего окна.

📣 Code Ready | #совет

👩‍💻 Хочешь держать все проекты под рукой?

Project Manager — позволяет переключаться между разными проектами внутри одного экземпляра VS Code. Просто откройте боковую панель и выберите нужный. Можно группировать, давать имена, закреплять самые частые, всё максимально просто и быстро.

📣 Code Ready | #vscode

Определяем системную тему пользователя!

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

Проверим текущие настройки:

const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
console.log(isDark ? "🌙 Тёмная тема" : "☀️ Светлая тема");

Реагируем на изменение темы:

const mq = window.matchMedia("(prefers-color-scheme: dark)");

mq.addEventListener("change", e => {
  document.body.dataset.theme = e.matches ? "dark" : "light";
  console.log(`🎨 Тема: ${e.matches ? "dark" : "light"}`);
});

И сразу применяем тему при загрузке:

document.body.dataset.theme = isDark ? "dark" : "light";

🔥 Такой пример полезен для практики работы с браузерными API, реакцией на системные события и динамическим управлением интерфейсом.

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

👩‍💻 Масштабируй весь интерфейс одной строкой!

Все размеры заданы в rem?
Значит, масштабировать дизайн можно одним изменением:

html {
  font-size: 62.5%; /* 1rem = 10px при базовых 16px */
}

Хочешь увеличить всю страницу на 20% — достаточно поменять одно значение:

html {
  font-size: 75%;
}

Всё: шрифты, отступы, кнопки, автоматически подстроятся, если их размеры заданы в rem:

h1 {
  font-size: 2.4rem; /* 24px при font-size:10px */
}

.button {
  padding: 1.2rem 2rem;
}

Подходит для дизайн-систем, адаптива и гибкой настройки интерфейса под пользователя.

📣 Code Ready | #совет