Landing Page Project

This is a project to Udacity's Front End Web Developer nanodegree.

Overview

This is a multi-section landing page with a dynamically updating navigational menu based on the amount of content that is added to the page. The landing page dynamically builds the navigation menu. When a user clicks on a navigation item, the item scrolls you to the appropriate section rather than giving you the default jump. Also, to improve the user experience, the section actively being viewed turns highlighted automatically, to differentiated it from the other ones.

👀 Check it Out:

https://landing-page-jade-seven.vercel.app

Project Intro

• Converting a static web project to a dynamic one: As it's not known how much content will be added to the page through a CMS or an API, the content will be added to the page dynamically.

• Functionalities:

  • Smooth scrolling effect to links
  • Dynamically highlight sections in viewport upon scrolling
  • Dynamically add an active state to a navigation item when a section is in the viewport.
  • Dynamically updating navigational menu
  • Dynamically adds a scroll to top button

• Languages used for this project:

  • Javascript
  • HTML5
  • CSS

• Project rubric:

Check out the specifications here.

Getting Started

Follow the steps below to get the project running.

Clone this Github repository:

$ git clone https://github.com/Janaina-MJ/landing-page.git

Then, open the file index.html.
You will see the landing page in your browser.