#wdds23 Responsive, Accessible Portfolio Assignment

Assignment Overview

This project will be an introduction to standards-based web design. You will be creating one valid, responsive, accessible, clean-coded HTML5 web page—a portfolio page that contains a writer, artist, or professional statement (based on your Why, How, and What statements) and includes at least 2 portfolio items with descriptions and technical information. The web site human-centered design features should be based on your design persona.

Your portfolio will be styled via ONE stylesheet written in CSS, which will prepare your pages to be viewed on three devices—cell phone, tablet, 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 */
@media screen and (min-width: 1024px) /* computer widescreen view */

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: Experimentation
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.

Preparing Your Files

To get started, you will need to have the correct files. To do this, we will be using some templates that I have created for you. Please follow these steps deliberately and carefully. A printed version of these steps as a checklist can be downloaded at: responsive-portfolio-steps-s23.docx

  1. Save your current portfolio.html as portfolio-old.html.
  2. Save your current main.css as main-old.css.
  3. Create a new file and save it as portfolio.html. (You can save over your portfolio.html file because you have portfolio-old.html.)
  4. Click on html-template and copy that code into your new portfolio.html file.
  5. Create a new file and save it as main.css in your styles folder. (You can save over your portfolio.html file because you have portfolio-old.html.)
  6. Click on css-template and copy that code into your new main.css file.
  7. Open your portfolio-old.html file and copy your content code and your stylesheet code into the new portfolio.html file. Make sure to put it in the correct locations. Pay special attention to pasting in to the <head></head> area:
    1. the line that connects portfolio.html to main.css
    2. the GoogleFont line(s) of code
  8. Open main-old.css and copy your styling code into the computer section of your new main.css file.
  9. Upload your new portfolio.html and main.css files to the server.
  10. Use a HARD REFRESH from now on when refreshing your website in Firefox:
    1. Mac: SHIFT + COMMAND + R
    2. PC: CTRL + F5

Assignment Specifics

Your portfolio page must:

  • contain a writer, artist, or professional statement based on your future endeavors-related Why, How, and What statements composed in and for class
  • contain at least 2 portfolio items that are directly connected to your chosen future creative or professional field
    • try to avoid video at this time, but if video is your primary medium let me know and we’ll move up that discussion
  • contain title, description, and relevant technical information for each portfolio item, such as
    • the software and/or hardware used (such as the camera and editing software)
    • any camera settings that were used
    • creation date
    • any custom pallets or shortcuts you created for the project (such as Lightroom presets)
    • a link to download a PDF version of it (if applicable)
  • be informed by your design persona

Your HTML5 page 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 clean-coded
  • Must have web-based GoogleFonts included using their supplied HTML embed code;
  • Include accessibility features, such as ALT and TITLE elements on images and links, subtitles or transcriptions to all videos, and so on
  • Validate against the W3C Markup Validation Service

Your CSS file must:

  • Use only valid CSS 1 & 2 selectors, properties, and attributes (CSS3 will be an option in Project 2);
  • Must have a meaningful .css file name in all lowercase letters;
  • Include media queries for specific layouts for cell phones (320px), tablets (768px), and computer screens (1024px);
    • at the 1024px width, the portfolio items 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/20 in-progress draft due prior to the start of your individual conference
  • 3/31: draft 2 due prior to the start of your individual meeting
  • 4/6: final draft and reflections (details below) due by 11:00pm.

The Reflections

Compose two 350-400 word reflections that consider the following:

  • First: Evaluate 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.
  • Second: Reflect on the aesthetic choices you made in your Design Persona and what you think about them now that you see them live on your website. Address the fonts and the colors. If you have already made changes from your Persona to what is on your site discuss why and what you think about those changes. If you are planning on making changes, discuss why, as well.

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