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.
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
- Solution URL: [https://github.com/kebin20/intro-section-with-dropdown-navigation-main]
- Live Site URL: [https://kebin20.github.io/intro-section-with-dropdown-navigation-main/]
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Vanilla JavaScript
- Mobile-first workflow
This project has pushed me to learn how drop down navigation links work. I learnt a lot about positioning (using relative,absolute interchangeably) and learnt using new JavaScript methods such as .match() and .closest() and target data attributes. I also used CSS Grid to help positioning and sizing my elements more effectively.
I will need to get better at laying out my elements, as well as further improving my skills in transform and creating dropdown menus.
- Webdev Simplified - This helped me for the dropdown menu, it gave me a starting point to code out the dropdown menu.
- Frontend Mentor - @kebin20