Bookmark landing page solution

Frontend Mentor Challenge

View Demo · Report Bug · Request Feature

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.

Links

• Solution URL: Bookmark landing page (React + TailwindCSS) | Frontend Mentor
• Live Site URL: https://bookmark-landing-page-hdez.vercel.app/

Table of contents

• Overview
  • The challenge
• My process
  • Built with
• 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

My process

Built with

• React
• React Hooks (useState, useEffect)
• React hooks form
• Tailwind CSS
• Semantic HTML5 markup
• Flex Layout

Useful resources

• React documentation
• Forwarding Refs in React
• Tailwind CSS

Author

• Frontend Mentor - @melvinaguilar

Acknowledgments

This project uses yarn. If you do not have yarn, checkout installation steps here.

To run the client, you need to run the following command:

yarn

Then, you can run the client:

yarn dev

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.