@vintech05
Posted
Ayy, Nice Work!
I have been there before, media queries can be a troublesome when it comes to measuring your web page into different screen devices. also, one thing to pay attention for is the cross-platforming. so far so good from the browser I'm using right now (microsoft edge) as for the best practice is to read other people's code and try to implement it on your own.
feel free to learn more from my code! company-stats-challenge
here's the breakpoint for screen width I have been paying attention for, bear in mind that overengineering your media queries will result in significantly messy design and it can frustrates you so try your best to avoid that!
widescreen desktop: 2560px
wide laptop: 1440px
laptop:1024px
tablet: 768px
mobile: 425px
those are the breakpoints for each devices, the width might be vary for every browsers but one thing to keep in mind is that make sure to use the mobile-first approach for your coding sessions. make yourself comfortable with that.
for the code itself, its readable but it would be better to use the dynamic unit measuring such as em,rem rather than the static one px as to not wasting too much time to scaling your layout
last thing tho, make sure use the semantics html structuring so the browser can easily read your web.
Marked as helpful
@Ocece77
Posted
@vintech05 Thank you for this great answer! i'll take your advice and apply it in my next projects👩🏿💻! I need to practice on media queries because I don't apply them correctly and also on semantic because it's true that I have trouble choosing the right element sometimes 😅
