- Регистрация
- 27 Авг 2018
- Сообщения
- 38,618
- Реакции
- 578,788
- Тема Автор Вы автор данного материала? |
- #1
Голосов: 0
ОПИСАНИЕ:
На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить.
Что вас ждёт на обучении:
- Глубокая теория
Сначала вы изучаете теорию: проходите тренажёры, смотрите лекции, экспериментируете с интерактивными демонстрациями и изучаете учебник.
Практика - Затем вы выполняете домашние задания, в котором работаете над своим проектом и закрепляете учебный материал.
Ревью кода - Наставник будет проверять качество выполнения заданий и делиться опытом, как можно сделать лучше.
Раздел 1. Старт
Понедельник с 19:00 до 21:00. Лектор: Николай Шабалин
Познакомимся с рабочим процессом на курсе.
Как проходит курс. Организационные вопросы
- Обзор личных проектов.
- Как работать с наставником.
- Критерии качества вёрстки.
- Защита личного проекта и получение сертификата.
- Зависимость заданий.
- Настройки личных проектов.
- Создание мастер-репозитория.
- Структура личных проектов.
Статьи
- Статьи, которые помогут выбрать редактор кода, разобраться с принципами работы консоли и начать работать с системой контроля версий.
- Получаем наставника.
- Настраиваем инструменты разработки, получаем графические макеты и создаём репозитории проектов.
- Отрабатываем процесс выполнения заданий. Вносим изменения в проект в отдельной ветке и предлагаем пулреквест в Гитхабе.
Четверг с 19:00 до 21:30. Лектор: Николай Шабалин
Приёмы создания надёжной вёрстки.
Зачем нужны методологии
- Порядок в коде.
- Работа в команде.
- Недостатки технологий.
- Классический подход.
- Независимые блоки.
- Атомарный подход.
- Компоненты и модули.
- Зачем всё так усложнять.
- Как разбить интерфейс на блоки.
- Элементы и модификаторы.
- Ошибки и узкие места.
Статьи
- Статьи о методологиях и стилях кодирования, которые помогут вам делать качественную разметку.
- Задание на тренировку разметки по методологии БЭМ: «для выделенного элемента выберите класс из списка».
- Задание на разметку страниц личного проекта.
Понедельник с 19:00 до 21:30
Лектор: Андрей Серёдкин
Взглянем на препроцессоры и разберёмся, чем они помогают в процессе вёрстки.
Стили на стероидах
- Обзор препроцессоров.
- Новые возможности CSS.
- Сравнение возможностей.
- Сравнение Less и Sass.
- Переменные и математика.
- Вложенные селекторы.
- Операции с цветами.
- Подключение файлов
- Примеси и расширения.
- Организация кода.
- Сборка стилей.
- Система сборки на Node.js.
- Сборщик Gulp.
- Автоматизация сборки и вотчеры.
Статьи
- 2 части тренажёров о работе препроцессора Less.
- Статьи о подходах к архитектуре CSS-кода, о возможностях препроцессоров и о настройках окружения для автоматизации.
- Забрать обновление Кекса из мастер-репозитория.
- Начать вёрстку личного проекта с помощью препроцессора.
Четверг с 19:00 до 21:30. Лектор: Николай Шабалин
Узнаем как создавать адаптивные сетки с использованием гридов и флексов.
Спецификация Grid Layout и раскладка по сетке макета
- Устройство шаблонов: строки, колонки, линии, отступы.
- Ручная и автоматическая раскладка.
- Спецификация Box Alignment и выравнивание внутри сетки.
- Гриды для адаптивных макетов.
- Введение во флексы.
- Контейнер, элементы, оси.
- Алгоритм расчёта размеров элементов.
- Выравнивание и распределение элементов вдоль осей.
- Однострочный и многострочный контейнер, управление рядами.
- Особенности флексов при создании сеток.
- Принципы перестроения сетки.
- Медиавыражения и брейкпоинты.
- Организация кода разных версий страницы: мобильной, планшетной и десктопной.
- Проблема двух вьюпортов на мобильных.
- Настройка вьюпорта.
Навыки построения сеток на гридах и флексах.
Создаём адаптивные сетки БЭМ-блоков учебного проекта.
Демонстрации
- 3 интерактивных демонстрации адаптивных сеток. Экспериментируйте с ними самостоятельно.
Статьи
- 3 части тренажёров для закрепления приёмов построения сеток.
- Статьи, которые помогут вам разобраться с адаптивностью, сложностями медиавыражений, особенностями вьюпорта.
- Задание на создание адаптивных сеток для всех страниц и состояний личного проекта.
Четверг с 19:00 до 21:30. Лектор: Андрей Серёдкин
Разбираемся с адаптивными декоративными элементами. Делаем адаптивную вёрстку с резиновыми сетками.
Завершаем адаптивную вёрстку БЭМ-блоков учебного проекта
Переход от фиксированных сеток к резиновым. Тонкости флексов
- Отличие «резины» от «фикса».
- Переход от пикселей к процентам.
- Резиновые колонки с точными размерами на флексах.
- Неточные резиновые колонки с помощью flex-grow.
- Флекс внутри флекса и элементы с резиновой высотой.
- Когда использовать резиновые сетки и насколько они сложнее.
Демонстрации
- 6 интерактивных демонстраций адаптивной вёрстки блоков на флексах.
- Статьи о тонкостях работы флексов.
- Задание на завершение адаптивной вёрстки страниц личного проекта.
Четверг с 19:00 до 21:30. Лектор: Николай Шабалин
Погружаемся в адаптивную и ретиновую графику. Разбираемся с форматами и их назначением.
Графика для экранов повышенной чёткости
- В чём разница между физическими и логическими пикселями.
- Что такое «ретиновая» графика.
- Приёмы ретинизации содержимого веб-страницы.
- Тег на все случаи жизни — <picture>.
- Ретинизация контентных изображений с помощью атрибута srcset.
- Кадрирование изображений с помощью <source>.
- Использование современных форматов графики с помощью <source>.
- Изображения неопределённых размеров и sizes.
Демонстрации
- 2 интерактивные демонстрации адаптивной графики.
- Статьи о тонкостях адаптивной графики.
- Забрать обновление Кекса из мастер-репозитория.
- Задание на ретинизацию изображений и подключение адаптивных изображений.
Понедельник с 19:00 до 21:30. Лектор: Андрей Серёдкин
Научимся использовать векторную графику всеми возможными способами. Разберёмся, как использовать графику оптимально.
Использование SVG
- Плюсы и минусы векторной графики.
- Подключение SVG внешним ресурсом.
- Встраивание SVG.
- Зачем нужны, в каких случаях полезны.
- Варианты реализации.
- Что можно, а что нельзя.
- Анимация.
- Адаптивность.
- Особенности экспорта из Figma.
- Дожимаем и оптимизируем SVG.
- Доступность.
- Сжатие с потерями и без.
- Обзор возможностей оптимизатора Squoosh.
- Обзор формата WebP и особенностей его применения.
- Интерактивная демонстрация примеров работы SVG.
Статьи
- 2 части тренажёров о работе с SVG.
- Статьи о тонкостях адаптивной графики, об особенностях векторной графики и почему разработчики должны выбирать правильные форматы графики.
- Задание на подключение разных версий изображений для разных состояний личного проекта.
Четверг с 19:00 до 21:30Лектор: Николай Шабалин
Подготовим сборку проекта для его публикации.
Оптимизация
- Минификация CSS-кода.
- Оптимизация изображений.
- Сборка и минификация SVG-спрайта.
Статьи
- Статьи о погружении в автоматизацию: зачем это нужно и в чём разница между инструментами.
- Набор необходимых инструментов для автоматизации с помощью Gulp.
- Задание на подготовку автоматизированной сборки проекта с необходимыми оптимизациями файлов личного проекта.
Понедельник с 19:00 до 21:30Лектор: Андрей Серёдкин
Разберёмся с производительностью вёрстки и попробуем оптимизировать узкие места.
Обзор трендов скорости интернета
- Количество и объём ресуров.
- Разница между типами ресурсов.
- Метрики загрузки.
- Области ответственности между бэкендом и фронтендом.
- Приоритеты загрузки.
- Инструменты анализа.
- Последствия медленной загрузки.
- Форматы и браузерная поддержка.
- Негативные эффекты при загрузке.
- Управление отрисовкой с помощью font-display.
- Анализ скорости с помощью Lighthouse.
- Чтение отчёта Lighthouse.
- Альтернативные инструменты.
- Подсказки по загрузке ресурсов.
СКАЧАТЬ: