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

Project Deliverable #3: Website with Full HTML and CSS100 points

Due Friday, March 9 @ 11:55pm


Using your wireframe from deliverable #2 as a guide in addition to my comments on your submission, develop the three web pages and a CSS file for your site.

If you haven't already, all of your team members should clone the GitHub repository for your team, which is named "project-" followed by your city. Each group member should contribute to both the HTML and the CSS.

Create your own branches in Visual Studio Code and GitHub so that you each can work independently. Then use pull requests and resolve conflict (if necessary) to merge your edits into the master branch.

Grading Specifications

Expectations for grading:

  • Good styling of HTML and CSS (proper and consistent indentation, matching tags, no excess tags, no tags outside of head or body, etc.)
  • Adherence to your wireframe and my comments. You may make changes to your submitted design; however, the reasons for the changes should be described briefly in an attached document.
  • Supplying the full text of the pages describing your project, your questions, and what you expect to find as your results. This text may be updated in the next deliverable, but there should be enough there now to present the feel of a completed page.
  • Effective use of images (size, framing, positioning, margins, padding, borders, proper image file format, etc.). Images that are not your own should have attribution within the img tag, within a caption, or at the bottom of the page.
  • Links that work to navigate among the three pages so that any of the three pages can be reached from all others.
  • Using placeholder div blocks that indicate the location of your map and chart on their respective pages. Style the div blocks so that they have a border, padding, width, height, and margin that make it clear where the object will be positioned. Use text temporarily within the div that describes what it will eventually contain, i.e. "A map of neighborhoods with average bed count".
  • Effective use of CSS:
    • Using a different font for headings vs. body text
    • Contrasting foreground/background colors that make the text easy to read
    • Likewise, good readability through use of spacing (margins, padding, line-height)
    • Any additional CSS necessary to reflect your wireframe design