CA669 - Web Design and Implementation
Quickest way to find this web page:
Google ca669 dcu
Think about it:
All other ways (starting at the CA site, Googling my name, etc.)
will take much longer to get here.
Just Google module code and DCU and it is the first hit.
- Credit Rating 7.5 - MECT, GCDA
- Credit Rating 5 - MECB
- 50 exam - 50 practical.
- I do not use Loop. I use my website.
Anything you see on Loop would be old modules.
Category 1 - A resit is available for all components of the module
How to contact me
See How to contact me
MECB do a smaller course.
For MECB: Skip the lectures and labs in green.
Come back for the rest.
My notes contain many hyperlinks to background material.
Some students get confused about what is the core course.
The core course is anything that is linked to directly on this front page.
All other links are just background material.
Some figures are from
Andrew S. Tanenbaum's teaching resources.
50 percent of module.
HTML, CSS, JS.
- Do as individuals or in twos. No teams of three.
Do in your own time.
Build it online somewhere. Keep your URL secret until I have marked the project.
Everyone do this:
- Design a website based on the Works of Shakespeare.
You can base it roughly on the
or start from scratch.
- 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.
- The home page will have a drop-down menu using CSS with links into the Acts
and links to supporting remote sites.
- The CSS should set a custom font for the site.
- The CSS should define a class "nounlink" with a special style.
- The site will highlight at least two proper nouns in the text
(such as "Scotland" and "Ireland").
It will link all occurrences of the word to a remote site (such as the entry for the word in Wikipedia).
- These links will be of class "nounlink" and have that style.
- The play will have a Dramatis personŠ
and you will link named people in it to a suitable remote site.
- The site will be enhanced with public domain images.
The site will link to the source
and link to proof that the content is public domain / creative commons.
- The site will embed video from YouTube and at least one other video hosting site.
- 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.
- The site will include at least one "flexbox" layout of side-by-side divs
that will re-organise as window size increases and decreases.
MECT/GCDA also do the following:
- The site will include an SSI header on every page.
The menu should be in the SSI header.
- The SSI header will use JS to include a random Shakespeare-related image.
Pick at least 5 images and randomly include one in the header each time.
- Mouse over the header image will use JS to change it to a random other image.
- Insert a button to "hide the header". When clicked this uses JS to hides the header and draws a button to "show the header".
When that is clicked we are back to where we started.
You will write up a short document about your site:
- Show snippets of HTML and CSS
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.
- Electronic submission through this form.
- The form is designed for a single name and a single student ID.
If there is a team of two:
Put two names in the "name" field.
But just pick a single student ID.
Either student will do.
- Checklist of all the above items.
- 10 percent for some Wow factor - be creative.
- Computer Networks,
Andrew S. Tanenbaum
and David J. Wetherall.
- Library 004.6/TAN.
5th Edition, 2011
- 4th Edition, 2003, also good.
(References in notes are to 4th edn.)
- But not earlier editions.
- HTML5: The Missing Manual,
By Matthew MacDonald
- CSS: The Definitive Guide,
By Eric Meyer, Estelle Weyl
- CSS: The Missing Manual,
By David McFarland
by Tom Negrino
and Dori Smith
- 004 - Data processing, computer science
- 004.6 - Interfacing and communications
- 384 - Communications; Telecommunication
- 384.3 - Computer communication
- 005 - Computer programming, programs, data
- 005.1 - Programming
- 005.13 - Programming languages