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

Question

[gleendo]

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

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

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

Comments

[Super User]

Макет тупо слизан с апворка.

[gleendo]

Super User: Это играет какую то роль? Какая разница откуда он слизан. Это не коммерческая верстка, просто для практики.

[Super User]

con_: Для меня это не играет никакой роли и в общем-то я лишь констатировал факт.

Answer 1

[weredy]

Сам с такой проблемой сталкиваюсь, сделал вывод что победить её можно только опытом. Просто верстай, всё придёт.

Comments

[weredy]

Ну и перенимай чужой опыт, смотри как другие верстают.

[alc0]

дело говоришь, такая же фигня))с опытом, просто надо самому подумать мне кажется...тут все на логиге хорошо работает))

Answer 2

[Super User]

Верхняя зеленая полоска - шапка.
Дальше секция во всю ширину с текстом h1 и кнопкой-ссылкой.
Ниже секция с 4 колонками.
По-моему проще пареной репы.

UPD: По отдельности блоки верстать не нужно, это должен быть один поток. Главное в верстке не блоки, а код. Код должен быть красивым и удобным для чтения, с отступами и комментариями, если надо. И еще код желательно делать реюзабельным, то есть таким, который потом можно использовать на других страницах с незначительными изменениями. Здесь все зависит от css.