Приветствую. Это небольшое вводное видео к курсу по верстке и оформлению шапок (header) для сайтов. Наверняка, вы могли не раз видеть на самых разных сайтов вот такие (см. видео) подобные шапки сайта.

Как правило, это какой-то заголовок, какой-то подзаголовок и какая-то картинка, либо какое-то фоновое изображение.

Вот такие шапки сайта мы с вами будем верстать в этом курсе.

Я хотел показать и поделиться с вами некоторыми простыми техниками, которые я при этом использую. Минимум кода, максимум результата и посмотрим, что у нас получиться.

И чему мы с вами будем конкретно учиться?

Мы с вами поговорим о том, какая HTML-структура должна быть для этой шапки, чтобы потом легко вносить в нее изменения.

Как подобрать фоновое изображение и адаптировать его для вставки на сайт? Каких размеров должно быть это изображение и.т.д.

Как сделать так, чтобы все хорошо отображалось на мобильных устройствах и широких экранах мониторов. 

Как сделать эффект прокрутки фонового изображения?

Как можно улучшить читаемость текста на фоновом изображении?

Я буду показывать эти техники на примере графического редактора Adobe Photoshop. В других редакторах все делается аналогично. 

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

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

 Это основные моменты, которые мы рассмотрим в этом курсе. Эти техники очень часто используются на практике. Это применимо не только для шапки сайта, но и для других блоков, которые можно встретить на веб-страницы, которые могут располагаться и где-то посередине страницы. 

Главное понять идею и суть и в дальнейшем вы сможете легко верстать подобные блоки.

Если этот курс интересен, жмите на кнопку "Далее" или "Содержание" и встретимся в следующих уроках.