@trayansh005
Posted
Overall your solution is good but you can improve it by adding drop-shadow to your card and main tag to wrap your container
Marked as helpful
What challenges did you encounter, and how did you overcome them?
I thought that relative widths are the best and that fixed widths cause problems in responsivity! But this challenge required a fixed width for the container!
@trayansh005
Posted
Overall your solution is good but you can improve it by adding drop-shadow to your card and main tag to wrap your container
Marked as helpful
@TedJenkler
Posted
Hi @iyedoo,
Nice project! I have a couple of suggestions for improvement:
Semantic HTML: Consider using semantic HTML elements like <main>, <section>, or <article> to replace unnecessary <div>s (such as adding a <main> in this project). A good rule of thumb is to avoid <div>s as much as possible and use appropriate HTML tags. This will improve accessibility and lead to cleaner, more maintainable code.
Headings Usage: You should only use <h1>, <h2>, and other heading tags based on the importance of the content, not for styling purposes. The <h1> tag is typically reserved for the page title and should only be used once on a page (and isn’t needed in this project).
Keep up the great work!
Best, Teodor
Marked as helpful
@Stroudy
Posted
Great solution, Looks like you have done a fantastic job! A few things I noticed,
<meta>
description tag for SEO purposes,<main>
tag inside your body highlighting the main section.max-width: 100%
or min-width: 100%
is way more responsive then just width:100%
, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.px
as it is an absolute unit and not a responsive unit like rem
or em
, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.<img>
will increase performance to reduce layout shifts and improve CLS, It reserves the space on the page for the image,I hope you found some of this information helpful, You should give the articles a good read and I look forward to seeing some more from you, Happy coding! 💻
Marked as helpful
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