Вся основная верстка держится на трех китах (HTML, CSS, JS), Но расскажу я только про первые 2, ведь именно они вам нужны чтоб начать в короткие сроки делать хорошие шаблоны.
Ехала!
Первый кит - Html
- Запомнить основные теги и атрибуты, а так же формы.
Без основ не куда не уйти. Возможно многие теги кажутся не нужными, или не понятными. Но это все пригодится позже, когда речь дойдет до второго кита (Вы не можете обойтись только тегом <p> !!!) - Как поисковик видит страницу и семантика HTML5
Поисковик видит сайт нет так как видим его мы, и для того чтоб выдвигать сайт дальше по популярности, нужно понимать какую информацию воспринимает сайт а какую нет. Плюсом вам поможет семантика HTML5 которая упростит работу с этой задачей - Сверстайте несколько страничек.
Не нужно пытаться сделать сайт красивым, пока у вас этого не получится с вашими знаниями. делайте это все для того чтоб усвоить работу тегов и атрибутов
Итог: Вы научились видеть сайт глазами робота и создавать скелет для них. Это всего то первый шаг, да и скелет без мышц и кожи - не человек. Но этим мы займемся в следующем шаге
Второй кит - CSS
- Изучите основные свойства и их значения.
Без основ не куда - Анимации и переходы
Это предаст вашим элементам новый облик, и красивое представление. - Научитесь верстать с помощью flexbox и grid
Эти свойства очень сильно помогут, ведь надо уметь не только украшать, но и позиционировать элементы - Адаптивная и резиновая верстка
Не все пользователи имеют одинаковое расширение экрана. А некоторые могут зайти на сайт с телефона, чтоб не произошло разных конфликтов в размерах и позиционировании элементов, нужно изучить Адаптивную и резиновую верстку - Сверстать несколько шаблонов
На просторах интернета можно легко найти множество примеров хороших сайтов, вы должны приловчиться к таким шаблонам. Черпать вдохновение можно из Figma проектов или реальных сайтов. И только когда вы почувствуете крепкую и понимающую руку, которая способна сверстать большинство блоков, вы сможете сказать что вы прошли этот этап
Итог: На этом этапе вы уже начнете хорошо понимать как должен выглядеть хороший сайт, и как его сверстать. И даже сделали несколько лиц для сайта
И что мы умеем?
Теперь мы научились всем основным навыкам нужным для того чтоб вы могли продвигаться далее самостоятельно. Достаточно вам увидеть любой блок на сайте, и в голове уже будет появиться мысль о том как сверстать его. А за время поиска информации вы нашли парочку хороших источников.