Анита Ковалева

К примеру сверстать макет

Это не фронтенд.

Сверстать макет - это к веб-мастеру, который далек от фронтенда.
Фронтенд - это когда вы берете сложную логику, и делаете веб-приложение.
Веб-мастера -берут макет, делают из него сайт, где максимальная логика - это popup окно(если копнуть дальше, написать скрипт на php или jquery).

Хотел бы что бы кто то дал совет куда двигаться дальше.

Совет: учите нормально html\css. Берете 3 макета - лендинг, корпоративный сайт, интернет магазин - верстаете их без сеток, на чистом css - адативно, кроссбраузерно.
Как только сверстали - берете еще 3 макета - верстаете их с помощью bootstrap\bem\sass\less\gulp и его пакетов(если хватит сил, посадите хотя бы один проект на вордпресс\любую cms - что бы хотя бы понять как работает система управления), дарите свои проекты соседям, друзьям, коту.

Как только вы поняли как делается верстка - переходите к изучению JS.
И дальше на выбор - либо вы кидаетесь в создание сайтов и становитесь веб-мастером. Либо кидаетесь в более сложную и интересную работу фронтендера.

Уже в этом деле полтора месяца.

На то что я написала выше - у вас 4 месяца уйдет, что бы научиться не плавать, и сверстать 4 -6 макетов с хорошей версткой, попутно изучив прикладные инструменты - не спешите рваться в бой.

Я обычно разделяю так: ---------> сделаю на примере синтаксиса sass

main.sass     --------> файл где хранятся глобальные стили(импорты, body, wrapper(центровщик) и тд.
var.sass       -------> переменные с цветами, размерами которые импортируются в main.sass
/blocks/*.sass ------> подпапка в которой хранятся все блоки.

blocks/header.sass ------> хранятся общие стили для блока header, с позиционированием элемента logotype.
blocks/logotype.sass -----> общие стили для логотипа без позионирования блока

А теперь самый главный момент который я поняла, такие вещи подходят когда вы делаете большой, сложно компонентый проект, если вы разрабатываете мелкий корпоративный сайт или лендинг, можно смело "рубить сайт" на отдельные крупные блоки(header,footer,section) - а элементы\блоки, повторяющиеся много раз как logotype выносить в main.sass.

Вот пример счетчика, в целом разобраться будет не сложно.

К примеру вот так, только у вас не таблица, а блоки с элементами внутри.

.words{
    display: flex;
    align-items: center;
    font-family: 'PT Sans', sans-serif;
    color: #434e5b;
    padding-left: 20px;
}

.words strong {
  margin-right: 5px;
}

.words p {
  margin-left: 10px;
}

.checkbox + label {
  position: relative;
  padding: 0 0 0 60px;
  cursor: pointer;
  background-color: transparent;                   -------- меняет цвет вашего label.
}

Попробуй добавить к нужному селектору, или ко всем transition: all 0.4s ease,
где 0.4s нужное тебе значение, либо поиграться со свойством transition, именно оно в css3 отвечает за "плавность" появление элементов.

Ничего сложного в этом нет, задаете hover, и до hover прописываете блоку стили и ScaleY. При наведении белый блок который скрыт и абсолютно спозиционирован с 0 высотой, становится блоком с нужной вам высотой и стилями. Примеров в codepen - туча. Примерно такая же техника используется при создании выпадающего меню.

Ошибок довольно много. Из тех что я увидела:

1. Ваш контент не центрирован, используйте нативный центровщик либо библиотеки типа Bootstrap4, делайте отдельный div и закидывайте его туда, сейчас ваш контент расползается, и это учитывая то, что у вас просто Desktop версия, не адаптивная.
   
2. Название классов - когда вы пишите код, старайтесь использовать методологию, например БЭМ, пишется не header_menu_button, а примерно header__menu-button, header__menu-button--active, 2 нижних подчеркивания это элемент, две черты после элемента - модификатор, и ваш код будет более читабельный.
   
3. Старайтесь думать о том что бы не писать код 2 раза, если ваша кнопка на сайте будет повторяться 2 раза, то для кнопки пишется базовый стиль допустим site-button, а в header__menu-button вы уже дописываете стили позиционирования и в итоге ваша конструкция имеет вид
   
4. Научитесь использовать правильную вложенность, вы должны представлять сайт как лего, правильно перебросив контент по блокам, так как если у вас будет адаптивная верстка, вам нужно продумывать еще и адаптацию этих блоков к экранам с меньшим разрешением.
   
5. И последнее, скачайте какие нибудь платные курсы - бесплатно, допустим HTML Academy или другой конторки обучающей новичков, и вам будет легче учится верстать правильно