@VCarames
Posted
Hey there! 👋 Here are some suggestions to help improve your code:
- The
articleelement is not the best choice for wrapping these testimonials. In order to use thearticleelement the component needs to be able to make sense on its own and be independently distributable (can be used in on another site). These testimonials cannot do neither.
More Info:📚
- To improve the semantics of your component, you will want to wrap each individual testimonial component in a
figureelement, the individuals information should be wrapped in afigcaptionelement and lastly, the testimonial itself should be wrapped in ablockquoteelement.
Code:
<figure>
<figcaption></figcaption>
<blockquote></blockquote>
</figure>
More Info:📚
- The only headings in this component are the names of each individual; “Daniel Clifford”, “Jonathan Walters”, “Jeanette Harmon”, “Patrick Abrams” and “Kira Whittle”. Everything else should be wrapped in a
paragraphelement.
- The profile images are not decorative. Their
alt tagshould not be blank. It should state the following; “Headshot of -person’s full name-“
More Info:📚
- Using CSS
gridwithgrid-template-areaswill make things way easier when building the layout and give you full control of it.
Here is how it looks like fully implemented: EXAMPLE
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful
@ponisworld
Posted
@vcarames Wow! Thank you a lot, I just added everything you said because I found it very interesting and true, I didn't know about how to use correctly the article and figure elements even knowing the theorical part. Now I understand it with the example you've done, like an article can be distributed on any other website. Now I understand it a bit more. I was doubtful about the headings, now I think my code become clearer and clever with your help.
I always forgot about grid-template-areas and what a shame, is so easy to use. And about the alt attribute, I have no excuse, maybe I think most images are decorative hahaha.
Anyway, thank you, thank you a lot. Because I see you and I saw you since ever in the hall of the fame and I admire that you really commented on my solution, I'm so grateful right now.
Happy coding to you, too!
@VCarames
Posted
@ponisworld
I’m glad I was able to help you out in your web development journey!
Keep it up! Before you know it, you will be giving me advice!
