RomanKudlatov

я не знаю как правильно назвать тот или иной класс

Так, чтоб было понятно, за что он отвечает.

нужно ли для всех тегов писать классы

Нет. Без контекста, ответить что-либо более осмысленное я не смогу.

не понимаю зачем нужен container и wrapper

Если ты не понимаешь, зачем тебе что-либо нужно, то тебе это не нужно

Я забросил вёрстку и начал изучать JavaScript. Но после изучения основ я вернулся к проблеме что не умею верстать.

Авось поможет

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

Задавай себе вопросы, когда пишешь код.
Нужна шапка. Что подразумевается под шапкой? Панель с кнопками для навигации сверху сайта.
<nav></nav>
Что в ней должно быть? Название сайта и ссылки на страницы.

<nav>
  <span>My site</span>
  <a href="page1.html">Page1</a>
  <a href="page2.html">Page2</a>
</nav>

Тег a подчёркивается. Я так хочу? Нет.

a {
  text-decoration: none;
}

Проблема решена, но теперь a вообще нигде не подчёркивается. Я хочу так? Нет.

nav a {
  text-decoration: none;
}

Теперь a не подчёркивается, если оно находится в элементе nav. А если я создам ещё один такой элемент, но для немного других целей, и там подчёркивания понадобятся?

<nav class="main-navbar">
  <span>My site</span>
  <a href="page1.html">Page1</a>
  <a href="page2.html">Page2</a>
</nav>

.main-navbar a {
  text-decoration: none;
}

Теперь я хочу выровнять все элементы по вертикали но не знаю как :(. Тут тебе на помощь придёт твой личный Оракул (правда я больше предпочитаю всевидящую утку). Просто задай ему вопрос "Как это сделать?", и он моментально выдаст ответ.

Не знаю может это мне не дано или я делаю что то не так. Я не могу решить эту ОГРОМНУЮ проблему.

Если тебе не дано даже сайт сверстать, то советую посмотреть в сторону чего-то более простого (например спорт, танцы), если даже это слишком сложно, то можно стать мастером совка и веника, а если и это не выходит, то существуют более экзотические варианты, про которые вряд-ли можно говорить на этом сайте.

Хочется изучать что то новое но я застрял на этой вёрстке и не могу двигаться дальше.

Как то, что ты не умеешь верстать, мешает тебе изучить, допустим, историю Танзании?

У .sidebar высота выставлена на 100%. Вероятно, проблема в этом. Ну и следует помнить, что position: sticky не будет работать, если у блока с этим свойством есть предки с overflow: hidden.

Делаются ли на практике подобные сайты?

Делаются. Рынок таких дизайнерский сайтов всегда был не очень большим, но он есть. Познакомиться с разными примерами таких сайтов можно на сайтах вроде Awwwards, CSS Design Awards, FWA и им подобных. В русскоговорящем сегменте интернета в целом таких проектов меньше, но они тоже есть. Ну и не все отправляют свои сайты на конкурсы, не всем это нужно.

как у них осуществляется адаптив?

С точки зрения разработчика - так же, как и на любом другом сайте. Никаких сюрпризов, только "уверенные знания CSS/SVG/JS/GLSL" должны быть в реальности, а не на бумажке.

Из соседнего комментария: только проблема в том, что в 99% - всё это неюзабельное говно в красивой обертке

Часто можно встретить такого рода сайты, красивые, но забагованные в край, и тормощящие настолько, что телефоны просто вешаются. Или мобильных версий вообще нет, т.к. не осилили в сжатые сроки. А бывает, что и на десктопах тормозит и лагает. Но тут вопрос больше к бизнесу - за сколько заплатили, то и получили. Если разработчики тянут, то остается дизайнер. Вот ему может быть сложно, и на самом деле не так много дизайнеров, которые могут что-то такое проектировать, чтобы и красиво, и адаптивно, и юзабельно одновременно. Нужен опыт. Нужно много чего знать, и, что важно, уметь слушать разработчиков на тему того, что можно, а чего нельзя сделать, и вести соответствующие переговоры с заказчиком. На рынке фриланса не раз видел заказы в духе "нам тут дизайнер все придумал, а мы теперь сделать не можем", или "мы что-то сделали, а оно грузится по пол минуты", а это вообще никак не сделать, чтобы нормально работало на реальном железе. Тут нужен был диалог между специалистами из разных областей, а его не было. Но опять же - за сколько заплатили, то и получили.

А чем не устраивают собственные обработчики vue? https://ru.vuejs.org/v2/api/#v-on

поясни "постоянно"

let arr = [];

for(i = 0; i < 1000; i++) {
  let obj = {};
  obj.word = 'qwerty: ' + Math.random();
  arr.push(obj);
}

console.log(arr)  // все разные

var MyAPI = {
    css: function(key, val){
        if (val === undefined)
            return this[0].style[key];
        for (var i = 0; i < this.length; i++) {
            this[i].style[key] = val;
        }
        return this;
    },
    hide: function() {
        return this.css("display", "none");
    },
    show: function() {
        if (this.css("display") == "none")
            return this.css("display", "block");
        return this.css("display", "");
    }
}

function _el(selector) {
    var collection = document.querySelectorAll(selector),
        wrapped = [].slice.call(collection);
    for (var method in MyAPI) {
        wrapped[method] = MyAPI[method];
    }
    return wrapped;
}

_el("#mydiv").css("border", "1px solid black");