Code Ready | Frontend
22.7K subscribers
928 photos
398 videos
17 files
604 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
👩‍💻 Нужно быстро понять, что происходит в коде?

Console Ninja — расширение, которое выводит результаты console.log, warn и error прямо рядом со строками, где они вызываются. Видите значения переменных мгновенно, не отвлекаясь от кода. Особенно удобно при работе с React, Vue или Node.js, дебаг становится наглядным и быстрым.

📣 Code Ready | #vscode
Please open Telegram to view this post
VIEW IN TELEGRAM
👍239🤝7
🔥11👍7🤝7
Что же выведет консоль?
Anonymous Quiz
39%
A
19%
B
15%
C
28%
D
🔥11👍7🤝6
😁3710👍5
👩‍💻 CSS-фишка: 3D-карточка при наведении!

Хотите добавить глубины и реализма элементам интерфейса? Этот приём создаёт эффект объёмной карточки, которая будто «откликается» на движение курсора.

Как это работает:
perspective и transform-style: preserve-3d создают трёхмерную сцену.

При :hover карточка слегка вращается и получает мягкую тень.

translateZ() приподнимает текст, усиливая ощущение глубины.


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

📣 Code Ready | #фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥179👍9👎2🤝1
This media is not supported in your browser
VIEW IN TELEGRAM
☕️ Codecademy — полезная интерактивная площадка для изучения JS!

На сайте можно учиться прямо в браузере, без установки среды и лишней теории. Уроки состоят из коротких заданий с кодом: пишешь, видишь результат, работаешь над ошибками и двигаешься дальше. Постепенно проходишь весь путь, от основ синтаксиса до работы с DOM и API.

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

📣 Code Ready | #ресурсы
Please open Telegram to view this post
VIEW IN TELEGRAM
👍16🔥7🤝72😁1
📱 Textarea с кнопкой очистки внутри!

Привет! В этом гайде создаём удобное текстовое поле, в котором при вводе появляется кнопка для мгновенной очистки содержимого.

Ключевые моменты:
• HTML: textarea и кнопка внутри одного контейнера.

• CSS: позиционирование кнопки, плавное появление, аккуратный дизайн.

• JS: отслеживание ввода, показ/скрытие кнопки и очистка текста.


Такое решение отлично подойдёт для форм, чатов и любых интерфейсов, где важно быстро очищать текст без перезагрузки страницы.

📣 Code Ready | #гайд
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
20👍9🔥8🤝2
This media is not supported in your browser
VIEW IN TELEGRAM
❤️ Platform — реальный проект для прокачки фронтенда!

Это не демо и не учебный «туду-лист», а полноценная платформа с продуманной архитектурой и современным стеком: React, TypeScript, Redux Toolkit, React Hook Form, FSD.

Можно изучить каждую страницу, каждый компонент, посмотреть, как устроен код в боевом проекте, и забрать себе лучшие практики!

Оставляю ссылочку: GitHub 📱


📣 Code Ready | #репозиторий
Please open Telegram to view this post
VIEW IN TELEGRAM
20🔥9🤝7
👩‍💻 Как сделать адаптивные блоки без кучи media-запросов!

CSS уже умеет подстраивать размеры элементов без @media.

Для этого есть инструмент clamp():
.title {
font-size: clamp(1rem, 2vw + 0.5rem, 2.5rem);
}


clamp(min, preferred, max) задаёт диапазон: шрифт будет плавно меняться вместе с шириной экрана,
но никогда не станет меньше 1rem и больше 2.5rem.

Работает для свойств, где можно задавать числовые значения:
.container {
padding: clamp(1rem, 5vw, 3rem);
}


Для ещё большей гибкости можно использовать контейнерные единицы (cqw, @container), они подстраиваются под ширину контейнера, а не всего окна.

📣 Code Ready | #совет
Please open Telegram to view this post
VIEW IN TELEGRAM
👍19🔥12🤝72
16👍11🔥7🤝1
📱 History API — управление историей и адресной строкой!

Разбираем методы history и location, с помощью которых можно изменять URL без перезагрузки страницы, добавлять и заменять состояния, перемещаться по истории и отслеживать переходы. Используется для реализации маршрутизации, клиентской навигации и синхронизации состояния приложения с адресной строкой в SPA и веб-интерфейсах.

📣 Code Ready | #шпора
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
17🔥11👍10🤝1