Как сделать такой инпут?

Если заменить img на label, а картинки вставить фоном и/или псевдоэлементом, то будет норм.

Как сделать последней строке флексбокса justify-content, отличный от остального флексбокса?

Илья Ломаев, почему вы не хотите использовать грид?

Как вывести ширину дочернего элемента в процентах?

Лина Литвак, вы не поняли о чем я.

Этот процент - это дано. Его вообще не нужно вычислять.

Вам прилетает загружено 63%.
Всё, их и используете.

Как работает этот скрипт?

Как работает эта программа

Находит все элементы с нужным классом, в первом из них изменяет контент на указанный. Добавляет один класс, убирает класс другой.

почему не работает?

У вас нет разметки, поэтому не ясно почему.
Хотя, судя по вопросу, вероятно, именно поэтому и не работает.

Как решить проблему с colspan?

Не поняла, откуда в сумме 5 взялось. Достаточно 3.

<table>
  <tr>
    <td colspan="2">3</td>
    <td>2</td>
  </tr>
  <tr>
    <td>2</td>
    <td colspan="2">3</td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Но если всё таки нужно 5, то аналогично.
Чтобы что-то объединять, оно должно быть. У вас нет.

Как вывести ширину дочернего элемента в процентах?

Что-то тут не то.
% загрузки откуда прилетает, так?
Зачем его снова получать через ширину?

p.s. кстати, есть тег progress.
Если он не подходит по какой-то темной причине, то для своего прогресса в большинстве случаев достаточно одного div и градиента либо псевдоэлемента для цвета.

Не появляется значок при наведении, проблема в пути к файлу. Что не так?

TtT RrR,

типа выйти в корень?

Только нужно понимать, что если вы открываете файл html из папки (ваш скрин на это намекает), то корнем окажется диск F. И картинка снова не покажется.

Как задать блоку высоту чтобы с изображением внутри было адаптивным с блоком?

Masterof,

это чтобы небыло смещение макета

Да. Поэтому гугл просит вас указать размеры изображения через атрибуты.
Вы можете указать либо родные либо пропорциональные. Об этом написано в хелпе гугла, но лень искать где.

Чтобы вам эта фикс высота не мешала при адаптиве, вы её переопределяете стилями. Пропорции при этом сохраняются, все довольны.

Как задать блоку высоту чтобы с изображением внутри было адаптивным с блоком?

Например, height: unset или auto (зависит от окружения)

Как сделать последней строке флексбокса justify-content, отличный от остального флексбокса?

Самое простое - заменить флекс на грид.

С флексами это решается костылем: добавляется максимально возможное минус один количество пустых, не имеющих высоты и отступов элементов в конец.
Альтернатива с js: вместо пустых элементов использовать псевдоэлемент и передавать ему ширину (или базис) через кастомное свойство.

Как адаптировать картинку между заголовком и описанием?

и если возможно использовать только flex

Только если зададите фикс высоту.

- гриды
- display contents + флекс
- абсолют (тут и флекс не нужен)
- флоат

Как сделать подобный пятиугнольник?

origami, потеряла, где у меня прямо такой уголок, но тут в примерах есть идеи. Сейчас их можно усовершенствовать всякими кастомными свойствами.
https://codepen.io/AnnaSummer/pen/KKQgaaN
https://codepen.io/AnnaSummer/pen/mdXrRmZ
https://codepen.io/AnnaSummer/pen/mdXrRLd

Расположение нескольких элементов на background как на примере?

1. Множественные bg пишутся через запятую.
2. Вы можете объединить в 2 картинки. Одну наверху, другую внизу.

Как сделать подобный пятиугнольник?

Либо, если фон страницы известный и однотонный, приделать в угол псевдоэлемент с градиентом с четкой границей из серого в белый.
Либо верхнюю и правую границы тоже рисовать градиентами (calc(100% - размер уголка)).

Как задать задержку анимации svg?

https://developer.mozilla.org/en-US/docs/Web/SVG/A...
https://stackoverflow.com/questions/31690880/svg-a...

Как воссоздать такой фон градиентом?

И css.yoksel.ru/radial-gradients чтобы понимать, что происходит

Почему не работает свойство "position: sticky"?

Потому что sticky работает не так, как вы пытаетесь его применить.
Элемент с position: sticky «прилипает» к экрану при прокрутке, пока не встретится с границей родительского блока.

Чтобы добиться того эффекта, которого вы, вероятно, хотите, нужно вытащить список из header, чтобы он стал потомком body. А лучше вместе с nav и перевесить sticky на nav.

Как быть с background-image на экранах, которые больше 1920px?

Максим Иванов,

А это нормально, что например при разрешении более 1920пх, фон обрезается снизу?

Спросите у дизайнера. Хорошо ему так или нет.

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

Также вы можете взять целую прямоугольную картинку в качестве фона, а потом отдельно (clip-path или тип того). Или наоборот наложить белые svg-волны сверху и снизу с фикс или плавающей высотой.

Как быть с background-image на экранах, которые больше 1920px?

Roderen,

Я вижу единственный вариант:
Для фона background-size: 100% 100%; для экранов больше 1920пх.

preserveAspectRatio для SVG не забудьте, а то ничего не выйдет из вашей затеи.

Допустим, что у меня только один вариант - нужно, чтобы фон растягивался при разрешении больше 1920пх. Что в этом случае делать?

Не очень понятно, в чем тогда вопрос.
Его и делать.
Можно изменять отступы в зависимости от получающихся пропорций блока так, чтобы текст не выходил из зоны. волны

Какие параметры и значения указать в style.css, чтобы мой файл был похож на макет?

При такой формулировке вопроса, наверное, вам куда-то сюда https://doka.guide/css/ или аналоги.
Или пройдите интерактивный курсы htmlacademy.ru

Не знаю, какие параметры и их значения прописать, чтобы получилось, как в макете.

Зависит от того, что вы уже написали.
Сделайте песочницу с видимой проблемой на codepen.io

Грубо говоря:
Список из 3 элементов.
В каждом из которых: заголовок, текст. Иконку в разметку вставлять не нужно - такие штуки делаются псевдоэлементами.
Поставить в один ряд: гриды или флексы для ul.
Центрировать: проще всего text-align.
Псевдоэлементу задать ширину и горизонтальные margin auto.
Не забудьте убрать/скорректировать отступы у ul.