Загрузка...

Слив курса [HTML Academy] Онлайн-курс «Анатомия CSS-каскада» (2022)

Тема в разделе Уроки создана пользователем Zuev 5 апр 2022. 1927 просмотров

Загрузка...
  1. Zuev
    Zuev Автор темы 5 апр 2022 Пока живой 107 12 мар 2018
    [IMG]

    Из обычного фронтендера в техлида

    Курс создан для практикующих разработчиков, которые хотят повысить свою экспертизу и прокачать инженерное мышление. В курсе досконально разбираются фундаментальные механизмы CSS: обработка значений (value processing), каскад и наследование.

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

    Прохождение курса займёт от 2 до 3 недель, если вы готовы заниматься 5 часов в неделю.

    Раздел 1. Обработка значений и каскад
    Рассмотрим понятие каскада и обработки значений. Разберёмся, как браузер вычисляет значения, и в какой момент запускается каскад.

    Теория
    • Понятие каскада.
    • Вычисление значений: стадии declared, cascaded, specified, computed, used и actual.
    Практика
    • Контрольные тесты по темам раздела
    Раздел 2. Фильтрация
    Поговорим о стилях автора, пользователя и браузера, а также о «виртуальных» стилях. Разберём, как браузер парсит CSS-код, фильтрует объявления и отбирает значения. Коснёмся валидности, префиксов, псевдонимов, условных правил и поиска элементов в DOM-дереве.

    Теория
    • Источники стилей: авторские, браузерные и пользовательские.
    • Парсинг и фильтрация.
    Практика
    • Контрольные тесты по темам раздела
    Раздел 3. Каскад
    Детально рассмотрим порядок объявления свойств и каскадирования. Разберёмся с тем, как происходит расчёт специфичности селекторов и какую роль она играет в каскаде.

    Теория
    • Детальный разбор алгоритма каскада.
    • Порядок подключения стилевых файлов и объявления свойств.
    • Порядок каскадирования: в какой очерёдности применяются стилевые правила. Аннотация !important.
    • Cелекторы и расчёт специфичности.
    Практика
    • Контрольные тесты по темам раздела
    Раздел 4. Получение значений по умолчанию
    Посмотрим, что происходит, если не задать значение явно. Разберёмся с наследуемыми и ненаследуемыми свойствами и значениями по умолчанию. Рассмотрим наследование кастомных свойств и способы повернуть каскад вспять.

    Теория
    • Наследуемые и ненаследуемые свойства.
    • Значения по умолчанию.
    • Кастомные свойства.
    • Принудительное наследование. Ключевое слово inherit.
    • Откат каскада. Ключевые слова revert, unset, initial.
    • Свойство all.
    Практика
    • Контрольные тесты по темам раздела
    Раздел 5. Вычисления
    Разберёмся, что происходит с каскадированными значениями дальше, как они вычисляются в конкретные значения, используемые для отрисовки в браузере.

    Теория
    • Этапы вычислений: computed, used, actual value.
    Практика
    • Контрольные тесты по темам раздела
    Раздел 6. Каскад на практике
    Поработаем с каскадом на практике. В подробных пошаговых демонстрациях разберём реализацию типовых приемов и компонентов.

    Теория
    • Свойство font-size-adjust.
    • Стилизация компонента спиннера.
    • Стилизация кастомных компонентов.
    • «Липкий» подвал страницы.
    • Функции для вычислений в CSS.
    Итоговое испытание
    Вам нужно будет выполнить задание – реализовать алгоритм каскада на JavaScript, используя все полученные знания о CSS-каскаде.

    Результат выполнения контролирует автоматизированная система проверки.

     
Top