np_1_1

Здравствуйте!
Коротко об этапах разработки сайта:
1) Подготовка макета (дизайнер рисует psd макет). Лучше дизайн рисовать под конкретную сетку. Например, под сетку для bootstrap, skeleton и т.д.
2) Этап верстки макета - верстальщик верстает макет с использованием html 5 + css 3 + js. Допольнительно можно подключать все, что угодно. Это могут быть различные js библиотеки (jQuery, Angular JS, слайдеры - slick.js и многое другое). Также это могут быть различные шаблонизаторы и доп. языки для формирования динамического кода... Например, haml, less, scss. Также он подключает подходящую сетку. Например, bootstrap 3 или bootstrap 4 или skeleton и многое другое. или верстает флексами, css grid и т.д.
3) Этап адаптации (подразумевает под собой адаптацию обычного статичного html шаблона под разные CMS & CMF системы). Например, если речь идет о WordPress, то создается тема с применением основ рнр и кодекса WordPress. (изучите кодекс ВП). Если это например, сайт на Spring Boot (java), то например, могут адаптироваться под freemarker, thymeleaf, mustache и т.д. Также если речь идет о ВП, то на этом этапе можно прикрутить фреймворк для управления настройками темы. например, redux framework. Правда, можной обойтись малой кровью и просто прикручивать кастомные поля ACF или carbon fields (фреймворк). Ну или использовать внутренние средства ВП для формирования настроек темы.

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

https://codepen.io/ruslanredo/pen/yozdqd

<input type="text" placeholder="Email Address"><button>Notify</button>

input{
  height:40px;
  line-height:40px;
  font-size:16px;
  padding-left:16px;
  border-radius:10px 0 0 10px;
  border: 1px solid lightgrey;
}

button{
  vertical-align:top;
  background-color:lightgreen;
  color:white;
  height:44px;
  line-height:44px;
  font-size:18px;
  padding: 0 24px;
  font-weight:bold;
  border-radius:0 10px 10px 0;
  border:none;
}

Большинство современных ЯП ИМХО имеют достаточно низкий порог вхождения, чтобы можно было начинать изучение с них, а не браться за какие-то более легкие. В том числе C#, C++ и Java. Вы правильно рассматриваете именно их. Напишу немного подробнее о каждом:

C#: лично мне очень нравится этот язык. Перспективы хорошие, особенно учитывая то, что он транслируется в байт-код (как Java), что дает хороший потенциал для мультиплатформенности, а Microsoft потихоньку начинает развивать этот потенциал, открывая некоторые исходники. Язык относительно новый, благодаря чему обладает довольно чистым и красивым синтаксисом, и всяких костылей немного.
Инди-геймдев на C# - это Unity3D. И хоть это очень хороший движок для игр практически любого жанра, но если он загнется, то другим движкам типа WAVE/Paradox будет тяжело тягаться с таким гигантом, как UE4.

C++: практически универсальный язык. Если остановитесь на нем, то рекомендую осваивать вместе с Qt, так как получаете прекрасный кросс-платформенный фреймворк. Лично мне не нравятся плюсы за явные указатели и некоторые довольно костыльные решения, сделанные для того, чтобы сохранить обратную совместимость со старыми версиями языка.
Геймдев на плюсах - Unreal Engine 4, CryEngine 4 например. Вполне возможно скоро к ним Source 2 присоединится. Это из "больших" движков. Есть еще куча поменьше, типа Cocos2d.

Java: к сожалению, мало что о ней могу сказать, так как не особо ей интересуюсь. Из плюсов - востребованность на рынке. С Java не пропадете. Из минусов - вроде каких-либо "серьезных" игровых движков, где основной ЯП - Java нету.