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
- Tuesdays & Thursdays 5:00PM – 6:15PM in Avery 20
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
- Riley Jhi: T 3:30PM – 5PM & F Noon – 3PM
Thien Nguyen: TR 3:30 – 5:00PM- Taylor Otten
- Matt Shanahan: T 2PM – 4PM
- Jia Yeh Beh: F 10:30AM – Noon
Resources
Course Resources
Software
- GitHub
- Git Tutorial
- FileZilla (you want the client)
- LightTable IDE
Online Learning
Schedule
Week | Dates | Topics | Notes |
---|---|---|---|
1 | August 21 – 25 |
Module 1: Getting Started
|
|
2 | August 28 – September 1 |
Module 2: Introduction to Data
|
|
3 | September 4 – 8 |
Module 3: Manipulating Data I
|
|
4 | September 11 – 15 |
Module 4: Making Decisions
|
|
5 | September 18 – 22 |
Module 5: Presenting Data I
|
Assignment 1 Due: Thursday, September 21st |
6 | September 25 – 29 |
Module 6: Presenting Data II
|
|
7 | October 2 – 6 |
Module 7: Manipulating Data I
|
|
8 | October 9 – 13 |
Module 7 (continued)
|
|
9 | October 16 – 20 |
|
Fall Break |
10 | October 23 – 27 |
Module 8: Processing Data I
|
Assignment 2 Due: Thursday, October 26th |
11 | October 30 – November 3 |
Module 9: Organizing Code I
|
|
12 | November 6 – 10 |
Module 10: Processing Data II
|
Assignment 3 Due: Thursday November 9th |
13 | November 13 – 17 |
Module 11: Consuming Data
|
|
14 | November 20 – 24 |
|
Assignment 4 Due: Tuesday November 21st Thanksgiving Break |
15 | November 27 – December 1 |
Module 12: Organizing Data
|
|
16 | December 4 – December 8 |
Module 13: Organizing Code II
|
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
- Day One: Course Introduction
- Hacktivity 1.1: hacktivity1.1.pdf - Getting Started
After Class
- 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
- 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. - Read the following articles on coding:
- Coder's High by David Auerbach
- What I wish I'd known starting out as a programmer by Andrew C. Oliver
- What I tell all new programmers by Joseph Gentle
- Programming is Terrible so Learn to Enjoy It
Module 2.0: Introduction to Data
Prior To Class
- Watch the following videos:
- Video 2.1: Working With Data (7:50)
- Video 2.2: JavaScript Object Notation (JSON) (7:46)
- Slides: Lecture-IntroductionToData-HandoutNoNotes.pdf
- Read the handout: module2.0.pdf
- Supplement your knowledge with at least one of the following:
- Read: The following information on JSON:
- Watch: Introduction to JSON
Hacktivities
After Class
- 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).
- 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
- Watch the following videos:
- Video 3.1: Variables (9:27)
- Video 3.2: Operators (13:07)
- Video 3.3: Exercise (3:38)
- Slides: Lecture-ManipulatingDataI-HandoutNoNotes.pdf
- Read the handout: module3.0.pdf
- Supplement your knowledge with at least one of the following:
- Read: Variables and Data Types chapters of the w3schools tutorial:
- Watch: The New Boston's JavaScript tutorials (watch videos 1--5): https://www.thenewboston.com/videos.php?cat=10
- Interact: Code Academy's Getting Started with Programming: http://www.codecademy.com/en/tracks/javascript
Hacktivities
- Hacktivity 3.1: hacktivity3.1.pdf
- Hacktivity 3.2: hacktivity3.2.pdf
After Class
- Learn More
- Read the following articles on good commenting practices:
- Read the following article on Why Learning to Code is So Damn Hard
- 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
- Watch the following videos:
- Video 4.1: Comparison & Logical Operators (11:32)
- Video 4.2: Conditional Statements (5:05)
- Video 4.3: Exercise (4:15)
- Slides: Lecture-MakingDecisions-HandoutNoNotes.pdf
- Read the handout: module4.0.pdf
- Supplement your knowledge with at least one of the following:
- Read: Logical Operators and If-Else chapters of the w3schools tutorial:
- Watch: The New Boston's JavaScript tutorials (watch videos 14-17): https://www.thenewboston.com/videos.php?cat=10
- Interact: Code Academy's Choose Your Own Adventure!: http://www.codecademy.com/en/tracks/javascript
Hacktivities
- Hacktivity 4.1: hacktivity4.1.pdf
- Hacktivity 4.2: hacktivity4.2.pdf
After Class
- Learn More
- Read the following articles on logic and conditionals in JavaScript:
- 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
- Watch the following videos:
- Video 5.1: (4:26)
- Video 5.2: (7:32)
- Slides: Lecture-PresentingDataI-HandoutNoNotes.pdf
- Read the handout: module5.0.pdf
- Supplement your knowledge with at least one of the following:
- Read: Sections HOME through Paragraphs of the w3schools HTML tutorial:
- Watch: Learn HTML in 15 Minutes: https://www.youtube.com/watch?v=Ggh_y-33Eso
- Interact: Code Academy's HTML Basics I, II, and III: http://www.codecademy.com/en/tracks/web
Hacktivities
- Hacktivity 5.1: hacktivity5.1.pdf
- Hacktivity 5.2: hacktivity5.2.pdf
After Class
- 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)
- 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.
- Additional Resources
Module 6.0: Presenting Data II
Prior To Class
- Watch the following videos:
- Video 6.1: Introduction to CSS (6:11)
- Video 6.2: Common Style Elements (5:48)
- Video 6.3: Selectors, Combinators, etc. (8:21)
- Slides: Lecture-PresentingDataII-HandoutNoNotes.pdf
- Read the handout: module6.0.pdf
- Supplement your knowledge with at least one of the following:
- Read: the Introduction, Syntax, Selectors, and How To sections in the W3Schools CSS Tutorial
- Watch: Introduction to CSS
- Interact: Code Academy's CSS: An Overview and CSS Selectors in the Web Track
Hacktivities
- Hacktivity 6.1: hacktivity6.1.pdf
- Hacktivity 6.2: hacktivity6.2.pdf
After Class
- Learn More
- Get a deeper Understanding of CSS Specificity
- Learn more about hexadecimal color coding playing this Hex Shifter App
- Explore CSS by interacting with this CSS3 Maker
- Play around with CSS Desk, an online CSS editor.
- For fun: take a look at the power of CSS which is able to draw and animate Simpsons Characters in CSS
- Learn about the (updates) to the CSS grid system to allow for adaptive layouts: Video, Specification, Tutorial.
- 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.
- Additional Resources
Module 7.0: Manipulating Data I
Prior To Class
- Watch the following videos:
- Video 7.1: Introduction to jQuery (8:01)
- Video 7.2: Common jQuery Functions (7:57)
- Video 7.3: Manipulating DOM Elements (10:32)
- Slides: Lecture-ManipulatingDataII-HandoutNoNotes.pdf
- Read the handout: module7.0.pdf
- Supplement your knowledge with at least one of the following:
- Read: Sections HOME through Selectors of the W3Schools jQuery Tutorial
- Watch: jQuery Tutorial for Beginners
- Interact: Code Academy's Introduction to jQuery, jQuery Functions, and Dynamic HTML activities in the jQuery Track
Hacktivities
Note: this module spans two weeks, so there are 4 hacktivities.
- Hacktivity 7.1: hacktivity7.1.pdf
- Hacktivity 7.2: hacktivity7.2.pdf
- Hacktivity 7.3: hacktivity7.3.pdf
- Hacktivity 7.4: hacktivity7.4.pdf
After Class
- Learn More
- Read the following blog posts on attributes of highly effective programmers:
- 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. - Additional Resources
Module 8.0: Processing Data I
Prior To Class
- Watch the following videos:
- Video 8.1: (8:49)
- Video 8.2: Demonstrations & Exercises (10:47)
- Slides: Lecture-ProcessingDataI-HandoutNoNotes.pdf
- Read the handout: module8.0.pdf
- Supplement your knowledge with at least one of the following:
- Read: W3Schools's tutorials on For Loops and While Loops as well as jQuery's tutorial on Iterating
- Watch: The
New Boston's JavaScript tutorials (videos 19–20) on loops and
a tutorial on jQuery's
.each
function. - Interact: Complete Code Academy's Loops and While Loop sections.
Hacktivities
- Hacktivity 8.1: hacktivity8.1.pdf
- Hacktivity 8.2: hacktivity8.2.pdf
After Class
- Learn More
- Read Rethinking JavaScript for-loops
- Read Going Async With ES6 Generators for some exposure to cutting-edge JavaScript techniques.
- 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.
- Additional Resources
- Examples of jQuery's
$.each()
function.
Module 9.0: Organizing Data I
Prior To Class
- Watch the following videos:
- Video 9.1: Introduction to Functions (8:15)
- Video 9.2: Callbacks (7:44)
- Video 9.3: Exercises (6:34)
- Slides: Lecture-OrganizingCodeI-HandoutNoNotes.pdf
- Read the handout: module9.0.pdf
- 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
- Hacktivity 9.1: hacktivity9.1.pdf
- Hacktivity 9.2: hacktivity9.2.pdf
After Class
- Learn More
- Learn more about asynchronicity with John Resig's tutorial on How JavaScript Timers Work
- Some other tutorials on callbacks:
- A discussion on "Callback Hell" and JavaScript Promises: callbackhell.com
- An introduction to Javascript Constructors and Prototypes
- 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.
- Additional Resources
Module 10.0: Processing Data II
Prior To Class
- Watch the following videos:
- Video 10.1: Array Processing (9:14)
- Video 10.2: String Processing (10:51)
- Slides: Lecture-ProcessingDataII-HandoutNoNotes.pdf
- Read the handout: module10.0.pdf
- Supplement your knowledge with at least one of the following:
Hacktivities
- Hacktivity 10.1: hacktivity10.1.pdf
- Hacktivity 10.2: hacktivity10.2.pdf
After Class
- Learn More
- Learn about Regular Expressions in JavaScript
- What is a Polyfill
- 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). - Additional Resources
Module 11.0: Consuming Data I
Prior To Class
- Watch the following videos:
- Video 11.1: Introduction to Ajax (9:58)
- Video 11.2: Ajax Demonstration (11:41)
- Slides: Lecture-ConsumingDataI-HandoutNoNotes.pdf
- Read the handout: module11.0.pdf
- Supplement your knowledge with at least one of the following:
- Read: jQuery's AJAX tutorial
and
$.ajax()
tutorial - Watch: AJAX and jQuery Beginner Tutorial (watch videos 28–31),
Hacktivities
- Hacktivity 11.1: hacktivity11.1.pdf
- Hacktivity 11.2: hacktivity11.2.pdf
After Class
- Learn More
- The Perfect jQuery ajax request - A tutorial that shows why using jQuery's function is much easier
- Create your own loading spinner graphic using loadinfo.net
- Get an understanding of JavaScript's Promise feature for asynchronous functions:
- 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. - Additional Resources
- Ajax/jQuery tutorial
- jQuery
ajax()
tutorial - JSONProxy, a service that offers proxy JSONP and CORS service
Module 12.0: Organizing Data I
Prior To Class
- Watch the following videos:
- Video 12.1: Searching (4:59)
- Video 12.2: Sorting (6:30)
- Slides: Lecture-OrganizingDataI-HandoutNoNotes.pdf
- Read the handout: module12.0.pdf
- Supplement your knowledge with at least one of the following:
- Browse the gallery of D3js Examples
Hacktivities
- Hacktivity 12.1: hacktivity12.1.pdf
- Hacktivity 12.2: hacktivity12.2.pdf
After Class
- Learn More
- Learn more about various sorting algorithms: http://sorting-algorithms.com
- Read the following article on Data Visualization: Design & Redesign
- Read more on d3.js: https://github.com/mbostock/d3/wiki/Tutorials
- 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
- Additional Resources
Module 13.0: Organizing Code II
Prior To Class
- Watch the following videos:
- Read the handout: module13.0.pdf
- Interact: take Codecademy's Online Git Tutorial
Hacktivities
- Hacktivity 13.1: hacktivity13.1.pdf
- Hacktivity 13.2: hacktivity13.2.pdf
After Class
- Learn More
- Go through the following GitHub Tutorial
- 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.
- Additional Resources
Assignments
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.