@mattstuddert
Posted
Congrats on your first submission, Mishu! You've done a good job! Here are some thoughts:
- You don't need the extra container with the
box-shadowaround it. You can see in the design comparison how it should look. - You could use
text-transform: uppercaseon the headings to uppercase them like in the design. - I'd recommend only ever using a single
h1on a page. For these headings,h2would be perfect. - When it breaks to a single column layout, the elements stretch all the way to the edge of the browser. I'd recommend giving some space, like in the design. You could also break into a single column a bit later.
- Have you ever tried using
min-widthmedia queries instead ofmax-width? It's quite a common workflow with front-end developers to use them and work mobile-first. It can often lead to less CSS code and has the benefit of loading in fewer styles for mobile users, which can be a nice performance gain.
I hope these tips help. Let me know if you have any questions!
@Mishu-Hishu
Posted
@mattstuddert
Oh wow thank you very much for this feedback it is much appreciated :D I will go back and change it :)
P.S. 1 question, in the mobile-design.jpg that was provided with the project it doesn't look like there are any margins from the edges (and will it even make sense to reduce the little screen space you have on mobile with margins?), so where in the design can I find that?
@mattstuddert
Posted
@Mishu-Hishu, you're welcome! You should see the small gap between the edge of the design and the content. With the background colour on the design, there's a chance it's blending into the background of whatever you're using to view the files.
It's common to have a small gap to give the content some breathing space from the device's edge.
@Mishu-Hishu
Posted
@mattstuddert
noted. thank you :)
