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😁2🤝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
Когда часть страницы должна быть визуально видна, но при этом неактивна (например, при открытии модального окна или блокировке интерфейса), inert идеально решает задачу. Элемент с этим атрибутом исключается из фокуса, навигации клавиатурой и событий мыши.
Это современная альтернатива tabindex="-1" + pointer-events: none, и работает чище — особенно в больших UI.
Можете добавить к любому тегу
inert
. Это булевый атрибут, так что у него нет значений.Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥19❤12👎1
Всем привет! Сегодня разберём, как создать интерактивную игру "Угадай число" с нуля, используя HTML, CSS и JavaScript.
Ключевые моменты:
• HTML: простая структура игры всего в 7 строк кода.
• CSS: красивый дизайн с градиентами и анимацией.
• JavaScript: генерация случайного числа и логика сравнения.
🔥 — если попробуешь повторить
🤝 — если уже создавал игры
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥34🤝12❤8👍6👎1
Это фундаментальные кирпичики любого кода.
Ключевые слова отвечают за область видимости, асинхронность, контекст выполнения, создание объектов и многое другое.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥31🤝15👍10❤8