ITD 110 Web Page Design I


Instructions - Spring 2019

Last Update: April 26, 2019

  • See the Semester Schedule available in Blackboard (under Course Documents) for the due dates for your section.
  • DE assignments are usually due each Thursday.
  • M1 assignments are usually due each Friday.
  • You will complete most of your assignments, projects and quizzes using the Code Avengers web site this semester.
  • Read the FAQ.
  • Click the icons (Word, green ball, PDF) to view more details for each assignment
  • If you need to be out of town, then work ahead. All the assignments for this semester are already posted.
  • You will FTP assignments to a web server during the last half of the semester.
  • DE Students:
    • Assignments are due at noon on each due date (usually Thursday)
    • See the NRCC proctored testing information at the beginning of the semester if you cannot take the final MTA certification exam at the Dublin or Mall locations.
  • Classroom Students: (Spring semester only)
    • Assignments are due at the beginning of class time.


All Students:

  • Email questions to Mrs. Eaton at
  • Important: Use Subject: ITD 110 Question - Your Name to help me respond to your emails faster. I do not respond to emails that do not have a subject.
Week Starts Assignment to Submit More Helpful Info

Week 1
Jan 21

You will submit some items in Blackboard this week to start.

Word DE Students - #1 Getting to know you quiz (20 points) Submit in Blackboard
Update 9/5/18: Ignore #16. This question does not apply to DE students.

Word Classroom Students - #1 Getting to know you quiz (20 points) Submit in Blackboard

#2 Code Avengers Proof of Purchase Submit your a snap pic or scan of Code Avengers Proof of Purchase and/or receipt in Blackboard. (20 points)

bullet1 #3 Get Started with Code Avengers (20 points) Nothing to submit in Blackboard. I will score from the Code Avengers System.

Video Instructions

Meet your instructor, Mrs. Eaton
  • Buy your materials this week.
  • Read Course Info (click button in navigation bar)
  • Read FAQ Frequently Asked Questions (click button in navigation bar)

Read Software FAQ

IMPORTANT - Code Avengers

1/14/19 Update: Code Avengers is ready for our class. Create an account as an individual. In your profile, add the class code of SP19110 this semester. This is the semester and year, and then the class number 110. If you are in the DE section, then add the class code of SP1911035. If you are also taking ITP 140 "Javascript" this semester, then use the code SP19110140

I am the Code Avengers administrator, I will update you to paid status after you submit your Code Avengers voucher in Blackboard. i will check once a day for upgrades.

Week 1 continued OPTIONAL Degree Track Sheet for DE students
If you want my help with planning your classes, then complete this. If you don't then don't. (20 points)
Important: If you are in another class with me this semester, then submit a document that states the class where you already completed the track sheet. You don't need to do the track sheet twice this week.

Note: If you are not an IT major, then check with your advisor or instructor for the location of track sheets for your degree program.

Week 2
Jan 28


Code Avengers– HTML/CSS 1 (100 points)
-- Lesson 1 Paragraph and Break tags
-- Lesson 2 Title, Heading & Strong Tags
-- Lesson 3 Fixing Common HTML Mistakes
-- Lesson 4 Image Tag

Video Instructions

YouTube Code Avengers: How to check your progress for all courses

Blackboard assignment
bullet1 Teams (25 points)
Note 1/28/19: Teams have been added to the Classmates page.

bullet1 Basic HTML page - Hello World

  • Right click to download and save in your itd110 folder.
  • View the file using Notepad to see the tags.
  • These are the tags required for complete web pages. It should help you understand the order of tags.
Week 3
Feb 4

Do Lessons first. Then you have the skills to do the Blackboard Assignment.

Code Avengers– HTML/CSS 1 (100 points)
-- Lesson 5 Linking Pages using the Anchor Tag
-- Lesson 6 More Common Mistakes
-- Lesson 7 Review Lessons 1-6
-- Lesson 8 Formatted Lists and Paragraph

Blackboard Assignment
bullet1 #2B About Me Page for ePortfolio (20 points)

About Me Page Assignment starts your ePortfolio

Web Graphics Styling Basics

bullet1 Irene Pond Gazebo Image
Classroom students. Right click to download and save in your itd110folder.)


Week 4
Feb 11

Do Lessons first.

Code Avengers– HTML/CSS 1 (100 points)
-- Lesson 9 Google Style Guild for HTML
-- Lesson 10 Header, Footer & Section Tags
-- Lesson 11 Introduction to CSS
-- Lesson 12 Common CSS Mistakes

Blackboard Assignment
bullet1 4B LinkedIn Profile

Check out the US Dept of Labor Newsletter for this month; 304K new jobs in January 2019
Click the image below:

CSS Zen Garden - view hundreds of css designs to understand the power of CSS, and inspiration

CSS Introduction pages 102-103 from Basics of Web Design HTML5 & CSS3 by Terry Felke-Morris

10 Tips for Getting Started on your Web Design Project (From the Adobe blog)

Linked In Page continues your ePortfolio

Hall of Fame - Sp 2019

Oliver Lavery - pic and bkg
Agnes Toth - everything


Week 5
Feb 18


DE Students

Read Blackboard announcements for Snow Day info.

YouTube FTP using Dreamweaver CC


Dreamweaver Course Notes

Helpful Hints
Updated 2/19/19: Be sure that you FTP the following to the web server:
- index.html
- eportfolio.css (external style sheet)
- aboutme.html (updated and linked to use your external style sheet)
- image files (named correctly and in images folder

bullet1 5B ePortfolio Home Page
(Points shown in next assignment)

5C FTP and Dreamweaver (65 points)
Assignment will be graded from the web server. You will FTP your ePortfoilo files to the web server for this assignment.

Code Avengers– HTML/CSS 1 (100 points)
-- Lesson 13 Using Pretty Fonts
-- Lesson 14 Add Style to Anchor Tags
-- Lesson 15 CSS Google Style Guide
-- Lesson 16 Image Borders

Web Publishing Basics

Note: Check the Classmates page for your id and email for your password after they are assigned.

AdobeInstall Dreamweaver AFTER
April 1 2019. The free trial is only 7 days. You don't want your trial to expire before your last assignment is due. Click image to visit Software page on IT web site. Scroll down to Adobe section.

Hall of Fame - Sp19

  • TBD

Hall of Fame - Fa18

  • Jacob Phllips (humor)
  • Josh Wassum (professional look)
Week 6
Feb 25

Blackboard Assignment
Bright Careers in Computers Assignment (25 points)

Code Avengers– HTML/CSS 1
-- Lesson 17 Spacing with Margins
-- Lesson 18 Shadow Effects
-- Lesson 19 Background Images
-- Lesson 20 Style Header, Footer & Section


Week 7
Mar 4


Note: Spring 2019 use Word to create Travel Guide Plan. Then create a PDF file to post on Projects page.

Sample Projects page showing rollover button, header, wrapper, nav, content, and footer sections. CSS code is embedded so everything is in a single file for you to view.

Post to Web Server
Snow day 3/8/19. See Blackboard announcement for details.
7B eportolio Projects Page & Rollovers, Wrappers and more CSS Styles Oh...My

Code Avengers - HTML/CSS 2 Build an Interactive Travel Guide (100 points)
-- Lesson 1 Intro to Level 2 HTML5/CSS3
-- Lesson 2 External CSS Stylesheet
-- Lesson 3 Audio and Video
-- Lesson 4 Comments in HTML & CSS Code

pdfBasics of Web Design book 4 pages

  • See CSS3 Rounded Corners pages 184-185 of Basics of Web Design book for rounded corners.
  • See Center Page Content with CSS pages 186-187 of Web Design book to center content and use wrappers.

bullet1 ePortfolio Travel Guide Project (100 exam points)

ePortfolio Project is an important component of this class.

This travel guide counts as exam points. So spend time completing it.

Hall of Fame - Fall 2018
Projects Page

  • Cameron Marick
  • Dana Roberts
  • Lauren Sandbrook
  • Josh Wassum


Mar 11

Spring Break 2019

No Classes Mar 11 - 15
Week 8
Mar 18

Update Teams - See Classmates page for detail

ePortfolio Assignment - Post to Web Server -
8B Travel Guide Home Page

Sample Travel Guide home page showing rollover buttons, rounded corners, image with shadow effect. CSS code is embedded so everything is in a single file for you to view.

Drawing 1 - ePortfolio File Structure with Travel Guide. Click to view.
Note: Changed to images-guide folder under the guide folder.

Drawing 2 - Guide File Structure. All the files for your travel guide are located UNDER the guide folder. Click to view.



Drawing 3 - Travel menu buttons options with link to ePortfolio at bottom. Click to view.



Code Avengers - HTML/CSS 2 (100 points)
-- Lesson 5 Spacing with Padding and Margin
-- Lesson 6 Three Types of HTML Elements
-- Lesson 7 Make an Anchor Look like a Button
-- Lesson 8 Use RGB Color Values

See ePortfolio Travel guide details above.

View or download the Sample Travel Guide home page
Download Pond image into images folder
Download snowflakes background image into images folder

Hall of Fame

Week 9
Mar 25

Post to Web Server
Note Update. April 26, 2019 Updated the score sheet portion of assignment
9B Travel Guide Where to Eat Page assignment (guide/eat.html)

Code Avengers - HTML/CSS 2 (100 points)
Lesson 9 Use New CSS3 Properties with Browsers
-- Lesson 10 Use Gradient Color Fills
-- Lesson 11 Use Validation to Check the HTML Code
-- Lesson 12 Use the Figure Tag


Sample Text content for Where to Eat page

Sample Where to Eat page -- Align images using a Table

Sample Where to Eat page -- Align images using float

Hall of Fame - Spring 2018
Where to Eat

- Angie
- Jordan
- Chad
- Brandon
- Russell
Week 10
Apr 1

Code Avengers - HTML/CSS 2 (100 points)
-- Lesson 13 Add Meta Tags
-- Lesson 14 Create a Table
-- Lesson 15 Style a Table
-- Lesson 16 Learn about Class Selectors


Week 11
Apr 8
Track Sheet with Next Semester Classes Assignment (20 points) Track Sheet and UnOfficial Transcript - showing registration for next semester.
- Next semester registration starts T Apr 9, 2019
- Classroom students submit hard copy.
- Optional for DE Students
Track sheets are available at Instructions to print unofficial transcripts are at the top of the Degrees page. Check to see if you have classes for the IT Foundations CSC.

Week 11

Post to Web Server
#11B What to Do page of Travel Guide (guide/events.html)
Updated for Spring 2019

Code Avengers - HTML/CSS 2
-- Lesson 17 Learn about Descendant Selectors
-- Lesson 18 Create a Header and a Footer
-- Lesson 19 Create a Navigation Bar
-- Lesson 20 Style your Pages for Printing


Week 12
Apr 15

Post to Web Server
12B Places to Go Page of Travel Guide (places.html)

Note: Digital Systems I: How the Web Works course is available in Code Avengers.
- Start at Pro Courses, then select HTML/CSS.
- Scroll to the bottom to find the Digital Systems 1 course.

Code Avengers Digital Systems I (50 points)
-- Lesson 1 World Wide Web
-- Lesson 2 How does the Internet work?
-- Lesson 3 How we transport data across the Internet
-- Lesson 4 Break Down of URLs
-- Lesson 5 Parts of a Web Page

This completes your Travel Guide Project

Sample Travel Guide using anchors in a single file

Week 13
Apr 22

Final ePortfolio Due - Due noon Friday 4/26/19

Check the points you missed on previous ePortfolio assignments. Fix the items to maximize your final eportfolio score.

ePortfolio Score Sheet (100 exam points)

Code Avengers Digital Systems I (50 points)
-- Lesson 6 Principles of Design
-- Lesson 7 Building a Website
-- Lesson 8 Tools for Building a Website
-- Lesson 9 Services for Building a Website
-- Lesson 10 Resources for Building a Website

Take a MTA HTML CSS Practice Test and submit results in Blackboard

04/22/19 Get the Gmetrix Access Code from Blackboard announcement. Then use the code to take a MTA practice test. Follow the instructions in the column to the left.




Week 14
Apr 29

MTA Introduction to Programming using HTML & CSS Certification Exam

Study for MTA Certification Exam

Final Exam: MTA Exam

  • DE Section W May 1 at 1:30pm
  • M1 Section F May 3 at 11:15am
  • Mall 109 Christiansburg
  • 41 Questions (45 minutes)

Take the MTA HTML CSS Exam

Exam 98-383 Objectives
MTA Introduction to Programming using HTML & CSS (from Certiport)

HTML5 Tags by Category by W3Schools (for reference only)


T May 7 -
F May 10

Congratulations! You finished this class last week.

Good luck on your final exams for your other classes.

Copyright Carlotta Eaton