Web Design and Development for Dummies - Fall 2014

Pi Art Center with Ilwon Yoon - ilwonyoon@gmail.com
Thursday 5:00 - 8:30pm | Friday 1:00pm - 4:30pm

html introduction

html introduction 02 and CSS introduction how to find more html tags you needed how to write css in 3 different ways basic use of class and id basic css syntax how to find what you need from w3schools how to install sublime text build system for Google chrome how to install sublime package and colorpicker useful google chrome tools: whatfont, colorzilla how to use emmet for faster writing safer font choice for typography dummies :typewolf selection How to use jquery to create a simple interaction. Jquery for dummies. How to use and why we want to use it. jquery basic funciton demonstration and learning jquery plugins

the most important part is : how to find a bug in your code 1. make sure that the html file you are editing matches the file path in the browser. You might be editing something else. 2. If CSS doesn't work at all, make sure that you have the right path for link. 3. You may have typo in your code. Sublime support color-coding, which means that if you break the html syntax rules, you will see some weird color variation. 4. commenting out all element that are working. Only targeting the issue you want to fix. 5. Google what you are trying such as "how to overlay div on top of image?" "how to place text inside of image in html?" Once you learn how to find answers for what you needed, that's the point you are getting better at writing code. Don't memorize, try to understand. If you don't understand yet, type everything till you have a full understanding.

How to use Google Developer tools to see the change in live action, which won't change your code.

Learning resources : Free Learning resources : Not Free


If you ever had a need to collect information from users on the web or use external data in your project, understanding web development will make your life much easier.

The class will cover server-side and client-side web development topics using JavaScript. On the client-side, we will cover traditional JavaScript and the jQuery library to manipulate browser content, create and trigger page events and make AJAX data requests. Developing with NodeJS on the server-side, we will explore receiving input from a user then querying and saving that data to a database, and finally, returning the appropriate content to the client, i.e. HTML or JSON. The websites we use today are rarely on a single database, we will focus on consuming data APIs from websites like Foursquare (for location information), Facebook (for social graph) and Twilio (for SMS and telephony). Going further, we will create custom data APIs for use at ITP and open to the public.

Students must have prior HTML & CSS experience or be willing to learn it outside of class. Introduction to Computational Media or prior object oriented programming knowledge is required.


Students must attend all classes and arrive on time to the start of class and any office hour appointments. Respect your fellow students' questions and comments. Be 'here'. Participate in class. Assignments are given for each class to practice and try out recent topics. All assignments are required and must be completed. Stay in touch - please email me if you need to miss class or need extra help. No computer usage in class that is not relevant to the current topic. Grading 33.3% Participation and contributions 33.3% Completed assignments and documentation 33.3% Final project and documentation Office Hours Fridays from 10:30AM - 12:30PM


Syllabus Feb 1st Week 1 - Introduction to web development

Introduction to web development, server-side & client-side. Discussion of basic web requests. The tools you should have to get started. Getting started with JavaScript.

View handouts

Feb 8th Week 2 - JavaScript functions, events & callbacks

More on JavaScript - variables, loops, conditions, functions, events and callbacks - the things that maker JS special.

View handouts

Feb 15th Week 3 - Getting started with NodeJS & Heroku

Introduction to webservers & NodeJS. Getting set up locally and on Heroku & a simple NodeJS server. Discuss the command line tools, Git & NPM (node package manager).

View handouts

Feb 22nd Week 4 - ExpressJS framework & templates

More Heroku and webservers with ExpressJS web framework. Organizing web applications, separating code and design with routes and templates.

View handouts

Mar 1st Week 5 - Databases and MongoDB

Database - long term memory. Discuss data modelling, saving and retrieving data. Getting started with MongoDB on Heroku with AddOns.

View handouts

Mar 8th Week 6 - More on Databases

Review of MongoDB - connecting, schema and model design, inserting and querying data.

View handouts

Mar 15th Week 7 - Database review and form validation

Review schemas, models and MongoDB documents. Discuss queries and updating documents.

New today, form validation both server and client side.

View handouts

Mar 29th Week 8 - Introduction to API's & JSON

Creating a server-side JSON feed for sharing data with other web apps. Example of consuming remote APIs.

View handouts

Apr 5th Week 9 - Remote APIs, JSON and AJAX

How to use local and remote JSON feeds to populate data on your web app.

View handouts

Apr 12th Week 10 - Sessions and Cookies

Tools and modules to track user sessions. Basic authentication discussed.

View handouts

Apr 19th Week 11 - Uploading files / Amazon S3

How to accept file uploads and store them on Amazon's S3 storage service.

View handouts

Apr 26th Week 12 - Websockets and real-time communication

Realtime web!

View handouts

May 3rd Week 13 - Arduinos, Processing and JSON

The web as glue! Spacebrew to connect Processing to Browsers to Arduinos, etc.

View handouts

May 10th Week 14 - Final Presentations

Final presentations of web projects and festivities

View handouts