EasyCourse: E1
Grid Grouped Navigation Bar (3/5)

👤 Client Story:

Our design studio needs an updated website. The previous navigation bar was cluttered and not fully responsive, so we would like a redesign from the ground up. Please be sure the final design is fully mobile responsive, and that our "Contact" button is the primary focus. We're in the process of updating the logo too, so feel free to use a substitute of your choice.

Can you build a robust navigation bar?

🚀 Summary

This project will help you practice CSS grid principles and requires an understanding of the box-model for padding and margin. Additionally, this easy level project includes mobile-responsive challenges and a CTA (Call to Action).

📗 Recommended Pre-study

Visual Hierachy
https://www.canva.com/learn/visual-hierarchy

Javascript Class Toggle
https://www.w3schools.com/howto/howto_js_toggle_class.asp

CSS Box-model
https://css-tricks.com/the-css-box-model

CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid/

📋 Project Requirements:

Goal: Build a fully functional mobile-responsive navigation bar for a minimalist website.

1. HTML/CSS:

   • Maintain space between the outer edges and the internal elements.
   • Split the links into three groups with Grid.
     (Hint: Try 1fr on each group for even spacing )
   • Center all items in the Y-direction (vertical axis).
   • Maintain even spacing between the links.
   • Emphasize the "Contact" link.
   • Add hamburger menu icon for mobile screens.
     (Hint: Try a media query with display:none; when necessary)
   • Hide the desktop links on mobile screens.
   • Create a mobile menu (full-screen column of links) for mobile screens.
   • Add a close ("x") icon inside the mobile menu to close it.

2. Javascript:

   • Open the mobile menu when clicking on the hamburger button.
   • Close the mobile menu when clicking on the close button.
     (Hint: Toggle a class with display:none; on the menu.)

⚠️ Challenge

Animate a opacity transition for the mobile menu by displaying the menu then fading from 0 to 1 after the user clicks on the hamburger icon. Try this with CSS animations and/or GSAP.