NM 231 - UNC Asheville
Intro to Web Page & Interactive Design
Dr. Victoria Bradbury | Classroom: Zeis 201

Course Info Docs


Link to the course syllabus to view the class description, objectives and policies related to grading, student support and class conduct.


View the course schedule to see due dates and expectations for what we will be doing in class and what you should be working outside of class.

Links & Resources

This is a Google Doc that provides additional links and resources that add to the content for this class. Things like CSS color pickers, artists' and designers' websites, etc..



Learn HTML


Learn CSS


Introduction to Javascript


Introduce Yourself

Site Samples

A Walkthrough Tour:

html Type

Complex Designs:

Wireframe & Site Map


Group Website & Presentation


Homage to the Box Model


Experiments with Sound & Space

Open Project:

HTML, CSS & Javascript

Open Project:


Open Project:

Physical Computing


  • This lecture introduces you to the course theme and content by starting with the infrastures that make the web function.

  • Walkthrough Tour

    Twines and Web-based Narratives

    See examples of web-based interactive narratives.

  • This lecture introduces you to the Net.art movement and art historical concepts that led to artists creating works for a networked platform.

  • CSS:

    Floats & Positioning

    This lecture introduces you to key concepts that you need in order to structure divs in HTML & CSS. These concepts are fundamental to creating all projects from the Albers project and later.

  • This lecture presents artists working with the web as a platform, or as a concept, in the last 10 years.

  • Follow
    In Class!


Click each link to download a zip file of the demo.

Demo 1: Basic Text

Setup a root folder. Place text on the page.

Demo 2: Links

Create and link multiple pages.

Demo 3: Images

Embed image types in html. Image sizes (in pixels) are important in relation to screen size. File sizes are important to manage data usage.

Demo 4: Box Model

Understand and use basic box model.

Demo 5: Positioning

Layout divs on the page and extend box model.

Demo 6: Hover Gifs

Create color-changing gifs in Photoshop. Embed them in divs with hover states.

Demo 7: Simple Website

Use box model to layout a simple website.

Demo 8: Javascript

Create interactive divs with sound.

Demo 9: Javascript animation.

Animate and move interactive divs.


Follow along with the course schedule for the reading dates, or read ahead.
Note: There may be additional readings found on the Course Schedule.

Contact Dr. Bradbury


Office Hours:

Wed and Thurs: 11:00am-12:30am | Zeis 207