gleendo

Дэвид Флэнаган - JavaScript. Подробное руководство
Дуглас Крокфорд - JavaScript: сильные стороны
Addy Osmani - Learning JavaScript Design Patterns

А может не стоит изучать чистый WebGL? Попробуйте повозиться с Blend4Web - фреймворк WebGL для сайтов. Документация на русском. Большой плюс в том, что имеется редактор сцен и окружения (Blender).

Или three.js. Правда документация на английском

Если говорить о сетях, то вы должны:
- знать HTTP: хотя бы основные фреймворки (авторизация, кэширование и т.д.) + основы, методы, заголовки, структура сообщений, статус коды.
- разобрать модель OSI и TCP/IP хотя бы до транспортного уровня, ну и может быть было бы неплохо получить базовое представление о низлежащих уровнях. Ну и понимать что есть TLS.

в принципе все есть в википедии, а для деталей есть спецификация HTTP.

Бекэнд — что надо, а что нет?

Для всех стрелков вызов будет выдавать 10, потому что в момент вызова(а не создания) функция будет ссылаться на i = 10(на последнюю итерацию). Для того, чтобы сохранить значение переменной, нужно сделать сохранение ее в локальную. Например так:

function makeArmy() {

  var shooters = [];

  for (var i = 0; i < 10; i++) {
    var shooter = (function() { // функция-стрелок
		var j = i; //сохраняем значение в локальную переменную
		return function() {          
			alert( j ); // выводит свой номер
		}
    })();
    shooters.push(shooter);
  }

  return shooters;
}

var army = makeArmy();

Вот здесь habrahabr.ru/post/38642 описана полностью твоя проблема и ее решение.

Вы не поняли решения или причину ошибки? Или и то и то?

Причина ошибки:
Функция не берет i при создании, не сохраняет его куда-то, она возьмет его именноо при выполнении, т.е после цикла, когда i будет = 10.

Если разжевать "исправления", то как-то так:

1-ое: Функция - объект и как любому объекту ей можно назначить свойство, что и делают. Потом из самой функции получают к нему доступ.

2-ое: Передают i во внутреннюю функцию и уже через нее возвращают искомую функцию, которая берет i (т.е х) из контекста первой и потому, она сохраняет значенние после изменения глобальной i.

3-ее: Суть как во втором, но push выполняется в контексте первой функции (это ничего не меняет). Иначе говоря, записали красивее, суть не изменили.

А более понятным языком только в книгах, не в онлайн-справочниках.

Думаю если ничего не понял из задачи, то тема нихр#на не усвоена.

Вы, конечно, правы. НО, если вы реально решили научиться программировать, то вам придется свыкнуться с этим ощущением и работать над собой дальше. Потому как такие недопонимания будут возникать ооочень часто. Если вы чего-то еще не поняли, значит еще до этого не доросли (тут нужно правильно понимать). Не отчаивайтесь. Работайте дальше. Это же не уравнение или задача, где не узнав одно неизвестно невозможно решить задачу. В этом месте у вас будет пробел, но программировать вы все равно сможете. А когда наткнетесь на задачу, где нужно понять замыкания, то у вас будет реальная мотивация для этого.

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

ИМХО. Простое решение должно выглядеть так

function makeArmy() {
    
      var shooters = [];
    
      for (var i = 0; i < 10; i++) {
        var shooter = function(self_i) { // функция-стрелок
          alert( self_i ); // выводит свой номер
        };
        shooter = shooter.bind(null, i);
        shooters.push(shooter);
      }
    
      return shooters;
}
    
var army = makeArmy();

shooter = shooter.bind(null, i);
Метод bind доступный у функций, если объяснять простым языком - возвращает новую функцию, которая представляет из себя исходную функцию с приклеенным контекстом ( this внутри функции) - первый параметр (в данном случае null), и аргументами вызова - все последующие аргументы (у нас только i)
То есть shooter.bind(null, i) вернет функцию которая будет выполнять те же действия, что и исходная shooter, но будто первым параметром мы передали i.

Начинайте с документации WebGl и Three.js, попробуйте сделать демки.
Попрактиковавшись и поняв структуру, уже можете переходить к opengl, так как это более расширенный формат.

Про английский я не говорю, надо читать хотя бы с помощью переводчика. И надо понимать, что даже самые крутые переводы могут внести немного искажения, или немного запутать понимание.

Ну для начала вы можете покурить что-то на тему машинной графики, информации на русском языке хватает. Хотя бы понимать что такое графический конвеер и шейдеры. Ну и разобраться возможно как при помощи 2d api (а webgl именно 2d-шная api) формируются проекции трехмерных сцен.

Затем можно смело брать примеры на webgl и разбирать их руководствуясь терминологией opengl (как никак webgl это всего-лишь биндинг opengl для js).

Новые технологии, чтобы не читать десятилетние учебники, нужно изучать по англоязычной документации. К сожалению. И вы это должны отлично понимать, если взялись за программирование. В ответах на вопрос вам определенно посоветуют хорошие сайты и документацию (которую, уверен, вы сами можете найти в гугле по запросу WebGL docs), и может несколько русскоязычных статей с примерами уровня "Hello World", но все же, найти огромное количество русскоязычной информации, тем более актуальной, не получится.

Стоит, это самое подробное руководство из существующих.
Там берется контекст и объясняется досконально.
Существенные внесения в ES6 можно посмотреть здесь на русском языке learn.javascript.ru/es-modern

Правая кнопка мыши затем => Код элемента или Иссследовать элемент (можно использовать расширение для браузера Firebug) => Наводишь на элемент который нравится (внизу слева будет код от элемента попытайся натыкать там родительский, справа css номера строк). При желании определенными действиями можно изолировать нужный код от всего остального, ну или просто собрать все необходимое как описано выше, так же можно поступить и с js. В любом случаи нужны минимальные знания html+css+js и в принципе можно забрать все что угодно!

Для начала начинайте визуально размечать макет на секции.
Возьмем к примеру такой макет, оригинал
В данном случае можно разделить на:
1. Шапка (включает логотип, меню и кнопки поиска с корзиной)
2. Блок с фоновым изображением и вступительным текстом
3. Слайдер
4. Каталог
5. Подписка
6. Рекомендованные товары с фильтром
7. Форма обратной связи
8. Подвал

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

Насчет того, как правильно верстать, не зацикливайтесь сейчас на этом. Не бойтесь что есть сомнения, это нормально, так приходит опыт ибо мозг начинает думать и искать решения. Пусть будут ошибки и жуткий говнокод, через какое то время взгляните на свои первые работы и спросите себя "это я что ли написал?")). Все через это проходили.

Главное начать, а не тупо пялится в монитор!

UPD:
www.youtube.com/watch?v=98rUSTa5-dE
www.youtube.com/watch?v=YzivmuO8Vzs

Конкретно в вашем примере, укажите

body {
    padding-left: 250px; // отступ равный ширине колонки
}

Либо оберните все содержимое в блок, например .wrap и для него пропишите такие стили

.wrap {
    width: 100%;
    height: 100%;
    padding-left: 250px; // отступ равный ширине колонки, это добавит прокрутку снизу
    box-sizing: border-box; // нужно чтобы отступ включался в ширину, это уберет прокрутку снизу
}

Результат будет аналогичен.
Это часто используемый метод.

Телефон абсолютом вполне правильно. Да и всё остальное тоже. Не вижу ни одной причины почему в данном случае абсолют - плохо. И никто из комментаторов такой причины не назвал.