Nikolay Talanov

Создаете простой контейнер высотой в весь экран (100vh).
Расположите его например с помощью position: fixed как есть c left: 0; top: 0; (по идее надо без фикседа, но в этом случае надо основной контент запихивать в свой контейнер, сами разберетесь).
Далее задаете transform: translate3d(0,100%,0); для этого контейнера чтобы он по умолчанию находился снизу.
По клику загружаете внутрь контент. Можно хоть примитивным $.load api.jquery.com/load обойтись, но по хорошему лучше использовать шаблонизатор и с сервера получать только сам контент получать, без левой фигни.
Как только загрузилось (в случае с получением данных в виде json все должно работать почти моментально) добавляете блоку класс, чтобы он выехал красиво снизу.
Но это только основа. Помимо этого еще надо будет делать много всяких мелочей, чтобы по итогам все смотрелось красиво и никого не раздражало.
У них кстати на сайте кривовато сделано. При открытии "истории" меняется урл на #history, но если кликнуть браузерный "назад" то урл поменяется, а вот страничка назад не уедет, хотя это вполне простой функционал.

EDIT: чекнул сейчас сайт получше, там ничего динамически не подгружается, у них все заранее загружено в контейнеры, то есть совсем все просто.

Если известны размеры, то в 99.99% любых случаев юзайте negative margin центрование:

.el {
  position: absolute;
  left: 50%;
  top: 50%;
  width: %width%;
  height: %height%;
  margin-left: %width% / -2;
  margin-top: %height% / -2;
}

Можно изучать и играться с новыми фичами задолго до того как они попадут в stable версию. Но в большинстве случаев использовать канарейку в повседневной работе это не лучшая идея, есть риск потрепать себе нервы мучаясь с багами, а потом в итоге выяснится что баги были только в канарейке, а в живых браузерах все ок, и вы все это время впустую мучили себя.
Помню как меня дизайнер мучал с каким-то багом в хроме, я себе всю голову разбил, ибо не мог воспроизвести его ни в одном браузере. Потом выяснилось что у него была dev версия в которой имелся именно этот баг. Через месяц вышла эта же версия, но уже stable, и там все работало без проблем.

Естественно, ведь без этого не стать html-программистом.

Html препроцессоры - бяка.
В большинстве нормальных проектов вам не придется заниматься какой-то копипастой, ибо будет шаблонизация и компоненты. А для прототипирования хватает Emmet.
Для css естественно scss. Ну или stylus если вам очень нравится его специфический синтаксис и отсутствие строгих правил.

Изращениями какими-то занимаетесь. Я более чем уверен что вся цветовая схема влезает в пару строчек стилей, и мучать юзера дополнительным http реквестом при каждой смене темы это очень плохая идея. Просто сделайте для каждой цветовой схемы глобальные классы для body или основного контейнера и по клику меняйте их. Выбранную схему просто потом сохраняете в localStorage или вообще на сервере можете даже хранить, если юзер логинится.

Вариантов как сделать много. Самый красивый/оптимальный/масштабируемый, это использование GSAP с таймлайнами. Создали таймлайн с состояниями всех анимаций телефона и прочих объектах в % допустим и привязали эти проценты к высоте скролла всего сайта. Сайт скроллится - проценты меняются, гсап сам по умному все анимирует, включая множественные изменения трансформов одновременно.

300 баксов за такое? Не смешите. Чтобы сделать все точь в точь как на гифке, с хорошей браузерной поддержкой, идеальной плавностью, и самое главное, ОТЛИЧНОЙ ПРОИЗВОДИТЕЛЬНОСТЬЮ, вам понадобится несколько десятков человеко-часов приличного специалиста, рейт которого стартует с 30$/h наверное. Я естественно говорю не только о том что на гифке, но и об остальном контенте, который тоже будет соответствующего уровня.

Большинство местных "спецов", которые тут пишут "да там все просто, бах бах пара трансформов", на деле мощно так обделаются когда их анимация полноэкранного транзишена картинки будет адово тормозить на fullHD+ экране, и при этом выглядеть она будет крайне паршиво на фоне отполированного оригинала.

Тут даже дело не в каких-то магических и крайне специфичных навыках, тут дело в опыте работы именно с такими штуками. Полировка таких вот "утонченных" анимаций может с легкостью забирать часы, особенно когда начинаются проблемы с перформансом или специфичными багами браузеров, из-за проблем со слоями и прочей чехардой.

>Как обезопасить себя при сотрудничестве с программистами-фрилансерами?

1) Не кормить с рук.
2) Не делать резких движений, дабы не испугать существо.
3) Ни в коем случае не открывайте клетку.

Поиграйтесь с :before, :after. Я постоянно делаю всякие нестандартные тени с помощью псевдоэлементов. +если вам понадобится анимировать появление тени, то это единственный нормальный вариант (речь идет об анимации с помощью изменения opacity, ибо анимация самого свойства box-shadow это весьма прожорливая операция в плане рендеринга).