Foundations of Web Design and Development



This course covers the basic ideas, languages, and tools used in the design and construction of modern, small- to medium-sized web sites. Students will learn typography and layout; how to work with audio and video; how to prepare and optimized images; and, how to design responsive digital experiences for mobile devices and laptop/desktop computers.

Students will be exposed to a modern, web-centered tool chain: Git, html, css, Sass, and JavaScript. Each student will carefully navigate the four-step iterative development cycle (requirement, design, implement, test) to create an aesthetically pleasing, logical, well-laid out final project with an emphasis on semantics, proper engineering techniques, good style, clear design, and best practices.

This course fulfills the A&S Information Technology Literacy (itl) general education requirement.

Learning Outcomes

Upon successful completion of this course, students will understand...

Software Requirements

All the required software for this course is free.

For Mac users, most of the installation process is automated using this script. Items below marked with a are not included in the installer script; these must be installed manually.

Windows and Linux users will need to install all the software manually.

Whether you use Windows or Mac, all the necessary software for this course is listed below. It’s all free and downloadable from their respective links.

Browsers (Mac and Windows)

Download all the browsers available at Browse Happy. Some students might also want Chrome Canary, Safari Technology Preview, Firefox Developer Edition, and Firefox Nightly. I use Firefox, Brave, and Chrome in class.

Spectacle (Mac only)

Creating web sites requires working with multiple windows. Spectacle makes handling a multi-window environment much easier. Download it here.

GitHub (Mac, Windows, and Linux)

All in-class examples, assignments, and help will be done via GitHub. Download the client for your computer here if you don’t feel comfortable with The Terminal.

Examples Repository

All of the code examples I share with you will be pushed to our class’ examples GitHub repo.

Text Editor (Mac and Windows)

The code you write will require a text editor. Although there are many on the market, such as Brackets (open source), Sublime Text (nagware), and Visual Studio Code (open source), Atom (open source) is the only editor supported in class. (I can, however, help if you use Sublime Text.) It’s available for Mac and Windows from

Fonts (Mac, Windows, and Linux)

In addition to the stock issue, monospace/fixed-width fonts included with your OS, here are a few more fonts to explore in your text editors:

Web Development Environment Configuration Files

Once all the software above has been installed, go here and follow the instructions in the file.


Important Notes

The University treats absences related to covid-19 as excused absences. Consequently, you’ll need to get notes from someone in class, as mentioned in the section of this syllabus marked Advice on Succeeding in Class. There will not be a streaming video option for anyone missing class.

Important Dates

No class (spring recess): Monday, 14 March, and Wednesday, 16 March.

Last class: Monday, 2 May 2022.

Note: Time permitting, I will make every attempt to cover the topics listed below in order. However, depending on the cadence of the class, some topics may be overlooked.

Week Topics Homework
  • Thorough syllabus breakdown
  • History
    • A brief history of the Internet
    • A brief history of browser technology
    • A brief history web design
  • Clone the in-class examples repo for the semester
  • Intro to the Atom text editor
  • Git and GitHub fundamentals
  • Git cloning
  • Git committing
  • Git pushing
  • Git pulling
  • Git branching
  • Git forking
  • Intro to the GitHub Desktop ui
  • Git merging
  • Git pull requests
  • Intro to html
  • Authoring semantic html: matching content to syntax
  • The outlining algorithm
  • Block-level html elements
  • Inline-level html elements
Study in-class code examples and notes
  • Assignment 1 due
Study in-class code examples and notes
  • Major semantic elements
  • Classes
  • IDs
  • css Fundamentals
  • External css
  • Internal css
Study in-class code examples and notes
  • Style sheet stacks
  • Length units
  • Working with color
Study in-class code examples and notes
  • Assignment 2 due
  • Typography
  • Borders
  • Combinators
Study in-class code examples and notes
Eight Study in-class code examples and notes
  • Spring Recess
  • Differences between jpg, gif, png
  • and images
  • Browser- or vendor-specific prefixes
  • CSS variables
Study in-class code examples and notes
  • Assignment 3 due
  • The CSS box model
  • Positioning
  • Layout using Flexbox
  • Shortcuts and shorthand properties (see this cheatsheet)
Study in-class code examples and notes
  • Floating
  • Sass fundamentals
  • Sass variables
  • Sass nesting
  • Sass partials
Study in-class code examples and notes
  • Sass imports
  • Sass mixins
  • Sass operators
  • Design-related topics
Study in-class code examples and notes
  • More design-related topics
  • Open labs
  • Evaluations
  • Final project presentations*
Happy break!

*Date, time, and room pending.

Class Policies

Advice on Succeeding in Class

Read over the following to understand procedures for maximizing your chance of succeeding in class.


There are three homework-type assignments and one final project. (See the Grading Standards section to learn what percentage of your final grade each is worth.)

  1. Assignment I
  2. Assignment II
  3. Assignment III
  4. Final Project

Grading Standards

Grading Formula

Your grade for this course will be computed using the following formula:

  1. Assignments (45%)
    • Assignment 1 — 15%
    • Assignment 2 — 15%
    • Assignment 3 — 15%
  2. Final project (45%)
  3. Attendance and participation (10%)

To calculate your final grade, convert to decimal the percentages above and the grades you’ve earned. For example, if you got an 80 on the first assignment, a 93 on the second assignment, a 60 on the third assignment, a 100 on your final project, and 100 for attendance, then you’d use the following formula:

(.80 × .15) + (.93 × .15) + (.60 × .15) + (1 × .45) + (1 × .10) = 89%

I do not give grades; students earn them. The grade you earn is based strictly on the outlined formula clearly listed in this section.

This grading formula is unbending and will be adhered to strictly.

Important Note

Please do not try to negotiate a grade with me. By asking me to treat you favorably, you’re requesting that I put you above your classmates. Manage your time well; I do not accept late work.

Academic Honesty

Cheating of any kind will not be tolerated in this course; make certain that all the work you submit is your own. Refresh your understanding of the college’s policy on academic honesty.

Students with Disabilities

Read about how The University of Hartford supports students with disabilities:


Nowadays, I only use email for emergency situations, such as a pet emergencies, personal tragedies, etc. For matters related to our course, you’re advised to see me before or after class, during my office hours, or by appointment. My contact info is listed in the Preamble.

Office Hours

If neither of the aforementioned times agrees with your schedule, we can make alternate arrangements to meet.