Web Design 1 - PSAM 1128A

Parsons The New School for Design

Course Description

This course is meant to provide you with the foundational knowledge required to build a website. We will not get wrapped up in theory. We will be hands-on. We will write code.

You are not required to have any knowledge of interface design, programming, or the inner workings of the web. We will focus on the core front-end technologies HTML, CSS & JavaScript and touch on the role of back-end technologies using PHP & MySQL for examples.

Real world business needs will drive our discussions. You will learn the skills and techniques that professionals are using today.

The ultimate goal is for you to not only understand how websites come to life, but also the business that drives the industry. You should come away with an understanding of the current state of the industry, a respect for how we got here, and a sense of where we are headed.

Weekly Assignments

Due 2/3/2012

Reading

Brief History of the Internet
Dive Into HTML5 - How Did We Get Here?

Due 2/10/2012

Reading

Understanding Web Design
To Hell With Bad Browsers
Answer this additional question in your response: What is the Web Standards Project? (Include the URL)

Activity #1

Edit and upload test files to your webspace.newschool.edu account.
You will need to edit some of the files based on instructions given in class and upload them to your webspace account so it is visible online.

Due 2/17/2012

Reading

A Dao of Web Design
From Table Hacks to CSS Layout: A Web Designer's Journey

Activity #2

Markup Your Resume
The goal of this activity is for you to convert your resume into a valid and semantic HTML document. The rules are simple.

  1. It must validate using the W3C Markup Validation Service
  2. It must use all of the tags listed in the HTML Cheat Sheet presented in class.
  3. It must not use any deprecated tags.
  4. When you are done, upload it to your webspace in a folder named 20120210.

Due 2/24/2012

Reading

JavaScript: The World's Most Misunderstood Programming Language
Douglas Crockford: The JavaScript Programming Language

Activity #3

Style Your Resume
The goal of this activity is for you to add style to the resume you marked up last week.

  1. It must validate using the W3C CSS Validation Service
  2. It may use any CSS tags that validate including CSS3.
  3. When you are done, upload it to your webspace in a folder named 20120224.

Due 3/02/2012

No reading due
Project 1

This is considered your midterm project and will account for 20% of your total grade.
The requirements (from the syllabus) are:

"Produce a simple website that uses what we’ve learned so far about HTML, CSS & jQuery."

also

"You will be required to take the knowledge you have gained up to this point and present a simple working website to the class."

So, To clarify what I have already explained in class:

  • You will be required to present your website to the class.
    • I will show your site on the projector while you show off your design and explain how you made it.
    • I will probably pick apart your website with the developer tools while you talk.
    • This should only take 3 - 5 minutes.
  • Your website must include valid HTML, CSS, and JavaScript.

Here is the weighted grade breakdown for each item (out of 100pts):

  • 15pts - include HTML
  • 20pts - HTML validates
  • 15pts - include CSS
  • 20pts - CSS validates
  • 5pts - include JavaScript (this can be regular JavaScript or jQuery)
  • 5pts - JavaScript is error free (you can tell if your JavaScript has an error by looking in the Console panel of the Debug inspector)
  • 5pts - attention to HTML semantics (e.g., using 'header' vs. 'div')
  • 5pts - using CSS properly (i.e., more consise selectors, etc.)
  • 5pts - clean code (e.g., consistent tabbing, lack of extraneous white-space, easily readable, etc.)
  • 5pts - design / aesthetic (e.g., no obvious layout errors, text showing off the page so we can't read it, etc.)

PLEASE, PLEASE, PLEASE email me if you have questions before the class. If you get a low grade but never emailed me for help, I cannot sympathize with you.

Good luck and I'll see you on Friday!