Design comparison
Solution retrospective
What did you find difficult while building the project?
-- That's stupid but the difficult thing was to setup the background. Because the starter pack has 2 background image, I thought I had to make the two images fit together like a puzzle, when in fact I had to choose one, place it at the top of the page, then apply a blue background color 🤦🏿♀️
Which areas of your code are you unsure of?
-- My media queries because when I shrink my page, my container becomes weird haha, but when I look at it with the firefox development tool on different devices, my media queries work correctly 🤨I need to practices my media queries😪
Do you have any questions about best practices?
Yes , especially about media query ! 🧐
Community feedback
- @vintech05Posted over 1 year ago
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,remrather than the static onepxas to not wasting too much time to scaling your layoutlast thing tho, make sure use the semantics html structuring so the browser can easily read your web.
Marked as helpful1@Ocece77Posted over 1 year ago@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 😅
0 - @Ocece77Posted over 1 year ago
Okay so I correct my css and I replace all the "vw" and "vh" with "px" because this cause a big mess when I try to shrink my project . Now I'll try to correct the GitHub preview because my image won't load correctly ! 😄
I also correct the background-image because I forgot a "." at the beginning of the path ! I forgot one little thing and this cause a big problem 🥲
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord