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

Автор: @energy_it

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

Реклама на бирже: https://telega.in/c/code_ready
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
👍 MDN Web Docs — актуальный ресурс по фронтенду!

HTML, CSS, JavaScript, Web APIs, производительность, доступность - всё в одном месте. Структурированная программа обучения - от «что такое фронтенд» до продвинутых приемов, с задачами, тестами и "реплейсом" прямо в браузере.

📌 Оставляю ссылочку: mdvwebdocs.org

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍187🔥6🤝1
📱 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
❤️ Нашёл свежую статью на Хабре: «Делаем фронтенд-сборку для верстки HTML-писем на MJML»

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


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


📣 Code Ready | #статья
Please open Telegram to view this post
VIEW IN TELEGRAM
👍146🔥6
📱 Разберём работу с событиями!

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

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
21👍7🔥6🤝3
👩‍💻 Напоминалка для работы с CSS em и rem!

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

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

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥18👍10🤝74
Создаёте игры? Получите буст для следующего уровня!

Геймдизайнеры, разработчики, продюсеры, в телеграм-канале «АКИлогия» вы найдёте всё, чтобы двигаться вперёд. Канал ведёт Агентство креативных индустрий Москвы — одна из немногих институций, работающих на устойчивый рост российского геймдева.

На канале вас ждут:
📌 Анонсы флагманских акселераторов, например 4-го потока «Фабрики видеоигр» — интенсивной программы с фокусом на продакшен и продвижение
📌 Игры, которые уже создали и протестировали в «АКИ.лабе»
📌 Международные возможности: конкурсный отбор на G-Star 2025 в Южной Корее для российских студий
📌 Презентация на ПМЭФ Кластера видеоигр и анимации — стратегической инициативы АКИ, направленной на развитие сферы видеоигр

✔️ Хотите сделать релиз из идеи и масштабироваться в индустрии? Подписывайтесь на «АКИлогию»!

Реклама
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥31
👩‍💻 Разберем тег <pre> — сохранение форматирования текста в HTML!

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

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

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

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


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

📣 Code Ready | #атрибут
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1912🔥6
😁44🔥7👍53
ChatGPT 5 — страшное оружие в умелых руках

Российский разработчик Олег Миллер, занимающий обучением и тренировкой новой модели Open AI в Сан-Франциско, рассказывает в своём блоге:

Как отключить цензуру у ChatGPT (инструкция)
Малоизвестные ИИ, с которыми вы станете богатым
Почему человечество обречено на катастрофу из-за развития ИИ

За такие инсайды он может быть уволен. Поэтому блог закрытый, а ссылка на него постоянно меняется. Успей вступить: https://t.me/+OwwN18-CRncxZjli
🤝3🔥2😁21👍1
👩‍💻 Мини-трюк с 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
👍188🔥5