Фронтенд Гайд

👩‍💻 Radio Button Dot-Slider — Форма переключателя с возможностью выбора одного из предложенных вариантов

Сделано на CSS

🔗 Открыть код

❓ Зачем используется метод focus() в JavaScript и когда его применять? Метод focus() устанавливает курсор ввода в элемент формы, делая его активным для пользователя. Это удобно для улучшения UX — например, при автоматическом фокусе на первом поле формы или после действий пользователя. ✅Пример:

<input type="text" id="username" placeholder="Введите имя">

<script>
  const input = document.getElementById("username");
  window.addEventListener("load", () => input.focus());
</script>

📌В этом примере focus() автоматически активирует поле ввода при загрузке страницы

focus() удобно использовать для навигации по формам, активации поиска, подсветки ошибок или управления клавиатурным вводом. Это помогает сделать интерфейс более интуитивным и доступным

👩‍💻 Linear-gradient button animation — Градиентный контур у кнопки, который переливается при наведении курсора мыши

Сделано на CSS

🔗 Открыть код

⚙️ Мой список вопросов о CSS для собеседования в 2025 году

Я обновил список вопросов для проверки знаний CSS — с фокусом на новые фичи и неожиданные нюансы. Попробуйте пройти этот мини-тест и проверьте, насколько хорошо вы чувствуете современный CSS.

🔗 Читать статью

👩‍💻 Song Selector — Анимированный селектор трека в виде карусели

Сделано на SCSS

🔗 Открыть код

⚙️ Почему @starting-style не заменит keyframes (пока)

Разбираем, как новое правило должно было сделать анимации проще, почему на практике всё сложнее, и когда лучше остаться с проверенными keyframes.

🔗 Читать статью

👩‍💻 Animated gradient button

Сделано на HTML и SCSS

🔗 Открыть код

Биотредин для улучшения памяти, концентрации внимания Препарат для улучшения памяти, концентрации внимания и работы мозга. Цена от 110 р. Узнать больше Есть противопоказания. Посоветуйтесь с врачом. #реклама biotredin.ru О рекламодателе

❓ Зачем используется метод preventDefault() в JavaScript и когда его применять? Метод preventDefault() отменяет стандартное поведение элемента браузера, не прерывая при этом выполнение других обработчиков. Это удобно, когда нужно полностью контролировать действия пользователя. ✅Пример:

<form id="loginForm">
  <button type="submit">Войти</button>
</form>

<script>
  const form = document.getElementById("loginForm");

  form.addEventListener("submit", (event) => {
    event.preventDefault(); // отменяем стандартную отправку формы
    console.log("Форма не перезагружается, можно обработать данные вручную");
  });
</script>

📌В этом примере preventDefault() предотвращает перезагрузку страницы при отправке формы.

preventDefault() удобно использовать при работе с формами, ссылками, drag&drop и кастомными UI-элементами. Оно даёт разработчику полный контроль над поведением интерфейса

👩‍💻 Animated gradient button — Анимация кнопки при наведении

Сделано на HTML и SCSS

🔗 Открыть код