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

Overview

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.

Prerequisites

None

Texts

Required

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
http://eloquentjavascript.net/
You Don't Know JS: Up and Going (2016)
Kyle Simpson
https://github.com/getify/You-Dont-Know-JS/tree/master/up%20%26%20going
JQuery Fundamentals (2014)
Bocoup, LLC
http://jqfundamentals.com/
Additional required readings will be noted in the schedule below.

Software

Visual Studio Code
Free Download @
https://code.visualstudio.com/
Git
Free Download @
https://git-scm.com/downloads
GitHub
Register for an account (if you don't already have one) @
https://www.github.com/
JSBin
Access and login with your GitHub account @
https://jsbin.com/

Evaluation

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
Topics
Readings
Hands-On Activities
Assignments
  • Working with JSBin, GitHub, and Visual Studio Code

Week 1

Sep 11 - 17
Topics
Readings
Hands-On Activities
Assignments
  • 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
Topics
Readings
Hands-On Activities
Assignments
  • 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
Topics
Readings
Hands-On Activities
Assignments
  • 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
Topics
Readings
Hands-On Activities
Assignments
  • 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
Topics
Readings
Hands-On Activities
Assignments

Week 6

Oct 16 - 22
Topics
Readings
Hands-On Activities
Assignments
  • 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
Topics
Readings
Hands-On Activities
Assignments
  • YDKJS Chapter 1 ('Blocks' to end)
  • EJS Chapters 2, 3, 4, & 12
  • Using Functions, Objects, and Methods
  • 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
Topics
Readings
Hands-On Activities
Assignments
  • EJS Chapters 14 & 18
  • Integrating Loops and Conditionals
  • Responding to Events
  • Programming Assignment #6: Triangles with Conditionals and Loops
    (Due: Tue, Nov 7 @ 11:55pm)

Week 9

Nov 6 - 12
Topics
Readings
Hands-On Activities
Assignments
  • EJS Chapter 17
  • Manipulating the DOM to Liven Up Your Bio
  • JavaScript Exercise #2: Temperature Converter with Events
    (Due: Tue, Nov 14 @ 11:55pm)
  • Programming Assignment #7: The DOM and Your Bio
    (Due: Thu, Nov 16 @ 11:55pm)

Week 10

Nov 13 - 19
Topics
Readings
Hands-On Activities
Assignments
  • Google Maps
  • Project Programming
  • Programming Assignment #8: Google Map Trivia Game
    (Due: Thu, Nov 30 @ 11:55pm)

Week 11

Nov 20 - 26
Thanksgiving Break
Topics
Readings
Hands-On Activities
Assignments

Week 12

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

Week 13

Dec 4 - 10
Topics
Readings
Hands-On Activities
Assignments
  • 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)