CSCE 120

Learning to Code

Fall 2017

Course Overview

The past decades have witnessed a remarkable transition in how widely computing is applied across many domains of human activity. As the uses of computing spread, it becomes increasingly important for people from diverse backgrounds to be trained in the key concepts underlying software-intensive systems.

This course introduces you to coding in the context of current web development technologies (JavaScript, HTML, CSS). You will gain basic coding skills and an introduction to computing with an emphasis on processing data: data formatting and structure, data manipulation, data presentation and the basics of an interactive program

This is the first course in a 5 course sequence for the Software Development Minor offered by the Department of Computer Science & Engineering.

More information on this course can be found at LearningToCode.unl.edu and in its bulletin entry. More information on the Software Development Minor can be found on our department's webpage and in the UNL Bulletin.

Course Info

Syllabus

Details on the policies, grading, expectations, etc. for this course can be found in the course syllabus.

Venue

Instructor

Dr. Chris Bourke
cbourke@cse.unl.edu
Avery 363
Office Hours: M – R 12:30PM – 1:30PM

Teaching Assistants

Sara El Alaoui
sara@cse.unl.edu
Student Resource Center, Avery 12
Office Hours: W 3PM – 4PM

Undergraduate Teaching Assistants

Resources

Schedule

Week Dates Topics Notes
1 August 21 – 25

Module 1: Getting Started

  • T: Course Introduction
  • R: Hacktivity 1.1
2 August 28 – September 1

Module 2: Introduction to Data

  • T: Hactivity 2.1
  • R: Hacktivity 2.2
3 September 4 – 8

Module 3: Manipulating Data I

  • T: Hacktivity 3.1
  • R: Hacktivity 3.2
4 September 11 – 15

Module 4: Making Decisions

  • T: Hacktivity 4.1
  • R: Hacktivity 4.2
5 September 18 – 22

Module 5: Presenting Data I

  • T: Hacktivity 5.1
  • R: Hacktivity 5.2
Assignment 1 Due: Thursday, September 21st
6 September 25 – 29

Module 6: Presenting Data II

  • T: Hacktivity 6.1
  • R: Hacktivity 6.2
7 October 2 – 6

Module 7: Manipulating Data I

  • T: Hacktivity 7.1
  • R: Hacktivity 7.2
8 October 9 – 13

Module 7 (continued)

  • T: Hacktivity 7.3
  • R: Hacktivity 7.4
9 October 16 – 20
  • T: No class
  • R: Group Project Workday 1
Fall Break
10 October 23 – 27

Module 8: Processing Data I

  • T: Hacktivity 8.1
  • R: Hacktivity 8.2
Assignment 2 Due: Thursday, October 26th
11 October 30 – November 3

Module 9: Organizing Code I

  • T: Hacktivity 9.1
  • R: Hacktivity 9.2
12 November 6 – 10

Module 10: Processing Data II

  • T: Hacktivity 10.1
  • R: Hacktivity 10.2
Assignment 3 Due: Thursday November 9th
13 November 13 – 17

Module 11: Consuming Data

  • T: Hacktivity 11.1
  • R: Hacktivity 11.2
14 November 20 – 24
  • T: Group Project Workday 2
  • R: No Class
Assignment 4 Due: Tuesday November 21st
Thanksgiving Break
15 November 27 – December 1

Module 12: Organizing Data

  • T: Hacktivity 12.1
  • R: Hacktivity 12.2
16 December 4 – December 8

Module 13: Organizing Code II

  • T: Hacktivity 13.1
  • R: Hacktivity 13.2
Dead Week
17 December 11 – 15 Final Exam (Project Presentation) Time: Thursday, December 14th, 1PM – 3PM Finals Week

Modules

Each module roughly corresponds to 1 week of class. Each contains a set of pre-class activities that must be completed to properly prepare for the in-class activities. Each Hacktivity is split into two parts (one for Tuesday, one for Thursday). Each module also has post-class activities that are intended to give you more practice, a deeper understanding of the topics, or an opportunity to further hone your skills.

Module 1.0: Getting Started

Prior To Class

Since this is the first module, there are no pre-class activities. In the first class, we will have an introduction to this course, its contents, expectations, and policies. The second class we'll do our first Hacktivity, please bring your laptop.

Hacktivities

  1. Day One: Course Introduction
  2. Hacktivity 1.1: hacktivity1.1.pdf - Getting Started

After Class

  1. Learn More about Light Table by watching several tutorial vidoes (each about 1 minute long) available at http://docs.lighttable.com/tutorials/full/:
    • Starting Light Table
    • The Workspace Tree
    • Tabs and Tabsets
    • Evaluation and the Console
    • Inline Evaluation
    • Evaluating with JavaScript
    For future reference, full documentation on Light Table can be found here: http://docs.lighttable.com/
  2. Challenge Yourself: Publish Your Code
    The example project you downloaded was hosted on GitHub.com. Now that you've made changes, you can publish your project there. Read the provided Git Tutorial to learn the basics of using Git. Then, create an account and publish your project.
  3. Read the following articles on coding:

Module 2.0: Introduction to Data

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module2.0.pdf
  3. Supplement your knowledge with at least one of the following:

Hacktivities

  1. Hacktivity 2.1
  2. Hacktivity 2.2

After Class

  1. Learn More
    • Read a few of the entries on Information is Beautiful
    • Start thinking about the type of data that you would like to hack/visualize for your semester project. Find a data set of interest and start the process of converting it to a usable JSON format (find and use an online tool to help you).
  2. Challenge Yourself
    • Advanced Activity: Separate the enrollment data into two data sources: one for students, one for courses. Add a unique identifier element to the courses. To model enrollment, add a courseIds array to each student which will be a list of IDs of courses in which they are enrolled. Hack the code to display the two data sources in two different tables. Then, bring the two data sources into a single table (reproducing the results from before).

Module 3.0: Manipulating Data I

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module3.0.pdf
  3. Supplement your knowledge with at least one of the following:

Hacktivities

  1. Hacktivity 3.1: hacktivity3.1.pdf
  2. Hacktivity 3.2: hacktivity3.2.pdf

After Class

  1. Learn More
  2. Challenge Yourself
    • Advanced Activity: Generalize the currency exchange rate app so that you can specify any input currency as well as the output.
    • Advanced Activity: Change the application so that instead of open-ended text boxes that the user is allowed to input any value (and thus leading to potential errors in conversion), they are forced to select input and output currencies from two drop down menus instead.

Module 4.0: Making Decisions

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module4.0.pdf
  3. Supplement your knowledge with at least one of the following:

Hacktivities

  1. Hacktivity 4.1: hacktivity4.1.pdf
  2. Hacktivity 4.2: hacktivity4.2.pdf

After Class

  1. Learn More
  2. Challenge Yourself
    • Advanced Activity: In the Tax Liability exercise, if a user enters invalid data (negative numbers or non-numeric numbers) the results are invalid, but the page displays them anyway. Add additional code to check for invalid inputs and in the event that a user enters invalid data, display an error message instead of the results. The error message should be red (see Bootstrap's section on Alerts.
    • Advanced Activity: In the grade exercise, add additional input boxes to represent components of a grade (exams, quizzes, assignments, labs) and modify the JavaScript to bring in all of the data and compute a weighted grade instead.

Module 5.0: Presenting Data I

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module5.0.pdf
  3. Supplement your knowledge with at least one of the following:

Hacktivities

  1. Hacktivity 5.1: hacktivity5.1.pdf
  2. Hacktivity 5.2: hacktivity5.2.pdf

After Class

  1. Learn More
    • Read the following blog post on HTML forms HTML Form Tutorial
    • Complete the rest of Code Academy's Web Track activities (Build Your Own Webpage, Social Networking Profile and Clickable Photo Page)
  2. Challenge Yourself
    • Advanced Activity: Start reading up on Bootstrap, the HTML/CSS framework we've been using, in more detail. In particular, read the getting started page's "Basic Template" and "Examples" sections. Download the source for your favorite template and move your ledger code into the template to create a more visually appealing page.
    • Advanced Activity: The ledger you built is extremely limited: it is only able to handle 5 entries. Modify the page to include an "add another entry" button that adds another row to the ledger. Modify the code to handle any number of these rows. In addition, modify the ledger code to add appropriate error messages when bad inputs are provided.
  3. Additional Resources

Module 6.0: Presenting Data II

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module6.0.pdf
  3. Supplement your knowledge with at least one of the following:

Hacktivities

  1. Hacktivity 6.1: hacktivity6.1.pdf
  2. Hacktivity 6.2: hacktivity6.2.pdf

After Class

  1. Learn More
  2. Challenge Yourself
    • Advanced Activity: Modify any of the previous pages we've worked on and add some styling elements. Try at least 10 different CSS properties.
    • Advanced Activity: Familiarize yourself with Bootstrap's grid framework and redesign the pages to utilize its fluid design.
  3. Additional Resources

Module 7.0: Manipulating Data I

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module7.0.pdf
  3. Supplement your knowledge with at least one of the following:

Hacktivities

Note: this module spans two weeks, so there are 4 hacktivities.

  1. Hacktivity 7.1: hacktivity7.1.pdf
  2. Hacktivity 7.2: hacktivity7.2.pdf
  3. Hacktivity 7.3: hacktivity7.3.pdf
  4. Hacktivity 7.4: hacktivity7.4.pdf

After Class

  1. Learn More
  2. Challenge Yourself
    • Advanced Activity: Add functionality to your Album Collection app to remove records from your table. To do this, add a new column in which each row has a delete button. When the button is clicked, it should remove only that row in the table.
    • Advanced Activity: The data you add to the table is very transient. When you reload or reopen the page, it all disappears. One simple way of persisting data so that it can be saved is by using HTML5's localStorage functionality. Read the following tutorials on local storage and add code that upon each addition, persists the data (in JSON format) to local storage and upon opening the document, it restores the data to the table from local storage.
  3. Additional Resources

Module 8.0: Processing Data I

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module8.0.pdf
  3. Supplement your knowledge with at least one of the following:

Hacktivities

  1. Hacktivity 8.1: hacktivity8.1.pdf
  2. Hacktivity 8.2: hacktivity8.2.pdf

After Class

  1. Learn More
  2. Challenge Yourself
    • Advanced Activity: Add error checking to the Loan Amortization app.
    • Advanced Activity: A common tool with loan calculators is to present the user how much they would save if they made extra payments each month which reduce the balance even quicker, saving them interest. Implement this feature in your loan table app.
  3. Additional Resources
    • Examples of jQuery's $.each() function.

Module 9.0: Organizing Data I

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module9.0.pdf
  3. Supplement your knowledge with at least one of the following:
    • Read: W3Schools's tutorials on Functions (sections Function Definitions through Function Closures).
    • Watch: The New Boston's JavaScript tutorials (videos 6–11) on functions.
    • Interact: Complete Code Academy's Function tutorial (Introduction to Functions in JS and Build "Rock, Paper, Scissors").

Hacktivities

  1. Hacktivity 9.1: hacktivity9.1.pdf
  2. Hacktivity 9.2: hacktivity9.2.pdf

After Class

  1. Learn More
  2. Challenge Yourself
    • Advanced Activity: Write a function to determine if a given integer is prime or not
    • Advanced Activity: Write a function to determine if a given string is a palindrome or not. Make your function recursive: it should call itself.
  3. Additional Resources

Module 10.0: Processing Data II

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module10.0.pdf
  3. Supplement your knowledge with at least one of the following:

Hacktivities

  1. Hacktivity 10.1: hacktivity10.1.pdf
  2. Hacktivity 10.2: hacktivity10.2.pdf

After Class

  1. Learn More
  2. Challenge Yourself
    • Advanced Activity: The filter, map, reduce, forEach methods all operate on an array from the first element to the last. Write your own versions of these functions that operate in reverse order (from the last element to the first).
  3. Additional Resources
    • Mozilla Developer Network's documentation on Arrays
    • Mozilla Developer Network's documentation on Strings

Module 11.0: Consuming Data I

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module11.0.pdf
  3. Supplement your knowledge with at least one of the following:

Hacktivities

  1. Hacktivity 11.1: hacktivity11.1.pdf
  2. Hacktivity 11.2: hacktivity11.2.pdf

After Class

  1. Learn More
  2. Challenge Yourself
    • Advanced Activity: Reddit is a popular website that has many special-interest "sub-reddits" that users post interesting articles or image galleries concerning their hobbies, interests, etc. Reddit also has a public, open API for retrieving posts and articles. For example, the woodworking subreddit. The raw JSON data can be accessed through the API using the following URL, http://www.reddit.com/r/woodworking/new.json. The returned JSON is a lot more complicated, containing a lot more information and metadata about each post. Write your own Reddit front-end for any forum using jQuery's $.ajax() function, connecting to reddit forums.
  3. Additional Resources

Module 12.0: Organizing Data I

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module12.0.pdf
  3. Supplement your knowledge with at least one of the following:

Hacktivities

  1. Hacktivity 12.1: hacktivity12.1.pdf
  2. Hacktivity 12.2: hacktivity12.2.pdf

After Class

  1. Learn More
  2. Challenge Yourself
    • Advanced Activity: Implement a faster sorting algorithm in JavaScript and test it against the sort() function.
    • Advanced Activity: Dive into D3.js even further by taking a full online, free course on the subject from Udacity
  3. Additional Resources
    • C3.js – a D3-based reusable chart library
    • NVD3 – another wrapper library for D3 charts

Module 13.0: Organizing Code II

Prior To Class

  1. Watch the following videos:
  2. Read the handout: module13.0.pdf
  3. Interact: take Codecademy's Online Git Tutorial

Hacktivities

  1. Hacktivity 13.1: hacktivity13.1.pdf
  2. Hacktivity 13.2: hacktivity13.2.pdf

After Class

  1. Learn More
  2. Challenge Yourself
    • Advanced Activity: Integrate the data tables jQuery plugin with your app so that your columns are sortable. You'll need to take extra care though:
      • The first column's numbers should not be affected by any reordering.
      • The last column should not be sortable as it is just contains the delete buttons
      • The sorting of columns typically only happens when the table is initialized or when you resort by a column. You'll need to read the documentation to understand how to properly add a row so that it is added at the correct position.
  3. Additional Resources

Assignments

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

A special thank you to Moby Gratis and Moby for the use of the track Sunspot.