Не понимаю, откуда берутся отступы и значения ширины и высоты - 2 урок. Кексби. Сетка

Обьясните, как выяснили в 1 уроке отступы для хедера именно 10пикселей?

Можно ли как то по другому центрировать содержание, а не дополнительным контейнером?

Как выяснили внешний верхний отступ для центрирующего контейнера? Почему именно 0?

Почему убрали внутренние отступы у .page-header и .page-footer? Как по макету в фотошопе понять что это нужно?

Ну и почему у хедера сделали минимальную высоту 490px и аналогично как это вытащить из макета?

Внимательно изучите теорию перед уроком.
На иллюстрации под видео видны вспомогательные линии - направляющие. Их можно показать/скрыть при помощи комбинации клавиш Ctrl + ; (кириллическая Ж). По ним выстроенное содержание - отсюда берется ширина в 1020px. Затем в задании сказано: “добавим к ней отступы справа и слева по 10px”. Это число не критично. Как я понимаю, оно задается для того, чтобы при маленьком размере окна элементы не “прилипли” к боковым сторонам.

На скрине видно - логотип отодвинут от левого края на 10px.

Можно, но: 1) не всегда, даже скорее - в некоторых отдельных случаях; 2) вам еще рано с этим связываться, изучите сначала классический прием.
В следующих курсах альтернативные методы еще будут разбираться.

В теории к уроку сказано: “… уберем временные внутренние отступы в шапке и подвале”.
Этих отступов нет в самом макете как таковых. Их задали для удобства в одном из предыдущих заданий, а теперь просто снова убрали.

Что входит в header? Все, для чего фоном является фотография Кекса.
Вот и измерьте ее высоту в макете с помощью выделенной области - она будет равна 525px.
Измеряйте только видимую часть! Само фото имеет другой размер и частично скрыто.
Читайте условие целиком; “…задайте 490px и внутренний отступ сверху 35px”.
490px + 35px = наши 525px, взятые из макета.
Только рассуждение строится так: “Так, у меня высота header 525px. Сверху есть пустое пространство в 35px - задам это поле с помощью padding-top. Какая у меня осталась высота содержимого? 525px - 35px = 490px.”

1 лайк

Спасибо, теперь понятней.
Все описания читала, но все равно не понимала, так как там кратко написано и часто непонятно.