Responsive design using display flex and mainly rem units

What are you most proud of, and what would you do differently next time?

I'm proud of the fact that I slowly am starting to grasp the fundamentals of responsive units and queries, while still not perfect, essentially, the whole page looks okay to great on any display size.

What challenges did you encounter, and how did you overcome them?

I struggled at first with the way things would appear on the phone format, I figured that most of those issues were fixed by starting to build my website by doing the entire HTML page first, my question is the following: Is that a good method? Should I always do the HTML before the CSS even on bigger websites?

Another issue I had, was near the end trying to have all the display sizes to have each element on the correct spot, with the perfect distance between the other elements or the border of their parent element. I fixed some of them by doing try and error but it mainly caused ugly css that probably could have been avoided.

What specific areas of your project would you like help with?

I'd like to learn to use the most out of all the responsive units so that I need as little as possible content in my media queries. I'd like to learn when I should use a margin vs a padding vs something else in order to find the perfect position of every element regardless of screen size. I'd also like to learn to optimize my CSS so that I don't have repetitions of code and figure out how to add the least amount of lines to have a design that is perfectly responsive on all display sizes.