ⓒⓢⓢ

в стилях псевдо-класс :hover для этого блока

html структура:

div.page
   div.layer.layer-top
   div.layer.layer-top
   div.layer.layer-center
   div.layer.layer-center

стили:

.page
   display: flex;
.layer
   flex: 0 0 50%;
.layer-top
   height: 100px;
.layer-center
   height: calc(100vh - 100px);

Писал на коленке, могут быть мелкие неточности, но общий вид такой

Спорный конечно ответ, если говорить в области windows\desktop
webdev, мобильные приложения, ios, android - всё это отпадает
gamedev - тот же С++/udk
QT - имхо стоит учить, если планируется писать вне зависимости от платформы windows

Чистый WinAPI для windows\desktop будет самое лучшее специализированное решение + понимание именно той области что вам интересна. Даст вам общее представление как работают программы в Windows.
Для углубленного изучения уже нужны более точные ориентиры, что именно вы будете\хотите разрабатывать

Погуглите создание вкладок. Решение можно подсмотреть у табов
закладки с круглыми углами

Бесконечный цикл?
В итерации цикла переменные из условия b < a не изменяются

Что нибудь такое

top: 50%;
transform: translateY(-50%);

по твоему примеру, как то так:
после 14 строки, добавь строку

window.scrollTo(0,parseInt(document.body.style.top));

UPD.
Но в текущем варианте я бы не стал top стиль задавать. Лучше уж вынести в свойства элемента

1. Почему Mobile First лучше ;

3. Производительность Mobile First ;

В идеале для мобильного браузера вёрстка и стили легче, их должно быть меньше и соответственно меньше требует ресурсов, что хорошо, как минимум для батарейки. Это если сравнить за основу со стилями с десктопа, то все стили попадут в мобильную версию. Как некоторые пишут, что разделяют основные стили - это чистой воды мазохизм. Всё не выделишь, всегда найдутся одинаковые элементы и получается, что часть стилей блоков лежит в основных стилях, часть ещё где то, часть поделена десктоп\мобайл, часть скопирована и прочие вытекающие последствия. Я делаю основу стилей для десктопа или мобайла и дополнительные файлы медиа запросов

Но мы не в идеальном мире живём ....

2. Почему Mobile First хуже ;

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

Лично моё мнение
Верстать из основы десктопа удобнее, видоизменить или спрятать узел легче, чем нарастить новый в уже сформировавшийся документ.

4. Где и каким сайтам подходит Mobile First ;

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

Если в 51 строке селектор:
.site_navigation > li:focus .site_navigation_sub {
заменить на:

.site_navigation > li a:focus + .site_navigation_sub {

Проблему не решит?

добавь в обработчик строку
$(document).off('scroll');

textDiv - это у вас jQuery объект.
"Значение" можете получить от метода .text()

input.val(textDiv.text());

Вы наверно спрашиваете про mockupы, гуглятся так "website mockup psd"

Можно профилированием памяти.
Можно библиотеками времени исполнения. (время выполнения скрипта, кадры\fps и пр.)
Но на фоне ресурсов, которые выделяются странице, сравнивать эти кубики с градиентом (простые объекты), только трата времени - вы не увидите особой разницы
(если конечно специально не стараться нагрузить страницу)

картинка
видео

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

Заинтересовал меня ваш вопрос, спортивным интересом =)
Как пример:
https://jsfiddle.net/zq9op1gL/4/

В начале скрипта, если isEditor == true, то будет редактор змейки, для создания пути.
Пользоваться так:
Кликаем по ячейкам как вам нужно по правилам формирования слов
Ниже таблицы будут выводиться координаты ячеек. Что то такое:
1,4 , 1,5 , 2,5 , 2,4 , 3,4 , 3,5 ,

Копируем эту строку с координатами и вставляем в переменную массив "path"
Всё новый путь для формирования слов готов.

Меняем isEditor на false, смотрим результат, поидее должно работать.
Единственное есть недочёт, как проверка конца пути, если больше чем осталось ячеек, то слово впишется не полностью, но это уже мелочи ...

Можно ещё рандомно сами слова переворачивать для усложнения, чтобы путь запутать и т.д.

https://jsfiddle.net/zq9op1gL/6/
Развлекуха, за качеством не гнался =)

Выгружаете всё к себе локально, версию обязательно, как у клиента.
вносите правки
Загружаете обратно на сервер

так у вас ошибка, сразу в глаза бросилась, на картинке:

Выполняем заказы на разработку: веб-сайтов любой сложности

Если этот текст удалить, то выпадание текста должно вместиться

Попробуйте добавить в .content
transition: transform .3s;

Это из-за рендеринга браузера.
Можете поиграться с размером шрифта и получить похожую анимацию
https://codepen.io/anon/pen/oeOjrK

Для фулл реалтайма используйте веб-сокеты