/Social-proof-design

A challenge to build out a social proof section.

Primary LanguageHTML

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
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Acknowledgments

Overview

  • This is a challenge from [frontendmentor.io].
  • To replicate a card design from Frontendmentor [Social proof section challenge].

The challenge

  • The challenge was to recreate the design, ensuring a proper responsiveness. Users should be able to:
  • experience the responsiveness of the design relative to the kind of device they use to access it, in terms of viewport(device screen width).
  • View the optimal layout for the section depending on their device's screen size

Links

My process

  • Did nothing much here though.
  • It actually didn't require much work. Just had to set up a structure and apply the neccessary Cascading styling.
  • Built the larger screens compatibility first, and then the mobile.

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • CSS Flexbox

Continued development

  • I really love working with CSS flex model, I want to get as comfortable as possible with Grid display too. So, I'll be working with more of Grid now, going forward.

Author