Как опытные верстальщики верстают сайты, сначала делают полностью html разметку, а потом css? И как лучше практиковать начинающему верстку?

Довольно короткий ответ — у каждого свой путь и свои лайфхаки, всё приходит со временем.

«Серебрянной пули» не существует в обучении, именно поэтому стоит попробовать разные способы, главное не бояться и если понимаете, что не идёт — переходите к другому упражнению. В будущем всегда можно вернуться и посмотреть на всё с другой стороны.

Мой план по вёрстке проектов выглядил примерно так:

Лично Я, зачастую, на практике выискивал по макету общие элементы с их возможными модификациями и собирал сначала эти базовые «кирпичики» (кнопки, списки, текстовые элементы).
Затем собирал компоненты "по-больше".

Например: шапка состоит из 3 кнопок и логотипа. Значит я собирал её и улучшал по ходу разметку и доводил шапку до полного завершения (касаемо вёрстки). JS, как правило, добавлял в последнюю очередь. 
Когда визуал уже был готов - добавлял слой анимаций и взаимодействий на JS.