Frontend Mentor - Social proof section solution

A collaborative project.

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
  • Screenshots
  • Links
• Our process
  • Built with
  • What we learned
  • Continued development
  • Useful resources
• Authors

Overview

The challenge

The challenge is to build out this social proof section and get it looking as close to the design as possible.

Users should be able to:

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

Screenshots

Screenshot of the part coded by AllanKirui.

Screenshot of the part coded by VeronikaPalto.

Screenshot of the general overview of the page.

Screenshots of the page in tablet view.

Links

• Solution URL: Frontend Mentor
• Live Site URL: Netlify

Our process

Built with

• Semantic HTML5 markup
• CSS
• Desktop-first workflow
• Inkscape - Inkscape: Open Source Scalable Vector Graphics Editor

What we learned

• [AK] - Feedback from Veronika about the part of the project that I coded has made me think more about building for scalability. I was able to implement her suggestions on making the styles for the ratings section applicable to any number of items in the section.

Continued development

• [AK] - I want to build future projects with scalability in mind, and also, to focus on making the projects efficient in terms of performance.

Useful resources

• [AK] - I use Inkscape SVG Editor all the time when I'm working on any web project. For this project, I loaded the project designs into Inkscape and used it's in-built tools to figure out the spacing, sizing and positioning of elements throughout the project.

• [AK] - To better understand how I approached coding the project using Inkscape, have a look at this repository I made - Designing and Coding Layouts

Authors

• GitHub - VeronikaPalto
• GitHub - AllanKirui

Back to top