uuuu, someone reminds me of 2014, when we did it manually. nice tutorial BUT... For typography you should use a mixture of px and rem/em to have a fallback, ALWAYS have fallbacks! because you never know what browser the user has and if you set it up like you did, in all rems... well what if your site is accesed by someone who uses ie9 or ie10 were rems are partially supported? answer it will fail. soo h1 { font-size: 28px; font-size: 2rem; }
nav { font-size: 14px; font-size: 1rem; }
Also, back in 2014 we used display:inline-block, on this part the discussion is debatable, because its harder to make responsive using the display:inline-block than flex, BUT it can be done !
Another thing... well before you load your css responsive code you should reset everything (i thinks thats how its called), i mean, you make everything 0, default (body (padding:0; margin: 0} html {} etc for this you can use yui css reset yuilibrary.com/yui/docs/cssreset
Good job and continue learning!!