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

Онлайн Инструменты:

1. Enjoy CSS

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

Для того чтобы начать использовать EnjoyCSS, вам не обязательно иметь большой бекграунд в CSS.
«EnjoyCSS — это продвинутый генератор CSS3, который позволяет избавиться от рутины»

2. CSS Arrow

Этот инструмент поможет вам сгенерировать код кастомных боксов со стрелочкой, которую, к тому же, можно разместить с любой стороны. Написать такую штуку с нуля достаточно трудно, но CSS Arrow генерирует код всего лишь в несколько кликов. Имея на руках сгенерированный код, вы можете вносить в него свои изменения, например — добавить тень.

3. CSSmatic

Это достаточно универсальный инструмент. С CSSmatic вы можете:
• Создавать градиенты: при помощи нескольких цветов и уровня непрозрачности можно создавать красивые градиенты.
• Радиус границы: очень простой и удобный инструментарий. Можно менять выбранные границы одновременно.
• Текстура шума: создание картинок для фона с «грязными» пикселями и шумом, изменение цвета, а также предварительный просмотр результата в режиме реального времени.
• Тень бокса: изменение радиуса размытия, изменение цвета и размера тени — все, что нужно для создания великолепных теней. К тому же, все это интегрировано с простым и интуитивно понятным UI. Я бы сказал, что это просто неотъемлемый инструмент любого разработчика.

4. Patternizer и Patternify

Оба эти инструмента позволяют создавать удивительные CSS шаблоны в удобном интерфейсе. С помощью них вы можете создавать интересные шаблоны, которые можно легко интегрировать с вашим сайтом.
• Patternizer• Patternify

Инструменты для онлайн-обучения

1. CSS Grid

На этом сайте вы можете пройти четырехчасовой курс, в котором вам фундаментально расскажут о CSS Grid. Этот курс абсолютно бесплатный, и его создателем является известный разработчик — Уэс Бос. Этот короткий курс состоит из 25 видеороликов, которые обучат вас всем основам CSS Grid.
• Веб-сайт
• YouTube

2. Grid Garden

Это интерактивная игра предлагает вам писать CSS код для того, чтобы вырастить свой морковный сад. Это достаточно забавный и интересный способ обучения. К тому же, пройдя данную игру, вы изучите все основы CSS Grid. Игра состоит из 28 уровней, каждый из которых требует написания фрагмента кода CSS для выполнения задания.

3. Flexplorer

Это простое приложение позволяет вам экспериментировать с различными функциями Flexbox и отслеживать результаты в режиме реального времени. Вы также можете редактировать текст в полях и видеть, как ведет себя слой боксов. Это отличный и ненапряжный способ обучения.

4. Image Effects with CSS

Этот классный инструмент, созданный Беннеттом Фили (создателем Flexplorer). C помощью Image Effects вы можете поэкспериментировать со свойствами CSS, такими как background-blend-mode, mix-blend-mode и filter. На выходе у вас может получиться отличная картинка.