Web Design and Development
DART/ENG 230

Final revised websites are due on-line as of Tuesday, December 11. Send me an e-mail with your URL (e.g. http://www.lasalle.edu/~jonesj1/website/index.html), and telling me where the form, animated GIF, JavaScript and CSS3 elements are. The goal of these sites is for them to be unique and worthwhile, with content of at least 300 words based on (1): in-depth treatment of an approved topic of your choosing OR (2: recommended for DArt majors) your portfolio as a digital artist or other professional (if it is your portfolio, you might include a page or two on topics you are currently working on).

Topics that work for option (1) well are ones that you know a lot about, which can mean a game, hobby, sports or entertainment figure that you know well, OR a particular slice of history or popular culture that you are into. When I grade these I’ll look to see if the site is enjoyable, worthwhile and unique.

First, correct or finish items from your site that were not correct or complete previously. That might include things such as making all text make sense, correcting typos and grammar, testing all the links and images when the site is online, optimizing images, making all pages share the same navigation, finishing the form if you started one, removing extraneous code, putting code in the proper section of the page skeleton, doing all design (bold, etc.) in the CSS, removing target="blank" from internal links, fixing alignment and proximity problems, quoting all attrubute values, specifiying a default font-family in the CSS font stack, closing tags, giving credit to all sources of images, scripts, videos and text, and so on. In the end, your site must (have):

• Have an HTML5 doctype and <meta> tags with XHTML-standard code
• Use linked CSS that you wrote with <div> tags, HTML5 tags (e.g. <header>), and position: or float: or display: flex to create a site with at least 5 pages and,
• Include at least 5 still optimized images and,
• At least 5 absolute links (to other websites) related to your topic
• Have relative links for site navigation
• Good use of typography including contrast in type faces, color, size as appropriate. All type formatting (and layout) must be done in CSS, with either an embedded or linked style sheet
• Use padding: and margin: rather than <p> or <br /> for spacing
• Colors chosen with an eye toward an aesthetically pleasing color scheme
• A mailto: link
• Site creator, with © (see HTML and CSS pp. 193-194) and date acknowledged
• Indication on the site of sources for all images (graphics and photos) audio or video files, scripts (JavaScript/jQuery), CSS modules, and information/text
• Have a working form with HTML5 attributes that is aligned in columns
• Have an animated GIF that you make (not from a service)
• Have some elements on the site affected by JavaScript, jQuery or CSS transitions/animations
• Have at least two CSS3 techniques
• Have at least one component built with flexbox (display: flex) or Grid (display: grid)

Remember to:

• Make site consistent
• Make the purpose of the site and of navigational devices clear (labels)
• Use design principles so that pages are aligned, balanced, proper proximity, have clear proportion, rhythm and contrast/harmony
• Make navigation predictable and redundant where necessary
• Consider monitor resolution
• Consider browsers. Site should work in Chrome and should be tested in Edge, Safari or Firfefox.
• Make the content grammatically and mechanically correct

---

Home | Assignments | Resources | Syllabus | Weekly

Site maintained by John Beatty