Design comparison
Solution retrospective
One more project was made by me. I'm getting closer to my goal of completing all free tasks on Frontend Mentor
Challenges I faced in this project:
-
figcaption had 2% more height than image. Ended up adding a flex attribute to a figure box. Probably adding a cover property to an image would've led to the same result.
-
Also spent some time experimenting with replacing figcaption with a common div. No difference at all. Just semantic
-
Relative position of figure. Took a time to realize how to make an absolute figcaption fit into a figure
Would like to see your reviews!
Community feedback
- @danielmrz-devPosted 9 months ago
Hello @grgrnkoo!
Your solution looks great!
I have a suggestion for improvement:
- Use
<main>to wrap the main content instead of<div>.
š Think of
<div>and<span>in HTML like plain boxes or placeholders. They're handy for holding content, but they don't tell us anything about what's inside or what it's meant for on the webpage.This tag change does not impact your project visually and makes your HTML code more semantic, improving SEO optimization as well as the accessibility of your project.
I hope it helps!
Other than that, great job!
Marked as helpful0@grgrnkooPosted 9 months ago@danielmrz-dev I was thinking about these elements as a part of a big website, so tried to make them ready to use just by ctrl-c ctrl-v. That's why I didn't use <main> on any of my solutions here
1 - Use
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