hjk

Вот тут есть немного объяснений, хотя вопрос не совсем про это
stackoverflow.com/questions/1594077/jquery-synchro...

В javascript всё очень похоже. Можно сделать $arr[$item['name']][] = $item['value'], только вместо квадратных скобок можно использовать метод push:
$arr[$item['name']].push($item['value'])
Многомерный динамический массив.

Нагуглил вот небольшую подборку
clickrub.blogspot.com.tr/2014/09/web-tour.html
Сам из всего этого пользовался только introJS — неплохо и просто, правда давно не обновлялось, судя по репозиторию.

WebStorm / PHPStorm, но они не бесплатны.

Заменить или удалить канвас нельзя — в нём рисуются эти «кружочки». Если надо, чтобы они «поднимались выше», для этого придётся изменить код, который их рисует. Канвас, судя по коду, уже и так растянут на весь экран, поэтому надо поиграться с настройками в файле demo-2.js. В 84 строке я заменил _this.alpha -= 0.0005; на _this.alpha -= 0.00005;, тем самым немного «продлил» жизнь кружочков. Нужно было сделать это?

UPD: Хм, мне кажется, вы имели в виду нечто другое. Тогда решением будет сделать канвас position: fixed и растянуть на весь экран, то есть при скролле он будет везде на виду. Я как-то с формулировкой вопроса не сразу разобрался.

Такую сетку можно быстро сварганить, пользуясь возможностями flexbox → тут хорошо написано

С js такой фокус точно не прокатит — мне кажется, из-за соображений безопасности, на SO обсуждалось несколько раз, можно посмотреть, например, тут. А насчёт css — знаю, что можно лишь сохранить изменённые css себе на диск. Рефрешить со своими изменениями нельзя.

Мне в своё время помогло это и это

Конечно можно. Видели Brackets?