Web Design and Development for Dummies - Fall 2014
Pi Art Center with Ilwon Yoon -
Thursday 5:00 - 8:30pm | Friday 1:00pm - 4:30pm
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.
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
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).
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.
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.
Mar 8th Week 6 - More on Databases
Review of MongoDB - connecting, schema and model design, inserting and querying data.
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.
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.
Apr 5th Week 9 - Remote APIs, JSON and AJAX
How to use local and remote JSON feeds to populate data on your web app.
Apr 12th Week 10 - Sessions and Cookies
Tools and modules to track user sessions. Basic authentication discussed.
Apr 19th Week 11 - Uploading files / Amazon S3
How to accept file uploads and store them on Amazon's S3 storage service.
Apr 26th Week 12 - Websockets and real-time communication
May 3rd Week 13 - Arduinos, Processing and JSON
The web as glue! Spacebrew to connect Processing to Browsers to Arduinos, etc.
May 10th Week 14 - Final Presentations
Final presentations of web projects and festivities