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

ITD 110 Schedule - Section 001N- Fall 2020

Revised: December 1, 2020

The 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.

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

Week 1
Course Introduction


  • starter.html - a file you can use as a start file for coding in this course
  • 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
  • File>Open in Browser (Ctrl O in any browser)
  • Introduction to NotePad
  • 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
  • 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
  • <!DOCTYPE html>, <html>. <head>, <body>, head and body sections, <title> tag
  • naming folders and pages - no spaces, lowercase (because case-sensitive on some servers), .html or .htm (use one consistently) for pages
  • Save and refresh - Brackets allows you to skip the refresh
  • <h1> ... <h6>, <p>, <br>, <hr>,
  • ordered and unordered lists
  • absolute and relative links
  • Tutorial 1 - HTML
  • Appendix B - HTML Elements and Attributes
  • 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
    • Lists
    • Linking
  • 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

  • Advantages of Brackets Over Notepad
    • color coding (once you have saved it as .html or .htm)
    • working files accessible from list at left
    • line numbers
    • tag and attribute suggestions
    • "fold up" sections of code
    • changes in code will be reflected in Live Preview without having to refresh/reload the page
  • <blockquote>
  • special entity characters (e.g. &nbsp;) ,
  • email links
  • images - img tag, height, width, and alt attributes
  • Making images into links
  • Validation
  • Using myDrive as your webspace - myDrive instructions - put everything in a folder called public; the public folder must be part of the URL the user enters in the browser, thus users should not see the myDrive logo or the file manager - more myDrive instructions (do not use the share or email alternatives described there)
  • To upload your files, you can either use the myDrive file manager or use an FTP program: Windows: CoreFTP, FileZilla, or CyberDuck:
    Mac: FileZilla, CyberDuck (all free download)
  • FTP settings for myDrive
    • host: mydrive.nvcc.edu
    • username: your myNova username
    • password: your myNova password
  • Uploading a folder and its contents to myDrive - simplest way is to zip the folder (right-click on the folder, and choose Send To>compressed (zip) folder, then upload the zip file, select it, and click on Upzip button at the far right - Judy Miller video showing steps (4 1/2 minutes)
  • Named Anchors/Fragment Identifiers -Skip Navigation links article
  • Keywords and Description Meta tags - important for search engine optimization (SEO) and click-through rates



Week 3

  • Advantages of NotePad++ over NotePad (once file is saved as html or htm)
    • color-coding
    • can have multiple tabs, one file per tab
    • line numbers
    • tag and attribute suggestions
    • "fold up" sections of code
    • Can launch browser from NotePad++ -View>View current file in
  • Deprecated tags and attributes
  • HTML comments <!-- -->
  • Proper Nesting - e.g. <b><i></i></b> or <i><b></b></i>
  • Indentation
  • HTML5 sectioning/semantic elements - <header>, <nav>, <article>, <aside>, <footer> vs. <div>
  • <em> vs. <i>, <strong> vs. <b>
  • description lists - <dl>, <dd>, <dt>
  • target attribute of <a> tag - _blank, some name
  • avoiding "click here" links (accessibility)
  • Coding Reminders and Absolute and Relative References
  • setting the base path <base href="url"> - useful when moving a document to a new location - rather than rewriting all the relative links in the document
  • Content Management Systems - WordPress, Drupal, Joomla
  • external, embedded, and inline CSS - external is generally best (ease of maintenance, consistency across pages)
  • styling tags - e.g. h2 {color:red}
  • CSS ways of specifying color - color names, hexadecimal, RGB (color, background-color)
  • Browser prefixes

Week 4


  Week 5
Web Design
  Week 6

Week 7

  • "Hands-On" Test on Chapters 1 and 2


  10/13 - no class, NVCC non-instructional day    
  Week 8

  • Tutorial 4 - Graphic Design with CSS

Week 9

Responsive Design


Graphic Design with CSS Assignment

Tutorial 5 - Designing for the Mobile Web

W3Schools Media Queries

W3Schools Media Queries Examples


  11/3 - Election (State Holiday)  
  Week 10

  • Tables and Columns

Tutorial 6 - Working with Tables and Columns

Tables section of Judy Miller tutorial

Assignment: Tutorial Coding Challenge 1 (see Canvas assignment)

  Week 11
  • Forms

Tutorial 7 - Designing a Web Form


Week 12


Week 13

Bootstrap - developed by Twitter, released in 2011

Not covered in class - for future reference


Week 14

12/8 - Final Exam


Terms you should understand



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