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

👩‍💻 Navicon Transformicons — 6 вариантов анимации бургер-кнопок.

Сделано на SCSS

🔗 Открыть код

⚙️ Не обижайте Django

Разбираюсь, почему сравнивать Django и FastAPI — всё равно что спорить, чем забивать гвозди. У каждого своя ниша, и Django по-прежнему силён там, где нужен фундамент.

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

👩‍💻 Home Radio Button Animation

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

🔗 Открыть код

⚙️ HTML и CSS ошибки, влияющие на доступность. Мой опыт и моего незрячего знакомого Ильи. Часть 13

Мы показываем, как HTML и CSS могут улучшить или ухудшить её. Напоминаю, что Илья — мой незрячий знакомый, который помогает мне найти наши косяки в вёрстке.

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

👩‍💻 Wall of text — Плавно движущиеся строки с текстом в качестве фона для вашего сайта

Сделано на SCSS

🔗 Открыть код

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

<button id="menuBtn">Меню</button>
<nav id="nav" class="hidden">Навигация</nav>

<script>
  const btn = document.getElementById("menuBtn");
  const nav = document.getElementById("nav");

  btn.addEventListener("click", () => {
    nav.classList.toggle("hidden");
  });
</script>

📌В этом примере при каждом клике меню будет показываться и скрываться за счёт переключения класса hidden

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

👩‍💻 cool hover card — Эффект наведения на карточку с плавным размытием изображения

Сделано на CSS

🔗 Открыть код

⚙️ Изнутри жюри: как мы выбирали лучшую работу на чемпионате по html верстке

Рассказываю, как проходил чемпионат от HTML Academy глазами жюри: на что реально смотрят фронтенд-лиды, какие решения отличают профи от просто хороших верстальщиков и где кроется магия качества.

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

👩‍💻 Pac-Man Toggle — Анимированный переключатель в виде пакмена

Сделано на CSS

🔗 Открыть код

⚙️ Зачем делать акценты в шрифтах: история о том, как типографика управляет вниманием

Разбираюсь, как акценты в шрифтах направляют внимание, создают ритм и помогают читателю не утонуть в потоке текста — не про «красоту», а про осмысленную типографику.

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