hjk

Не знаю, есть ли красивый способ. А почему такой вариант не устраивает? codepen.io/anon/pen/ZbrxKN

Посмотрите на htmlacademy — там неплохо написано про блочную вёрстку в том числе.

Есть не то, чтобы скринкасты, но достойно и тоже вполне пойдёт — htmlacademy

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

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

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

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

А могу ли я уточнить — лучше для кого? Для пользователя, для вас, как разработчика или для сервера (нагрузка)?

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