* Still Available: In the Classroom Files, Spring 2017

* Still Available: In the Classroom Files, Fall 2016
* Course Units: Using Standard District Template

 

* Ms. Anderson's Intro. Web Design, Fall 2017

 

December11 - 15, 2017: week #15

HTML
CSS

Week Outline and Class Objectives

 

*Priorities for Tuesday in Order:

1. New Balance Recreate Resources

- video

- Full Root Folder resources

2. Create Your own Page, Activity

3. Problem Solving- pink stinky notes

4. Extra Challenge: HTLM & CSS, {Tag: You Are It!} (optional and with partner)

 

Understanding File Structure, Review on Socrative (enter into room #123341)

 

• HTML & CSS Combination

Page Re-Create with Class, New Balance & One Side Page
Re-Create Focus: Header, Hero Image, Content Area & Footer

* Video Resource
Example of how to Submit (In Google Doc, screenshot of home page, 1 side page & copy and paste your code)
---

Create Your own Page, Activity

Extra Challenge: HTLM & CSS, {Tag: You Are It!} (optional and with partner)

 

Helpful Resources

- Text Edit Preferences

- HTML tag cheatsheet

- HTML5 tag cheatsheet

- Saving Images for Web

---

- CSS (all versions) Resource
- Introduction to CSS

- CSS Defaults
- Reset CSS

- Skeleton for start of HTML and CSS page

To Come...
Unit Exam Study Guide

Unit Exam to be Linked

Homework #1: Complete New Balance and Create Your Own File

1. Create a Google Doc titled: Web, New Balance
In this file include a screen shot of your file in a browser and then copy and paste your code under the screen shot

2. Create a Google Doc titled: Web, Create My Own

In this file include a screen shot of your file in a browser and then copy and paste your code under the screen shot

*Any issues you had on either of these files document them in the top of the Google Doc. DO NOT DRIVE YOURSELF CRAZY!!

 

DONT WORRY ABOUT BELOW UNTIL AFTER CLASS ON THURSDAY

Homework #2: Study for Unit Exam

Homework #3: Project Proposal Example, site title, site map, complete with resource site, color combination, and home page wireframe (due December 18th)
* Required Pages in Site Map: Home, Design and Two Pages of your Choice

Helpful Resources

Color Combos for color combo

Adobe Kuler for color combos

---

Site Resources
themeforest.net - attractive

Word Press Templates - attractive
themeforest.net/item/mobile/full_screen_preview/7057821 - responsive site

www.webpagesthatsuck.com - not so attractive

Submit Bi-Weekly Blog, #5

 

December 1 - 8, 2017: week #14

HTML
CSS

Week Outline and Class Objectives

 

*Hour of Code Visitor

Understanding File Structure, Review on Socrative (enter into room #123341)

 

• HTML & CSS Combination

Page Re-Create with Class, New Balance & One Side Page
Re-Create Focus: Header, Hero Image, Content Area & Footer

* Video Resource
Example of how to Submit (In Google Doc, screenshot of home page, 1 side page & copy and paste your code)
---

Create Your own Page, Activity

Extra Challenge: HTLM & CSS, {Tag: You Are It!} (optional and with partner)

 

Helpful Resources

- Text Edit Preferences

- HTML tag cheatsheet

- HTML5 tag cheatsheet

- Saving Images for Web

---

- CSS (all versions) Resource
- Introduction to CSS

- CSS Defaults
- Reset CSS

- Skeleton for start of HTML and CSS page

To Come...
Unit Exam Study Guide

Unit Exam to be Linked

Homework #1: Build the bottom two divs on the New Balance page by using this video as a guide.

*FYI for additional help- Resource to Full Root Folder for New Balance Recreate. In the sources folder has more video tutorials.

Homework #2: Try what you did for homework #1 in your "Build Your Own" page file.

Exit Slip/Blog Skip Week

 

November 27 - December 1, 2017: week #13

HTML
CSS

Week Outline and Class Objectives

 

*Hour of Code

 

Understanding File Structure, Review on Socrative (enter into room #123341)

Kahoot HTML Review with HTML Worksheet

 

• HTML & CSS Combination

Page Re-Create with Class, New Balance & One Side Page
Re-Create Focus: Header, Hero Image, Content Area & Footer

* Video Resource
Example of how to Submit (In Google Doc, screenshot of home page, 1 side page & copy and paste your code)
---

Create Your own Page, Activity

Extra Challenge: HTLM & CSS, {Tag: You Are It!} (optional and with partner)

 

Helpful Resources

- Text Edit Preferences

- HTML tag cheatsheet

- HTML5 tag cheatsheet

- Saving Images for Web

---

- CSS (all versions) Resource
- Introduction to CSS

- CSS Defaults
- Reset CSS

- Skeleton for start of HTML and CSS page

Homework #1: Complete Create Your own Page, Setting up root folder, index page and nav bar (due, December 4th)

Homework #1: Mitch Resnick, Let’s Teach Kids to Code & Reflection
(How has the expansion of code/technology affected your life and the importance of understanding how code/technology work) Due December 6th

Submit Bi-Weekly Exit Slip, #6

 

November 13 - 17, 2017: week #12

HTML
CSS

Week Outline and Class Objectives

 

Understanding File Structure, Review on Socrative (enter into room #123341)

 

• HTML

Codecademy, Introduction to HTML chapter assignment
Introduction to HTML worksheet (use w3schools.com as a reference)

 

Basics in Text Edit:

Tags to reiview/learn: skeleton of file, p, headings, images, link, br, lists, tables

 

HTML Helpful Resources

- Text Edit Preferences

- HTML tag cheatsheet

- HTML5 tag cheatsheet

- Saving Images for Web

- HTML Handbook

 

•  CSS

CSS Worksheet (use www.w3schools.com as a reference) - if need the time

Introduction/Review of CSS in Text Edit: Skeleton, Selectors, Divs, reset.css Cascading, Box Model & Building a Nav Bar

File Structure: Setting up Your Root Folder and Relative Paths

 

CSS Helpful Resources

- Skeleton for start of HTML and CSS page

- CSS (all versions) Resource
- Introduction to CSS

- CSS Defaults
- Reset CSS

- Skeleton for start of HTML and CSS page

 

• HTML & CSS Combination

Page Re-Create with Class, New Balance & One Side Page
Re-Create Focus: Createing Side Page, Class vs. Id, & Submiting.
Example of how to Submit (In Google Doc, screenshot of home page, 1 side page & copy and paste your code) Due Date, TBA

Homework #1: Complete HTML worksheet and CSS Worksheet by end of the week

Submit Bi-Weekly Blog, #5

 

November 6 - 10, 2017: week #11

HTML

Week Outline and Class Objectives

 

• HTML

Codecademy, Introduction to HTML chapter assignment
Introduction to HTML worksheet (use w3schools.com as a reference)

 

Basics in Text Edit:

Tags to reiview/learn: skeleton of file, p, headings, images, link, br, lists, tables

 

HTML Helpful Resources

- Text Edit Preferences

- HTML tag cheatsheet

- HTML5 tag cheatsheet

- Saving Images for Web

- HTML Handbook

Homework #1: Reading and Writing for the Web Assignment (due, November 10th)

* Read article create Google Doc titled "Intro. Web, Reading and Writing for the Web" include 10 key points from what you learned in the article. Share with LCullen@natickps.org

Submit Bi-Weekly Exit Slip, #4

 

October 30 - November 3, 2017: week #10

Design and Photography Principles

Week Outline and Class Objectives

 

Design and Photography Unit Exam

Design and Photography Unit Survey

and Submit unit notes!

 

• Design Principles & Photography Composition

Color Focus (continue to take notes in Google Doc):
- Kuler
- Color Combos
- Color meanings in Business/Marketing

- The psychology of color, Infographic

- Choosing the Right Color for your Brand, video

---

• Design Principles & Photography Composition Wrap Up
Unit Exam Review on Socrative (enter into room #123341)

Unit Exam (to be linked)

 

To Submit:

Design Principles, Exploring Post-Assessment Assignment (complete final step in original Google Doc)

Design Principles and Photography Composition, Notes Example
(All notes and activities from this unit should be covered in one Google Doc which will be shared with the teacher at the end of the unit)

Design and Photography Unit Survey

 

• If Time to Explore

templated.co- attractive
themeforest.net - attractive
www.webpagesthatsuck.com - not so attractive
themeforest.net/item/mobile/full_screen_preview/7057821 - responsive site
http://www.templatemonster.com/demo/48160.html - responsive site

 

• HTML

Videos to Inspire

What Most Schools Don't Teach, Inspiration in Coding

Mitch Resnick, Let’s Teach Kids to Code & Reflection (optional if time)

 

File Structure, Pre-Assessment

Understanding the Structure of an HTML File, Pre-Assessment

Homework #1: Mood Board Project, to bring it all together (due Tuesday, October 31st)
Assignment Example

Homework #2: Study for Unit Exam on Thursday, November 2nd

Exit Slip and Blog Break

 

October 23 - 27, 2017: week #9

Design and Photography Principles

Week Outline and Class Objectives

 

Photoshop Unit Survey

 

• Design Principles & Photography Composition

Design Principles, Exploring Pre-Assessment Assignment

Example Assignment
---
Design Principles Presentation
Photography Composition Presentation

Food Photography Tricks

---

Color Focus (continue to take notes in Google Doc):
- Kuler
- Color Combos
- Color meanings in Business/Marketing

- The psychology of color, Infographic

- Choosing the Right Color for your Brand, video

---

New Balance Design Video
Worksheet to Go with Video

 

Design Principles and Photography Composition, Notes Example
(All notes and activities from this unit should be covered in one Google Doc which will be shared with the teacher at the end of the unit)

 

• If Time to Explore

templated.co- attractive
themeforest.net - attractive
www.webpagesthatsuck.com - not so attractive
themeforest.net/item/mobile/full_screen_preview/7057821 - responsive site
http://www.templatemonster.com/demo/48160.html - responsive site

 

To come... Design and Photography Unit Wrap Up (Socrative)

Homework #1: Mood Board Project, to bring it all together (due Tuesday, October 31st)
Assignment Example

Submit Bi-Weekly Blog, #4

 

October 16 - 20, 2017: week #8
Photoshop- Magazine Madness

Design and Photography Principles

Week Outline and Class Objectives


•  Photoshop

Magazine Madness Project

Magazine Madness Directions & Rubric

Step by Step Directions if Duplicating from in Class

---

Photoshop Wrap Up

- Magazine Madness Gallery Walk
(display cover on screen. Leave two comments on one computer with sticky note: one positive about cover and one need to work on comment. Then with yellow sticky note vote for your favorite cover)
- Submit Magazine Madness Cover
(in a Google Doc share the following: screen shot of original cover, screen shot of the cover you created and screen shot of your layers panel as well type in the comments which were left on your screen and share with LCullen@natickps.org)

 

Photoshop Wrap Up with Kahoot!

 

• Design Principles & Photography Composition

Design Principles, Exploring Pre-Assessment Assignment
Design Principles, Trivia Pre-Assessment (can not open with Chrome)
(Take the quiz at the quiz time button. Hit "submit" after each answer. Take a screen shot of your score and share that screen shot in a Google Doc.)

---
Design Principles Presentation
Photography Composition Presentation

 

Design Principles and Photography Composition, Notes Example
(All notes and activities from this unit should be covered in one Google Doc which will be shared with the teacher at the end of the unit)

 

To come... food photography, color, Designing at Website with New Balance

Homework #1: None at this time

Submit Bi-Weekly Exit Slip, #4

 
October 10 - 13, 2017: week #7
Photoshop- Magazine Madness

Week Outline and Class Objectives

 

Mass Bay Community College, Guest Speaker!


•  Photoshop

Magazine Madness Project

Magazine Madness Directions & Rubric

Step by Step Directions if Duplicating from in Class

Magazine Gallery

 

Font Downloads which may be helpful!

---

Those Looking to Learn More....

Content Aware- video tutorial
Content Aware- photo resource

 

Red Eye Removal- video tutorial

Red Eye Removal- collect own photo source

---

Photoshop Games!

Real or Photoshop Game

Pen Tool Challenge

Cool Colors Challenge

 

Have Time...

Photoshop Ping Pong (optional & after Magazine Madness)

Photoshop Ping Pong NHS Showcase
Photoshop Ping Pong Examples Outside Natick
Photoshop Ping Pong image to download option 1option 2option 3

 

If Time on Friday at the end of Class (if not will do upon return on Tuesday)

• Photoshop Wrap Up

- Magazine Madness Gallery Walk
(display cover on screen. Leave two comments on one computer with sticky note: one positive about cover and one need to work on comment. Then with yellow sticky note vote for your favorite cover)
- Submit Magazine Madness Cover
(in a Google Doc share the following: screen shot of original cover, screen shot of the cover you created and screen shot of your layers panel as well type in the comments which were left on your screen and share with LCullen@natickps.org)

 

To come.... Photoshop Wrap Up with Kahoot!

Homework #1: None at this time

Submit Bi-Weekly Blog, #3

 
October 2 - 6, 2017: week #6
Photoshop- Magazine Madness

Week Outline and Class Objectives


•  Photoshop

Photoshop Skills Checklist Activity- to submit

Example of File to Submit

-----

Magazine Madness Project

Magazine Madness Directions & Rubric

Step by Step Directions if Duplicating from in Class

Magazine Gallery

 

Font Downloads which may be helpful!

---

Those Looking to Learn More....

Content Aware- video tutorial
Content Aware- photo resource

 

Red Eye Removal- video tutorial

Red Eye Removal- collect own photo source

---

Photoshop Games!

Real or Photoshop Game

Pen Tool Challenge

Cool Colors Challenge

 

To come.... Photoshop Wrap Up & Kahoot!

Homework #1: None at this time

Submit Bi-Weekly Exit Slip, #3

 
September 25 - 29, 2017: week #5
Photoshop

Week Outline and Class Objectives


•  Photoshop
Photoshop Gallery Activity
Photoshop Gallery Activity (examples from outside the box)

---

Photoshop Skills Checklist Activity

- Example of Photoshop Skills Checklist Activity (at the top level)

-----

Photoshop Games!

Real or Photoshop Game

Pen Tool Challenge

Cool Colors Challenge

Homework #1: Magazine Madness Proposal. In Google Doc include: Magazine you will duplicate, image of yourself you will put on that magazine and the replacement text. Due September 26th

- Example of Magazine Madness Proposal

- Final Product Example (this we will work on for several classes but the homework assignment above helps you plan for the final product.)

Submit Bi-Weekly Blog, #2

 
September 18 - 22, 2017: week #4
Photoshop

Week Outline and Class Objectives


•  Photoshop
Next Revolution in Beauty, A-dobe Fotoshop (entertaining commercial)

Photoshop Interface --> Red Shirt Project

---
Photoshop Gallery Activity
Photoshop Gallery Activity (examples from outside the box)

---

Photoshop Skills Checklist Activity

- Example of Photoshop Skills Checklist Activity (at the top level)

-----

Photoshop Games!

Real or Photoshop Game

Pen Tool Challenge

Cool Colors Challenge

Homework #1: Magazine Madness Proposal. In Google Doc include: Magazine you will duplicate, image of yourself you will put on that magazine and the replacement text. Due September 26th

- Example of Magazine Madness Proposal

- Final Product Example (this we will work on for several classes but the homework assignment above helps you plan for the final product.)

Submit Bi-Weekly Exit Slip, #2

 
September 11 - 15, 2017: week #3
Photoshop

Week Outline and Class Objectives

 

• Misc.

Submitting Welcome Letter and Flash Drive

Grading for Semester

Sharing a Google Doc


•  Photoshop
Next Revolution in Beauty, A-dobe Fotoshop (entertaining commercial)

Photoshop Interface --> Red Shirt Project
Teach Your Friend, magic wand vs. quick selection (image to learn on) or tool of your choice
Photoshop Gallery Activity

Photoshop Skills Checklist Activity

- Example of Photoshop Skills Checklist Activity (at the top level)

-----

Photoshop Games!

Real or Photoshop Game

Pen Tool Challenge

Cool Colors Challenge

Homework #1: Submit Welcome Letter and Purchase Flash Drive

Class Blog, Example

Submit Bi-Weekly Blog, #1

 
September 5 - 8, 2017: week #2
Introduction to Course
Photoshop

Week Outline and Class Objectives

 

• Forms to Fill Out & Info to Know
Welcome Letter
Introductions, Turn Around and Meet My Friend


•  Photoshop
Next Revolution in Beauty, A-dobe Fotoshop (entertaining commercial)

Photoshop Interface (very basics)

To Cover In Class: Selection Tools, Eraser, Brushes, Text, Layers, Filter Gallery, Adjustments Panel, Shapes, Pen Tool, Crop, Clipping Mask, Characters Panel, Transparency, Image/Canvas Size & Saving
Teach Your Friend, magic wand vs. quick selection (image to learn on)
Photoshop Gallery Activity

-----

Photoshop Games!

Real or Photoshop Game

Pen Tool Challenge

Cool Colors Challenge

Homework #1: Submit Welcome Letter and Purchase Flash Drive

Submit Bi-Weekly Exit Slip, #1
 
August 28 - September 1, 2017: week #1
Introduction to Course

Week Outline and Class Objectives

• Forms to Fill Out & Info to Know
Natick High Web Design, Gallery Site
Welcome Letter

Mailbox Messages, Stinky Fish or Magic Wand

Fire Escape Plan from room 201
Computer Experience Survey

Tweet of the Week @LoriCullen19
Introductions, Turn Around and Meet My Friend


• Vidoes to Influence
Here is to the Crazy Ones
Smart is Sexy
Why I Create, by: Adobe

 

Homework #1: Submit Welcome Letter and Purchase Flash Drive

Introduction to weekly exit slip, 3:2:1 and Class Blog. (Example)