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.

To be updated after lesson 19

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
• Credit all assets correctly, including attribution (creator names) where required
• 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)

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)
  • 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, explain in the reflection why you did what you did – or what you would do if you had more time)

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.

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 in 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). You can create these new folders directlly in VS Code by right-clicking in the sidebar where the other folders already exist. (Other text editors probably have similar affordances.)

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 second page containing your soundscape narrative and a third page containing your rhetorical collage. Work with semantic html 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 set of insights that tie your courses together.

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 Writing About Writing Standing Group (WAW-SG) of the Conference on College Composition and Communication (CCCC), 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 https://github.com/Pitt-Fuego/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.