Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Social proof section solution

#accessibility#bem#sass/scss

@rafaeltakano

Desktop design screenshot for the Social proof section coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi everyone! 👋

I'm not so sure about the way I made the testimonials three-column design for desktop. Is there a better way to do it?

Also challenged myself to implement dark-mode. It's only visible when you change it on your browser settings cause I didn't use any JS. Is there a better way to do it?

Any feedback is welcome, specially for accessibility with my html/component!

Community feedback

@vikramvi

Posted

  1. I checked your GH profile and has got below suggestions & queries

1.1 You could have used semantic tags in index.html to make it SEO friendly

1.2 Please clarify why did you use sass instead of plain CSS ?

1.3 I didn't understand how did you manage to put 3 testimonial at different level ?

Does the layout look good on a range of screen sizes? YES

Is the code well-structured, readable, and reusable? YES

2

@rafaeltakano

Posted

@vikramvi Hello there! Thank you for your feedback!

1.1 - I tried using a few landmarks and list elements, should I have used any other?

1.2 - I'm also using this projects as a way to learn new things and Sass was something I wanted to learn

1.3 - I looked your solution for this problem and we used the same logic, leaving room inside the testimonials-grid to place one at the top, middle and bottom

1

@vikramvi

Posted

@rafaeltakano Thanks for clarifications.

I'm also learning SEO and accessibility practices, as I couldn't find many semantic elements and more div, thus suggested to get rid of div and replace with semantic elements.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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