Foundations of Web Design and Development

list Preamble

info Description

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.

list Learning Outcomes

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

file_download Software Requirements

All the required software for this course is free and listed below. 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.

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.

Rectangle (Mac only)

Writing software requires working with multiple windows. Rectangle makes working in 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 (Mac, Windows, and Linux)

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

Text Editor (Mac, Windows, and Linux)

The code you write will require a text editor. Although there are many on the market, such as Sublime Text (nagware), for example, vs Code (open source) is the only editor supported in class. Download the Linux, Windows, or macOS version from https://code.visualstudio.com/.

Node

Download the latest stable release of Node from nodejs.org and follow the default instructions. Note: Installing Node also installs npm, Node’s package manager.

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 README.md file.

calendar_month Schedule

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.

Notable Dates

The weekly schedule for the semester, complete with topics and readings.
Week Topics Homework
One
  • Thorough syllabus breakdown
  • Software installfest
  • Intro to the vs Code text editor
  • A very brief history of the Internet, browser technology, and web design
Two
  • Git and GitHub fundamentals
  • Git cloning
  • Git committing
  • Git pushing
  • Git pulling
  • Git branching
  • Git forking
  • Intro to the GitHub Desktop ui
  • Clone the in-class examples repo for the semester
Three
  • Git merging
  • Git pull requests
  • Intro to html
  • Authoring semantic html: matching content to syntax
 Study in-class code examples and notes
Four
  • Major semantic elements
  • The outlining algorithm
  • Block-level html elements
  • Inline-level html elements
 Study in-class code examples and notes
Five
  • Assignment 1 due
  • Classes
  • IDs
  • css Fundamentals
  • External css
  • Internal css
 Study in-class code examples and notes
Six
  • Style sheet stacks
  • Length units
  • Working with color
 Study in-class code examples and notes
Seven
  • Typography
  • Borders
  • Combinators
 Study in-class code examples and notes
Eight Study in-class code examples and notes
Nine
  • Spring Recess
 None
Ten
  • Differences between jpg, gif, png
  • 1× and 2× images
  • Browser- or vendor-specific prefixes
  • css variables
 Study in-class code examples and notes
Eleven
  • The css box model
  • Positioning
  • Layout using Flexbox
  • Shortcuts and shorthand properties (see this cheatsheet)
 Study in-class code examples and notes
Twelve
  • Assignment 3 due
  • Floating
  • Sass fundamentals
  • Sass variables
  • Sass nesting
  • Sass partials
 Study in-class code examples and notes
Thirteen
  • Sass imports
  • Sass mixins
  • Sass operators
  • Design-related topics
 Study in-class code examples and notes
Fourteen
  • Layout using css Grid
  • More design-related topics
 Study in-class code examples and notes
Fifteen
  • More layout using css Grid
  • Very brief intro to JavaScript
  • Open lab
 Study in-class code examples and notes
Sixteen
  • Evaluations
  • Final projects due
 Happy break!

assignment Assignments

There are three homework-type assignments and one final project due for the assignments portion of your final grade. (See the Grading Formula 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 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.

balance Class Policies

warning 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.

accessible Students with Disabilities

Read about how The University of Hartford supports students with disabilities: https://www.hartford.edu/academics/academic-support/accessibility-services/default.aspx

balance Title IX and Sexual Assault

Sexual violence and other forms of sexual misconduct and harassment, including stalking and intimate partner violence, are prohibited under Title ix, federal and state law, and University of Hartford policy. Information on the University’s policies against sexual violence can be found at https://www.hartford.edu/about/policies/title-ix/. Resources regarding sexual violence can be found at https://www.hartford.edu/about/policies/title-ix/on-off-campus-resources.aspx

Note: University of Hartford faculty, staff, and ras are required to report incidents of sexual misconduct to the Title ix Office (title9@hartford.edu). For further information on The University’s policies and resources, please contact Jason Martinez (860.768.5255; jamartine@hartford.edu) or Justin Bell (860.768.4880; jbell@hartford.edu).

psychology Mental Health and Well-Being

Mental Health is an important aspect of students’ well-being and integral to positive academic experiences and success. If, during the semester, you experience difficulties and would like support, consider contacting the University of Hartford’s caps, or Counseling and Psychological Services, which offers a range of short-term counseling services available to full-time undergraduate students at no additional cost, and to part-time undergraduate and graduate students for a small fee. caps is located in Gengras Student Union, Room 313 map, and can be reached by calling 860.768.4482 or emailing Liz Inkel at inkel@hartford.edu. Office hours are Monday – Friday, 8:30 AM – 4:30 PM.

info Advice on Succeeding in Class

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

door_front Office Hours

contact_mail Contact

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.