Foundations of Web Design and Development

Preamble

  • Course Title: Foundations of Web Design and Development (mwd 110)
  • CRN: 41920
  • Credits: 4
  • Prerequisites: Either one from cs 105, 110, 111, 114, 115, 190, 191 or one from cs 211, 220, 220p, or 275.
  • Days: Mondays and Wednesdays
  • Time: 11:30 am–1:10 pm
  • Room: 316, Charles A Dana Hall (map )
  • Dates: 4 September–14 December 2019
  • Professor: Roy Vanegas (pronounced “vuh-nay-gus”)
  • Email: vanegas at hartford dot edu
  • Phone: 860.768.5925
  • Office: Charles A Dana Hall, Room 310B
  • Office hours: By appointment via Compass on the following days…
    • Mondays: 10:00–11:00 am and 1:30–2:30 pm
    • Tuesdays: 9:00–11:00 am
    • Wednesdays: 10:00–11:00 am and 1:30–2:30 pm

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

  • the roles html, css, Sass, and JavaScript play in web development;
  • how to semantically author html;
  • how to employ css to create the presentation layer of a web page;
  • how to use Sass to simplify authoring css;
  • how to work with the basics of JavaScript to add behavior to a web page;
  • how to revision control technology projects using Git and GitHub;
  • how to employ typography well in the design of a web page;
  • how to design for the differing elements of the web;
  • how to maintain a web site;
  • and, how to employ multiple media components into a web project.

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

  • No class (week 13): 27 November (Thanksgiving recess)
  • Assignment 1 due: 25 September
  • Assignment 2 due: 9 October
  • Assignment 3 due: 23 October
  • Assignment 4 due: 6 November
  • Assignment 5 due: 13 November
  • Final project due: 16 December

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 and idss
  • Differences between jpg, gif, png
  • and images
Study in-class code examples and notes
Six
  • Assignment 2 due
  • css Fundamentals
  • External css
  • Internal css
  • Style sheet stacks
  • Length units
  • Working with color
  • Shortcuts and shorthand properties (see this cheatsheet)
  • The CSS box model
Study in-class code examples and notes
Seven
  • Typography
  • Layout using Flexbox
  • Layout using CSS grid
  • Floating
  • Positioning
  • Borders
  • IDs
  • Classes
  • Combinators
Study in-class code examples and notes
Eight
  • Assignment 3 due
  • Selectors
  • Pseudo-classes
  • Pseudo-elements
  • Specificity
  • Browser- or vendor-specific prefixes
  • CSS variables
  • Normal declarations
  • !important declarations
Study in-class code examples and notes
Nine
  • Sass fundamentals
  • Sass variables
  • Sass nesting
  • Sass partials
Study in-class code examples and notes
Ten
  • Assignment 4 due
  • Sass imports
  • Sass mixins
  • Sass inheritance
  • Sass operators
Study in-class code examples and notes
Eleven
  • JavaScript fundamentals
  • Variable declarations and initializations
  • The seven common structures of computer programming
  • Operators
Study in-class code examples and notes
Twelve
  • Assignment 5 due
  • Functions
  • Objects
  • Arrays
  • Events
  • dom manipulation
Study in-class code examples and notes
Thirteen
  • Design-related topics
None
Fourteen
  • Design-related topics
tbd
Fifteen
  • Open labs
tbd
Sixteen
  • Final project presentations
None

Class Policies

  • Consuming food in class. There is no eating inside our classroom, either during class or while on break. Eat before or after class. Drinks in covered containers, however, are allowed.
  • Grading. I do not give grades — students earn them. The grade you earn is based strictly on a formula clearly listed in your syllabus, under the Grading Standards section.

Advice on Succeeding in Class

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

Assignments

There are six projects for the semester: five homework-type assignments and one final project. (See the grading standards section regarding how each is used to calculate your grade.)

  1. Assignment (due 25 September 2019)
  2. Assignment
  3. Assignment
  4. Assignment
  5. Assignment
  6. Final project

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 (50%)
    • Assignment 1 — 10%
    • Assignment 2 — 10%
    • Assignment 3 — 10%
    • Assignment 4 — 10%
    • Assignment 5 — 10%
  2. Final project (40%)
  3. Attendance and participation (10%)

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

Important Note

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

Academic Honesty

You are reminded of the college’s academic honesty policy. Ensure all the work you submit is your own.

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

My email address is vanegas at hartford dot edu. However, 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 via Compass.

Office Hours

My office hours are walk-in for quick questions and by appointment via Compass for more involved sessions.

  • Office: Charles A Dana Hall, Room 310B
  • Office hours:
    • Mondays: 10:00–11:00 am; 1:30–2:30 pm
    • Tuesdays: 9:00–11:00 am
    • Wednesdays: 10:00–11:00 am; 1:30–2:30 pm