WapSter

.solut {
color: green !important; 
}

Понимаю, что сейчас никто уже не пишет сайты с нуля.

вообще-то именно для этого нужны фронтендеры. VS Code, WebStorm. Тебе до портфолио ещё далеко, уже обязательны знания фреймворков, js на хорошем уровне, всякие инструменты типа webpack. А то что ты описываешь, называется верстка.

Павел Чернов,

А как формировать карточки если с сервера приходит JSON?

pos:a относительно центра блока. Еще можно кнопку и этот блок засунуть в одну обертку ограничив ее по ширине и флексом центрировать оба блока по поперечной оси.

Портфолио ага. У тебя лишняя скобка в css и название класса не соответсвует классу в html

Сразу все загружает

Применить к элементу transition, через js при нажатии просто увеличивать ширину.

.starts:nth-child(2)

Жуть как долго открывается сайт. Контекст z-index потерялся. Добавь тэгу header position: relative z-index: 2+

margin-bottom

MDN: In flexbox layouts, this property is ignored

height 100% никогда не с работает на любом элементе, если у родителя не задана в px. Используй object-fit cover

Делай просто оптимально. Для превью используй легкие, для показа уже более качественные. К тому же есть тэг picture и методы lazy-load