Week 1

Welcome!

• Intros — each other, the class, the website HTML, CSS, text editor, etc.
• Designing & making your people cards

Intros to each other and the class!

Name, Pronouns & Hidden Talent

About me/this class: Programming using HTML, CSS, Javascript to make gifts, tell stories, & do projects that matter to you

Qualities of Good Projects

• Meaningful to you
• Have a real audience
• Deep (i.e. powerful ideas) — you learn stuff that helps you see other things in new ways
• They're cool (..like actually)

Projects

Student Project Examples

• Tara's soccer site: c24tk.github.io
• Julie's website: c24jy.github.io
• Katie's story: c23kh4.github.io/
• Ciara's dives: ciarabb.github.io
• Ben's Website & gift: c23bb.github.io
• Quentine's fish game: c24qb.github.io
• Rohan's games: c25rs1.github.io/
• Daphne's outfit picker: daphne-l.github.io
• Ellie's Birds: ellieh25.github.io
• Avery's gifts: averyleppo.github.io
• Hannah's website: c25hw.github.io

MJ Programming Story Movie from Molly Josephs on Vimeo.

Casting spells with code

• Download sublime text from dalton software center
• save the document (file --> save square.html)
• type in "<" and then h and then choose html

Journaling

What good journaling looks like:

Explaining your perspective on:

• How of how you made what you did
• How the code works
• How you feel about what you made

What good journal entries look like

• Deryk's Flying Machine — clear, great storytelling, explains how everythign was made and works
• Haeon's journal — tone and honesty is compelling
• Katie's Journal— goes into how it works
• Ciara's Journal— goes into what she's doing and why
• Roly's site and journal— honestly documenting what he's working on
• Leo's website on a website
• Ellie's Journal

Administrative stuff

Navigating The Class Website!

Bookmark it RIGHT NOW (it's also on the classwebsite): mojopi.github.io/cs1

Why Labs are so Important: Feedback & Understanding

Because of the project-nature of this class feedback is much more useful in person. In Labs since it's about doing projects

Google Calendar: Walk & Talk Lab

Coding: Exploring Your Coding Environment

Download sublime text and open it. Save your document on your desktop as codesketch1.html

Tools you need

• Github account at github.com — easier if you make it your C26/25 address.
  ***make your own PW and write it with your username in your notes app***


• Download the following from the Dalton Software Center: git, node, x code developer tools, sublime text.
• Codepen.io, sign in using github

Week 2

Personal Website Mock Ups

What is a "mock up?"

[Step 1] Hand Drawn

[Step 2] In Canva with interactivity/Animation

For each mock up you'll receive and incorporate feedback on the mock up itself

• What's clear?
• What could you make more explicit with comments or drawing?

What makes for good feedback?

• Kindly delivered
• Specific
• Actionable

People Cards Designs!

You need a piece of paper and pen

Peruse the people cards from last year (Hover on the image and click on the names)

Designing & Coding Your People Cards

Constraints: no photos of you

What is a Mock Up?

To understand: Let's go through Ashlen's process of mocking up her card

She chose her photo...

She modified her photo...

she made a mock-up...

She made the thing she wanted...

She wrote out the back of her card...

Some of my mock-ups for TTL!

Those cards on the website

Some possible hover effects

Possible effects...

• Change image Size (see Cloe)
• Change image Color (see Taylor/Penelope)
• Spin/rotate back and forth
• Change image to something else:
• same photo but different effect in Toon Camera
• same photo but it's drawn on, so it looks like drawings magically appear
• baby photo
• photo of your favorite food, flower, activity, cartoon character, emoji, etc.

Ideas for meaningful on hover changes

• Incorporate your pet
• Favorite movie
• Sport your love
• Different moods you have
• An animal you love
• Your favorite food pops up
• Favorite setting

Generating Ideas

Interview partner (~3m each) about what they like to eat, hidden talents, books and shows they like, etc. and each work on mocking up a person card. You can do it for each other or for yourselves

Slack your image of your mock up to me

1. Download slack from the dalton software center and sign in through your dalton.org gmail
2. Download slack on your phone and also sign in through your dalton email.
3. Take a picture and slack it directly to molly josephs with the 📝

Person Card template!

1. go to github.com and create username with c25 or c24 username
2. Fork this card or go to this slide at
   bit.ly/cs1-personcard2021

Screencast of Hover Code Sketch

Some of what you can do in CSS

• background-image: url();
• transform: rotate(90deg);
• background-color: color;
• animation-name:/ animation-duration:/ animation-iteration-count:
• transition: 2s;

Getting a link for imgs you want via google drive

Here is the link to this video — useful things in description of video!

Week 2

Making and publishing first codesketches

What are your tools

• Github Username (c25...) and WRITE DOWN PW IN NOTES
• Sublime Text
• Slack — sign in and make sure you can message me
• sign into codepen.io with github username

Getting Familiar with Code

Using sublime text to make some thing with hover effects

• transform — rotate, translate
• size
• font
• color

Make Something for Someone

Breakout: In Pairs to make codesketches

Mock them up & then we'll come back together

Using your terminal

Putting your codesketches online!!!