Design comparison
Solution retrospective
💢Hi Guys💢 I have designed this challenge with help of the AI and it was very nice and I love this challenge.
Community feedback
- @BlackpachamamePosted 10 months ago
Greetings! you have done a great job 😎
📌 Some accessibility and semantics recommendations for your HTML
- To improve the semantics of your HTML, you can change your
<div class="container">
to a<main class="container">
📌 Some suggestions
- Add a
padding
to generate interior space on your card. This prevents you from usingmargin
orpadding
on child elements to achieve the same result - Use
min-height
andmax-width
, this will help the content stretch or shrink if you need to. Unlikeheight
andwidth
which can cause your content to be cut off on certain screens - Do not use
%
forwidth
orheight
. Better userem
,em
orpx
- I recommend doing a small
reset
to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector*
, with this you will make your site look the same in all browsers - I leave you the task of researching the
reset CSS
and thebox-sizing: border-box
0@M1389Posted 2 months ago@Blackpachamame Hi dear friend thanks for your useful suggestions. I'll look for your suggestions as soon as possible. Thank YOUUUUU
1 - To improve the semantics of your HTML, you can change your
- @danielmrz-devPosted 10 months ago
Hello @M1389!
Your project looks great!
I noticed that you used
position
to place the card in the middle of the page. Here's a very efficient way to center the card:- Apply this to the body (in order to work properly, don't use position or margins):
body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
I hope it helps!
Other than that, great job!
0@M1389Posted 2 months ago@danielmrz-dev
Hi Thank you for the suggestion and also the feedback, recently I have been using flexbox and also the grid a lot. In my opinion they are a life saver in CSS, aren't they?
Generally, Thank You for your feedback and help
Respectfully from Mahdi Hashemi
0
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