👩‍💻 Если хотите добавить всплывающую подсказку к изображению, то атрибут вам в помощь title!

Наведите курсор — и появится дополнительная информация, помогающая лучше понять, что к чему.

Это особенно удобно, когда на странице много графики: пояснения дают контекст, которого не видно сразу.

Но не переусердствуйте, чтобы не перегрузить пользователя избыточной информацией и не создать ненужные раздражители.

➡️ Code Ready | #атрибут

👩‍💻 Разберёмся со свойством resize, которое управляет возможностью изменения размеров элемента.

Если изменение разрешено — в углу элемента появляется специальная иконка (похожая на треугольник), за которую можно потянуть и изменить размер в нужном направлении.

Варианты значений:

• none — размеры изменить нельзя (значение по умолчанию).
• both — можно менять и по ширине, и по высоте.
• horizontal — размер можно изменять по горизонтали.
• vertical — размер можно изменять по вертикали.

Есть и экспериментальные:

• block — изменение в блочном направлении.
• inline — изменение в строчном направлении.

Дайте пользователю свободу — но с умом. Не каждый блок должен тянуться во все стороны, иначе дизайн может "поплыть".

📣 Code Ready | #свойство

OverAPI — это справочник для быстрого поиска синтаксиса и примеров по множеству языков и технологий, удобный для фронтенд разработчиков, работающих с HTML, CSS, JavaScript, и не только.

📌 Ссылочка: overapi.com

📣 Code Ready | #ресурсы

🤓 Напоминалка для работы с Git.

Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками.

На картинке — 12 самых нужных команд, которые стоит держать под рукой.

Сохрани, чтобы не забыть!

📣 Code Ready | #ресурсы

👩‍💻 Если хотите ограничить ввод в поле формы — атрибут pattern вам в помощь!

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

Особенно полезен, когда вы хотите контролировать формат: телефон, пароль, ссылка — всё это можно заранее «обрисовать» через pattern.

Но не забудьте:

• Работает только с <input> и типами вроде text, tel, email, password и т.д.
• Проверка сработает только при отправке формы через <form>.

Бонус: можете добавить атрибут title, чтобы пользователь сразу понял, что не так.

Главное — не усложняйте! Простые и понятные правила = довольный пользователь.

📣 Code Ready | #атрибут

☕️ Наткнулся на отличную статью на Хабре — создание форм входа и регистрации без единой строчки JavaScript!

В статье:
• Как с помощью HTML5 и CSS3 сделать переключение между формами через :target.
• Стильные анимации и иконки через data-атрибуты.
• Продвинутые стили форм и плавные переходы с использованием CSS3.

🔊 Продолжай читать на Habr!

📣 Code Ready | #статья