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

👩‍💻 Abstract Login Page w/ Background Animation — Анимация для фона и формы ввода данных.

Сделано на CSS

🔗 Открыть код

⚙️ Топ 5 причин, когда JavaScript блокирует загрузку вашего сайта

На основе наблюдений я выделил 5 самых проблемных случая, когда JavaScript блокирует загрузку сайта. В статье вы узнаете, как с ними бороться.

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

👩‍💻 3D Cover Flow — Анимированные карточки с интересным эффектом движения.

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

🔗 Открыть код

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

<ul id="list"></ul>

<script>
  const list = document.getElementById("list");
  const newItem = document.createElement("li");
  newItem.textContent = "Новый элемент";

  list.append(newItem);
</script>

📌В этом примере append() добавляет новый элемент <li> в конец списка

append() удобно использовать при генерации списков, карточек, уведомлений и других динамических компонентов. В отличие от appendChild(), он может добавлять сразу несколько узлов или строки текста, что делает его более гибким

👩‍💻 Futuristic 3D hover Effect — Красивый эффект главной кнопки, которая дополнительно открывает другие.

Сделано на SCSS

🔗 Открыть код

⚙️ Делаем интерфейс дружелюбнее. Коллекция простых HTML/CSS лайфхаков

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

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

👩‍💻 Vertical menu with gooey effect — Вертикальное меню с липким эффектом наведения на вкладки.

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

🔗 Открыть код

⚙️ View Transitions API

Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!

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

⚙️ View Transitions API

Полистав различные ресурсы в Интернете и просмотрев множество видео по данной теме, я решил составить наиболее полную картину по данному, не побоюсь этого слова, революционному API, чтобы вы уже сегодня могли начать использовать его в своём проекте!

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

👩‍💻 Card Hover Eeffect Left to right line — Анимированный эффект для карточек с появлением пояснительной информации.

Сделано на SCSS

🔗 Открыть код

❓ Зачем используется метод setAttribute() в JavaScript и когда его применять? Метод setAttribute() устанавливает или обновляет значение атрибута у HTML-элемента. Это удобно, когда нужно динамически менять параметры элементов — например, src, href, id или data-*. ✅Пример:

<img id="avatar" src="default.png" alt="Avatar">

<script>
  const img = document.getElementById("avatar");
  img.setAttribute("src", "user.png");
  img.setAttribute("alt", "User photo");
</script>

📌В этом примере setAttribute() изменяет путь к изображению и описание

setAttribute() удобно использовать при работе с динамическим контентом, темизацией, lazy-loading изображений и управлением data-* атрибутами. Он даёт гибкий способ изменять DOM-структуру без прямого доступа к свойствам