Подборка ресурсов для изучения CSS с разделением на тематические группы. Два по цене одного: план обучения и лучшие учебники в одной статье!
CSS – это обширная область, включающая множество аспектов манипулирования элементами страницы. Начинающим веб-разработчикам бывает непросто понять, что и как изучать. Поэтому мы собрали лучшие ресурсы по CSS и разбили их на группы – так вы одновременно можете составить план обучения и подобрать необходимые материалы.
Новичкам лучше начинать с самого начала и последовательно разбираться с темами. Более опытные веб-разработчики имеют полную свободу в передвижении по нашему дайджесту.
Селекторы
Селекторы – ключевое понятие CSS, ведь чтобы как-нибудь стилизовать элемент, его прежде всего нужно найти.
Концепции для начинающих: Как работают CSS селекторы
Одно из лучших введений в концепцию CSS-селекторов, включая их сложные комбинации и псевдоселекторы.
Развиваем скилл в CSS-селекторах
Пошаговое руководство для изучения CSS-селекторов.
Box Model
Еще одна базовая теоретическая концепция в CSS. Она объясняет, как формируются различные элементы страницы и почему реальная ширина блока не всегда равна значению свойства width.
Открывая Box Model
Отличный вводный ресурс с грамотными визуальными пояснениями и подробным разбором свойств.
The box model
Полноценная документация коробочной модели с интерактивными примерами.
Построение макета
Веб-страница начинается с макета – определения взаимного расположения элементов. Современные системы раскладки (Flexbox и CSS Grid) – это очень мощные инструменты, позволяющие манипулировать блоками по вашему желанию. Существуют и другие – более традиционные – свойства позиционирования, которые вы должны изучить.
Начало работы с CSS-макетами
Замечательное руководство для новичков и тех, кто хочет освоить современные CSS-тренды. Разобраны все инструменты макетирования: от float до Grid.
Суперруководство по Flexbox – обучение на примерах
Flexbox-система стала самым крупным прорывов в CSS за последние десять лет и продолжает оставаться востребованной.
Комплексное руководство по выравниванию на Flexbox
Flexbox существенно упрощает задачу горизонтального и вертикального выравнивания элементов.
Flexbox Froggy
Милая и полезная игра, которая позволяет практиковать свои навыки flexbox, позиционируя забавных лягушек на лилиях.
Руководство для начинающих по CSS Grid
Большой, простой и максимально визуализированный гайд по Grid-системе.
Полное руководство по Grid
Один из самых полных ресурсов для изучения CSS Grid, включающий все возможные свойства и значения Grid-правил.
Лучшие практики с CSS Grid
CSS Grid существует уже достаточно долго, чтобы можно было сформулировать лучшие практики использования.
Еще одна коллекция интересных фактов о CSS Grid
Использование сокращенных свойств, явных и неявных строк и столбцов и еще немало полезных уроков. Множество примеров, в которых можно копаться в свое удовольствие.
Шпаргалка по Grid Layout
Удобная шпаргалка с основами Grid-разметки.
CSS Grid Garden
Еще одна отличная обучающая игра, в которой вам нужно позиционировать морковку в саду.
Как браузеры позиционируют float-элементы
Системы Flexbox и Grid практически вытеснили старый добрый float из процесса создания макетов, но иногда он все еще нужен.
CSS-позиционирование за десять шагов
Пошаговое руководство, которое расскажет вам об абсолютном и относительном позиционировании в CSS.
Z-index: разделение слоев с помощью CSS
На первый взгляд z-index – очень простое свойство, но в его использовании есть множество подводных камней. Эта статья подробно объяснит, откуда что берется.
Позиционирование
Полная документация для изучения CSS позиционировая, включающая также новый "липкий" (sticky) способ позиционирования.
Что не так со схлопывающимися маргинами?
Схлопывание маргинов – камень преткновения для многих начинающих веб-разработчиков. Эта статья очень наглядно объясняет причины и значение этого явления.
Стилизация текста
Самая важная часть любого сайта – контент, а значит, текст. В CSS есть множество способов сделать его красивым.
Основы стилизации текста и шрифта
Начинайте знакомство с текстовыми свойствами CSS отсюда. Здесь вы узнаете все о шрифтах, размерах, начертаниях и многом другом.
Руководство по CSS-стилизации ссылок
Гиперссылки в интернете необычайно важны, поэтому подход к их оформлению должен быть особым.
Стилизуем списки
Списки – замечательный способ отобразить разнообразные массивы данных. Они имеют собственный набор стилей, с которым вы здесь и познакомитесь.
Используем @font-face
Подробное руководство по использованию пользовательских шрифтов.
Стилизация контейнеров
Контейнеры, или коробки (boxes), – главные структурные элементы веб-страниц. С их устройством вы уже разобрались, изучая box model. Теперь пришла пора украшать.
Как добавить забавные CSS-фоны на сайт
Фон – один из самых мощных инструментов выделения элементов. CSS позволяет использовать для этого изображения, градиенты и многое другое.
Стилизация таблиц
Таблицы полезны для структурированного отображения данных, но в исходном виде они не очень гламурны. К счастью, мы вполне можем сделать их красивыми.
Box-shadow, одна из лучших новых функций CSS3
Подробное введение в свойство box-shadows, которое научит вас создавать тени с нужными параметрами и даже комбинировать их самым невероятным образом.
CSS Outline
Outline немножко потерялся в сравнении с border, но это тоже очень мощный инструмент выделения блоков со своими преимуществами.
Множественные рамки
4 способа создания нескольких рамок для одного блока.
CSS-фильтры
Очень простая инструкция по использованию CSS-фильтров.
filter
Полная документация для изучения CSS фильтров с примерами.
Единицы измерения
Практически все величины (размер, позицию, параметры тени) нужно как-то измерять.
Значения и единицы CSS
Введение во все существующие типы единиц в CSS: от пикселей до неизмеряемых значений.
REM vs EM
Лучшее описание отзывчивых единиц rem и em со всеми их плюсами и минусами.
Знакомство с единицами вьюпорта
Единицы вьюпорта позволяют согласовать макет с размерами экрана.
Функция calc() с примерами
Calc – один из самых полезных инструментов CSS. Эта статья расскажет, как его правильно использовать.
Цвета и градиенты
В вебе используют целых 3 уникальные цветовые системы, а также есть возможность создавать сложные градиенты.
Color
Подробный разбор различных цветовых систем.
CSS-градиенты
Создание различных градиентов и браузерная поддержка.
CSS-градиенты
Визуальный инструмент для генерации CSS градиентов.
Как добавить градиенты к изображениям
Статья расскажет, как сделать градиент выцветания фонового изображения.
Прогресс-бар на CSS3
Использование градиентов для создания красивых прогресс-баров.
Переходы и анимация
Плавное и регулируемое изменение состояний страницы очень важно для улучшения пользовательского опыта.
Объяснение CSS transitions
Большое пошаговое введение в использование переходов CSS.
CSS transitions
Хорошая статья для изучения CSS переходов с отличными примерами различных функций плавности.
Введение в CSS-анимацию
Этот материал объясняет принцип работы анимации ключевых кадров в CSS.
Animista
Графический интерфейс для изучения и создания анимации.
Трансформации
CSS позволяет перемещать и изменять элементы в 2d или 3d пространстве. Трансформации можно объединять с плавными переходами, получая невероятные эффекты.
Трансформации
Замечательное подробное введение в различные типы преобразований CSS и их последствия.
Высокопроизводительные анимации
Статья расскажет, как создавать высокопроизводительные анимации с помощью CSS.
Псевдоклассы и псевдоэлементы
Таинственные "псевдоштучки" могут быть очень полезными, если нужно реализовать на странице нечто нестандартное.
Учимся использовать :after и :before
Подробное введение в псевдоэлементы: before и: after.
На что способны псевдоэлементы
Большой список удивительных возможностей псевдоэлементов CSS.
Анимация псевдоэлементов
С помощью псевдоэлементов можно создавать сложные и красивые анимации.
Использование псевдоэлементов в CSS Grid
Псевдоэлементы в CSS считаются прямыми потомками создавшего их элемента, а значит могут участвовать в формировании Grid-макета.
Как работают псевдоклассы CSS
Отличное руководство по псевдоклассам с визуальными диаграммами.
Селекторы псевдоклассов
Полный перечень всех доступных CSS-псевдоклассов.
@-правила
CSS умеет учитывать особенности среды формирования страницы (размеры вьюпорта или экрана устройства, вывод на печать, ориентацию. Это очень полезно для создания отзывчивых сайтов.
@-правила CSS
Обзор различных @-правил и их возможностей.
CSS медиа-запросы
Использование медиа-запросов для адаптации страницы к различным экранам.
Как писать mobile-first CSS
Mobile-first – популярный подход к разработке адаптивного дизайна.
Специфичность
Разобравшись с практическими основами CSS, начинайте погружение в теорию. Концепции специфичности, каскадности и наследования стилей очень важны для успешной работы.
Специфика специфичности
Отличное введение в теорию CSS. Коротко и по делу.
CSS-специфичность: что нужно знать
Подробный обзор концепции специфичности со множеством примеров и списком полезных ресурсов.
Сохраняем низкую CSS-специфичность
Чем ниже специфичность стилей, тем лучше. Эта статья расскажет, как следовать этому правилу.
Препроцессоры
Использование препроцессоров облегчает и ускоряет CSS-разработку.
Основы Sass
Руководство по основным функциям Sass.
LESS за 10 минут
Полезное руководство для изучения CSS-фреймворка LESS для начинающих.
Stylus
Еще один популярный препроцессор CSS с лаконичным синтаксисом.
Введение в PostCSS
PostCSS для CSS – это аналог Babel для JavaScript.
CodeKit vs. Prepros
Эти инструменты позволяют компилировать код препроцессоров в чистый CSS без использования сложных систем сборки.
CSS-архитектура
CSS проекта имеет тенденцию нарастать как снежный ком. Чтобы не запутаться в стилях, важно правильно их организовывать.
Введение в объектно-ориентированный CSS (OOCSS)
OOCSS – одно из первых низкоспецифичных соглашений об именовании в CSS.
БЭМ для начинающих
На сегодняшний день БЭМ – самое популярное CSS-соглашение. Из статьи вы узнаете, что это такое и для чего необходимо.
SMACSS
Одна из первых крупных архитектурных CSS-систем с великолепной документацией, в которой доступно изложена концепция систематизации стилей.
ITCSS: масштабируемая и поддерживаемая CSS-архитектура
Одна из немногочисленных хороших статей по архитектуре ITCSS.
ECSS
Еще один подход к организации CSS кода.
Подход 80-20 для устойчивого SCSS
Только самые важные и широко используемые функции SCSS для начинающих веб-разработчиков.
Популярные практики
Широко распространенные и полезные практики CSS, которые сделают вашу жизнь немного проще.
Autoprefixer
Автоматическая расстановка браузерных префиксов существенно упрощает работу.
Линтинг CSS со stylelint
Держите свои стили чистыми, валидными и свободными от ошибок.
О normalize.css
Рассказ о том, зачем нужна нормализация стилей.
Фреймворки
Создавайте сайты быстрее и проще с помощью CSS-фреймворков.
Bootstrap
Самый популярный CSS-фреймворк со множеством настроек.
Bootstrap 4 за 30 минут
Отличный учебник по последней версии Bootstrap.
ZURB Foundation
Фреймворк имеет огромное количество SCSS-настроек и позволяет создавать собственные расширяемые компоненты на базе имеющихся.
Semantic UI
Мощная фреймворк с широкими возможностями тематизации.
Learn Semantic
Обширный набор учебных пособий для Semantic UI.
Bulma
Компактный и легкий фреймворк для тех, кто не любит излишества.
MaterializeCSS
Фреймворк реализует систему Google Material Design. Есть реализации для многих популярных js-фреймворков.
Комплексные ресурсы
Caniuse.com
Ключевой инструмент для определения поддержки браузером любой функции CSS.
CSS-шпаргалка
Обширная шпаргалка по всем свойства и значениям CSS.
Альманах CSS
Алфавитный онлайн-альманах свойств и ключевых слов с описаниями, интерактивными примерами и массой полезной информации.
Рассылки
Регулярные информационные рассылки помогут вам идти в ногу с CSS-миром.
Делитесь своими любимыми ресурсами для изучения CSS в комментариях.
Оригинал: The Ultimate Guide to Learning CSS
Комментарии