Intro to Web Design & Computer Principles

Mondays and Wednesdays 12:30–1:45 PM 28 January–20 May 2019 CIWW 101

Description

As its title suggests, this course covers the basic ideas, languages, and tools used in the design and construction of modern web pages, and introduces students to a subset of computing principles as they relate to The Web.

Note: There is no prerequisite for this course.

The common syllabus across all sections of CSCI-UA.0004 may be found here.

Textbook: Learning Web Design: A Beginner’s Guide to HTML, CSS, JavaScript, and Web Graphics (5th Edition). Jennifer Niederst Robbins. ISBN: 978‒1‒491‒96020‒2

Learning Outcomes

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

Class Policies

Consuming food in class. There is no eating inside our classroom. The smell of food is very distracting, even offensive to some, and can linger in a room. Drinks in covered containers, however, are allowed.

Attendance. Attending lectures is crucial, for obvious reasons. Aside from emergencies, everyone should attend each session. If you are absent for any reason, you are responsible for all the material and announcements covered in the session you missed. Please do not ask me for notes, as I do not have any to share. Make one or more note-taking friends in class so you can share notes.

Lateness. If you come to class late and miss roll call at the beginning of class, I will not interrupt the lecture to update my roster from “absent” to “late.” It is your responsibility to come to me after class to let me know that were late. This has to be done in person and on the day you are late. Otherwise, the absence remains. Also, bear in mind that you are responsible for any announcements and/or material you missed before your late arrival to class.

Software Requirements

All the required software for this course is free. For Mac users, the installation process is automated using this script. Windows and Linux users, however, will need to install the software manually. See below.

GitHub (Mac, Windows, and Linux)

All in-class examples, assignments, and help is done via GitHub. Once you’ve opened an account at GitHub, download the client for your computer here.

Text Editor (Mac, Windows, and Linux)

The code you write will require a text editor. And, 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.

Markdown Editor/Viewer (Mac, Windows, and Linux)

Although a text editor will suffice to view and edit Markdown files, some may want a full-featured program to deal with Markdown. We’ll use Typora in class.

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.

File Transfer Protocol (Mac, Windows, and Linux)

To transfer files between our local machines and a server, we’ll use FileZilla.

Fonts (Mac, Windows, and Linux)

In addition to the stock issue, monospace/fixed-width fonts included with your OS, give IBM Plex, Fira Mono, Ubuntu Mono, Anonymous Pro, or Inconsolata a try.

Command Line Interface

Mac and Linux users do not have to install a Command Line Interface, or CLI, because these operating systems already have The Terminal installed. Windows users, however, might want to install Cygwin.

Browser Extension for Accessibility Testing

Available for Chrome and Firefox, Axe is a browser extension that checks the accessibility of your web pages.

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.

Students with Disabilities

Students with disabilities can find support information from the University here.

Contact

r.o.y at nyu dot edu is my email address. However, I only communicate with students over email in emergency situations (death, divorce, personal tragedy, pet emergency, etc). For matters related to the class, see me during my office hour or after class.

Schedule

Instead of slides, in-class examples are posted to GitHub.

Important Dates

WeekTopicsHomework
One
(27 Jan – 2 Feb)
  • This week’s repo
  • Thorough breakdown of syllabus
  • Software installation
  • GitHub introduction
  • Command Line Interface, or CLI, introduction
Two
(3 Feb – 9 Feb)
  • This week’s repo
  • Where do I start?
  • It Takes a Village (Website Creation Roles)
  • Gearing up for Web Design
  • The Internet Versus the Web
  • Serving Up Your Information
  • A Word About Browsers
  • Web Page Addresses (URLs)
  • The Anatomy of a Web Page
  • Putting it All Together
  • Chapter 3, Some Big Concepts You Need to Know, pages 35–46
  • Chapter 4, Creating a Simple Page, pages 49–70
Three
(10 Feb – 16 Feb)
  • This week’s repo
  • A Multitude of Devices
  • Sticking with the Standards
  • Progressive Enhancement
  • Responsive Web Design
  • One Web for All (Accessibility)
  • The Need for Speed (Site Performance)
  • A Web Page, Step-by-Step
  • Launch a Text Editor
    • Step 1: Start with Content
    • Step 2: Give the HTML Document Structure
    • Step 3: Identify Text Elements
    • Step 4: Add an Image
    • Step 5: Change the Look with a Style Sheet
  • When Good Pages Go Bad
  • Validating Your Documents
  • Git tutorial (reading)
  • Chapter 5, Marking Up Text, pages 71–108
  • Chapter 6, Adding Links, pages 113–128
Four
(17 Feb – 23 Feb)
  • This week’s repo
  • Paragraphs
  • Headings
  • Thematic Breaks (Horizontal Rule)
  • Lists
  • More Content Elements
  • Organizing Page Content
  • Generic Elements (div and span)
  • Improving Accessibility with ARIA
  • Character Escapes
  • The href Attribute
  • Linking to Pages on the Web
  • Linking Within Your Own Site
  • Targeting a New Browser Window
  • Mail Links
  • Telephone Links
  • Chapter 7, Adding Images, pages 131–159
Five
(24 Feb – 2 Mar)
  • Chapter 10, Embedded Media, pages 215–232
Six
(3 Mar – 9 Mar)
  • This week’s repo
  • CSS Variables
  • Window-In-A-Window (iframe)
  • Video
  • Basic Font Properties
  • Typography
  • Chapter 11, Introducing Cascading Style Sheets, pages 239–258
  • Chapter 12, Formatting Text, pages 261–302
Seven
(10 Mar – 16 Mar)
Study for midterm
Eight
(17 Mar – 23 Mar)
  • Spring recess
Happy spring recess!
Nine
(24 Mar – 30 Mar)
  • This week’s repo
  • Adding SVG Images
  • Audio
  • A Few More Selector Types
  • Text Line Adjustments
  • Underlines and Other “Decorations”
  • Changing Capitalization
  • Spaced Out
  • Text Shadow
  • Changing List Bullets and Numbers
  • Chapter 13, Colors and Backgrounds, pages 303–351
Ten
(31 Mar – 6 Apr)
  • This week’s repo
  • Specifying Color Values
  • Foreground Color
  • Background Color
  • Clipping the Background
  • Playing with Opacity
  • Pseudo-Class Selectors
  • Pseudo-Element Selectors
  • Attribute Selectors
  • Background Images
  • The Shorthand background Property
  • Like a Rainbow (Gradients)
  • Finally, External Style Sheets
  • Chapter 14, Thinking Inside the Box, pages 355–383
  • Chapter 15, Floating and Positioning, pages 387–416
Eleven
(7 Apr – 13 Apr)
  • This week’s repo
  • The Element Box
  • Specifying Box Dimensions
  • Padding
  • Borders
  • Margins
  • Assigning Display Types
  • Box Drop Shadows
  • Normal Flow
  • Floating
  • Fancy Text Wrap with CSS Shapes
  • Positioning Basics
  • Relative Positioning
  • Absolute Positioning
  • Fixed Positioning
  • Chapter 16, CSS Layout with Flexbox and Grid, pages 419–478
Twelve
(14 Apr – 20 Apr)
  • Chapter 17, Responsive Web Design, pages 485–515
  • Chapter 18, Transitions, Transforms, and Animation, pages 517–542
Thirteen
(21 Apr – 27 Apr)
  • This week’s repo
  • Why RWD?
  • The Responsive Recipe
  • Choosing Breakpoints
  • Designing Responsively
  • A Few Words About Testing
  • More RWD Resources
  • Ease-y Does It (CSS Transitions)
  • CSS Transforms
  • Keyframe Animation
  • Chapter 21, Introduction to JavaScript, pages 593–617
  • Chapter 22, Using JavaScript, pages 621–637
Fourteen
(28 Apr – 4 May)
  • This week’s repo
  • What Is JavaScript?
  • Adding JavaScript to a Page
  • The Anatomy of a Script
  • The Browser Object
  • Events
  • Putting It All Together
  • Meet the DOM
  • Polyfills
  • JavaScript Libraries
  • Chapter 23, Web Image Basics, pages 641–668
Fifteen
(5 May – 11 May)
  • This week’s repo
  • Image Sources
  • Meet the Formats
  • Image Size and Resolution
  • Image Asset Strategy
  • Favicons
  • Chapter 24, Image Asset Production, pages 671–700
  • Chapter 25, SVG, pages 703–731
Sixteen
(12 May – 18 May)
  • This week’s repo
  • Saving Images in Web Formats
  • Working with Transparency
  • Responsive Image Production Tips
  • Image Optimization
  • Drawing with XML
  • Features of SVG as XML
  • SVG Tools
  • SVG Production Tips
  • Responsive SVGs
  • Further SVG Exploration
  • Last lecture on 13 May
  • Final exam on 17 May
Study for final exam on Friday, 17 May.

Assignments and Exams

Your final grade is calculated using the following formula:

Help

I’m available to help you during my office hour, which is 2:00–3:00PM on Mondays in room 308 of Warren Weaver Hall. If you need help outside of this time slot, you can also meet with a tutor. See the Tutoring section of the general syllabus for time and place.