CS 1100: Web Development: Client-Side Coding

Welcome

Welcome to CS 1100, a course that will help you learn to build web pages using HTML, CSS, and JavaScript — the fundamental skills of web development in the 21st century.

In this course, you will learn how to build web pages without relying on tools that can do it for you. It is a course for beginners. There are no prerequisites, and no coding background is assumed.

Why is this knowledge useful? We live in a time when anyone can create a website in minutes using WordPress, Drupal, or any number of systems. These systems are useful, but they limit what we can do. How do we do things that the system won't do for us? Who creates the unique designs that set a website apart from the masses? People who know the core technologies: HTML, CSS, and JavaScript.

Knowledge of the technical side of web development will open doors for you. It will prepare you to do and learn more.

My name is Eugene Wallingford. I have been at UNI for many years. My research background was in AI, before I shifted to software design. This course is a bonus for me, as I do not often teach courses for non-majors.

Survey

To help me do a better job teaching the course, I'd like to know a bit about you:

• Have you ever seen HTML? Written any?
• Have you ever seen CSS? Written any?
• Have you ever seen JavaScript? Written any?
• Do you have any experience in any other programming language?
• What is your goal for taking this course?
• Do you have a laptop to use in class?
  If no, do you have a desktop machine at home?

Review Course Website and Syllabus

The course syllabus covers the basics. I am handing out the front page, which contains the important contact information for the course, including the most important information of all: a link to the course website. From there, you can find everything else you need for the course.

website

I do not use eLearning, because reasons. But in this this course, we have an especially good one: the pages on my site were written by a person, using the same tools and techniques as you will learn in this course. They will be among the examples we can study — learning by example! This was the way of the original web.

schedule

The grid describes and links to the things we will do day to day and week to week. Reading → sessions → homework assignments, and an occasional exam.

Readings will generally be available at the start of the week, so that you may read before coming to class on Tuesday. This week's reading is different in two ways:

• timing: a little late, a little less "essential"
• type: not about the tools we are learning to use, but the context for our task and tools

goals

This is a course on "client-side coding". This refers to code and programs that reside on the user's computer and runs in a web browser like Firefox, Chrome, or Safari. (Those are the clients!) This differs from "server-side coding", which refers to programs that reside on the web server that hosts the site.

Another distinction you may hear about is "front-end" web development and "back-end" web development. The front end of a website is what the user sees; the back end deals with the computations that happen on the server, including things like a database of products. This course deals in front-end development.

We have already encountered the key components of the course. Here they are in a bullet list... In this course, you will learn:

• how core web technologies work
• how to create web pages using HTML
• how to style web pages using CSS
• how to add functionality and interactivity to web pages using JavaScript

tools

We'll talk more about tools in Session 2. As you might imagine, though, a web browser will be essential.

We will use three web browsers. They are similar in what they do and just enough different that web developers have to use them all. They also offer slightly different tools to the developer.

We can write our code using many different tools, but we will use a particular text editor that was created just for web developers. It will be immensely helpful to you.

We can run all of our JavaScript in a browser, if we like, but that's not the most effective way to learn how to write code. So we will use a program that lets us run our code in more ways.

policy

The use of AI tools is a hot topic in many courses. The topic of this course has been subject to the more general problem for a long time. There is software that can generate web sites. We won't be using any of them.

A Simple Page

We create web pages using HTML: page 1

We add style to our pages with CSS: page 1, with style

We add interactivity to our pages with JavaScript: page 2, with interaction

The third example also shows how the web exposes a way for us to interact with pages, an API. That is short for "application programming interface", which is a fancy way of saying a way for two or more computer programs to communicate with each other.

Don't worry if this all sounds or looks opaque today. Our goal this semester is to learn how to read and write these magical tongues.

Closing

This course is almost thirty years in coming for me. I have been making web pages as long as anyone at UNI. For the last twenty years, I mostly been using legacy HTML features, now deprecated, to create simple pages with a minimum of styling. I was limited, but the pages were simple and good enough for my needs. Now I get time to do more!

I am a programmer, not a designer.

• I have HTML experience, but HTML has changed -- and is changing...
• I am not a CSS expert.
• I have written a lot of code, but picked up JavaScript only a couple of years ago.

This is all to say: I like to learn and am still learning. This should be a fun course for all of us.

Demonstration Paragraphs for Homework 9

Test 3.1: findElement('h3', 'Welcome') ===

Test 3.2: findElement('h3', 'Introduction') ===

Test 4.1: isRedirectCode(301) ===

Test 4.2: isRedirectCode(404) ===