Сначала нужно определиться кто вы: дизайнер или верстальщик?
С верстальщиком в некотором роде проще: можно узнать как это видит дизайнер и верстать.
Адаптивные контентные картинки верстаются тегом picture.
Остальное перестраивается с помощью @media либо за счет гибкости флексов или гридов.
Если дизайнер: статистика, конкуренты, изучение геометрии и т.д. И 100 раз подумать, а действительно ли для всех вьюпортов разумно делать на один экран.
Хорошо бы начать с просмотра других работ. Собрать те, которые нравятся и подходят под задумку. По композиции, по цветам, то шрифтам, размерам. Какой используют темный фон и каким цветом по нему пишут или рисуют. Какой цвет подойдет для обычного текста, а какой для заголовков. Аналогично в сочетании с шрифтами. Отмечайте детали, например, про то, что фон не однотонный, а с легкими градиентами или пятнами. И т.д.
Хотя бы банально по Бехансу, комьюнити Фигмы, стоку Адоба, просто по разным сайтам и шаблонам.
У меня курсовая работа, нужно кроссбраузерность, возможно и IE 11 там тоже должен поддерживаться моим сайтом
Хорошо бы с этим разобраться до начала работы.
Часть свойств гридов поддерживаются IE. Но не очень удобная часть.
Я бы верстала флексами, если бы вдруг согласилась верстать под ИЕ.
Вот и разбирайтесь, почему на вьюпорте 480 внутренний блок имеет ширину 485. А ведь там еще отступы по 10px у родительского контейнера. (10 кстати, очень мало)
Zhenya Tureysky, вы можете толком объяснить что делаете? А лучше песочницу с видимой проблемой и описанием что не так.
Вот попробовала вашу картинку: она растягивается как задали.
У меня в примере высота auto, вы можете поставить фиксированную или как нужно. https://codepen.io/AnnaSummer/pen/ExdbQjb
AlXan ок, гугл "css все способы вертикального выравнивания"
И выбирайте любой.
В данном случае у вас уже есть флекс у родителя, имеет смысл воспользоваться его центрированием.
dmitrijjjjj,
1. Посмотрите на хотя бы в вопросе. Видите, кусок жирный? Исправьте.
2. Изучите селекторы .username:focus ~ .for-username
Это значит: найди for-username, которые идут следом, на том же уровне, что и username и когда он в фокусе.
Таких элементов не существует, потому что в коде всюду сначала label, а потом input.
Т.е. либо использовать :focus-within либо менять разметку.
С верстальщиком в некотором роде проще: можно узнать как это видит дизайнер и верстать.
Адаптивные контентные картинки верстаются тегом
picture.Остальное перестраивается с помощью
@mediaлибо за счет гибкости флексов или гридов.Если дизайнер: статистика, конкуренты, изучение геометрии и т.д. И 100 раз подумать, а действительно ли для всех вьюпортов разумно делать на один экран.