Landing Page Project

(Udacity & Egypt FWD Professional Front-End Web Development).

Table of Contents

• Project Title
• Table of Contents
• Installation & Usage
• Development
• Description
• Resources
• Acknowledgement
• Contribute

Installation & Usage

• To install the project, You can download it as a ZIP file then unzip the file.
• To view the code, open the files with a text editor like Visual Studio Code.
• To run the page, open the HTML file with a browser.

Development

Languages

• HTML
• CSS
• JavaScript

Version

• JS Version: ES2015/ES6
• JS Standard: ESlint

Structure

• css/styles.css
• index.html
• js/app.js
• README.md

Description

• This project is a responsive multi-section landing page, with a responsive navigation bar built dynamically based on number of sections existing in the page.

• When clicking an item from the navigation bar, the link performs a smooth scrolling to the appropriate section instead of the default jump.

• The section which is in the viewport becomes active by performing some animation to the section and heighlighting its link in the navigation bar.

Resources

https://developer.mozilla.org/en-US/docs/Web/CSS/@media/hover

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Acknowledgement

EgFWD online community

Contribute

The starter code is obtained from udacity and developed by me "Hoda Gamal".