Web Site Design and Construction

COMM 223 - 001, CRN: 40790
Spring 2020, T/Th 2:15 - 3:30, Ely 313


Professor Nigel Dobereiner
Office: Ely 321
Office Hours:
Monday 1:30-2:00 and by appointment
Tuesday 12:30-2:00 and by appointment
Thursday 12:30-2:00 and by appointment
Office Phone: (413) 572-5743

This course provides as introduction to web site design and creation. It also explores theoretical issues related to media development and user interface design. It includes an overview of the Macintosh interface, and prepares students for advanced work in multimedia production, web page design, streaming media and social media.


Among other things, when you finish this course you will be able to:


Students are expected to get to class each day. I will take attendance at every class and excessive missed classes will lower your final grade. Here's how it works. Everyone can have a legitimate sick day now and then. I give you a couple. After that, every day you miss takes one point away from your final grade. That can easily lower your grade by a full letter. Taking attendance also helps me learn who you are! Anyone with borderline scores at the end of the semester will benefit from a good attendance record, and vice versa. Missing classes will almost certainly affect your final grade also in that almost all of the material learned in this course will come from class lectures and participation. 

If you arrive late for class, be sure to let me know you were in attendance when class is over – otherwise you will probably be marked as absent. I don't like it when people come in late because you disrupt the class and miss the point of what I'm talking about. Be here on time.

If you miss class, I will not provide copies of my lecture notes. You will have to get material from another student. If you miss a project due date your score for that project will be lowered by one full letter grade. If your project is not done within a week of the due date, it will not be accepted and you will receive a grade of 'F' for that project. NO EXCEPTIONS!


You will have to purchase a portable USB drive (available at the book store but much cheaper elsewhere). You will also need to purchase a web site name (~$10) and hosting services (~$16). I will show you how to do this. For that, you will need a credit card number or debit card. There is no text for the course.


Initially, we will be using software called Brackets. Brackets is available for free in either Mac or PC versions at I recommend you download and install it on your own computer so you can work outside of class. We will also be using Dreamweaver, which is part of the Adobe suite of tools including Photoshop. For the foreseeable future, having skills with many of the Adobe tools will be of value when seeking work in Media Arts or PR, and increasingly in Journalism. Acquiring this suite is recommended. (It also includes Premiere and After Effects, which are our go-to video editing applications.) It will make it much easier for you to get your work done if you have access to your own copy. This class will be taught with the assumption that you have ready access to the software tools we are using any day of the week. You can buy the Adobe Suite through Westfield for a special student discount of $20/month. Again, this is strongly recomended. However, you will always have access to the Mac lab when the library is open as long as there is no class in session. If the door is locked, security will let you in.


Three tests (10% each), four projects (Design, 10%; HTML, 15%; CSS, 15% and Responsive Design 20%) and your attendance and participation (10%) will make up your grade. The remaining part of your grade is attendance. Yes, that means you can get an "A" on every project and still end up with a "B" in the course if your attendance is very poor. Later projects will be done in increments and graded as they are developed. 

It is my view that students, in effect, grade themselves. That is, I will make every effort to assist you and give you all the information you need to succeed. However, the ultimate responsibility for success (or failure) is your own. Below you will find the Grading Structure. 


Grading Structure
Score Letter Equivilant























56 or below


A very important part of this course is attending the presentations of student work. Each project will be viewed online by the entire class and I expect constructive feedback/compliments and criticism be provided as appropriate. 

A note of warning: Projects take longer to create than you might think. Please plan your time accordingly. Also, TEST your projects before submitting them for grading. Too often they simply don’t work from the USB drive the way they do on the Mac.

If you are having trouble with the course, please arrange to meet with me during office hours. I will be happy to assist you in any way I can. Anyone whose final grade is close to a borderline status between two letter grades will receive the benefit of the doubt (or vice versa) by a consideration of class attendance and participation records. Again, it’s all up to you.


In the real world there is no such thing as "late". If you're consistently late in a real job, you will soon have no job. To help get you in the habit of timely work, I will only except late projects in rare circumstances. The due date is the due date. Being one class late will deduct one full letter grade. Two classes late, two letters, and so on. Another somewhat intangible factor in your grade includes a quality loosely referred to as “effort.” I’ve done all the things you will be asked to do and I know when it’s been worked on or just dashed off at the last minute. 

"A” - represents outstanding or exceptional work that is good enough to be shown to other students as an example. Your extra effort to excel shows! 

“B” - indicates competent, satisfactory work and shows effort and engagement.

“C” - work that merely fulfills the requirements of the assignment, but just, and doesn't seem to try very hard.

“D” - will be given to work that does not fulfill the requirements of the assignment or is lacking in some important way.

"F" - is a failing grade and would be given only if assignments were extremely poorly executed, not submitted, excessively late, or in the case of plagiarism or other failure to adhere to norms of academic honesty.

Always exceed expectations!


Creating your own work is how you will get ahead your career, no matter what you choose to do. Using anyone else’s work; using a project that was submitted in another class; or having someone else write your assignment, are examples of plagiarism. I caught two students recently and followed procedure to sanction them both. In the real world, plagiarism is often simply called theft and will not be tolerated by companies who may be sued for having employees who steal. I know most people would never commit this crime. But you should know that plagiarism in any form will not be tolerated. Committing plagiarism also means you are not developing skills you will need in the marketplace. You can read more about what constitutes plagiarism here.

This policy may be updated this year so check for the latest version, if needed. If you have any doubts about whether something is considered plagiarism or not, please check with me.


I expect all cell phones to be turned off and not sitting in your desktop awaiting the next message. Messaging of any type in class is not allowed. It is considered rude, shows you don't care about the content of the class, and can have you ejected from the class. Don't let me tell you about this if I see a violation. I will work hard to embarrass you. If you do it too much, I will ask you to leave the class. Permanently.

Respect other students. When someone is speaking or presenting, be quite and listen to them. They have the floor. They are not just speaking for my benefit. Always give others the respect you'd like to be shown. (See the Golden Rule.)


All assignments and supporting materials will be available online at Very useful tutorials and sample code! 


The following Classes and Topics listing is subject to change as our/your interests and progress dictate. However, barring instructions to the contrary, project due dates won't change.

Classes and Topics

Class number



Assignment Due

1 1/21 Class introduction, syllabus
2 1/23 Introducing the Macs (if applicable). Good web sites, bad web sites, what’s the difference?  User Experience (UX) and User Interface (UI)
3 1/28 UX and UI cont. First project assigned
4 1/30 Present first project First assignment due: Web Site Design
5 2/4 Feedback and follow-up on design projects
Organization of site assets, standardized file naming
6 2/6 Introduction to HTML: Tags, lists, and menus. Hyperlinks and pictures. Photoshop. Second project assigned
7 2/11 Test #1 Work on projects in class Test #1
8 2/13

Present second assignment.
Introducing CSS and it's relationship with HTML
A word about tables

Second assignment due: First HTML web site
  2/18 Monday schedule - no class
9 2/20 Introducing Brackets software.
Accessibility, why it's important.
Third project introduced
10 2/25 Work on projects in class
11 2/27 Work on projects in class  
12 3/3 Present third project Third assignment due: HTML site with all CSS control
13 3/5 How the web works. Registering a domain. Purchasing web site hosting.
  3/10 Spring Break - no class
  3/12 Spring Break - no class
14 3/17 Building your web site structure
File Transfer Protocol (FTP) Setting up your web site


3/19 Working with Layout.
The Box Model, positioning and floats.
Project #3 & 4 assigned.
Tools for site design.
16 3/24 The Grid, Bootstrap and Flexbox.
17 3/26 Test #2.
Work on projects in class
Test #2
18 3/31 Present designs Fourth assignment, due: Design for Project 5
19 4/2 Work on projects in class
20 4/7 Work on projects in class
21 4/9 Work on projects in class
22 4/14 Present fifth project

Fifth assignment, due: Complete Project 5

23 4/16 What is Responsive Design? Setting up your responsive site Project #5 assigned
24 4/21 Javascript and forms.
Search Engine Optimization (SEO) and metatags
25 4/23 Test #3.
A word about Wordpress, Wix, etc.
Test #3
26 4/28 Work on projects in class  
27 4/30 Work on projects in class
28 5/5 Present final project Fifth assignment due: A responsive design web site