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

Course Info Docs

Syllabus

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

Schedule

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..

Exercises

Codeacademy:

Learn HTML

Codeacademy:

Learn CSS

Codeacademy:

Introduction to Javascript

Projects

Introduce Yourself

Site Samples

A Walkthrough Tour:

html Type

Complex Designs:

Wireframe & Site Map

Net.art

Group Website & Presentation

Albers:

Homage to the Box Model

Javascript:

Experiments with Sound & Space

Open Project:

HTML, CSS & Javascript

Open Project:

Parallax

Open Project:

Physical Computing

Lectures

  • 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
    Along
    In Class!

Demos

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.

Readings

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

vbradbur@unca.edu

Office Hours:

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