CSCI 121 - Lab 8, part 1

Lab Resources

• Brackets - Public domain code editor
• Google Account - Google account
• Google Drive - Cloud document storage

Lab Instructions

This lab will span three (3) lab periods and during that time you will develop a website suitable of a web developer's portfolio. The specification (i.e. what your website must include and techniques to be used for building it) are included below.

1. Start: Using Brackets author a new file named lab8.html.
2. Next: Author an external style sheet named lab8.css and place all style rules within it (none internal in the STYLE block).
3. Specification:
1. Your website must use HTML Layout Elements (header, nav, section, ... footer).
2. Each area of the layout (header, navigation, section, ... footer) should be stylized via the CSS.
3. The header must include an image.
4. The navigation area must include a navigation menu as follows:
• Menu items with links for "Home", "Contact" and at least three other 'pages' (5 total).
• Each menu item should be styled with three different 'states': normal, hovered-over, and selected and it should be obvious when to use which style.
• The navigation area must include a search edit field and associated magnifying glass search icon (or "Search" text in the input field) used for website searching (you do not have to make search do anything at this time, just include the elements).
• When a menu item is selected the 'page' corresponding to that menu item is navigated to ('pages' that will be covered in a future lab).
• The navigation menu may be vertical (on the left) or horizontal (below the header).
5. The footer must include a copyright notice.
6. Following is an example of a website layout:
• 
7. this specification will be extended in future labs...
4. Important notes/hints:
1. Get the basic layout of the website and its various areas working first using float, flexbox, bootstrap or other layout framework as you wish (no tables for layout).
2. The style of each area of the website and the layout must all be dictated by the CSS file.
3. For this lab focus on getting the basics in place. Parts 2 and 3 will extend this lab project in order to add support for multiple pages as well as a functioning search capability.
4. Make sure the final version of the website is "portfolio worthy!"
5. If you wish to share interim progress with the professor:
• Create a folder in your Google Drive named: Lab 8
• Upload the lab8.html and lab8.css files to Google Drive Lab 8 folder.
• Share the Lab 8 folder with thomas.rogers@millersville.edu.