Unit 1: Working Methods
Week 1. September 2
In Class
  1. Class Overview
  2. "What is internet, anyway"
  3. Inspiration & intros
Assignments
  1. Draw a) the internet as website, b) our classroom as website, or c) your day as website. Use pen and paper. Do this five times. Iteration is key. Upload sketch images to the Assignment Submission Form.
  2. Watch tutorials 1-8. Add at least one question to FigJam.
Week 2. September 9
In Class
  1. Figma recap, questions, and exercise
  2. Share sketch assignments
  3. What makes a website? Click here for examples from class.
  4. Past Harmonic Collection examples: April, Drithi, Sarah, Dance (to find credit), Nisha
  5. Read: My Website Is A Shifting House
  6. Sign up for GitHub and create repository
Assignments
  1. Come up with three directions for your Harmonic Collection. For each, make sure you have the concept in words, a moodboard, and a (very, very basic) example entry sketch. Don't overthink it! Create this in your Figma file. Submit the link to the Assignment Submission Form.
  2. Read Perspectives: Negotiating the Archive by Sue Breakell. Add at least one comment or discussion question to FigJam.
Week 3. September 16
In Class
  1. Reading discussion
  2. Introduction to HTML
  3. CodePen Examples: HTML (1-5)
  4. Share Harmonic Collection Proposals
  5. If time permits: work on assignments
Assignments
  1. Create a real or fictional Wikipedia entry on CodePen (using HTML only). Make sure to use header, link, image, and styling elements.
  2. Within your Figma file, create a new page and label it Harmonic Collection Sketches or HC Sketches. Create (at least one) mid-fidelity wireframe for your first entry. Think about hierarchy and what you want to communicate.
  3. Please submit both the CodePen link for your Wikipedia entry and a screenshot of your sketch to the Assignment Submission Form.
Week 4. September 23
In Class
  1. HTML Questions
  2. Share Homework in Pairs
  3. Watch last third of Graphic Means
  4. Introduction to CSS
  5. Here is the MDN CSS Reference Page
  6. Practice: Adding Custom Typefaces
Assignments
  1. Complete the HTML for Entry 1 in your CodeSpace. Also, add a Google or Adobe typeface to your CSS.
  2. Submit screenshot(s) of your Entry 1 to the Assignment Submission Form . This can be the HTML + CSS or the Live Server preview.
  3. Read The Crystal Goblet, or Printing Should Be Invisible by Beatrice Warde and Drowning the Crystal Goblet. Add at least one comment or discussion question to FigJam.
  4. Optional: Make a digital sketch for Entry 2.
Unit 2: Digital Canvas
Week 5. September 30
In Class
  1. Share Homework (Entry 1 HTML & Type Import)
  2. Go Over Extras in CSS
  3. Spot the Bug!
  4. Type, Briefly & Reading Discussion
  5. Everything Is A Box: The Box Model
  6. Display Property: Intro to Flexbox
  7. Take 5 minutes to write down a question on CSS
Assignments
  1. Complete the CSS for Entry 1 and the HTML + CSS for Entry 2 in your CodeSpace. Use the constraints to your advantage. It’s okay (and expected) if it doesn’t yet match your sketch! Maybe you’ll discover something new. Feel free to be creative within the constraints of what you know.
  2. Submit screenshot(s) of the code and/or prevew of Entry 1 & 2 to the Assignment Submission Form
  3. Recreate one and two in CodePen. using only what we've learned so far. There's no one way. No need to submit, but please be ready to share. Hint: you can do the second one with nested divs.
  4. On the FigJam board, please add a note to the sections, "Something I'd Like to Learn in Styling" and "Something I Don't Understand in CSS." Also add your name at the end so I know you've done it! Sometimes it doesn't show.
Week 6. October 7
In Class
  1. Review / CSS Questions So Far (Ex 1 & Ex 2)
  2. Commiting and syncing CodeSpace to your repository & GitHub
  3. Display, including Flexbox & Positioning
  4. Showcase
  5. Begin worksheet assignment
Assignments
  1. Complete the Entry 3 in your CodeSpace. Make use of your new knowledge of the display & position properties. Commit and sync to your repository (repo). screenshot(s) to Assignment Submission Form
  2. Fork this CSS worksheet and complete it to the best of your ability. Submit the link to the Assignment Submission Form.
Week 7. October 14
In Class
  1. Review: CSS So Far
  2. Flex Exercise
  3. Display & Position Showcase
  4. Debugging in Paris & Work Session
  5. Midterm Rubric & Questions
  6. Review CSS Worksheet
Assignments
  1. Complete the Entry 4 in your CodeSpace. Make use of your new knowledge of the display & position properties. Commit and sync to your repository (repo). Submit repository link to Assignment Submission Form
  2. Prepare for one-on-one midterm conversations.
Week 8. October 21 (Mid-Term Meeting)
In Class
  1. Meetings (not graded)
  2. For reference: Midterm Rubric & Questions
  3. While meetings in progress: work on your entries, up until Entry 5.
  4. Look into: summary & detail (html), input (html), blend-mode (css), and transform (css).
  5. Complete steps 6-11 under "Creating your website." You should have a working link called .github.io/harmonic-collection by the end of the class. Please show me before you leave.
Assignments
  1. Complete the Entry 5 in your CodeSpace. Submit your website link to Assignment Submission Form
  2. Write a two-paragraph reflection on your collection, addressing the midterm questions if they are helpful for you.
Unit 3: Designing for Interaction
Week 9. October 28 (Mid-Term Submission)
In Class
  1. Adding Favicon
  2. Pair Share: Something You've Learned (FigJam)
  3. Collection page sketches
  4. CSS Animations: Slides & CodePen
  5. Work on Collection Homepage
Assignments
  1. Work on your collection page. Submit sketches (digital or paper) to Assignment Submission Form. No need to submit the link as I should already have it.
  2. Observe how your collection changes as you change screen size. Think about how you want it to look on mobile. We will work on implementing media queries for responsive design next class.
Week 10. November 4
In Class
  1. A little housekeeping: feedback & marks coming this weeknext Tuesday
  2. Check: Do your links work?
  3. Pair Share: homepage
  4. Choose an example from hoverstat.es or awwwards.com or fontsinuse.com or another website you like and observe how it changes when you change the screen size.
  5. Introduction to Responsive Design (PDF, Dropbox)
  6. Exercise: make one of your previous entry pages (or homepage) responsive
Assignments
  1. Complete Entry 6 and make sure it is responsive as you change the page. No need to submit, but we will share in groups next week. I will check in class to make sure it is complete.
  2. Read: the first chapter of Life in Code. Submit at least a two-paragraph personal response of something you found interesting, or something you agreed/disagreed with, and submit to the Assignment Submission Form. We will discuss this in class.
Week 11. November 11
In Class
  1. A little housekeeping: feedback & marks coming TODAY
  2. Reading Discussion
  3. Pair Share: your latest entry
  4. Intro to JavaScript
  5. Work Session & Chats
Assignments
  1. Complete Entry 7 and make sure it is responsive as you change the page. No need to submit, but we will share in groups next week. I will check in class to make sure it is complete.
  2. Fork and complete Intro to JavaScript worksheet. Submit to Assignment Form.
Unit 4: Final Projects
Week 12. November 18
In Class
  1. Review Intro to JavaScript Worksheet in pairs
  2. In new pairs, share your latest entry. Were you able to use JavaScript?
  3. JavaScript Continued
  4. One-on-ones
Assignments
  1. You know the deal. Complete Entry 8. I will check in class to make sure it is complete.
Week 13. November 25
In Class
  1. Computer & Code Exercise
  2. A little housekeeping: the script tag
  3. In new pairs, share your latest entry.
  4. JavaScript Continued (Event Listeners & Loops)
  5. One-on-ones
Assignments
  1. You know the deal. Complete Entry 9. I will check in class to make sure it is complete.
Week 14. December 1
In Class
  1. Class Evaluations
  2. Continue with JavaScript Continued (Event Listeners & Loops) & CodePens
  3. Class Exercise (maybe?)
  4. Share Entries 1-9 in pairs
  5. Final Rubric
  6. Work Session
Assignments
  1. You will have 8 minutes to present your final next class. You must be on time and in attendance for all of your classmates' presentations.
Week 15. December 8 (Zoom)
In Class
  1. Final Presentations // Zoom Link
Assignments
  1. Just the final! I will be checking websites Wednesday AM, so you have until then to make any edits should you wish.
  2. Enjoy your break :)