Как научиться верстать сайты⁠⁠

Первым, что должен понять человек, который хочет начать "делать" сайты - это то, как он работает у конечного пользователя. Разумеется, я не стану ничего рассказывать про http, о том, как работает движок браузера и что он там мутит в процессе рендеринга страницы - это, конечно, знать нужно, но этого делать это я не стану, так как для всего этого не хватит этого поста.
Допустим, что мы попали в идеальный мир, где только 1 браузер, который умеет все и никогда не удивляет нас разными приколами работы своего движка.

Поехали.

Шаг первый. Выбор среды для разработки. Notepad, как и Notepad-плюс-плюс лучше сразу забыть. На первое время, имхо, самый годный - это Dreamweaver, от которого в конечном счете придется отказаться в силу его ущербности, но для первых шагов он будет лучше, а точнее понятнее, чем другие. В конечном счете для меня лично самым удобным оказался WebStorm (нежданчик, ага).
Резюмируя - ищи удобную IDE для себя.

Шаг второй. Читать документацию. Если с английским все в порядке, то лучше, чем w3c.org нет ничего. Если не в порядке - htmlbook.ru. Да, все, что там есть надо прочитать и понять. Самое главное во всем этом - понимание.
Многие (порядка 60-80%, наверно) теги в дальнейшем не будут использоваться.
В принципе, аналогично и с css. Много примеров есть на том же htmlbook.
Резюмируя - читаем, вникаем, пробуем, учимся.

Шаг третий. Допустим, что с чтением документации справились и стали считать себя крутым html-верстальщиком (обычно такой момент сопровождается регистрацией на каком-то сайте фриланс-работы) и начали пытаться найти заказы, при этом устраивая сильный демпинг. Но не тут то было. Даже если и найдете что-то, то скорее всего окажетесь кинутыми на ту самую сумму или не сможете сделать заказ. Про это я тоже писать не стану.
Резюмируя - за 1 месяц чтения документации ты не верстальщик.

Шаг четвертый. Познай подводные камни. Существует множество способов их найти, где первый, конечно же - это опыт. Гугл, разумеется поможет, но он приведет с 99% долей вероятности на stackoverflow.com, поэтому рекомендую там создать аккаунт и не бояться уйти в далекие минуса. Вы же только учитесь.

Шаг пятый. Забудь про идеальный мир с одним браузером. Это настоящий зоопарк, хотя всего существует 4 движка (Lynx не в счет) - Trident (IE), Gecko (Firefox), Webkit (Safari, Chrome) и Presto (почти R.I.P). Далее все, кому не лень делают на основе их форков свои браузеры, список приводить не стану - википедия поможет. Учитывая, что с 13ой версии Opera перешла на Webkit их собственный Presto остался только в актуальной версии Opera mini. Opera mobile с 11ой версии так же использует Webkit.
Шаг шестой. Познание периферийных софтин. Photoshop (или GIMP, но у него бывают частые проблемы с открытием файлов .psd, так что лучше не начинать) - обязателен. Именно им вам предстоит нарезать всю графику.
В зависимости от того, какую ОС вы используете, софтинка для выкидывания мусора из картинок + оптимизатор цветовой палитры png-файлов.
Я, например, как пользователь OSX использую imageoptim (аналог для W - PNGout), ImageAlpha для "простых" картинок (аналог для W - color quantizer) или ximagic quantizer для "сложных" - это плагин для Фотошопа, который позволяет уменьшить набор цветов картинки, при правильных настройках которого, можно "сэкономить" еще порядка 10-40% после прогона через imageoptim(PNGout).
Резюмируя - экономь пользовательский трафик, не у всех 100мбит и немало пользователей со смартфонов.

Шаг седьмой. Собирай проект аккуратно, блеать. Создавай папки осмысленно и пихай туда только, то, что и правда будет использоваться. Далеко не все, что ты наделаешь будет использоваться на рабочем проекте, потому не суй в папку images те картинки, которые заведомо не будут использоваться - сделай папку temp. Храни psd спрайтов (ты же читал руководства, да?) в отдельной папке и отдавай их заказчику. Не отдавай css видом, где каждое правило на новой строке - это ненужная версия "а так читать удобнее" для работающего сайта.
Резюмируя - не создавай лишнего.

Шаг седьмой с половиной. Используй локальный веб-сервер (в OSX apache встроен, для W - denwer.ru).
Зачем? Тебе же самому будет удобнее таскать, допустим, горизонтальное меню, приделанное из другого файла, а не копировать его каждый раз, правда же? Условно, спасет тебя же от правок нерадивого заказчика. Кроме того, всегда используй относительные пути, забудь про абсолютные.
Резюмируя - думай о программистах.

Шаг восьмой. Научись пользоваться GIT. Это значительнее удобнее, чем пересылать архивчики. Почти все студии/компании используют систему контроля версий, где GIT одна из самых популярных. Еще, конечно, еще и SNV, VCS, Mercurial и т.д, но GIT значительно понятнее и проще в освоении.
Резюмируя - думай о программистах, снова.

Шаг девятый. Совершенствуйся. Постарайся после достижения 90го уровня по всем предыдущим пунктам идти дальше. Тут тебе поможет Grunt.js (хотя мы же его, javascript то, и не знаем, пока и не нужно). Этот пункт короткий, переходим к десятому.
Резюмируя - ты не бабушка, не сиди у падика.

Шаг десятый. Переходи на мета-языки, такие как HAML/Slim и на препрепроцессоры CSS - LESS/SASS (разумеется альтернатив много, выбирай, что нравится больше).
Резюмируя - удобно, мать его.

Шаг одиннадцатый. Учим js.
Резюмируя - ты же хочешь больше денег?

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

Спасибо, с Вами был poizoncc, front-end тим-лид одного крупного .ru проекта.