Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

IML 300: Reading and Writing the Web 💻

University of Southern California

Media Arts and Practice

Fall 2017
2 units
Professor: Lee Tusman
Email: tusman {at} usc {dot} edu
Office Hours: Thursday afternoons and by appointment
Student Assistant: Elyse Wang
Email: elysewan {at} usc {dot} edu


Reading and Writing The Web explores the creative, technical, and critical tools to realize web-based projects. This course is designed for students to gain a deeper understanding of the technical concepts in web design while learning its social, political, and philosophical implications. Students will be exposed to an array of ideas, concepts and approaches to working with HTML, CSS, and JavaScript to create interactive creative web projects. Each student will conceptualize, propose, and execute projects based on concepts established in class, using the web, apps, and other digital tools.


At the end of this course you will:

  • Know modern web authoring technologies and concepts (HTML5, CSS3, DOM and Javascript)
  • Understand the web as a medium for different types of discourse ( information, persuasion, engagement, expression)
  • Have a critical eye for effective web design


You will accomplish these goals through lectures and exercises covering the following objectives:

  • Creating semantic web content with standards-compliant styling
  • Critiquing and curating a collection of web design exemplars
  • Building interactive web components
  • Conceptualizing, planning and building creative web-based projects



Attendance & Participation (20%)

Attendance in the class is mandatory. If you are unable to attend class please me notify in advance and we can make alternative arrangements if necessary. This is an interactive class, not a lecture! As such it is important that you be present (physically and mentally) in class. You will get much more from the class by coming to class prepared and prepared to contribute to the discussion by asking questions, posing solutions and providing insightful critiques.

Workshops (40%)

There will be several small workshop assignments. Typically these assignments will begin in class during the hands-on tutorial session. You will have to complete these assignments outside of class. The purpose of the in class session is to get you started and to address any initial questions that you have.

Projects (40%)

There will be 3 projects for this class, each due at the end of a module, and each progressively more involved. The first project is to build a website for your class assignments and projects with HTML and CSS. The second project is to build a branching narrative ("Choose Your Own Adventure"-style) game or story. Alternatively, you may create an Internet Yama-ichi style project by selecting something not presently online (an object, a concept, a place, etc) and presenting it online on its own website. For the final project you will be conceptualizing, planning, designing and building a small web project of your own devising. In this project the process is as important as the final product. The project timeline is organized with a series of assessed stages to encourage you to follow a good design process.  We will be working on the class projects and critiquing milestone deliverables in class.


Late Handins

Late assignments are not acceptable without prior consent from the instructor. Late assignments will be docked one letter grade per day. Assignments that are more than 3 days late will not be accepted and will not receive credit.

Fair Use and Citation Guidelines

The Professor encourages students to participate in open source culture and the free sharing of knowledge. However, we assert that all of our course work is covered under the Doctrine of Fair Use. In order to make this claim, however, all projects will need to include citations as appropriate to your project when citing and using resources found online. We will discuss contemporary issues relating to software, rights, sharing culture and related issues in class.

Statement on Academic Integrity

USC seeks to maintain an optimal learning environment. General principles of academic honesty include the concept of respect for the intellectual property of others, the expectation that individual work will be submitted unless otherwise allowed by an instructor, and the obligations both to protect one’s own academic work from misuse by others as well as to avoid using another’s work as one’s own. All students are expected to understand and abide by these principles. SCampus, the Student Guidebook, contains the Student Conduct Code in Section 11.00, while the recommended sanctions are located in Appendix A: Student Conduct Code. Students will be referred to the Office of Student Judicial Affairs and Community Standards for further review, should there be any suspicion of academic dishonesty. The Review process can be found at: Student Judicial Affairs and Community Standards

Note from Professor: Students in my classes are encouraged to share knowledge and teach each other. Discussing and sharing projects inside and outside of class is welcome but students may not code for each other. Students must always present their own work and projects in class and hand in their own work. Should students wish to collaborate on one of the course assignments they should check in with the professor.

Statement for Students with Disabilities

Any student requesting academic accommodations based on a disability is required to register with Disability Services and Programs (DSP) each semester. A letter of verification for approved accommodations can be obtained from DSP. Please be sure the letter is delivered to me (or to TA) as early in the semester as possible. DSP is located in STU 301 and is open 8:30 a.m.–5:00 p.m., Monday through Friday.

Emergency Plan

In the event that classes cannot convene at the university, all IML courses will continue via distance education. Specifically, the IML portal and course wikis will be deployed to enable faculty-student interaction (asynchronously and also via virtual office hours), complete syllabi, course readings and assignments, software tutorials, project assets, parameters and upload instructions, peer review processes and open source alternatives to professional-level software used in the IML curriculum. Further details are available on the course wiki.



The course will be divided into 3, approximately 5 week, modules. Module 1, Introduction to HTML and CSS and Module 2, Introduction to Procedural Thinking through Javascript build on one another for the final module in which you will be building a mini-website.

Each class session will consist of a lecture and a workshop. Lectures will typically discuss the previous reading assignment (when applicable) and introduce new theory and techniques. The workshop will typically give you hands-on experience with the new ideas presented in the lecture. Typically the workshops will either directly dove-tail into the homework assignment or provide you with basic skills that will be expanded through the homework assignment. Giventhe limited amount of class face-time you will be required to spend time outside of class supplementing your in class training.

Weekly Schedule

Note I may make changes to the content of the class during the semester to improve your learning experience. Therefore, you should always reference the most recent schedule details on the course wiki for assignment expectations and lecture subjects.


Week 1 (8/21): Course Intro, What is the web?

  • Review course
  • What is the Web?
  • What exactly is a URL?
  • Web page dissection

Week 2: (8/28) HTML 101

  • Effective design principles of HTML
  • How are documents modeled in HTML
  • Introduction to HTML Tags

Week 3: (9/4) HTML 102; CSS 101

  • HTML attributes
  • Introduction to CSS
  • CSS and the DOM (CSS Selectors part 1)
  • Intro to FTP

Week 4: (9/11) HTML 102; CSS 10

  • Semantic HTML
  • CSS Selectors part 2
  • Organizing information
  • Introduction to wireframes

Week 5: (9/18) HTML 103; CSS 103

DUE: Class Project Website

  • Semantic HTML continued
  • Advanced CSS (CSS3 animation, CSS shapes)


Week 6: (9/25) Introduction to Design

  • Design Document
  • Sitemap / Flowcharting
  • Wireframing
  • Mockup
  • Layout

Week 7: (10/2) Procedural Thinking; Javascript 101

  • Logic and Flow Charts part 2
  • Introduction to interaction
  • Javascript variables and functions

Week 8: (10/9) Javascript 101; Introduction to jQuery

  • Arrays
  • jQuery + DOM vs. CSS/HTML + DOM

Week 9: (10/16) Javascript 101; Introduction to jQuery

  • Javascript objects
  • Javascript events
  • jQuery continued

Week 10: (10/23) jQuery

DUE: Branching Narrative or Internet Yama-ichi

  • jQuery animation


Week 11: (10/30) Project Brief; Introduction to Project management

  • Introducing the final project
  • Introduction to design research
  • Semester flashback and review

Week 12: (11/6) Design Project Management

DUE: Design Doc for final project

  • In-class workshopping

Week 13: (11/13) Project planning, design, and implementation

  • Final project work and 1-on-1 meetings

Week 14: (11/20) Final Project classwork

  • WIP Review

Week 15: (11/27) Final Project

  • Group 1 presentations

Finals Week, Date: Wednesday December 6, 11am-1pm

  • Group 2 presentations

Thanks to friends and mentors Rhazes Spell, Lauren McCarthy, Chandler McWilliams, Hsinyu Lin and Paolo Pedercini for ongoing syllabus and teaching ideas, slides, and community.


Class repo for USC IML300 Reading and Writing The Web






No releases published


No packages published