Frontend Mentor - Clipboard landing page solution

This is a solution to the Clipboard landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

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

Screenshots

• Desktop - (1440px)

• Tablet - (1024px)

• Mobile - (375px)

Links

• Solution URL: View
• Live Site URL: View

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• BEM - Naming Convention
• Sass/Scss - Pre-processor
• Vite - Development Enviroment
• AOS Library - For Scroll Animations

What I learned

This project helped me to understand grid layout better and how Grid can be used in simple layouts to reduce extra lines of codes. Grid gap can be used instead of margins to space-out elements and grid makes positioning of elements super easy.

  /* centering a div is a piece of cake */
  .parent {
    display: grid;
    place-items: center;
  }

  <!-- center the child -->
  <div class="parent">
    <div class="child"> <!-- I am now centered --> </div>
  </div>

The design of the site is very plain and simple so I wanted to use some scroll Animations, hence I installed the popular 'Animation on Scroll' aka the AOS Library. I installed the Library via NPM and used the given javascript codes to use the animations on my HTML file, which was super easy to do.

Although some animations were causing horizontal scroll bar to appear, so I had to implement some javascript to add an overflow-X: hidden style on the animation's container/parent block.

Continued development

I want to learn more about the 'implicit' behaviour of grid cells and how to make them responsive, as currently the site looks weired when viewed from desktop mode on a smartphone.

Useful resources

• CSS Grid - This helped me to understand the basics of how grid works.
• Use Grid instead of Flex - This is an amazing video by the 'Css King' Kevin Powel where he discusses, why one should use Css Grid instead of Css Flexbox.

Author

• Github - @snehamoybag
• Frontend Mentor - @snehamoybag
• Instagram - @snehamoy_yt