блиин

я дебил,забудьте

Понимаю

ну так-то у вас еще могут быть стили для принтеров, синтезаторов голоса и т.п. (по спеке)

а вообще весь спор сводится к двум статьям в MDN

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

Я про подгрузку через user agent стилей для 320px и 1920px отдельно

Разобрался? Почитай что делает margin: 0 auto;
Прочитай про display: flex;
Прочитай про flex-shrink , и затем глянь пару видео как верстают flexbox'ами. И всё получится!

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

Нет(, но можно обернуть инпут в лейбл, все элементы внутри будут вести себя как лейбл и тогда id  не нужны)

ну так вот более чем в 95% случачаях пользователю не придется сжимать экран до уровня мобилок
а медиазапросы то остаются, говорю о принципе разбиения на мобилки и компы чтобы грузились стили отдельно
те
базовые стили + комп
базовые + мобилка
а в этих стилях для мобилки и компа могут быть свои медиазапросы
а зачем тебе на мобилке стили компа? которых море лишних? если ты можешь подрузить бандл базовые стили + для мобилки (а в тех что для мобилки тебе и будет стоять медиазапрос что если пользователь экран перевернет)

Понял,благодарю

На некоторых устройствах сжатое окно уже дизайн мобилки по факту
Условный планшет возьмём когда в портретном мобилка, в альбомном пк

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

Никакие теги учить на надо.
И все css-свойства тоже не нужны, достаточно только знать что такое можно сделать в цсс и это можно загуглить и применить. Например: я знаю что длинный текст можно автоматически обрезать, при этом сделав вконце троеточие.  Я не знаю наизусть как это делается но гуглю: ellipsis -- ранее я с этим сталкивался и запомнилось. И гугл говорит мне, что вот этот код делает эту магию:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Так же я раньше гуглил когда пытался установить блок по центру страницы, но потом тоже запомнилось

Или можно не гуглить, а постоянно в чатике спрашивать ))

😂👍

Самый годный ответ на подобные вопросы

где можно посмотреть все теги и свойства html css? MDN?

да

спасибо

Вся суть в одной картинке.

Что такое гуглить