Курс HTML/CSS-фахівець

Курс ознайомить з основами HTML та CSS. Отриманні навички зможете застосувати на практиці та навчитесь перетворювати намальований дизайнером макет в живий сайт.

Програма курсу

Розробка інтерфейсів з нуля

• Що потрібно знати.
• Для чого потрібна ця професія.
• Що таке веб.
• Шляхи розвитку.

Початок роботи

• Налаштування середовища.
• Програми для роботи.
• Завантаження першого сайту.

Введення у HTML

• Теги та атрибути.
• Семантика.
• Робота з текстом.
• Зображення.
• Інтерактивні елементи.
• Списки.

Продовження HTML

• Інструменти розробника.
• Таблиці.
• Символьні підстановки.
• Медіаконтент, фрейм.
• Оформлення і валідація коду.

Введення в CSS

• Підключення стилів.
• Синтаксис, селектори.
• Каскадність і специфічність.
• CSS змінні.

Шрифти

• Підключення шрифтів.
• Локальні шрифти.
• Оформлення тексту.

Блокова модель

• Геометрія елемента
• Типи елемента.
• Структурні псевдокласи.

Flexbox

• Основні концепції.
• Flex-контейнер і flex-елемент.
• Практичне застосування.

Розкладка CSS Grid

• Основні концепції.
• Grid-контейнер.
• Grid-елемент.
• Практичне застосування.

Декоративні ефекти

• Типи зображень.
• Фон.
• Градієнти.
• Тінь.
• Псевдоелементи.

Графіка

• Растрова графіка.
• Векторна графіка. SVG.
• Додавання SVG на сторінку.
• SVG-спрайт.

Позиціонування

• Типи позиціонування.
• Властивість overflow.
• Накладання елементів.

Анімація

• Трансформація.
• Переходи.
• Анімація.

Створення веб-форм

• Основи роботи.
• Елементи форм.
• Групування полів.

Валідація веб-форм

• Види валідації.
• Перевірка введених значень.
• Псевдокласи стану.

Препроцесори

• Препроцесори SASS, SCSS.
• Вкладені правила.
• Директиви.
• Вендорні префікси.

CSS Методології

• Навіщо потрібні методології.
• Методологія БЕМ.
• Блок, елемент, модифікатор.

Адаптивність і Адаптивна графіка

• Типи і види верстки.
• CSS media запити.
• Стратегії Mobile і Desktop first.
• Адаптив і ретинізація фонових та контентних зображень.

Фінальна робота

• Фінальний модуль та отримання диплому.

Особливості курсу

• Заняття проходять у зручний час
• Практичні домашні завдання
• Додаткові переваги у пакеті "Pro"
• Доступ до особистого кабінету із записами занять

Викладачі курсу

Дмитро Рябовол - Markup developer at Studytube.