Design comparison
Solution retrospective
The concepts were very clear
What challenges did you encounter, and how did you overcome them?I had a hard time finding the right size for the component background. Testing dimensions until finding the right one.
What specific areas of your project would you like help with?Would be good get some feedback about the responsive design.
Community feedback
- @danielmrz-devPosted 9 months ago
Hello @rugarcia25!
Your solution looks excelent!
I have just one suggestion:
๐ To improve semantic clarity, opt for
<h1>
over<h2>
for your main title.It's more than just text size โ it's about structuring your content effectively:
<h1>
to<h6>
are used to define HTML headings, with<h1>
being the most significant.- Stick to one
<h1>
per page for the main title, and maintain the titles hierarchy with<h1>
,<h2>
<h3>
, and so on.
While these adjustments might not alter the visual appearance much, they significantly enhance semantic clarity, SEO optimization, and accessibility.
Hope this suggestion proves helpful! Keep up the great work!
Marked as helpful1@rugarcia25Posted 9 months agoFirst of all, thanks for your time and help.
I used H1 first, but i though that using H2 would fit better, i didn't stop to think on SEO.@danielmrz-dev
1 - @AmirezaMahmoudiPosted 9 months ago
Hello Ruben you missed "." when using css class selector that's why the background color didn't apply. and try to use border-radius for both your img element and main container
Marked as helpful1 - @jakegodsallPosted 9 months ago
Hi ๐
Great work on this component! ๐
Just thought I'd add a few comments regarding responsivity. It is generally considered best practice to not set a
height
with absolute units on a container, and rather to let CSS to determine the height at run-time according to the content it contains.The reason for this is more apparent when it comes to more complicated components, where the content can be dynamic. When we set the
height
, we remove the flexibility that CSS provides by default, and this can lead to overflowing of content.A better approach is to use padding and margins to create the whitespace between the elements inside the container, and letting CSS therefore calculate the total
height
.Another responsivity trick is to use a percentage-based value for the
width
of the component. This allows the component to shrink with smaller viewports and not overflow the screen. Amax-width
can then be set for larger viewports to stop the component from spreading too far.In your example, this could be achieved with:
.container { width: 90%; max-width: 400px; }
This would solve the problem you have when the screen is smaller than
400px
in width and the component does not fit in the viewport.Hope this helps ๐
Marked as helpful0@rugarcia25Posted 9 months agoI really appreciate your comment, it helps a lot.
I like to use the % to control better the responsivity but i dont have a "single way to work", sometimes i work with %, sometimes with px, sometimes with en/rem, i think i should work with the same structure to keep a singularity.
Sorry for my english, isnt the best@jakegodsall
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