First Try of harder challenge, struggling a little

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  • The article element is not the best choice for wrapping these testimonials. In order to use the article element 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:📚

  MDN Article Element

  • To improve the semantics of your component, you will want to wrap each individual testimonial component in a figure element, the individuals information should be wrapped in a figcaption element and lastly, the testimonial itself should be wrapped in a blockquote element.

  Code:

  <figure>
     <figcaption></figcaption>
     <blockquote></blockquote>
  </figure>
  

  More Info:📚

  MDN Figure Element

  • 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 paragraph element.

  • The profile images are not decorative. Their alt tag should not be blank. It should state the following; “Headshot of -person’s full name-“

  More Info:📚

  Headshot Alt Text

  • Using CSS grid with grid-template-areas will 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

  1

  ---

  

  Andrea•240

  @ponisworldPosted almost 2 years ago

  @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!

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted almost 2 years ago

  @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!

  1