Intro to Web Development DM-UY 2193/B
#### Integrated Digital Media • Technology, Culture & Society Department
Jason Sigal [email protected] Spring 2016 • Mondays & Wednesdays • 2:30-4:20PM • Magnet Rm 813 • 3 credit hrs Office hours by appointment or directly after class
Readings & Resources
* Available as an ebook through [NYU Poly’s Library website](http://poly.libguides.com/ebooks) via books 24x7** Available as an ebook through NYU Poly’s Library’s website via Safari
COURSE BOOKS
- HTML & CSS Jon Duckett*
- JavaScript and JQuery: Interactive Front-End Web Development by Jon Ducket*
ADDITIONAL RESOURCES
HTML
- Head First HTML with CSS & XHTML by Elizabeth & Eric Freeman*
- Head First HTML5 Programming by Elizabeth & Eric Freeman*
- A Book Apart: HTML5 for Web Designers by Jeremy Keith
- Dive Into HTML5
- List of Free Programming Books: HTML/CSS
- http://www.w3schools.com/html/
CSS
- Book: CSS3 for Web Designers by Dan Cederholm
- Learn to Code HTML & CSS @ learn.shayhowe.com
- Scalable and Modular Architecture for CSS* flexbox cheatsheet
- List of Free Programming Books: HTML/CSS
- http://www.w3schools.com/css/
SASS
- Sass Install Sass Sass basics
- Sass documentation
- Lynda.com: CSS with LESS and Sass with Joe Marini
- Lynda.com: Foundation 4: Incorporating Sass and Compass with Jen Kramer
- https://scotch.io/tutorials/getting-started-with-sass
- Koala (SASS / LESS compiler)
SASS Syntax highlighting in Sublime Text
- Install Package Manager for Sublime Text
- Go to Tools > Command Palette. Type “Package Control”.
- Click “Install Package”* Type “Sass” and click the first result
- Click: View > Syntax > Sass
- Compiling SASS in Sublime Text
JavaScript
- Eloquent JavaScript
- Re-Introduction to JavaScript @ Mozilla Developer Network
- Advanced: Learning JavaScript Design Patterns by Addy Osmani
- A Crash Course in DOM Events
- Javascript Validator
- A pragmatic guide to Backbone.js apps
- http://www.w3schools.com/js/
JQuery Resources
- Tuts Network
- JQuery Documentation
- Javascript 101
- Using JQuery Core
- JQuery UI
- JQuery CheatSheet
- JQuery API Reference
- JQuery Plugins
- JQuery plugin: Superscrollorama
- Javascript vs. JQuery vs. CSS3 Transitions & Transforms
- W3 Schools jQuery tutorial
Debugging
FTP
Git / GitHub
User Experience
- Book: Don’t Make Me Think: A Common Sense Approach to Web Usability by Steve Krug*
- Book: The Principles of Beautiful Web Design, Second Edition by Jason Beaird*
- Book: Jesse James Garrett’s Elements of User Experience* http://www.jjg.net/elements/pdf/elements_simpleplanes.pdf http://www.jjg.net/elements/pdf/elements.pdf
- UX Magazine
- A Good User Interface
- Website: alistapart.com
- Website: smashingmagazine.com
Sitemaps
Typography / Font Resources
Color
Images
Grid Systems
Wireframes
- http://balsamiq.com
- http://moqups.com
- http://quirktools.com (wires, 3 free projects)
- Invision
- Guide for Consistent Sketches
- https://www.sketchapp.com/
- https://wireframe.cc/ (free)
- Google Docs Templates (Free)
Design Articles
- User Experience Design: Facebook and how UI's twist your words
- The Next Big Thing in Design? Less Choice.
- Streamlining the Design Process: User Flow to Final Design using Sketch app
Responsive / Mobile
Responsive Web Resources
- Book: Responsive Web Design by Ethan Marcotte
- Responsive Web Examples - http://mediaqueri.es
- Learn Shay Howe: Responsive Web Design
- Fluid Media
- Fluidly Tiled Background Images
- Media Queries Cheat Sheet
- css-tricks.com: Logic in Media Queries by Chris Coyier
Responsive Type
Responsive Templates
Mobile First Resources
- Book: Mobile First by Luke Wroblewski
- Luke Wroblewski’s 2011 Mobile First presentation
- Google’s Modern Workflow for Developing Mobile First (Video)
Mobile First Tools
Web Accessibility
- http://a11yproject.com/
- http://www.html5accessibility.com/
- Bootstrap Accessibility Plugin
- https://khan.github.io/tota11y/
- Accessibility Chrome Dev Tools Extension
Frameworks
Framework Resources (Bootstrap vs. Foundation)
- Top 5 core differences between Bootstrap and Foundation
- Responsive CSS Framework Comparison
- Learnable – Bootstrap vs. Foundation Video
- Bootstrap 3 vs Foundation 5 Frontend Framework Comparison
Foundation
- Foundation – http://foundation.zurb.com
- Foundation Templates
- Foundation Cheat Sheet
- Lynda.com: Up and Running with Foundation 5 with Jen Kramer
- Lynda.com: Foundation: Incorporating Sass and Compass with Jen Kramer
Bootstrap
- Bootstrap – http://getbootstrap.com
- Bootstrap3 Succinctly (Free book w/ registration)* Bootstrap examples
- Bootstrap Cheat Sheet
- Bootstrap Grid Examples
- Lynda.com: Up and Running with Bootstrap 3 with Jen Kramer
- Lynda.com: Bootstrap: Adding Interactivity to Your Site with Jen Kramer
- Decoded video w/ Jacob Thornton, co-inventor of Bootstrap
Git / GitHub* Github
- GitHub for Mac
- GitHub for Windows
- Free private repositories for students
- Understanding Github a Journey for Beginners Part 1
- Github glossary
- Github guides
- Github help
- The Official Git site
- Great in-depth guide to git, also a book
- Github Training & Guides on Youtube
- Introduction to GitHub & Git Foundations
- Other resources
- Keeping forks in sync
- codeschool.com: Git Basics
Additional Articles
A few readings that may be assigned during the course, and are otherwise optional.
Extract Photoshop files into Brackets text editor (video tutorial)
Web Design Processes:
- Web Design Process
- Introduction to Agile
- Agile vs. Waterfall
- 101 Ways to Make Your Website More Awesome
- atomicdesign.bradfrost.com
UX / Design
- User Experience Design: Facebook and how UI's twist your words
- The Next Big Thing in Design? Less Choice.
Additional Syllabi
Many of these resources, and additional resources, can be found in the syllabi of other Intro to Web Development courses: