Preamble

  • Course Title: Web Design I
  • Day: Monday (arts 214-03, 16219) and Tuesday (arts 214-04, 16220)
  • Time: 6:00 PM – 9:50 PM
  • Place: I Building, Rm 212
  • Dates: 28 January–21 May 2019
  • Instructor: Roy Vanegas

Description

Designing for the web differs greatly to print: screen dimensions require different layouts, colors differ between devices, and resolutions vary. There are, however, myriad techniques from the print design world that map to the web design/programming arena. We’ll explore those ideas at great length.

In addition, students will explore how to work with web-based typography, audio, video, images, and screen responsiveness for phone, tablets, and laptop computers.

Using the GitHub variant of Git, students will learn to update, maintain, and manage the code base of their projects. This is called revision control.

Also, using HTML5, CSS3, and Sass, students will learn to create a substantial, portfolio-type web site as a final project. 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 coding techniques, good style, clear design, and best practices.

And finally, we will discuss at length — perhaps re-solidify, in some cases — many general good design practices that play well in the web sphere.

Prerequisite: Because understanding Photoshop and Illustrator are key to creating designs used in web design, Basic Software for Design (arts 191) is a prerequisite for this course.

Learning Outcomes

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

  • how to author web pages using HTML and CSS;
  • the roles HTML, CSS, and the CSS preprocessor Sass play in web development;
  • why and how contemporary web developers use Sass;
  • how to design for the differing elements of the web;
  • design analogies between print and their web equivalent;
  • how to maintain a web site;
  • how to revision control your work using GitHub;
  • the semantics and proper structure of a web page;
  • the DOM;
  • and, web-based typography.

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 of the students in my more in-depth classes might also want Chrome Canary, Safari Technology Preview, Firefox Developer Edition, and Firefox Nightly. I use Chrome and Firefox 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.

Slack (Mac and Windows)

We’ll use Slack as our primary communication tool during class. You can use the web site, the official client for your computer, and/or the mobile app. Visit the downloads page for more.

GitHub (Mac and Linux)

All in-class examples, assignments, and help will be executed via GitHub. Download the client for your computer here.

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

Grid Chrome Extension (Mac and Windows)

In order to make your web development workflow easier, you’ll need to install The Modular Grid, a Chrome extension that overlays a grid over your web design mocks.

Sass (Mac and Windows)

You’ll need Sass. Download Koala, which is a GUI for Sass.

Web Development Environment Configuration Files

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

Schedule

  • Where: I Building, Rm 212
  • Day: Monday (arts 214 — 04.16219) and Tuesday (arts 214 — 05.16220)
  • Dates: 28 January–21 May 2019
  • Time: 6:00–9:50 PM

Important Dates

  • Tuesday, 12 February 2019: No class (Lincoln’s Birthday)
  • Monday, 18 February 2019: No class (Presidents’ Day)
  • Monday, 22 April 2019: No class (Spring Recess)
  • Tuesday, 23 April 2019: No class (Spring Recess)
  • Class 5: Midterm project presentations
  • Class 13: Assignment due
  • Class 15: Final project presentations

In addition to the schedule below, the master CUNY calendar is available here.

Note: The topics listed below will be covered in the order listed, time permitting. It’s possible that some topics will be overlooked.

Week Topics Homework
One

M: 28 Jan

T: 29 Jan

  • This week’s GitHub repo
  • Thorough syllabus breakdown
  • Introduction to the Google Group
  • Introduction to GitHub
  • Software setup
  • Do

    • Install all required software.
    • Begin ideation for midterm projects.
Two

M: 4 Feb

T: 5 Feb

  • This week’s GitHub repo
  • Discuss the midterm project
  • Discuss the semester assignment
  • History
    • A brief history of the Internet
    • A brief history of browser technology
    • A brief history web design
  • Designing for The Web…
    • Then (1990s – 2000s)
    • Now (following the birth of the iPhone in 2007)
  • An introduction to the web stack
  • Why HTML needs to be learned before CSS
  • Why CSS needs to be learned before Sass
  • How to use GitHub and GitHub Desktop
Three

M: 11 Feb

T: 19 Feb

  • This week’s GitHub repo
  • Grids
  • HTML
    • Anatomy of an HTML tag
    • The HTML doctype
    • The head section section of an HTML document
    • Understanding character sets
    • Inline elements
    • Block level elements
    • Replaced elements
    • Non replaced elements
    • Discuss the html, head, link, body, meta, and title tags.
Four

M: 25 Feb

T: 26 Feb

Five

M: 4 Mar

T: 5 Mar

  • Midterm presentations
Six

M: 11 Mar

T: 12 Mar

  • This week’s GitHub repo
  • HTML
    • Discuss the header, footer, nav, main, blockquote, ul, ol, li, b, picture, source, cite, and div tags.
    • Discuss the class, id, and srcset HTML attributes.
    • Discuss the difference between and images.
    • Discuss the semantic nature of all the aforementioned HTML tags.
Seven

M: 18 Mar

T: 19 Mar

  • This week’s GitHub repo
  • HTML
    • Discuss the table, thead, tfoot, tbody, tr, th, td, caption, figure, figcaption, abbr, article, section, sub, sup, span, style, and embed tags.
  • Sketch tutorial
Eight

M: 25 Mar

T: 26 Mar

  • This week’s GitHub repo
  • Color
    • Matching color to emotion: can this be done?
    • The color cone
    • Number theory: understanding how to switch between hex and decimal
    • Adobe Color (formerly Kuler)
  • Images
    • Differences between JPG, GIF, PNG
    • Copyright
    • Creative Commons
  • CSS
    • Anatomy of a rule
    • General syntax and nomenclature
    • Embedded/internal styles
    • External styles
    • Reset/normalize style sheets
    • Length units
    • Color
      • Hex
      • RGB (in decimal)
      • RGBA (in decimal)
      • HSL
    • Shortcuts and shorthand properties (see this cheatsheet)
      • CIRAP/S
      • TRBL
      • LVFHA
      • MBPC
      • SVWSLF
  • Do

    • Create and versions of all assets you’ll use in the web site implementation of your portfolio site.
    • Extract all geometries, colors, and font-related information from the Sketch file of the semester assignment.
Nine

M: 1 Apr

T: 2 Apr

  • This week’s GitHub repo
  • Design
    • Why is bad design perceived as bad design?
    • Why is good design perceived as good design?
    • Which elements define good design?
    • What would Dieter Rams do?
    • User experience/User interface (UX/UI)
  • Images
    • Differences between JPG, GIF, PNG
    • Copyright
    • Creative Commons
  • CSS
    • Typography
      • Kerning and tracking (letter-spacing)
      • Leading (line-height)
      • Small capitals (font-variant)
      • Uppercase (text-transform)
      • Lowercase (text-transform)
      • Bold (font-weight)
      • Italics (font-style)
      • Emphasis and strong emphasis
      • Before CSS3
      • Faux bold/italics/light/extra bold
      • Licensing
      • Google and other foundries
      • Font awesome
      • Web fonts
      • The font shortcut
  • Do

    • Compose the font-related CSS for your portfolio site and the semester assignment.
    • Begin to divide the CSS in your projects that will persist from the CSS that will be based in classes and perhaps IDs.
Ten

M: 8 Apr

T: 9 Apr

  • This week’s GitHub repo
  • CSS
    • Layout
      • The CSS box model
      • Flexbox
      • CSS grid
      • The 9 float rules
      • The 4 position properties
      • The interaction between floating and positioning
      • Stacking contexts
  • Do

    • Compartmentalize the CSS of your portfolio site into separate files.
    • Ensure that all the CSS you create is responsive. Don’t wait until you’ve implemented the desktop version to implement the tablet and mobile versions of your portfolio site.
Eleven

M: 15 Apr

T: 16 Apr

  • This week’s GitHub repo
  • CSS
    • Borders
    • IDs
    • Classes
    • The 4 combinators
    • The 11 selectors
    • The 13 structural pseudo-classes
    • Pseudo-classes
    • Pseudo-elements
    • Specificity
    • Browser- or vendor-specific prefixes
    • Backgrounds
    • CSS variables
    • Normal declarations
    • !important declarations
  • Responsive design
  • Do

    • Continue writing, organizing, and testing the CSS to both your portfolio site and the semester assignment.
Twelve

M: 29 Apr

T: 30 Apr

  • Do

    • Finish the semester assignment, which is due the Sunday before class 13.
    • Revisit the GitHub tutorials in order to refresh yourself on the pull request submission protocol.
Thirteen

M: 6 May

T: 7 May

  • Do

    • With two weeks left, you should be in the testing phase of your portfolio project.
Fourteen

M: 13 May

T: 14 May

  • This week’s GitHub repo
  • How to implement jQuery plugins into your final project.
  • Special topics, as requested by students.
  • Open lab
  • Do

    • Complete final project.
    • Revisit the GitHub tutorials in order to refresh yourself on the pull request submission protocol.
Fifteen

M: 20 May

T: 21 May

  • Final project presentations and critiques
  • Do

    • Happy summer!

Class Policies

  • Consuming food in class. There is no eating inside our classroom, either during class or while on break. The smell of food is very distracting, even offensive to some, and can linger in a room. 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 online syllabus, under the Grading Standards section. Memorize the simple formula at the beginning of the semester so you always know where you stand, grade wise.
  • Extra credit. There may be chances for extra credit. This will be made clear in the syllabus for your class, or via a message to the Google Group, once the semester has started.
  • Seating arrangement. You will be seated in clusters, based on whether you use a computer in class or not, or which operating system you use. Students who do not — or rarely — use a computer in class will be grouped together, because they tend to prefer not to be distracted by surrounding computer users when taking written notes. Windows users will be grouped with other Windows users, and Mac users will be grouped with other Mac users. This makes it easy for users to help each other, and for me to help Windows and Mac users as a group. You are welcome to sit anywhere within your cluster.

Advice on Succeeding in Class

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

Grading Standards

Grading Formula

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

  1. Midterm project [submission, presentation, and critique] (30%)
  2. Semester assignment (20%)
  3. Final project [submission, presentation, and critique] (40%)
  4. 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 — before or after — any work due. By asking me to favor you (“I can’t have this class hurt my GPA,” “My student status depends on my doing well in this class,” or, “I need a B or better for my student loans”), you’re asking me to put you above your classmates. It’s a form of extortion, and I will remember your having asked me to treat you better than your peers.

Manage your time well; I do not accept late work.

The A Range

A (“Work of exceptional quality”)

Students who earn an “A” produce work that is impressive, goes beyond what is required of the course, and exemplifies a superb work ethic. Their work is exceptional. “A” students might — or should — share their knowledge with their classmates, and they are active participants in class discussions. “A”-grade students do not spend time distracted by others or digital devices, and are contributing members of the class. Lastly, “A”-level students demonstrate an evolving understanding of the material through iterative efforts of their work.

A- (“Work of high quality”)

In the “A-” range, a student has performed very closely to the level of his or her “A”-level counterpart, but has produced at least one project/homework/component of the grading scheme that was below a grade of “A.” Perhaps the student missed too many classes, showed up to class late too often, or submitted an assignment/homework that was not “A”-level.

The B Range

B+ (“Very good work”)

Students earning grades of “B+” produce very good work, which is close with that of their counterparts earning in the “C” range, but offer a sustained and meaningful structure to a critical user experience and design that is more complex than students earning a grade in the “C” range. “B+” students’ work is logically organized, responds to assignments in thoughtful and distinctive ways, and offers a sound user experience. Although minor coding and layout errors may be present, they are under control and do not impede user experience or content.

B (“Good work; satisfies course requirements”)

Overall, “B” range students produce work with good results. He or she possesses a strong understanding of the course’s content and shows a high level of competence in the skill set taught in the course.

B- (“Below-average work”)

Students in the “B-” range are producing work that is above adequate but below average. Their work shows flashes of very good work, but, overall, is not compelling for a grade of a “B.”

The C Range

C+ (“Less than adequate work”)

“These are average assignments. They will demonstrate some success in engaging with the assigned material. The document will show that the student can identify and work with key frameworks and methods with a particular set of content and apply them to ideas and examples found in other precedents, or other outside interactive experiences. Additionally, the assignment will demonstrate effort in the areas of user experience, interaction design. Typical of a “C/C+” assignment, however, is a disjointed sense of content hierarchy and user experience in connection with the page. Generally these assignments contain general coding errors which create unwanted or negative rendering, however, the assignments still work and an effort to debug and fix errors is present.”

C (“Well below average work”)

In the “C” range, a student has show more than minimal progress to pass, but not quite on the level of a “C+” student.

C- (“Poor work; lowest possible passing grade”)

A student who earns a grade of “C-” has performed the bare minimum to pass the course. He or she has performed very near to that of a student who would typically fail, but has some basic understanding of important concepts related to the course. He or she has also shown some attempt at trying to grasp the material of the course. In essence, the student has produced work that shows evidence of minimal effort expended.

F (“Failure”)

Failing grades are earned by students who do not submit required work, produce incomplete work, and/or do not take examinations (without prior notification and approval). Grades of “F” are also earned by students who show no comprehension of the topics discussed in class and no forthcomingness to attempt to comprehend. Students who fail show no interest in learning, make no effort to remedy problem areas, are continually distracted in class by other students and/or mobile electronic devices, and interrupt class.

Academic Integrity

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

Resources

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.

HTML

CSS

  • Eric Meyer’s base/reset CSS is a reliable way of cancelling out browser styles.
  • Chris Coyier’s CSS-Tricks provides CSS-based tutorials and — of course — tricks.
  • Sitepoint’s CSS Reference provides useful explanations of CSS concepts.
  • Can I Use a CSS, HTML, JavaScript, or other web-based syntax in new code?
  • A CSS3 gradient generator that helps with the unwieldy CSS3 gradient syntax.
  • A specificity calculator that is useful in reinforcing the concepts of specificity.

Sublime Text

Validators and Linters

Students with Disabilities

Click the following link to read about Queens College’s commitment to students with disabilities: http://www.qc.cuny.edu/StudentLife/services/specialserv/Pages/default.aspx

Contact

My email address is roy dot vanegas at qc dot cuny dot edu. However, I only communicate with students over email in emergency situations (death, divorce, personal tragedy, pet emergency, etc). For matters related to the class, you’re advised to see me during office hours.

Office Hours

My office hour is 4:30–5:30 PM on Tuesdays in The Dept’s main office, Klapper Hall, Rm 172. We can also meet during class breaks, after class, or by appointment.