Web Programming for Non-Programmers

DCI 110

Winter 2019

Credits: 4

Requirements Met: SC, DCI Minor Core Elective

GitHub Site: https://github.com/dci110w19

Class Meeting Metadata
Meets: M
W (lab)
2:45 - 4:15pm
3:15 - 4:45pm
2:45 - 4:15pm
Classroom: CGL 212
Instructor's Metadata
Instructor: Jason T. Mickel, Ph.D.
E-Mail: mickelj@wlu.edu How to Email a Professor
Phone: (540) 458-8653
Office: Leyburn M33
Office Hours: M 11:00 - 12:00
T 11:00 - 12:00
W 1:00 - 2:00
Or by appointment

Programming Assignment #1: Starting Out with HTML50 points

Due Tuesday, January 15 @ 11:55pm


Learning new languages to build web pages is hard enough without having to dream up content. Let's put your new HTML skills to use by developing a web page about either your hometown or a city/town that you are familiar with.

Steps to Complete the Assignment

  1. Click the link above and follow the same steps as you did in the orientation lab to clone the repository and get started. This repository already has a blank index.html file for you to start with.
  2. Establish the framework for a new HTML document as discussed in class including the DOCTYPE, html, head, and body tags.
  3. Add a title tag to the head portion of the file with a value of An Insider's Guide to YOUR_CITY_NAME (e.g. "An Insider's Guide to Lexington, VA").
  4. Within the body tags:
    1. The name of the city/town in a level 1 heading tag similar to what's in the title element above (e.g. "An Insider's Guide to Lexington, VA").
    2. Add a div set of tags. Within the div, add the word "Population" in bold followed by a colon and the approximate population in normal, non-bold text. This should be followed by, in italics, the year the population numbers are from surrounded by parentheses.
    3. Place one set of header open and close tags around both the heading with the city's name and the div with the population.
    4. Create a section with a brief introductory paragraph about the city inside that section.
    5. Start a new section containing another header element further containing a level 2 heading of "Some Facts about CITY_NAME". The body of the section should be an unordered list of three commonly known facts about your city.
    6. Start another new section containing another header element further containing a level 2 heading of "Only Insiders Know...". The body of the section should be an unordered list of two things that are lesser known things about your city that only someone who lives there might know.
    7. Start a third section containing another header element further containing a level 2 heading of "Top 3 Things to Do or See". The body of the section should be an ordered list of the top three things that you would tell a visitor to see or do there.
    8. Start a final section with a description list of three websites related to your city. The description term should be the name of the site with a link to that site's URL. Each link should open in a new window. The description definition should offer a brief summary of what the site is about or covers. Have you checked that your links actually work?
    9. Create a footer section with the word "Copyright", the current year, and your name.
  5. Use GitHub desktop to commit and sync your project by completing the steps listed in the document from step 1 above.


HTML should be properly formatted following the style conventions discussed in class.

Be sure to check the live URL at https://dci110w19.github.io/insiders-YOURUSERNAME (e.g. "https://dci110w19.github.io/insiders-mickelj") to see that it is completely uploaded and working.

The final result should look similar to this:

Sample image for how the results of Lab 1 should look

Grading Specifications

You will be graded on:

  1. Accurately meeting all of the specifications above
  2. Following HTML coding rules and conventions discussed in class and in the textbook

The lab will begin with a full score of 50 points and deductions will be made according to the amount and severity of errors.