rmcg.dev/projects/FrontendMentor/newbie/social-proof-section
Robert McGovern 99b4792200 updated readme and webprojects data to point to challenge 2022-10-04 00:27:26 +01:00
..
css finished desktop version 2022-10-04 00:08:39 +01:00
design finished desktop version 2022-10-04 00:08:39 +01:00
images added base files for the remaining newbiew projects I have 2022-09-07 10:53:05 +01:00
screenshots finished desktop version 2022-10-04 00:08:39 +01:00
.gitignore added base files for the remaining newbiew projects I have 2022-09-07 10:53:05 +01:00
README-orig.md updated readme and webprojects data to point to challenge 2022-10-04 00:27:26 +01:00
README-template.md finished mobile version, or near enough 2022-10-03 18:35:09 +01:00
README.md updated readme and webprojects data to point to challenge 2022-10-04 00:27:26 +01:00
index.html finished desktop version 2022-10-04 00:08:39 +01:00
style-guide.md begain social proof section challenge 2022-10-03 14:43:03 +01:00

README.md

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

Users should be able to:

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

Screenshot

Mobile

Desktop

My process

As usual, I started Mobile first. I setup CSS properties for colors, typography and such. After a bit I realised that the font needed was different from when I originally downloaded the starter kit for this challenge. Which meant that my variables were off.

Once I'd finished the mobile version, I re-arranged the HTML slightly because I forgot to make a top and bottom section.

I had little problem with the alignments for the ratings and reviews, but I did end up waisting an hour chasing desktop alignment with design image. I just couldn't quite nail it.

I also played a bit with where the desktop version should start.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid (only for positioning in the middle of the page )
  • Mobile-first workflow

What I learned

To check for updated files.

Don't chase perfection.

Continued development

Practice practice and practice.

Author