Frontend Mentor testimonials grid section: CUBE CSS, Eleventy

Community feedback

• 

  T

  Grace•31,530

  @grace-snowPosted 23 days ago

  Oh no I just wrote loads of feedback then accidentally deleted it 😭 😆

  Oh well ill have to summarise quickly, there wasn't much:

  • you can't aria-labelledby an article by itself! That makes no sense and would lead to a bad experience for screen readers. If you really want to label these it should be pointing to the person's name.
  • the quote paragraphs should be in a blockquote element.
  • I'm not sure why you're adding tailwinds reset and then another reset.

  I can't really comment on css more than that as I'm only looking on mobile.

  Make sure you keep learning html even as you progress in the js learning path.

  Marked as helpful

  1

  ---

  

  ortiz-antonio•230

  @ortiz-antonioPosted 23 days ago

  @grace-snow

  Thanks for taking the time to review this. It's challenging to do properly on mobile.

  • aria-labelledby Fixed: I was reference the same article by id, now it references to the h2, this is the output of the Nunjucks template:

  <article
    aria-labelledby="daniel-clifford"
    class="testimonial"
    data-layout-author="daniel-clifford"
  >
  <h2 id="daniel-clifford">Daniel Clifford</h2>
   
  

  All the attributes are named based on the author's slug.

  • data-layout: This is an exception in the CSS. Three out of five elements have different background colors, but I don't see a clear pattern.

  • id and aria-labelledby: I learned from your blog fedmentor that these landmarks need aria-labelledby for accessibility.

  • I only use Andy Bell's CSS reset. I removed Tailwind's CSS reset and other unused components from the configuration, based on the Andy Bell Cube boilerplate.

  • I totally agree with your point—this should be a <blockquote>.

  • Yes, I'm still learning. I feel like I need to study more. I started with backend development and thought HTML would be easy, but doing it correctly is much harder.

  Thanks for your mentoring!

  0