Frontend Mentor - Bookmark landing page solution

This is a solution to the Bookmark 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
  • Useful resources
• Author
• Acknowledgments

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
• Receive an error message when the newsletter form is submitted if:
  • The input field is empty
  • The email address is not formatted correctly

Screenshot

Links

• Solution URL: Github Repo
• Live Site URL: bookmark-app-pink.vercel.app

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• Next.js - React framework
• TailwindCSS - For styles

What I learned

.height__screen {
  height: 100vh;
  height: 100svh;
}

In a particular segment of my code, I implemented a responsive height styling for an element. Initially, I used the standard 100vh unit, instructing the browser to set the element's height to 100% of the viewport height. However, considering the challenge of accommodating the browser tab space on mobile devices, I introduced a unit called svh as a potential solution.

The svh unit takes into consideration the space occupied by the browser tab on mobile screens, ensuring a more accurate representation of the available screen height. To enhance compatibility, I placed 100vh as the primary unit, followed by 100svh as a fallback for browsers that may not support the custom unit. This approach aims to create a visually consistent and responsive layout while accounting for potential variations in browser support.

This part of the code showcases a thoughtful consideration of cross-browser compatibility and a proactive approach to handling specific challenges, contributing to a robust and adaptive design. This video by Kelvin was helpful as well.

Useful resources

• Use these instead of vh - This helped me with choosing the unit to use for my viewport height. I really liked this pattern and will use it going forward.

Author

• Website - Christian Onoh
• Frontend Mentor - @christianonoh
• Twitter - @OnohChristian

Acknowledgments

Special thanks to Toyin for introducing me to Frontend Mentor and being a source of inspiration for this project.