Submitted over 2 years ago

Testimonials responsive page using CSS Grid

Subhajit Roy• 190

@subhajitroycode

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Testimonials grid section

HTML
CSS

2junior

View challenge

Design comparison

SolutionDesign

Community feedback

Krzysztof• 240

@KrzysztofLeczycki

Posted over 2 years ago

Hey,

if you only want to practise styling features such as grid, flex, positioning etc., I think that you don't have to worry about accessibility too much. However, when you build a project which simulates a web page or a web app, you should follow good practices, including accessibility. Have in mind that your products can be used by people with eyesight issues.

I am still a beginner in the accessibility field, but I am trying to improve my knowledge in each project.

You could try using semantic HTML tags. For example, wrap your quotes in <article>. I am not sure if using <header> in each quote is good practice.

I hope I helped a bit. Best wishes. :D

Subhajit Roy• 190

@subhajitroycode

Posted over 2 years ago

@KrzysztofLeczycki Thanks I appreciate that... I am gonna fix this and gonna look out for it in the future.

Subhajit Roy• 190

@subhajitroycode

Posted over 2 years ago

I don't understand the accessibility issues should I be worried about that??

Paula• 60

@thedoodlebakery

Posted over 2 years ago

@subhajitroycode For the accessibility messages, they are best practices to use when coding.

It is a best practice to use h1, h2, h3 and so on as use you navigate through the page. If code jump immediately to h2 or h3, without declaring h1 heading, a page will receive the level one heading error.

Also, the banner landmark error is happening because the page header (<header> tag) has been used more than once without a sectioning tag. You may need to add some section tags. Since header tags usually define the header information for the most adjacent ancestor or parent. These are just suggestions.

This solution looks really great.

Subhajit Roy• 190

@subhajitroycode

Posted over 2 years ago

@thedoodlebakery Thank you very much I appreciate that.

Please log in to post a comment

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