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

Для начала следует проанализировать макет сайта, практически любой сайт в своей основе имеет довольно простой общий шаблон, к примеру на любом сайте есть шапка, контентная часть и подвал, эти блоки можно заранее задать в html, далее каждый из этих блоков можно начать заполнять контентом походу стилизуя их.

В начале очень сложно новичку разобраться с вложенностями элементов, к примеру в шапке сайта имеется навигация из четырёх одинаковых пунктов и одной выделяющейся своими какими-то особыми чертами, опытный верстальщик сразу поймёт что первые четыре пункта нужно брать в один блок а пятому выделить свой персональный, так вот, неопытному верстальщику следует прямо на макете в фигме или фотошопе задать условную разметку, просто берёте фигуру квадрат с заданными границами но без заливки и устанавливаете поверх части шаблона которая как вам кажется имеет обособленный смысл, если элементов много то их всех заключаете в свои квадраты, далее их всех в один общий, и так далее, конечным во всей этой иерархии элементов должен быть блок который вами был установлен в начале вёрстки как один из основных разделов сайта (скажем блок шапка сайта или контент, или подвал)

Благодаря правильной начальной разметке позже в javaScript будет очень легко делегировать события. Если в какой-то части сайта очень много контента то их стоит разбить на несколько общих блоков которые находятся на одном уровне в одном общем блоке разделе

Ну и ещё полезно будет знать о таких штуках как псевдо-элементы, это в первую очередь (не в коем случае не по значению) ::after и ::before, благодаря им можно и вовсе создать элемент которого нет в html разметке, к примеру в навигации есть элемент с классом .about, при клике по нему под этим элементом должна появиться полоса с картинкой красивой каллиграфии на фоне, сценарий такой: отлавливаем событие клика на элементе .about и присваиваем ему же новый класс, скажем .about_bc, далее в css обращаемся к этому классу скажем по ::after (выглядеть это будет так:  .about_bc::after{ /* стили */ }) и в стилях прописываем стили которые должны быть применены к несуществующему html элементу, после радуемся жизни, но есть нюансы, на такие несуществующие элементы нельзя навесить события, не сработают не клики, ни чего, они могут служить в абсолютном большинстве случаев лишь как укрощение или информационным дополнением, второй нюанс заключается в том что, такой псевдо элемент в стилях обязательно должен иметь декларацию (стиль) content: '';

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

p.s. помните что кто последний тот и молодец, когда-то давно меня это правило чуть не сломало, а точнее его не знание, а суть такая, если один класс в css файле описан дважды и в обоих классах имеется один и тот же стиль, то сработает тот который был установлен последним, ещё помним о наследовании, некоторые стили наследуются дочерними элементами от родительских и незабываем очищать кеш браузера если вы уверены что это должно работать но по какой-то причине не работает