Курс «HTML-верстка: с нуля до первого макета»

1.1 Базовая HTML-разметка

Разбираемся, как устроено клиент-серверное взаимодействие, и прослеживаем историю HTML. Осваиваем инструменты веб-разработчика и практическую работу с FTP-клиентом. Изучаем базовую структуру страницы, синтаксис языка, что такое теги и их атрибуты.

1.2 Знакомство с CSS

Погружаемся в каскадные таблицы стилей: разбираем ключевые принципы CSS, основы синтаксиса и основные способы подключения стилей к HTML-документу.

2. Основы HTML-разметки

2.1 Блочные и инлайновые элементы

Изучаем разницу между блочными и строчными элементами. Практикуемся с CSS-свойством display для управления отображением. Разбираем механику работы float для обтекаемых элементов и другие варианты позиционирования в потоке.

2.2 Семантическая разметка документа

Учимся использовать основные теги для работы с текстом, создаем списки, добавляем ссылки и изображения, работаем с таблицами и универсальными контейнерами div для структурирования контента.

2.3 Управление блоками в потоке

Анализируем основные схемы поведения элементов: от полного скрытия display: none до inline, block, inline-block и list-item. Учимся правильно применять каждую методику в зависимости от задачи.

2.4 Позиционирование блоков

Детально разбираем технологию обтекания с помощью float и все типы позиционирования: static, relative, absolute, fixed. Выясняем, когда и какой метод стоит выбрать для точного расположения элементов.

3. Знакомство с CSS

3.1 CSS селекторы

Осваиваем все типы селекторов: от базовых тегов и классов до контекстных, соседних и дочерних. Изучаем псевдоклассы, принципы наследования, каскада и систему приоритетов правил.

3.2 Стили текста и оформления

Работаем с единицами измерения для размеров и цветов. Учимся управлять шрифтами: цвет, размер, интерлиньяж. Настраиваем фон, маркеры списков, рамки и обводки для элементов.

3.3 Стили позиционирования, отступы и размеры блоков

Контролируем размеры блоков, внутренние поля padding и внешние отступы margin. Изучаем алгоритмы расчета итоговой ширины и высоты элемента для точной верстки.

4. Вёрстка сайта

4.1 Сетки

Создаем адаптивные сетки с использованием float и display: inline-block. Сравниваем плюсы и минусы подходов. На практике закрепляем приемы позиционирования и решаем типовые задачи: центрирование блока, липкий подвал, фиксированная шапка, верстка двух, трех и много-колоночных макетов с фиксированной и процентной шириной.

4.2 Процесс верстки сайта

Узнаем, как правильно подготовить макет к верстке. Разбираем пошаговый порядок работы над страницей и отдельными блоками. Изучаем методы тестирования готовой верстки на корректность.

4.3 Профессиональное оформление кода

Учимся оценивать качество верстки. Осваиваем соглашения по оформлению кода в HTML, CSS и JavaScript: принципы именования классов, переменных и методов. Перенимаем специфику работы профессиональных разработчиков.

4.4 Возможности JavaScript

Знакомимся с основами JavaScript: для чего он используется и как взаимодействует с HTML-документом. Смотрим наглядные примеры добавления интерактивности на страницу.

5. Детальное приближения результата верстки к макету

5.1 Работа с Adobe Photoshop, вёрстка в точном соответствии с макетом

Осваиваем типовые задачи верстальщика в Photoshop: работу со слоями, нарезку и сохранение ресурсов. Учимся соотносить единицы измерения, точно замерять расстояния и цвета для pixel-perfect верстки.

5.2 Особенности подготовки изображений для верстки

Изучаем популярные графические форматы и приемы их оптимизации для веба. Настраиваем полезные макросы и действия в Photoshop для ускорения рабочего процесса.