Design comparison
Solution retrospective
The design seems very close to the example thanks to the figma design. I use all the variable from the design.
What challenges did you encounter, and how did you overcome them?I was challenged by a probleme of padding with the text section. I didn't understand why the width of the container change while i fixed it. With few research on internet, i find the solution with box-sizing. Also, I did'nt see that the width and the height were wixed in the figma design so I didn't think to fixed it for the container.
What specific areas of your project would you like help with?All
Community feedback
- @magicDGSPosted 3 months ago
Looks quite nice, congratulations!
Some comments and suggestions just to add something more:
- In the design screenshot, it looks like there is a shadow missing below the card - adding it would be a nice thing too (not sure if it is in Figma, as I am not using it)
- A nitpick comment: looks like the image border-radius is a bit too much compared to the design screenshot
- Add classes to style instead of directly into the elements
- Wrap the image in a container to ease the styling and prevent some layout shifts
Marked as helpful0@RadishSoundPosted 3 months ago@magicDGS Thanks you a lot for your return ! What kind of html element do you recommend for this kind of component, espacially for the text section ? I use h1 and p but it's maybe not a good practice here.
0@magicDGSPosted 3 months ago@RadishSound - Usually, for what I understand (after a lot of research about semantic HTML), I would say that it depends on what you want to focus; and if it is just for helping in styling, then use a
<div>(later, if styling requires something else, you can always remove the<div>without removing the semantics).In my case, this is what I did (you can see my solution here).
- The whole component was wrapped in a
<section>as it is independent for the rest of the content (if it is something that you expect to be repeated, it can also be an<article>) - I wrapped the
<img>into a<div>to help styling, also because I could imaging cases where the image part might contain some other information (like an anchor), so it is more future-proof in case that it should be extended - For the text, I did wrapped everything into a
divwith classqr-card-contentto style only that<section>
From my POV, another option would be to treat the whole element as an
<article>and then the img and content wrapped into a<section>. This at the end depends on how semantic you would like to be: my approach was: wrap everything as a<section>so everything is together semantically; for the rest, it was just a matter of style (and thus, I used<div>).By the way, take with a grain of salt what I am saying: I am a professional backend-developer with Java (not javascript), but I am currently learning design and HTML/CSS just for fun. So maybe something that I said here is too much overthinking as a Java-focused programmer.
Marked as helpful0@RadishSoundPosted 3 months ago@magicDGS Thank you for this complete explication, I keep in mind your advice for my future development.
0 - @GrigoriSchneiderPosted 3 months ago
Your CSS aligns well with the Figma files. The HTML is well-structured. Good work!
0
Please log in to post a comment
Log in with GitHub
Join 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