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

Складчина: [Специалист] 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 ак. ч.

Преподаватель: Тарасов Алексей Владимирович