Как привязать @click к router-link?

А зачем вам именно router-link? Он предназначен именно для навигации, логично, что на нем клик не биндится. Т.е. если нужен переход куда-либо - это router-link, а если обработка клика - любой другой элемент, спан, див и так далее. Если нужно то или иное поведение в зависимости от условий, все равно второй вариант, просто в doSomething вы можете указать, например, this.$router.push({name: 'home'});

Как не отображать определенные элементы массива?

Документация не рекомендует использование v-if и v-for на одном элементе (хотя и не запрещает), поэтому в первом случае корректнее сделать так:

<div v-for="(league, index) in leagues.countrys">
    <div v-if="league.strFanart1">
        <h3>{{ league.strLeague }}</h3>
        <h5>{{ league.strFanart1 }}</h5>
    </div>
</div>

Как правильно сверстать блок?

Вариант с отступом - обычная практика, чем он в вашем случае не устраивает?

Как правильно подключить background-image в webpack?

Прошу прощения, на работе замотало. Если вопрос еще актуален, давайте разбираться. У меня все компилится и файл ищется, но:
- Сначала, когда я запустила вебпак с вашими файлами, он ругнулся на отсутствующий index.js. Ну ок, добавила.
- Затем все стало хорошо, но стили не собирались, т.к. не задан соответствующий файл в entry. Задаем.
- Вебпак ругается на отсутствующий конфиг postcss. Его я закомментила, чтобы не возиться. После этого все собралось, картинка на месте.

В связи с чем вопрос: как у вас компилится scss с текущим конфигом вебпака? Что у вас в index.js? Каков конфиг postcss?

Как доскролить до позицию где заканчивается div?

Не совсем ясно, куда нужно доскроллить - чтобы верх окна браузера совпадал с верхом элемента?

Сайт может быть шире чем 1920px?

AbaGardon, вот с ретиной не подскажу. Пока что ориентируюсь только на обычные 4к мониторы.

Сайт может быть шире чем 1920px?

AbaGardon, так можно использовать медиа-выражения, типа,

@media (min-width: 2560px) {
    body {
        font-size: 32px;
    }
}

Сайт может быть шире чем 1920px?

AbaGardon, не поняла, где и почему шрифты не видны?

Как начать работать во frontend?

Я начала работать удаленно через полгода после окончания интенсива, правда, это был старый, пятинедельный интенсив. Честно, если бы балду не гоняла, то устроилась бы и раньше, т.к., получив сертификат, я на какое-то время забросила обучение.

Если бы сейчас мне пришлось выбирать, идти или не идти на интенсив, это зависело бы от дохода: есть возможность вкладывать по 10к в течение полугода - пошла бы.

Если нет, тогда такой вариант: у ХТМЛ Академии есть ежемесячная рассылка, где в числе прочего они присылают макеты для тренировки. Их можно верстать и выкладывать для критики на тот же тостер или искать наставника среди фрилансеров. Когда наберется портфолио, искать работу.

Как можно нарисовать кривую линию от точки А в точку Б?

Nikita-Fast, насчет самих линий вы правы, я в примере показала, как можно генерировать свг с помощью js в зависимости от расположения других блоков.

Как начать работать во frontend?

Wentixon, я после этих "говно" курсов отлично работаю, переучиваться не пришлось)

Почему не работает gulp?

Хм. Вы знаете, у меня все заработало. Покажите еще вашу структуру папок: где у вас лежит исходный index.html?
Меня несколько смутило, что вотчер у вас наблюдает за изменениями

watch: { 
        html: 'app/**/*.html',
        ...
    }

тогда как таск html:build берет хтмлку из

app: {
        html: 'app/*.html', 
       ...
    },

Тут у вас точно все ок?

Сайт может быть шире чем 1920px?

По-моему, ваш дизайнер не прав, т.к. если вы не указали вьюпорт или указали

<meta name="viewport" content="width=device-width, initial-scale=1">

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

Почему не работает gulp?

Ого, сколько у вас всего... Дайте package.json ваш, чтобы поставить-потестить.
Вообще иногда у меня gulp не сразу хавает хтмл из папки dist, но стоит в исходном файле поменять что-то и сохранить, как все сразу начинает работать.

Sublime Text 3 SASS?

В этом плагине не очень удобные подсказки. Пишешь "display:", затем "b" - плагин предлагает "bottom", "bl" - "border-line". Чтобы получить display: block, нужно написать "d-b". Конечно, можно переучиться, не вопрос, но когда уже используешь одни сокращения не задумываясь, хотелось бы с ними и остаться...
Есть ли возможность исправить это?

Можно ли по БЭМ использовать один и тот же модификатор для блока и элемента?

Насчет вложенности вы правы, в мануале есть похожий пример, в данном случае как раз БЭМ допускает вложенные селекторы https://ru.bem.info/methodology/css/#%D0%92%D0%BB%... - это мне уже на их форуме подсказали.

Имя block смотрится странно, потому что взято для примера) В проекте понятное дело имена более осмысленные.

Почему не удаляются куки при закрытии браузера?

Samarkand: в этой теме также рекомендуют использовать SessionStorage или выражение вида

document.cookie = "cookiename=value; expires=0; path=/";

Либо не задавать expires совсем, либо писать expires=''.
SessionStorage работает только в одной вкладке. С куками я попробовала все три варианта указания expires, не могу понять, почему это не работает, может быть, я что-то упускаю.
В консоли все ок.
Попап упорно появляется только после удаления кукис вручную...

Почему не удаляются куки при закрытии браузера?

Samarkand: Спасибо, посмотрю!
С Девакой совершенно согласна:) Но сайт не мой, а заказчика.

Как понять БЭМ, и что мотивирует верстальщик в использовании его?

почему ты не можешь через родителя добираться к дочернему элементу

Потому что потом получаются четырехэтажные селекторы вида .block-one.two .red-list div p:nth-child(100500), потом проект расширяется, за дело берется другой верстальщик, и, используя безобидную разметку, получает любопытный результат, потому что пять тысяч строк назад первый верстальщик стилизовал какой-нибудь спан через .list-redbullet span. Конечно, это решается за пару минут с помощью инструмента разработчика в браузере, но когда таких моментов много, это затрудняет работу.
Хотя, конечно, это другая крайность.

Как сделать скролл колесиком мыши по якорям?

Спасибо, отличное решение!

Правда, у меня тоже не работает в мозилле. Если кто-то нашел, как исправить - буду рада увидеть.

Хочу дополнить скрипт. Мне нужно было сделать подобную прокрутку, но у каждого блока дополнительно есть кнопка "вверх-вниз". Если пролистать страницу кнопками, а потом начать прокручивать, порядок ломается. Поэтому добавила определение текущей позиции, чтобы эти две функции работали корректно вместе.
https://jsfiddle.net/hrkuguty/