Скачать [HTML Academy] HTML и CSS. Адаптивная вёрстка и автоматизация [21 ноября 2022 — 6 февраля 2023]

[Admin]

Онлайн‑курс HTML и CSS. Адаптивная вёрстка и автоматизация

Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени.​

Раздел 1
Введение
Понедельник с 19:00 до 21:00Лектор: Николай Шабалин

Познакомимся с рабочим процессом на курсе.

Как проходит курс. Организационные вопросы.

• Обзор личных проектов.
• Как работать с наставником.
• Критерии качества вёрстки.
• Защита личного проекта и получение сертификата.

Рабочий процесс на курсе.

• Зависимость заданий.
• Настройки личных проектов.
• Создание мастер-репозитория.
• Структура личных проектов.

Раздел 2
Методологии вёрстки
Четверг с 19:00 до 21:30Лектор: Николай Шабалин

Приёмы создания надёжной вёрстки.

Зачем нужны методологии.

• Порядок в коде.
• Работа в команде.
• Недостатки технологий.

Обзор подходов к вёрстке.

• Классический подход.
• Независимые блоки.
• Атомарный подход.
• Компоненты и модули.

Методология БЭМ.

• Зачем всё так усложнять.
• Как разбить интерфейс на блоки.
• Элементы и модификаторы.
• Ошибки и узкие места.

Разбор учебного проекта по БЭМу.

Раздел 3
Препроцессоры и автоматизация
Понедельник с 19:00 до 21:30Лектор: Андрей Серёдкин

Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.

Стили на стероидах.

• Обзор препроцессоров.
• Новые возможности CSS.
• Сравнение возможностей.

Основные возможности.

• Сравнение Less и Sass.
• Переменные и математика.
• Вложенные селекторы.
• Операции с цветами.

Дополнительные возможности.

• Подключение файлов.
• Примеси и расширения.
• Организация кода.
• Сборка стилей.

Настройка окружения.

• Система сборки на Node.js.
• Сборщик Gulp.
• Автоматизация сборки и вотчеры.

Раздел 4
Адаптивные сетки
Четверг с 19:00 до 21:30Лектор: Николай Шабалин

Узнаем как создавать адаптивные сетки с использованием гридов и флексов.

Спецификация Grid Layout и раскладка по сетке макета.

• Устройство шаблонов: строки, колонки, линии, отступы.
• Ручная и автоматическая раскладка.
• Спецификация Box Alignment и выравнивание внутри сетки.
• Гриды для адаптивных макетов.

Спецификация Flexible Boxes и раскладка по сетке макета.

• Введение во флексы.
• Контейнер, элементы, оси.
• Алгоритм расчёта размеров элементов.
• Выравнивание и распределение элементов вдоль осей.
• Однострочный и многострочный контейнер, управление рядами.
• Особенности флексов при создании сеток.

Адаптивные сетки.

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

Учебник

Навыки построения сеток на гридах и флексах.

Создаём адаптивные сетки БЭМ-блоков учебного проекта.

Раздел 5
Адаптивные декоративные элементы
Четверг с 19:00 до 21:30Лектор: Андрей Серёдкин

Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.

Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта.

Переход от фиксированных сеток к резиновым. Тонкости флексов.

• Отличие «резины» от «фикса».
• Переход от пикселей к процентам.
• Резиновые колонки с точными размерами на флексах.
• Неточные резиновые колонки с помощью flex-grow.
• Флекс внутри флекса и элементы с резиновой высотой.
• Когда использовать резиновые сетки и насколько они сложнее.

Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта.

Раздел 6
Адаптивная графика
Четверг с 19:00 до 21:30Лектор: Николай Шабалин

Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.

Графика для экранов повышенной чёткости.

• В чём разница между физическими и логическими пикселями.
• Что такое «ретиновая» графика.
• Приёмы ретинизации содержимого веб-страницы.

Адаптивная графика.

• Тег на все случаи жизни — <picture>.
• Ретинизация контентных изображений с помощью атрибута srcset.
• Кадрирование изображений с помощью <source>.
• Использование современных форматов графики с помощью <source>.
• Изображения неопределённых размеров и sizes.

Ретинизируем и добавляем адаптивную графику в учебном проекте.

Раздел 7
Векторная графика и оптимизация
Понедельник с 19:00 до 21:30Лектор: Андрей Серёдкин

Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.

Использование SVG.

• Плюсы и минусы векторной графики.
• Подключение SVG внешним ресурсом.
• Встраивание SVG.

SVG-спрайты.

• Зачем нужны, в каких случаях полезны.
• Варианты реализации.

Стилизация SVG.

• Что...

Вам нужно зарегистрироваться для просмотра ссылки

Пожалуйста Войдите или Зарегистрируйтесь для просмотра скрытого текста.

or

Пожалуйста Войдите или Зарегистрируйтесь для просмотра скрытого текста.

Скачать:

Если у Вас нет Премиум статуса:

Преимущества VIP-подписки

Оформить VIP-Подписку