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 #3: Images and CSS Positioning75 points

Due Wednesday, January 30 @ 11:55pm


For this lab, you'll be adding images and even more CSS to further enhance the look of your insider's guide page. The instructions will increasingly become more vague 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. In VS Code, be sure you are on the master branch of your Insider's Guide 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 pa3.
  2. Correct any errors and address any comments made on the previous assignment.
  3. Set the margin for the body element to zero. Set the margin for all section elements to 8 pixels.
  4. Add three photographs to the page below your list of links by doing the following:
    1. Above the "Top 3 Things" list, add a new sectionthat starts with a header element containing an h2 element with the text "Images"
    2. Select three photographs that depict your city. Optimally, you should be the owner of the photographs; however, you may use any free, royalty-free photos provided that you supply proper citation in both the image's title attribute and at the bottom of the page.
    3. Create a new folder called "images" under the main folder where your insiders-yourusername lab is stored. Then drag and drop each image into that folder in VS Code. 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. Wrap each image in a figure element and use figcaption to describe each photo's content.
  5. Using CSS, style your body's 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.
  6. Using CSS, position your body's 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.
  7. 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
  8. 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. Remove the red and green on "Facts" and "Insiders"
    4. Padding of at least 10 pixels
    5. Rounded corners on all sides
  9. Using CSS, make your quotation appear along the right side of the page.
    1. Set a specific width on the aside.
    2. Add a float property to the aside that causes it to appear to the right of the "Facts" list. Hint: Remember that float requires the element to be moved in the HTML to make it appear in the desired spot, but keeps semantics in mind as you consider where to place it.
    3. Be sure that the float only impacts the "Facts" list — nothing below it.
    4. Add a border of any type, thickness, and color
    5. Set the bottom margin to 1x the size of the base font.
    6. Add some right margin to the "Facts" header in order to give some breathing room
    7. 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.
    8. Align the text of the blockquote to the right
    9. Add a box shadow
  10. 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:
    • 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?
    • Apply some CSS to make the images align vertically
  11. 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)
  12. Using similar CSS code, make your footer look like your header. It should NOT be fixed like the header, though.
  13. Finally, if you haven't already, change the word "Copyright" in your footer to the copyright symbol → ©
  14. Use the Live Server tool in VS Code to preview your results.
  15. Commit and sync your code to GitHub. On the GitHub site, create a pull request to merge your pa3 branch into the master branch. Please DO NOT delete the pa3 branch when finished.


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:

The header bar should ALWAYS be visible even after scrolling down
Sample image for how the results of Lab 3 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 75 points and deductions will be made according to the amount and severity of errors.