​Прокачиваем скилл веб-разработки: контейнерные запросы CSS простым языком

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

Недавно в Google Chrome и Safari наконец-то внедрили полную поддержку контейнерных запросов. И вот отличная статья, которая поможет понять, как работают контейнерные запросы и как их использовать.

Всё простым языком и на реальных примерах: https://ishadeed.com/article/container-queries-are-finally-here/

#css #фронтенд

​Делимся годным бесплатным курсом по веб-разработке для начинающих

Курс поможет понять, как работает интернет. И научиться создавать веб-страницы с помощью HTML и CSS и деплоить их в интернет. Из плюсов курса — домашние задания с мини-проектами для самостоятельной проверки. Курс прошли почти 210 тыс. раз и оценили на 4.7 из 5.

Страница курса: https://stepik.org/course/38218/promo

#курсы #html #css #фронтенд

«Мужик, а у тебя есть шпаргалка по CSS, HTML и JS? Держи, мужик, шпаргалку по CSS, HTML и JS»

Очень удобная интерактивная шпаргалка, в которой собрана не только полезная информация по работе с CSS, HTML и JS но и различные генераторы, символы, эмодзи и полезные ссылки.

Сохраните, чтобы не потерять: https://htmlcheatsheet.com/css/

#шпаргалки #css #html #javascript

​Годнота для веб-разработчиков: подборка шпаргалок и полезных ресурсов по TailwindCSS

К TailwindCSS относятся по-разному: для одних это просто очередной фреймворк, для остальных — новый шаг эволюции веб-разработки.

Его фанаты считают, что он кардинально отличается от всех других фреймворков и создает отдельную парадигму веб-стилизации. И при этом выполняет все поставленные перед ним задачи, делая это лучше и удобнее других. По сути, TailwindCSS похож на Bootstrap, Foundation или Bulma, но у него точно есть несколько фич, за которые его можно полюбить.

И вот небольшая подборка полезных ресурсов, которые вам помогут познакомиться с ним поближе:

— Интерактивный пример почтового ящика Intercom на Tailwind CSS, который поможет попробовать фреймворк на практике

— Tailwind Cheat Sheet, шпаргалка по всем классам утилит и свойствам

— Meraki UI, набор нескольких готовых компонентов Tailwind CSS, которые можно кастомизировать перед копипастом

— Tailwind.run(), онлайн-площадка для Tailwind CSS с поддержкой пользовательской конфигурации сборки. С её помощью можно посмотреть, как итоговый вариант будет выглядеть на разных устройствах

#инструменты #css #веб #шпаргалки

​Шпаргалка по всем свойствам CSS Flexbox

Рассматриваем основы, разбираемся в свойствах и делимся шпаргалкой

#css #фронтенд #веб

​Как работает CSS Position — объяснение с примерами кода

Рассказываем, как работать с CSS Position и применять его свойства — relative, absolute, static, fixed и sticky для разработки веб-сайтов

#веб #фронтенд #css

Убираем JavaScript. Как при помощи htmx красиво использовать HTML и уменьшить объём кода?

Есть такая библиотека htmx. Она позволяет создавать сложные веб-приложения на HTML и выступает как альтернатива клиентскому рендерингу на Javascript. htmx помогает переиспользовать элементы на сервере, сократить объём кода на Javascript и отказаться от сборки.

Страница проекта

Небольшой вводный гайд по работе с htmx

#инструменты #css #javascript #html #веб

​Полный самоучитель по CSS Grid на примере единорога и со шпаргалкой

Рассказываем про свойства CSS Grid, которые помогут создавать адаптивные сайты и делимся шпаргалкой, которая охватывает все, что можно сделать с помощью Grid.

#css #шпаргалка #веб #фронтенд

​Центрируем вообще всё!

Рассказываем и показываем, как центрировать в CSS всё, что угодно, через Flexbox, Grid, Position и Margin

#css #веб

CSS следующего поколения: @container

Новое свойство @container дает нам возможность стилизовать элементы в зависимости от размера их родительского контейнера. Это что-то типа медиа-запросов, но с ориентацией не на область просмотра, а на родительский контейнер элемента.

В этой статье вы узнаете, какие возможности это открывает, как работает и где использовать:

https://webdevblog.ru/css-sledujushhego-pokoleniya-container/

#css

Что изменилось в CSS за последние несколько лет

Есть ли во фронтенде что-нибудь, что развивается так же быстро, как CSS в наши дни? Все чаще выходят обновления, позволяющие реже зависеть от замысловатых имен классов, меньше думать о выборе правильной функции и дающие возможность избежать необходимости предварительно вычислять математические параметры.

О том, что нового появилось в в CSS за последние годы вы сможете узнать здесь.

И нет, в статье не будет разбора и упоминания каждой новой функции за последние 5 лет, но в ней вы сможете узнать о новинках, оказавших наибольшее влияние на повседневную работу с CSS.

#веб #фронтенд #css

​​Как научиться анимациям в CSS за 20 минут

На YouTube-канале Slaying The Dragon вышел 20-минутный туториал, посвящённый анимациям CSS. Вы познакомитесь с базовым набором свойств, которые позволят реализовать почти любое движение / преобразование текста, кнопки или любого другого объекта.

#css

​​Почему не стоит использовать сброс стилей (reset.css, обнуление стилей CSS)?

Интересная предложка от нашего читателя Виталия Першина, в которой он кратко объяснил, почему сброс стилей — худшее решение в современной верстке: https://www.youtube.com/watch?v=eDXSW22p9Bk

@tproger_web #css

— Насколько хорошо вы умеете работать с CSS?
— Настолько, что рисую на CSS картины.
— Что?
— Что?

Целый аккаунт с похожими работами: https://twitter.com/asyrafhussin4

#css @tproger_web

​​Интерактивный гайд по CSS Container Queries

Отличная возможность для того, чтобы попробовать относительно новую фичу без необходимости создавать свою песочницу: https://ishadeed.com/article/css-container-query-guide

#инструменты #css

​​6 полезных шпаргалок по CSS, которые сэкономят вам часы работы

Они идеально подходят как для новичков, так и для тех, кто уже неплохо разбирается.

Чит-листы охватывают такие аспекты как:
— CSS Flexbox.
— CSS Grid.
— CSS Positions.
— CSS Display Values.
— CSS Selectors.
— CSS :nth-child Selectors.

Сохраняйте, чтобы не потерять: https://github.com/WebdevShefali/CheatSheets/tree/main

#css #фронтенд

​​24 CSS-проекта: Анимация загрузки, индикаторы выполнения, карточки и многое другое

На freeCodeCamp вышло новое видео, в котором вы сможете узнать, насколько хорошо вы на самом деле знаете CSS.

На протяжении 24 заданий вы будете воссоздавать компоненты и макеты из популярных приложений, таких как GitHub, CodePen и Instagram. Вы также создадите анимацию загрузки, индикаторы выполнения, карточки и многое другое, используя чистый CSS: https://youtu.be/TzuWIHGFKCQ

#css

Упрощаем себе создание grid-вёрстки на сайте с помощью CSS Grid Generator

Как видно на видео, он помогает посмотреть, как будет выглядеть итоговая сетка и после этого получить готовый CSS-код. Всё, что вам нужно: задать количество строк, колонок и расстояния между ними, а потом нарисовать расположение div-блоков.

Инструмент бесплатный, доступен по ссылке: https://cssgrid-generator.netlify.app/

#инструменты #css