Josh W Comeau | CSS for JavaScript Developers (2023) WEB-DL [EN]

CSS - это неявный язык.

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

Подумайте о том, как большинство из нас изучает CSS: мы изучаем, как работают отдельные свойства, вместо того, чтобы сосредотачиваться на том, как алгоритмы верстки используют эти свойства в качестве входных данных. Мы изучаем “крутые приемы” для конкретных ситуаций, а не концепции, которые можно широко применить к любой ситуации.

Это все равно, что пытаться решить головоломку, в которой не хватает кусочков.

Только все еще хуже, потому что мы виним себя!

Никто не рождается с навыками CSS.

Мы предполагаем, что у нас отсутствует какой-то “ген CSS”, что мы просто не очень хороши в этом. И это самая несправедливая самокритика в мире. Если вы изучите правила CSS, у вас тоже может все получиться!

Овладение CSS в совершенстве меняет правила игры.

Внезапно самая неприятная часть вашей работы превращается в удовольствие! Как разработчики JS, мы тратим так много энергии, пытаясь избежать написания CSS, в то время как могли бы использовать его для создания пользовательских интерфейсов мирового класса.

Итак, как вы изучаете правила CSS? Что ж, вы можете потратить бесчисленное количество часов на изучение документации MDN и спецификаций CSSWG, а затем потратить несколько лет на практику. Именно это я и сделал. Это было, несомненно, эффективно — конечный результат невероятно ценен, — но путь был долгим и трудным.

Я хочу помочь вам ускорить этот процесс. В течение последнего года я объединял все свои знания и опыт в комплексный онлайн-курс для самостоятельной работы.

Я называю это…

Модуль 0
Основы

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

Как браузеры используют CSS
Синтаксис и терминология
Основы цвета, единиц измерения, типографики

Модуль 1
Логика рендеринга I

Мы открываем крышку и видим, как браузер отображает элементы в flow-макете

Наследование и каскад
Подробный обзор коробчатой модели
Необходимые сведения о Flow-макете

Модуль 2
Логика рендеринга II

Мы продолжаем наше изучение режимов отображения в браузере, изучая позиционируемый макет.

Понимание относительных, абсолютных, фиксированных и зависимых позиций
Как избежать войн z-индексов
Управление переполнением и скрытым контентом

Модуль 3
Современная архитектура компонентов

Как CSS вписывается в современные веб-приложения на JS? В этом модуле мы узнаем, как использовать преимущества экосистемы JavaScript.

Использование инструментов для решения специфических задач без использования соглашений об именовании
Как создать библиотеку компонентов с нуля
Как эффективно использовать CSS-in-JS

Модуль 4
Flexbox

Flexbox привнес в Веб невероятно мощный алгоритм верстки. Мы узнаем, как извлечь из него максимальную пользу.

Понимание принципов расширения, сжатия и базиса
Дюжина распространенных макетов с помощью Flexbox
Оперативность без медиа-запросов

Модуль 5
Адаптивный и функциональный CSS

CSS стал по-настоящему динамичным языком! Мы увидим, как использовать современные возможности CSS для создания гибких макетов.

Создание потрясающих возможностей для мобильных устройств и планшетов
Динамический CSS с поддержкой vw / vh, calc, min/max/clamp…
Потрясающая мощь переменных CSS

Модуль 6
Типографика и изображения

Самая важная часть любого веб-приложения - это контент! Мы узнаем, как сочетать текст и мультимедиа.

Адаптивная оптимизация изображений
Рекомендации по использованию веб-шрифтов
Вариативные шрифты и будущее типографики

Модуль 7
CSS-сетка

CSS Grid - это революционная система верстки для Интернета. Мы увидим, как использовать его ответственно, чтобы создавать пользовательские интерфейсы следующего уровня.

Когда использовать CSS-сетку против Гибкий ящик
Глубокое понимание алгоритма компоновки
Как обеспечить резервное копирование для старых браузеров

Модуль 8
Анимация и взаимодействие

Анимация является важной частью всех веб-приложений. Мы узнаем, как создавать красивые, насыщенные анимации.

Переход и анимация из первых принципов
Как создавать анимацию
Производительность анимации

Модуль 9
Мелкие детали

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

Эстетика с помощью градиентов, прямоугольных теней, обрезки и фильтров
Оптимизация удобства использования с помощью прокрутки / фокусировки
Уточняем детали и доводим до совершенства, чтобы создать пользовательский опыт следующего уровня

Модуль 10
Дополнительный контент

Модуль 11
Видеоархив