Overview

• Why learning to code is important?
  • Hour of Code
  • CodeCademy.com
  • KhanAcademy.org Basic Web Design or Programming
  • UW Computer Science Program
  • Salaries
• Learn basics web design principles, HTML, and CSS  working with Adobe Dreamweaver
• Create a web splash page mock up in Adobe Illustrator representing the student’s portfolio of work
• Learn web design world of work workflow

Sample Blog Posts

• Maddie’s post
• Kirsten’s post
• Chase’s post
• Hailey’s post
• Kai’s post
• Rachel’s post
• Andrew’s post
• Max’s post
• Forrest’s post
• Shawnee’s post
• Joel’s post
• Hannah’s post
• Isaac’s post
• Talon’s post
• Chris’ post
• Amanda’s post
• Spencer’s post

Forms

• Design Feedback Form (PDF)
• Blog Post Feedback Form (PDF)
• Web Design Storyboard Rubric (PDF)

Goal of Project

• Learn basic web design principles of work flow, design, color, font, html and css positioning

Skills

• Standards For Web Design Unit (pdf)

Research

Example Tutorials

• Day 1 HTML Quiz Practice
  • Pre-assessment
  • HTML Basics and CSS
  • CSSZenGarden.com
• Day 2 HTML Quiz
  • HTML and CSS Relationship Basics
  • CSS Quiz Practice
• Day 3 CSS Boxes (Divisions – DIV’s) Basics
• Day 4 CSS Boxes with Images
• Day 5 Web Portfolio Pre-built HTML and CSS Files (Positioning Basics)
• Day 6 Paper Mock Ups, Layout and Navigation
• Day 7-8 Adobe Illustrator Prototype and Color
• Day 9a HTML and CSS Image Map Template
• Day 9b CSS Positioning & Button Templates
• Day 10 Slicing, or Rollovers or Sprites

Process

• Follow  each day’s tutorials to learn the code and then build your own splash page

Feedback Form Checklist

• Web Design Workflow Feedback Form (PDF)