nowadays there are so many screen sizes for mobile phones and tablets
So far I used my pc size as reference for my web projects:
-
1920 px width x 1030 px height = maximum dimension of my pc browser window
-
622 px width x 778 px height = minimum dimension of my pc browser window
Yesterday i used Chrome dev tools to view my portfolio, that I am updating, via different sizes and it looked bad
my portfolio only looks good between the minimum and maximum sizes of my pc browser screen
what screen sizes and browsers to use as reference to make 100% responsive websites ? are pixels recommended to be used ? I am extermely confused
how to use Google Chrome dev tools in this regard?
I completed Responsive design, HTML and CSS certification by freeCodeCamp and I tried to apply what I studied to achieve mobile-friendly like media queries, flexbox
But for example I saw yesterday this tutorial and the teacher was putting the accent on putting content in <div> to make it more mobile-friendly
how do you really achieve mobile-friendly websites ?
also does anyone can recommend a game or something to practise media queries?
I found games to practise programming languages like JavaScript, for flexbox but not for media queries, does Scratch offer that?
I feel that doing games would be the best way for me to prepare properly to do projects. the goal is to truly understand the code I am writing and how and when to apply that as this is what I am really missing now