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