SherbakovFirst, плагин действительно называется autoprefixer, с этой частью вопроса вы справились самостоятельно.
Ваши "вебкиты" это вендорные префиксы. Погуглите что это и зачем.
Кроссбраузерность лучше всего проверять в разных браузерах и на разных устройствах (в офисе, у друзей, знакомых и т.д.).
Но есть и специальные сервисы типа Browserstack. Бесплатно 30 секунд на каждый браузер/устройство.
в svg в данный момент стоит fill="red" но почему-то не красная как покрасить?
Не красная она потому что у всех элементов внутри задан другой fill, который перебивает.
Либо красить по отдельности либо убрать fill у дочерних и оставить только у svg.
Либо вообще убрать из svg и задавать через стили fill.
Либо оставить как есть и использовать в стилях как mask (для псевдо), меняя цвет с помощью background-color
Сначала нужно определиться кто вы: дизайнер или верстальщик?
С верстальщиком в некотором роде проще: можно узнать как это видит дизайнер и верстать.
Адаптивные контентные картинки верстаются тегом picture.
Остальное перестраивается с помощью @media либо за счет гибкости флексов или гридов.
Если дизайнер: статистика, конкуренты, изучение геометрии и т.д. И 100 раз подумать, а действительно ли для всех вьюпортов разумно делать на один экран.
Хорошо бы начать с просмотра других работ. Собрать те, которые нравятся и подходят под задумку. По композиции, по цветам, то шрифтам, размерам. Какой используют темный фон и каким цветом по нему пишут или рисуют. Какой цвет подойдет для обычного текста, а какой для заголовков. Аналогично в сочетании с шрифтами. Отмечайте детали, например, про то, что фон не однотонный, а с легкими градиентами или пятнами. И т.д.
Хотя бы банально по Бехансу, комьюнити Фигмы, стоку Адоба, просто по разным сайтам и шаблонам.
У меня курсовая работа, нужно кроссбраузерность, возможно и IE 11 там тоже должен поддерживаться моим сайтом
Хорошо бы с этим разобраться до начала работы.
Часть свойств гридов поддерживаются IE. Но не очень удобная часть.
Я бы верстала флексами, если бы вдруг согласилась верстать под ИЕ.
Вот и разбирайтесь, почему на вьюпорте 480 внутренний блок имеет ширину 485. А ведь там еще отступы по 10px у родительского контейнера. (10 кстати, очень мало)
Zhenya Tureysky, вы можете толком объяснить что делаете? А лучше песочницу с видимой проблемой и описанием что не так.
Вот попробовала вашу картинку: она растягивается как задали.
У меня в примере высота auto, вы можете поставить фиксированную или как нужно. https://codepen.io/AnnaSummer/pen/ExdbQjb
Ваши "вебкиты" это вендорные префиксы. Погуглите что это и зачем.
Кроссбраузерность лучше всего проверять в разных браузерах и на разных устройствах (в офисе, у друзей, знакомых и т.д.).
Но есть и специальные сервисы типа Browserstack. Бесплатно 30 секунд на каждый браузер/устройство.