Frontend Mentor - Intro section with dropdown navigation solution

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.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

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

Screenshot

Active/Hover states

Links

• Solution URL: (https://github.com/zaidsidd360/snap)
• Live Site URL: (https://zaidsidd360.github.io/snap/)

My process

Built with

• Flexbox
• Mobile-first workflow
• React - JS library
• Tailwind CSS - For styles

What I learned

I learned how you can add different utility classes to elements using a ternary operator when some state changes.

import { useState } from "react";

const foo = (props) => {
  const [bar, setBar] = useState(false);
  return (
    <div className={bar ? "pl-3 text-medium-gray" : "hidden"}>
      {props.value}
    </div>
  );
};

Also, for some reason, tailwind doesn't have class chaining at breakpoints.

So instead of doing something like this

<div className="md:(w-full h-full flex flex-row-reverse)">foo</div>

you have to add the md: breakpoint prefix to every class like this

<div className="md:w-full md:h-full md:flex md:flex-row-reverse">foo</div>

Useful resources

• Kevin Powell - Hats off to this guy, best CSS instructor in the game. A must watch for every FE developer.

Author

• Frontend Mentor - @zaidsidd360
• Twitter - @zaidsidd360