Project 3: Website Portfolio

Your task in this unit is to build a responsive 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 you want to add for interactivity is 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 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 html pages.
• Include at least one css stylesheet.
• Include at least one image, with alt text
• Have a clear mode of navigation among the pages
• Argue in reflection why you did what you did
• Successfully display locally in a web browser

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
• Use best practices for accessible design to avoid errors and build in features as checked by the WAVE web accessibility evaluation tool
• Include a complete 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 Mar 5	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. 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 Mar 7	Website Portfolio Preview	An early snapshot of your progress, to get the gears turning. Turn in: A multifile project folder, 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.) 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).
Tues Mar 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 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.
Sun Mar 24, at 11:59pm	Website Portfolio Final Draft	Include the same components as in the earlier draft, but updated.
Tues Feb 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).