William M. Pegram
Home | Courses | Web Design | Server-Side Scripting | About Me

ITE 170 Schedule - Spring 2021

Revised: April 7, 2021

This schedule will be updated with links to homework exercises and additional material as the course progresses.  The most current copy of this schedule can be found www.billpegram.com. Material below the X in the first column is tentative; students should not work on assignments shown below the X since the assignment will likely change. Some of the HTML/CSS material shown below we may not get to.

  Week Class Topics Reading/Homework Due (more will be added as course progresses) 
 

Week 1 - 1/12, 1/14

Course Introduction and HTML

  • Course information
  • Will any student be using a Mac for this course?
  • Student introductions

HTML

  • starter.html - a file you can use as a start file for coding in this course
  • File>Open in Browser (Ctrl O in any browser)
  • Viewing the source code of a web page in a browser - Chrome or Firefox: Right-click in empty area of page (not over an image)> View page source. Edge: Right-click in page> View source
  • Free Text editors
  • Advantages of NotePad++ over Notepad (once file is saved as .html or .htm) (i.e. desirable features of a text editor)
    • color-coding
    • can have multiple files open, one file per tab
    • line numbers
    • tag and attribute suggestions when you type first letter
    • "fold up" sections of code
    • click on opening tag shows you the corresponding end tag
    • Can launch browser from NotePad++ program to display file in tab
    • some error finding
  • <!DOCTYPE html>, <html>. <head>, <body>, head and body sections, <title> tag
  • When you make a change in the file in the text editor, you must save the file and refresh/reload the page in the browser
  • Is the extension html or htm - making filename extensions visible: In Windows 10, click on the Folder icon in the task bar to open in File Explorer, then select "View" on the menu and check the box "File name extensions". For earlier Windows operating systems, do a search on this topic.
  • Browsers ignore whitespace in file
  • naming folders and pages - no spaces, lowercase (because case-sensitive on some servers), .html or .htm (use one consistently) for pages
  • <h1> ... <h6>, <p>, <br>
  • Validation
HTML Tutorial
  • So You Want to Make a Website
  • Creating Your First Web Page
  • Naming Your Page
  • Viewing Your Page in a Browser
  • Revising Your Web Page
  • Validation

W3Schools HTML Tutorial

  • HTML Intro
  • text editors and viewing your page in a browser
  • HTML Basic Examples
  • HTML Elements
  • HTML Attributes
  • HTML Headings
  • HTML Paragraphs
 

Week 2 - 1/19, 1/21
HTML

  • domain names and hosting plans
  • FTP to Server - CoreFTP (video on Canvas course site), FileZilla (https://www.youtube.com/watch?v=adxmlHDim6c)
  • Creating absolute and relative links
  • images - img tag, height, width, and alt attributes
  • HTML comments
  • Making images into links
    ---------------------------------------------
  • Can use www.ite170.com as hostname in FTP program instead of IP address
  • <br> tag
  • proper nesting of tags for readability of code - e.g. <b><i></i></b> rather than <b><i></b></i>
  • ordered and unordered lists
  • special entity characters (e.g. &nbsp; characters not on keyboard (e.g. &copy); characters that have a meaning in HTML(e.g. &lt;) - all of these also have numeric codes
  • <hr> - horizontal rule, also indicates a shift in topic
  • HTML5 Semantic elements
  • Link to Named Anchors/Fragment Identifiers - Jump to top, fragment identifier example, skip navigation links for accessibility, Skip Navigation links article
 

Week 3 - 1/26, 1/28
CSS

Cascading Style Sheets

  • The role of HTML and CSS in a website
  • external, embedded, and inline CSS - external is generally best (ease of maintenance, consistency, responsiveness (can have different styles for different viewports (devices) through use of media queries (later in course)
  • styling tags - e.g. h2 {color:red}
  • CSS ways of specifying color - color names, hexadecimal, RGB
  • commonly used CSS properties - color, font-size, background-color, font-family (specifying first, second, and third choices)
  • specificity - to decide between conflicting rules
  • CSS classes and id's
  • CSS comments
    -----------------------------------
    begin here 1/28
  • text-align property (replaces deprecated align attribute)
  • span tag
  • text-decoration - possible values include none and underline

Overriding examples

Background Images and tiling
 

Week 4 - 2/2, 2/4

 

  Week 5 - 2/9, 2/11
  • downloadable fonts
  • Advantages of Google and AdobeFonts
    • don't have to worry or be constrained by what fonts are on users' machines
    • unlike downloadable fonts in general, don't need to have rights to use the font
    • if user visits your site that has used a Google or Adobe font, they might have visited another site using the same Google or Adobe font, and hence font is already downloaded
  • Coding Reminders and Absolute and Relative References (ppt)

 

  Week 6 - 2/16 (start Animate), 2/18 (no class - NVCC closed due to weather)  

Week 7 - 2/23, 2/25

 

 

 
  Week 8 - 3/2 (instructor cancelled 3/4)

 

 

Spring Break - 3/8-3/14

   
  Week 9
3/16, 3/18
 
 

Week 10
3/23, 3/25



  • Photoshop Chapter 1, 2
  • Get to know Photoshop (Adobe video)
    • Open and create images (3 minutes)
    • Tour the work area (4 minutes)
    • Zoom and pan (5 minutes)
    • Undo a command (5 minutes)
    • Save your work (4 1/2 minutes)
    • My notes on the video
  • Adjust the image quality (Adobe video)
    • Adjust brightness and contrast (4 minutes)
    • Adjust color vibrance (3 minutes)
    • Adjust hue and saturation (5 minutes)
    • Learn about adjustment layers (4 minutes)
  • Retouch images (Adobe video)
    • Remove small objects (4 minutes)
    • Add objects by cloning (3 minutes)
    • Remove a large object (3 minutes)
    • My notes from the video

 

 

 

  Week 11 - 3/30, 4/1


 

  • Make selections (Adobe video)
    • Learn selection basics (4 minutes)
    • Learn how to use the Quick Selection and Lasso Tools (5 minutes)
    • Fine tune a selection (5 minutes)
  • Work with layers (Adobe video)
    • Understand layers (5 minutes)
    • Learn layer basics (5 minutes)
    • Resize a layer (4 minutes)
    • Add images to a layered design (4 minutes)
    • Unlock the background layers (4 minutes)
  • Use color (Adobe video)
    • Work with brushes (5 minutes)
    • Use foreground and background colors (2 minutes)
    • Choose a color (3 1/2 minutes)
  • Add text and shapes (Adobe video)
    • Add text (5 minutes)
    • Edit text (4 minutes)
    • Create a graphic shape (4 1/2 minutes)
    • Add a built-in custom shape (3 1/2 minutes)
    • My notes from the video
  • Photoshop layers assignment
 

Week 12
4/6, 4/8

 

Week 13
4/13, 4/15

 

 

Week 14 - 4/20, 4/22


Add Effects Video Clips (Adobe video)
  • Add Transition Effects
  • Add Visual Effects
  • Stabilize a Clip
  • Create Effects Presets
  • My notes on the video

  • Project due 4/27/21 (revised 3/29/21)
 

Week 15 -

Thursday 4/29
10am-11:40am

 
Topics not covered or assigned Flash Short Assignment 2
Flash Assignment 3

Extra material -

Sample Multiple Choice Questions

Dreamweaver Videos (will be added as appropriate to the weeks above)

Animate Videos

Premiere Pro Videos (will be added as appropriate to schedule above)

Resizing images in Photoshop (sample photo)

Working with Images (slides 2-5 only - gif and jpg formats)

Domain names

Homework 6

Forms homework