mattbruton / NSS-FrontEnd-StaticWeb-InteractiveNav

NSS Evening Cohort 3 - Static Web - Interactive Navigation

HTML Exercise - Interactive Navigation

This is an introductory NSS Evening Cohort 3 exercise that focuses on semantic HTML and includes a minimal amount of basic CSS. Introduced students to basic layout for navigation and basic intro to CSS pseudo selectors.

==============================

• Viewing/Downloading Project
  • To View Hosted Project
  • Installation
  • To Run
• Specifications and Project Information
  • [Languages] (#languages)
  • [Tools] (#tools)
  • [Specifications] (#specifications)

==============================

Viewing/Downloading Project

To View Hosted Project

HTML Exercise - Interactive Navigation

Installation

Clone the repository from GitHub:

git clone https://github.com/mattbruton/NSS-FrontEnd-StaticWeb-InteractiveNav.git

Navigate to the project from the directory it was cloned into:

cd NSS-FrontEnd-StaticWeb-InteractiveNav/

To Run

If you need a command line http server, to install http-server globally:

npm install http-server -g

Then:

http-server or http-server -p XXXX (the X's represent the port of your choice)

You should now be able to open your browser and type localhost:8080 to view the project.

Specs and Project Information

Languages

1. HTML
2. CSS

Tools

1. Git
2. Atom
3. NPM http-server

Specifications

==============================

Create a navigation bar out of an unordered list element, and add the following interactivity.

1. When the user hovers over one of the links, the color of the text should change.
2. When the user hovers over one of the links, the background color of the element that contains the link should change.
3. When the user clicks on one of the links, the element that contains the link should grow in size by 5px on the left and right.

==============================