Первая часть курса «HTML и CSS»
1. Знакомство с Html-разметкой. Инструментарий разработчика.1.1. Работа с FTP клиентом. Структура страницы. Cинтаксис HTML. 1.2. Обзор тегов ( head, html, body, title, meta), работа с тегами на странице.
2. Знакомство с CSS.
2.1. Основные принципы работы CSS. Синтаксис CSS. 2.2. Подключение CSS к HTML документу.
3. Работа с CSS селекторами. Cелекторы тегов, идентификаторы и классы.
3.1. Контекстные селекторы. Наследование и каскад. Приоритеты. Работа над типовыми ошибками.
4. Стили текста и оформления.
4.1. Работа со шрифтом. Цвет, размер, межстрочное расстояние и т.д. 4.2. Работа с фоном. Цвет, изображение. Маркеры списка. Рамки и обводки.
5. Работа с блочными и инлайновыми элементами.
5.1. Виды элементов. Различия и применение блочных и инлайновых элементов. 5.2. Свойство display. Изучение поведения элемента при отрисовке. Свойство float и «плавающие» элементы. 5.3. Другие виды поведения элементов. 5.4. Семантическая разметка документа. Теги для работы с текстом, оформление списков, работа со ссылками и изображениями, таблицы и контейнеры (div).
6. Стили позиционирования, отступы и размеры блоков.
6.1. Поля (padding) и отступы (margin). Положение на странице. Алгоритм расчета ширины и высоты элементов на странице.
7. Управление блоками в потоке.
7.1. Базовые способы поведения элементов на странице (display: none, display: inline, display: block, display: inline-block, display: list-item, table*) 7.2. Области применения тех или иных способов поведения элементов. 7.3. Позиционирование блоков (stati, Relative, Absolute, Fixed) с «плавающими» элементами и свойство float.. 7.4. Области применения тех или иных способов позиционирования.
8. Сетка. Базовая верстка.
8.1. Построение сетки с использованием float и display: inline-block. Преимущества и недостатки построения сетки с данными свойствами. 8.2. Позиционирование на странице. Отступы, фиксация ширины(центровка, 2,3 и более колонок), фиксация шапки, подвал, выносные элементы.
9. Верстка сайта. Пошаговый алгоритм создания.
10. Обзор типовых ошибок, проблемные участки кода, отображение страниц в браузерах. Секреты профессионалов. Принципы работы и профессиональный подход к созданию сайта — оформление кода с помощью CSS, HTML, JavaScript.