Александр

10-15 макетов сверстаешь, будешь знать 95% того что используется в работе, остальное по необходимости гуглиться и соответственно запоминается.

Принято делать 1000px.
Но, на самом деле, не так сложно сверстать отзывчивую посадочную страницу. Да и по времени занимает лишь дополнительный час.

сделай max-width:1170px и width:100%;

Проблема в том, что у дочернего элемента не может быть z-index меньше, чем у родительского, как в твоем случае.

Реализовать можно по-разному, в зависимости от того, что и как еще ты там захочешь расположить. Как вариант, изменить так:

.block1 {
    /* background: #323232; */
    /* z-index: 10; */
}

.block1::after {
    content: "";
    position: relative;
    display: block;
    height: 100%;
    background: #323232;
}

img {
    /* z-index: 1; */
}

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

Измененный пример: https://codepen.io/anon/pen/BrdYJQ

https://codepen.io/anon/pen/MrJMVG

не пойму, зачем здоровое фоновое изображение в *.png экспортировать 0_о по-моему это плохая практика.
думаю *.jpeg с уровнем сжатия 65 вполне хватает для данной цели

Это не проблема Хрома, это у Ютуба meta viewport не прописан, вы бы проверили перед тем как бежать задавать вопрос инспектор на других сайтах, хотя бы на Тостере)

Ну допустим так https://codepen.io/aliencash/pen/OzyeJa

Господи пусть такие дизайнеры плодятся и размножаются!

А теперь по сути.

1) Названия лучше давать на английском.
2) Не злоупотреблять количеством шрифтов - вполне хватит двух или трех (Шрифт для текст, шрифт для заголовков, хитросделанный шрифт для подписи под лого или других декораций)
3) Хоть немного быть в курсе того, что можно сверстать, а что нет - например цвет заголовков градиентом или картинкой - можно реализовать на css, но работать это будет разве что в Chrome.
4) Не обрезать картинки делая их круглыми - используйте маски перекрытия или как то так, в верстке нет кругов только прямоугольники и квадрат как частный случай прямоугольника, но визуально сделать картинку круглой и скажем с бордером можно стилями - при этом исходник картинки будет квадратом или прямоугольником.
5) Используя тени делать их отдельно от изображений.
6) Элементы форм рисовать без фанатизма и стараться оставлять их такими какие отрисовываются браузером, в основном это касается чекбоксов/радиокнопок выпадающих списков, их можно стилизовать, но до сих пор это такие костыли и гемор, что аж горит, а потом горит у бекэндщиков, так как им все это реализовывать через задницу приходится.
7) Прежде чем нарисовать какую то супермега крутую красивую вещицу, спросить верстальщика (если есть возможность) сможет он это реализовать.