It's a multi-section landing page. Often times, we don’t know how much content will be added to a page through a CMS or an API. To circumvent this problem, we can dynamically add the content to the page.
The starter project has some HTML and CSS styling to display a static version of the Landing Page project. You'll need to convert this project from a static project to an interactive one. That will require modifying the HTML and CSS files, but primarily the JavaScript file.
To get started, open js/app.js and start building out the app's functionality
For specific, detailed instructions, look at the project instructions in the Udacity Classroom.
To open this project locally, download the project then open index.html
I used many ES6 methods & some Jquery, i used
arrow functionsconst & letdeclarationIntersectionObserver
These thing are working with the latest browsers except IE 11, IE 10.
Almost all changes have happened in the js/app.js file & some few changes in index.html & very few changes in the styling css/styles.css
- Built A dynamical navigation bar based on the number of sections that be hidden while not scrolling.
- Designed an active state for section and its navigation bar element.
- When clicking an item from the navigation menu, the link should scroll to the appropriate section.
- Designed a scroll to top button on the page that’s only visible when the user scrolls below the fold of the page.