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

Updated after lesson 21 on 2021-04-01

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 2-3 navigable html locations (multiple pages, or multiple scrolling locations on the same page)
• Have a clear mode of navigation among the pages (no dead ends)
• Include a sitewide css stylesheet (i.e. an organized visual theme)
• Include at least one legally useable image, with alt text
• Successfully display locally in a web browser
• For all of the above, argue in the reflection why you did what you did – or what you would do if you had more time
• Use meaningful commit messages that say what’s changing (or even why)
• Credit all assets correctly, including attribution (creator names) where required

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

• Media Files

  • Include playable media: <audio>, <video>, <iframe>
  • Use many images, laid out in a clear pattern (e.g. grid, alternating left/right)
  • Optimize image filetypes, resolutions, and file sizes for faster loading
  • Make or modify your own multimedia content (e.g. graphics, audio, video)
  • Have a system to display other sorts of media files from the browser (docs, pdfs, etc)

• Dynamism

  • Use responsive design (e.g. @media queries, flex-wrap, auto-fill, etc) to dynamically resize elements based on viewport width
  • Animate HTML elements via JavaScript (e.g. image carousel) or CSS (e.g. :hover / :focus events)
  • Add interactivity via JavaScript (e.g. on-click events) or other ways to receive information from site visitors (e.g. mailto: links, forms)
  • Include a loadable alternate stylesheet / theme (e.g. dark mode, high-contrast) if you can explain why it’s helpful in your reflection (e.g. does it make the site more accessible? Is it a print stylesheet?)

• Coding

  • Use Flexbox or Grid (or Float) layouts
  • Use advanced navigation, e.g. drop-down menu, tabs, or sticky nav bar
  • Condense your CSS stylesheet to the best of your ability
  • Use Jekyll (built into GitHub Pages; see Resources page) to minimize repetition in your HTML through templates and variables
  • Use a web framework to build your website (angular, react, etc. but also bootstrap, skeleton, etc, depending on your level)
  • Use JavaScript for anything at all
  • Add comments, whitespace, and other formatting to code to make it more readable

• Audience Engagement

  • Use best practices for accessible design (see W3's Four Principles and the WAVE web accessibility evaluation tool)
  • Design for mobile devices (e.g. with @media)
  • Load site publicly over the internet (e.g. with GitHub Pages)
  • Have a clear, consistent theme for your website’s content
  • Apply visual unit knowledge about fonts and how they convey which message or how certain fonts pair together

• Reflection

  • Make a clear argument in your reflection as to why you met enough of the aspirational criteria to be stretching the abilities you came in with
  • Justify the website's structure for its intended purpose / audience
  • (For all of the above, argue in the reflection why you did what you did – or what you would do if you had more time)

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 23	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.
Tues March 30	Website Portfolio Preview: Content	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). NEW: You may also wish to move these into the README file as you move forward, to make the credits easier to find.
Thurs Apr 1	NEW: Second Preview: Layout	An early attempt at laying out the content you had for Tuesday, so you're not heading into the workshop entirely un-styled. This is still open to radical change. Turn in: Another push of your project folder. Another screenshot of your website and/or your workspace, showing what's new. Optionally a description of what you were going for in the layout, and/or what you're hoping for help with. I know it's just two days since last time, so no worries if you don't have time for this.
Tues Apr 6, by 10:30am to allow async peer review	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 update within README.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 Apr 11, at 11:59pm (target)	Website Portfolio Final Draft	Include the same components as in the earlier draft, but updated.
Tues Apr 13	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 prefer 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 pitt-fuego.github.io/Electrate-Fuego/ for more information!

• NB: The templates assume you don't already have a GitHub account or repository to work in. No worries: when you get to the step on downloading the .zip, you can uncompress the files into your website repo for this class instead of starting from scratch.

And if your parachute is malfunctioning (i.e. you'd like even more specific direction), just let me know! I'm happy to talk things out in office hours.