Frontend Mentor - Intro section with dropdown navigation solution

This is a solution to the Intro section with dropdown navigation challenge on Frontend Mentor.

Maaan this was a wild ride! Never thought making a navbar would be soo dificult, i tried my maximun not to "cheat" but exploring MDN docs was interesting, learn a couple of things!

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development

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

Links

• Solution URL: click here!!

My process

So, i usually breakdown the mockup ui into components and then start to make changes to them one by one. The first was the navbar and by far wich took the longest to make, lmao. It has two sections, the site icon and the links, i grouped the links thogeter so it would be easier to style in the responsive version. Made some cute little buttons too. The last but not the least was the main content, that i tried to avoid using grid and venture across flexbox.. it was a challange. Getting the hero image not to outsize and overflow took some time, but i finally could divide the main content between CTA and Hero.

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Some little animation
• sidebar dropdown

What I learned

I learned a couple of things here:

• How to style a nice and responsive navbar.
• Using css fitlers to make a nice and colorful detail.
• Acessiblity issues regarding some bad pratices in responsive's layouts