Ankhena

https://htmlacademy.ru/courses
https://webref.ru/
Где смотреть лучшие практики по верстке элементов?

без js/jq и для любого количества элементов.

https://jsfiddle.net/nasp3hm7/
https://jsfiddle.net/nasp3hm7/1/
Прокатит при однородном фоне
Для правого борта сами доделаете через after

Masonry свойства
isResizeBound(логический)
Связывает расположение блоков с изменениями размеров окна.
По умолчанию: true

По поводу ссылки в ссылке.
Вполне может быть одна ссылка, а кнопка с помощью span. Плюс: нажиматься будет вся область картинки, а не только кнопка.

Еще хочу напомнить про прекрасные теги figureи figcaption.

Открываем хелп Яндекса и читаем его

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

...

Как изменить заголовок и описание сайта в результатах поиска?

В большинстве случаев заголовок и описание страницы сайта в результатах поиска формируются на основе контента страницы. В частности, заголовок берется из элемента title в HTML-коде страницы, описание — из текста страницы, в том числе с учетом микроразметок Open Graph и schema.org, а также из содержимого мета-тега Description.
Пример использования Open Graph
Кроме этого, описание может собираться из дополнительных источников:
Яндекс.Каталог, Яндекс.Маркет, DMOZ. Чтобы отказаться от описаний из Яндекс.Каталога и DMOZ, добавьте в HTML-код страниц мета-тег robots.
Текст ссылок на страницу, размещенные на других страницах сайта или сторонних ресурсах.
Таким образом, для описания страницы используется текст наиболее информативный и релевантный поисковому запросу.

1. Можно тупо открыть поисковик и набрать несколько запросов на выбор.
2. Есть куча платных и бесплатных программ SiteAuditor, Semonitor, онлайн сервисы и т.д.

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

В любом случае имейте в виду, что хоть массовые апдейты идут с некоторым интервалом, выдача все равно чуть-чуть меняется каждый день.

А проверять сеошника лучше по росту целевого трафика, а не по позициям.

Вариант 1: onclick перевесить на весь li.
Вариант 2:
Изменить структуру на <li><a><span></span><span></span></a></li> и для a {display:block} и соответствующие размеры, либо для li {display:flex; /*и т.д.*/ }

Потому что div не вкладывается в p

UPD: точнее немного не так: считается, что тег p закрылся перед следующим открывающим div или p или любым другим блочным элементом. А дальше у Вас получается висит закрывающий тег </p>, у которого нет начала.

Вам даже jsfiddle ошибку красным (!) выделяет.

собственно сделал вот такой шаблон правильно или нет?

нет

1. Для оценки целесообразности использования тегов имеет смысл приложить макет и стили.

2. Теги должны правильно открываться и правильно закрываться. Внутри nav начинается бардак.

3. Куча лишних оберток. Возможно, они оправданы макетом, но нам этого не показали.
Например,

<div class="title-page"><h1 class="breadcrumb">Объявления</h1></div>

С какой целью div?
Аналогично, внутри nav, да и почти везде.

4.

<li class="header-name"><a href="/" title="">title</a></li>
<li class="clearfix"></li>
<li class="" title=""><a href="" target="_blank">ВК</a></li>

Объясните смысл среднего li?
Подумайте сами. Есть у Вас заголовок списка. Потом сам список. (Опять таки, по коду, без макета) Почему они оказались в один ul засунуты?

5. Вообще с clearfix явный перебор.

Можно

Цвет показывать не словами, а цветными квадратиками, слово показывать при ховере/клике.
Ну и нули еще можно убрать, но думаю это уже будет лишним.
Жирность убрать.

p.s. еще не понятно, почему у Вас ВСЕ ячейки заголовочные.

var $menu = $(".menu");
    var scrollbegin = $menu.height() + 45; // появление блока при прокрутке страницы на высоту самого блока плюс 45 точек
    $(window).scroll(function(){
        if ( $(this).scrollTop() > scrollbegin && $menu.hasClass("default") ){
            $menu.removeClass("default").addClass("fixed");
        } else if($(this).scrollTop() <= scrollbegin && $menu.hasClass("fixed")) {
            $menu.removeClass("fixed").addClass("default");
        }
    });

Меняет местами классы default и fixed.
Можно просто добавлять и убирать fixed.