Как правильно верстать адаптивно сайт?

используете media queries и больше никакого колдовства, разберетесь с медиа выражениями, можно спокойно использовать Bootstrap либо любой фреймворк, но все же лучшая практика это медиа выражения

Есть 2 подхода к верстке адаптивов:
mobile-first и desktop-first
Бородатые разрабы в большим опытом рекомендуют начинать с mobile-first, ибо так меньше багов.
Лично мне как новичку во фронтенде проще с десктопа начинать, патамушта нагляднее.
Но, вот от одного клевого middle-frontend`ера услышал такой интересный подход:
Верстаешь мобайл ферст, юзаешь при этом только display-block элементы, (потому что по сути все элементы в мобильной версии расположены друг под другом, а это достигается блочными элементами) потом когда доходишь до планшета и десктопа, css`ом растаскиваешь элементы по страничке так, как рисовал дизайнер.

Попробовал такой подход, и почувствовал как +100 XP и 1lvl Up добавились ко мне))

// Я юзаю SASS. Клевая штука, значительно ускоряет процесс разработки, и подружившись с миксинами ради прикола я даже попробовал свою сетку сделать. Препроцессоры очень крутая штука! Sass я освоил за неделю в перерывах между рабочими тасками))

Медиа выражения, как описал Sagan, а так же можешь начать с bootstrap`а
потом флекс бокс глянь

Выберите себе фреймворк по вкусу. Например тут описаны 5 самых известных https://geekbrains.ru/posts/5_css_frameworks. Можете сами погуглить по запросу "адаптивные css фреймворки".

Сам пользуюсь бутстрепом уже много лет просто потому что он дико популярен (по крайней мере в моём мире). Но не прочь попробовать что-нибудь еще. Благо CSS фреймворк - это не rocket science и перейти на что-то новое достаточно легко.