С чего начитать верстать сайт по макету?

Берёшь макет (лучше сделанный в Иллюстраторе, чем Фотошопе - чтобы сразу учиться работать с SVG) и начинаешь верстать - так, чтобы результат максимально точно совпал с макетом. А потом то, что получилось, прогоняешь через валидатор и исправляешь ошибки.

И названия используемых шрифтов тоже из макета берутся.

1. Экспортируете графику (если дезигнер этого не сделал), кладете со шрифтами в папки img/ и fonts/ соотв.
2. Создаете файлик с разметкой (.html/.php) и открываете в текстовом редакторе, пишете разметку основных логических блоков страницы
3. Создаете .css файлик в css/, открываете его в редакторе, пишете стили для основы (шрифты прописывайте сразу)
4. Дописываете разметку и стили содержимого каждого из основных блоков, по очереди (сверху вниз, чтобы не было "ой, а чойта оно поехало")
5. Проверяете на соответствие макету: размеры элементов, поля и интервалы, и т. д. (вносите правки если необходимо)
6. Пишете стили мобильной версии страницы, если необходимо
7. Прогоняете через валидаторы (html, css) и Lighthouse, исправляете косяки.

Для нормального отображения на экранах разного размера - изначально делайте верстку резиновой, и тогда медиазапросами останется пофиксить совсем немного.
Избегайте выравнивания блоков флоатами, применяйте флексбоксы. Старайтесь указывать размеры в подходящих относительных единицах, например em для паддингов вокруг текста, и т. д.
Ну, и используйте систему именования, например БЭМ (та еще гадость, но хорошо документирована).

скачать готовый шаблон и не парится, затем его немного изменив.. и вообще IE я лично не встречал людей что бы кто то им пользовался!

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

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