Web Programming for Non-Programmers

DH 110

Fall 2017

Credits: 4

Requirements Met: SC

Class Meeting Metadata
Meets: MW
R (lab)
2:30 - 3:55pm
8:35 - 10:00am
Classroom: CGL 211 (MW) & CGL 114 (R)
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:15 - 12:15
W & R 1:00 - 2:00
Or by appointment

Programming Assignment #2: Beginning to Style Your Bio50 points

Due Tuesday, September 26 @ 11:55pm

Overview

This week, you're going to improve your biography web page by adding attributes to the HTML to allow for styling. Then you will add a CSS file to start improving the look of the page. You will start with your HTML file from last week, so there is no URL or new project to start from scratch.

Steps to Complete the Assignment

  1. In the head of your HTML file, use link to apply a stylesheet called style.css to your web page.
  2. Add an aside block to your HTML between the section containing the list of links and your footer block. Inside it add a favorite quotation. Use the blockquote element with the cite attribute and the cite elements appropriately.
  3. To the following elements on your page, add ID attributes with the corresponding values:
    1. To the UL for your key traits: "strengths"
    2. To the UL for what you want to improve on: "weaknesses"
    3. To the OL for things you want to learn from this course: "tolearn"
  4. To all three H2 opening tags for the lists noted above, add a class attribute with the value "listheading".
  5. Surround the following two words with em tags that each have the class attribute set to "standout":
    1. The word "Key" in "Key Traits"
    2. The word "Working" in "Working On"
  6. Create a new file called style.css in the same directory as your index.html file. Set the following rules in it:
    1. Make all elements with the class of "listheading" italic.
    2. Make all em elements with the class of "standout" bold and all capital letters.
    3. Make the word "Key" appear in green and the word "Working" appear in red. How can you pick out these particular words? Also, use hex codes or rgb() rather than words for colors in your CSS.
    4. Improve the readability of the links in the definition list by setting the list's line height to something greater than the current value. Experiment until it looks good to your eye. Try using the "em" unit.
    5. Also, change the links in the description list to be bold and without an underline. Be sure to only make this change for links that are WITHIN the description list!
    6. Center the text of the entire list of links and their definitions on the page.
    7. Style the aside that contains your quotation by using the following CSS properties:
      1. Apply any background color with any contrasting foreground color. Be sure that the text is still readable.
      2. Increase both the letter and word spacing
      3. Use a different font than the rest of the page
      4. Set the first letter of the quote to be larger than the rest and bold
    8. Center the footer and add a subtle shadow to the contents. Experiment with the shadow settings so that the shadow is visible but the text is not difficult to read.
  7. Use GitHub desktop to commit and sync your project by completing the steps listed in the document from step 1 above.

Expectations

HTML and CSS should be properly formatted following their respective coding conventions discussed in class.

You can use the live preview extension in VSCode to test the page as you're building (click Preview Available in the lower left of the VSCode window), but when you're finished, be sure to check the live URL at https://dh110f17.github.io/bio-YOURUSERNAME (e.g. "https://dh110f17.github.io/bio-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 2 should look

Grading Specifications

You will be graded on:

  1. Accurately meeting all of the specifications above
  2. Following HTML and CSS coding rules and conventions discussed in class and in the textbook
  3. Correcting errors from the last lab

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