Front-End-Web-Developer-Nanodegree

Project 2: Landing Page

Udacity Front End Developer Nanodegree Program

This project aims to give real-world scenarios of manipulating the DOM. The functionality will be using serve two purposes: to prepare for appending dynamically added data to the DOM, and to show 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.

Requirements

This project requires 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. This project was evaluated by a Udacity code reviewer according to the Personal Blog Website project rubric. Rubric for detailed project requirements prior to submission.

Developement Strategy Used :speech_balloon:

• Linked app.js
• Build out your HTML and at least 3 content sections.
• Build the navigation menu.
• Add functionality to distinguish the section in view.
• Add the functionality to scroll to sections.
• Refactor
• Add additional sections to your HTML document.
• Test the performance.
• Suggested tasks:
  • Add an active state to your navigation items when a section is in the viewport.
  • Hide fixed navigation bar while not scrolling (it should still be present on page load).
  • Add a scroll to top button on the page that’s only visible when the user scrolls below the fold of the page.
  • Update/change the design/content.
  • Make sections collapsible.

Architecture

The project have a structure like the one shown below. App successfully renders a home page with clear design and functionality added when index.html is loaded in the browser. No errors displayed in console.

css
- styles.css    
index.html
js
- app.js
../README.mdn

Technologies Used

• Html
• Css
• JavaScript

Results

Landing page designed and built from using template produced by Udacity: ‘refresh-2019’ clone branch on Github.

Preview Links

Landing Page preview links are active. From generated link you can view active Landing page.

• Landing Page: Index