Раздел №1. Введение
Просмотрев этот раздел, Вы узнаете, как наиболее эффективно проходить курс, узнаете более подробно про вёрстку, а также про её критерии качества. Так же Вы познакомитесь с исходным кодом Web-страницы, и сможете уже понять, из каких частей она состоит и как они между собой взаимосвязаны.
Раздел состоит из 3-х видеоуроков:
- Как проходить курс?
- Что такое вёрстка и каковы её задачи?
- Как выглядит Web-страница изнутри?
Раздел №2. Изучаем HTML
В данном разделе Вы получите всё необходимое, что Вам нужно знать по HTML, с упором именно на последнюю 5-ю версию этого языка. Вы узнаете, какой редактор лучше всего использовать для написания HTML-кода, получите все знания по тому, как выводить самый разнообразный контент на странице, научитесь правильно проектировать структуру страницы, согласно станда
Раздел состоит из 15-ти уроков:
- Установка редактора
- Создание первой Web-страницы
- Добавление заголовков
- Теги для текста
- Добавление списков
- Добавление изображений
- Добавление ссылок
- Организация контента на странице
- Элемент iframe
- Таблицы
- Формы
- Добавление видео
- Добавление аудио
- Добавление favicon
- Мнемоники в HTML
Раздел №3. Изучаем CSS
Если HTML отвечает за разметку Web-страницы, то CSS отвечает уже за внешний вид. И в данном разделе, состоящем из 14 уроков, Вы его отлично изучите:
- Основы CSS
- Как подключить CSS
- Подключение шрифтов
- Внешний вид текста
- Единицы измерения
- Селекторы
- Внешний вид списков
- Внешний вид блоков
- Задание фона
- Градиент
- Обтекание блоков
- Позиционирование блоков
- Анимация
- Трансформации
После прохождения раздела по CSS у Вас уже будет полный багаж знаний для успешной вёрстки сайтов любой сложности. Однако, без практики Вам будет сложно, поэтому чтобы упростить процесс обучения, были записаны следующие два раздела.
Раздел №4. Вёрстка страниц
Поскольку начинать надо с чего-то простого, в этом разделе мы сверстаем следующую страницу, применяя знания из предыдущих разделов. Эта страница, с одной стороны, несложная, с другой стороны, имеет множество классических примеров вёрстки, с которыми я Вас как раз и познакомлю. Вы увидите, как с нуля верстается полноценная Web-страница от начала и до конца.
Сам раздел состоит из 6-ти уроков:
- Как правильно верстать страницу?
- Подготовительные работы
- Верхнее меню
- Форма загрузки файла
- Галерея
- Подвал и подведение итогов
После просмотра этих уроков у Вас уже будет полное понимание того, как верстаются Web-страницы, и Вы уже сможете легко верстать несложные сайты.
Раздел №5. Пример сложной верстки
Разумеется, после примера достаточной простой вёрстки, нужно, чтобы Вы увидели, как верстается сложная Web-страница. И весь процесс вёрстки сложной страницы Вы увидите в этом разделе.
- Подготовительные работы
- Логотип и верхняя часть сайта
- Верхнее меню и форма поиска
- Заголовок и галерея
- Навигация и нижний баннер
- Нижнее меню, логотип и баннер
- Подвал
- Подведение итогов
После прохождения данного раздела Вы научитесь на практике применять FlexBox, а также уже сможете верстать страницы любой сложности. А с опытом будете делать это ещё и быстро.
Раздел №6. Адаптивная вёрстка
Поскольку с каждым годом доля мобильного трафика растёт, встаёт вопрос об адаптации сайтов под мобильные устройства.
Именно этому Вы и научитесь в этом разделе из 7-ми уроков:
- Что такое адаптивная вёрстка?
- Медиа-запросы
- Адаптация верхней части
- Адаптация центральной части
- Адаптация навигации по страницам
- Адаптация нижней части
- Заключение
