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 above and beyond expectations.) In assigning this, I have two main goals for you:
- to learn how to manage a composite project made up of multiple interlinking files, and
- 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.
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
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 Oct 29 | Website Portfolio Proposal | Thinking in writing about what you'd like to do for this assignment.
|
| Thurs Oct 31 | Website Portfolio Preview | An early snapshot of your progress, to get the gears turning. Turn in:
|
| Tues Nov 5 | Website Portfolio Draft | A solid attempt at a complete website. Turn in:
|
| Sun Nov 10, at 11:59pm | Website Portfolio Final Draft | Include the same components as in the earlier draft, but updated. |
| Tues Nov 12 | 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:
|
If you find yourself coming up on proposal day and you're not sure what to propose, try one of these:
-
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.
-
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...
And if your parachute is malfunctioning (i.e. you'd like even more specific direction), just let me know!
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).