Frontend Challenge #6, Social Proof Component
Tags: webdev, beginners, codenewbie, challenge
Published: 2021-11-22 01:38:45

Let me describe my coding journey to build a Social Proof component from [Frontend Mentors](https://www.frontendmentor.io/home). Frontend Mentors is a online platform that provide front-end challenges that include professional web designs.

The goal is to build this:
![social proof desktop preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rq0rfuw0yz4tfx4ai2yu.jpg)

## Step 1: Initial Layout Responsive Design
The first coding hurdle was setting up the HTML & CSS to create the initial layout and then testing if it flowed decently between mobile and desktop as intended. 

My first decision was deciding between CSS Grid, Flexbox, or a combination of the two. Looking at the given design, the different regions of content had a natural flow from mobile to desktop. So, I only need Flexbox. If the layout had massive changes  or swap places, then CSS Grid would have been a better tool

 
My tip to anyone is use background colors to visually show specific layout areas. 

*GIF of responsive layout*
![GIF of initial layout responsive design testing](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xyfkvlaxtzcilfawpt9t.gif)

*Screen-shot of the Layout*
![Screen-shot of the code, layout only](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fup612adfxovudepbtl9.PNG)

## Step 2: Focus on Content Placement
The next step was to slowly add in all content with relevant HTML tags, no styling. The idea is to purely focus on content placement and using the right HTML tags.

*Screen shot of app in development, no styling*
![Screen shot of content, no style](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sidrgh748l49k1zm4rr7.PNG)

## Step 3: Add styles and background images
Now for the long grind of adding styles to each HTML tag, section by section, while checking every few changes for layout responsiveness. 

The one thing I didn't know how to do was to set multiple background images at the same time. 

*Screenshot of CSS code for setting multiple background images*
![CSS Code for background images](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a5zhcff4pkvyor76m9u6.PNG)

## Final Outcome
![Final desktop screen-shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/py3jrec3dlvs5rx6bmu3.PNG)

You can play with the solution [here](https://jcsmileyjr.github.io/Social-Proof/)

## What I learned
* I learned how to add multiple background images at one time. 
* I was able to complete this project in a few hours by following a tried and true process: 

1. Design a responsive layout
2. Build a foundation with HTML
3. Add content
4. Style with CSS, section by section
5. End with functionality (JavaScript & CSS animation/transitions)

This "Ground up" methodology kept me focused, minimized bugs, and follow the mantra "Slow is Fast".   

## Resources Used
1. [Tips on Background Images ](https://css-tricks.com/almanac/properties/b/background-image/) by CSS Tricks

## Thank you for reading!
Obviously, this isn’t a perfect solution. This was a couple of hours of work spread out over the day while doing other things. I can spot several imperfect issues. But I’m a firm believer in learning in public, sacrificing perfection while learning, and each day improving by 1%. 

Thank you for reading my learning journey and if you have tips, please DM me on [Twitter](https://twitter.com/JCSmiley4) or [LinkedIn](https://www.linkedin.com/in/jcsmileyjr/).

You can find the completed code [here](https://github.com/jcsmileyjr/Social-Proof)