Project 2 of the Udacity Front End Development Nanodegree. From the course:
"This project requires you to build a multi-section landing page, with a dynamically updating navigational menu based on the amount of content that is added to the page."
For this project I used the starter HTML and CSS files provided by Udacity and transformed this static page into an interactive one.
I implemented the following features/made the following changes:
- The navigation is built dynamically as an unordered list
- When scrolling, current section is highlighted on the page
- When clicking a link, it will scroll smoothly to the right section
- In the navigation bar, the link of the current section is highlighted and a ⭐ is added to the link text
- Using flexbox, I changed the layout of the navigation bar for small screens (mobile)
- I changed the existing background gradient colors
https://elinej.github.io/landing-page/
In addition to everything I learned from the course materials, I referenced the following pages to create my project.
- CodeGuage: Scroll Event
- Stackoverflow: Get element by href
- MDN: Element.scrollTo()
- uiGradients