Sarah Grant • teaching@chootka.com • Fall 2015 • 3 credit hrs
Tuesdays • 6:30-8:20PM • Room: 2MTC MAGNET 811
Thursdays • 6:30-8:20PM • Room: 2MTC MAGNET 803
Office hours by appointment via email
###Github Repository: http://github.com/IDMNYU/web-studio-FA15
This class will introduce you to industry standard tools and processes used in the design and development of web sites and applications, with a focus on client-side web programming. Topics covered include: HTML/HTML5, CSS/CSS3, Javascript, jQuery, Photoshop, UX + Design basics, and an overview of advanced topics as time permits. By the end of this class, you should know how to develop and deploy a site that includes thoughtful design and usability.
Throughout the class you will be expected to maintain a public website that is constantly improving, both technically and visually (see Term Project page).
NOTE: You may not use any programs that automate writing HTML/CSS code during this class. You are here to learn how to write code by hand, not have another program produce it for you. Any homework assignments or projects that are found to be auto-generated will automatically be given a zero. Seriously.
The following IDM program goals are reinforced within this course. Students will:
- 1 – develop conceptual thinking skills to generate ideas and content in order to solve problems or create opportunities.
- Students will develop a research and studio practice through inquiry and iteration.
- 2 – develop technical skills to realize their ideas.
- Students will understand and utilize tools and technology, while adapting to constantly changing technological paradigms by learning how to learn.
- Students will be able to integrate/interface different technologies within a technological ecosystem.
- 3 – develop critical thinking skills that will allow them to analyze and position their work within cultural, historic, aesthetic, economic, and technological contexts.
- 4 – gain knowledge of professional practices and organizations by developing their verbal, visual, and written communication for documentation and presentation, exhibition and promotion, networking, and career preparation.
This course will introduce students to:
- Basic programming concepts
- Basic command line commands
- Web design, development, and deploy process
- UX + interaction design
- Information / User Interface (UI) design
- Visual design (i.e. Photoshop)
- Version control through git and github
- Debugging tools for front-end web development
- HTML/HTML5
- CSS/CSS3
- The Responsive Web
- Javascript/ Javascript Libraries (i.e. JQuery)
- HTML / CSS Frameworks: HTML5 Boilerplate, Bootstrap
This course will help students to:
- Understand the web design and development process from conception to launch
- Develop a vocabulary to evaluate and critique web design and development
- Be prepared to advance their development studies to a professional level
By the end of the course, students will be able to
- design, build, and develop content for a professional-quality website.
- understand and implement the iterative process
- learn how to proactively learn also known as self-regulated learning
- In any learning situation, you should study beforehand, make/do, debug, reflect, adjust, and do it all over again (iteration). Learning happens in a cycle.
Class will be comprised of lectures, critiques, homeworks, and working production labs. There will be weekly homework assignments that students will present to the class, midterm and final project critiques. Please come prepared to class and ready to review what you’ve done, including asking any questions in the event you are stuck. We may also have guest speakers as schedule permits.
Critiques (AKA crits) are the best way to articulate your ideas to others and get immediate feedback. During the crit, the professor and your classmates analyze and suggest ways to increase the visual and conceptual impact of each existing idea. Take notes when your work is being critiqued and do not edit the responses, whether you agree with them or not. Review your crit notes and reflect upon what was said. Ask yourself how you could combine, transform, or expand the ideas that show the most promise. However, resist the temptation to incorporate all suggestions and comments. Only utilize the ones that work for you and your project.
Rules of the Critique:
- Be Present and Engaged
- Give Feedback to your classmates
- Do NOT take feedback personally.
Students will conduct self assessments as well as be evaluated by the professor during or after triterm and at the end of the semester. Any action without reflection is meaningless. Real learning only occurs as part of a reflective process. Reflection is studying your own practice as seriously as you study anything. It involves thinking about why, what, and how you create something.
- Please email me at teaching@chootka.com to set up appointments or ask me questions
- I will be looking into setting up a slack channel for us and will let everyone know when that is ready.
- Talk to me in person directly before or after class OR set up an appointment about issues and problems.
- Schedule your time (keep a calendar of some sort)
- Come to class on time and participate (be present and engaged)
- Study outside of class (ideally with classmate(s) i.e. Form a Study Group or Team), devoting at a minimum 6 to 12 hours per week outside of class, fulfilling homework assignments, reading, and studying concepts covered in class.
- Back up your work constantly (that's what github is for)
- Consult github at least once a week for up to date info
- Complete all assignments by due dates
- Action – do your absolute best
- Strive for continuous improvement
- Pay attention to detail & craft
- Have desire amounting to enthusiasm (to learn, to explore)
- Have self-motivation, proactiveness, and focus
- Have patience, persistence, and discipline
- Be creative
- Have self-confidence and pride in your work
- Have fun!
- Attendance is mandatory and will be taken at the beginning of every class. Since there is so much technical, conceptual, and design information to absorb, regular attendance is essential.
- Unexcused absences will affect your grade. One absence is allowed; after that, your final, overall, numerical grade will drop by 5 percent (1/2 a grade point (e.g. A to an A-)) for each additional absence.
- Be on Time. Tardiness will affect your grade. For every 15 minutes of tardiness, your final, numerical grade will drop by 0.625 percent
- Contact the professor IN ADVANCE if you will not be in class (in person or via direct message on slack is preferred).
- Attendance is mandatory for the midterm and final presentations.
- 5% Github Documentation
- 5% Triterm Self-Assessment & Rubric
- 5% Project Plan
- 10% Class Participation
- 15% Weekly Assignments
- 5% Final Self-Assessment & Rubric
- 25% Triterm Progress Check
- 30% Final Project
- 20% Participation in the mandatory class critique
- 20% Interaction Design
- 30% Visual Design
- 30% Quality of code
Each student will be judged on the quality, experimentation, and improvement that their work shows.
Performance, participation, and attendance of the student has been of the highest level, showing sustained excellence in meeting course responsibilities. Work clearly differentiates itself from other work, has memorable impact, pursues concepts and techniques above and beyond what is discussed in class. The student thoroughly understands the web design and development process.
Performance, participation, and attendance of the student has been good, though not of the highest level. Work demonstrates a better than average web design and development process.
Performance and attendance of the student has been adequate, satisfactorily meeting the course requirements. Work is average and competent, showing a basic understanding of the web design and development process.
Performance and attendance of the student has been less than adequate. Work is lacking in many or most areas that show any understanding of visual foundation. Problems may include lack of interest, procrastination, poor planning and poor craft.
Performance and attendance of the student has been such that course requirements have not been met. Work shows no overall understanding of the course material on many levels or either a severe lack of interest.
This class is about web design and development principles and technology. Through lectures & demos, we will cover many important technical issues, but—as in the professional world—the burden of technology will always lie squarely on the designer’s/developer's shoulders. Community tech sharing is highly advised as well. I have listed several helpful resources to help you in getting up to speed with technology within the syllabus and on github.
Laptop computers and other mobile devices are invaluable tools for artists, designers, and students when used responsibly. However, this technology can also be incredibly distracting, especially in the classroom. When in class, you may use your laptops and other devices for any activities pertaining to the course: taking notes, researching material relevant to our readings and discussions, doing Web Studio homework, making class presentations, etc. However, the following uses are unacceptable: checking email, instant messaging, texting, using social networking sites such as facebook, myspace, etc. Also, during class screenings, your laptops should not be used.
All work for this class must be your own and specific to this semester. Any work recycled from other classes or from another, non-original source will be rejected with serious implications for the student. Plagiarism, knowingly representing the words or ideas of another as one’s own work in any academic exercise, is absolutely unacceptable. Any student who commits plagiarism must re-do the assignment for a grade no higher than a D. In fact, a D is the highest possible course grade for any student who commits plagiarism. Please use the MLA style for citing and documenting source material.
If you are student with a disability who is requesting accommodations, please contact New York University’s Moses Center for Students with Disabilities at 212-998-4980 or mosescsd@nyu.edu. You must be registered with CSD to receive accommodations. Information about the Moses Center can be found at www.nyu.edu/csd. The Moses Center is located at 726 Broadway on the 2nd floor.
Students, in addition to their regular NYU allotment, also have available to them $5 in printing credits for use at the Dibner Library. Credits are issued by the MAGNET Managers in Rm 809 and must be signed for before the credits can be used. Once signed for, students will be issued a username and password which can be used at any of the printer stations at Dibner Library. Print jobs can be sent to the printer from any computer station at the Librarysee the Library staff for further assistance.
- Browser: Chrome or Firefox
- Github Account: github.com/join
- Developer Tools for Chrome or Firefox
- Firebug for Firefox, http://getfirebug.com or
- Chrome Developer Tools, https://developers.google.com/chrome-developer-tools http://discover-devtools.codeschool.com
- HTML Text Editor (Sublime Text, Brackets.io, Coda, Textmate, BBEdit/TextWrangler, etc)
- FTP Application (Cyberduck, Transmit, Fetch, FileZilla, etc)
- Web Server Space
- I highly recommend that you get your own web server space from an internet service provider. I recommend http://www.siteground.com.
- Alternatively, you can receive web server space from IDM’s Technology Manager, Elton Kwok, MAGNET 883. Email eltonkwok@nyu.edu to set up your web server space
- IDM’s FTP server info: http://sites.bxmc.poly.edu (Use active mode to connect)
- Week 1
- Introduction to the Course
- Week 2
- HTML + CSS Basics
- Week 3
- Github + Command Line Demo
- CSS Basics Continued
- Week 4
- Intro to the DOM
- Javascript Basics
- Week 5
- Javascript Basics Continued
- Week 6
- UX Basics
- Wireframing
- User Stories
- Week 7
- Visual Design Basics
- Week 8
- Responsive Design + Development
- Media Queries
- Week 9
- Twitter Bootstrap
- SASS
- Grunt / Gulp
- Week 10
- Advanced Javascript
- Week 11
- jQuery
- Week 12
- HTML5 + CSS3
- Week 13
- Object Oriented Programming with Javascript
- Handlebars HTML Templates
- Jekyll Site Generator
- Week 14
- Intro to Javascript Patterns + Require.js
- Intro to React.js
- Week 15
- Final Project: Critiques
- Final Project
- Final Project due with all end of course documentation!
See Appendix
See Appendix
See Appendix
See Appendix
See Appendix