- Регистрация
- 22 Февраль 2018
- Сообщения
- 11.084
Автор: HTML Academy
Название: HTML и CSS. Адаптивная вёрстка и автоматизация (2023)
Описание:
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Что вас ждёт на обучении:
- Глубокая теория
Сначала вы изучаете теорию: проходите тренажёры, смотрите лекции, экспериментируете с интерактивными демонстрациями и изучаете учебник.
Практика
- Затем вы выполняете домашние задания, в котором работаете над своим проектом и закрепляете учебный материал.
Ревью кода
- Наставник будет проверять качество выполнения заданий и делиться опытом, как можно сделать лучше.
Программа курса
Раздел 1. Старт
Понедельник с 19:00 до 21:00. Лектор: Николай Шабалин
Познакомимся с рабочим процессом на курсе.
Как проходит курс. Организационные вопросы
- Обзор личных проектов.
- Как работать с наставником.
- Критерии качества вёрстки.
- Защита личного проекта и получение сертификата.
Рабочий процесс на курсе
- Зависимость заданий.
- Настройки личных проектов.
- Создание мастер-репозитория.
- Структура личных проектов.
Скринкасты
Статьи
- Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы консоли и начать работать с системой контроля версий.
Проекты
- Получаем наставника.
- Настраиваем инструменты разработки, получаем графические макеты и создаём репозитории проектов.
- Отрабатываем процесс выполнения заданий. Вносим изменения в проект в отдельной ветке и предлагаем пулреквест в Гитхабе.
Раздел 2. Методологии вёрстки
Четверг с 19:00 до 21:30. Лектор: Николай Шабалин
Приёмы создания надёжной вёрстки.
Зачем нужны методологии
- Порядок в коде.
- Работа в команде.
- Недостатки технологий.
Обзор подходов к вёрстке
- Классический подход.
- Независимые блоки.
- Атомарный подход.
- Компоненты и модули.
Методология БЭМ
- Зачем всё так усложнять.
- Как разбить интерфейс на блоки.
- Элементы и модификаторы.
- Ошибки и узкие места.
Разбор учебного проекта по БЭМу
Статьи
- Статьи о методологиях и стилях кодирования, которые помогут вам делать качественную разметку.
Проекты
- Задание на тренировку разметки по методологии БЭМ: «для выделенного элемента выберите класс из списка».
- Задание на разметку страниц личного проекта.
Раздел 3. Препроцессоры и автоматизация
Понедельник с 19:00 до 21:30
Лектор: Андрей Серёдкин
Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.
Стили на стероидах
- Обзор препроцессоров.
- Новые возможности CSS.
- Сравнение возможностей.
Основные возможности
- Сравнение Less и Sass.
- Переменные и математика.
- Вложенные селекторы.
- Операции с цветами.
Дополнительные возможности
- Подключение файлов
- Примеси и расширения.
- Организация кода.
- Сборка стилей.
Настройка окружения
- Система сборки на Node.js.
- Сборщик Gulp.
- Автоматизация сборки и вотчеры.
Тренажёры
Статьи
- 2 части тренажёров о работе препроцессора Less.
- Статьи о подходах к архитектуре CSS-кода, о возможностях препроцессоров и о настройках окружения для автоматизации.
Проекты
- Забрать обновление Кекса из мастер-репозитория.
- Начать вёрстку личного проекта с помощью препроцессора.
Раздел 4. Адаптивные сетки
Четверг с 19:00 до 21:30. Лектор: Николай Шабалин
Узнаем как создавать адаптивные сетки с использованием гридов и флексов.
Спецификация Grid Layout и раскладка по сетке макета
- Устройство шаблонов: строки, колонки, линии, отступы.
- Ручная и автоматическая раскладка.
- Спецификация Box Alignment и выравнивание внутри сетки.
- Гриды для адаптивных макетов.
Спецификация Flexible Boxes и раскладка по сетке макета
- Введение во флексы.
- Контейнер, элементы, оси.
- Алгоритм расчёта размеров элементов.
- Выравнивание и распределение элементов вдоль осей.
- Однострочный и многострочный контейнер, управление рядами.
- Особенности флексов при создании сеток.
Адаптивные сетки
- Принципы перестроения сетки.
- Медиавыражения и брейкпоинты.
- Организация кода разных версий страницы: мобильной, планшетной и десктопной.
- Проблема двух вьюпортов на мобильных.
- Настройка вьюпорта.
Учебник
Навыки построения сеток на гридах и флексах.
Создаём адаптивные сетки БЭМ-блоков учебного проекта.
Демонстрации
- 3 интерактивных демонстрации адаптивных сеток. Экспериментируйте с ними самостоятельно.
Тренажёры
Статьи
- 3 части тренажёров для закрепления приёмов построения сеток.
- Статьи, которые помогут вам разобраться с адаптивностью, сложностями медиавыражений, особенностями вьюпорта.
Проекты
- Задание на создание адаптивных сеток для всех страниц и состояний личного проекта.
Раздел 5. Адаптивные декоративные элементы
Четверг с 19:00 до 21:30. Лектор: Андрей Серёдкин
Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.
Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта
Переход от фиксированных сеток к резиновым. Тонкости флексов
- Отличие «резины» от «фикса».
- Переход от пикселей к процентам.
- Резиновые колонки с точными размерами на флексах.
- Неточные резиновые колонки с помощью flex-grow.
- Флекс внутри флекса и элементы с резиновой высотой.
- Когда использовать резиновые сетки и насколько они сложнее.
Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта
Демонстрации
- 6 интерактивных демонстраций адаптивной вёрстки блоков на флексах.
Статьи
- Статьи о тонкостях работы флексов.
Проекты
- Задание на завершение адаптивной вёрстки страниц личного проекта.
Раздел 6. Адаптивная графика
Четверг с 19:00 до 21:30. Лектор: Николай Шабалин
Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.
Графика для экранов повышенной чёткости
- В чём разница между физическими и логическими пикселями.
- Что такое «ретиновая» графика.
- Приёмы ретинизации содержимого веб-страницы.
Адаптивная графика
- Тег на все случаи жизни — <picture>.
- Ретинизация контентных изображений с помощью атрибута srcset.
- Кадрирование изображений с помощью <source>.
- Использование современных форматов графики с помощью <source>.
- Изображения неопределённых размеров и sizes.
Ретинизируем и добавляем адаптивную графику в учебном проекте.
Демонстрации
- 2 интерактивные демонстрации адаптивной графики.
Статьи
- Статьи о тонкостях адаптивной графики.
Проекты
- Забрать обновление Кекса из мастер-репозитория.
- Задание на ретинизацию изображений и подключение адаптивных изображений.
Раздел 7. Векторная графика и оптимизация
Понедельник с 19:00 до 21:30. Лектор: Андрей Серёдкин
Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.
Использование SVG
- Плюсы и минусы векторной графики.
- Подключение SVG внешним ресурсом.
- Встраивание SVG.
SVG-спрайты
- Зачем нужны, в каких случаях полезны.
- Варианты реализации.
Стилизация SVG
- Что можно, а что нельзя.
- Анимация.
- Адаптивность.
Оптимизация и доступность SVG
- Особенности экспорта из Figma.
- Дожимаем и оптимизируем SVG.
- Доступность.
Оптимизация растровой графики
- Сжатие с потерями и без.
- Обзор возможностей оптимизатора Squoosh.
- Обзор формата WebP и особенностей его применения.
Демонстрации
- Интерактивная демонстрация примеров работы SVG.
Тренажёры
Статьи
- 2 части тренажёров о работе с SVG.
- Статьи о тонкостях адаптивной графики, об особенностях векторной графики и почему разработчики должны выбирать правильные форматы графики.
Проекты
- Задание на подключение разных версий изображений для разных состояний личного проекта.
Раздел 8. Погружение в автоматизацию
Четверг с 19:00 до 21:30Лектор: Николай Шабалин
Подготовим сборку проекта для его публикации.
Оптимизация
- Минификация CSS-кода.
- Оптимизация изображений.
- Сборка и минификация SVG-спрайта.
Как держать код для разработчика удобным, а для браузеров — быстрым.
Статьи
- Статьи о погружении в автоматизацию: зачем это нужно и в чём разница между инструментами.
- Набор необходимых инструментов для автоматизации с помощью Gulp.
Проекты
- Задание на подготовку автоматизированной сборки проекта с необходимыми оптимизациями файлов личного проекта.
Раздел 9. Производительность вёрстки
Понедельник с 19:00 до 21:30Лектор: Андрей Серёдкин
Разберёмся с производительностью вёрстки и попробуем оптимизировать узкие места.
Обзор трендов скорости интернета
- Количество и объём ресуров.
- Разница между типами ресурсов.
- Метрики загрузки.
Процесс загрузки страницы
- Области ответственности между бэкендом и фронтендом.
- Приоритеты загрузки.
- Инструменты анализа.
- Последствия медленной загрузки.
Оптимизация шрифтов
- Форматы и браузерная поддержка.
- Негативные эффекты при загрузке.
- Управление отрисовкой с помощью font-display.
Аудит и подсказки
- Анализ скорости с помощью Lighthouse.
- Чтение отчёта Lighthouse.
- Альтернативные инструменты.
- Подсказки по загрузке ресурсов.
Подробнее:
Скачать:
Название: HTML и CSS. Адаптивная вёрстка и автоматизация (2023)
Описание:
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Что вас ждёт на обучении:
- Глубокая теория
Сначала вы изучаете теорию: проходите тренажёры, смотрите лекции, экспериментируете с интерактивными демонстрациями и изучаете учебник.
Практика
- Затем вы выполняете домашние задания, в котором работаете над своим проектом и закрепляете учебный материал.
Ревью кода
- Наставник будет проверять качество выполнения заданий и делиться опытом, как можно сделать лучше.
Программа курса
Раздел 1. Старт
Понедельник с 19:00 до 21:00. Лектор: Николай Шабалин
Познакомимся с рабочим процессом на курсе.
Как проходит курс. Организационные вопросы
- Обзор личных проектов.
- Как работать с наставником.
- Критерии качества вёрстки.
- Защита личного проекта и получение сертификата.
Рабочий процесс на курсе
- Зависимость заданий.
- Настройки личных проектов.
- Создание мастер-репозитория.
- Структура личных проектов.
Скринкасты
Статьи
- Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы консоли и начать работать с системой контроля версий.
Проекты
- Получаем наставника.
- Настраиваем инструменты разработки, получаем графические макеты и создаём репозитории проектов.
- Отрабатываем процесс выполнения заданий. Вносим изменения в проект в отдельной ветке и предлагаем пулреквест в Гитхабе.
Раздел 2. Методологии вёрстки
Четверг с 19:00 до 21:30. Лектор: Николай Шабалин
Приёмы создания надёжной вёрстки.
Зачем нужны методологии
- Порядок в коде.
- Работа в команде.
- Недостатки технологий.
Обзор подходов к вёрстке
- Классический подход.
- Независимые блоки.
- Атомарный подход.
- Компоненты и модули.
Методология БЭМ
- Зачем всё так усложнять.
- Как разбить интерфейс на блоки.
- Элементы и модификаторы.
- Ошибки и узкие места.
Разбор учебного проекта по БЭМу
Статьи
- Статьи о методологиях и стилях кодирования, которые помогут вам делать качественную разметку.
Проекты
- Задание на тренировку разметки по методологии БЭМ: «для выделенного элемента выберите класс из списка».
- Задание на разметку страниц личного проекта.
Раздел 3. Препроцессоры и автоматизация
Понедельник с 19:00 до 21:30
Лектор: Андрей Серёдкин
Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.
Стили на стероидах
- Обзор препроцессоров.
- Новые возможности CSS.
- Сравнение возможностей.
Основные возможности
- Сравнение Less и Sass.
- Переменные и математика.
- Вложенные селекторы.
- Операции с цветами.
Дополнительные возможности
- Подключение файлов
- Примеси и расширения.
- Организация кода.
- Сборка стилей.
Настройка окружения
- Система сборки на Node.js.
- Сборщик Gulp.
- Автоматизация сборки и вотчеры.
Тренажёры
Статьи
- 2 части тренажёров о работе препроцессора Less.
- Статьи о подходах к архитектуре CSS-кода, о возможностях препроцессоров и о настройках окружения для автоматизации.
Проекты
- Забрать обновление Кекса из мастер-репозитория.
- Начать вёрстку личного проекта с помощью препроцессора.
Раздел 4. Адаптивные сетки
Четверг с 19:00 до 21:30. Лектор: Николай Шабалин
Узнаем как создавать адаптивные сетки с использованием гридов и флексов.
Спецификация Grid Layout и раскладка по сетке макета
- Устройство шаблонов: строки, колонки, линии, отступы.
- Ручная и автоматическая раскладка.
- Спецификация Box Alignment и выравнивание внутри сетки.
- Гриды для адаптивных макетов.
Спецификация Flexible Boxes и раскладка по сетке макета
- Введение во флексы.
- Контейнер, элементы, оси.
- Алгоритм расчёта размеров элементов.
- Выравнивание и распределение элементов вдоль осей.
- Однострочный и многострочный контейнер, управление рядами.
- Особенности флексов при создании сеток.
Адаптивные сетки
- Принципы перестроения сетки.
- Медиавыражения и брейкпоинты.
- Организация кода разных версий страницы: мобильной, планшетной и десктопной.
- Проблема двух вьюпортов на мобильных.
- Настройка вьюпорта.
Учебник
Навыки построения сеток на гридах и флексах.
Создаём адаптивные сетки БЭМ-блоков учебного проекта.
Демонстрации
- 3 интерактивных демонстрации адаптивных сеток. Экспериментируйте с ними самостоятельно.
Тренажёры
Статьи
- 3 части тренажёров для закрепления приёмов построения сеток.
- Статьи, которые помогут вам разобраться с адаптивностью, сложностями медиавыражений, особенностями вьюпорта.
Проекты
- Задание на создание адаптивных сеток для всех страниц и состояний личного проекта.
Раздел 5. Адаптивные декоративные элементы
Четверг с 19:00 до 21:30. Лектор: Андрей Серёдкин
Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.
Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта
Переход от фиксированных сеток к резиновым. Тонкости флексов
- Отличие «резины» от «фикса».
- Переход от пикселей к процентам.
- Резиновые колонки с точными размерами на флексах.
- Неточные резиновые колонки с помощью flex-grow.
- Флекс внутри флекса и элементы с резиновой высотой.
- Когда использовать резиновые сетки и насколько они сложнее.
Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта
Демонстрации
- 6 интерактивных демонстраций адаптивной вёрстки блоков на флексах.
Статьи
- Статьи о тонкостях работы флексов.
Проекты
- Задание на завершение адаптивной вёрстки страниц личного проекта.
Раздел 6. Адаптивная графика
Четверг с 19:00 до 21:30. Лектор: Николай Шабалин
Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.
Графика для экранов повышенной чёткости
- В чём разница между физическими и логическими пикселями.
- Что такое «ретиновая» графика.
- Приёмы ретинизации содержимого веб-страницы.
Адаптивная графика
- Тег на все случаи жизни — <picture>.
- Ретинизация контентных изображений с помощью атрибута srcset.
- Кадрирование изображений с помощью <source>.
- Использование современных форматов графики с помощью <source>.
- Изображения неопределённых размеров и sizes.
Ретинизируем и добавляем адаптивную графику в учебном проекте.
Демонстрации
- 2 интерактивные демонстрации адаптивной графики.
Статьи
- Статьи о тонкостях адаптивной графики.
Проекты
- Забрать обновление Кекса из мастер-репозитория.
- Задание на ретинизацию изображений и подключение адаптивных изображений.
Раздел 7. Векторная графика и оптимизация
Понедельник с 19:00 до 21:30. Лектор: Андрей Серёдкин
Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.
Использование SVG
- Плюсы и минусы векторной графики.
- Подключение SVG внешним ресурсом.
- Встраивание SVG.
SVG-спрайты
- Зачем нужны, в каких случаях полезны.
- Варианты реализации.
Стилизация SVG
- Что можно, а что нельзя.
- Анимация.
- Адаптивность.
Оптимизация и доступность SVG
- Особенности экспорта из Figma.
- Дожимаем и оптимизируем SVG.
- Доступность.
Оптимизация растровой графики
- Сжатие с потерями и без.
- Обзор возможностей оптимизатора Squoosh.
- Обзор формата WebP и особенностей его применения.
Демонстрации
- Интерактивная демонстрация примеров работы SVG.
Тренажёры
Статьи
- 2 части тренажёров о работе с SVG.
- Статьи о тонкостях адаптивной графики, об особенностях векторной графики и почему разработчики должны выбирать правильные форматы графики.
Проекты
- Задание на подключение разных версий изображений для разных состояний личного проекта.
Раздел 8. Погружение в автоматизацию
Четверг с 19:00 до 21:30Лектор: Николай Шабалин
Подготовим сборку проекта для его публикации.
Оптимизация
- Минификация CSS-кода.
- Оптимизация изображений.
- Сборка и минификация SVG-спрайта.
Как держать код для разработчика удобным, а для браузеров — быстрым.
Статьи
- Статьи о погружении в автоматизацию: зачем это нужно и в чём разница между инструментами.
- Набор необходимых инструментов для автоматизации с помощью Gulp.
Проекты
- Задание на подготовку автоматизированной сборки проекта с необходимыми оптимизациями файлов личного проекта.
Раздел 9. Производительность вёрстки
Понедельник с 19:00 до 21:30Лектор: Андрей Серёдкин
Разберёмся с производительностью вёрстки и попробуем оптимизировать узкие места.
Обзор трендов скорости интернета
- Количество и объём ресуров.
- Разница между типами ресурсов.
- Метрики загрузки.
Процесс загрузки страницы
- Области ответственности между бэкендом и фронтендом.
- Приоритеты загрузки.
- Инструменты анализа.
- Последствия медленной загрузки.
Оптимизация шрифтов
- Форматы и браузерная поддержка.
- Негативные эффекты при загрузке.
- Управление отрисовкой с помощью font-display.
Аудит и подсказки
- Анализ скорости с помощью Lighthouse.
- Чтение отчёта Lighthouse.
- Альтернативные инструменты.
- Подсказки по загрузке ресурсов.
Подробнее:
Для просмотра содержимого вам необходимо авторизоваться.
Скачать:
Скрытое содержимое могут видеть только члены группы Премиум.
Скрытый контент для пользователей All-dar.