Анатолий Богомол, Дмитрий HunteR, вот так, сжимайте, разжимайте окно результата, высота скоса всегда одинаковая (50px), поэтому можно спокойно без «магических цифр» совмещать такие секции с другими. На transform этого не добиться.
А что это за набор «методов» такой, не мог ли бы вы поделиться с нами?
Более того, вёрстка чего конкретно? Все способы и свойства используются в разной степени для разных задач. Если вы о вёрстке разметки (layout), то сейчас это либо flex, либо grid.
Ну тут больше зависит от человека, есть люди, которым курсы реально помогают. Более того, если курсы хорошие, для новичка они могут дать в т. ч. обзорные ориентиры хороших практик, технологий, понимание процессов, т. е. вещи, для понимания которых нужно потратить много времени.
Я думаю, что вам поможет только кастомно-написанный слайдер с минимальным функционалом.
А то и вовсе просто обёртка на flex с двумя кнопками по бокам, по нажатию на которые обёртка будет сдвигаться с помощью translateX вправо-влево, имитируя смену слайдов. И примитивный скрипт обработки нажатия на эти кнопки.
Может ещё будет нужна поддержка обработки количества слайдов для их индикации, механизм прокрутки слайдера в начало при достижении последнего слайда. А также механизм приостановки видео, если слайд с ним неактивен в данный момент.
Словом, подумайте над минимально необходимым функционалом и дерзайте :))
thehighhomie, как из верных подходов — описывать в компоненте общие стили, а цвета каждого компонента описывать в связке с темой. Либо делать универсальные CSS-переменные, если, конечно, вас устроит их поддержка со стороны браузеров.