COAP 2000 01: Introduction to Web Programming
George Herbert Walker School of Business & Technology
Dept. of Mathematics & Computer Science

INTM 3100 02: Programming for the Web
School of Communications
Dept. of Electronic & Photographic Media

Spring 2018
Mon. 5:30–9:30 p.m.
Mar. 19–May 7, 2017
East Academic Building 212, Webster Campus

Instructor: Scott Granneman

You can also read my full CV.

Course Description

Webster’s Description

Introduction to Web Programming (formerly titled XHTML Programming). HTML is the programming language used to develop home pages on the Internet. This course covers the most current tools available for developing HTML documents and posting pages on the World Wide Web. This course covers the basics of HTML5.

My Description

Introduction to Web Programming covers website development using the two technologies required in all webpages today: HTML (which provides structure) & CSS (which sets formatting & positioning). After a broad overview of HTML we’ll learn the basics of CSS (an Advanced course in the Spring covers CSS in far more depth). We’ll conclude with Responsive Web Design: a modern method for developing websites that provides optimal viewing experiences (in terms of reading, navigation, & layout) across a wide range of traditional & mobile devices.

What You’re Going to Learn

Basically, HTML5 & CSS & how to put them together correctly to create a website.

Learning Outcomes

• Ability to implement an appropriate planning strategy for developing websites.
• Ability to produce functional, flexible, & versatile websites.
• Ability to locate, evaluate, & critically assess current & emerging technologies for developing websites.
• Possess a good working knowledge of HTML5 & CSS.
• Experience creating various small website projects.
• An awareness of the process in creating a website & the various roles needed in that process.

Mini-Topics

During most classes I will take a few minutes & discuss a mini-topic for 10 minutes or so. Some of these mini-topics include:

Requirements

Texts

There are no required books. Readings will consist of articles, analyses, & ephemera from the Internet. Virtually everything you need can be accessed via my website; however, when it's appropriate I will recommend books useful for further study & reference.

OK, if you just have to kill a tree, I highly recommend Jon Duckett's HTML & CSS: Design and Build Websites. But it's not required.

Communicate with Remind

Email still has its uses, but it’s time for us to keep in touch outside of class with a more modern tool: messaging. I found a great free service called Remind that you can use either as an app on your iPhone or Android device, or via texting.

You can download the app from the usual places:

•  App Store
• Google Play Store

To join our course’s Remind group, you will need to get instructions from me during class.

So what are we going to use Remind for?

• A way for me to communicate with students in the class. If I need everyone to know something about the class (like I'm vomiting or trapped in a burning car, so I might be late), I’ll send it to Remind.
• A way for me to share interesting readings with students. If I find an article that looks like something appropriate to this course, I’ll send it on via Remind. It’s just a suggestion for reading; it’s not required.
• A way for you guys to communicate with me or other students. When you send an message to Remind, it goes to everyone. Do keep that in mind!

Grading

Your grade will be based on the following factors:

• Class attendance and participation (20%): You are expected to attend class prepared to learn and discuss the topics with your fellow classmates. We may also work on in-class exercises, and you are expected to take an active part in those exercises.
• Projects (80%): We will practice HTML & CSS in & out of class with a series of assigned projects involving the use of these technologies. Think of them as open-book tests, since you will be allowed (heck, encouraged!) to use your class notes, websites, & any other resources you can access. IMPORTANT: You must either show me that you have completed a project within two weeks of its assignment date or asked me for an extension. Neglecting to do so may result in a failing grade for that project.

Grades will be based on an average of the above as follows:

100 A+
94-99 A
89-93 A-
86-88 B+
83-85 B
79-82 B-
76-78 C+
73-75 C
69-72 C-
66-68 D+
63-65 D
59-62 D-
0-58 F

At any time you can ask me how you’re doing in the course & I will show you.

How the Class Works

This course is based around the idea of flipped teaching. Instead of coming to class to hear a lecture & then going home to do work, we’re going to flip that.

I’ve made videos for most of the lectures in this course, & you will watch those at home. Some videos are 2 minutes long, while the longest is around 40 minutes; most are around 10 minutes or so. When we’re in class, I’ll review important or tricky stuff, answer questions, & walk around to help or grade your work.

Note that all grading will be done by the two of us sitting together. I will never accept homework turned in via email or any other way that is not collaborative.

If you want to show me some code that you’re confused about or need help with, please go to Pastebin, do the following, & then send me the URL:

• Enter your code into the box
• Set Syntax Highlighting to HTML or CSS
• Set Paste Expiration to 1 week

Policies

Accommodation of Disabilities

Webster University is committed to providing accommodations and/or services to students with documented disabilities. If you have registered as a student with a documented disability and are entitled to classroom or testing accommodations, please inform me at the beginning of the course.

Drops and Withdrawals

The Drop/Add & Withdrawal dates are listed each semester on the University website, in the University catalog, & in the Course Description book. If the course is dropped within the Drop/Add period, no notation of the course will appear on the student’s transcript. Withdrawals that take place after the published Drop date will result in the dreaded “W” appearing on the student’s transcript.

Privacy

Some random student assignments or projects may be retained by the University for the purpose of academic assessment as it relates to student learning outcomes. In addition, I may keep some assignments to show future students. In those cases, the student’s name and all identifying information about the student will be removed from the assignment or project.

Academic Integrity

This course will follow Webster University’s policies concerning academic dishonesty. Academic dishonesty will result in failure for the assignment in question & referral to the appropriate individuals, who have discretion to impose a stricter penalty.

While academic dishonesty includes cheating on exams and quizzes, it also includes plagiarism in written assignments. Plagiarism is not only passing off someone else’s work as your own, but also giving your work to someone else to pass off as their own. It also includes submitting work from another course. While I strongly encourage you to discuss your work with each other in and out of class, and while you may research issues together, your work should be your own.

Any papers you submit must be your work alone, and must include citations to all references in your work. Please include the URL, or Web address, for articles and resources found on the Internet.

If you have any questions about academic integrity, please bring them to me before you do anything that may jeopardize your grades, your education, & your future!

Distractions

I have no problem with students using a laptop, tablet, or smartphone during class for academic purposes; in fact, I would do the same thing. However, please do not use your personal device (or the computer on your desk) during class to conduct personal business such as Facebook, email, or IMing. This reduces your concentration & participation and distracts others around you. Repeated distractions will reduce your grade for the course. Please do what you need to do to keep cell phone distractions at a minimum.

Netiquette

It is paramount that we respect each other in class & online. Follow this simple rule: disagree with the idea, but not the person. In other words, it’s OK to say “That’s a bad idea, because …”, and it’s not OK to say “You’re a bad/stupid/inconsiderate person, because …”.

If you have an issue with a classmate’s behavior online, please bring it to me privately by emailing me at scott@granneman.com.

If you’d like to find out more, please feel free to read The Core Rules of Netiquette, by Virginia Shea.

Tech Support

Need my help diagnosing a problem you’re having remotely? Something won’t install, or won’t work?

1. Download & install the free Jing, which works on both Mac OS X & Windows.
2. Record what you’re seeing on your computer screen, up to a maximum of 5 minutes.
3. Upload the resulting video to screencast.com (also free).
4. Send me a link to the video.

In the email you send me, include the following information:

1. What you did.
2. What you thought should happen.
3. What actually happened.
4. Why that’s a problem.

If you’re talking about a public webpage, don’t forget to include the URL!

Schedule

March 19, 2018 HTML

Read, Watch, Review

• Introduction & Review
• Web Dev Basics
• HTML Overview 1
• HTML Overview 2

Assignments

• Pre-Chartreuse No. 1
• Pre-Chartreuse No. 2

March 26, 2018 HTML

Read, Watch, Review

• HTML Overview 3
• HTML Overview 4
• HTML Linking
• HTML 1

Assignments

• Chartreuse No. 1
• Chartreuse No. 2
• Stooges ← Done in class
• Chartreuse No. 3

April 2, 2018 HTML & CSS

Read, Watch, Review

• HTML 2
• HTML 3
• CSS Overview 1
• CSS Overview 2

Assignments

• Index No. 1 & Chartreuse No. 4
• Tertiary No. 1, Index No. 2, & Chartreuse No. 5

April 9, 2018 CSS

Read, Watch, Review

• CSS Overview 3
• CSS Overview 4
• CSS 1
• Layout Methods

Assignments

• CSS No. 1
• CSS No. 2: The Cascade
• Layout Methods

April 16, 2018: Layout and Media Types & Media Features

Read, Watch, Review

• Layout Methods
• Media-Specific Styles

Assignments

• Layout Methods
• Simple Print Styles

April 23, 2018: Responsive Web Design

Read, Watch, Review

• Responsive Web Design with Bootstrap

Assignments

• Responsive Web Design: Sidebar Page
• Colors Made Responsive

April 30, 2018: CSS Typography

Read, Watch, Review

• CSS Typography Basics
• CSS Typography: Embedding Fonts
• CSS Typography

Assignments

• CSS No. 3: Embedding Fonts
• Colostomo Home Page

May 7, 2018: Finals

Read, Watch, Review

• Finals

Assignment

• Colostomo Website