У вас список нацеленный, что бы делать сайты, недорого, без рекламы и смс...
Про руби был тут хороший совет. Не нужно вникать в миллиард фреймворков и каждый раз учиться программировать заново. Сэкономите много нервных клеток.
Если нужно то, что в мейнстриме называется front-end то, это html/css/js. Те кто повторяют шарманку про то, что в javascript низкий уровень вхождения, по-моему несут бред. Как задать условие или пульнуть цикл или рекурсию можно понять за пару дней на любом языке. Как сделать то, что вам нужно и при этом не повырывать из головы все волосы, это совсем другое.

Я бы не хотел заранее вас пугать, но существует достаточно объективный факт, что внятной статьи или книги по HTML или CSS не существует. Причин много. Одна из них, конечно, что сам по себе HTML и CSS это один большой костыль. Я не шучу. Техники которые используются, они используются только потому что по другому просто нельзя. Со временем вы, конечно, поймёте этот абсурд. Некоторым даже нравится. И вам ещё повезло, что вы не застали времена, когда верстали на таблицах и знаменитый ie6.

Основные вещи, которые вам нужно понять это как ведут себя div и span, позиционирование, поток и слои. Всё остальное не так так важно и будет усваиваться со вторым-третьим свёрстанным макетом, как, собственно, и всё вышеперечисленное. Начать советую с каркаса какого-нибудь типичного двуколоночного макета с хедером и футером. Задавайте любой интересующий вопрос на форумах. Как правило люди нормально относятся к любым, даже на первый взгляд, самым глупым вопросам и охотно помогают. То есть, если чувствуете затор, то лучше не терять времени и спросить. Кто-нибудь да и объяснит.

Когда я понял всю соль и научился верстать. Я открыл эти книги, которые все расхваливали с таким энтузиазмом. И ужаснулся тому, как по этому вообще можно чуму-то научиться? Я практически уверен, что все эти добрые люди, которые советовали «мудрые» книги сами их либо не открывали, либо не осилили.

Вёрстка, это всегда проблема. Потому что html и css это одна большая проблема сама по себе.
Всё что вы перечислили это мейнстримовый абстрактный кич. Я бы вообще не стал рассматривать это в отдельности, как что-то реально существующее. Всё что вам нудно это усвоить основные базовые понятия: строчный и блочный элемент, поток, позиционирование, z-index. А дальше уже делаете дизайн какой захотите с паралаксами, сетками и тд.
По поводу ресурсов где рассматриваются проблемы вёрстки. Скажите, зачем вам чужие проблемы? Их на самом деле столько, что пером не описать.
Просто верстайте. И когда натолкнётесь на проблему, либо изначально задумаете какую-нибудь конструкцию, которую не знаете как сверстать, то там уже можно будет и погуглить, почитать или задать конкретный вопрос.
Всё дело в том, что сама по себе технология html и css, да и js, не идеальна. Причём далеко не идеальна. Скажем если мы возьмём идеальность за 100%, то нынешняя ситуация будет где-то процентов на 15-20, ну максимум 30.