Skip to content
workshopping a workshop where students will learn how to hand code a web page
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
event
feb-23-onions
mar-2-library
pre-workshop-materials
README.md
camerons-world.gif
dogs-desktop.jpg
index.html
reference.html

README.md

hand coding round robin

workshopping a workshop where students will learn how to hand code a web page

what is this?

a one hour workshop where a group of students will learn how to hand code a web page by working on each others computers

they will learn how to do this kind of coding slowly and with care.

equal attention will be given to html elements, css styles, and the content on the page. through adding and styling the content of each others web pages students will learn the basic building blocks of web development as well as what it feels like to code with and for each other.

workshop slides are here !

html + css syntax references here !

css color reference here !

preparation

Note: You will need your own computer to participate in this workshop. We will be switching seats and working on each others computers so you should also be comfortable with someone else using your computer. We will only be working within one file in a text editor and it will already be opened by the time another student sits down at your computer.

  1. Please have a text editor installed on your computer. Atom, Sublime Text, VS Code are all good choices!
  2. Please download this file
  3. Move it to your desktop so that it is easily accessible to you and other students

schedule

0:00 - 0:05

introduction to workshop, what is hand coding?, index.html overview

0:05 - 0:10

H1 tag, style by id

0:10 - 0:15

Move down one seat, P tag inside div tag, style by id

0:15 - 0:20

Move down one seat, IMG tag with ID, copy and paste url for image

0:20 - 0:30

Move down one seat, Style image by ID

0:30 - 0:45

Move down one seat, Freestyle ~ what is the hidden meaning of the web page (feel free to uncomment javascript below)

0:45 - 0:50

Return to original seat, final P tag, style by ID

0:50 - 0:60

optional sharing, post-workshop notes

references

J. R. CARPENTER || A Handmade Web

Olia Lialina || A Vernacular Web

sfpc code societies || student archive

post-workshop resources

to put your website on the world wide web (for free!) you can follow these guides:

GitHub

  1. Create a new repository
  2. Click upload new file button
  3. Name the file index.html
  4. Copy and paste the contents of your index.html
  5. Commit the changes directly to master
  6. Enable gh-pages in the Settings tab

Beaker Browser + Hashbase.io

  1. Download and install Beaker Browser here
  2. tbd
  3. tbd

Netlify

  1. tbd
  2. tbd
  3. tbd

web pages from saturday mar 2 @ bobst library

one two three four

web pages from saturday feb 23 @ itp with the onions

one two three four five six seven eight

You can’t perform that action at this time.