Introduction to Web Design and Computer Principles

CSCI-UA.0004-002
NYU Department of Computer Science
Tuesdays and Thursdays, 12:30-1:45pm
Warren Weaver Hall, room 202
Fall 2015

Instructor: Mehan Jayasuriya
Email: mehan@nyu.edu
Source code for this site and all slides: GitHub

Overview

In this course you'll learn the basics of web design, learn how the internet works and build your first website from scratch. We'll be touching on topics like user experience design, visual design, image editing, animation and the history of communications technologies.

The primary tools we'll be using in this course are HTML (for laying out web pages) and CSS (for styling web pages). Both are open standards that are free to use. For some of the more design-heavy topics in the course, we'll be using Adobe Photoshop, Illustrator and InDesign. All three of these applications are available as part of the Adobe Creative Suite. You can download a free 30-day trial of the Creative Suite from Adobe's website. Should you choose to continue using these applications, special pricing is available via the NYU bookstore, however, for most students, the 30-day trial should be sufficient in order to complete assignments for class.

If at any point during the course you have questions or are in need of help, do not hesitate to reach out to Mehan or the course tutors. More information on office hours and tutoring is available below.

Grading

Your grade in this course will be calculated using the following rubric:

  • Assignments: 40%
  • Midterm exam: 25%
  • Final Exam: 35%

A list of all assignments and their due dates can be found here.

Exam Schedule

The final exam for this course will take place on December 17th from 12 to 2pm in room 202 of Warren Weaver Hall. The full exam schedule is available here.

Computer Labs

You do not heed to own a computer in order to take this course--NYU provides you with access to OS X machines running all the required software in the ITS Labs. The primary lab for this course will be the LaGuardia Co-Op (539-541 LaGuardia Place). This is where you'll find the tutors for the course, in addition to machines for your use. A full list of all ITS Labs is available here.

When working in the ITS labs, be sure to save your work to either your NYU webspace or a portable hard drive or flash drive. The hard drives of the machines in the ITS labs are erased regularly and if you save your work directly to one of the ITS machines, you may not be able to retrieve it.

If you prefer to work on your own machine, please see the tools section below for information on required software.

Help

Mehan will be holding office hours every Tuesday from 11:30am to 12:30pm (i.e. the hour before class) in room 424 of Warren Weaver Hall. The course tutors can be found at the LaGuardia Co-Op (539-541 LaGuardia Place); the schedule for the course tutors is available here. Additional support is also available via the University Learning Center.

Tools
  • NYU i6 Account: In addition to your NYU NetID, you'll be using something called an i6 account in order to access NYU's servers. You will be automatically granted an i6 account upon registering for this class. If you run into any problems while using your i6 account, take a look at this FAQ, which answers the most common questions that students encounter. If your question isn't answered on that page, please contact either Mehan or one of the tutors. If you need to reset your i6 password, visit this link.
  • Adobe Creative Suite: This suite of software contains Adobe Photoshop, Illustrator and InDesign, all of which we'll be using in this course. You can obtain a free 30-day trial from Adobe's website; special one-year subscription pricing is also available via the NYU bookstore.
  • Sublime Text: Sublime Text is a text editor that you can use to edit HTML, CSS and just about anything else that consists of plain text. It has a number of powerful features that will make writing HTML and CSS easier. Free and paid versions are available on their site for OS X, Linux and Windows--for the purposes of this course, the free version should suffice.
  • Fetch: Fetch is an OS X FTP utility we'll be using to connect to NYU's servers and upload our files. You can download a free copy of Fetch by visiting this page (note: you will need to login with your NYU NetID and password). Once you download and extract the .zip file, you'll find both a copy of Fetch as well as an .rtf file. The .rtf file contains the serial number you'll need to redeem your free copy of Fetch.
Books

We'll be using the following two books in this course:

The first book, HTML and CSS: Design and Build Websites is required for the course and we'll be referencing it often. The second book is purely optional--you may choose to use it if you need extra help with or want to delve deeper into Photoshop, though there are plenty of free resources available for learning Photoshop online as well. Both books are available via the NYU libraries and bookstore as well as Amazon, etc.

Links

Common syllabus for all course sections
Common assignments for all course sections
NYU Department of Computer Science
NYU Computer Science Minors
ITS Computer Labs
Fall 2015 - Summer 2016 Academic Calendar

Syllabus
Class Topic Reading Assignment Slides and Examples
Week 1: 9/3
  • What is the internet?
  • What is a web page?
  • Topics we'll cover in this course
  • Course logistics
None Class 1 slides
Week 2: 9/8
  • What is an operating system?
  • Intro to UNIX and the terminal
  • SSH and NYU i6
Basic UNIX commands and NYU i6 user manual None Class 2 slides
Week 2: 9/10
  • FTP and Fetch
  • Intro to HTML
  • Creating your first webpage
HTML & CSS, chapters 1 & 2
Week 3: 9/15
  • Links
  • Lists
HTML & CSS, chapters 3 & 4 None Class 4 example
Week 3: 9/17
  • Tables
  • Images
HTML & CSS, chapters 5 & 6 Class 5 example
Week 4: 9/22
  • Intro to CSS
  • Color
HTML & CSS, chapters 10 & 11
  • None
Class 6 example
Week 4: 9/24
  • Working with HTML and CSS
  • Extra Markup
  • CSS and Text
HTML & CSS, chapters 8 & 12 Class 7 example
Week 5: 9/29
  • The CSS box model
  • Lists, Tables and Forms
HTML & CSS, chapters 13 & 14
  • None
Week 5: 10/1
  • Intro to Photoshop
None
  • None
Class 9 example
Week 6: 10/6
  • Intro to layers
  • Combining images
  • Working with type
None
  • None
n/a
Week 6: 10/8
  • Advanced Photoshop topics
None n/a
Week 7: 10/13
  • No Class: Legislative Day--classes meet according to a Monday schedule
  • Office hours by appointment only
None
  • None
n/a
Week 7: 10/15
  • CSS Layout
  • Review
HTML & CSS, chapter 15
  • None
Class 12 examples
Week 8: 10/20
  • Midterm Exam: Please bring a #2 pencil to class!
None
  • None
n/a
Week 8: 10/22 HTML & CSS, chapter 18
  • None
n/a
Week 9: 10/27
  • Introduction to UX Design and Wireframing
  • Introdution to Adobe InDesign
None
  • None
Class 15 slides
Week 9: 10/29
  • Adobe InDesign and Wireframing
None n/a
Week 10: 11/3
  • Creating Column Layouts
  • Responsive Layouts
HTML & CSS, chapter 15 None Class 17 examples
Week 10: 11/5
  • Media Queries
  • Responsive Layouts
None Class 18 examples
Week 11: 11/10
  • HTML 5 layout
  • CSS3
  • Advanced image properties
  • CSS transitions
HTML & CSS, chapters 16 & 17
  • None
Class 19 example
Week 11: 11/12
  • Intro to animated .gifs
None
  • None
n/a
Week 12: 11/17
  • Photoshop animation: advanced techniques
None n/a
Week 12: 11/19
  • Intro to web frameworks and Bootstrap
None
  • None
Class 22 example
Week 13: 11/24
  • Advanced Bootstrap
  • No office hours
None Class 23 example
Week 13: 11/26
  • No Class: Thanksgiving break
None
  • None
n/a
Week 14: 12/1 None
  • None
Class 24 example
Week 14: 12/3
  • Intro to Illustrator and vector graphics
None
  • None
n/a
Week 15: 12/8
  • Advanced Illustrator and vector graphics
  • Working with SVG files in the browser
None Class 26 example
Week 15: 12/10
  • Web hosting
  • DNS and domain names
  • Intro to Git, GitHub and GitHub Pages
HTML & CSS, chapter 19
  • None
Class 27 slides
Week 16: 12/15
  • Review for final exam
None
  • None
n/a
Week 16: 12/17
  • Final exam: please bring a #2 pencil to class!
None
  • None
n/a