Design comparison
Solution retrospective
What I’m most proud of: I’m proud of integrating accessibility features by adding descriptive alt text, improving code structure with rem units for responsiveness, and using proper BEM naming conventions. Additionally, I applied a modern CSS reset and included for better SEO.
What I’d do differently next time: I’d focus on better handling of max-width and min-width properties, and ensure proper usage of margin-inline: auto for centering elements that will enhance the responsiveness and alignment of the design.
What challenges did you encounter, and how did you overcome them?I’m consistently having issues with setting the container and image dimensions correctly and also need help with effectively using max-width, min-width, and margin-inline: auto to achieve proper layout and responsiveness. I fixed image and container issues and I'm still working with other things.
What specific areas of your project would you like help with?I’d like help with effectively using width, min-width, and margin-inline: auto to ensure better responsiveness and alignment in my project and other improvement feedbacks are always welcome.
Community feedback
- @TedJenklerPosted 2 months ago
Hi @Ihdir,
Nice project! Here are a few suggestions:
Another fun way to center a <div> is by using position: relative on the parent and position: absolute on the content, with top: 50%, left: 50%, and transform: translate(-50%, -50%). For a challenge, you could also center it with Grid, but Flexbox is definitely the easiest method in this case.
I’d suggest improving your semantic structure a bit. For example, you’ve nested your component in many <div>s, when one main container for the card, combined with Flexbox on the body, would be sufficient. Using fewer <div>s makes your code easier to read and helps search engines better understand your page.
I noticed you’re using both <h1> and <h2>. While this isn’t necessarily wrong, the <h1> tag should be reserved for the page title and should only appear once. For card components or other sections, using <h2> for headings and <p> for paragraphs would be more appropriate.
Keep up the great work!
Best, Teodor
Marked as helpful1@IhdirPosted 2 months agoHi @TedJenkler ,
Thank you so much for the feedback and suggestions!
I've seen people centering elements using top: 50%, left: 50%, and transform: translate(-50%, -50%), but I haven’t tried it out yet. I'll definitely give it a go and see how it works for this project. I'll also take your other advice into consideration, like improving the semantic structure and using proper heading tags.
I really appreciate your input, and I'll work on applying these changes to improve my code!
Best regards, Ihdir
1 - @huyphan2210Posted 2 months ago
Hi, @Ihdir
I reviewed your solution and have a few thoughts:
- As Svitlana Suslenkova mentioned, you should apply
min-height: 100vh
to thebody
. This ensures that thebody
always covers the full height of the viewport, preventing it from being shorter than the screen and ensuring a consistent layout. - Your
main
tag contains two elements: one with the.Element
class and one with the.attribution
class. I'd recommend giving.Element
a more descriptive name. Good naming conventions improve code clarity, especially in larger projects. You can explore CSS naming conventions like BEM (Block, Element, Modifier) for better structure. - You don’t need to use Flexbox for the card (
.Element
class, which is a block-leveldiv
). The child elements inside, except for theimg
, are also block-level, so they naturally stack on their own lines. Additionally, I’m not sure why you setwidth: 90%
on the.Element
class. On smaller viewports (under 37.5rem), it causes horizontal overflow. Simply removing this should resolve the issue. - Lastly, the styles
max-height: 43.75rem
,height: auto
, andoverflow: auto
on the card seem unnecessary as they don’t contribute much to the layout.
There are a few other areas for improvement, but I’ll keep this brief for now. 😉
It looks like you’re just starting out in front-end development—good job so far!
Hope this helps!
Marked as helpful1@IhdirPosted 2 months ago@huyphan2210 "Thank you, Sir. I appreciate your feedback and will definitely work on the points you mentioned. I'm a 17-year-old passionate beginner, aiming to build a career as a full-stack developer. I started learning HTML and basic CSS just 11 days ago, and I’m excited to keep improving!"
1 - As Svitlana Suslenkova mentioned, you should apply
- @SvitlanaSuslenkovaPosted 2 months ago
I see you added flex, but your project didn't align to the center. The problem is you should add to your flex also min-height: 100vh; Currently, the height of the body is the same as the component in it.
Hope you found this comment helpful :)
Marked as helpful1@IhdirPosted 2 months ago@SvitlanaSuslenkova “Thank you, Ma'am. I appreciate the feedback and will definitely look into it. I’ll work on addressing these points to improve my future projects too.”
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