Ховер кнопки градиентным текстом с 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
Будет ровнее.

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

Fasolll,

при том в браузере хром все хорошо работало

Угу
Если вы в том окне хрома сделаете масштаб 100%, то тоже останется только фон.

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

Fasolll, сделайте вот что:

1. Уберите всюду position: fixed и координаты left и top
2. У html и body уберите размеры
3. Для body задайте

body {
  display: flex;
  flex-direction: column;
  gap: 50px;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

4. Уменьшите размер шрифта до приличных размеров

В браузере поставьте масштаб 100% (можно с помощью сочетания кнопок Ctrl + 0)

Да, всё встанет не совсем так, как вам хочется, иконки не будут друг под другом, но это уже отдельная история.
Это будет первым шагом к нормальному отображению.

А дальше придется пойти изучать теги, атрибуты, свойства и т.д.

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

Fasolll, всё у вас там скорее всего отображается... просто за краями окна браузера.
Нажмите несколько раз на ctrl + - до тех пора пока не увидите свои ссылки.

Вы пишете фиксированным элементам left 2100px
Если ширина окна браузера будет больше, то увидите и так...

Ну и вниз тоже очень много.

Уберите все position: fixed

Почитайте основы верстки, про поток документа, флексы, гриды и т.д.
Про флексы я вам уже в прошлый раз писала и даже пример показывала, но вы проигнорировали..
Полно видео на ютубе или тренажерчики от HTML Academy

Как подогнать ширину блока внутри flex под контент?

Немножко вам может помочь
flex-basis: 0; в сочетании с flex-grow: 1;

При некоторых раскладах посимпатичнее будет с text-wrap: balance, но пока без Safari (но и ничего не сломает)

А так, это особенности текста. (br, js)

p.s. уже нет смысла в использовании костыля с отрицательными margin для флекс-контейнера. Прекрасно работает gap

Проверка элемента в другом элементе в js?

Axel030392, и гораздо удобнее скрывать элементы через класс, а не напрямую через style. Точнее, скрывать ещё куда ни шло, а вот возвращать совсем неудобно.

А ещё логичнее сразу не добавлять, то чего не должно быть.