Submitted almost 4 years ago

HTML, SCSS

Judge Micko S. Silvestre•395

@mickoymouse

Preview site View code

This is a solution for...Social proof section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I got lazy and only did the screens exactly for 375px and 1440px. Still, feel free to suggest and give me constructive criticism as I am still learning html and css. Thank you!!!

Community feedback

Matt Studdert•13,611
@mattstuddertPosted almost 4 years ago
Nice work on this challenge! You can probably guess what I'm going to say based on your comment, but I'd recommend spending the time to make it fully responsive 🙂

Making web pages look good on a range of device sizes is such an important skill as a front-end. So it's well worth spending the time and effort to work on it.

As for the rest of the project. You've done a great job with the overall layout. There are some font sizing, line height, and spacing differences from the design, but these are pretty small. However, I'd still recommend taking the time to refine them as attention to detail is another important part of being a front-end developer.

You could remove the alt value from the stars. These images aren't helpful for screen reader users, so changing the alt attributes to alt="" will make the screen readers ignore these elements.

I'd also recommend reviewing the headings in the testimonials. The names of the people are the only headings in those blocks. You've also jumped straight from h1 to h4 which can cause accessibility issues. The natural next heading level in this design would be h2.

I hope these tips help. Keep up the great work!
0
Judge Micko S. Silvestre•395
@mickoymousePosted almost 4 years ago
@mattstuddert "You've also jumped straight from h1 to h4 which can cause accessibility issues. The natural next heading level in this design would be h2" - Thanks for this comment. I didn't know about this one. Can I find this on the documentation? Or can you point me to some article where I can read about best practices in regards with typography? I really have no clue.

As for the responsiveness, I'll definitely work on making it more responsive. I think I only need to work on tablet devices next. I've already prepared my breakpoints for other sizes :D.

Thank you for your feedback. I really appreciate it!
0
Matt Studdert•13,611
@mattstuddertPosted almost 4 years ago
@mickoymouse you're welcome! Here's a good article on heading and page structure from W3C for you to check out.
0
Judge Micko S. Silvestre•395
@mickoymousePosted almost 4 years ago
@mattstuddert I'll check it out. Thank you!
0

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