Дюша Метёлкин

дляproduct__photo position:relative; , для

product__percent position:absolute; right: 0; top: 0;

Отслеживаешь событие скролла и допустим если проскроллил больше 500 добавляешь класс block

(window.pageYOffset > 500){
      navigation.classList.add('block')

для того чтобы отслеживать на какой ты секций находишься есть тык

Это не в нашей юрисдикции пишите

фаир фоксе клик

и спрашивайте у них почему так, либо можете прогнать в автопрефиксе или обновить браузер(старые версии фаир фоксе не поддерживают градиент без префикса)

Контейнер создают чтобы центровать контент, соответственно это всегда родительский блок и весь контент в нем уже дочерние элементы которые подстраиваются под его ширину

по дефолту ты делаешь 1920х1080 и уже ниже адаптируешь 1600х900, 1366х768(это самые популярные разрешения), желательно делать сайт не адаптивным в наше время а резиновым а это разные вещи, про media правильно так же блокам задавать резиновую ширину в % допустим .block{ width: 33%;}, и под мобилку просто делаешь эти блоки либо в 2 колонки(.block{ width: 50%;}) либо в 1(.block{ width:100%;})

адаптивным(резиновая верстка)

Адаптивный и резиновый это разные вещи, чтобы центрировать текс задаете ему text-align:center;

Понимаю, что сейчас никто уже не пишет сайты с нуля

ничего вы не понимаете, сайты с нуля не пишут те кто работают с шаблонами и конструкторами,

В каких средах сейчас пишут фронтенд часть для сайта?

что значит в каких средах ? какие ещё среды, фронтендщики делают всю визуальную часть сайта ну и опыт программирования на Js тоже должен быть у фронта