Udacity Nano Degree Landing Page Project

Table of Contents

• Introduction
• Goals
• To-Do
• Content

---

Introduction

The starter project had some HTML and CSS styling to display a static version of the Landing Page project. I basically had to transform it from a static project to an interactive one. It required modifying the HTML and CSS files, but was mainly focused on building the JavaScript file from scratch.

This is my 2nd draft so far, because my 1st one was the very first trail in building a JavaScript file. However, it didn't quite run the way I thought it would.

Although I'm still facing some issues, I've decided to upload the 1st proper draft and commit all changes as I code my way till the end.

Goals

The main goal of the project is to have a landing page with static content, then manipulate it using JS & DOM to finally have a dynamic page. The following are the requirements to pass the project with some non-essential extras at the bottom.

Interface and Architecture:

• The app must successfully render a home page with a clear design and functionality added when index.html is loaded in the browser. No errors should display in the console.
• All features are usable across modern desktop, tablet, and phone browsers.
• There should be at least 4 sections added to the page.

Landing Page Behavior:

• Navigation should be built dynamically as an unordered list. Starting with an empty ul and dynamically build a navigation using Append, appendChild, and innerHTML.
• It should be clear which section is being viewed/active while scrolling through the page.
• When clicking an item from the navigation menu, the link should scroll to the appropriate section.

Documentation:

• The ReadMe file should replace the given text on the README template with specific information for this project. It doesn’t have to be thorough but should have some basic information, eg. project description, usage, dependencies, and use correct the markdown syntax.
• Comments are present and effectively explain longer code procedures as described in the Udacity JavaScript Style Guide - Comments
• Code is formatted with consistent, logical, and easy-to-read formatting as described in the Udacity JavaScript Style Guide - Code Formatting

Non-Essential Extras:

• Add an active state to the navigation items when a section is in the viewport.
• Hide fixed navigation bar while not scrolling (it should still be present on page load). Hint: setTimeout can be used to check when the user is no longer scrolling.
• 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.

To-Do

• Build navigation bar with vanilla JS, and have sections\articles auto-populate once added to the page.
• Add active state to sections/articles.
• Auto-scrolling when item is clicked in navigation bar.
• Smooth scrolling
• ReadMe File/Documentation.
• Add active state to navigation bar.
• Hide navigation bar while not scrolling.
• Scroll-to-top button.
• Update/change design.
• Make sections collapsible.

Content

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