Project 3: Website Portfolio

Your task in this unit is to build a multi-page website using basic html and css files — as opposed to a site manager like WordPress or Wix — along with any media assets you wish to embed. (Any JavaScript or animation you want to add for interactivity is welcome, but above and beyond expectations.) In assigning this, I have two main goals for you:

1. to learn how to manage a composite project made up of multiple interlinking files, and
2. to explore the affordances of the web design stack as a medium, and especially its ability to flexibly render content for multiple audiences or reading priorities.

As with the earlier projects, the selection of content is your choice. One relatively straightforward option for this unit is to stage and present the materials you produced earlier in the term; depending on your needs and interests, however, you can also develop this into a more sustainable and public-facing platform from which to manage your online identities, or a mock-up of demo content you can use to show off your web-design skills. Whatever you choose, you should consider your audience(s) and how they might land on your website, and where you therefore wish to direct their attention and next steps.

As you start planning your composition, consider: What have you been working on, in or out of this class, that you'd like to show the world? What have you made, or done, or pursued? If someone were to search for you without using your name, what terms would they use in the search? What images would represent or resonate with your answers so far? Or: if the site won't focus on you, what group, or thing, or event would you prefer to represent, and in how many ways could you tag or subdivide that?

See if any terms or images come to mind when you think of your subject, then work back and forth from image to word and back.

Generative constraints

This is a starting point; we'll discuss and update in class next week, as has been our usual process.

Baseline criteria For a minimum grade of B, all projects for this unit must:

• Use arrangement, size, color, visual rhythm, and/or contrast to focus viewers' attention.
• Include at least three navigable html locations
• Have a clear mode of navigation among the pages
• Include at least one css stylesheet
• Include at least one legally useable image, with alt text
• Successfully display locally in a web browser
• Argue in reflection why you did what you did

Aspirational inspirations To target (but not guarantee) a grade above a B, the best projects for this unit may...

• Use Github Pages to load publicly over the Internet
• Use Jekyll (built into GitHub Pages) to deploy html templates and variables, which can help minimize repetition
• Use best practices for accessible design to build in features (like screen-reader-only navigation) as checked by the WAVE web accessibility evaluation tool
• Use best practices for responsive design (e.g. @media queries to resize elements for mobile vs desktop viewing)
• Include a loadable alternative stylesheet, a la CSS Zen Garden

Deadlines and products

At each stage, unless otherwise specified, upload (push) your materials to your own copy of this assignment repository. I recommend that you save often, using meaningful commit messages; for best results, please keep your filenames clear, lowercase, and space-free (use hyphens or underscores).

If you are using Box, please nevertheless share a link to your Box folder prominently in your GitHub repository.

date	what's due	expected files
Tues March 3	Website Portfolio Proposal	Thinking in writing about what you'd like to do for this assignment. Post to the appropriate Issue queue with your proposal, suggesting in prose the idea or appeal you're hoping to make. (And if you're stuck, see the "parachute prompts" below.) NEW: Please include at least one photo of a design sketch, e.g. something hand-drawn to show possible layout. In the same post, or as a separate file called ASSETS.md, include a prospective assets chart (see Writer/Designer p. 149) naming what pages, page sections, and images you think you'll need. Please also link to your repository in your post.
Thurs March 5	Website Portfolio Preview	An early snapshot of your progress, to get the gears turning. Turn in: A multifile project folder – probably named "docs," for ease of use with GitHub Pages – containing a combination of html and css, even if it's not well-developed. A static screenshot (.png or .jpg) of your website-in-progress, as rendered in a local web browser (for comparison later to subsequent drafts). (Optionally, take a screenshot of your Atom project setup, too: this can sometimes help me give feedback more quickly.) A plain text (.txt) or markdown (.md) file, explaining in at least 300 words what you're showing us in this preview. Feel free also to ask questions or lay out next steps for yourself! An updated ASSETS.md file, now with any files or fonts you've actually obtained. As you go, add source documentation for any outside sources – and your permission to use them (e.g. licenses, fair use; see Writer/Designer p. 160-165).
Thurs March 19	Website Portfolio Draft	A solid attempt at a complete website. Turn in: A multifile project folder, containing a combination of html and css files At least one more static screenshot (.png or .jpg) of your web pages and source code in progress. Think about what moments are worth remembering as you go: where did you level up, or realize something, or get stuck? An updated README.md file, introducing the Website source code to a new audience. An updated ASSETS.md file – or rename it CREDITS.md – including documentation of any outside sources, and your permission to use them (e.g. licenses, fair use); see Writer/Designer p. 160-165.
Tues March 24, at 11:59pm	Website Portfolio Final Draft	Include the same components as in the earlier draft, but updated.
Thurs March 26	Website Portfolio Reflection	Give a sense of the work you put into your website project and whether it accomplishes what you wanted it to. Turn in: at least 500 words describing the work you did at least two screenshots showing your work in progress at least one photograph of a notecard with feedback that you responded to in revising (and please say how) your own assessment of how you met the baseline criteria for the class, as well as aspirational criteria as appropriate Post your reflections to the course site's Issue queue, to make it easier to embed images. (If you want to then copy the source code into a file in your repo called reflections.md, I won't stop you!)

A Note About Folders

If you look around in the default repo, you'll see that there are already a few subfolders created. These correspond to the folders that you'll be asked to make in the html/css tutorial I'm assigning for homework, and are my suggested way of organizing your space as you make your way through the exercises there.

Note, though, that you will have to create at least one more folder even for the first homework (for the fourth tutorial, "Hello, CSS"). And, presumably, many more (the tutorial has 14 chapters, though maybe not all of you will get that far).

Parachute Prompts

If you find yourself coming up on proposal day and you're not sure what to propose, try one of these:

1. Showcase your classwork. Make a landing page that links to a page containing your soundscape narrative, and another page containing your rhetorical collage. Find a way to make the media files directly accessible to site visitors (i.e. they shouldn't need to download them). As an extension, you might want to showcase work you've produced for other courses, in which case I encourage you to look for (and write about) a learning trajectory or insights that cross your courses.

2. Site redesign. Choose an existing website that you think is kinda boring, or busy, or otherwise in need of a fresh start.^a After thinking about why someone would be coming to the site, and what they might want to do once there, build a mock-up of a new design that better meets those needs and goals. NB: I say "mock-up" advisedly: many live sites on the open web can be fiendishly complicated. While it's a good idea to "View Page Source" to look at the underlying html, you may well want to create your own simplified version from scratch, with just the major block elements you'll use for layout and navigation, and write your stylesheet just for that.

   • ^a Two sites I'm involved with that I know I'd like to redesign, but just haven't had time, are for the Journal of Interactive Technology and Pedagogy and for our very own Composing Digital Media. And there's always the CSS Zen Garden...

3. Electrate Autobiography. My colleague Stephen Quigley has put together a guided exercise in reflecting on your networks of influence that functions as a kind of behind-the-scenes hands-on-code version of an Adobe Spark. Template-style writing prompts are hidden in comments on the html, and the CSS is fully customizable. Have a look at github.com/sjquigley/Electrate-Fuego for more information! NB: I may fork this myself and suggest some modifications - e.g. he has some image display parameters hard-coded in the HTML that I think belongs in the CSS – so let me know if you're leaning this way!

And if your parachute is malfunctioning (i.e. you'd like even more specific direction), just let me know!