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
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