Introduction to Web Design and Computer Principles

Class Notes

Refer to this page for class notes, examples, and scheduled reading.

Week 1 Topics and Examples Reading and Slides
Mon, Jan 26 Introduction and Overview Slides
Slide PDF
Wed, Jan 27 Unix Basic Unix Commands
Class 2 Slides
Class 2 Slides PDF
Week 2
Mon, Feb 1 Unix/HTML Slides
Slides PDF
Basic Html Example
Chapter 1: Structure
Chapter 2: Text
Wed, Feb 3 HTML Basic Html Example
Special Characters
Chapter 3: Lists
Chapter 4: Links
Week 3
Mon, Feb 8 HTML Chapter 5: Images
Chapter 6: Tables
Basic Html Example
Working with images
Absolute vs Relative paths
Wed, Feb 10 CSS Slides
Class 3 Slides PDF
CSS Example
CSS Color Codes
Chapter 10: Introducing CSS
Chapter 11: Color
Week 4
Mon, Feb 15 Presidents' Day No classes scheduled
Wed, Feb 17 CSS/HTML Metatag Slide
Metatag PDF
Chapter 8: Extra Markup
Chapter 12: Text
Start Guitar Site
Start Guitar Site Files
Finished Site
Finished Site Files
Week 5
Mon, Feb 22 CSS/HTML CSS Color Codes
Wed, Feb 24 Photoshop Photoshop Slides
Photoshop Slides
Visual Quickstart Guide
Chapter 7: Pixel Basics
Chapter 8: Layers
Chapter 11: Colors
Common Photoshop commands
Week 6
Mon, Feb 29 Photoshop Photoshop Files
Photoshop Files zip Photoshop CC Essential Training
Visual Quickstart Guide
Chapter 19: Type
Chapter 9: Selections and Masks
Chapter 13: Combining Images
Wed, Mar 2 Photoshop
Week 7
Mon, Mar 7 CSS/Review Code Review
Wed, Mar 9 Midterm Exam
Week 8
Mon, Mar 14 Spring Recess—No classes scheduled
Wed, Mar 16 Spring Recess—No classes scheduled
Week 9
Mon, Mar 21 Principles of Design Slides
Slides PDF
Wed, Mar 23 Wireframing Wireframing Slides
Wireframing PDF
Wireframe Line Drawing
Wireframe Collage
Box Model Image
Box Model example
Week 10
Mon, Mar 28 Wireframing/CSS Positioning Float and Display Example
Wed, Mar 30 Responsive Web Design CSS Positioning Slides
CSS Positioning Slides PDF
CSS Positioning Example
Responsive Slides
Responsive Slides PDF
Media Queries
Responsive site changing color
Week 11
Mon, Apr 4 Responsive Web Design Percentage Width Responsive
Responsive site wolf site
Responsive site wolf site
Wed, Apr 6 CSS3 CSS3 Slides
Basic Responsive Site
Basic Responsive Site Zip
Wolf Site
Wolf Site Zip
CSS3 Example
CSS3 Example Zip
Week 12
Mon, Apr 11 Animation Animation Slides
Animation Slides PDF
Displace Map GIF PSD
Displace Map GIF Animation PSD
Displace Map GIF
Penguin Party GIF
Penguin Party GIF
Penguin Party Tween GIF PSD
Wed, Apr 13 Animation Video Timeline files
Timeline gif
Timeline using video gif
Week 13
Mon, Apr 18 Web Frameworks Bootstrap Slides
Bootstrap Slides PDF
Bootstrap site
Bootstrap Basic Columns
Bootstrap Basic
Dino site
Dino site files
Wed, Apr 20 Web Frameworks Bootstrap with Menu and Carousel
Bootstrap with Menu and Carousel zip file
Week 14
Mon, Apr 25 Web Audio and Video Web: Audio and Video Slides
Web: Audio and Video Slides PDF
Audio Video Example
Audio Video Example files
W3Schools: HTML5 Audio
W3Schools: HTML5 Video
Audacity Quick-Start Guide
Miro Video Converter
Chapter 9: Flash, Video, and Audio
Wed, Apr 27 jQuery Javascript Slides
Javascript Slides PDF
Javascript Basics
Window Alert Output
Console Output
Basic Javascript
DOM Manipulation
Basic Jquery
Week 15
Mon, May 2 jQuery Wolf Jquery
Jquery and Retina Plugin
Jquery and Retina Plugin zip
Basic Jquery Setup
Basic Jquery Setup zip
Wed May 4 Web Hosting and Domain Names Web Hosting, Domains, and SEO
Week 16
Mon, May 9 Review