Code Ready | Frontend

📱

Drag & Drop Kanban доска!

Привет! В этом гайде собираем минимальный Kanban с перетаскиванием карточек между колонками.

Ключевые моменты:

• HTML: три колонки (To Do, In Progress, Done) с карточками draggable.

• CSS: оформление доски и карточек.

• JS: нативный drag & drop API.

Подходит для прототипов, pet-проектов и внедрения визуальных таск-менеджеров в свои приложения.

📣

Code Ready | #гайд

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

👍29🔥9🤝7

2.54K views10:12

Code Ready | Frontend

❤️ Нашёл свежую статью на Хабре: «Делаем фронтенд-сборку для верстки HTML-писем на MJML»

В этой статье:

• Создадите отдельный репозиторий для верстки email-шаблонов с помощью MJML; 
• Настроите frontend-сборку: сможете писать шаблоны, автоматически компилировать MJML в HTML;
• Реализуете тестовую отправку писем через SMTP, чтобы сразу увидеть результат в почтовом клиенте;

🔊 Читайте подробнее на Habr!

📣

Code Ready | #статья

Please open Telegram to view this post

VIEW IN TELEGRAM

👍14❤6🔥6

2.27K views06:04

Code Ready | Frontend

📱

Разберём работу с событиями!

Шпаргалка по ключевым методам и обработчикам: добавление и удаление слушателей, реакция на ввод, отправку форм и наведение курсора. Подойдёт для динамического UI, интерактивных элементов и оптимизации кода.

📣

Code Ready | #шпора

Please open Telegram to view this post

VIEW IN TELEGRAM

Please open Telegram to view this post

VIEW IN TELEGRAM

❤23👍7🔥6🤝3

2.42K views10:04

Code Ready | Frontend

👩‍💻

Напоминалка для работы с CSS em и rem!

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

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

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

📣

Code Ready | #ресурсы

Please open Telegram to view this post

VIEW IN TELEGRAM

🔥18👍10🤝7❤4

2.33K views07:12

Code Ready | Frontend

👩‍💻 Разберем тег <pre> — сохранение форматирования текста в HTML!

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

Его особенности:

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

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

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

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

📣

Code Ready | #атрибут

Please open Telegram to view this post

VIEW IN TELEGRAM

👍22❤13🔥6

2.48K views15:12

Code Ready | Frontend

😁57🔥9👍5❤3

2.5K views07:12

Code Ready | Frontend

0:02

This media is not supported in your browser

VIEW IN TELEGRAM

👩‍💻 Мини-трюк с 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

👍22❤8🔥7😁2

2.55K views13:03

Code Ready | Frontend

Всем привет✊

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

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

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

В общем, поздравляю сам себя с годовщиной! 🥳

Please open Telegram to view this post

VIEW IN TELEGRAM

4👍61🔥22🤝9❤3😁3

2.35K views13:34

Code Ready | Frontend

❤8👍6🔥6

2.05K views10:38

Code Ready | Frontend

Что же выведет консоль?

Anonymous Quiz

22%

35%