CS 1100: Web Development: Client-Side Coding

Fall 2016

About the Course

The course is an introduction to the "coding side" of web development: you will learn how to build web pages without relying on user-friendly tools that can do it it for you.

What use is this knowledge? Anyone can create a website with WordPress or any other content management system in minutes. However, such tools, while incredibly useful, limit you in what you can do. Yes, they can be customized in many ways. However, without the knowledge of how a web page works, you cannot easily change it to fit your needs; without the knowledge of styling, you cannot modify a theme; and without understanding the basics of programming, you cannot use all those free JavaScript programs that would add valuable content and functionality to your website.

Most importantly, knowledge of the technical side of web development, as well as the fundamentals of computing is an open door: with this foundation, you will be able to learn, even teach yourself, other technologies (programming languages, code libraries and frameworks, content management systems, etc.), use other people's code, and share your own.

What you will learn

"Client-side code" refers to code that resides on the user's computer and runs in an Internet browser like Firefox, Chrome or Safari (i.e., the client), as opposed to "server-side code", which resides on the web server that hosts the website.

Although this course is only an introduction, you will be introduced to a lot of ideas and new skills. You will learn about core web technologies, how to display content on a web page - i.e., how to create simple websites with HTML and style them with CSS. You will also learn how to make that content "do" things - i.e., how to write simple programs using JavaScript, how to use a JavaScript library like jQuery to create cool visual effects, and how to tap into public APIs (application programming interfaces) to add dynamic content and functionality to your own web pages.

The course is for beginners: there are no prerequisites, no coding background is assumed.

Schedule

Week Date Readings Sessions & Labs Homework
1 Mon, 08/22 Session 1: Introduction to the course
Wed, 08/24 Shay, chapter 1 (In Practice: optional) Session 2: Internet & WWW: essential background
Fri, 08/26 Lab 1: Getting started with HTML & CSS Homework 1
available on eLearning
2 Mon, 08/29 Shay, chapter 2 (In Practice: optional) Session 3: Introduction to HTML & CSS (part 1)
Wed, 08/31 Shay, chapter 1 (review Working with Selectors)
Shay, chapter 3 (Common CSS Property Values, The Cascade)
Session 4: Introduction to HTML & CSS (part 2) Homework 2
Fri, 09/02 Lab 2: HTML & CSS essentials | download lab files
3 Mon, 09/05 LABOR DAY
Wed, 09/07 Shay, chapter 8 (List Item Styling; Horizontally Displaying a List)
Shay, chapter 11 (Table Borders; Aligning Text)
Shay, chapter 4 (up to In Practice)
Session 5: (lab assigned)
Lab 3 part 1: Common CSS properties and selectors
download lab files
Fri, 09/09 Lab 3 part 2: Building and styling lists and tables
download lab files
Homework 3
4 Mon, 09/12 Shay, chapter 5 (Uniquely Positioned Elements)
Position property
Z-index property Shay, chapter 5 (Positioning with Floats)
Optional: Containing floats
Session 6: Review of lists and tables; CSS box model
Wed, 09/14 Suggested: book chapter on eLeaning Session 7: Introduction to CSS layout
Fri, 09/16 Lab 4: CSS box model and basic layout techniques
download lab files
Homework 4
5 Mon, 09/19 Session 8: Approaches to layout
Wed, 09/21 Session 9: Responsive design: Displaying web pages on any device
Fri, 09/23 Lab-5: Implementing responsive design with Bootstrap
download lab files
Homework 5
homework files
target screenshot
6 Mon, 09/26 Review Session: Foundations; HTML; CSS
Wed, 09/28 Exam-1 | study guide
Fri, 09/30 Chinnathambi, ch. 1, 2, 9 Session 10: Introduction to programming & JavaScript
7 Mon, 10/03 Chinnathambi, ch. 11, 21, 22 Session 11: The JavaScript language
Wed, 10/05 Session 12: How JavaScript "sees" your web page: the Document Object Model (DOM)
Fri, 10/07 Lab-6: Exploring JavaScript: variables, statements, operators, introducing the DOM
download lab files
8 Mon, 10/10 Chinnathambi, ch. 3 Session 13: Simplifying your code with functions
download code
Wed, 10/12 Chinnathambi, ch. 23, 24, 27 Session 14: More on using functions and the DOM
Fri, 10/14 Lab-7: Explore the DOM API
download lab file
Homework 6
homework file
9 Mon, 10/17 Chinnathambi, ch. 4 Session 15: Code that makes decisions: conditional statements; modifying & styling DOM elements
download code
Wed, 10/19 Session 16: Conditional statements and functions (continued)
download code
Fri, 10/21 review Chinnathambi, ch. 3, 4 Lab-8: Conditional statements, functions, DOM styling
download lab file
Homework 7
homework file
10 Mon, 10/24 Session 17: Making use of functions; refactoring code
html file | js file (final version)
Wed, 10/26 Chinnathambi, ch. 5, 25 Session 18: Code that knows how to repeat things: loops; traversing the DOM
Fri, 10/28 review Chinnathambi, ch. 4, 5, 25 Lab-9: Loops and arrays
download lab file
11 Mon, 10/31 Chinnathambi, ch. 28 Session 19: Events that happen in the browser: code that listens and reacts
Wed, 11/02 Chinnathambi, ch. 26 Session 20: Events & the DOM
code used in class
Fri, 11/04 Lab-10: Events
download lab file
Homework 8
12 Mon, 11/07 Programming & JavaScript review
Wed, 11/09 Exam-2 | study guide
Fri, 11/11 Chinnathambi, ch. 7, 8 Session 21: Simplifying it all: introducing jQuery
13 Mon, 11/14 Session 22: jQuery: an overview
Wed, 11/16 Session 23: jQuery (continued)
Fri, 11/18 jQuery essential training
(login at lynda.uni.edu)
Lab-11: The Travellling Hobbit v 2.0
download lab file
14 Mon, 11/21 THANKSGIVING BREAK
Wed, 11/23
Fri, 11/25
15 Mon, 11/28 Session 24: User interfaces with jQuery UI code used in class
Wed, 11/30 Session 25: jQuery UI (continued) jQuery UI HTML template
Fri, 12/02 Up and running with jQuery UI
(login at lynda.uni.edu)
Lab-12: Exploring jQuery UI
download lab files
Homework 9
16 Mon, 12/05 Session 26: Integrating cloud-based content into web pages
Wed, 12/07 Session 27: (continued)
Fri, 12/09 Lab-13: AJAX and the Flickr API
download lab files
Extra credit assignment
Available on eLearning
17 Mon, 12/12 Final Project Presentation (1:00 - 2:50 p.m.)