campus1

Ecли я вас правильно понял.
Сделать файл routes.js
Прописать там

export const PAGE = { pageName: `/url/example`} // для роутинга
export const apiRoute = {getElement: '/get/element/:id'} // для api запросов

И потом import {PAGE} from 'config'

Можно расширить объекты PAGE и apiRoute

Решил проблему так

componentDidMount() {
    window.addEventListener('scroll', this.handleScroll);
}

componentWillUnmount() {
    window.removeEventListener('scroll', this.handleScroll);
}

handleScroll = (event) => {
    let scrollTop = event.srcElement.body.scrollTop,
        itemTranslate = Math.min(0, scrollTop/3 - 60);

        console.log(itemTranslate);

    this.setState({
      transform: itemTranslate
    });
}

Рендеринг .

Layout -Если вы собираетесь работать фронт-ендщиком, то layout это сетка, по которой у вас будут распредлены елементы (см. Bootstrap, FlexBox, Grid).

Про шаблонизаторы кратко и ясно описал Александр

flex, justify, flex-wrap, блокам ширину +- 20%

HTML - не особо вижу пользу от книги. Дел на 5 минут.
CSS:
раз
два
три
JS - на мой взгляд лучшее что есть это онлайн туториал от Кантора
Ну и Дэвид

Ну и опять же повторю за многими : Книги + сразу практика = Успех.

Если я правильно понял -

body::-webkit-scrollbar {
    width: 1em;
}
 
body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
 
body::-webkit-scrollbar-thumb {
  background-color: orange;
  outline: 1px solid slategrey;
}

Я думаю ошибка в этом что написано document.getElementByTagName('ul')[0], а должно быть document.getElementsByTagName('ul')[0]. Попробуйте!

Перетаскивание

Сделано это с помощью Jquery. К nav добавляется класс navScroll с белым беком.
Вот этот скрипт делает это:

$(function() {
    $(window).scroll(function() {
        var scroll = $(window).scrollTop() + 90;
        var currentArea = $("section").filter(function() {
        	return scroll <= $(this).offset().top + $(this).height();
        });
        $(".nav a").removeClass("selected");
        $(".nav a[href=#" + currentArea.attr("id") + "]").addClass("selected");

        if ($(window).scrollTop() > 100) {
            $('nav').addClass("navScroll");
            $('img.logo').addClass("logoScroll");
            $('div.menu').addClass("menuScroll");
        } else if ($(window).scrollTop() < 100 ) {
            $('nav').removeClass("navScroll");
            $('img.logo').removeClass("logoScroll");
            $('div.menu').removeClass("menuScroll");
        }
    });
});

P.S Всегда смотрите dev tools, найдете все что хотите)

ТС ссверху прав, только вёрстать вёрстать и вёрстать. Не понимаешь как, берешь заходишь на github, ищеш, что-бы поверстать, открив. исходники и начинаешь.

Сначала пробуй сам - потом подсмотри. И так по чуть чуть, и всё получиться.

В каком месте непонятно??

Картинки, span и ссылка. флексами в 2 строчки
Каждую сеть оборачиваете в блок, а блоку дайте dispay: flex, ну и marginами поиграйтесь