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 #3: Media and Positioning in Your Bio75 points

Due Tuesday, October 3 @ 11:55pm


This week, you'll be adding images and even more CSS to further enhance the look of your bio page. In these instructions, I will become more vague in my requests as I expect you to start making good, informed design decisions based on what we've discussed and for you to rely on others' opinions of what is readable.

Steps to Complete the Assignment

  1. Add three photographs to the page below your description list of links.
    1. Add a new section that starts with an h2 element with the text of "Images"
    2. Select three photographs that express your interests, are related to a future career, or show you in action of a job you want to persue. You should be the owner of the photographs. Use three existing ones or take new ones.
    3. Create a new folder called "images" under the main folder where your bio-yourusername lab is stored. Then drag and drop each image into that folder in VSCode. Alternatively, you can use Windows Explorer or the Mac Finder to move the picture files into your new images folder.
    4. Use the alt attribute to describe the content of each photograph to help older browsers and screen readers
    5. Use CSS to set the width and height to allow the three images to fit the page without being too large or small or appearing out of proportion.
    6. Embed the images in the figure element and use figcaption to describe each photo's content.
  2. Using CSS, style your header:
    1. Center the text
    2. Make the background a dark shade of any color
    3. Set the text color to be a light, contrasting color to the background.
    4. Add padding to the text to make it readable and spaced comfortably from the text below.
  3. Using CSS, position your header:
    1. Affix it to the top of the screen so it appears even after you start scrolling down the page.
    2. Make it stretch the entire width of the browser window with no whitespace on the left, right, or top.
    3. Set the correct CSS property on it to guarantee that it is always on top of everything else.
    4. Set the top margin of first section following the header to make it completely visible below the header before the user scrolls down the page.
  4. Using CSS, change all h1 elements to have:
    1. All uppercase letters
    2. Bold
    3. Text 3x the size of the base font
    4. Letter spacing of 2 pixels
    5. Word spacing of 2 pixels
  5. Using CSS, change all h2 elements to have:
    1. A similar background color to your header, but with either a lighter or darker shade
    2. A contrasting text color to ensure the text is readable
    3. Padding of at least 10 pixels
    4. Rounded corners on all sides
  6. Using CSS, make your quotation appear along the right side of the page.
    1. Set a specific width on the aside that contains your blockquote (not on the blockquote itself).
    2. Add a float property to the aside that causes it to appear to the right of the description list of links. Hint: Remember that float requires the element to be moved in the HTML to make it appear in the desired spot.
    3. Add a border of any type, thickness, and color
    4. Set the right margin to zero
    5. Change the padding so that the top/bottom have the same values, and the left/right have the same values but are different from the top/bottom.
    6. Align its text of the blockquote to the right
    7. Add a box shadow
  7. By default, your photos will appear vertically on the page. (After all figure is a block element). Use CSS positioning to line up the three figure elements horizontally. Hints:
    • There are multiple ways to do this. Lesson 5 of the text discusses a few.
    • You also may need to rethink how you sized your images from earlier.
    • Also, consider the spacing between the figures. Is there anything you can do about that?
    • How do you make all of the figures line up vertically?
  8. Use CSS to style your figcaption elements to have:
    1. Enough top margin to space the text away from its photo so the text is readable
    2. Italic text
    3. A font that is smaller than the other text on the page (but is still readable)
  9. Using similar CSS code, make your footer look like your header. It should NOT be fixed like the header, though.
  10. Finally, if you haven't already, change the word "Copyright" in your footer to the copyright symbol → ©
  11. Use GitHub desktop to commit and sync your project.


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:

Note how the blue header bar ALWAYS is visible even after scrolling down (as demonstrated by the second screenshot)
Sample image for how the results of Lab 3 should look at the top Sample image for how the results of Lab 3 should look at the bottom

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 75 points and deductions will be made according to the amount and severity of errors.