Frontend Mentor - Social proof section solution

This is a solution to the Social proof section challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the section depending on their device's screen size

Screenshot

Links

• Solution URL: link
• Live Site URL: link

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

This project surprised me in areas I never expected

• Creating the stars for the reviews
• Learning about Developer Tools which is extremely helpful for CSS Grid layout
• using CSS Grid for the layouts especially for the ratings and testimonies

The code for the stars is just insanely interesting

<div class="ratings__stars" style="--rating: 5;" aria-label="Rating of this product is 5 out of 5."></div>

.ratings__stars {
    --percent: calc(var(--rating) / 5 * 100%);

    display: inline-block;
    font-size: var(--star-size);
    font-family: Times;
    /* make sure ★ appears correctly */
    line-height: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: var(--space-5px);
}

.ratings__stars::before {
    content: '★★★★★';
    letter-spacing: var(--star-spacing);
    background: linear-gradient(90deg,
            var(--star-background) var(--percent),
            var(--star-color) var(--percent));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

The code for background images was also a new learning point

background-color: var(--color-White);
    background-image: url(images/bg-pattern-top-mobile.svg),
        url(images/bg-pattern-bottom-mobile.svg);
    background-repeat: no-repeat, no-repeat;
    background-position: top center, bottom center;

CSS Grid code was posiible only because I used the Developer tools to see what line had what number and had to use trial-and-error to set a good positioning value

Useful resources

• For the stars:

  • Article link - This helped me learn what strategies were possible. I finally went with using Unicode characters in pseudo-elements.

• Background images:

  • How to use multiple background images
  • To understand how to position background images
  • How to control background image repeating

• CSS Grid reference:

  • Dave Gray video - start here. Especially important to learn how to use Developer Tools
  • Kevin Powell video - to gain more context and understanding

Author

• GitHub - @AldrinSeanPereira
• Frontend Mentor - @AldrinSeanPereira
• LinkedIn - @yourusername

Acknowledgments

I sincerely thank frontend mentor for this project and for the platform they have provided for learning.