Верстка
Основные моменты в верстке email-писем

Верстка сайтов, email-писем и всего прочего. Использование css-фреймворков

Верстка — превращение картинки в кликабельную страницу при помощи специального языка разметки (HTML+CSS). 

При помощи html-кода вы размечаете документ, например, там у вас будет блок с логотипом, там с меню. 

При помощи каскадной таблицы стилей (CSS) вы сообщаете браузеру какой блок имеет какие либо размеры, цвет и другие визуальные эффекты.

Для изучения рекомендую следующие ресурсы, с которых, собственно, и начинал этот тернистый путь:

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

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

Основной проблемой, наверно, на сегодняшний день - это Internet Exployer. И то, на последней версии он начал в коем веке поддерживать CSS-3.

Я бы сказал - все продукты Microsoft требует тщательного внимания :)
Вам несложно догадаться, что всеми этими знаниями должен обладать верстальщик.

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

Рассмотрим на конкретном примере.
Дизайнер присылает картинку - дизайн будущего сайта.  Далее происходит анализ макета - как и на какие блоки его можно разбить. В идеале - макет должен быть отрисован для 

Адаптивная верстка  — когда ваш сайт меняется в зависимости от разрешения браузера. 

Программы для верстки:

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

Обрадую, это уже есть — CSS-фреймворки. Фреймворк - набор уже готовых правил, которые описаны базисными функциями.

 Выделим несколько из них:

Например, на бутстрапе, чтобы сделать две одинаковые колонки на больших разрешениях, нужно присвоить классы col-lg-6.

Так бы вам пришлось писать для каждого блока: