HTML и CSS Профессиональный курс часть 2

Мова викладання в курсі — російська. Незабаром буде доступна українська версія цього курсу.

Видеозаписи лекций без обратной связи и участия преподавателя. Вы получите доступ к материалам сразу после оплаты.

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

— Актуальные стандарты качества: не нужно переучиваться после курса.
— Понимание полного цикла работы верстальщика.
— Фундаментальные и структурированные знания необходимых технологий.
— Опыт работы с дедлайнами и планирования работы.

Содержание

1. Введение (Теоретическая лекция). Системы контроля версий.

Зачем нужны системы контроля версий.
— Обзор возможностей и работа с Гитом.
— Работа с ветками: создание, синхронизация, слияние.
— Конфликты и их разрешение.
— Обзор Гитхаба.
— Рабочий процесс на интенсиве.
— Зависимость заданий.
— Настройки личных проектов.
— Создание мастер-репозитория.
— Структура личных проектов.

2. Методологии вёрстки (Теоретическая лекция). Приёмы создания надёжной вёрстки.

Зачем нужны методологии.
— Порядок в коде.
— Работа в команде.
— Недостатки технологий.

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

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

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

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

Стили на стероидах.
— Обзор препроцессоров.
— Фантазийный CSS.
— Новые возможности CSS.

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

Дополнительные возможности.
— Подключение файлов.
— Примеси и расширения.
— Организация кода.
— Сборка стилей.

Настройка окружения.
— Система сборки на Node.js.
— Сборщики Gulp и Grunt.
— Автоматизация сборки и вотчеры.

4. Адаптивные сетки (Практическая лекция). Узнаем как создавать адаптивные сетки с использованием флексбоксов.

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

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

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

5. Адаптивные декоративные элементы (Практическая лекция). Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.

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

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

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

6. Адаптивная графика (Теоретическая лекция). Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.

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

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

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

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

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

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

Стилизация SVG.
— Что можно, а что нельзя.
— Анимация.
— Адаптивность.

Оптимизация и доступность SVG.
— Особенности экспорта из Illustrator и Sketch.
— Дожимаем и оптимизируем SVG.
— Доступность.

Оптимизация растровой графики.
— Сжатие lossless и с потерей качества.
— Обзор формата webp и особенностей его применения

8. Погружение в автоматизацию (Практическая лекция). Подготовим сборку проекта для его публикации.

Решим для себя, что лучше для автоматизации Gulp или Grunt.

Оптимизация.
— Минификация CSS-кода.
— Оптимизация изображений.
— Сборка и минификация SVG-спрайта.

Как держать код для разработчика удобным, а для браузеров — быстрым.

9. Производительность вёрстки (Теоретическая лекция).Разберёмся с производительностью вёрстки и попробуем оптимизировать «узкие места».

Как подключать внешние шрифты лучше всего.
— Отличается ли быстродействие сайта на десктопе от мобильного.
— Что нужно знать, когда пользуешься CSS-анимацией и плавными переходами.
— Что нужно знать о перерисовке и перекомпоновке страниц.

10. Как не потеряться на рынке труда. Трудоустройство, поиск заказов, оценка работы

Какая вообще бывает работа?
— В офисе
— На фрилансе

Поиск работы

Как оценивать себя и проходить собеседования

С чем едят гриды (бонусная лекция из 13 потока)

— Введение в гриды.
— Вёртска Барбешопа.

11. Финал. Итоги интенсива.