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

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

Когда основной каркас намечен, какая-никакая типографика уже сделана, есть какое-то наполнение, можно подправить CSS-тему, сделать второй вариант или дополнение к фреймворку отдельным файлом.

С помощью CSS можно многое переделать без изменения разметки, но иногда возможностей таблиц стилей не хватает, и для изменения дизайна менять HTML нужно.

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

Один из методов подгонки вёрстки к картинке — сделать в body абсолютно позиционированный полупрозрачный div со свойством background (где изображён дизайн) и управлять отображением этого блока с клавиатуры с помощью JS.