With special guest teacher Paolo/Sidney San Martín

Introduction

As we discussed, HTML and CSS are two of the languages that let us use everything the browser provides.

  • HTML defines the starting structure of a web page (and is the language of hierarchical <tags> and text).
  • CSS customizes how each element looks and feels (and can be used inside HTML <script> tags).

JavaScript is the third heat — it adds scripting (via the <script> tag), which lets you write programs that manifest through the browser and its rendering engine. Some big things that JavaScript lets you interact with include:

  • Changing elements and text, including creating them, removing them, copying them, and changing their position in the hierarchy
  • Changing the CSS classes that apply to an element, and setting CSS rules directly on individual elements (e.g. to move them around)
  • Log things to the browser console (part of the developer tools you get to with Inspect Element)
  • Run functions in response to things happening on the page (e.g. elements being clicked, the mouse moving around, text being typed)
  • Interact with time: schedule functions to run after a delay, or over and over again on a timer
  • Drawing to a <canvas>
  • Interacting with servers, including loading files and sending/receiving messages.

Starting points

CLICK HERE to download the starting points .zip for the class. Then…

  1. Unzip it
  2. Open a terminal window and use cd to go to the newly-unzipped folder
  3. Open the folder in your text editor (e.g. VS Code)
  4. Either run reserve in the terminal, or start the live reload server in VS Code
  5. Open the server’s address in a browser. Your browser should show http:// at the beginning of the address, not file://! Some of the demos won’t work if you open a file directly.

These are some starting points for web pages created by me and Melanie.

In class, we’ll try changing some of these starting points. Here’s an overview:

to_start_from_zero.html

A blank starting point with space to write HTML, CSS, and JavaScript.

button_fountain.html

A fountain of buttons! Demonstrates how to create elements, move them around the screen, and use Math.random().

button_fountain_fancy.html

Works just like the previous one, but with CSS by Melanie to make it look much more interesting! Demonstrates CSS colors, backgrounds, borders, and custom fonts.

draw_on_a_canvas.html

Demonstrates drawing on a <canvas> with code.

draw_on_a_canvas_with_hot_reload/

Same as the above, but splits the code into index.html and code.js. Demonstrates loading a file from JavaScript, and uses a feature from reserve to reload code.js when it changes without reloading the rest of the page.

chat.html

An ultra-minimal page that uses reserve.broadcast() to let you chat between multiple windows open to the same web page. It’s a small leap from here to something that you a use from multiple computers on the same network!

chat_fancy.html

Works just like the previous one, but with CSS by Melanie to make it look much more interesting!

folder_chat/

Advanced! A very special demo that lets you create, rename, and put text inside files in a folder on your computer, just by typing. Demonstrates writing a separate server program in Python which a web page can talk to.

Link to starting points on github

Homework ⚘ Website as gift

Make a website combining html css and javascript that is a gift for someone or someones that you know. Build off of one or more of the starting points shared in class this week. Consider your many relationships and write a love letter in the form of a website for one particular relationship. Consider how meaning can come from the structure of your website and the structure of interaction as well as through written language. Consider things like hiding messages in the comments of your code or in hidden elements on your page. How can the form and content and mode of delivery all be a gift? Relationships you could make this website for include but are not limited to:

  • a friend
  • a future or past version of yourself
  • someone who has passed
  • a character from a book
  • a spirit who lives in your house
  • a space
  • community
  • a bodega cat
  • an ancestor
  • yourself