• Урок 1. Описание разметки страницы

В первом уроке курса мы с вами подробно рассмотрим макет страницы, которую будем верстать на протяжении всего курса. Разберем дополнительные материалы и выполним все необходимые подготовительные действия. И, самое основное, мы разберем и опишем HTML-разметку страницы. Описывать разметку мы будем, используя новые возможности HTML5. По итогам урока у нас будет готовый HTML-код, готовая разметка страницы, оформлением которой мы будем заниматься на протяжении последующих уроков.

• Урок 2. Назначение общих CSS-стилей для страницы

Начиная с данного урока будем назначать стили CSS для нашей страницы. В уроке мы разберем сброс стилей (reset.css). Поговорим о том, что такое сброс стилей, для чего он нужен, и подключим reset.css к нашей странице. Также мы более детально исследуем макет верстаемой страницы, подключим нестандартные шрифты и выполним все необходимые общие настройки для дальнейшей верстки. В итоге урока мы получим полностью готовый и «настроенный» для дальнейшей верстки шаблон страницы.

• Урок 3. Назначение стилей для header

В данном уроке мы начнем назначать стили CSS для нашей страницы. Мы опишем стили для шапки страницы. Вырежем из Photoshop'а необходимую нам фоновую картинку. Рассмотрим необходимые настройки сохранения изображений для WEB. Установим изображение в качестве фона и сделаем фон резиновым. Также в уроке мы назначим стили для текстов, находящихся в header'е сайта. По итогам урока у нас будут описаны стили для шапки сайта. Описаны стили текстов и шрифтов, используемых в header'е.

• Урок 4. Описание стилей CSS для формы подписки

Описывая стили для шапки сайта, мы не назначали стили для формы подписки. Назначение стилей для форм имеет свою некоторую специфику. В данном уроке мы, назначая стили для формы подписки в header'e, придадим ей внешний вид такой, какой у нее должен быть в соответствии с исходным макетом. При верстке формы мы неоднократно обратимся к свойствам CSS3. И подробно рассмотрим некоторые нюансы работы с формами. По итогам урокам мы получим полностью оформленную форму подписки, и полностью готовый header – такой, каким он должен быть в соответствии с макетом.

• Урок 5. Описание стилей основного контента

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

• Урок 6. Делаем страницу адаптивной

Сегодня просто необходимо, чтобы сайт хорошо отображался не только на больших мониторах настольных компьютерах, но и на экранах мобильных устройств. Адаптивная верстка уже не дополнительная опция, а необходимость! В данном уроке мы с вами сделаем верстаемую страницу АДАПТИВНОЙ, чтобы она хорошо смотрелась, и чтобы ей было удобно пользоваться на мобильных устройствах. По итогам урока мы получим полностью готовую для размещения в сети страницу. Страница будет адаптивной, кроссбраузерной, готовой для посетителей с мобильных устройств.