Какой метод верстки сайта и лейдинга считается оптимальным?

Ragtime_Kitty, например, двумерные раскладки, подходящие для гридов, но не реализуемые флексами без дополнительных оберток.

Как расположить блок с позицией абсолют, чтобы он не заступал за края?

свойства width, height, left, top в блоках .tes динамические и поменять их на проценты не получится.

Придется напрячься.

Либо задавать для window фиксированную ширину и потом считать и задавать zoom.

Какой метод верстки сайта и лейдинга считается оптимальным?

Ragtime_Kitty, философский вопрос. Зависит от количества лишних символов и ситуации.
В роуминге, например, тарификация может быть по 100КБ, пара лишних торчащих байтиков и ты оплатил лишние ХХ рублей.

Как масштабировать окно, если не указан viewport?

Viktor Burdale, аналогично.

Можно предварительно js'ом определять устройство или размер и масштабировать как нужно, чтобы не получить слишком мелкие элементы.

Сделал видео фон. В локале работает, в сети на гит нет. ЧТо делать?

Александр Лихтенштейн, масштабируйте с сохранением пропорций и обрезайте по принципу cover. На планшето-мобилках убирайте вовсе.

Как масштабировать окно, если не указан viewport?

Использовать vw vh?

Сделал видео фон. В локале работает, в сети на гит нет. ЧТо делать?

Александр Лихтенштейн, В каком смысле куда? Где вы хотите его видеть, туда и пишите.

Верстка по БЭМ. Как будет правильнее?

И классы именно в таком порядке class="button pop-up__button", потому что ты должен своим классом переопределять стили деолтной кнопки.

Не вводите в заблуждение. Без разницы в каком порядке классы идут в html, важен порядок в css.

https://jsfiddle.net/zs176ue3/

Какой метод верстки сайта и лейдинга считается оптимальным?

Олег Серов,

Опыт у меня не большой, но я все больше склоняюсь, что каждый элемент, шапка, секция, подвал, лучше размечать по определенному методу (float, inline-block, table-cell, flex, grid).

1. Логично, если вы зададите родителю flex, а дочернему попытаетесь задать float, то float не сработает.
А вот дочерний абсолют - сработает.

2. Если вы решите к шапке применить флекс, это не значит, что футер тоже надо делать флексом.

3. Более того, на десктопе у вас может быть таблица, обычный тег table и соответственно display тоже будет table. Но на мобилках ее уже нужно будет переделать во флекс.

Какой метод верстки сайта и лейдинга считается оптимальным?

Ragtime_Kitty, полно верстальщиков, которые лепят флекс всюду. Потому что прочитали, что флекс это здорово.

Вот идут у них три блока в столбик на всю ширину окна и они на радостях пишут:

display: flex;
flex-direction: column;

Просто ради того, чтобы был флекс. Зачем?

Кто может дать конструктивную критику по первой вёрстке?

нет сброса стилей, нет использования em

Да и не обязано быть.

Какие CMS есть на фрейморке Laravel?

Какие есть поисковые системы?

Почему схлопывается навигация?

Насколько я знаю - div элементы нельзя закрывать в ссылку

можно, только хорошо бы ссылку блочной сделать

Слетает кодировка, когда заливаю на хостинг, как исправить?

Потому что не правильно указана кодировка:
- в файле
- самого файла
- у сервера

Последнее вероятнее

Не получается соединить CSS к HTML, как сделать?

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

Как исправить проблему с z-index?

Зачем вообще сначала делать padding, а потом двигать абсолютом обратно? Определитесь с паддингами и все будет ок.

comment-avatar вообще лишняя обертка.

Префиксы для сафари, как исправить?

VegasChickiChicki, Если вы зададите contact__main-content-text высоту точек 300, то увидите, что и в Сафари все работает.

С какой целью вы там грид используете?

Префиксы для сафари, как исправить?

VegasChickiChicki, как я люблю играть в угадайку, вы не представляете.

Значит, возвращаемся назад: версия Сафари и код в песочницу.

Префиксы для сафари, как исправить?

VegasChickiChicki,
Свойство пишется так:
align-items: flex-end;

Префиксы для сафари, как исправить?

Сафари уже довольно давно понимает обычное свойство align-items: flex-end
Какого результата вы хотите добиться?