Foundations of Web Design and Development

Preamble

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.

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.

Tutorials Repository

Most — if not all — of the code examples I share with you are in my personal GitHub repo. Make sure to watch the repo so you don’t miss updates. (You can stop watching once the course is done.)

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 atom.io.

Markdown Editor/Viewer (Mac and Windows)

There are many Markdown editors/viewers on the market. We’ll use Typora in class.

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, which you should open in Typora.

Schedule

Important Dates

Check the University’s official calendar for other important dates.

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
One
  • Thorough syllabus breakdown
Two
  • 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
Three
  • 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
Four
  • Assignment 1 due
Study in-class code examples and notes
Five
  • Major semantic elements
  • 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
  • Assignment 2 due
  • 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
  • and images
  • Browser- or vendor-specific prefixes
  • CSS variables
Study in-class code examples and notes
Eleven
  • 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
Twelve
  • 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
  • More design-related topics
tbd
Fifteen
  • Open labs
tbd
Sixteen
  • Evaluations
  • Final project presentations*
Happy summer!

*Date, time, and room pending.

Class Policies

Advice on Succeeding in Class

We will go over the following document in detail on the first day of class.

Assignments

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 (due XX February 2020)
  2. Assignment (due XX March 2020)
  3. Assignment (due XX April 2020)
  4. Final Project (due XX May 2020)

Grading Standards

Grading Formula

Your grade for this course — explained by The University of Hartford here — 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%)
    • Three unexcused absences alters the grading formula. First, the attendance and participation component of your grade increases to 40% from 10%. The 30% difference is taken from the assignments, each of which becomes worth 5%. Thus, all assignments are worth 15%, the final project remains at 45%, and attendance is worth 40%. Finally, the attendance portion of the grade becomes a 0, meaning that the highest grade you may achieve is 60 if you miss three classes without excuse and get perfect scores on all assignments and the final project.

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: https://www.hartford.edu/academics/academic-support/accessibility-services/default.aspx

Contact

I only communicate with students over email in emergency situations (pet emergency, personal tragedy, etc). For matters related to the class, you’re advised to see me in person before or after class, or during my office hours. My contact info is listed in the Preamble section above.

Office Hours

My office hours are walk-in for quick questions and by appointment for more involved academic inquiries.

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