Landing Page Project

Table of Contents

• HTML file - static version of Landing page
• CSS file - styles
• JS file - scrypt for dynamic navigation and UX improvement

Descrition

The project is an example of adaptive web-page with dynamically built navigation. When new section is added the navigation bar is being populated with new item. Each menu item has an anchor link to the section at the page and when being clicked scrolls page smoothly towards the appropriate section. When section get close to screen's top it is being highlighted with different background and animations. Also, dedicated menu item is being highlighted when corresponding section is shown in viewport, both, after click or when user scrolls the page. It helps to understand which section is being viewed. Functionality works and looks good both on PC and mobile screens. Done without any frameworks.

Project specisification check (V1)

Project v1

• Interface &Architecture

  Architecture:

    - structure is like requested
    - home page renders when index.html is opened
    - no errors in console
  

  Usability:

   -  based on Chrome dev tools all features are usable across modern desktop, tablet, and phone browsers
  

  Styling:

   - Styling has been added for active states (section and navigation)
  

  HTML Structure:

  - There are 4 sections that have been added to the page.
  

• Landing page behavior

  Navigation:

   - navigation builts dinamycally as an unordered list
  

  Section active state:

    - When section is active I change background and highlight item in the navigation bar
  

  Scroll to Anchor:

   - when clicking an item from the navigation menu, the link smoothly scrolls to the appropriate section.
  

• Documentation

  Readme:

    - the ReadMe file contains non-default text, that is specific to the project and uses correct markdown
  

  Comments:

    - comments are present and explain code procedures when necessary
  

  Code Quality:

   - code is formatted with autoformatter for consistency and meets the Udacity Guide's requirements