Здесь два вопроса одновременно, отвечу сначала на первый.
Я начинаю с HTML, да. Но только не "полностью HTML разметку". Я переношу в HTML весь текстовый контент с дизайна и все необходимые семантические теги. Я старовер, я исхожу из принципа "страница должна быть читаема даже если CSS вообще не прогрузился".
После того, как у меня есть все нужные `ul`, `p`, `h1`, `h2`, `a` и `img`, и другое что там хочет от меня дизайнер, я начинаю применять CSS.
Если какой-то эффект из дизайна невозможно воспроизвести без дополнительных HTML "обёрток", добавляю эти обёртки в HTML.
Если какой-то эффект невозможно воспроизвести без JavaScript, добавляю к нужным элементам атрибут `class` с каким-нибудь классом типа `js-effect-target` (чтобы у класса был префикс `js-`) и пишу JavaScript, который воспроизводит этот эффект. Конечно же, если страница предполагает поведение, то без JavaScript никак не обойтись всё равно.
Результаты вёрстки проверяются в DevTools в браузере, параллельно в мобильном режиме, планшетном и десктопном. Я подразумеваю, что дизайнер вам дал все три дизайна.
Потом, когда в одном браузере страница довёрстана, открываем её во всех остальных мажорных браузерах, включая мобильные. В последнее время осталось всего два движка рендеринга, правда, так что достаточно проверить в Firefox и каком-нибудь клоне Chrome, но вот мобильных браузеров очень много разных. Если есть расхождения в рендеринге, ищём причину и устраняем.
На тему как "лучше практиковать вёрстку" — я бы на вашем месте один раз повторил за лектором, но потом уже следующее упражнение сделал бы сам. В вёрстке это организовать достаточно просто: открываете абсолютно любой веб-сайт, делаете скриншот страницы и повторяете 1:1. Эффекты, которые вы не знаете, как делать, ищете в интернете. Все решения уже кем-то были где-то описаны: и меню выпадающие, и тени, и градиенты, и закруглённые углы и наложения и всё на свете. И повторяете это упражнение столько раз, сколько хотите, пока уверенность не придёт в своих силах.