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
T
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 #2: Applying CSS50 points

Due Tuesday, January 22 @ 11:55pm

Overview

This week, you're going to improve your insider's guide web page by adding attributes to the HTML to allow for styling. Then you will modify the supplied 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 VS Code, be sure you are on the master branch of your first assignment. Perform a sync in lower left corner by clicking the "two arrows in a circle" button. Sync your master branch Then add a new branch called pa2.
  2. Correct any errors and address any comments made on the previous assignment.
  3. In the head of your HTML file, use the link element to apply a stylesheet called style.css to your web page.
  4. Add an aside block to your HTML between the section containing the list of links and your footer block. Inside it add quotation about your city. Use the blockquote element with the cite attribute and the cite elements appropriately.
  5. To the following elements on your page, add ID attributes with the corresponding values:
    1. To the UL for facts about your city: facts
    2. To the UL for "Only Insiders Know": intheknow
    3. To the OL for things to see and do: todo
  6. To all three H2 opening tags for the lists noted above, add a class attribute with the value listheading.
  7. Surround the following two words with em tags that each have the class attribute set to standout:
    1. The word "Facts" in "Some Facts About..."
    2. The word "Insiders" in "Only Insiders Know"
  8. Modify the file called style.css by adding the following rules:
    1. Make all elements with the class of "listheading" italic.
    2. Make all em elements with the class of "standout" bold with all capital letters.
    3. Make the word "Facts" appear in green and the word "Insiders" 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.
  9. Use the Live Server tool in VS Code to preview your results.
  10. Commit and sync your code to GitHub. On the GitHub site, create a pull request to merge your pa2 branch into the master branch. Please DO NOT delete the pa2 branch when finished.

Expectations

HTML and CSS should be properly formatted following their respective coding 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 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.