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


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 (2018)
Shay Howe
Online at: http://learn.shayhowe.com/html-css/
Learn to Code Advanced HTML & CSS (2018)
Shay Howe
Online at: http://learn.shayhowe.com/advanced-html-css/
Eloquent JavaScript, Third Edition (2018)
Marijn Haverbeke
You Don't Know JS: Up and Going (2016)
Kyle Simpson
Additional required readings will be noted in the schedule below.


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 40%

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 for assignment details.

Exams 25%

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.

Failure to attempt either exam will result in failure of the course.

Term Project 25%

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 individual assignments under 'Project Deliverables' above.

Participation 10%

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 1

Jan 7 - 13
Hands-On Activities
  • Working with JSBin, GitHub, and Visual Studio Code
  • Introducing HTML
  • Programming Assignment #0: Orientation to Course Tools
    (Due: Sun, Jan 13 @ 11:55pm)
  • Programming Assignment #1: Starting Out with HTML
    (Due: Tue, Jan 15 @ 11:55pm)

Week 2

Jan 14 - 20
Hands-On Activities
  • Beginning to Style Pages
  • Programming Assignment #2: Applying CSS
    (Due: Tue, Jan 22 @ 11:55pm)
  • Project Deliverable #1: Data Dictionary and Questions
    (Due: Fri, Jan 25 @ 11:55pm)

Week 3

Jan 21 - 27

MLK Week
M class meets F
Lab on F instead of W
Hands-On Activities
  • L2C Lessons 4, 5, & 9
  • L2C - Advanced Lesson 2
  • Positioning Objects
  • Adding Media
  • Programming Assignment #3: Adding Images and Playing in Boxes
    (Due: Wed, Jan 30 @ 11:55pm)

Week 4

Jan 28 - Feb 3
Hands-On Activities
  • Forms & Tables
  • Programming Assignment #4: Organizing and Submitting Information
    (Due: Tue, Feb 5 @ 11:55pm)
  • Project Deliverable #2: Website Mockup
    (Due: Thu, Feb 7 @ 11:55pm)

Week 5

Feb 4 - 10
Hands-On Activities
  • L2C - Advanced Lessons 3 & 4
  • Basic Javascript
    (note due date change because of exam)
  • JavaScript Exercise #1: Temperature Converter
    (Due: Thu, Feb 14 @ 11:55pm)
  • Exam Midterm: HTML & CSS
    (Opens Fri, Feb 9 @ 12:00pm - Closes Tue, Feb 12 @ 11:55pm)

Week 6

Feb 11 - 17
Hands-On Activities
  • YDKJS Chapter 1
  • EJS Chapters 1, 2, 3, 4, & 8 (through 'Strict Mode')
  • Using Functions, Objects, and Methods
  • Project Deliverable #3: Website w/ Full HTML and CSS
    (Due: Fri, Mar 8 @ 11:55pm)
  • Programming Assignment #5: Making the Web Page Come Alive
    (Due: Thu, Feb 28 @ 11:55pm)

Week 7

Feb 18 - 24
Washington Break
Hands-On Activities

Week 8

Feb 25 - Mar 3
Hands-On Activities
  • YDKJS Chapter 1 ('Blocks' to end)
  • EJS Chapters 2, 3, 4, & 12
  • Integrating Loops and Conditionals
  • JavaScript Exercise #2: Temperature Converter Enhanced
    (Due: Tue, Mar 5 @ 11:55pm)

Week 9

Mar 4 - 10
Hands-On Activities
  • EJS Chapters 14 & 18
  • EJS Chapter 17
  • JQuery
  • Responding to Events and Working with the DOM
  • Programming Assignment #6: Refactoring the Cost Estimator
    (Due: Tue, Mar 12 @ 11:55pm)

Week 10

Mar 11 - 17
Hands-On Activities
  • Google Maps
  • Project Programming
  • Programming Assignment #7: Adding a Google Map
    (Due: Tue, Mar 19 @ 11:55pm)
  • Project Deliverable #4: Website w/ Full Javascript Visualizations
    (Due: Wed, Apr 3 @ 11:55pm)

Week 11

Mar 18 - 24
Hands-On Activities
  • Project Programming
  • Accessibility Exercise
  • Exercise #3: Assessing Accessibility
    (Due: Tue, Mar 26 @ 11:55pm)

Week 12

Mar 25 - 31
Hands-On Activities
  • Using Chart.js
  • Project Programming
  • Programming Assignment #8: Insiders Weather Chart
    (Due: Tue, Apr 2 @ 11:55pm)

Week 13

Apr 1 - 9
Hands-On Activities
  • Project Programming
  • Building a Complete Website
  • Project Deliverable Website Presentation
  • Exam Final: JavaScript & Putting It All Together
    (Opens Fri, Apr 5 @ 5:00pm - Closes Tue, Apr 9 @ 11:55pm)