Тема №1. Основы HTML
Лекция №1: Введение в веб-разработку и HTML + Редактор. Основные понятия веб-разработки. Роль HTML в структуре веб-страницы
Лекция №2: Структура HTML-документа. Теги, элементы, атрибуты. Основные блочные и строчные элементы
Лекция №3: Работа с текстовым контентом. Заголовки (h1 - h6). Параграфы (p). Горизонтальная линия (hr)
Лекция №4: Работа с списками. Неупорядоченные списки (ul, li). Упорядоченные списки (ol, li). Описание списков (dl, dt, dd)
Сам. задание + Решение задания: №1: Формирование веб-страницы статьи для сайта компании
Тестирование №1
Тема №2. Гиперссылки и мультимедиа
Лекция №5: Гиперссылки и навигация. Создание текстовых ссылок (a). Атрибуты href и target. Внутренние и внешние ссылки
Лекция №6: Работа с изображениями. Вставка изображений (img). Атрибуты src, alt, width, height
Лекция №7: Видео и аудио. Вставка видео и аудио (video, audio). Атрибуты контроля воспроизведения
Лекция №8: Формы и пользовательский ввод. Создание форм (form). Текстовые поля, кнопки, чекбоксы (input). Текстовые области (textarea)
Сам. задание + Решение задания: №2: Создать веб-страницу с формой обратной связи и добавить Видео и аудио элементы на сайт
Тестирование №2
Тема №3. Продвинутые техники HTML
Лекция №9: Таблицы и их структура. Создание таблиц (table). Заголовки и ячейки (th, td). Объединение ячеек
Лекция №10: Семантические элементы HTML 5. Значение семантических тегов (header, footer, article, section)
Лекция №11: Фреймы в HTML
Лекция №12: Расширенные возможности HTML. Спецсимволы и кодировка символов. Встраивание HTML в другие языки (например, PHP)
Сам. задание + Решение задания: №3: Создание веб-страницы с семантической разметкой
Тестирование №3
Тема №4. Основы CSS
Лекция №13: Введение в CSS. Основные понятия и синтаксис CSS. Внутренние и внешние стили
Лекция №14: Селекторы и их типы. Типовые селекторы: элементы, классы, идентификаторы. Комбинаторы и псевдоклассы
Лекция №15: Оформление текста и шрифты. Свойства для изменения размера, цвета и стиля текста. Подключение и стилизация шрифтов
Лекция №16: Цвета и фоны. Использование цветов в CSS (названия, hex, rgb). Настройка фоновых изображений
Сам. задание + Решение задания: №4: Создание веб-страницы для продажи туров
Тестирование №4
Тема №5. Позиционирование и блочная модель
Лекция №17: Box Model. Margin, padding, border. Влияние на размер элемента и его расположение
Лекция №18: Позиционирование элементов. Основные типы позиционирования: static, relative, absolute, fixed. Выравнивание и распределение элементов
Лекция №19: Отображение и видимость. Свойства display и visibility. Скрытие элементов
Лекция №20: Сброс стилей браузера и префиксы
Сам. задание + Решение задания: №5: Создание шахматной доски
Тестирование №5
Тема №6. Расширенные техники стилизации
Лекция №21: Псевдоэлементы и псевдоклассы. Использование :hover, :active, :before, :after. Стилизация различных состояний элементов
Лекция №22: Анимации и переходы. Основные принципы CSS-анимации. Создание плавных переходов между состояниями
Лекция №23: Основы гибкого макета Flexbox. Выравнивание элементов вдоль осей
Лекция №24: Grid. Создание сеток с использованием Grid Layout. Размещение элементов в ячейках сетки
Сам. задание + Решение задания: №6: Создание сайта видеохостинга с анимацией
Тестирование №6
Тема №7. Верстка. Работа с макетом
Лекция №25: Работа с figma для верстальщика и разбор макета
Лекция №26: Подготовка графики и базовой конструкции макета к верстке
Лекция №27: Нестандартные решение и дополнительные возможности
Тестирование №7
Тема №8. Дипломный проект
Сам. задание + Решение задания: №7: Создание (верстка) Landing page согласно макету Figma (Верстка landing page из figma)
Тема №1. Встроенные стили
Лекция №1: Вёрстка формы авторизации Интернет-магазина, добавление вспомогательных элементов и информации
Лекция №2: Создание списка товаров из Интернет-магазина. Общий макет, расположение элементов, верстка карточки товара, добавление специальных меток
Лекция №3: Вёрстка страницы для блога интернет-магазина. Отдельная статья и список статей. Оформление, вспомогательные элементы, call to action
Лекция №4: Создание простой диаграммы средствами HTML. Админка для владельца магазина. Круговая диаграмма. SVG элементы
Лекция №5: Таблица - список товаров в виде таблицы. Заголовок, элементы, цвет, кнопки
Сам. задание + Решение задания: №1: Экран добавления нового пользователя в систему
Тестирование №1
Тема №2. CSS файлы для создания стилей
Лекция №6: CSS файл для формы авторизации Интернет-магазина. Использование CSS стилей в отдельном файле с поддержкой responsive design
Лекция №7: CSS файл для списка товаров из Интернет-магазина. Реализация стилей в отдельном CSS файле. Добавление поддержки responsive design
Лекция №8: Вёрстка модальной формы добавления товара в интернет магазин. Использование CSS стилей в отдельном файле с поддержкой responsive design
Лекция №9: Вёрстка страницы информации об отдельном товаре. Создание стилей в отдельном CSS файле. Внедрение responsive design
Сам. задание + Решение задания: №2: Вёрстка адаптивного экрана добавления нового пользователя в систему
Тестирование №2
Тема №3. Фреймворк Tailwind CSS
Лекция №10: Вёрстка формы авторизации с использованием tailwind. Введение в CSS фреймворки. Tailwind CSS
Лекция №11: Реализация списка товаров из Интернет-магазина с использованием Tailwind, добавление responsive design
Лекция №12: Вёрстка модальной формы добавления товара с использованием Tailwind, добавление адаптивности
Лекция №13: Создание страницы информации об отдельном товаре при помощи Tailwind, добавление responsive design
Лекция №14: Вёрстка страница оплаты в фреймворке Tailwind, поддержка адаптивного дизайна
Сам. задание + Решение задания: №3: Вёрстка экрана добавления нового пользователя в систему, используя Tailwind CSS
Тестирование №3
Тема №4. Фреймворк Twitter Bootstrap
Лекция №15: Создание страницы логина в интернет магазине с помощью Bootstrap. Введение в Twitter Bootstrap
Лекция №16: Вёрстка списка товаров из Интернет-магазина в Bootstrap, добавление responsive design
Лекция №17: Создание отдельной статьи и списка статей в Bootstrap, поддержка адаптивного дизайна
Лекция №18: Создание простой диаграммы средствами HTML в Bootstrap, реализация responsive design
Сам. задание + Решение задания: №4: Вёрстка экрана добавления нового товара с помощью Bootstrap
Тестирование №4
Тема №5. Фреймворк Materialize CSS
Лекция №19: Создание экрана логина в интернет магазине с помощью Materialize. Основы работы во фреймворке Materialize CSS
Лекция №20: Вёрстка списка товаров из Интернет-магазина в Materialize, добавление адаптивного дизайна
Лекция №21: Создание dashboard в фреймворке Materialize. Размещение и дизайн карточек, график посетителей, диаграмма товаров и прибыли
Сам. задание + Решение задания: №5: Вёрстка экрана добавления товара с помощью Materialize CSS
Тестирование №5
Тема №6. Дипломный проект
Сам. задание + Решение задания: №6: Вёрстка страниц Интернет-магазина на основе шаблона
