Submitted over 3 years ago

Responsive Social Proof Section using HTML & CSS

Paul James Azanes•75

@pjazanes

Preview site View code

This is a solution for...Social proof section

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

** Built with **

Semantic HTML5 markup
CSS custom properties
Flexbox
Mobile-first workflow

** What I learned **

Proper use of Semantics

<main>
  <section>
    <header></header>
    <div></div>
  </section>
</main>
...

Design a responsive site


abuse @media queries lol

This is my first time designing a responsive web site. I've tried really hard to make it responsive as it could and still not sure if I did it right 😅

I would greatly appreciate it if you kindly give me some feedback again. Thank you! Happy coding! 💪

Community feedback

tediko•6,680
@tedikoPosted over 3 years ago
Hello, Paul James Azanes! 👋 Congrats on finishing another challenge! Your solution looks very good and also responds well. It's good that you take a proper read on semantics. Here's my few tips:

You repeat your HTML code with stars images which is unnecessary. Find the way to use only one star image for a .rating-stars. You can do it easily by using background-repeat approach in your css. Your approach is also good tho. Just want to let you know another way to do this. Good luck with that, have fun coding! 💪
1
Paul James Azanes•75
@pjazanesPosted over 3 years ago
@tediko Hello, tediko. Thank you for your feedbacks and advices/suggestions. It helps a lot!
0
Patrick•14,265
@palgrammingPosted over 3 years ago
It looks really good. Great Job ⭐ ⭐ ⭐ ⭐ ⭐
1
Paul James Azanes•75
@pjazanesPosted over 3 years ago
@palgramming 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