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
- Specifications and Project Information
- [Languages] (#languages)
- [Tools] (#tools)
- [Specifications] (#specifications)
==============================
HTML Exercise - Interactive Navigation
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/
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.
- HTML
- CSS
==============================
Create a navigation bar out of an unordered list element, and add the following interactivity.
- When the user hovers over one of the links, the color of the text should change.
- When the user hovers over one of the links, the background color of the element that contains the link should change.
- 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.
==============================