This topic list is a tentative outline and subject to change. See the course schedule page for the actual assignments.
- Module 0
- What we will do in this course:
- Web Publishing (HTML/CSS) both with and without a CSS framework
- Web Application Development (HTML/CSS/JavaScript)
- Web Game Development(JavaScript/Pixi.js)
- Review
- Basic HTML/CSS
- Posting to Banjo
- CRAP Design Principles
- ssh & basic Unix commands
- Image Basics (compressed v. uncompressed, formats)
- Photoshop - cropping & scaling images, exporting in proper formats
- What we will do in this course:
- Module 1 - Basic Web Publishing
- Web Servers:
- HTTP Protocol: request phase, response phase, status codes, headers, content-type
- .htaccess file directives: Modpagespeed, Redirect, ErrorDocument, Authorization, Option +Indexes
- Basic PHP
- HTML5 Semantic Tags
- CSS 3 Selectors
- CSS for layout
- Responsive Design - Darth ICE or Similar
- GitHub
- HW: Custom 404 Page, authentication
- Project: Multi-page web site for their game
- Web Servers:
- Module 2 - Client Driven Interactive Applications
- ICE: ToDo List using web storage
- HTML Widgets (dropdowns, inputs)
- ICE: JS App that loads and displays our web-service.php data
- ICE: Web Service ICE (Ajax via jQuery, utilizes iTunes Music web service, JSON format)
- Module 3 - Client-side DOM Games (Typing Game, Concentration, Snake, Magnetic Poetry, etc)
- More CSS for layout
- CSS Transforms
- CSS Animations
- Basic JavaScript: variables & scope, loops, conditionals, functions, arrays
- DOM Methods: querySelector(), querySelectorAll(), createElement(), setAttribute(), .innerHTML
- requestAnimationFrame() for timing
- events: addEventListener(), load, click, change
- HTML 5 Web Storage for local high scores
- ES6: let, block scoping, classes, arrow functions, string templating, for/of
- Project DOM Game or Interactive Application
- Module 4 - Building a Portfolio (thoughout semester, several deliverables)
- Reinforce Responsive Design
- Bootstrap
- Discuss publishing to GitHub Pages, LinkedIn, Behance, etc ...
- Portfolio Project - Single Page Responsive App published to Banjo
- Module 5 - Interactive Graphics
- More JS: Object Literals,
- PixiJS
- Game Project
- HTML
- HTML 5 Sematic Tags
- input tags
- CSS
- Selectors: type, class, id, some CSS 3 selectors
- CSS Rollovers
- Media Queries
- CSS 3 Animations
- Basic JavaScript
- variables & scope
- data types
- loops
- conditionals
- functions
- arrays
- object literals
- DOM
- Objects: window, document, body
- Methods: querySelector(), querySelectorAll(), addEventListener()
- Events: onload, onclick, onchange
- Graphics Rendering
- PixiJS
- Collaboration
- GitHub
- Web Applications
- Ajax
- jQuery
- JSON
- Web Design
- Navigation
- Single-Page Design
- Responsive Design
- Web Publishing
- FTP to banjo
- And you should be able to figure out how to publish to these services:
- GitHub pages
- portfolios.rit.edu
- behance.net
- Project 1 - Game Proposal Site - #1 Deliverable is content posted to GitHub.
- Project 2 - Educational DOM Game or Web Application
- Project 3 - Interactive Game Or Experience (Sprite Based)
- Mini Project - Web Portfolio