smiros

ну тк добавь классы для row и col типа "myrow" и "mycol" и для них напиши стили:

.myrow {margin-left: 0; margin-right: 0;}
.mycol {padding-left: 0; padding-right:0;}

а если вообще со всех хочешь убрать то getbootstrap.com/customize/#grid-system пункт @grid-gutter-width

Есть jquery. Сто лет ему. Немного (сильно) сокращает код.

this.onMouseMoveBinded = this.onMouseMove.bind(this);
this.onMouseEndBinded = this.onMouseEnd.bind(this);

Не прочитать.

if( typeof (this.obj) === 'undefined' ) this.obj = opt.el;

Лучше так.

if(this.obj === undefined) {
	this.obj = opt.el;
}

Вам срочно нужна векторная алгебра.

// ***
	this.shiftX = e.clientX - thumbCoords.left;
	this.shiftY = e.clientY - thumbCoords.top;
//***
	this.coords = {
		top: e.clientY - this.shiftY - this.parentShift.top,
		left: e.clientX - this.shiftX - this.parentShift.left
	};
//***
	this.coords.top = e.clientY - this.shiftY - this.parentShift.top;
	this.coords.left = e.clientX - this.shiftX - this.parentShift.left;
//***
	this.rx = this.px - this.kx;
	this.ry = this.py - this.ky;
//***

Ну jquery же.

doc.documentElement.classList.remove('grabbing');
doc.removeEventListener('mousemove', this.onMouseMoveBinded);
doc.removeEventListener('mouseup', this.onMouseEndBinded);

Вообще, подумайте над названиями. Может оно и адекватно, но мне - непонятно. Откуда тут напряжение взялось?

function Tension(opt){
	dragNdrop.apply(this, arguments);
}

Не помню как сейчас, но, ЕМНИП, в js объекты-классы определяются через var.

Tension.prototype = Object.create(dragNdrop.prototype);
Tension.prototype.constructor = Tension;

То есть декларирование Tension должно быть каким-то таким:

var Tension = function (opt){
	dragNdrop.apply(this, arguments);
}

Снова не прочитать условия. Не жалейте строк! Алсо, всё в одну кучу - UI, логику, физику - это плохой знак.

function Slider(opt){
	if(typeof (this.obj) === 'undefined') this.obj = opt.thump;
	if(typeof (this.slider) === 'undefined') this.slider = opt.slider;
	dragNdrop.apply(this, arguments);
}

new dragNdrop({
	el: doc.getElementById('ball1'),
	physiq: true
});

new dragNdrop({
	el: doc.getElementById('ball2')
});

new Tension({
	el: doc.getElementById('square1')
});

new Slider({
	slider: doc.getElementById('slider'),
	thump:  doc.querySelector('.thumb'),
	physiq: true
});

new StepSlider({
	el: doc.getElementById('slider-step'),
	from: 5,
	to: 40
});

Плачу кровавыми слезами. Что это? Не боитесь сборщика мусора? Не надо так. Вообще global space - не есть хорошо.

Итого мы имеем сложно читаемую математику, паршивый нейминг, неудобные условия и нежелание следовать каким-то best-practice. Это всё не фатально, более того - прототип рабочий. Меняться вам или нет - решайте сами. Из важного, я бы посоветовал сделать всё читаемым, а для этого потребуется адекватный нейминг, не сваливать всё в кучу и следовать неформальным правилам. В остальном, javascript не идеальный вариант, чтобы показывать задротство в области clear code. И с паттернами у него беда.

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

Нужно подкреплять практику теорией, а не наоборот.
Представь, что ты решил научится плавать, сколько книг тебе нужно прочитать по плаванью? Одну про плаванье для чайников, одну-две про стили плаванья, еще одну про всякие истории, где старые пловцы рассказывают о своих ошибках? Или просто залезть в воду и махать руками будет эффективнее? В идеале конечно тренера бы (не курсы, а наставника), но и самому побарахтаться - научит тебя больше, чем 100 книг.

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

Мне кажется, самый простой пример замыкания - это счетчик.

var counter = (function () {
	var current = 0;
	return function () {
		current++;
		return current;
	}
})();

console.log(counter()); // 1
console.log(counter()); // 2

В данном случае мы не имеем доступ к переменной current и функция гарантированно возвращает каждый раз уникальное значение.
Если бы это была простая функция, то переменная, содержащая состояние (current), должна была бы находиться вне функции.

var current = 0;
var counter = function () {
	current++;
	return current;
}

console.log(counter()); // 1
current = 5;
console.log(counter()); // 6

А это уже нарушает принцип "черного ящика", т.к. переменной можно присвоить другое значение в любом месте.

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

0) https://www.memrise.com/login/?next=/home/ + https://www.memrise.com/course/332202/12527/
www.bbc.co.uk/learningenglish
https://www.ted.com/

Изучайте английский. Язык международный. 90% информации на этом языке! Без него никак.
Не сыграйте пару партий в HS/доту. Посмотрите на одну серию текущего сериала меньше, или лучше посмотрите его на английском с субтитрами! Всего 30 минут в день обеспечат вас безбедным будущим!

1) klava.org/#eng_basic
15 минут в день. Это все, что нужно для осваивания слепой печати.

2) https://webref.ru/ref
Учим все. Как учили стихи в школе. Да, будет больно, но потом это окупится сторицей.
Совет: заведите тетрадку и переписывайте туда все теги/свойства. Не ставьте себе задание: "выучить все за месяц". Поставьте задание: "выучить три тега/три свойства за день". Так ваш мозг будет получать удовлетворение от процесса.

3) https://flexbox.io/
https://cssgrid.io/ Отличный курс по относительно новой технологии. При поддержке Mozilla
Переходите к этим курсам только после выполнения второго пункта.
Курсы на английском. Если не понимаете, вообще ничего страшного. Просто повторяйте за автором. Пройдите курсы до конца. По видео в день. Это не займет много времени.

4) https://drive.google.com/open?id=1uD0VkRXS3wUlw3oP...
Сверстайте любые три макета.
- не использую flexbox/cssgrid
- используя flexbox
- используя cssgrid
Сделайте их полностью adaptive/responsive.

В общем-то все. Для вас после этого не составит никакого труда сверстать что-либо. НЕ НУЖНЫ никакие платные курсы для этого.

Что касается дальнейшего развития, то это отдельная тема. Удачи, я в вас верю! =)

Старый ответ

падавану юному говорить для начала свободно надо на основных языках веб-программирования -
js css html

js фирст, потом css и html
надо сразу понять что ты при желании можешь совсем не использовать возможность декларативного программирования стилей оформления и структуры дерева документа

учебник Фленагана надо полностью переварить
и php немного для начала - только основные серверные функции для работы с папками и файлами
или лучше - изучить api node.js - и делать сервер на js

js - очень простой язык, проще некуда, «Лисп в шкуре Си»
и самый кросплатформенный - новичкам самое то
не забываем принцип KISS - ценим минимализм-простоту-легкость
без чужих фремворков и библиотек ты получишь максимальную производительность js - в 3-5 раз ниже чем на Си

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

программирование это решение поставленной задачи -
сам придумай себе задачу в интересной области и решай ее несколько лет пока учишься

клиент толстый, сервер тощий -
сервер используй только для простых функций - чтение-запись данных, сканирование папок, авторизация ...

офлайн и мобайл фирст -
надо сразу понять, что мобильный сенсорный экран - это основное средство ввода 21го века
и что браузер работает в песочнице

велосипайд фирст -
чтобы научиться - делать ты должен сам

просветление неизбежно после этого обретешь
и настоящим веб-мастером станешь
или даже джедаем или нинзем, если пребудет с тобой СИла
три-пять лет для этого надо грызть гранит



и есть другой путь - темная сторона программирования:
работа по чужому готовому стандартному шаблону-фреймворку
бесконечный круговорот в сансаре капиталистической индустрии
общение с дебилами, психопатами, жуликами, лентяями и тд
офисное или фриланс страдание
легкая заменяемость программиста
вечная доделка-переделка чужого кода
неспособность делать нужный функционал самостоятельно
постоянное гугление готовых решений
депрессия и уныние
//а самые ленивые становятся верстальщиками-недопрограммистами))

нормальные программисты делятся на два типа:
1) инженеры - те кто могут написать шаблон для себя или для других
2) слесари-монтажники и чесальщики-мотальщики - те кто работают в рамках готового шаблона
- оба типа нужны, всё зависит от твоих способностей и талантов

И все отлично работает, но когда дело доходит до реального телефона все плывет, самое больное - это шрифты они больше чем должны быть.

Решение проблемы с увеличением шрифтов на мобильных устройствах.

-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;

А если у меня его нет? Так же, не буду же я при верстке каждый раз заливать сайт на сервер и чекать его с телефона.

Используйте gulp.js, с установленным browserSync, который Вам дает локальный адрес сайта.
Вводите на устройствах 192.168.0.xxx:3000 (адрес выдается browserSync'ом).
И каждый раз при сохранении страницы или изменении файлов CSS или JS страница обновляется.
Вы увидите все возможные косяки, не заливая сайт на сервер.

Также browserSync можно использовать с установленных виртуальных машин с разными браузерами.
У меня на столе стоит 2 монитора с разными разрешениями и ноут, подключенный по сети.