Web Programming for Non-Programmers

DH 110

Fall 2017

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
By appointment


Computer science and IT graduates are no longer the only people expected to have some knowledge of how to program. Humanities and social science majors can greatly increase their job prospects by understanding the fundamentals of writing computer code, not only through the ability itself, but also being better able to communicate with programming professionals and comprehending the software development and design process as a whole. The most centralized and simple platform for learning is the Web.

This course starts with a brief introduction to/review of HTML and CSS and then focuses on using Javascript to write basic code and implement preexisting libraries to analyze and visualize data. Students will become familiar with building a complete Web page that showcases all three languages.

No prior web development experience is needed, but a desire to learn and be challenged is a must. Further, possessing the spirit to play, allowing yourself patience for trial and error, and having the willingness to put forth effort even when success doesn't come easily all will greatly enhance your ability to make the most of this course.

Learning Outcomes

  • Write syntactically correct HTML, CSS, and JavaScript that follows generally accepted coding conventions as demonstrated in programming assignments, exams, and a team-developed website
  • Visualize data through maps and charts using commonly utilized JavaScript libraries and present the results of analysis through the team website
  • Contextualize the nature of programming projects in order to better understand how to interface with professional developers through in-class participation
  • Explain and discuss current issues in web development and programming through exams
  • Collaborate effectively and contribute adequately to a group programming assignment using GitHub

Work & Time Expectations

You will be learning three new languages in this course while being applying them based on several communication and design principles. Expect to spend on average 12 hours per week of time outside of class meetings on assignments and preparation. This is keeping with a normal undergraduate expectation of 3 hours of out-of-class work for each hour spent in class.





Learn to Code HTML & CSS (2017)
Shay Howe
Online at: http://learn.shayhowe.com/html-css/
Learn to Code Advanced HTML & CSS (2017)
Shay Howe
Online at: http://learn.shayhowe.com/advanced-html-css/
Eloquent JavaScript, Second Edition (2014)
Marijn Haverbeke
You Don't Know JS: Up and Going (2016)
Kyle Simpson
JQuery Fundamentals (2014)
Bocoup, LLC


Visual Studio Code
Free Download @
Free Download @
Register for an account (if you don't already have one) @
Access and login with your GitHub account @


Programming Assignments and Exercises 45%

Programming assignments will evaluate your mastery of concepts as we cover them. Some may be completed in-class; however, most will be completed in the time between class meetings.

An "Exercise" is a shorter assignment that gives you practice with the language but is involved enough to warrant being gradable. These will be assigned during the JavaScript portion of the course.

Please refer to the links in the menu above (or the Sakai course site) for assignment details.

Exams 20%

There will be two exams: one at midterm and one during finals week.

The exams will be open book, note, and Web; however, you may not consult classmates or any others besides your professor through any form of communication (included but not limited to: written, spoken, electronic, telepathic, osmotic, semaphore, hand signals, or Morse code) during the period that the exam is available.

Each also will be comprehensive of all information presented up to that point. Consequently, the exams will be designed to test your ability to apply knowledge versus your capability to memorize.

The midterm exam will take place outside of class time, and students will have ample time to complete it.

Term Project 30%

By the end of the term, you will produce a website as part of a small group that will showcase your ability to combine HTML, CSS, and JavaScript for visualizing data.

There will be various deliverables throughout the semester to keep you on track. At the end of the term, your team will make a brief presentation to the class discussing your site.

For additional details, please see the Airbnb Team Project link under Assignments above (or Sakai).

Participation 5%

Although this is primarily a lecture and lab style course, there will be several opportunities for discussion and questions. I encourage you to engage with the lectures through asking me questions about the material being presented. If no one speaks up, I am forced to assume that you understand everything I am saying.

I have been working with this material professionally for many years, so I know what I'm doing. I need YOU to be brave and converse with me when a concept isn't clear.

Missing class, consistently arriving late, or being unprepared for discussion of readings will negatively impact your participation grade.

Tentative Schedule

Dates of activities and due dates for assignments are always subject to minor shifting. Refer to back to this schedule regularly.

Week 0

Sep 7 - 10
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Working with JSBin, GitHub, and Visual Studio Code

Week 1

Sep 11 - 17
Lecture Topics
Hands-On Activities
Assignments & Exams
  • L2C Lessons 1, 2, 8, & 12
  • Introducing HTML
  • Programming Assignment #1: Basic Web Page
    (Due: Tue, Sep 19 @ 11:55pm)

Week 2

Sep 18 - 24
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Beginning to Style Your Bio
  • Programming Assignment #2: Beginning to Style Your Bio
    (Due: Tue, Sep 26 @ 11:55pm)
  • Project Deliverable #1: Data Dictionary and Questions
    (Due: Fri, Sep 29 @ 11:55pm)

Week 3

Sep 25 - Oct 1
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Adding Media
  • Opening the Box Model
  • Positioning Content
  • L2C Lessons 4, 5, & 9
  • L2C - Advanced Lesson 2
  • Positioning Objects
  • Adding Media
  • Programming Assignment #3: Adding Images and Playing in Boxes
    (Due: Tue, Oct 3 @ 11:55pm)

Week 4

Oct 2 - 8
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Project Deliverable 2, Website Wireframes, & Evaluating Websites
  • Forms
  • Tables
  • Forms & Tables
  • Programming Assignment #4: Organizing and Submitting Data
    (Due: Tue, Oct 10 @ 11:55pm)
  • Project Deliverable #2: Website Mockup
    (Due: Wed, Oct 18 @ 11:55pm)

Week 5

Oct 9 - 15
No Lab on R
Reading Days
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Complex CSS Selectors
  • Responsive Design
  • Algorithms and Objects
  • JavaScript Introduction
  • L2C - Advanced Lessons 3 & 4

Week 6

Oct 16 - 22
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Midterm Exam Prep
  • JavaScript Building Blocks
  • JavaScript Conventions and Adding to the Web
  • Functions and Objects
  • YDKJS Chapter 1
  • EJS Chapters 1, 2, 3, 4, & 8 (through 'Strict Mode')
  • Basic Javascript
    (note due date change because of exam)
  • Exam Midterm: HTML & CSS
    (Opens Thu, Oct 19 @ 12:00pm - Closes Mon, Oct 23 @ 11:55pm)
  • JavaScript Exercise #1: Temperature Converter
    (Due: Thu, Oct 26 @ 11:55pm)

Week 7

Oct 23 - 29
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Project Deliverable 3: Full HTML & CSS
  • Functions and Objects
  • Conditionals
  • Loops
  • Document Object Model
  • YDKJS Chapter 1 ('Blocks' to end)
  • EJS Chapters 2, 3, 4, & 12
  • Integrating Loops and Conditionals
  • Project Deliverable #3: Website w/ Full HTML and CSS
    (Due: Fri, Nov 17 @ 11:55pm)
  • Programming Assignment #5: Making the Web Page Come Alive
    (Due: Tue, Oct 31 @ 11:55pm)

Week 8

Oct 30 - Nov 5
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Javascript Events
  • EJS Chapters 14 & 18
  • Responding to Events
  • JavaScript Exercise #2: Temperature Converter with Events
    (Due: Tue, Nov 7 @ 11:55pm)

Week 9

Nov 6 - 12
Lecture Topics
Hands-On Activities
Assignments & Exams
  • jQuery and the DOM
  • EJS Chapter 17
  • JQuery Fundamentals jQuery Basics, Traversing & Manipulating, Events & Event Delegation
  • Using jQuery to Liven Up Your Bio
  • Programming Assignment #6: jQuery and Your Bio
    (Due: Thu, Nov 14 @ 11:55pm)

Week 10

Nov 13 - 19
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Handling Data
  • Google Maps API
  • Google Maps
  • Project Programming
  • Programming Assignment #7: Google Map Trivia Game
    (Due: Thu, Nov 30 @ 11:55pm)

Week 11

Nov 20 - 26
Thanksgiving Break
Lecture Topics
Hands-On Activities
Assignments & Exams

Week 12

Nov 27 - Dec 3
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Charts.js API
  • Using Charts.js
  • Programming Assignment #8: Generals Sports Chart
    (Due: Tue, Dec 5 @ 11:55pm)

Week 13

Dec 4 - 10
Lecture Topics
Hands-On Activities
Assignments & Exams
  • Accessibility
  • A World of Other Possibilities (aka "We're done already???!!!")
  • Project Showcase
  • Project Programming
  • Building a Complete Website
  • Project Deliverable #4: Website w/ Full Javascript Visualizations
    (Due: Wed, Dec 6 @ 11:55pm)
  • Project Deliverable Website Presentation
  • Exam Final: JavaScript & Putting It All Together
    (Opens Fri, Dec 8 @ 5:00pm - Closes Tue, Dec 12 @ 11:55pm)