Ivan Bogachev

Немного поправил ваш код:

.arrow {
  position: relative;
}

.arrow::before {
  content: '';
  display: block;
  width:  650px;
  height: 600px;
  background: blue;
}

.arrow::after {
  content: '';
  display: block;
  position: absolute;
  top:  0;
  left: 0;
  width:  600px;
  height: 400px;
  background: url(http://cliparting.com/wp-content/uploads/2016/05/Arrow-clipart-arrow-graphics-clipartcow-2.png);
}

Иван Карпущенко верно говорит, можно использовать transform:skew, но вот по поводу использования псевдоэлемента для текста - очень спорная мысль, точнее сказать не универсальная. Или придется этот текст передавать через data-атрибут, что будет довольно странным решением. Гораздо практичнее просто в button добавить span с текстом - codepen.

По вашим словам кажется, что вы понятия не имеете о том, какой инструмент для чего нужен. Так что рекомендую следующий план:

HTML: практика -> Pug или любой другой препроцессор -> понять зачем он нужен -> микроданные -> wai-aria
CSS: практика -> каждый день выкладывать один сверстанный компонент на CodePen -> всякое разное -> изучить внутренности normalize.css -> использовать autoprefixer -> изучать хорошие практики -> написать свою сетку -> познакомиться с БЭМ, RSCSS -> осознать полезность методологий -> препроцессоры (LESS проще, SASS моднее, есть еще много разных) -> PostCSS -> осознать разницу между пре-процессором и пост-процессором
JS: ES6+ -> Babel -> понять смысл инструмента -> писать много велосипедов -> много велосипедов -> больше велосипедов богу велосипедов -> паттерны проектирования -> тестирование
Gulp/Grunt и Webpack/Browserify: осознать разницу -> использовать по мере надобности -> научиться автоматизировать все, что можно автоматизировать
Git, NPM: без комментариев

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

Есть еще один дельный совет: читайте ответы на тостере и изучайте решения, которые народ предлагает. Разбирайтесь с тем, как они что-то делают. В перспективе сами отвечайте. Метод утенка рулит.

Ну и умение задавать вопросы тоже лишним не будет.

А какие минусы?

Очевидно, это статика - никакого пхп, ноды, руби на рельсах, баз данных... только статика. Это накладывает определенные ограничения. Можно использовать Jekyll или что-то с ним схожее, но сути это не меняет.

Возможно ли как-то сайт защитить от копирования, но чтобы он был опубликован?

А что вы хотите от копирования защитить? HTML? CSS? JS? Все это, так или иначе, прилетит клиенту, так что вопрос защиты от посторонних глах несколько абсурден.

Взял ваш файл, в котором ошибка, загнал в beautifier, он показал следующее:

Иными словами, первый однострочный комментарий сразу вырубает часть кода при превращении его в одну строку. Пользуйтесь нормальной минификацией, при которой удаляются комментарии.

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

Эх.. Как много вокруг "молодых и амбициозных", но при этом "без опыта и кругозора, просиживали штаны"... (это не лично к вам, это общее наблюдение).

Скажу, как человек, который заинтересовался IT классе так в 8, с конца 9 начал писать на С, потом С++, потом еще пара десятков языков и направлений, пытался учиться вообще на безопасника-криптографа, а в результате пришел к фронтенду. Вы говорите, что это не серьезно. Ну может быть. Зато интересно. Лично мне интересно. Тут сошлись мои личные интересы - дизайн, психология и собственно написание кода. Пока не попробовал - не думал, что так понравится. А еще симпатичным не-программисткам гораздо интереснее смотреть на красивые кнопочки и анимашки, чем на сложные алгоритмы. Они хоть понимают, что я делаю. Я попробовал разные направления. Не "подумал, о том, что там бывает", а взял и попробовал. Что-то понравилось, а что-то нет. Никогда бы не стал работать в области, которая мне не по душе, сколько бы там не платили и что бы не говорили. Вот и вам советую взять и что-то сделать. Написать проект в какой-то области. Посмотреть на инструменты, окружение, понять - нужно оно вам по жизни или нет, а не пытаться теоретизировать.

Вот вам немного мотивации в ленту. Смотрите каждое утро перед завтраком.

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