![[Перевод] Основы фронтенд-разработки: фреймворки, DOM-дерево, взаимодействие с бэкендом](https://habrastorage.org/webt/in/r4/qu/inr4quketif7lohmnby_zln2lt0.png)
Современная сфера веб-разработки пестрит всевозможными технологиями и инструментами, среди которых новичок может легко растеряться. Статья посвящена общему обзору принципов фронтенд- и бэкенд-разработки, а также знакомит начинающих с наиболее актуальными инструментами и навыками, которые им потребуются для успешного продвижения по карьерному пути. Читать дальше →
Подробнее![[Перевод] Учимся тестированию с помощью Bootstrap](https://habrastorage.org/webt/ov/fr/mi/ovfrmir-wlpmssa6obatx5i0xmw.png)
Ознакомительное руководство по использованию Bootstrap для создания веб-страниц и тестирования. Здесь вы узнаете, из чего состоит фреймворк Bootstrap, какие есть варианты его установки и использования, а также как именно с его помощью можно создавать веб-страницы и тестировать их. Читать дальше →
Подробнее![[Перевод] Что нового в Chrome 111?](/uploads/habrahabr_logo.png){kind=logo}
Давайте погрузимся внутрь и посмотрим, что нового ждет разработчиков в Chrome 111. Читать далее
Подробнее![[Перевод] CSS сolor-сontrast(): пошаговое руководство](https://habrastorage.org/getpro/habr/post_images/274/5f5/bf5/2745f5bf5e937166b62269f323afa7f5.png)
Если вы испытывали раздражение из-за невозможности легко перемещаться по сайту, с высокой вероятностью вы столкнулись с недоступностью в том или ином виде. Недоступность и неприятные впечатления от использования схожи. Если вам сложно прочитать мелкий шрифт, то человеку с нарушениями зрения, возможно, вообще не прочитает его. Функция color-contrast() используется для удобства чтения, придания необходимого контраста между текстом и фоном на веб-странице. Это особенно важно для людей с…
Подробнее![[Перевод] 12 важнейших сайтов для освоения CSS в 2023 году](https://habrastorage.org/webt/5m/hl/1l/5mhl1lycb7yyoxwloflsrzzk578.png)
Хотите войти в веб-разработку, но не знаете, с чего начать? Освоение CSS станет отличным стартом и, к счастью для вас, в сети существует огромное количество учебных ресурсов. Мы провели исследование и собрали 12 наиболее актуальных сайтов, которые помогут вам продвинуться от уровня новичка до профессионала по CSS за кратчайшие сроки. Будь вы начинающий программист или опытный, на этих сайтах есть информация для всех уровней: от полноценных учебных пособий до памяток и фрагментов кода.
Подробнее
Сегодня я расскажу о процессе, который я придумал для преобразования SVG‑контура в векторный рисунок верёвки. Вы узнаете, как превратить показанный слева контур в верёвку справа: Эта задача возникла в проекте, над которым работали мои коллеги, и она привлекла моё внимание. Я думал о ней и начинал экспериментировать, как только появлялось свободное время. Это было очень увлекательно, поэтому я захотел поделиться с вами процессом решения. Стоит учесть, что это не туториал по кодингу,…
Подробнее![[Перевод] Руководство по цветовым функциям CSS](https://habrastorage.org/webt/hc/mt/ad/hcmtad9rq2_6tz1jnu0o3xjuzwk.png)
Возможно, вы использовали CSS для изменения цвета элемента на веб-странице, но слышали ли вы что-нибудь о цветовых функциях CSS? Если нет, то из этой статьи узнаете нечто новое и крайне полезное! Что такое цветовые функции CSS? Цветовые функции CSS (CSS color functions) — это способ задания цвета в CSS при помощи математических функций, а не простого кода цвета. Функции обеспечивают больше контроля и гибкости при работе с цветами, используемыми в таблице стилей. При помощи цветовых…
Подробнее
Size container queries и container query units недавно достигли стабильной поддержки во всех современных браузерных движках. Читать далее
Подробнее![[Перевод] Руководство по реализации отзывчивого дизайна в 2023 году](https://habrastorage.org/webt/aq/ig/zl/aqigzl7sg2fpfqea_-mzrifvr_4.png)
Сегодня построение отзывчивых макетов уже не основывается на контрольных точках (breakpoints) с фиксированной шириной. Вместо этого современные макеты должны работать на устройствах практически любого размера. Однако, к своему удивлению, я всё ещё встречаю сайты, где используется паттерн отзывчивого дизайна – когда присутствует контейнер, получающий новое значение max-width в соответствии с шириной области просмотра. Термин «отзывчивый» сегодня отражает уже очень многое. У нас есть…
Подробнее
Мне часто задают вопрос: Возможно ли создать тени из градиентов, а не из сплошных цветов? В СSS не существует конкретного свойства для этого (поверьте мне, я проверял), а в любом посте по этой теме содержится только множество хитростей для того, чтобы получить что-то похожее на градиент. В этой статье я расскажу вам о некоторых из них. Но для начала… ещё одна статья о градиентных тенях? Серьёзно? Читать дальше →
Подробнее![[Перевод] Прокачиваем навыки CSS с помощью селектора :has()](https://habrastorage.org/webt/6l/si/tk/6lsitknanqlqucpeyu6efsothve.png)
Привет, друзья! Представляю вашему вниманию перевод этой замечательной статьи, посвященной продвинутому использованию нового CSS-селектора :has(). :has() предоставляет возможность "заглядывать вперед" с помощью CSS и стилизовать родительский элемент (предка). Этот селектор может быть легко расширен для стилизации одного или нескольких дочерних элементов (потомков). Регистрация состояний или позиций элемента позволяет стилизовать почти любую комбинацию элементов как уникальных…
Подробнее![[Перевод] Условные выражения в CSS](https://habrastorage.org/webt/od/j4/cd/odj4cdqkszr4exf6muavvgk6d3s.jpeg)
Мне нравится думать о CSS как о языке дизайна с условными выражениями. На протяжении многих лет CSS был известен как способ стилизации веб-страниц. Однако сегодня этот язык эволюционировал настолько, что в нём уже есть правила условных выражений. Любопытно то, что эти правила реализуются не напрямую (например, в CSS всё ещё нет if/else). Инструменты дизайна наподобие Figma, Sketch и Adobe XD сильно облегчили жизнь дизайнеров, однако им всё равно не хватает той гибкости, которая есть у CSS.
Подробнее