Курс разработан для тех, кто хочет сменить профессию и стать высокооплачиваемым профессионалом. Он подойдёт для работающих людей, у которых мало времени. На этом курсе вы научитесь делать настоящие проекты, такие же по уровню сложности, как в индустрии. И будете делать их правильно, чтобы после обучения выдавать результат высокого уровня, за который компании готовы платить. Во время курса вы будете работать как профессиональные верстальщики: создадите разметку по методологии БЭМ, будете писать CSS-код на препроцессорах, сделаете адаптивную сетку, поработаете с адаптивной и ретиновой графикой и подготовите автоматизацию сборки проекта для публикации. На каждом этапе вашу работу будет проверять и комментировать личный наставник.
Раздел 1 Введение Как проходит курс. Организационные вопросы.
Обзор личных проектов.
Как работать с наставником.
Критерии качества вёрстки.
Защита личного проекта и получение сертификата.
Рабочий процесс на интенсиве.
Зависимость заданий.
Настройки личных проектов.
Создание мастер-репозитория.
Структура личных проектов.
Раздел 2 Методологии вёрстки
Зачем нужны методологии.
Порядок в коде.
Работа в команде.
Недостатки технологий.
Обзор подходов к вёрстке.
Классический подход.
Независимые блоки.
Атомарный подход.
Компоненты и модули.
Методология БЭМ.
Зачем всё так усложнять.
Как разбить интерфейс на блоки.
Элементы и модификаторы.
Ошибки и узкие места.
Разбор учебного проекта по БЭМу.
Вторая неделя Раздел 3 Препроцессоры и автоматизация
Стили на стероидах.
Обзор препроцессоров.
Новые возможности CSS.
Сравнение возможностей.
Основные возможности.
Сравнение Less и Sass.
Переменные и математика.
Вложенные селекторы.
Операции с цветами.
Дополнительные возможности.
Подключение файлов.
Примеси и расширения.
Организация кода.
Сборка стилей.
Настройка окружения.
Система сборки на Node.js.
Сборщик Gulp.
Автоматизация сборки и вотчеры.
Раздел 4 Адаптивные сетки
Спецификация Grid Layout и раскладка по сетке макета.
Устройство шаблонов: строки, колонки, линии, отступы.
Ручная и автоматическая раскладка.
Спецификация Box Alignment и выравнивание внутри сетки.
Гриды для адаптивных макетов.
Спецификация Flexible Boxes и раскладка по сетке макета.
Введение во флексы.
Контейнер, элементы, оси.
Алгоритм расчёта размеров элементов.
Выравнивание и распределение элементов вдоль осей.
Однострочный и многострочный контейнер, управление рядами.
Особенности флексов при создании сеток.
Адаптивные сетки.
Принципы перестроения сетки.
Медиавыражения и брейкпоинты.
Организация кода разных версий страницы: мобильной, планшетной и десктопной.
Проблема двух вьюпортов на мобильных.
Настройка вьюпорта.
Третья неделя Раздел 5 Адаптивные декоративные элементы
Переход от фиксированных сеток к резиновым. Тонкости флексов.
Отличие «резины» от «фикса».
Переход от пикселей к процентам.
Резиновые колонки с точными размерами на флексах.
Неточные резиновые колонки с помощью flex-grow.
Флекс внутри флекса и элементы с резиновой высотой.
Когда использовать резиновые сетки и насколько они сложнее.
Делаем резиново-адаптивную вёрстку БЭМ-блоков учебного проекта.
Раздел 6 Адаптивная графика
Графика для экранов повышенной чёткости.
В чём разница между физическими и логическими пикселями.
Что такое «ретиновая» графика.
Приёмы ретинизации содержимого веб-страницы.
Адаптивная графика.
Тег на все случаи жизни — .
Ретинизация контентных изображений с помощью атрибута srcset.
Кадрирование изображений с помощью .
Использование современных форматов графики с помощью .
Изображения неопределённых размеров и sizes.
Ретинизируем и добавляем адаптивную графику в учебном проекте.
Четвёртая неделя Раздел 7 Векторная графика и оптимизация
Использование SVG.
Плюсы и минусы векторной графики.
Подключение SVG внешним ресурсом.
Встраивание SVG.
SVG-спрайты.
Зачем нужны, в каких случаях полезны.
Варианты реализации.
Стилизация SVG.
Что можно, а что нельзя.
Анимация.
Адаптивность.
Оптимизация и доступность SVG.
Особенности экспорта из Figma.
Дожимаем и оптимизируем SVG.
Доступность.
Оптимизация растровой графики.
Сжатие с потерями и без.
Обзор возможностей оптимизатора Squoosh.
Обзор формата WebP и особенностей его применения.
Пятая неделя Раздел 8 Погружение в автоматизацию
Оптимизация.
Минификация CSS-кода.
Оптимизация изображений.
Сборка и минификация SVG-спрайта.
Как держать код для разработчика удобным, а для браузеров — быстрым.
Раздел 9 Производительность вёрстки
Обзор трендов скорости интернета.
Количество и объём ресуров.
Разница между типами ресурсов.
Метрики загрузки.
Процесс загрузки страницы.
Области ответственности между бэкендом и фронтендом.
Приоритеты загрузки.
Инструменты анализа.
Последствия медленной загрузки.
Оптимизация шрифтов.
Форматы и браузерная поддержка.
Негативные эффекты при загрузке.
Управление отрисовкой с помощью font-display.
Аудит и подсказки.
Анализ скорости с помощью Lighthouse.
Чтение отчёта Lighthouse.
Альтернативные инструменты.
Подсказки по загрузке ресуров.
На электронную почту
На электронную почту после оплаты заказа
Стоимость доставки: 0рублей
У этого товара еще нет отзывов.
Вы приобрели товар? Поделитесь своим мнением с другими и возможно вы поможете кому-то сделать правильный выбор!
Некоторые объекты, размещенные на сайте, являются интеллектуальной собственностью компании StoreLand. Использование таких объектов установлено действующим законодательством РФ.
На сайте StoreLand имеются ссылки, позволяющие перейти на другие сайты. Компания StoreLand не несет ответственности за сведения, публикуемые на этих сайтах и предоставляет ссылки на них только в целях обеспечения удобства для посетителей своего сайта.
Личные сведения и безопасность
Компания StoreLand гарантирует, что никакая полученная от Вас информация никогда и ни при каких условиях не будет предоставлена третьим лицам, за исключением случаев, предусмотренных действующим законодательством Российской Федерации.
В определенных обстоятельствах компания StoreLand может попросить Вас зарегистрироваться и предоставить личные сведения. Предоставленная информация используется исключительно в служебных целях, а также для предоставления доступа к специальной информации.
Личные сведения можно изменить, обновить или удалить в любое время в разделе "Аккаунт" > "Профиль".
Чтобы обеспечить Вас информацией определенного рода, компания StoreLand с Вашего явного согласия может присылать на указанный при регистрации адрес электронный почты информационные сообщения. В любой момент Вы можете изменить тематику такой рассылки или отказаться от нее.
Как и многие другие сайты, StoreLand использует технологию cookie, которая может быть использована для продвижения нашего продукта и измерения эффективности рекламы. Кроме того, с помощью этой технологии StoreLand настраивается на работу лично с Вами. В частности без этой технологии невозможна работа с авторизацией в панели управления.
Сведения на данном сайте имеют чисто информативный характер, в них могут быть внесены любые изменения без какого-либо предварительного уведомления.
Чтобы отказаться от дальнейших коммуникаций с нашей компанией, изменить или удалить свою личную информацию, напишите нам через форму обратной связи