Как реализовать фон на шапку и блок ниже?

Или одинаковые на шапке и блоке ниже.

Как поменять цвет окна браузера?

DZHAMBUALT,
Прям на десктопе так было?

<meta name="theme-color" content="#ff0000">
Для мобилок

Как поменять цвет окна браузера?

chrome://settings/manageProfile ?

Какими браузерами поддерживается css calc используемый в background linera-gradient?

Дмитрий, Лучше непосредственно на https://caniuse.com/
Только нужно понимать, что и в него данные попадают не мгновенно.

И уж точно не на htmlbook, который сам не обновлялся черт знает сколько лет. Хотя, с другой стороны, наличие там статьи говорит о том, что этой функции уже много лет :)

Ховер кнопки градиентным текстом с trasition?

Breeze1, а я только что его добавила))

Ховер кнопки градиентным текстом с trasition?

Breeze1, потеряли начальные значения кастомок.
И префиксы стоят от вебкита (ФФ их, конечно, частично понимает, но зачем писать руками префиксы, когда есть автопрефиксер, причем даже на codepen)

Короче, у вас проблема с градиентом, а не с property.
В ФФ всё будет работать кроме анимации, не нужен никакой фолбэк.

Как располагать декор-элементы в проектах где картинки будут меняться?

Хорошо бы поменять тег "css" на тег "дизайн".
Потому что проблема в нём, а не в css.
А потом, решив, как это должно выглядеть, писать css.

Какой есть бесплатный редактор растровой графики для детей похожий на фотошоп?

но проще

Вариант показать актуальный фотошоп и рассказать где те кнопки, которые делают те самые простые вещи не подходит? Если что, есть бесплатные онлайн варианты.

А так да, основные "попроще" это Paint и Gimp. Но интерфейс у них будет, конечно свой.

интуитивно понятным интерфейсом

Интуитивно понятный это привычный. А дети обычно быстро осваиваются.

Тут, наверное, имеет смысл озвучить цель. Чтобы ребенок научился рисовать (или фотки обрабатывать или еще что-то, а то у фотошопа много разноплановых функций) или привык к интерфесу или опять что-то ещё.

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

Это не грид. Пока по крайней мере.

Используйте css columns или скрипты типа masonry

Как расположить объекты в div в строчку?

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

Зачем вот это white-space: nowrap; внутри картинки вообще загадка. Как вы себе представляете переносы текста внутри картинки?

Как изменить цвет svg заливки?

1. Почитайте про <use>, в том числе и прямо в svg. Нет смысла дублировать один и тот же градиент 1000 раз. Да и сами сердечки тоже.

2. Почитайте про css свойство mask. А в качестве bg задавайте градиент.

Почему фоновая картинка то пропадает, то появляется?

У меня почему то фоновая картинка у карточек в самом низу сайта то пропадают, то появляются

Просто при обновлении страницы то есть, то нет?

Или если по разному открывать сайт, например, локально и с хостинга?

Во втором случае: неверный путь к картинке.
В первом, я бы посмотрела на размер, если очень большая, может не всегда успевает подгрузиться.

Если всё не так, то нужны подробности.

Почему появляется горизонтальный скролл при использовании grid?

Там масштаб 70%
Можно попробовать закрыть адаптивный режим, обновить страницу, и открыть обратно.
Всё таки девтулзы частенько подглючивают, особенно при изменении размера/масштаба.

Дополню:
1. Задавать max-width 100% для адаптивных картинок - хорошая практика
2. Оборачивать адаптивные картинки в div (или в ссылку или в figure и т.д.) и использовать object-fit тоже хорошая практика.
Сама ячейка грида может выступать такой оберткой, в которую встраивают картинку, но это не всегда удобно.
3. Сетку лучше делать не в px, а в относительных единицах измерения.

Как реализовать звездный рейтинг с частичным закрашиванием звезд?

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

Как реализовать звездный рейтинг с частичным закрашиванием звезд?

djok2142,

Искал, нету.

Не знаю как комментировать.
Вот первая попавшаяся реализация
https://codepen.io/Sadorus/pen/XjQKqg

Но вообще, можете и к шрифтовым звездам применить градиент для текста.

Как реализовать звездный рейтинг с частичным закрашиванием звезд?

Поищите на codepen.io, там полно вариантов на любой вкус

Почему элемент с шириной fit-content и ограничением max-width: 100% выходит пределы экрана?

Встречный вопрос: а куда ему деваться? Переносов в "слове" нет, принудительных вы не сделали, как переносить автоматом не сказали. Вот он и вываливается.

Почему высота span не такая как у родителя при height:100%?

1. jsfiddle не работает в России. Переложите на codepen.io, если хочется, чтобы мы посмотрели.
2. В приложенном к вопросу коде вообще нет ничего с чего бы спан стал как label и нет ничего с чего бы все label были бы одинаковыми. (label могли бы, если бы вы перестали задавать им высоту)

Выводы:
- Убрать вертикальное центрирование у holder.
- Убрать высоту у label
- Задать высоту 100% для span
- Задать центрирование для span

Что не так с кодом?

Fasolll, дальше..
Стратегия может быть разной.
Я бы, всё таки потратила бы некоторое время на изучение основ. Чтобы получить представление о том, какие теги, атрибуты и свойства вообще есть и что они делают.
А потом, разбивая задачу на мелкие, гуглила бы при необходимости.

Что не так с кодом?

Fasolll, дальше можно/нужно поменять div на список. Т.е. div поменять на li и всё обернуть в ul.
Списку задать flex или grid и width: fit-content
Будет ровнее.