UDACITY - FEND - LANDING PAGE PROJECT

#### A landing page using HTML, CSS and JavaScript

By Nerissa Johnson

Table of Contents

• General Info
• Instructions
• Technologies Used
• Features
• Screenshots
• Setup
• Usage
• Project Status
• Room for Improvement
• Acknowledgements
• Contact
• License

General Information

• Real world scenario of manipulating the DOM with a combination of skills - HTML, CSS and JavaScript. This project appends data and shows the user how JavaScript improves usability. The user learns how to refactor and test (debug) code as they figure out the codes function.
• The landing page consist of multiple sections, that contains content that can be added or removed dynamically. A smooth scroll affect with every click on a navigation item improves the users expierence as each active section is viewed.

• A great use of logic is used. There is no single correct answer when building this project.

• Real world scenario of manipulating the DOM with a combination of skills - HTML, CSS and JavaScript.
• Contains Navagation, Section, Back to Top Button, Scroll and Animation
• Created with Blood, Sweat and Tears. (Weeks of it to be exact!)

Instructions

The starter project has some HTML and CSS styling to display a static version of the Landing Page project. You’ll need to convert this project from a static project to an interactive one. This will require modifying the HTML and CSS files, but primarily the JavaScript file.

To get started, open js/app.js and start building out the app’s functionality

Project evaluated by a Udacity’s Landing Page Rubic.

Meet all rubric requirements, save as a zip file or Github repository link and…

SUBMIT!

For specific, detailed instructions, look at the project instructions in the Udacity Classroom.

Technologies Used

• JavaScript

• HTML

• CSS

• Brain Power - many hours (or should i say weeks) of trying to figure this out!

Features

• Multi-Section Landing Page
• Dynamic Navigational Menu
• 1 Animated Active Section - must be replicated for other secitons

Screenshots

) )

Setup

• Repositiory may be cloned to desktop
• Locate the top level of the directory
• Opeb test.html in browser
• Grab something to drink
• Then sit back, relax and enjoy

Usage

Learn how to manipulate a website using HTML, CSS, and JavaScript. Mainly just have fun learning to code.

Project Status

Project is: no longer being worked on. I need a mental break from all this. Plus, I have other goals to obtain like (next goal: getting my cosmetology license reinstated).

Room for Improvement

Room for improvement:

• Coding
• Scroll speed for Back to Top Button

To do:

• Apply different affect to navigation

Acknowledgements

• Rockwell - My Instructor
• Someone Special to remain nameless. (Just know to meet me at the CourtHouse!)
• Many thanks to Udacity and OneTen!

Known Bugs

• No known issues at this time
• However I saw a catapiller earlier

Contact

Created by @DesignedBy.Blue - contact me, even just to say “Hi!”.

License

For any issues or questions - contact anyone but me. Seriously though, contact me or Udacity.

Copyright (c) Udacity Copyright (c) May 2022 Nerissa Johnson

Project - Landing Page - Udacity

Frontend Web Development Fundamentals Nanodegree Program

Live demo - Landing Page.