EasyCourse: E1
Flexbox Split Navigation Bar (1/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 flexbox 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 Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox

📋 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 with Flexbox.
     (Hint: Try justify-content:space-between; )
   • 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 translate-y transition for the mobile menu by positioning it above the screen, then sliding it down into place after the user clicks on the hamburger icon. Try this with CSS animations and/or GSAP.