aleksandr-n

Мне очень помогли уроки от Михаил Базарова.
Хороший учитель, внятная дикция, приятно слушать, без воды, также преподает основы. Новичкам очень поможет
Видеуроки

habrahabr.ru/post/14900
https://dev.1c-bitrix.ru/learning/course/index.php...
www.1c-bitrix.ru/blog/rsv/220.php

Вот есть репозиторий - это готовый шаблон для адаптивной верстки.
В примере можно увидеть адаптивную таблицу.

На самом деле все очень просто.
NPM - это пакетный менеджер который идет вместе с node.js, С помошью него можно устанавливать все что вы перечислили выше и другие модули, программы.

Gulp, Grunt - это консольные утилиты. Они взаимозаменяемы. Они делают рутинную работу за тебя: компилируют Less Sass, склеивают скрипты, минифицируют скрипты, стили, делают спрайты, оптимизируют картинки и даже поднимают свой простенький вебсервер и LiveReload.

Gulp или Grunt - Дело вкуса. Мне понравился больше Gulp. Он быстрее.

Git - Система контроля версий твоего кода. Она позволяет организовать совместную работу нескольких разработчиков над ним проектом.

Bower - просто утилита, которая быстро тебе скачивает необходимые библиотеки и из хависимости. Что бы ты не лазил по сайтам разработчиков. Например тебе надо установить jquery - ты просто в консоли пишешь Bower install jquery и тебе скачивается Jquery.

Я считаю что Git в современной работе просто необходим как воздух.
Gulp или Grunt и Bower сильно облегчили мне жизнь.

Думаю что для устроиства на работу ключевым знанием будет Git. а потом уже все остальное.

Gulp или Grunt и Bower - очень легкие программы для первичного использования. Их Можно попробовать и решить нужны ли они тебе или нет - за очень короткий промежуток времени.

Не надо все и сразу изучать - забудете нахрен все или будете путаться.
npm, bower - только пару команд нужно знать,
git - также нужно знать несколько команд и принцип работы.
grunt - также.
То есть имею в виду, что не нужно пытаться изучать все команды, 80% из них среднему программисту не нужны и тем более в начале.
С практикой и с опытом все встанет на свои места, изучаете одно, другое, третье и не забываете практиковаться, чтоб закреплять изученное, так и двигаетесь..
Все выше описанные инструменты - это всего лишь средства-помощники для программиста или просто хорошие друзья ). Это инструменты без которых можно обойтись, но с которыми жить становится легче ))

Более чем согласен с Ленар Фаттахов

Все эти инструменты лишь облегчают вашу работу, автоматизируют то, что вы и так делали раньше. Сначала научитесь работать без них, а потом потихоньку, по необходимости добавляйте их в свои новые проекты и почувствуйте вкус настоящей жизни!)

npm/bower упрощают установку сторонних библиотек. Чтобы ходить по сайтам и скачивать jQuery, jQueryUI, Bootstrap и т.д., все это ставится одной командой.

grunt/gulp -- таскраннеры, позволяют организовать хитрую компиляцию/склейку файлов/минификацию и прочее, что может понадобиться фронтендеру. Во-первых, это не только LESS, но еще миллион всяких вещей, во-вторых, это настраивается на проект и один раз (то есть не надо каждому разрабу ставить WinLESS и настраивать его).

git/mercurial/svn -- система контроля версий. В команде без этого никуда (и никто за вас не будет коммитить код), но и при одиночной разработке есть профит.

npm, grunt, bower, git - важные и связанные между собой технологии. Советую их изучить.
Коротко:
npm - менеджер пакетов для nodejs. Через него ставятся grunt и bower.
grunt - собирает front-end: будет за вас less -> css перегонять.
bower - менеджер javascript пакетов
git - система контроля версий, каждому разработчику знать и использовать обязательно. С помощью git'a вышеупомянутые библиотеки и скачивают пакеты, например с github.

Обычно это называется "One page scroll"
Если вы прям совсем ленивы, и вам только плагины подавай, то вот первые ссылки из гугла www.thepetedesign.com/demos/onepage_scroll_demo.html и alvarotrigo.com/fullPage (второй плагин выглядит покруче и свежее)
Если же хочется посмотреть изнутри, то вот несколько простых (и не очень) моих демок (люблю эту технику :) )
codepen.io/suez/pen/JoWKKX
codepen.io/suez/pen/LCHlA
codepen.io/suez/pen/ogYpva
codepen.io/suez/pen/bNdbww
Основа техники - каждая страница обычно занимает 100% высоты экрана + вы хакаете скролл, и вместо стандартного перемещения на 100 пикселей вниз/вверх вы скроллите целиком высоту одного блока.

bootstrap-responsive.css во второй версии адаптировал дизайн под маленькие разрешения экрана. т.е. "включал" все фишки верстки, которые менялись в зависимости от разрешения. особенно полезно это было, если сайт проектировался не только под десктопы, но и под мобильные устройства.
в третьей версии они решили этот функционал включить "по умолчанию". Т.е. никаких дополнительных стилей типа bootstrap-responsive.css подключать не нужно - всё уже включено.

1. В 3-ей версии общие стили и стили адаптивности совмещены в один. Адаптивные стили для каждого ui модуля/элемента идут сразу после его основных. Внимательнее посмотрите стили.

2. bootstrap-responsive.css есть только во 2-ой версии. Он даёт адаптивность верстке. Без него элементы и модули не способны меняться в зависимости от экрана.

1. Вы ответили на свой вопрос. Нужные размеры контейнера можно и нужно задавать при кастомизации.
2. Используйте как хотите. Но row со вложенными колонками: а) сбрасывает обтекание б) убирает отступ у первой колонки слева, и у последней колонки справа 15 пиксельный внутренний отступ (за счет отрицательного внешнего отступа у row)
3. У row я бы не отменял. А у колонок в зависимости от надобности, макета итд

все решил!
codepen.io/Benny214/pen/xDrij

Медиа-запросы хороши, когда Вас устраивает верстка в промежуточных значениях. Приведу пример: если страница у Вас - это контейнер class="cont" с определенной шириной, располагающийся по середине экрана, то Вы можете через медиа-запросы сделать ему три ширины, а на четвертой ширине сделать все блоки в столбик (для мобильных браузеров).
Если Вы делаете резиновую страницу, то Вам тут медиа запросы не в первую очередь нужны, а в первую - задавать размеры в процентах.
Даже если Вы перечислите все размеры страниц (что не реально), то не забывайте про те случаи, когда у пользователя браузер не на весь экран.