Чем заменить position: sticky?

Ivan Bogachev, это я не у тому, что этот так не умеет. Это я как дополнение для автора вопроса.

Надо и этот попробовать, кстати.

Чем заменить position: sticky?

Добавлю, что пользуюсь вот этим:
https://dollarshaveclub.github.io/stickybits/

Если есть поддержка sticky, то он не запускает механизм своей работы, а использует sticky.

Чем заменить position: sticky?

Только Firefox? С чего бы это?
https://caniuse.com/#search=Sticky

Как настроить показ текста во время загрузки веб-шрифтов, @font-face не работает?

organica, значит, где-то ещё у вас грузятся шрифты с вашего сайта.

Я выучил основы веба html css и js что делать дальше?

Владислав Лысков, но это мы опустим :))

Как настроить показ текста во время загрузки веб-шрифтов, @font-face не работает?

organica, я не знаю, что у вас за такие безумные используются файл шрифта.

Пропишите вот это в head (не через import, чтобы не было проблем со старыми браузерами):

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=cyrillic" rel="stylesheet">

Свои эти стили закомментируйте.

Как настроить показ текста во время загрузки веб-шрифтов, @font-face не работает?

Вот это используйте:

@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    src: local('Roboto'),
    url('../font/roboto/Roboto-Bold.woff2') format('woff2'),
    url('../font/roboto/Roboto-Bold.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    src: local('Roboto'),
    url('../font/roboto/Roboto-Light.woff2') format('woff2'),
    url('../font/roboto/Roboto-Light.woff') format('woff');
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: local('Roboto'),
    url('../font/roboto/Roboto-Regular.woff2') format('woff2'),
    url('../font/roboto/Roboto-Regular.woff') format('woff');
    font-display: swap;
}

html {
    font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

Как настроить показ текста во время загрузки веб-шрифтов, @font-face не работает?

organica, погодите, зачем каждому начертанию вы даёте своё название?

Как настроить показ текста во время загрузки веб-шрифтов, @font-face не работает?

А где просто WOFF? Не все браузеры поддерживают WOFF2. А WOFF — считайте всё современные и не очень. Добавьте и тоже.

Я не помню, почему точно, но помню, что font-display: swap; стоит ставить последним свойством внутри правила.

Я выучил основы веба html css и js что делать дальше?

Developer, это объединение усилий однородных частей. Оно может быть и не в конце. Ну типа так: «Вася, Петя и др. или Маша, Таня и Олеся».

Почему не работают медиа запросы на второй странице?

Andrey Vasilev, лучше обновите репозиторий, чтобы увидеть то, что не работает.

Почему не работают медиа запросы на второй странице?

Andrey Vasilev, ссылка на проект?

Почему не работают медиа запросы на второй странице?

Типичный случай из серии: «Имеется что-то. Имеется где-то. Есть проблема».

Первое — проверьте, есть ли нужные CSS-правила на второй странице. Второе — проверьте, не перебивает ли их что-то по иерархии. Напомню, что стили адаптивности должны идти после основных.

~ ~ ~ ~ ~

Кстати, screen не нужно указывать в типичном случае, как и экран 320px, ибо меньше не бывает. Как раз из-за указания min-width: 320px может быть проблема, когда человек сжимает окно на ПК (там можно сделать ~200px), а для них не будут срабатывать стили.

Есть сайдбар. Нет плавности прокрутки + под ним крутится body. Как исправить?

Pitman77, пишу ответ, отмечайте решением, чтобы не висело.

Я выучил основы веба html css и js что делать дальше?

Developer, а он их и не объединял, а разделил через или:
[ajax] или [NodeJS и др. фреймворки]

Есть сайдбар. Нет плавности прокрутки + под ним крутится body. Как исправить?

Когда вы уже научитесь писать ОС и браузер? Stylus тут не при чём.

По описанию это явно iOS Safari.

Добавьте это в ваш сайдбар:
-webkit-overflow-scrolling: touch;

Тогда будет инерционная прокрутка, как на body. К сожалению, у этой штуки есть баги, но иных решений Apple не даёт.

Как изменять размер div вместе с содержимым при изменении размера окна?

Какого рода должны быть изменения?

Если вписывать ваш сайт в окно браузера — вам поможет только JS. Только зачем такое вообще нужно?

Какие у Вас правила "С чего начать" и шпаргалки HTML/CSS?

Ни разу не видел мануала, который бы заменял опыт.

Вам придётся в начале пути делать то, что вы не понимаете. Копировать то, что вы не понимаете и т. д.

Железных да/нет в этой сфере не существует. Есть технологии с разным предназначением и степенью актуальности. Со временем вы овладеете технологиями и пониманием того, когда и что нужно использовать.

Почему ссылка растягивается во всю высоту родительского блока?

Не надо делать, как сказал Антон.

Надо так делать:
https://codepen.io/EggManR3/pen/MWgbRmd

Как сделать показ яндекс карты в мобильном firefox?

Александр Степанов, на Windows — виртуальная машина с MacOS. На ней запускаете эмулятор iOS в XCode.

Если есть MacBook, то пропускаете шаг с виртуальной ОС.

По причине необходимости постоянной отладки Safari я уже давно исключительно на MacBook'е работаю.