Code Ready | Frontend
20.1K subscribers
694 photos
308 videos
17 files
462 links
Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!

Автор: @energy_it

РКН: https://clck.ru/3NJCKs

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
📂 Напоминалка по CSS Grid!

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

На картинке — ключевые свойства CSS Grid с наглядными иллюстрациями: grid-template-columns, grid-area, gap, justify-content, align-items, place-self и многое другое.

Сохрани, чтобы быстро вспоминать синтаксис и поведение сетки в разных ситуациях!

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥24👍105🤝2
13🔥8👍3😁3🤝2
Что же выведет консоль?
Anonymous Quiz
30%
A
38%
B
11%
C
20%
D
🔥15👍75😁2🤝1
📱 Изучаем асинхронные потоки — мощные инструменты работы с данными в JavaScript!

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

📣 Code Ready | #шпора
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 активного состояния, обновление счетчика и анимация масштабирования.


🔥 — если хочешь побольше подобного
🤝 — если попробуешь сделать


📣 Code Ready | #гайд
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 — атрибутом, который делает элементы недоступными для взаимодействия!

Когда часть страницы должна быть визуально видна, но при этом неактивна (например, при открытии модального окна или блокировке интерфейса), inert идеально решает задачу. Элемент с этим атрибутом исключается из фокуса, навигации клавиатурой и событий мыши.

Это современная альтернатива tabindex="-1" + pointer-events: none, и работает чище — особенно в больших UI.


Можете добавить к любому тегу inert. Это булевый атрибут, так что у него нет значений.

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍32🔥1912👎1
👍 Сделаем игру "Угадай число")

Всем привет! Сегодня разберём, как создать интерактивную игру "Угадай число" с нуля, используя HTML, CSS и JavaScript.

Ключевые моменты:
HTML: простая структура игры всего в 7 строк кода.

CSS: красивый дизайн с градиентами и анимацией.

JavaScript: генерация случайного числа и логика сравнения.


🔥если попробуешь повторить
🤝 — если уже создавал игры


📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥34🤝128👍6👎1
📱 Разбираем часто используемые ключевые слова!

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

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
2🔥31🤝15👍108