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

Date Readings Sessions & Labs Homework
Mon, 08/22 No readings here Session 1: Introduction to the course No homework
Wed, 08/24 Shay, chapter 1 Session 2: Internet & WWW: essential background No homework
Fri, 08/26 No readings here Lab 1: Getting started with HTML & CSS Homework 1
Mon, 08/29 Shay, chapter 2 Session 3: Introduction to HTML & CSS (part 1) No homework
Wed, 08/31 Shay, chapter 1
Shay, chapter 3
Session 4: Introduction to HTML & CSS (part 2) Homework 2
Fri, 09/02 No readings here Lab 2: HTML & CSS essentials No homework
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
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
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
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
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
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: Using functions (continued)
Fri, 10/14 Lab-7: Using functions Homework 6
Mon, 10/17 Chinnathambi, ch. 4, 25 Session 15: Code that makes decisions: conditional statements; modifying & styling DOM elements
Wed, 10/19 Chinnathambi, ch. 5 Session 16: Code that knows how to repeat things: loops; traversing the DOM
Fri, 10/21 Lab-8 Homework 7
Mon, 10/24 Chinnathambi, ch. 28 Session 17: Events that happen in the browser: code that listens and reacts
Wed, 10/26 Session 18: (continued)
Fri, 10/28 Lab-9 Homework 8
Mon, 10/31 Chinnathambi, ch. 26 Session 19: Writing code that will rewrite your code: creating, adding & removing DOM elements
Wed, 11/02 Session 20: Putting it all together: modifying the DOM tree in response to browser events
Fri, 11/04 Lab-10 Homework 9
Mon, 11/07 Exam-2
Wed, 11/09 Chinnathambi, ch. 7, 8 Session 21: Simplifying it all: introducing jQuery
Fri, 11/11 Lab-11
Mon, 11/14 TBD Session 22: Visual effects with jQuery
Wed, 11/16 TBD Session 23: Beautiful user interfaces with jQueryUI
Fri, 11/18 Lab-12 Homework 10
Mon, 11/21 THANKSGIVING BREAK
Wed, 11/23
Fri, 11/25
Mon, 11/28 TBD Session 24: Updating parts of the web page without reloading it: a gentle introduction to AJAX & JSON
Wed, 11/30 TBD Session 25: Working with JavaScript APIs
Fri, 12/02 Lab-13
Mon, 12/05 TBD Session 26: Integrating cloud-based content into web pages
Wed, 12/07 Session 27: (continued)
Fri, 12/09 Session 28: Course review, Q&A
Mon, 12/12 Final Project Presentation (1:00 - 2:50 p.m.)