This media is not supported in your browser
VIEW IN TELEGRAM
Задача — в минимуме кода повторить заданный визуал. Тренирует знание CSS до автоматизма, особенно круто для тех, кто хочет прокачать вёрстку нестандартных форм.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍36🔥15🤝6❤2👎1
❤19🔥10👍8
Практикоориентированный курс для начинающих, где вы шаг за шагом создадите первый реальный проект. Изучите HTML, CSS, JavaScript, разберётесь в адаптивности и работе с GitHub. Отличный старт для тех, кто хочет быстро войти в профессию.Ссылочка на плейлист: YouTube🖤
Please open Telegram to view this post
VIEW IN TELEGRAM
👍17🔥8❤6
Атрибут inputmode говорит браузеру на устройствах с экранной клавиатурой какой набор символов показать при вводе данных в конкретное поле. Указывается для элементов <input> или <textarea>.
Примеры значений:
• numeric — числовая клавиатура
• email — клавиатура с @ и .
• decimal — числа с запятой
• tel — телефонная клавиатура
Задаёт предпочтительный способ ввода данных, не влияя на тип поля. Это особенно полезно для type="text", когда нужен ввод чисел, email, URL и т.д.
Please open Telegram to view this post
VIEW IN TELEGRAM
❤26👍17🔥6😁1🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
Faker — позволяет легко вставлять случайные имена, адреса, номера телефонов, даты и другие данные прямо в ваш код.
Очень удобно при разработке и тестировании, особенно если нужно наполнить макеты реалистичными значениями.
Please open Telegram to view this post
VIEW IN TELEGRAM
🤝39🔥11❤5😁4👍2
В этом посте рассмотрим прием, который дает CSS новую супер способность: реагировать на содержимое без единой строчки JavaScript.
Как работает:
• Селектор :has() позволяет родителю “заглядывать” внутрь — и менять стиль, если есть нужный элемент.
• Например, контейнер сам поймёт, что в нём появилась картинка — и адаптирует отступы или фон.
• Работает в современных браузерах (Chrome, Safari, Edge) — но уже применяется в продакшене.
Идеально для карточек, адаптивных блоков, динамически загружаемого контента — стилизация становится умной!
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍34❤12🔥10
Grid даёт контроль над размещением элементов по строкам и колонкам, включая выравнивание, области и отступы.
На картинке — ключевые свойства CSS Grid с наглядными иллюстрациями:
grid-template-columns, grid-area, gap, justify-content, align-items, place-self и многое другое.Сохрани, чтобы быстро вспоминать синтаксис и поведение сетки в разных ситуациях!
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍10❤5🤝2
🔥15👍7❤5😁3🤝1
С их помощью можно обрабатывать большие объёмы данных по частям, отменять долгие запросы и управлять выполнением кода с высокой точностью. Эти возможности особенно актуальны при создании чатов, стриминговых приложений, сложных UI и интерактивных SPA.Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤22👍13🔥6
Всем привет! Сегодня покажу, как сделать стильную кнопку лайка, которая не просто меняет цвет при клике, а ещё и анимирует сердечко с эффектом "биения", плюс ведёт живой подсчёт лайков с плавной анимацией.
Ключевые моменты:
• HTML: простая структура — кнопка с сердечком и счетчиком.
• CSS: flexbox для выравнивания, keyframes для анимации биения, hover-эффекты с transform.
• JavaScript: toggle активного состояния, обновление счетчика и анимация масштабирования.
🔥 — если хочешь побольше подобного
🤝 — если попробуешь сделать
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤24🔥23👍9🤝5