sergey

Я бы советовал Ubuntu, по моему опыту, с ней было меньше всего мороки с начальной настройкой.
+легко гуглятся практически любые проблемы.

Если прям иконку в input, комбинируйте свойства background-image, background-position и background-repeat для инпута.

Так же как в b3, push-md-3 и pull-md-9
https://v4-alpha.getbootstrap.com/layout/grid/#pus...

Как ускорить вёрстку?

Какие еще 700рх? Вы раньше что-нибудь верстали (не только для себя)?

при скролле страницы

Каким образом скролл страницы может влиять на fixed сайдбар?

Скрин Ваш из разряда "Пазл на 1500 элементов"!

UPD:
----------------------------------
Если z-index не помогает... А если и помогает, всеравно:
1. Вынесите сайдбар в body
2. Установите в relative
3. Установите нужный z-index
4. Установите html, body: height:100%;
5. Установите сайдбару высоту 100%. Если 100% много - тогда: calc(100% - 50px); (50px - для примера)
6. Радуйтесь.

P.S. Для имитации оверлея можете добавить сайдбару в открытом состоянии еще:
box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 0px 2600px;

Осталось всего-ничего, изучить LAMP (как минимум, для понимания), возможно пару-тройку фреймворков (по настроению, главное не увлекаться), потом осознать что PHP - не торт (тут для красоты, не для холивара: PHP, на самом деле, торт еще, но это наш с вами секрет) и начать копать в сторону JS/Python/Golang и др... Предположим JS: Узнать (прочитать или догадаться) о существовании NodeJS. Попробовать написать что-то на чистом, плюнуть и узнать (прочитать или опять догадаться, а вдруг!) о существовании express. Продолжать в том же духе.

Чуть не забыл - все что вы так гордо "изучили" (не будем уточнять качество и объем изученного) - это максимум(!) одна десятая(1/10) фронт-энда. Не хочу вас огорчать, но есть еще бэк-энд. Про менеджмент вообще молчу.

В это время фронт-эндеру - посмотреть на jQuery, начать все подряд на нем делать - эффектики там, плюшечки, карусельки, потом плюнуть и понять что это прошлый век. Прийти к выводу что надо искать что-то другое. Наткнуться на Angular/Vue или React/Backbone и д.р. (да не суть важно). Попытаться покончить с собой.

Чуть не забыл, Bootstrap же! Вы будете в восторге!

Где-то в середине этих процессов вы должны всей командой встретиться, выпить и плюнуть на это все.

Надо знать, что еще одна соц сеть кому-то вообще нужна.

сначала сделай:
ssh-add -l

создать файлик config
~/.ssh/config

и укажи хост и ключик для него

Host bitbucket.org
    IdentityFile ~/.ssh/my_key_filename

дальше идешь по ssh и все должно быть ок
ssh -Tvv git@bitbucket.org

Мне кажется, что здесь сложно дать однозначный ответ. Для начала, каждый разработчик должен изучить основные принципы и команды Git. Я много раз сталкивался (и продолжаю сталкиваться) с тем, что разработчики заучивают 2-3 команды (git commit/git pull/git push) и просто долбят их вообще не понимая, что эти команды делают. IDE делают этот процесс еще хуже, потому что там даже не надо задумываться над тем, что вбиваешь, разработчик просто нажимает кнопочку и получает грязь в репозитории. А потом в Slack-чате кричит: «Я все сделал по бумажке! Как мне сказали, сделал git commit и git push, это ваш долбаный git напортачил!» (на самом деле слышал такое и не раз).

Затем можно сделать репозиторий например, с ветками master и ветками, в которые разработчики добавляют новые фичи (или исправляют баги). Например, add-new-image-upload. Так называемые feature-branch'и. При заканчивании работы в feature-бранче, сливать их с master. Высший пилотаж — делать rebase перед слиянием, чтобы не загромождать историю бесполезными merge commits. Еще боле высший пилотаж — перейти на git-flow, который автоматизирует работу с бранчами master, development, feature branches, hotfixes, release branches. Но забегать вперед не стоит.

Это называется fast forward. Если в ветке, куда делаете merge нет коммитов с момента ответвления, git не будет создавать новый коммит с двумя предками, а просто перенесёт старую ветку на последний коммит новой ветки. (ветка это просто указатель на коммит).
Если хотите отключить это поведение, достаточно сделать git merge --no-ff <branch_name>

Как сверстать это?

Вот как-то так (вариант без SVG, построенный на CSS-трансформациях).

Пара замечаний по поводу решения:
- Картинки в виде нормальных картинок, а не фонов, нужны для того, чтобы было проще адаптировать под ретину, загружать их независимым lazy-loadом и для лучшего индексирования поисковыми системами (не могу ни подтвердить, ни опровергнуть, но по личным наблюдениям фоновые картинки имеют свойство иногда не индексироваться вообще, зависит от фазы луны).
- В связи с первым пунктом добавил полифил для свойства object-fit (нужен только для IE, остальные браузеры давно уже умеют его использовать).
- Все резиновое, но на маленьких экранах лучше сбрасывать одну секцию под другую (на вашей картинке это не отображено, но логика подсказывает).