This landing page is a project created for Udacity's Front-End Web development Nanodegree. A landing page is a single web page that appears in response to clicking on a search engine, marketing promotion, marketing email, or an online advertisement.In this case the page is dynamic. This landing page creates an interactive navigational experience for the user.
Yes, the navigation bar you see is created "dynamically" based on the sections of the page. This sections are in the HTML and if we add a new section it will automatically appear in the navbar. Learning how to do this can be particularly useful when we work with content management systems or APIs and we are uncertain of where the items will be.
This was done with JavaScript by using a ForEach loop that loops through every section present in the HTML and for each section creates a list element. This list element is added to an empty navigation bar that was already defined as an unordered list element. Div elements are created and also appended to each list element so that we can add a link according to sections. This link is added listening to the click event and using the scrollIntoView() function to scroll into the section of the navigation bar that we click. Additionally, when a section is in the viewport a class called "active" is added which distinguishes the section in view and at the same time highlights the section in the navigation bar.