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