Как сделать border-radius с :first-child правильно?

miss_allegory, так? И вы хотите задать радиус этому третьему блоку с помощью first-child?

Хорошая литература по HTML, СSS и JavaScript: что выбрать?

Тренажеры с теорией https://htmlacademy.ru/courses

Читать MDN и https://doka.guide/
По JS https://learn.javascript.ru/

Хорошая литература по HTML, СSS и JavaScript: что выбрать?

htmlbook устарел уже некоторое время назад, его заменил webref, но и в нем нет части актуальных свойств, в том числе и гридов.

Как сделать вертикальный стилизованный input[type=range]?

Либо покажите ваш вариант с transform: rotate и динамической высотой.

На JS получаете высоту и передаете её в кастомное --height и задаете эту высоту (ширину) инпуту.

p.s. jsfiddle не работает в России, так что если хотите, чтобы мы смотрели песочницу, то переделайте на codepen.io

Как сделать border-radius с :first-child правильно?

Что-то интересное вы рассказываете и пишете.

Сначала, что "первые 2 блока имеют класс .mode--pc".
А потом .block:not(.mode--pc):first-child хотите задать border-radius первому элементу, если он не mode--pc.
Но из первой фразы следует, что так не бывает, потому что первый всегда с этим классом.

Попробуйте описать задачу получше.

Как сделать, чтобы картинка не обрезалась?

frontAng, ну ок.
Нарисуйте что должно получиться.

Сейчас вы хотите, чтобы ширина осталась прежней (фиксированной), высота увеличилась,но при этом картинка не обрезалась.

Как нарисуете, позовите.

Как сделать, чтобы картинка не обрезалась?

frontAng,

проблема в том, что если написать height: 100

не пишите...

Не затемняется фото?

Не затемняется фото?

Неа, не затемняется.
И не затемнится.
Ведь сначала цвет, а поверх картинка.

Но вы можете использовать множественный фон и поверх поместить слой с градиентом из одинаковых цветов.
Альтернативы: псевдоэлементы, тени, фильтры

Как сделать, чтобы картинка не обрезалась?

Ну смотрите, вы написали что картинка должна быть иметь высоту 100% и обрезаться с помощью object-fit cover.

Если вам это поведение не нужно, то зачем пишете?

Поменял информацию в хеде на корректную. Но когда кидаю ссылку остается старая инфа. Что делать?

Евгений Полинов, поскольку вопрос сформулирован так, что вряд ли его кто-то с аналогичной проблемой сможет найти, то проще удалить вопрос.

Как адаптировать абсолютно позиционированные элементы?

Дмитрий Нефёдов,
типа того

left: calc(50% - 29px);
transform: translateX(-50%);

29px от балды

Ближайший аналог https://codepen.io/AnnaSummer/pen/QWQOvzy

Как адаптировать абсолютно позиционированные элементы?

Например, позиционировать от центра.

Есть тест, как у выбранной кнопки менять background-color?

Ростик Кальченко, даже так? Но не объяснять же взрослому человеку..

Поменял информацию в хеде на корректную. Но когда кидаю ссылку остается старая инфа. Что делать?

Владимир Овчинников, да, вот такая жизнь

Есть тест, как у выбранной кнопки менять background-color?

Что-то вы...
Хоть бы тегнули Фрогги

Поменял информацию в хеде на корректную. Но когда кидаю ссылку остается старая инфа. Что делать?

ок, гугл https://yandex.ru/search/?clid=9582&text=telegram+...

Как сделать вот такую вот фишку в верстке?

Я бы делала псевдоэлементами

Как сделать рабочий запрет переноса строки в table?

Валерий Суворов, td

Новичек и жестко нагородил с первой секцией. При уменьшении разрешения съезжает фон в левую сторону. Можно ли исправить не переписывая все?

Евгений Полинов, какой-то легкий бред.

Хорошо бы писать правильно слова container, title и другие, если собираетесь хоть кому-то показывать свой код.
Обычно в редакторе кода есть настройка отвечающая за проверку орфографии.

Как сделать рабочий запрет переноса строки в table?

Вы пытаетесь задать это строке..
Нужно обернуть текст в div и задать всё это ему вместе с шириной.