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.
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 three devices: cell phone, tablet, and computer using the following media queries:
@media screen and (min-width: 320px) /* mobile phone portrait view */
@media screen and (min-width: 768px) /* tablet portrait view 8 */
@media screen and (max-width: 1024px) /* computer widescreen view */
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.) You may download these bare bones HTML5 and CSS files (.zip) to help you begin.
Your HTML5 pages must:
- Use the HTML5 doctype
- UTF-8 character encoding
- Use valid, structural tags (e.g., headers, paragraphs, and lists) and
- 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
- Must have a meaningful .css file name in all lowercase letters;
- Be styled using a grid-based approach as discussed in our readings;
- 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
- 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.
- 3/2: in-progress draft of all documents due online at start of class and ready to analyzed in class
- 3/3: final documents due and reflection (details below) due by 11:00pm.
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 these reflections ONE seperate 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.