Make a web page of the works of some famous writer.
Don't worry. It does not need much content. Just a list of some of the writer's works.
Like the Shakespeare home page.
The works can link to the text on the Internet Archive or Wikisource or some such place.
Put a few other things in the page to make it nice, like images, video, audio.
Please only use public domain or Creative Commons content.
I am not judging you on content, but rather on use of HTML and CSS.
This project will be focused on using HTML plus CSS to achieve styling effects.
Use CSS and HTML to make the page look quite different to the Shakespeare page,
and different to other students' pages.
Suggestions could include:
Show and hide sections as the user moves mouse.
Expand and contract menus.
Change colours and style on hover.
Video backgrounds.
Light and dark versions of the page.
Detailed and summary versions of the page.
A suggestion is to search for great demos of things you can do in CSS and implement some.
One thing I do want is that 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.
CSS must be entirely in a separate file or files.
The page itself just has HTML to define the structure.
Do not use JS.
Do all your styling and effects through HTML and CSS.
We can have many dynamic effects but do them in CSS.
Do not use Web frameworks.
The HTML and CSS should be neat and tidy and edited by hand.
Aim high:
Show me something achieved in CSS
that I never knew could be done in CSS.
Document
Submit a short document (3 pages or under) with it to explain it.
The document will take the major HTML/CSS effects and explain how the HTML/CSS achieves them.
I want details in the document. Sentences like this:
Hover moves the div because of this section: "div.class:hover" which does: "transform: translateY"
I want details. Actual relationship between CSS code and the effect on the page.
But only for the important and unusual effects. No need to document the straightforward and obvious parts of the CSS.
Include snippets of the important code in the document.
No need to submit all the code.
It is client-side, so I can "view source" to see the code.