CS 1100: Web Development: Client-Side Coding

Fall 2016

Session 1: Introduction to the Course

Welcome to CS 1100!

Following is a recap of some of the key points we covered during our first day of class.

1. All course material will be posted to this web site. I'll try to post session notes as soon as I can, although I can't promise they will be up the same day of class throughout the semester. These notes will summarize what we discuss and will include links to additional resources, as well as code examples used in class.

2. Please read the syllabus: it includes essential information about course policies, its structure, grading, etc.

3. My office hours are on the syllabus; however. I tend to be available at other times. If I'm in my office, feel free to pop in.

4. Textbooks and other sources. The HTML/CSS book is available online. Unless you prefer to have a hard copy (I often do), feel free to use the online version. We will be using additional readings, some of which are by the same author and are available online only - so we will be using his site in any case. The other book is not available online; however I recommend shopping around: Amazon lists it at $13.91; we won't need it until late September, so you have time.

Neither book covers everything we need. The reason for that is that the course takes a survey approach to the material and covers a lot of different topics which, typically, do not fit in one (high quality) text. Instead, we will use a variety of texts (our two books + additional online sources), each one being a good and reliable source for the topic they cover. (Thus, we are taking an approach similar to UNIX philosophy: for each task we will use the tool that does one thing only, but does it well). Shay provides an excellent overview of HTML and CSS, blending the two languages from the start (making HTML less boring, and CSS - less intimidating). Chinnathambi explains essential programming concepts with ease, clarity, and humor - using JavaScript as context - which is a rare combination. For jQuery and advanced topics we'll get to later in the semester, we'll use beginner-friendly sources in addition to traditional tutorials.

5. Technology. You don't need any special software for this course. We will use a text editor, a browser, and an FTP client. Most computers on campus will have Notepad++ (or TextWrangler on Macs), a variety of browsers, and FileZilla (Cyberduck on Macs). All of these are available for free. You may use any lab or any computer you like.

We will be using laptops most of the time. There is a cart with laptops next door - I'll typically ask you to take one laptop for each pair (you'll be working in pairs most of the time - more on that later.) You are welcome to bring your own laptop; however, I will still ask you to work with a partner: I want you to engage with the material together, so you can actively discuss and experiment.

6. The schedule on the course website describes the material we will be covering. The course can be split into three parts: (1) HTML/CSS; (2) programming and JavaScript; and (3) jQuery and more. Here's the idea:

  1. First we learn the basics: what a web page is, how it is delivered from a server to our browser window, how we create one, what content we can display, and how we can specify its appearance. There is no use talking about JavaScript, visual effects or any other cool stuff before we know how to create the substance we will be then manipulating and transforming with all that "cool stuff".
  2. We then move onto programming and JavaScript. Before you can animate a web page element, you need to learn how to find it on the page, how to access it, and how to instruct it to, well ...be animated. That's where foundational programming concepts come in: you'll learn about variables and why we use them to store values; you'll learn how to tell the computer (in our case, the browser) to calculate values (expressions), do things with those values (statements), decide whether to do them or not based on some test (conditionals), repeat them over and over (loops) until some condition is met; and do all that in response to a movement of the mouse, a click of a key, or the scrolling of the browser window (events).
  3. Once we are done with part 1 and 2, we'll start putting this all together to achieve beautiful visual effects and more. That's where your final project comes in!

7. The final project will be small group activity: you'll work with a partner to apply what you've learned to a domain of interest (your choice!). We'll address the project later in the semester: I'll provide you guidelines and sample ideas, but the choice will be yours: my goal is to have you work on something that matters to you; something we can enjoy sharing at our own poster session at the end of the semester.

8. We have a very diverse group of people in this class, representing 23 majors, freshmen through seniors - which is great! You all have different backgrounds (some of us even come from different parts of the world - myself included!). Some of you have made a web page in the past, others haven't. Some have written a program or two (or even lots!) - but most haven't. I'll try to prepare our sessions in a way that all of you pick up something new every time you come to class. However, keep in mind that this class is first and foremost for beginners: therefore, all the material will be structured and presented in a way that assumes absolutely no prior experience with code or web development. It is a gentle introduction into the world of computing and dynamic web sites: you won't become a professional web developer by December, but you will have a clear idea of "what's out there", what to learn and how - should you aspire to go further down this road. The course opens the door.

Again, welcome to CS 1100!