General Instructions
1. Create a Microsoft Word document named "your name - your student number.docx" and enter details into it as described throughout this document. This is the only file you should upload to Moodle as your assignment submission
2. Create a folder in the top level of the public directory of your Webhost account and name it your given name (e.g. jimmy). Upload everything you create in this assignment into that folder
3. All pages you create in this assignment should look professional, be interesting or attractive, be accessible to people with disabilities, follow good web design principles, and separate styling and coding (by using external CSS and JavaScript files)
4. Do not use deprecated HTML
5. You can assume that all viewers of your page will be using an updated browser
6. Only use images that you have permission to use, such as "Creative Commons" images
Specific Requirements
1. Create a business Website e.g. a retail site, a promotional site, or a school site
2. Your site should contain 2 HTML pages - a "home" page and an "contact us" page, a CSS file, a JavaScript file, and an images folder.
3. Use an image for the background of your pages. This image should cover the entire browser viewport and not scroll with the page
4. Give your pages an appropriate title
5. Both pages should be divided into 3 sections - a header, a footer, and a main content area:
a. The header should contain your business logo, your business name, and navigation buttons.
b. A main content area
c. A footer that contains your business' contact details...
6. The navigation buttons should be implemented as CSS buttons. You can use image sprites if you wish, or simply colours and text. Your navigation bar should contain 3 links:
a. "Home" which takes the user to the main page in your site
b. "Contact Us" which takes the user to your site's second page
c. "Sponsor" which takes the user away from your site to another Website of your choosing
7. The header, main content, and footer should sit inside a parent div that always remains in the horizontal centre of the browser window.
8. Use a box shadow around that parent box, and a gradient colour within it
9. Place 2 fictitious advertisements in the main content area of the home page: a. One of the advertisements should be an image (which you can create yourself or download from the Web, making sure you follow copyright laws). The image should be a clickable link that takes the user to your fictitious sponsor's site. This fictitious sponsor can be any existing site such as www.apple.com.
b. The other advertisement should be a video. The video should be implemented using the HTML5
Include a text link under the video to the advertiser's site (not on the video itself).
10. Use JavaScript to animate the image advertisement in a useful way. For example, you could make the image resize when the mouse touches it, or make it move across the page when the page loads.
11. Your Contact Us page should contain your details, plus a HTML form that asks the user for their email address, name, and some feedback. This form should not be fully implemented (that is, you don't need to process the form when the user submits it). When the user presses the submit button they should simply be redirected to your home page
12. Your pages should contain the following html elements at the least: h1, h2, p, img, video, a, ul, li, div
13. Your pages should make use of ID, Class, and Tag rules
14. Place a comment at the head of your HTML, CSS, and JavaScript files that identifies your name and student number
15. Paste into your MS Word document: a. The URL of the folder that contains your site
b. All the code you created and make sure to clearly identify the code with the filename
Requirements
1. Make the header a fixed position block that attaches itself to the top of the browser window. The rest of the page should scroll underneath it
2. Use appropriate HTML5 elements for your page sections - the header, nav, and footer elements
3. Inform Google about your site by setting up a Google Webmaster account and then adding your site. Include a screenshot in your MS Word document that shows you added your site.
4. Include in your MS Word document screenshots showing you passed your HTML, CSS, and JavaScript code through online validators