Skip to content
Submitted over 1 year ago

Social proof section (Tailwind CSS 🎨)

accessibility, lighthouse, pwa, tailwind-css, semantic-ui
Melvin Aguilar 🧑🏻‍💻•61,020
@MelvinAguilar
A solution to the Social proof section challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there 👋, I’m Melvin, and this is my solution for this challenge. 🚀

🎁 Features:

  • Achieved 100% in Lighthouse score for performance, accessibility, best practices, and SEO. 📊
  • Progressive Web App (PWA) support. 📱🌐
  • Utilized TailwindCSS for responsive styling. 🎨
  • Codebase is well-maintained and formatted using Prettier. 💻

🛠️ Built With:

  • TailwindCSS. 🎨
  • npm - prettier - prettier-plugin-tailwindcss. 💻

Thank you. 😊✌️

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Rupali•890
    @rupali317

    Hello @MelvinAguilar

    Excellent work on completing this challenge.

    I went to my Chrome browser and went to the browser settings and modified the font size settings to "very large" and I noticed that the the profile pics were elongated vertically. Moreover, the stars were also appearing in another line. When I change the font size setting to "very small", the profile pics were appearing squarish. The stars were appearing quite big as compared to the surroundings. You might want to take a look at it.

    Besides that, I have a general suggestion: Consider using css grids since it is more powerful than css flexbox. Flexbox handles one-dimensional layout whereas grids handles one-dimensional as well as two-dimensional layouts. For example, in the rating section - desktop view, they appear in a stair-way kinda manner. So in a grid format, there are basically 5 columns and 3 rows to represent it. So you can use grid-template-areas and assign grid areas to the individual items inside it. Using grid-template-columns, you can assign the width of the columns. I suggest you draw the grids on a paper and then see how the rating section fits in it. My similar comment for the testimonial section.

    Refer to Kevin Powell's video on learning the CSS grid the easy way

    Marked as helpful
  • P
    Rupali•890
    @rupali317

    I will be submitting my solution on the social proof challenge soon.

    To, @MelvinAguilar I noticed you used .sr-only class, which I also want to include in my solution.

    I experimented with that class and noticed that these two properties seem to be sufficient for sr-only class.

    .sr-only {
  position: absolute;
  clip: rect(0,0,0,0)
}
    1. What are your thoughts on the above?
    2. Also, I was surprised that the position absolute had to be used in conjunction with the clip. I am not yet sure why. I thought the clip would be enough. I would love to hear your thoughts on this.
  • Dimitar Radev•930
    @Mitko90

    I just wanted to drop in and say:

    You are a master at perfection. 🙌️🙌️🙌️

  • MOHAMAD•60
    @mohamad-hajilo

    Excellent 👌👌👍👍👍

  • Phan lê thanh trường•1,070
    @truong231298

    @MelvinAguilar you are the marter of tailwind-css, you make your challenge so beutifull with [2.4375rem], [1.4375rem]... wow, i had followed you and learn more about it. Keep doing your work, i will always be with you.

  • KAVIARASAN M•80
    @kavicoder45

    ✋Hi bro, I hope you're doing well. I have some doubts about your project. I noticed that your webpage is responsive even when I zoom in and out of the web browser. However, my solution is not responsive; when I zoom in and out of the web browser, it creates unwanted gaps between the elements. I really like all of your projects. 💁‍♂️Could you please provide a roadmap for me to learn complete front-end web development? It would be really helpful for me to master this field. Also, could you share the resources you followed to learn front-end development?😊😊

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