Intro section with dropdown navigation solution

Frontend Mentor Challenge

View Demo · Report Bug · Request Feature

This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Links

• Solution URL: Intro section with dropdown navigation (React + Tailwind + Dark mode) (React + SASS) | Frontend Mentor
• Live Site URL: https://intro-section-with-dropdown-navigation-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 relevant dropdown menus on desktop and mobile when interacting with the navigation links
• View the optimal layout for the content depending on their device's screen size
• See hover states for all interactive elements on the page

My process

Built with

• React
• React Hooks (useState, useEffect)
• 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.