⚙️ HTML- и CSS-советы для джуниор фронтенд-разработчиков

Расскажу, какие привычки в вёрстке улучшают код: семантика, читаемость, структура, трюки. Примеры и ссылки.

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

👩‍💻 Download the Matrix — Крайне стильная кнопка скачивания с анимацией при нажатии

Сделана на SVG, CSS и JavaScript

🔗 Открыть код

⚙️ Циклы в JavaScript: полный обзор функции

Покажу, как гонять повторения в JS: for/while/do…while, for…of/for…in, break/continue, частые грабли и где что уместно. Мини-примеры, лайфхаки — и цикл не укусит.

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

👩‍💻 Card Mouse Hover Effect — Карточки с интересным эффектом при наведении

Сделаны на CSS и JavaScript

🔗 Открыть код

❓ Зачем используется свойство textContent в JavaScript и когда его применять?

Свойство textContent позволяет получить или изменить только текстовое содержимое элемента, игнорируя HTML-теги. Это безопасный способ отобразить данные без риска вставки вредоносного кода.

✅Пример:

<div id="message"></div>
<script>
  const box = document.getElementById("message");
  box.textContent = "<strong>Привет!</strong>";
</script>

📌В этом примере textContent выведет строку <strong>Привет!</strong> как обычный текст, без интерпретации HTML.

textContent удобно использовать для вывода пользовательского ввода, динамических данных или сообщений, где важна безопасность. В отличие от innerHTML, оно исключает XSS-уязвимости и работает быстрее при массовых изменениях текста

👩‍💻 Fancy wipe — Стильный текст с анимированным появлением

Сделан на чистом CSS

🔗 Открыть код

⚙️ Я запрещаю вам margin

Я показываю, почему выбраковываю margin: перехожу на gap, даю лишние обёртки ради независимости узлов. Итог — чище код и предсказуемые отступы. Будут примеры и возражения.

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

👩‍💻 Order button animation — Анимированная кнопка "Оформить заказ"

Сделана на CSS и JS

🔗 Открыть код

⚙️ HTML и CSS осенью 2025. Эти новые фичи я рекомендую изучить прямо сейчас

Покажу свежие фишки HTML/CSS, которые уже поддерживаются: что они чинят, где применить, на что смотреть. Короткие примеры, ссылки и мои фавориты — чтобы выбрать, что копать глубже.

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

👩‍💻 Morphing Submit Button — Анимированная кнопка загрузки после нажатия на "Submit"

Сделана на CSS, SVG и JavaScript

🔗 Открыть код

❓ Зачем используется свойство value в JavaScript и когда его применять?

Свойство value позволяет получить или изменить текущее значение элементов форм — таких как <input>, <textarea> или <select>. Это основной способ работы с пользовательским вводом на стороне фронтенда.

✅Пример:

<input id="nameInput" type="text" placeholder="Введите имя">
<script>
  const input = document.getElementById("nameInput");
  input.value = "Alice"; // Установим значение

  console.log(input.value); // Получим текущее значение ➜ "Alice"
</script>

📌В этом примере value сначала задаёт значение в поле ввода, а затем позволяет его прочитать.

value удобно использовать для работы с формами, валидацией, автозаполнением, поиска и динамического изменения данных. Это ключевой инструмент при создании интерактивных интерфейсов.