2 месяца
32 ауд. часов
60 общих часов
Сложность:  
Очное обучение в группе: 12000 руб.
Очное обучение индивидуально: 28000 руб.
Сертификат HTML и CSS. Основы вёрстки

Такой сертификат Вы получите после успешного обучения

Для кого

Курс HTML и CSS предназначен для начинающих веб-разработчиков.

Чему вы научитесь

По окончании курса вы сможете создавать простые статические сайты, будете знать как из макета создать работающий веб-сайт. Основные профессиональные навыки:

  • знание HTML, в том числе основы HTML5;
  • знание CSS, в том числе основы CSS3;
  • умение верстать, в том числе кроссбраузерная вёрстка;
  • основы адаптивной вёрстки.

Ориентировочная позиция:

  • HTML-верстальщик.

Следующая ступень:

 

Расписание

Программа курса

Тема 1. Основы разработки веб-ресурсов

  • Что такое верстка?
  • Важность и предназначение верстки в веб.
  • Консорциум W3C. Краткий экскурс в историю создания языка. Как сейчас происходит его доработка и развитие.
  • Браузеры. Актуальные браузеры. Кроссбраузерность.
  • Выбор редактора для написания кода.

Тема 2. Синтаксис HTML и структура HTML-документа

  • Доктайп (Doctype). Почему он так важен?
  • Понятие тега.
  • Каркас документа и Meta-теги.
  • Семантика кода.
  • Правила написания тегов: открытие-закрытие тегов, пустые, вложенные, регистр написания тегов.
  • Пример каркаса веб-страницы.

Тема 3. Работа с текстом

  • Параграфы и заголовки.
  • Форматирование текста.
  • Жирный.
  • Курсив.
  • Подчеркивание.
  • Перечеркнутый текст.
  • Надстрочный и подстрочный текст.
  • Линии.
  • Семантика тегов форматирования.
  • Пример веб-страницы со всеми разобранными типами форматирования.

Тема 4. Атрибуты элементов

  • Использование кавычек.
  • Регистр написания атрибутов.
  • Атрибуты Class, Id, Style, Title.

Тема 5. Списки

  • Маркированные списки.
  • Нумерованные списки.
  • Списки определений.
  • Вложенные списки.
  • Примеры использования на практике вышеизложенных списков.

Тема 6. Ссылки

  • Атрибуты.
  • Якоря.
  • Почтовые и внутренние ссылки.

Тема 7. Изображения, мультимедиа и вставка внешних объектов

  • Мультимедиа в веб: изображения, видео, аудио.
  • Добавление изображений на страницу.
  • Атрибуты изображений: ширина, высота, рамка, alt и title.
  • Форматы изображений.
  • Видео-форматы и их поддержка браузерами.
  • Аудио-форматы и их поддержка браузерами.
  • Вставка внешних объектов с помощью тегов object и embed.
  • Пример вставки видео YouTube.

Тема 8. Таблицы

  • Элементы таблиц.
  • Атрибуты.
  • Назначение таблиц.
  • Табличная верстка на практике.

Тема 9. Работа с формами

  • Поля ввода и их типы.
  • Метки полей.
  • Текстовые поля ввода.
  • Радиокнопки.
  • Чекбоксы.
  • Списки выбора.
  • Текстовая область.
  • Кнопки.
  • Группирование элементов формы.
  • Тег legend.
  • Атрибуты элементов формов.
  • Примеры создания формы.

Тема 10. Основы работы с CSS

  • Что такое CSS?
  • Возможности и предназначение CSS.
  • Подключение CSS к html-документу.
  • Синтаксис и терминология.
  • Наследование, каскадность, приоритетность.
  • ID и CLASS.
  • Селекторы: групповые селекторы, селекторы потомков, псевдоселекторы.
  • Сброс стилей по умолчанию.

Тема 11. Работа с параметрами шрифта

  • Установка шрифта.
  • Размер шрифта.
  • Стиль шрифта.
  • Font-weight.
  • Font-variant.
  • Сокращенная запись.
  • Подключение нестандартных шрифтов.

Тема 12. Работа с текстом

  • Интерлиньяж.
  • Выравнивание.
  • Красная строка.
  • Цвет.
  • Расстояние между словами/буквами.
  • Text-decoration.
  • Text-transform.
  • White-space.

Тема 13. Стилизация ссылок

  • Цвет.
  • Декорирование.
  • Псевдоселекторы.

Тема 14. Курсор

  • Стиль курсора.
  • Виды курсоров.
  • Использование кастомизированного курсора.

Тема 15. Списки

  • Виды маркеров.
  • Кроссбраузерное отображение маркеров.
  • Практика: создание навигации и использованием списков.
  • Горизонтальное меню.
  • Вертикальное меню.
  • Вложенное меню.

Тема 16. Таблицы

  • Границы таблиц.
  • Ширина и высота.
  • Выравнивание: горизонтальное и вертикальное.
  • Отступы.
  • Фон.

Тема 17. Использование изображений в качестве фона

  • Фоновый цвет.
  • Фоновое изображение.
  • Повтор фонового изображения.
  • Позиционирование фона.
  • Фиксация фона.
  • Краткая запись.

Тема 18. Формы

  • Границы.
  • Ширина, высота.
  • Интерлиньяж.
  • Кнопки.

Тема 19. Блочная модель

  • Ширина, высота.
  • Margin, Padding, Border.
  • Outline.

Тема 20. Свойство Display

  • Блочные элементы.
  • Строковые.
  • Блочно-строковые.

Тема 21. Свойство Float

  • Обтекание по сторонам.
  • Понятие потока.
  • Очистка потока.

Тема 22. Позиционирование

  • Абсолютное.
  • Относительное.
  • Фиксированное.
  • Свойство z-index.

Тема 23. Видимость элементов

Тема 24. Выбираем размерность: em, px, pt, %

Тема 25. Практическая работа

  • Верстка макетов с фиксированной шириной.
  • Пример верстки двухколоночных макетов с разным расположением элементов.
  • Пример верстки трехколоночных макетов с разным расположением элементов.
  • Верстка макетов с «плавающей» шириной.
  • Пример верстки двухколоночных макетов с разным расположением элементов.
  • Пример верстки трехколоночных макетов с разным расположением элементов.
  • Улучшаем навигацию по сайту.
  • Стилизация меню.
  • Выпадающее меню.
  • Верстка новостной ленты (блога).
  • Верстка информационных блоков.
  • Создание блоков-ссылок.
  • Создание закругленных уголков.
  • Создание тени и иммитация тени.
  • Создание рамок.
  • Форма обратной связи на css.
  • Создание галереи изображений.
  • Презентационная страница.
  • Страница с подробным описанием фото.
  • Создание галереи Lightbox.
  • Верстка каталога организаций или товаров.
  • Фиксированные панели (блоки) на странице.
  • Вертикальное выравнивание.
  • Прижимание футера сайта к низу страницы в не зависимости от высоты контента сайта.

Тема 26. Проблемы старых браузеров