Цель курса:
По окончании курса Вы будете уметь:
•Самостоятельно выбирать программные средства разработки в соответствии со своими задачами
•Эффективно организовывать разработку кода
•Писать код HTML и CSS в соответствии со стандартами
•Консорциума W3C
•Верстать веб-страницы с применением современных технологий HTML и CSS: анимация, трансформация, разные виды display, в том числе flex
•Создавать мобильные версии страниц
Модуль 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-макета
•Практическая работа: Создание мобильной версии страницы