salaamazeezat/landing-page-project

project 2

Project 2

Landing Page

This project is for Udacity's Front End Nanodegree program. HTML and CSS starter code provided by Udacity.

Table Of Contents

1. Description
2. Instructions
3. Index
4. Styles
5. App
6. Launch

Description

This project is built using HTML, CSS, and Javascript. It implements DOM manipulation to create a nav menu dynamically, highlight section when scrolled and to toggle active class.

Instructions

The starter project has some HTML and CSS styling to display a static version of the Landing Page project. The project needs to be converted to an interactive one by modifying the starter code, but primarily the JavaScript file.

Index

This file represents the skeleton of the landing page. In the header tag, you'll find the

element which would need to be populated with an unordered list using javascript. In the tag, an extra section was added to make four sections containing lorem ipsum text that can be easily changed in the future.

Styles

This gives the landing page the look and feel that you see and experience. Starter code provided by Udacity.

App

Here is where the functionality happens. The navigation menu was dynamically built by populating the nav menu with an unordered list. An active state was implemented on both the nav menu and the section to highlight the section currently "active" in the page. It also listens for click events on the navigation menu and then scrolls the page to the appropriate section.

Launch

To open this file, simply clone or download the repository file and open the index.html file in the browser.