07_dom.md

The DOM: HTML and CSS

The videos in the section were created using 2 different editors for p5.js. All of the concepts should still apply, however, there are some minor changes. Most notably in JavaScript let is now the preferred way to declare a variable over var. If you would like to learn more about this you can watch this video about let vs var.

Video Tutorials

• Code for videos below
• Full Series on HTML / CSS / DOM
  • Basics
    • 8.1: What is HTML?
    • 8.2: Creating HTML Elements with JavaScript
    • 8.3: Manipulating DOM Elements with html() and position()
    • 8.4: Handling DOM Events with Callbacks
    • 8.5: Interacting with the DOM using Sliders, Buttons and Text Inputs
    • 8.6: Other Events and Inputs
    • 8.8: Events "changed" and "input"
    • 8.7, 8.9 and 8.10: CSS, CSS Selectors and select() and selectAll() with CSS Selectors

Reference Pages

• p5 DOM library reference
• CSS Reference

Getting Started with p5.js book

• Chapters 13.4 - 13.6 of Getting Started with p5.js book - Ebook (free with NYU Library login) | Code

More Written Tutorials

• Tutorial: Beyond the Canvas, using p5.dom
• Tutorial: Intro to HTML/CSS basics
• Mozilla: Introduction to HTML
• Mozilla: CSS Basics

Going Further: Video Tutorials by Topic

HTML

• 8.1: What is HTML?
• 8.2: Creating HTML Elements with JavaScript
• 8.3: Manipulating DOM Elements with html() and position()

Callbacks

• 8.4: Handling DOM Events with Callbacks
• 8.5: Interacting with the DOM using Sliders, Buttons and Text Inputs
• 8.6: Other Events and Inputs
• 8.11: Callbacks on Multiple DOM Elements
• 8.12: parent() and child()
• 8.15: Drag and Drop a File
• 8.16: Slider Dance

CSS

• 8.7: The Basics of CSS
• 8.8: Events "changed" and "input"
• 8.9: CSS Selectors
• 8.10: select() and selectAll() with CSS Selectors
• 8.13: Assigning a CSS Class Dynamicallys
• 8.14: parent() and child() again with variables
• p5.js Sketch as Background