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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
👩‍💻 Напоминалка для работы с CSS em и rem!

em вычисляется относительно размера шрифта родительского элемента, rem — относительно размера шрифта корневого. Данные единицы влияют не только на текст, но и на размеры, отступы и другие свойства.

На картинке - как единицы влияют на итоговый размер текста в пикселях.

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥20👍10🤝84
👩‍💻 Разберем тег <pre> — сохранение форматирования текста в HTML!

Тег <pre> нужен для отображения предварительно отформатированного текста, если необходимо сохранить все пробелы и переносы в HTML.

Его особенности:
• Шрифт по умолчанию моноширинный (как в редакторах кода);

Браузер не убирает лишние пробелы и переносы;

Можно сочетать с тегом <code> для подсветки кода;


Он хорошо подходит для отображения стихотворений или демонстрации примеров кода.

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2313🔥6
😁60🔥11👍53
👩‍💻 Мини-трюк с CSS — кнопка «Copy → Copied» без JavaScript!

В этом посте - простой приём, который позволяет сделать интерактивную кнопку копирования текста, полностью на HTML+CSS. Пользователь получает визуальный отклик при клике.

Как работает:
Используем скрытый checkbox и стилизованный label, чтобы отслеживать состояние кнопки.

Через селектор :checked + label::after меняем текст кнопки на «✔️ Copied!», создавая эффект копирования.

Добавляем label:active для плавного эффекта нажатия и визуальной обратной связи.


Такой приём можно использовать в сниппетах кода, формах или карточках товаров.

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍238🔥8😁2
Всем привет

Ровно 2 года назад я создал этот канал, спасибо всем кто подписался и смотрел посты (особенно кто ставит реакции 😁)

За это время многое изменилось, с таких постов, до таких как сейчас.

Но кстати всё равно, раньше тоже круто было, можете перейти в закреп и там посмотреть на старые постики.

В общем, поздравляю сам себя с годовщиной! 🥳
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍71🔥25🤝94😁3
8🔥7👍6
Что же выведет консоль?
Anonymous Quiz
22%
A
34%
B
29%
C
15%
D
🔥148👍5
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Хочешь эффект «стеклянного» интерфейса?

Свойство backdrop-filter позволяет применять визуальные эффекты к фону элементов, находящихся за целевым элементом.

Возможные значения:
blur(px) — размытие фона.
• brightness(%) — регулирует яркость заднего фона.
• contrast(%) — изменяет контрастность.
• grayscale(%) — переводит фон в оттенки серого.
• opacity(%) — управляет прозрачностью фона.
• sepia(%)
— придаёт фону тёплый, коричневатый оттенок.
• hue-rotate(deg) — изменяет оттенок фона.
• invert(%) — инвертирует цвета.
• none — сбрасывает все фильтры, фон остаётся без изменений.


Можно указать несколько функций через пробел. Причём при разном порядке функций результат будет отличаться.

📣 Code Ready | #свойство
Please open Telegram to view this post
VIEW IN TELEGRAM
22👍12🔥6🤝1
✍️ HTML и CSS с нуля — Полный курс для начинающих!

Он предназначен для тех, кто хочет освоить веб-разработку с нуля. Вы научитесь создавать адаптивные и кроссбраузерные сайты, верстать макеты, формы и таблицы с современным дизайном, а также применять современные методы CSS для удобной и качественной верстки.

Ссылочка на плейлист: YouTube 🖤


📣 Code Ready | #курс
Please open Telegram to view this post
VIEW IN TELEGRAM
23👍8🔥5🤝1
📱 Прозрачная шапка с эффектом скролла!

Привет! В этом гайде создаём современную шапку сайта, которая меняет прозрачность при прокрутке страницы.

Ключевые моменты:
• HTML: семантическая шапка и контентные блоки.

• CSS: пастельные цвета, плавные переходы и стеклянный эффект.

• JS: отслеживание скролла и динамическое управление классами.


Подходит для лендингов и адаптивных сайтов, где важен акцент на визуальные эффекты и удобство пользователя.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3010🔥9
😁337👍6🤝1
📱 Сегодня разберем коллекции!

Шпаргалка по ключевым методам Map, Set, WeakMap и WeakSet: создание, добавление, чтение, проверка и управление уникальными значениями. Подойдёт для эффективного хранения данных, приватных полей объектов и оптимизации структуры сложных приложений.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
20👍11🔥9