​​Где можно потренироваться в вёрстке на CSS?

Например, на CSSBattle. Это платформа, на которой нужно сверстать проект по изображению, используя как можно меньше кода.

Конечно, есть платные разделы, но много испытаний доступны бесплатно: https://cssbattle.dev/

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

Ещё один интересный codepen-проект, в этот раз с нестандартным лоадером

Что интересно, реализовано без единой строчки JavaScript — только SVG и CSS. Поэтому он практически никак не влияет на нагрузку:

https://codepen.io/jkantner/pen/VwrYggy

#css #веб

​​Просто небольшой codepen с анимированной карточкой входа.

Красиво, стильно, удобно и ни строчки JS — всё на чистом CSS. Посмотреть код можно тут: https://codepen.io/ig_design/pen/KKVQpVP

#css #веб

Годнота для фронтенд-разработчиков: большая база советов, трюков и лучших практик для веб-разработчика

Если вам нужно быстро реализовать какую-нибудь несложную фичу, типа добавления иконки к ссылкам, обработки поведения страницы при «битом» изображении или даже центрирования div, Front-End Tips вам в помощь: https://getfrontend.tips

Фичи можно искать по текстовому запросу, у каждой есть доступное объяснение и пример кода. Но что самое приятное, инструмент полностью бесплатный и пополняется сообществом.

#веб #javascript #css #html

​Прокачиваем скилл веб-разработки: контейнерные запросы 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