Как правильно, быстро и без вырванных волос сверстать html css из шаблона?

Я делаю сначала html разметку всех страниц, затем определяю стили шрифта для p, a, h1, h2, h3 и т.д Затем делаю сетку всех страниц, после чего сверху вниз верстаю все элементы с уже рабочей сеткой. Элементы сетки нельзя позиционировать абсолютно. Если все так плохо, то на HtmlAcademy можно пройти эпичный курс Кексби, там поэтапно делается сайт

1. Сетка (+подключение необходимых js/css) с расположением динамически подгружаемых блоков. Используем https://github.com/xmoonlight/includeHTML
2. Общий CSS
3. Отдельные блоки (меню, header, footer и т.д.)
4. Добавление стилей для блоков в общий CSS по мере необходимости.

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

Или сверху вниз или от общего к частному.

Ступор скорее от боязни, как с английским, просто посмотрите видео как верстают полностью страницу. Например такое https://youtu.be/7gjxE_VEA_4
Или есть целый сайт, где вы просто смотрите как кто-то что-то делает https://www.livecoding.tv/

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