iws fall 2012 project 1: the responsive resume

Assignment Overview

This project will be an introduction to standards-based web design. You will be creating two valid, well-formed XHTML 1.0 Strict web pages: your resume or curriculum vitae, and a writer, artist, or professional statement that contextualizes your goals as a writer, artist, or a professional.

Both of your pages will be styled via two stylesheets written in CSS: one for screen (media="screen") and one for print (media="print"). Your screen stylesheet should prepare your pages to be viewed on both computer screens and smartphones with max-width: 768px, using this code:

@media screen and (max-width: 768px)

For this project, you only have to style basic page typography and colors. (You will work on more advanced layout and design matters in Project 2.)

Assignment Specifics

Your XHTML pages must:

  • Use the XHTML 1.0 Strict DOCTYPE
  • Use valid, structural tags (e.g., headers, paragraphs, and lists) and class/id attributes
  • Be hand-written and original; do not use Dreamweaver’s WYSIWYG editor or any pre-made templates
  • Not use tables, except for tabular data (if you have any)
  • Have a meaningful .html name in all lowercase letters.
  • Validate against the W3C Markup Validation Service

Your CSS files must:

  • Use only valid CSS 1 & 2 selectors, properties, and attributes (CSS3 will be covered an option in Project 2)
  • Be loaded into your XHTML pages via the <link> tag in the head area (no inline styles via the style="" attribute or embedded in the head with the <style> tag) using the appropriate media attribute value
  • Must have a meaningful .css file name in all lowercase letters
  • Be styled using a grid-based approach as discussed in our readings
  • Include in the stylesheet for the screen styles specific for computer screens and smartphones with max-width: 768px
  • Be hand-written and original; do not use Dreamweaver’s CSS property dialog boxes or any pre-made templates
  • Validate against the W3C CSS Validation Service

You may download these bare-bones XHTML and CSS files to help you begin.

Project Goals:

  • Develop a clean, effective web-writing style: both in your text content, and in your source code
  • Begin to develop a foundation in XHTML for accurately describing the structure of text
  • Begin to develop a foundation in CSS for describing the typography and color of structural XHTML
  • Begin to work with grid-based layouts and thinking in terms of responsive web design
  • Begin understanding web standards and the importance of valid markup.

Due Dates

  • 9/27 10/4: in-progress draft of all documents due online at start of class and ready to give a 5 minute presentation about progress
  • 10/11 10/18: final documents due and reflection (details below) online at start of class.

The Reflection
Compose two 500-750 word reflections that consider the following:

  • First: what it means to think about writing in terms of coding. That is, consider how the processes of writing and coding a web page have challenged what you have traditionally thought about writing and any relationship you have seen between the processes of writing for print and writing for the web, including the coding.
  • Second: that evaluates your project and your progress in the class to this point. Consider your successes and what you would have changed if you had the time or the skills (avoid discussing adding navigation, sidebars, or other things that were not covered in this project). Discuss where you think you stand right now in terms of your comfort level with coding and writing for the web.

Make each reflection a separate post on your blog and be sure to add links where necessary. You may also find it useful to add screenshots of your site and/or samples of code.

This assignment is informed by a similar assignment created by Karl Stolley.

Leave a Reply

Your email address will not be published. Required fields are marked *

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box