Frontend Challenge #6, Social Proof Component

Let me describe my coding journey to build a Social Proof component from Frontend Mentors. Frontend Mentors is a online platform that provide front-end challenges that include professional web designs.

The goal is to build this:

Step 1: Ini…

Let me describe my coding journey to build a Social Proof component from Frontend Mentors. 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



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

Screen-shot of the Layout
Screen-shot of the code, layout only



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



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



Final Outcome

Final desktop screen-shot

You can play with the solution here



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 by CSS Tricks



Thank you for reading!

Thank you for reading my blog. Feel free to connect with me on Twitter or LinkedIn.

You can find the completed code here


Print Share Comment Cite Upload Translate
APA
JC Smiley | Sciencx (2024-03-29T10:28:05+00:00) » Frontend Challenge #6, Social Proof Component. Retrieved from https://www.scien.cx/2021/11/22/frontend-challenge-6-social-proof-component/.
MLA
" » Frontend Challenge #6, Social Proof Component." JC Smiley | Sciencx - Monday November 22, 2021, https://www.scien.cx/2021/11/22/frontend-challenge-6-social-proof-component/
HARVARD
JC Smiley | Sciencx Monday November 22, 2021 » Frontend Challenge #6, Social Proof Component., viewed 2024-03-29T10:28:05+00:00,<https://www.scien.cx/2021/11/22/frontend-challenge-6-social-proof-component/>
VANCOUVER
JC Smiley | Sciencx - » Frontend Challenge #6, Social Proof Component. [Internet]. [Accessed 2024-03-29T10:28:05+00:00]. Available from: https://www.scien.cx/2021/11/22/frontend-challenge-6-social-proof-component/
CHICAGO
" » Frontend Challenge #6, Social Proof Component." JC Smiley | Sciencx - Accessed 2024-03-29T10:28:05+00:00. https://www.scien.cx/2021/11/22/frontend-challenge-6-social-proof-component/
IEEE
" » Frontend Challenge #6, Social Proof Component." JC Smiley | Sciencx [Online]. Available: https://www.scien.cx/2021/11/22/frontend-challenge-6-social-proof-component/. [Accessed: 2024-03-29T10:28:05+00:00]
rf:citation
» Frontend Challenge #6, Social Proof Component | JC Smiley | Sciencx | https://www.scien.cx/2021/11/22/frontend-challenge-6-social-proof-component/ | 2024-03-29T10:28:05+00:00
https://github.com/addpipe/simple-recorderjs-demo