Assignment 2
For this assignment, we will imagine that you have been contracted to create a web site for a store (a retail store in a mall or something).
Pages and Markup
Your client has told you that their site needs at least these pages:
- a main “front page” for the site;
- examples of products available (with pictures or prices or…);
- contact information and hours.
You can create content and link the pages together as you think appropriate for such a site.
As always, your markup should be semantically meaningful and valid. Again, any content that is not your own must have a source cited.
Styles
You haven't been given much guidance on the appearance of the page and want to create two possible styles for your client to choose from.
The CSS files should be the same on each page so your site has (two options for) a unified look.
As we did in exercise 5, we will use the CSS switcher to let the client see both styles. That means you will need something like this in the <head> of each page:
<link rel="stylesheet" href="style1.css" />
<link rel="alternate stylesheet" href="style2.css" />
<script src="http://cmpt165.csil.sfu.ca/js/style-switch.js"></script>
Requirements
We will be expecting more from your CSS in this assignment, and looking for a reasonable level of difficulty. In particular, you should do some positioning of elements on the page (typically starting with the float or position properties). You should also use a reasonable variety of CSS properties, to demonstrate that you have a decent grasp of some of the properties available.
The two stylesheets must be reasonably different: you should do more than just change some colours or fonts between the two. Try for an overall different layout.
Like your HTML, your CSS should be valid.
CSS Reset
There is no requirement to use a reset style for this assignment, but if you want to, you will run into problems with the CSS switcher: it will only allow one external CSS to be active at a time. If you want to load a reset style, you can load it by adding a CSS import to the start of your .css file:
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css")
This way, you could also use a reset style on one of your .css files but not on the other.
Submitting
Upload all of your files (HTML, CSS, images) to an assignment2 folder in your public_html. Find your site on the web server and make sure everything is still working
Submit the URL of your “front page” HTML to the CourSys activity Assignment 2. We will find your other pages by navigating from there.