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

Jumping Coin Preloader Анимированная загрузка в виде прыгающей монетки

❓ Зачем нужен атрибут contenteditable в HTML и когда его использовать? Атрибут contenteditable позволяет сделать любой HTML-элемент редактируемым прямо на странице. Это полезно для создания текстовых редакторов, заметок или интерфейсов без использования дополнительных полей ввода. ✅ Пример:

<div contenteditable="true">Нажми сюда и начни редактировать текст</div>

📌 В этом примере пользователь сможет кликнуть на блок и изменить его содержимое прямо в браузере. contenteditable удобно использовать для быстрой реализации функций редактирования текста без сложных форм и без дополнительной логики обработки полей ввода.

CSS scroll-driven scroll-snapping animations Страница с различными вариациями анимированного скролла

AI Rork + Figma: как ускорить прототипирование и исследование без компромиссов Покажу, как с помощью Figma и Rork почти мгновенно делать кликабельные прототипы — идеально для быстрых юзер-тестов и не только. Минимум мороки, максимум пользы

Text Illumination Сцена с анимированным появлением текста

Как использовать любой CSS-фреймворк в вашем проекте. Часть 4 В четвертой части мы рассматриваем процесс кастомизации кнопки Primary в Bootstrap с точки зрения построения дизайн-системы. Пошагово описаны уровни кастомизации, а также способы внесения изменений через переменные и стили для сохранения чистой архитектуры.

Underwater Background #2 Анимированный фон страницы

❓ Зачем нужен атрибут tabindex в HTML и когда его использовать? Атрибут tabindex управляет порядком фокусировки элементов при навигации с клавиатуры (по клавише Tab). Это полезно для улучшения доступности и управления UX при взаимодействии без мыши. ✅ Пример:

<button tabindex="2">Второй</button>
<button tabindex="1">Первый</button>
<button tabindex="3">Третий</button>

📌 При нажатии Tab фокус перейдёт сначала на "Первый", потом на "Второй", затем на "Третий" — несмотря на порядок в разметке. tabindex удобно использовать для настройки логичной и удобной навигации по элементам на странице, особенно в формах, модальных окнах и пользовательских интерфейсах с кастомными компонентами.

Signature animation Поле для ввода подписи с интересной анимацией