Design comparison
Solution retrospective
I am progressing in my web development road. If you have any feedbacks, it would be precious for me.
Community feedback
- @debriksPosted almost 2 years ago
Hi Ahmed,
Great solution! Well done. :)
I just have a few suggestions to improve it:
-
it's always good to make your images
display: block
andwidth: 100%
, it makes them easier to work with and it will help avoiding them from being deformed on small screens. -
another way to deal with the footer articles is by using
display: grid
instead ofdisplay: flex
so that you can set the width of each column like so:display: grid; grid-template-columns: 1fr 2fr;
Here's a good ressource on the subject: https://css-tricks.com/snippets/css/complete-guide-grid/ -
a good way to deal with the hero area is by using the css property
grid-template-areas
, where you just tell css what html element will be placed in each column and each row of your grid. Here's a example:grid-template-areas: "header header header" "hero hero aside" "hero hero aside" "footer footer footer";
. Here's a ressource on the subject: https://css-tricks.com/almanac/properties/g/grid-template-areas/ -
for accessibility purposes, img tags should always have a
alt
attribute (ex:alt="top laptops 2022"
: https://css-tricks.com/some-things-about-alt-text/
Hope you find these comments helpful.
Keep up the good work! :)
Marked as helpful1@Ahmed-Zaki20Posted almost 2 years ago@debriks Thanks a lot for your feedback :) I found it very helpful especially the grid area tip! I'll do my best to enhance my experience on web development and I wait for more feedbacks from you ^^
1@debriksPosted almost 2 years ago@Ahmed-Zaki20 so happy my suggestions could help you! You are already doing a great job!
Keep up the good work and happy coding! :)
1 -
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