Drawing on the Web

HTML and CSS

In this assignment, you will create two new web pages: an HTML and CSS drawing and a portfolio page to serve as a directory for your Drawing on the Web projects.

Project Portfolio

Begin by creating a new directory on i6 specifically for your work in this class. Call this directory “drawing”. Then, using HTML and CSS, create a distinctive portfolio page for your class work. This page should serve as a portal for the following assignments.

• HTML and CSS
• SVG
• CSS Animation
• JavaScript
• Web APIs
• HTML Canvas
• WebGL
• Final Project

You should design the page to reflect your own aesthetic preferences including color, typography, graphics, and layout. Your name and the course title, “Drawing on the Web,” should also appear on the page. Over the course of the semester, as each assignment is completed—including the HTML and CSS drawing—you should add a link to it from here.

HTML and CSS Drawing

The second part of this assignment is an opportunity for you to combine images and media in the browser to create an original, multilayered, HTML and CSS drawing. How you go about this is open to interpretation but here are the basic requirements.

• Create a new subdirectory of your “drawing” directory for this project.
• Your HTML and CSS drawing should seamlessly take up the full browser window.
• There should be at least three separate layers of imagery on the page (i.e. foreground, background, and in-between).
• At least one layer should use CSS grid to arrange elements on the page.
• Your drawing should include music or sound using the HTML <audio> element.
• Your drawing should include video using the HTML <video> element.
• Audio and video files should be compressed and optimized for the web.

While the HTML and CSS code should be your own, feel free to incorporate found images and media into the project. This page is intended to be seen and experienced more than read; as such, you should limit HTML text on the page.

Submitting Your Assignment

Submit the following via NYU Brightspace. More information on submitting files with Brightspace is available here.

• The URL to your assignment in the general form of: i6.cims.nyu.edu/~netid/drawing/
• A compressed archive containing all the files (HTML, CSS, and media resources) of your pages

Please note that you are required to submit files along with URLs in order to receive credit for your work.

Grading

This assignment is worth 10 points.

Portfolio Page

• Studentʼs portfolio page, in a dedicated subdirectory of their i6 account, with their name and navigational elements for this and future assignments (2 points)
• The portfolio page should include original CSS for font, color, and layout (1 point)

HTML and CSS Drawing

• An original HTML and CSS drawing that occupies the full browser window (2 points)
• At least three separate layers of imagery on the page (2 points)
• CSS grid layout (1 point)
• Music or sound, optimized for the web, using the HTML <audio> element (1 point)
• Video, optimized for the web, using the HTML <video> element (1 point)