SuHamza / FEND-Landing-Page

FEND Landing Page Project

Landing Page Project

Introduction

This project provides real-world scenarios of manipulating the DOM, by building a multi-section landing page, with a dynamically updating navigational menu based on the amount of content that is added to the page.

Project Files

• js/app.js contains all the custom JavaScript code to dynamically update the webpage.

• index.html contains the HTML to build the webpage's frontend.

• css/styles.css contains the CSS code to style the webpage's content

Added Functionality

The starter project had some HTML and CSS styling to display a static version of the Landing Page project.

The following functionalities were added to convert this project from a static project to an interactive one:

• Dynamically create a Navigation Menu based on the sections of the page.
• Section Active State: While navigating through the page, the section that is active in the viewport/closest to the top is distinguished from the other sections.
• Scroll to Anchor: When clicking an item from the navigation menu, the link scrolls to the appropriate section.
• An active state is added to the navigation items when a section is in the viewport.
• Added a Scroll to Top button on the page that’s only visible when the user scrolls below the fold of the page.