#wdds19 responsive resume assignment

Assignment Overview

This project will be an introduction to standards-based web design. You will be creating one valid, well-formed HTML5 web page that contains your resume or curriculum vitae and a writer, artist, or professional statement that contextualizes your goals as a writer, artist, or a professional.

Your resume will be styled via ONE stylesheet written in CSS, which will prepare your pages to be viewed on three devices—cell phone, tablet, computer—and for a printer, using the following media queries

@media screen and (min-width: 320px) /* mobile phone portrait view */
@media screen and (min-width: 768px) /* tablet portrait view */
@media screen and (min-width: 1024px) /* computer widescreen view */

Please download and use the following templates to help you get started:

This assignment is informed by the following Course Objectives:

Objective 2: Effective Communication
Students will be able to identify and employ a range of effective communication strategies to navigate audience, purpose, and context.

Objective 3: Human-Centered Design
Students will understand and apply human centered design approaches to communicating through digital media.

Objective 4: Reflection
Students will develop their understanding of the important role of reflection during the investigation, design, and communication process.

Objective 5: Risk-taking
Students will know what it feels like to step out of their comfort zones and take risks with their approaches to and understanding of web design.

Assignment Specifics

Your HTML5 pages must:

  • Use the HTML5 doctype
  • UTF-8 character encoding
  • Use valid, structural tags (e.g., headers, paragraphs, and lists) and class/id attributes
  • Be hand-written and original
  • 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 an option in Project 2);
  • Be loaded into your .html pages using HTML5 standards using the appropriate media attribute value;
  • Must have a meaningful .css file name in all lowercase letters;
  • Must have web-based GoogleFonts included using their supplied HTML embed code;
  • Include media queries for specific layouts for cell phones (320px), tablets (768px), and computer screens (1024px);
    • at the 1024px width, the statement and resume must appear side-by-side;
  • Be hand-written and original
  • Validate against the W3C CSS Validation Service

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 HTML5 for accurately describing the structure of text
  • Begin to develop a foundation in CSS for describing the typography and color of structural HTML5
  • Begin to work with grid-based layouts and thinking in terms of mobile first responsive web design
  • Begin understanding web standards and the importance of valid markup.

Due Dates

  • 3/4: in-progress draft of all documents due online at start of class and ready to analyzed in class
  • 3/25: final documents due and reflection (details below) due by 11:00pm.

The Reflection
Compose two 350-400 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 design.

Make these reflections ONE separate reflections.html page linked to from resume.html. 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.

Comments are closed.