Design comparison
SolutionDesign
Solution retrospective
I did not do the mobile version because I have not learned how to do it. However here is the desktop version.
Community feedback
- @vanzasetiaPosted about 3 years ago
👋Hi Jonathan Aldas!
I would recommend to learn about responsive website or
@media
query to make it responsive, before you continue to do another project.Also, it's a common pattern to do mobile first rather desktop first when it comes to code the layout. Mobile first approach can often make you write less CSS.
Some feedback on this solution:
- Import both font families at once.
- Is there a reason to put
br
on the ending of every paragraph tag? If you want to create a space, then usemargin
orpadding
, instead ofbr
tag.
<div class="cont-3.1"> <p class="p-2">10k+</p> <p class="p-3">Companies</p><br> </div>
- You don't need to set the root or html font size.
- You don't need to prefix
border-radius
anymore. It has been 100% supported on all browsers. - Also use BEM naming convention for better class name.
- If you're using
background-image
, then you can usebackground-blend-mode
to create the overlay instead of using another HTML element. - I would recommend to name your directory without any spaces. It makes you easier to write it.
That's it! Hopefully this is helpful!
Marked as helpful1
Please log in to post a comment
Log in with GitHubJoin 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