​​Где можно потренироваться в вёрстке на 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