Practical

Start with this:

Design a website based on the Works of Shakespeare.
Base it roughly on the Shakespeare pages.
Your site will feature just one of the plays. It will have the full text of the play. The text of the play should be divided into multiple pages.
The home page will be a brief introduction and an index into the play.
Use CSS creatively on the home page.

Then do the following:

The home page will have a drop-down menu using CSS with links into the Acts and links to supporting remote sites.
CSS for proper nouns:
1. The CSS will define a class "nounlink" with a special style of a different colour and font size.
2. The site will highlight at least 10 proper nouns in the text.
3. It will link all occurrences of each word to a remote site (such as the entry for the word in Wikipedia).
4. These links will be of class "nounlink" and have that special style.
The site will work on both mobile and desktop. It will re-size elements and re-organise layout as screen width and browser width change.

MECT/GCDA also do the following:

The site will include an SSI sidebar (not header) on every page.
Put some Shakespeare links in the sidebar.
When you hover on the sidebar it changes colour.
Insert a button to "hide the sidebar". When clicked this uses JS to hides the sidebar and draws a button to "show the sidebar". When that is clicked we are back to where we started.

Write-up:

You will write up a short document about your site:

Show snippets of HTML and CSS (and JS) that you are proud of, and explain what they do.
Do not send me all the code. I can "View Source" to see it myself if needed. Only send me snippets that you want to highlight.
Maximum 3 pages.