Code Ready | Frontend

описание

Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Автор: @energy_c РКН: https://clck.ru/3NJCKs Реклама на бирже: https://telega.in/c/code_ready

← к каналу @code_ready

21 542

подписчиков

Лучшие посты

за три месяца

25 мая3 749 просмотров31 реакций38 пересылок
без подписи
29 мая3 618 просмотров28 реакций26 пересылок
без подписи
18 июн.3 592 просмотров34 реакций48 пересылок
без подписи
11 июн.3 432 просмотров24 реакций28 пересылок
без подписи
10 июн.3 314 просмотров36 реакций65 пересылок
без подписи
5 июн.3 213 просмотров25 реакций51 пересылок
🐱 Наткнулся на очень полезную статью на Хабре: «Мне этот Chrome DevTools теперь абсолютно понятен»! В этой статье: • Подробно разбираются основные инструменты Chrome DevTools — Elements, Console, Sources, Network и их применение; • Показывается, как эффективно искать баги, анализировать DOM, отлаживать JavaScript и отслеживать сетевые запросы; • Объясняются возможности DevTools: Workspaces, Snippets, performance-профилирование, live-редактирование и инструменты для адаптивной вёрстки. 🔊 Продолжайте читать на Habr! 📣 Code Ready | #статья
24 мая3 170 просмотров34 реакций70 пересылок
без подписи
1 июн.3 096 просмотров27 реакций68 пересылок
🐱 Наткнулся на очень полезную статью на Хабре: «Мне этот Chrome DevTools теперь абсолютно понятен»! В этой статье: • Подробно разбираются основные инструменты Chrome DevTools — Elements, Console, Sources, Network и их применение; • Показывается, как эффективно искать баги, анализировать DOM, отлаживать JavaScript и отслеживать сетевые запросы; • Объясняются возможности DevTools: Workspaces, Snippets, performance-профилирование, live-редактирование и инструменты для адаптивной вёрстки. 🔊 Продолжайте читать на Habr! 📣 Code Ready | #статья
3 июл.2 963 просмотров41 реакций53 пересылок
без подписи
15 июн.2 958 просмотров30 реакций28 пересылок
без подписи
4 июн.2 935 просмотров28 реакций27 пересылок
без подписи
8 июн.2 881 просмотров31 реакций35 пересылок
без подписи
9 июн.2 834 просмотров32 реакций44 пересылок
без подписи
5 июн.2 727 просмотров22 реакций36 пересылок
без подписи
16 июн.2 700 просмотров28 реакций53 пересылок
без подписи
3 июн.2 631 просмотров32 реакций28 пересылок
без подписи
2 июн.2 594 просмотров39 реакций56 пересылок
Как сделать адаптивный текст без media queries? Очень часто для адаптации текста под разные экраны используют отдельные breakpoint. В итоге CSS разрастается, а шрифты начинают масштабироваться неравномерно. Обычно это выглядит так: .title { font-size: 3rem; } @media (max-width: 768px) { .title { font-size: 2rem; } } Но CSS умеет нативно адаптировать размер текста под экран: .title { font-size: clamp(1.2rem, 4vw, 3rem); } clamp() задаёт минимальный размер, адаптивное значение и максимальный предел. Теперь текст плавно масштабируется вместе с viewport. .subtitle { font-size: clamp(1rem, 2vw, 1.5rem); } Особенно хорошо это работает для hero-блоков, заголовков, кнопок и адаптивных интерфейсов. Media queries часто вообще становятся не нужны. 🔥 clamp() позволяет создавать по-настоящему адаптивные интерфейсы без множества контрольных точек и дублирования CSS. 📣 Code Ready | #совет
22 июн.2 592 просмотров27 реакций79 пересылок
💅 dmitry-osin — шпаргалка по CSS на русском языке! Очень полезный материал для frontend-разработчиков и всех, кто работает с вёрсткой. Здесь собрана все по CSS — от базовых селекторов и блочной модели до Flexbox, Grid, анимаций, адаптива и современных возможностей CSS. Особенно удобно, что всё структурировано и написано простым языком с примерами. Оставляю ссылочку: GitHub 📱 📣 Code Ready | #репозиторий
7 авг.2 490 просмотров33 реакций28 пересылок
👩‍💻 Правильный способ расшифровать аббревиатуры! Тег <abbr> используется для обозначения аббревиатур и сокращений. Благодаря атрибуту title можно указать их полную расшифровку, которую браузер обычно показывает при наведении курсора. Чаще всего <abbr> используют для: • технических терминов (HTML, CSS, API); • названий организаций; • единиц измерения; • общепринятых сокращений. Для максимальной пользы рекомендуется всегда указывать атрибут title с полной расшифровкой сокращения. 📣 Code Ready | #атрибут
6 июл.2 445 просмотров31 реакций66 пересылок
🐱 html-cheatsheet-rus — полезнейшая шпаргалка по HTML! Крутой материал для тех, кто изучает frontend или хочет быстро освежить базу по HTML. Здесь собрана действительно большая база — от структуры HTML-документа, тегов и атрибутов до форм, семантической вёрстки, мультимедиа, HTML5 API и accessibility. Оставляю ссылочку: GitHub 📱 📣 Code Ready | #репозиторий