HTML & CSS

Работа с Emmet в Notepad++

ПРОГРАММА ИЗУЧЕНИЯ ДИСЦИПЛИНЫ HTML И CSS

Лекция 1. Быстрый старт

  • первый html документ
  • понятие тега и атрибута
  • основы html
  • структура html документа

Лекция 2. Текст, гиперссылки, изображения

  • текст, абзац, заголовки
  • гиперссылки
  • изображения
  • списки
  • таблицы

Лекция 3. Каскадные таблицы стилей CSS

  • элементы стилей
  • синтаксис стилей
  • стилевые классы
  • стилевые свойства
  • бестеговые стили
  • применение стилей в документах
  • подключение стилей в документы

Лекция 4. Стилевое оформление текста

  • Подключение шрифтов, подключение внешних шрифтов.
  • Размер шрифта, вид написания, стилевые оформления.
  • Надстрочные и подстрочные символы
  • Выделение текста.

Лекция 5. Основы блочной верстки сайта

  • Элемент div.
  • Понятие блочных и строчных элементов.
  • Блочный подход к верстке сайта.
  • Оформление блочных элементов: размеры, цвет фона, тени, границы, отступы.
  • Изучение блочных элементов в инструментах разработчика.

Лекция 6. Позиционирование элементов

  • Способы позиционирования элементов в документе.
  • Виды позиционирования: absolute, relative, fixed, inherit, static.
  • Особенности способов позиционирования. Применение left и right.
  • Особенности взаимодействия parent- и child-элементов c применением
  • позиционирования.
  • Наследование позиционирования.

Практическая работа 1. Исправление ошибок в CSS

Практическая работа. Верстаем сайт Gom player

Лекция 7. Обтекание элементов

  • Свойство float.
  • Понятие о потоке. Особенности работы float.
  • Особенность взаимодействия плавающих элементов с блочными и строчными элементами.
  • Схлопывание родительского элемента при всплывании child-элементов.
  • Отмена обтекания.
  • Верстка макета сайта с использованием float.

Лекция 8. Псевдоклассы и псевдоэлементы

  • Понятие псевдоклассов. Оформление псевдоклассов с помощью CSS.
  • Оформление гиперссылок. Классы active, hover, visited.
  • Понятие псевдоэлементов. Оформление псевдоэлементов с помощью CSS.
  • Треугольник с помощью CSS

Практическая работа 2

Лекция 9. HTML 5

  • Обзор тегов HTML 5. Новые возможности и особенности применения.
  • Понятие о семантическом WEB.
  • Поддержка тегов HTML 5 браузерами.
  • Применение тегов HTML на практике.

Практическая работа 3

  • Верстаем блок социальных кнопок
  • Верстаем блок меню

Лекция 10. CSS 3

  • Обзор возможностей CSS 3. Новые стили и правила.
  • Поддержка CSS3 браузерами.
  • CSS3 эффекты

Лекция 11. Работа с таблицами и списками

Практическая работа 4

PRO HTML & CSS


Лекция 12. Адаптивная верстка

  • Относительные единицы измерения
  • Работа с медиа-запросами.
  • Резиновая верстка. Особенности работы, преимущества и недостатки.
  • Адаптивная верстка. Особенности создания, преимущества и недостатки.
  • Комбинированная верстка.

Практическая работа 5. Верстка одностраничника

Лекция 13. Работа с формами. Элементы input, checkbox, radiobutton, textarea.

Лекция 14. Разработка анимации средствами CSS

Лекция 15. Работа с Emmet

Лекция 16. LESS и SASS и HAML – препроцессоры HTML и CSS

Лекция 17 Twitter Bootsrap

Лекция 18. Обзор современных тенденций рынка Web разработки, написание качественного и переносимого кода

Тесты по HTML