Landing Page Project

Table of Contents

• Introduction
• Project Summary
• What will be done
• Objective
• Try It

Introduction

This project requires you to build a multi-section landing page, with a dynamically updating navigational menu based on the amount of content that is added to the page.

• There is a UP button that appears when the user scrolls down to ease get header again.
• Active section differ from the others sections which show in UI moving balls and background colors.
• Used HTML, CSS and JavaScript

Project Summary

This project aims to give you real-world scenarios of manipulating the DOM. The functionality you will be using serves two purposes: to prepare you for appending dynamically added data to the DOM, and to show you how javascript can improve the usability of an otherwise static site. This project barely touches the surface of what is possible, but it does use some incredibly common events, methods, and logic.

What will be done

You will be building 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. We will be demonstrating this with the navigation menu. Additionally, dynamically building the navigation is a great precursor to understanding the virtual DOM which you will experience when you begin working with JavaScript frameworks.

To improve the user experience, the section actively being viewed should be differentiated in some way. Additionally, when a user clicks on a navigation item, the item should scroll you to the appropriate section rather than giving you the default jump.

Hide fixed navigation bar while not scrolling (it should still be present on page load), and Add a scroll to top button on the page that’s only visible when the user scrolls below the fold of the page.

Objective

combining your skills in HTML, CSS, and JavaScript into a large project. Aside from solidifying your skills with these three technologies, you’ll discover how best to combine them in a complex application.

Try It

You can try it on codepen.io from this link, Or by doing this steps:

• Clone the repo from here

  git clone https://github.com/omarhesham2/Front-End_Web_Development_Professional_Nanodegree.git

• Open index.html file in Google Chrome , Firefox or any other browser
• Enjoy :)