Лучше всего учить вёрстку, как и всё в программировании, на практике. Если мы говорим не про "легче", а про "лучше".
Берёте пример дизайна веб-страницы, картинкой, в идеале - плоским JPEG'ом, ещё и в неверном масштабе, и завёрстываете в HTML/CSS. Начинаете с каркаса HTML-страницы, потом переносите в этот каркас весь текстовый контент с дизайна, оборачиваете этот текстовый контент семантическими тегами. Здесь вам понадобится минимальный набор знаний в HTML/CSS, который придётся изучить по справочникам, увы.
Потом мысленно разбиваете дизайн на графические приёмы и через поиск в Сети ищете, как эти графические приёмы реализовать в HTML/CSS. "Как сделать закруглённые углы", "как сделать градиент", "как поставить ссылки в горизонтальный ряд", "как отцентровать прямоугольник одновременно по вертикали и горизонтали", и так далее.
Повторяете несколько десятков раз.
Через год такой практики вы будете смотреть на любую веб-страницу и примерно представлять CSS-правила, применяемые к любому элементу на ней. Смотреть на любое изображение дизайна страницы и на автопилоте "резать" его на HTML элементы.
Все справочники и всю теорию вы найдёте естественным образом, пока будете искать информацию через поиск.
На каком уровне должен уметь верстать сферический фронтэндер в вакууме, сказать сложно, потому что буквально на каждом проекте свои требования и подходы к пользовательскому интерфейсу. Но я бы сказал, что планка, к которой нужно стремиться - это то, что я описал выше: вам дают изображение дизайна страницы и вы просто сами мысленно уже порезали это изображение на HTML элементы и примерно представили, какой CSS к ним применить.
Вы поймёте, что достигли этого уровня, когда вам смертельно надоест процесс вёрстки и вы начнёте искать способы избавить себя от этой пытки: препроцессоры типа HAML/LESS, библиотеки CSS типа Tailwind, фреймворки типа Ant Design.