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.) | ||
