Web Programming for Non-Programmers

DCI 110

Winter 2018

Credits: 4

Requirements Met: SC | DCI Minor Core Elective

Class Meeting Metadata
Meets: M
T
W (lab)
2:45 - 4:15pm
3:15 - 4:45pm
2:45 - 4:15pm
Classroom: CGL 211
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
W 1:00 - 2:00
R 10:00 - 11: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 (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, 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
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 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 (or the Sakai course site) 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.

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 1

Jan 8 - 14
Topics
Readings
Hands-On Activities
Assignments
  • Working with JSBin, GitHub, and Visual Studio Code
  • Introducing HTML
  • Programming Assignment #1: Basic Web Page
    (Due: Tue, Jan 16 @ 11:55pm)

Week 2

Jan 15 - 21

MLK Week
M class meets F
Lab on F instead of W
Topics
Readings
Hands-On Activities
Assignments
  • Beginning to Style Your Bio
  • Programming Assignment #2: Beginning to Style Your Bio
    (Due: Tue, Jan 23 @ 11:55pm)
  • Project Deliverable #1: Data Dictionary and Questions
    (Due: Fri, Jan 26 @ 11:55pm)

Week 3

Jan 22 - 28
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, Jan 30 @ 11:55pm)

Week 4

Jan 29 - Feb 4
Topics
Readings
Hands-On Activities
Assignments
  • Forms & Tables
  • Programming Assignment #4: Organizing and Submitting Data
    (Due: Tue, Feb 6 @ 11:55pm)
  • Project Deliverable #2: Website Mockup
    (Due: Thu, Feb 8 @ 11:55pm)

Week 5

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

Week 6

Feb 12 - 18
Topics
Readings
Hands-On Activities
Assignments
  • 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 9 @ 11:55pm)
  • Programming Assignment #5: Making the Web Page Come Alive
    (Due: Thu, Mar 1 @ 11:55pm)

Week 7

Feb 19 - 25
Washington Break
Topics
Readings
Hands-On Activities
Assignments

Week 8

Feb 26 - Mar 4
Topics
Readings
Hands-On Activities
Assignments
  • YDKJS Chapter 1 ('Blocks' to end)
  • EJS Chapters 2, 3, 4, & 12
  • Integrating Loops and Conditionals
  • Programming Assignment #6: Triangles with Conditionals and Loops
    (Due: Thu, Mar 8 @ 11:55pm)

Week 9

Mar 5 - 11
Topics
Readings
Hands-On Activities
Assignments
  • EJS Chapters 14 & 18
  • EJS Chapter 17
  • JQuery
  • Responding to Events and Working with the DOM
  • JavaScript Exercise #2: Temperature Converter with Events
    (Due: Tue, Mar 13 @ 11:55pm)

Week 10

Mar 12 - 18
Topics
Readings
Hands-On Activities
Assignments
  • Google Maps
  • Project Programming
  • Programming Assignment #7: Google Map Trivia Game
    (Due: Thu, Mar 22 @ 11:55pm)

Week 12

Mar 26 - Apr 1
Topics
Readings
Hands-On Activities
Assignments
  • Project Programming
  • Using Chart.js
  • Programming Assignment #8: Generals Sports Chart
    (Due: Tue, Apr 3 @ 11:55pm)

Week 13

Apr 2 - 10
Topics
Readings
Hands-On Activities
Assignments
  • Assessing Accessibility
  • Project Programming
  • Building a Complete Website
  • Project Deliverable #4: Website w/ Full Javascript Visualizations
    (Due: Wed, Apr 4 @ 11:55pm)
  • Project Deliverable Website Presentation
  • Exam Final: JavaScript & Putting It All Together
    (Opens Fri, Apr 6 @ 5:00pm - Closes Tue, Apr 10 @ 11:55pm)