[Специалист] HTML и CSS. Уровень 2. Создание сайтов на HTML 5 и СSS 3 (2019)

HTML и CSS. Уровень 2. Углубленный CSS и вёрстка макета ​ Для эффективного создания HTML-страницы по макету от веб-дизайнера нужно владеть инструментами быстрой удобной и вёрстки. С первого же занятия курса рассматривается установка и настройка необходимого инструментария для вёрстки и доп. плагинов, облегчающих работу. Последующие занятия на 90% посвящены работе с селекторами CSS3 (смотрим не только распространённые псевдо-классы, но и селектор цели, селекторы валидации элементов формы, повторяем/закрепляем селекторы атрибутов и т.д.) и свойствам CSS, которые понадобятся в работе при вёрстке. Особо яркие моменты курса - создание выпадающего меню, работа с многоколоночной страницей + flex, все лабораторные и финишная работа по вёрстке страницы на основе макета из PSD. Курс предназначен для веб-мастеров, начинающих верстальщиков, веб-дизайнеров, веб-программистов, оптимизаторов. Результатом курса будет сверстанная страницы из PSD-макета графического редактора и полное понимание процесса вёрстки. Тема​ Модуль 1. Эффективное использование инструментов разработки веб-страниц Инструменты: браузеры, редакторы, плагины Установка и настройка Brackets Методика поиска ошибок в коде Emmet и правила для HTML/CSS, Beautify Кодировки (повторение) Accesebility (доступность) Практическая работа: настройка и работа с Emmet в Brackets Модуль 2. CSS селекторы в CSS3 Универсальный, по тегу, классу и идентификатору Мультиклассы Селекторы по атрибутам Спрайты Псевдоклассы :link :visited :focus :hover :active Селекторы псевдоэлементов Функционал attr Селекторы nth- Селекторы :target :empty :enabled :disabled Селекторы валидации Комбинированные селекторы Специфичности селекторов Практическая работа: использование CSS селекторов Модуль 3. CSS свойства, модульная система CSS Единицы измерения. Размеры с vw, vh, vmin, vmax Блочная модель Работа с display, flex background, доп.св-ва. Мультифон Создание градиентов Переходы на transition Бой с тенью :| box-sizing и его значения margin, утекание margin, схлопывания min_max_width overflow Использование float, clear, overflow Варианты трёхколоночной вёрстки Позиционирование, центровка элемента z-index, клипирование Кроссбраузерная вёрстка Практическая работа: использование свойств CSS3 Модуль 4. Создание выпадающего меню с эффектами Оформление списков Создание счётчиков и сквозной нумерации Счётчики для div и span Таблицы, создание таблицы из списка Практическая работа: Создание выпадающего меню Трансформации, анимация Анимация выпадающего меню Разбиение по кадрам Практическая работа: построение выпадающего меню Модуль 5. Вёрстка HTML-форм и элементов форм Формы Кнопки и текстовые поля Оформление checkbox Практическая работа: вёрстка отдельных HTML-элементов формы Модуль 6. Работа со шрифтами @font-face Google Fonts Мобильная верстка (Повторение) Практическая работа: подключение сторонних шрифтов на странице Модуль 7. Финишная вёрстка макета Нарезка макета Сохранение изображений Создание структуры страницы Практическая работа: Вёрстка PSD-макета Практическая работа: Создание мобильной версии страницы -------------------------------------------------------------------------------------------------------- По окончании курса Вы будете уметь: Самостоятельно выбирать программные средства разработки в соответствии со своими задачами Эффективно организовывать разработку кода Писать код HTML и CSS в соответствии со стандартами Консорциума W3C Верстать веб-страницы с применением современных технологий HTML и CSS: анимация, трансформация, разные виды display, в том числе flex Создавать мобильные версии страниц Специалисты, обладающие этими знаниями и навыками, в настоящее время крайне востребованы. Большинство выпускников наших курсов делают успешную карьеру и пользуются уважением работодателей. Продолжительность курса - 32 ак. ч. Преподаватель: Тарасов Алексей Владимирович