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

• Frontend Mentor - Bookmark landing page solution
  • Table of contents
  • Overview
    • The challenge
    • Screenshot
      • Mobile Screen
      • Mobile Screen with expanded navigation menu
      • Desktop screen
    • Links
  • My process
    • Built with
    • What I learned
    • Continued development
    • Useful resources
  • Author

Note: Delete this note and update the table of contents based on what sections you keep.

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

Mobile Screen

Mobile Screen with expanded navigation menu

Desktop screen

Links

• Solution URL: Github Repo
• Live Site URL: Bookmark Landing Page

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• TailwindCSS

What I learned

I was able to learn to use Tailwind custom class utilities to design the user interface.

Continued development

One area I think I would like to explore is the use of Tailwind for dark mode functionalities.

Useful resources

• Tailwind Official Docs - Going through the docs helped me explore a lot of options I didn't know I have when implementing a design or when I needed to use a class utility and didn't know the correct syntax.

Author

• Website - Github
• Frontend Mentor - @mighty-odewumi
• Twitter - @da_gr1ntch