Данные видеоуроки по созданию сайтов будут полезны всем начинающим веб разработчикам и веб дизайнерам, которые хотят научиться HTML верстке. Необходимые файлы + исходник: https://yadi.sk/d/xVsy9FjiYwoVM

Урок 1 (Подготовка)

Открываем серию уроков по HTML верстке не сложного макета бизнес сайта. В предыдущей серии уроков мы создали дизайн сайта в бизнес стиле. Теперь необходимо макет сайта, который у нас получился сверстать в HTML страничку. Для HTML верстки исходника мы будем использовать следующие программы:
Sublime Text: http://www.sublimetext.com/
Браузер FireFox и плагин LiveReload для него: http://go.livereload.com/extensions
GIMP: http://gimp.org

Урок 2 (Изображения, шрифты)

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

Урок 3 (jQuery и плагины)

В третьем уроке мы сверстаем каркас нашего HTML документа, подключим необходимые CSS и javaScript библиотеки (960 Grid System, jQuery и jCarousel), а также научимся использовать в своей работе инструмент для ускорения верстки — EMMET.
Уроки по созданию сайтов и HTML верстке будут полезны всем начинающим веб разработчикам и веб дизайнерам, которые хотят узнать, как происходит процесс HTML/CSS верстки и javaScript программирования.

Урок 4 (HTML5 и параллакс)

В четвертом уроке мы приступим непосредственно к верстке нашего HTML документа, подключим javaScript плагин html5shiv для кроссбраузерной верстки HTML5 тегов и напишем простейший скрипт параллакс эффекта для баннера сайта, используя jQuery. Плагин html5shiv: https://code.google.com/p/html5shiv/

Урок 5 (шапка и верхнее меню)

В пятом уроке мы сверстаем шапку сайта и сделаем анимированное меню. Вы познакомитесь с HTML и CSS анимацией, без использования javaScript и CSS3 свойством — transition, а также мы начнем верстать блоки сайта, используя CSS фреймворк 960gs, с помощью которого рисовали дизайн сайта.

Урок 6 (пункты и картинка)

В шестом уроке курса «HTML верстка на примере бизнес сайта» мы закончим верстку баннера приветствия, создадим заголовок, сверстаем пункты, применим CSS/HTML анимацию к пунктам при наведении курсора мыши и вставим и спозиционируем картинку в правой части баннера таким образом, чтобы она прилипала к низу секции, то есть сделаем вертикальный responsive для того, чтобы обеспечить «безболезненное» добавление новых пунктов в HTML шаблоне.