Максим

left: calc(100% - 50px);
или

position:fixed;
 right: 0;
 top:calc(100px + 150px)

или

position:absolute;
  right: 0;
  top:calc(100px + 150px)

Надеюсь это не сложно ...

Если через css то можно так : https://codepen.io/topicstarter/pen/vYOoWQb
Если через javascript то так: https://codepen.io/topicstarter/pen/NWqQyXL
Несколько кнопок js: https://codepen.io/topicstarter/pen/MWagJBy

Вообще если в ответе не получили что то нужное достаточно уточнить в комментарии ..

фон укажите в rgba то есть red,green,blue,aplha и записывается это так: rgba(255,0,0,0.5) где 0.5 это прозрачность

Любые знания без практики не имеют смысла

Берёте любой шаблон в сети и делаете то что там изображено вот и будет вам практика

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

текст на html а точки и линии на svg
Примерно так: https://codepen.io/topicstarter/pen/dyoLgJe

у меня поместился placeholder

https://ru.stackoverflow.com/a/1104085/308951 - зря удалил свой вопрос на SO

https://ru.stackoverflow.com/a/1093659/308951 вот так это делается

anime.js - в этом духе
pixi.js - сложнее но с webGL
gsap - вообще крутяк но есть платные плагины но хялявных с головой хватит

Примерно так

img{
 filter:grayscale(100%);
}

Это?

К примеру если использовать препроцессор то можно разбить ваш css на компоненты ..к примеру header описывать в header.scss или footer описывать в footer.scss а сборщиком собирать эти все файлы-компоненты в один файл после чего его минифицировать прогонять через autoprefixer и т д

Так же можно просто писать по алфавитному порядку от a до z

В href замените изображение


Или css clip-path

Собирают куб на css а крутят на js

https://www.jssor.com/premium/interior-design/inte... выбирайте