Frontend Mentor - Clipboard landing page solution

This is a solution to the Clipboard landing page challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the site depending on their device's screen size
• See hover states for all interactive elements on the page

Links

• Solution URL: https://github.com/rmirville/clipboard-landing-page
• Live Site URL: https://clipboard.raynaldm.com

My process

Built with

• Semantic HTML5 markup
• Sass
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

Changing font styles, like font-size and line-height, can undo spacing work between sections. Matching fonts and text-spacing to a design first reduces repeat spacing efforts.

Continued development

In the future, I'll look at best practices for organizing Sass, as well as css naming approaches, like BEM.

Author

• Website - Raynald Mirville
• Frontend Mentor - @rmirville
• Twitter - @rainalldaylong