Skip to main content

Web Unit Criteria and Stretch Goals / Layout

Work to have done (by Tuesday, but with catch-up as needed):

Plan for the day:

  1. Reflective writing on current projects (5 min)
  2. Reflective writing on websites you’ve liked (5 min)
  3. Apply reflections to update criteria (20 min)
  4. Studio: from structure toward layout
    • Reminder about scoping (and screenshots)
    • Set Goals
    • Go forth!
    • Exit note
  5. HW: more tutorialing and second website preview

1. Reflective writing on current projects (5 min)

In your own space – you won't have to share this unless you want to – do a little writing about your website portfolio in progress.
  • What's exciting about it?
  • What's challenging about it?
  • What are you unsure of?

2. Reflective writing on websites you’ve liked (5 min)

Shift now in your writing to think about the websites you navigate every day.

  • What seems to make them easy to get through, to find what you need?
  • What causes frustration?
  • How do you think their structure might be related to their various audiences and their reasons for viewing the site?

Jot down some notes.

EXT: Finished and waiting for others? Start working on two lists: make two quick lists (just about a minute each):

  1. Questions I have about layout (or responsive design)
  2. Things I’ve learned about layout (or responsive design)

3. Gathering criteria (20-30 min)

Primed now by that writing and thinking, I’m going to ask you to get in groups and brainstorm in pursuit of baseline and aspirational criteria for this unit.

Remember to talk to each other about what you value!

3a. Review, comment, and suggest (10 min)

You’re used to this process by now, yes?

Criteria from previous semesters are posted in our shared google doc as a starting point.

In groups at your tables, take 10ish minutes to talk amongst yourselves about what's working, what's missing, and what you'd like to move or modify.

As you reach consensus in your group, add comments or use the "suggestions" feature (click the pencil icon in the top right) to propose modifications or additions. Or ask questions, if you have them! If you prefer, you can also just upvote.

Remember that aspirational criteria are not required, but baseline criteria are. Given the goals of the unit, what should we set as our minimum criteria for full credit? What are some ways we might push beyond that minimum – not merely in terms of quantity, but in terms of quality or challenge level? I really want you to see these aspirational goals as opportunities to stretch yourselves and your skills, not just to do more of the same. Think about what would be new and potentially exciting… but not required for everyone.

EXT: If your group feels finished, skip ahead: read through other groups’ notes, respond to their questions on yours, or start discussing thoughts and questions on how to achieve your personal preferred aspirational goals.

3b. Comment and Discuss in the Doc (15-20 min)

As you finish up, read through the other groups’ notes, collegial replies to their comments in the margins to upvote, ask questions, or propose modifications.

Make sure to loop back to your own comments to see if you’ve picked up anything to respond to.

ALT: If you're joining us asynchronously, please also leave comments, especially with questions or suggestions. You will be held to these criteria, too, so make your voice heard! We won't finalize them until after workshop next week.

EXT: If you finish early, move on to the next section.

I’ll work solo to write up a clean list that reflects your consensus in the comments, while you all work solo (with groupmates on-hand for questions or other feedback) on your projects and any needed tutorials.

3d. Know that you are mutual fonts of knowledge (10 min)

Before you break off into individual projects, share your questions about layout and responsive design (which you may have written down in the EXT above). Use what you’ve learned to try to answer each others’ questions.

Questions your group can’t answer? Post them to the google doc, and I’ll work on posting answers there.

4. Studio: from structure toward layout

Keep working on your projects and/or tutorials. I’m hoping by now you’re starting to get at least the HTML content of at least one page in place on your preview, and you’ve just read up on Grid and Flexbox, so it’s a good time to practice layout!

Reminder of needful things

I’ve said all of this before, but it bears repeating:

  • Beware of scope creep; plan for phased releases.
  • Start by thinking about structure (i.e. HTML before CSS).
  • Let appearances reflect the structure, not vice-versa. You don’t have to accept default styles.
  • If you’re stuck for what to do, CSS-wise, start with some basic spacing.
  • You don’t have to reinvent the wheel. Sometimes programming is like plumbing: find the pieces you need and flow them together.
  • When you’re ready to work on appearances, test CSS rules directly in the browser.
    • Be sure to copy your changes to your text editor for safe keeping (i.e. Atom, by default), or they’ll disappear when you refresh!
    • To make copy/paste easier, click on the source your browser created for your new rules: in Firefox it’s called “inline”, in Chrome “inspector-stylesheet”, in Safari “Inspector Stylesheet.”
If you want a refresher on what any of those things mean, you can find more detail in the last lesson plan.

Set Goals

In the shared google doc, set a goal for today: what do you need to do to level up on HTML, CSS, and resource gathering to move toward your specific project? Note that a Website Preview is due a week from today.

Go forth! And Don’t forget to document your process

Don't forget to save periodically as you go:
  • as a project file
  • as a screenshot, showing your process
  • as a git commit, saying what you've just achieved

Exit note

Before you leave, just as a way for me to check in, I’d like to hear more about what happened today: Did you decide on your navigation? Block out the html? Make some progress on a stylesheet? Work through a tutorial or two (and which)?

Reply to your note in the google doc.

Homework for next time

  • Continue the HTML & CSS tutorial, adding at least Semantic HTML (12) and Web Typography (14). If you’re encountering weird layout intransigence, you may also want to try Advanced Positioning (9).
    • Remember that the main tools for layout now in use are Grid and Flex; you can probably skip the chapter on Float except for particular use-cases (e.g. text that wraps around an image).
    • Email me with any questions, noting that I can help fastest if you include screenshots and links to your site/repo. Better yet, create a New Issue! Then my answer to you can help others, too.
  • Compose and push a second website preview, now adding or updating layout. A full, workshop-ready draft of your website project is due in one week.