[loftschool] Основы вёрстки сайтов, 2019

​ За 5 недель качественно освойте верстку на HTML и CSS, и получите первый проект в портфолио. CSS Видеокурс Добавление стилей к HTML-страниц. hex, text, rgb, rgba, hsla. Создаём начальную структуру проекта. Разбираемся с CSS-селекторами и их синтаксисом. Отношение блоков между собой. Работа со шрифтами. Абсолютные и относительные пути. Работа с PSD-макетом Видеокурс Работа с дизайн-макетом Разбор PSD-макета на необходимые верстальщику изображения JPEG, PNG, SVG, GIF — различие в форматах хранения изображений Работа со слоями — необходимые команды и инструменты Настройка рабочего пространства Photoshop Горячие клавиши и приемы, ускоряющие работу Альтернативные инструменты для работы с макетом (adobe.Assets, Avocode, zeplin.io) Основы вёрстки Видеокурс Основы “блочной” вёрстки Поведение элементов: блочное и строчное Блочная модель элементов. Свойства и настройка поведения блоков Расположение блоков на странице. Вёрстка Свойства позиционирования элементов и приоритет наложения блоков Точные и относительные единицы измерения Стилизация элементов страницы Практический вебинар Часто используемые свойства CSS Оформление элементов страницы Переиспользование элементов. Модификаторы Префиксы Модификация готовых элементов Perfect Pixel 3 неделя Flexbox Видеокурс Разбираем новый модуль CSS — Flexbox Основные понятия в Flexbox Поведение Flexbox-layout Преимущества перед блочной версткой Управление пропорциями и порядками блоков Использование Flexbox в мобильной вёрстке Применение знаний на практике: верстаем макет на Flexbox Построение лейаута и БЭМ-нейминг Видеокурс Подготовка структуры документа для «боевого» шаблона Настройка стилей для рабочего шаблона. Normalize.css Теория логических блоков — смотрим на макет «издалека» Модульность. Правила и способы верстать независимыми блоками Методологии именований блоков и создания структуры БЭМ-нейминг: продвинутые техники использования Вёрстка страниц Практический вебинар Применение знаний на практике Вёрстка «боевых» страниц Применение знаний на практике Старт проекта «с нуля» Построение шаблона для работы 4 неделя Частые приемы вёрстки Видеокурс Частые приемы в вёрстке типовых элементов Приведение страниц в соответствие с дизайн-макетом Подготовка вёрстки для динамических элементов Вёрстка анимированных элементов CSS3-свойства Префиксы «новых» CSS-свойств. Кроссбраузерная работа со стилями Анимации CSS Видеокурс Плавное изменение состояний элементов CSS3-анимации. Рассмотрение свойств и принципов работы Keyframes: пишем покадровую анимацию Трансформация элементов Бесконечная анимация Применение анимаций на практике Практический вебинар Реализуем заданные анимации. Полезные навыки при работе с анимациями. Управление свойствами. Покадровые анимации. 5 неделя Подводим итоги курса Выпускной вебинар Выпускной Строим планы на будущее Подводим итоги Выпускной проект В течение курса, шаг за шагом мы вместе с вами выполним боевой проект — настоящий корпоративный сайт для одной из трёх выдуманных компаний. Начало обучения 1.10.2019 года.