Udacity Front End Nanodegree - Landing Page Project

This landing page project is submitted to Udacity for reviewing purposes.

1. Program Languages

HTML, CSS and Javascript.

2. File Structure and Purposes

• index.html - landing page HTML structure
• README.md - documentation
• .gitignore - git ignore file
• css
  • style.css - style: main styling file
  • grid.css - style: main grid
  • top.css - style: landing top call-to-action section
  • quotes.css - style: quote sections
• js
  • app.js - interaction Javascript codes
• images - image folder

3. Javascript - Interactive Functions

• Fixed Navigation Background Color - change the navigation background color before and after reaching the top of the device screen
• Dynamic Navigation List - auto navigation link input from the extraction of quote category dataset
• Active Navigation Link & Quote Section - create the appearance of active menu link and section
• Responsive Menu Button - click the button to show or hide the mobile dropdown menu
• Return to Top Button (return) - click the button to return to the top of the device screen
• Return to Top Button (show/hide) - the button is shown/hidden based on scrolling position

4. Code References

• MDN Web Docs
• w3schools
• CSS Tricks

5. Installation Guide

• Download the zip file.
• Unzip it from the desktop.
• Click the index.html file to run the website.

6. Live View

• Golden Quotes

7. Author

• Susan Siow

8. Inquiries

• For any inquiries, please do not hesitate to reach me at LinkedIn.