Design comparison
Solution retrospective
-
I tried to make the HTML as clean as possible using semantic tags.
-
He practice certainly made it easier for me to do the project.
-
The most annoying part in my opinion was messing with the media queries, but the result in my opinion was great.
-My only question was in the ul I used, I avoided using span.
I would like to know if there is still something to improve
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Adriel , Congratulations on completing this challenge!
Your solution is just perfect! I liked a lots what you did here using the
picture
to wrap the images and making the container full responsive. Really good solution! Something that can be a time saver for you is to use a CSS RESET to remove all default settings for margins, making the images easier to work, see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/I saw that for some properties you’ve used
rem
and for otherspx
. In this case it is better to use only one kind of unit to have a better organization for your code.relative units
asrem
orem
that have a better fit if you want your site more accessible between different screen sizes and devices.REM
andEM
does not just apply to font size, but to all sizes as well.✌️ I hope this helps you and happy coding!
Marked as helpful1 - @UrbanskiDevPosted about 2 years ago
Hello Adriel Santos Costa !
Congratulation for finishing the project
Some suggestions to make it better :
- You can add a little hover effect to your button to make it less rigid !
.card-button:hover{ background-color: hsl(158, 36%, 32%); }
You can also add a transition to make the hover smoother, I give you a link about transition if you want to learn more about the topic :
You did a good job !
I hope it helps you, keep learning and happy coding !
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