3 Column Preview - Challenge

Community feedback

• 

  Pranshu Sahu•770

  @Pranshu-SahuPosted almost 2 years ago

  Hi, Yuri-Mendes! 👋

  **Congratulations for completing the completing the challenge.**🎉

  👍Your solution looks awesome bro.

  In order to make rounded corner you should use border-radius property to individual card. To know more about about border-radius

  Having multiple <h1> elements can create confusion and make it difficult for screen readers and other assistive technologies to properly navigate the content. Many <h1> mean many titles which can confuse the users, especially the screen reader users. So, I recommend replacing all the <h1> with <h2>.

  In this case, it is only a component, not a full website. So, it is okay to not have <h1>.

  Learn more — [How-to: Accessible heading structure - The A11Y ]Project(https://www.a11yproject.com/posts/how-to-accessible-heading-structure/)

  I hope you find this useful. Wish you all the best for future projects.🎉🎉

  0

  ---

  

  Yuri Mendes•130

  @Yuri-MendesPosted almost 2 years ago

  @Pranshu-Sahu Thank you very much for your feedback, I know about the border-radius, and I applied it, and tried the rounded (bootstrap) tag as well, but any of it didn't work, cause only the right and left sides are rounded not the middle, so I couldn't apply in each card, I have to apply only on the corners of the whole solution, the container I was able to apply, but the card on the left didn't work. Really don't know how to make this right, maybe soon I'll learn more about it.

  About the h1, as it is only one component, not a full website, I put one same tag for all, it's easy to deal with it.

  Again, thank you very much.

  1

  

  Pranshu Sahu•770

  @Pranshu-SahuPosted almost 2 years ago

  @Yuri-Mendes ,

  regarding border-radius--

  .row{ border-radius: 20px; overflow: hidden; }

  Add the above code to your css file

  This would give you rounded corners. You could look at my solution .

  --Oh yeah, that old heated discussion. Can I use multiple h1s on a web page? Short answer: No. The h1 is for the page title only.

  Having multiple h1s on a web page is bad practice, for accessibility and for SEO. It creates a flat and meaningless structure. But, it's not a WCAG 2 AA violation.

  Using multiple h1s was proposed with the introduction of the HTML Document Outline in HTML5.

  I hope you would find it useful.👌👌

  Happy coding.😊😎

  Marked as helpful

  0

  

  Yuri Mendes•130

  @Yuri-MendesPosted almost 2 years ago

  @Pranshu-Sahu Thank you so much for this tip, it really helped to solve the issue: .row{ border-radius: 20px; overflow: hidden; }

  1