Web 1 - Opening Activities

Day 1 - (Min. Day)

Document: Activity 1
PowerPoint: Welcome to Class

Day 2 - (Min. Day)

Document: Web Design Syllabus
Document: Activity 3



Day 3 - (Min. Day)

Student Presentations (pairs)

Review Activity 1 Questions (online notes)

Web 1 Video: What is the Internet? (online notes)

Document: Activity 2 (online notes)


Day 4

Review Class Rules

  • Pay attention to the teacher - No talking while the teacher is talking
  • Raise your hand for assistance - Do not shout the teacher's name and please be patient
  • Work quietly - Collaboration is encouraged, but class volume must stay low
  • Take care of computer equipment - Do not change computer settings or delete files
* No food or drinks
* Remove earbuds/headphones before entering classroom

Go to online notes

Complete Activity 2 - * Many kids were at class meetings.

Review Activity 4 Questions

History of the Internet Presentation


Day 5

Complete Activity 0

Space Race Video

Yuri Gagarin Video

ARPA has become DARPA

A look back - old versions of modern websites

File Extensions (online notes)


Day 6

Complete Activity 0

Complete Activity .25

File Extensions (online notes and quiz)

Folder Manipulation

  • Title bar drag
  • Resize and position
  • Min, max, restore

Day 7

Complete Activity 0

Complete Activity .25

Window Manipulation

  • Taskbar window settings
  • Windows key + arrows
  • Alt-Tab for program switching

Create Folder Structure

Show Sublime Text 3

Show DreamWeaver

Document Activity 5 - Use multiple windows

Day 8

Create Seating Chart

Create Folder Structure:

Handout001 Angel
Handout002 Ryan
Handout003 Brock
Handout004 Jared

Compressing Files and Folders - Photos to Download (3)

 


Day 9

Compressing Files and Folders - Photos to Compress

Email teacher - compressed file

Extracting Files and Folders - Compressed (zipped file)

Keyboard Shortcuts:

  • Backspace (exit a folder)
  • Enter (go into folder)
  • Arrows (move)
  • Ctrl-X (cut)
  • Ctrl-V (paste)
  • Ctrl + Shift (multi-select adjacent files)
  • Ctrl + Spacebar (multi-select/delect non adjacent files)
  • Ctrl + Z (undo)
  • Ctrl + Y (redo)
  • Shift + F10 right-click menu

Classifications - Animal

Categorization - Target

Update Seating Chart

Animal Sort Zip - Sorting Images (practice and apply keyboard shortcuts)


Day 10

Target Sort Zip - Sorting Products (practice and apply keyboard shortcuts)

Keyboard Shortcuts:

  • Backspace (exit a folder)
  • Enter (go into folder)
  • Arrows (move)
  • Ctrl-X (cut)
  • Ctrl-V (paste)
  • Ctrl + Shift (multi-select adjacent files)
  • Ctrl + Spacebar (multi-select/delect non adjacent files)
  • Ctrl + Z (undo)
  • Ctrl + Y (redo)
  • Shift + F10 right-click menu

Color Sort.Zip - Sorting Objects (practice and apply keyboard shortcuts - multi-select)

Manipulate Text with Keyboard Shortcuts

Click on the following file for text edit practice:

interestingfacts.txt

Click on the following file for text edit practice (sort):

howtocatchaliar.txt

Copy the text from the above documents to a new Word document.

Use additional shortcut keys with file documents:

Double-click - word selection
ctrl-home - go to beginning of document
ctrl-end - go to end of document
shift + arrow - multi-character selection

The Essentials - Keyboard Shortcuts
ctrl-c = copy
ctrl-x = cut
ctrl-v = paste
ctrl-z = undo
ctrl-y = redo
ctrl-a = select all
alt-tab = navigate programs
ctrl-f = find

F2 = rename

F11 = maximized view

window key + D = minimizes all windows
window key + up arrow = maximize current window
window key + down arrow = restore current window


Day 11

Video - CybarWar Threat (site)

Take Notes


Day 12

Setup Day

Test Google Accounts

  • Log in to Network
  • Log in to Gmail
  • Map Network Drive - \\fs01-chs\classroom
  • Create Folder Structure on CHS file server

Complete Activity 0

Complete Activity .25

Visit Yahoo and look at source code

Using Sublime Text, code preview

(Save in the MyDemos folder with other folders, P1Code, P2Code, P3Code)

The basics - the document parts

p1code.html - basic - finished1


Day 13

Setup Day

Use Google Accounts

Review (switch workstations)

  • Log in to Network
  • Log in to Gmail
  • Map Network Drive - \\fs01-chs\classroom
  • Check Folder Structure on CHS file server

Complete Activity 0

Complete Activity .25

Using Sublime Text, code three pages

(Save in the MyDemos folder with other folders, P1Code, P2Code, P3Code)

The basics - the document parts

p1code.html - basic - finished1

Introduce tags:

  • Header 1, Header 2, Header 3
  • Horizontal Rule
  • Break
  • Emphasis
  • Ordered List
  • Unordered List
  • List Item

p2code.html - <h1>, <hr>, <br>, <em> - finished2
p3code.html - <h3>, <ol>, <ul>, <li> - finished3


Day 14

Part 1

Using Sublime Text, code three pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in MyDemos as p4code.html, p5code.html, p6code.html). Your final page should look like the finished link.

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p4code.html + css ------->finished4
p5code.html + css ------->finished5
p6code.html + css ------->finished6

p7code.html + css - make your own css using Rachel's Challenge HTML
p8code.html + css - make your own css using Rachel's Challenge HTML


Day 15

Part 2

Resources - 1 | 2

Using Sublime Text, code three pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in MyDemos as p4code.html, p5code.html, p6code.html). Your final page should look like the finished link.

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p4code.html + css ------->finished4
p5code.html + css ------->finished5
p6code.html + css ------->finished6

p7code.html + css - make your own css using Rachel's Challenge HTML
p8code.html + css - make your own css using Rachel's Challenge HTML


Day 16

Part 3

Activity .5

Resources - 1 | 2

Using Sublime Text, code three pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in MyDemos as p4code.html, p5code.html, p6code.html). Your final page should look like the finished link.

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p4code.html + css ------->finished4
p5code.html + css ------->finished5
p6code.html + css ------->finished6

p7code.html + css - make your own css using Rachel's Challenge HTML
p8code.html + css - make your own css using Rachel's Challenge HTML


Day 17 - Day 18

Part 4

Activity .5

Resources -

1 Original HTML

2 Color Names

3 Updated HTML

4 Color Scheme Generator

5 HTML Code Image

6 Web Safe Fonts

Using Sublime Text, code three pages. First do the HTML then add the <style> tags to the <head> section and add the CSS (Save in MyDemos as p4code.html, p5code.html, p6code.html). Your final page should look like the finished link.

Make sure to code your CSS with the <style> and </style> tags.
Remember, the style tags go in the head section.

p4code.html + css ------->finished4
p5code.html + css ------->finished5
p6code.html + css ------->finished6

p7code.html + css - make your own css using Rachel's Challenge HTML
p8code.html + css - make your own css using Rachel's Challenge HTML
p9code.html + css - make your own css using Rachel's Challenge HTML
p10code.html + css - make your own css using Rachel's Challenge HTML


Day 18-19-20

Part 1

Add the following images to a Web page - Learn <img> attributes
Image - 1 : 2: 3

<img src="mypic.jpg">

Learn about the Images folder.

<img src="Images/mypic.jpg">

Part 2 (Day 20)
Download required zip file and add the following images to a Web page:

Image - 1 : 2: 3

Make sure to provide a title (header) and a description paragraph for each image. - Learn <img> attributes and css for centering images.

activity006a.zip

<img src="mypic.jpg">

Learn about the Images folder.

<img src="Images/mypic.jpg">

CSS - display:block; and margin:auto; for centering images.


Day 21-23

Part 2
Finish Part 2

Image - 1 : 2 : 3 : 4 : 5

Make sure to provide a title (header) and a description paragraph for each image. - Learn <img> attributes and css for centering images.

Color Theory

The Color of Friendship (text) - Past into Word
Download and markup wth HTML - Learn <blockquote>, and <div>
Images - 1 2 3 4screenshot

(Advanced) The Color of Friendship - Demo only - Ids
demoactivityzip

<blockquote id="red">

Use color codes

Test Canvas

 

CSS Section - Color Theory