Web Design

Prof. Ian Besler

Web
Design

Prof. Ian Besler

Modules

: Introduction

: Introduction
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: Class Introduction, HTML, Markup, Page Sourcing, and the Web
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: Basic <html> Tags
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo Website: Basic <html> Tags (Download HTML Files)
  4. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
    1. Textbook Reading: “Introduction” from Resilient Web Design () by Jeremy Keith
    2. Textbook Reading: “Chapter 1: Foundations” from Resilient Web Design () by Jeremy Keith
  5. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
    1. Emoticon, Emoji, Text II: Just ASCII” from Rhizome () by Tom McCormack.
  6. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Exercise #1: “Just ASCII About Me”
    2. Video Tutorial: Making ASCII Art

: Web Basics

: Web Basics
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: Web Basics, HTML + CSS Stylesheets
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorials 🤩 🤩 🤩
    1. Video Tutorial: Linking HTML and CSS
    2. Video Tutorial: Basic Multi-Page Navigation
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Websites 🖥 🖥 🖥
    1. Demo Website: Linking HTML and CSS (Download HTML/CSS Files)
      1. Step-by-Step Instructions: Linking HTML and CSS
    1. Demo Website: Basic Multi-Page Navigation (Download HTML/CSS Files)
      1. Step-by-Step Instructions: Basic Multi-Page Navigation
  4. ➔ ➔ ➔ READ This Week’s Article 📚 📚 📚
    1. As We May Think” from The Atlantic () by Vannevar Bush
  5. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Project #1: Market Research

: CSS Basics

: CSS Basics
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: CSS Box Model
  2. ➔ ➔ ➔ REVIEW This Week’s Technical Cheatsheets 🤔 🤔 🤔
    1. Technical Cheatsheet: HTML5 Semantic Tags (Download HTML/CSS Files)
    2. Technical Cheatsheet: Block-Level and Inline Elements (Download HTML/CSS Files)
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo Website: DIVS, ID and Class Attributes (Download HTML/CSS Files)
  4. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
    1. Chapter 2: Materials” from Resilient Web Design () by Jeremy Keith
  5. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Exercise #2: “Getting to Know U(RL)”

: Page Composition

: Page Composition
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: CSS Page Composition
    2. Lecture Slides: Colors and Images
    3. Lecture Slides: Web Typography
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: Basic HTML and CSS Page Composition
    2. Video Tutorial: Web Fonts
  3. ➔ ➔ ➔ REVIEW This Week’s Technical Cheatsheets 🤔 🤔 🤔
    1. Technical Cheatsheet: CSS Colors (Download HTML/CSS Files)
    2. Technical Cheatsheet: CSS Fonts (Download HTML/CSS Files)
    3. Technical Cheatsheet: CSS Dimensions (Download HTML/CSS Files)
    4. Technical Cheatsheet: CSS position Property (Download HTML/CSS Files)
    5. Technical Cheatsheet: CSS float Property (Download HTML/CSS Files)
    6. Technical Cheatsheet: CSS border-radius Property (Download HTML/CSS Files)
  4. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Project #2: Sitemap

: “D for DIV” Art Forgery with CSS3

: “D for DIV” Art Forgery with CSS3
  1. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: “D for DIV”: Peter Halley Laws of Rock
  2. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo Website: Peter Halley Laws of Rock (Download HTML/CSS Files)
      1. Step-by-Step Instructions: “D for DIV”: Peter Halley Laws of Rock
  3. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
    1. Bonus Demo Website: “D for DIV”: Peter Halley Primary (Download HTML/CSS Files)
      1. Bonus Video Tutorial: D for DIV: Peter Halley Primary
  4. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapters 📚 📚 📚
    1. Chapter 3: Visions” from Resilient Web Design () by Jeremy Keith
  5. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Exercise #3: “D for DIV: Art Forgery with CSS3”

: Responsive Web Design (RWD)

: Responsive Web Design (RWD)
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: Responsive Web Design (RWD)
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: CSS3 @media Rule Media Query Breakpoints
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo Website: CSS3 @media Rule Media Queries (Download HTML/CSS Files)
      1. Step-by-Step Instructions: CSS3 @media Rule Media Queries
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
    1. Bonus Demo Website: Image Sizes with CSS3 @media Rules (Download HTML/CSS Files)
  5. ➔ ➔ ➔ READ This Week’s Articles 📚 📚 📚
    1. Responsive Web Design” by Ethan Marcotte from A List Apart
    2. A Complete Guide to CSS Media Queries,” from CSS Tricks
  6. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Exercise #3: “D for DIV: Art Forgery with CSS3”

: Single-Page Scrollers

: Single-Page Scrollers
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: Pagination, Single-Page Scrolling
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: Single Page Scroller
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo Website: Single Page Scroller with On-Page Bookmark Links (Download HTML/CSS Files)
      1. Step-by-Step Instructions: Single Page Scroller
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
    1. Bonus Demo Website: Drop-Down Menus with CSS (Download HTML/CSS Files)
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapter 📚 📚 📚
    1. Chapter 4: Languages” from Resilient Web Design () by Jeremy Keith
  6. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Project #3: Style Tiles

: Transforms and Transitions

: Transforms and Transitions
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: CSS3 transform Property and transition Property
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: CSS3 transform and transition Properties
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo Website: CSS3 transform and transition Properties (Download HTML/CSS Files)
      1. Step-by-Step Instructions: CSS3 transform and transition Properties
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
    1. Bonus Demo Website: Photo Gallery with CSS3 transition Properties (Download HTML/CSS Files)
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Article 📚 📚 📚
    1. The Ultimate Guide to Proper Use of Animation in UX,” from UX Collective () by Taras Skytskyi.
  6. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Project #4: Wireframes
      1. Lecture Slides: Web Prototyping, Wireframing

: Spring Break

: Spring Break

: Functional Animation

: Functional Animation
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: Functional Animation
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: CSS3 @keyframes Rule Animations
  3. ➔ ➔ ➔ BUILD Your Own Versions of This Week’s Demo Websites 🖥 🖥 🖥
    1. Demo Website: CSS3 @keyframes Rule Animations (Download HTML/CSS Files)
      1. Step-by-Step Instructions: CSS3 @keyframes Rule Animations
    2. Advanced Demo Website: Single Page Scroller with Animated Nav (Download HTML/CSS Files)
      1. Step-by-Step Instructions: Single Page Scroller with Animated Nav
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
    1. Bonus Demo Website: Spinning Sticks CSS3 Animation Exercise (Download HTML/CSS Files)
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Article 📚 📚 📚
    1. 7 Practical Tips for Cheating at Design,” from Refactoring UI () by Adam Wathan & Steve Schoger
  6. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Project #5: Design Comprehensives

: jQuery Basics

: jQuery Basics
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: JavaScript, jQuery, HTML <script> tag
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: jQuery Basics
  3. ➔ ➔ ➔ REVIEW This Week’s Technical Cheatsheet 🤔 🤔 🤔
    1. Technical Cheatsheet: jQuery Mouse Action Events (Download HTML/CSS Files)
  4. ➔ ➔ ➔ BUILD Your Own Versions of This Week’s Demo Websites 🖥 🖥 🖥
    1. Demo Website: jQuery background-color buttons (Download HTML/CSS Files)
      1. Step-by-Step Instructions: jQuery background-color buttons
    2. Demo Website: jQuery Emoji Story 😃😃😃 (Download HTML/CSS Files)
      1. Step-by-Step Instructions: jQuery Emoji Story 😃😃😃
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Article 📚 📚 📚
    1. Why Twitter’s New Interface Makes Us Mad,” from The New Yorker () by Kyle Chayka
  6. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Project #5: Design Comprehensives

: jQuery Mobile Navigation

: jQuery Mobile Navigation
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: Navigation Drawers
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: jQuery Side Drawer “Hamburger Button” Menu
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo Website: jQuery Side Drawer “Hamburger Button” Menu (Download HTML/CSS Files)
      1. Step-by-Step Instructions: jQuery Side Drawer “Hamburger Button” Menu
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
    1. Bonus Demo Website: Animated Hamburger Button (Download HTML/CSS Files)
  5. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapter 📚 📚 📚
    1. Chapter 5: Layers” from Resilient Web Design () by Jeremy Keith
  6. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Restaurant Website Redesign Prototype

: jQuery Photo Galleries

: jQuery Photo Galleries
  1. ➔ ➔ ➔ BUILD Your Own Versions of This Week’s Demo Websites 🖥 🖥 🖥
    1. Demo Website: jQuery Carousel Photo Gallery (Download HTML/CSS Files)
      1. Step-by-Step Instructions: jQuery Carousel Photo Gallery
    2. Demo Website: jQuery Lightbox Photo Gallery (Download HTML/CSS Files)
      1. Step-by-Step Instructions: jQuery Lightbox Photo Gallery
  2. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Restaurant Website Redesign Prototype

: jQuery Scrolling

: jQuery Scrolling
  1. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: Skrollr JavaScript Scroll Animation
  2. ➔ ➔ ➔ BUILD Your Own Versions of This Week’s Demo Websites 🖥 🖥 🖥
    1. Demo Website: Skrollr JavaScript Scroll Animation (Download HTML/CSS Files)
      1. Step-by-Step Instructions: Skrollr JavaScript Scroll Animation
    2. Demo Website: jQuery Animated Navigation Highlight (Download HTML/CSS Files)
      1. Step-by-Step Instructions: jQuery Animated Navigation Highlight
  3. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
    1. Bonus Demo Website: jQuery “Scrollify” Scroll Snapping (Download HTML/CSS Files)
      1. Step-by-Step Instructions: jQuery “Scrollify” Scroll Snapping
  4. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapter 📚 📚 📚
    1. Chapter 6: Steps” from Resilient Web Design () by Jeremy Keith
  5. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Project #6: Revised Design Comprehensives

: Parallax Scrolling

: Parallax Scrolling
  1. ➔ ➔ ➔ READ This Week’s Lecture Slides 😎 😎 😎
    1. Lecture Slides: Parallax Scrolling Effect
  2. ➔ ➔ ➔ WATCH This Week’s Video Tutorial 🤩 🤩 🤩
    1. Video Tutorial: jQuery .stellar(); Parallax Scrolling Effect
  3. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo: jQuery .stellar(); Parallax Scrolling Effect (Download HTML/CSS Files)
      1. Step-by-Step Instructions: jQuery .stellar(); Parallax Scrolling Effect
  4. ➔ ➔ ➔ TAKE A LOOK at This Week’s Bonus Website 🤗 🤗 🤗
    1. Bonus Demo: Parallax Scrolling Effect with Images (Download HTML/CSS Files)
  5. ➔ ➔ ➔ WORK on the Homework Assignment for Next Week 🗓 🗓 🗓
    1. Project #6: Revised Design Comprehensives

: User Input <form> Tag

: User Input <form> Tag
  1. ➔ ➔ ➔ BUILD Your Own Version of This Week’s Demo Website 🖥 🖥 🖥
    1. Demo: User Input <form> Tags and PHP (Download HTML/CSS Files)
      1. Step-by-Step Instructions: User Input <form> Tags and PHP
  2. ➔ ➔ ➔ READ and RESPOND to This Week’s Textbook Chapter 📚 📚 📚
    1. Chapter 7: Challenges” from Resilient Web Design () by Jeremy Keith
  3. ➔ ➔ ➔ WORK on the Homework Assignment 🗓 🗓 🗓
    1. Final Project: Responsive Restaurant Website

Projects

Exercise #1: “Just ASCII About Me” (10 points)

Exercise #1: “Just ASCII About Me” (10 points)

Assignment Instructions

Becoming acquainted with web browser developer tools is an important skill in learning how to read markup and navigate HTML and CSS documents. Start making a habit of looking at the source documents for websites that you regularly visit (for example Craigslist, Facebook, Wikipedia, etc.).

Read the following article: Tom McCormack, “Emoticon, Emoji, Text II: Just ASCII,” Rhizome (2013).

ASCII art is just one example of information that you can find “hidden” in website markup. Spend at least one hour visiting as many major websites as you can, viewing the source markup in the browser developer tools, and taking note of ASCII marks, logos, art, or other hidden messages in the source comments. ASCII logos are generally found inside of <!-- comment tags --> and often are near the top of the document.

Collect at least three (3) examples that you find. Then, using Sublime Text, design your own ASCII mark as a brand for yourself (you can use an online ASCII generator; or you can design your logo yourself). You will include your ASCII mark at the top of all of the website HTML and CSS documents that you create throughtout the semester as a way of “branding” your projects.

ASCII Art Examples

Here are a few examples of sites that display ASCII logos, marks, and messages as comments in their source files:

Assignment Submission Instructions

Create your personal website for the class (the file must be called index.html). On that page, create an <a> hyperlink tag and have it point to a sub-page called just-ascii-about-me.html. In the <!-- comments --> on that page paste:

  • At least three (3) examples of ASCII marks that you found hidden in the HTML comments of popular websites (NOT from the example websites provided above)
  • Your own ASCII logo or brand for your web design studio, which we will include in our HTML and CSS source files for all of our exercises and projects

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Exercise #2: “D for DIV: Art Forgery with CSS3” (15 points)

Exercise #2: “D for DIV: Art Forgery with CSS3” (15 points)

Assignment Instructions

Use only HTML5 Semantic Tag elements (such as <main>, <section>, <article>, <figure>, etc.) with background-color, width, height, margin, and padding specifications in a linked CSS stylesheet to create at least three (3) digital works of art forgery on three (3) separate HTML documents.

The dimensions of the work must be responsive to the browser window (i.e. their size should be flexible using either the vw (viewport width) or vh (viewport height) dimensions) and all of the elements on the page must be interactive with a background-color property change in response to the user’s hover.

You must choose three (3) of the following fine art paintings from the list below to recreate or “forge” in markup. Upload your HTML and CSS files to your class directory and make sure that the documents are properly linked from your main index HTML.

In-Class Example Exercise:

Project Submission

Include your HTML files in your class directory and make sure that the documents are properly linked from your main index HTML.

Submit your root directory folder for your class website as an archive file (either .zip or .rar - Mac instructions/PC instructions) to Canvas by the deadline posted (any submissions received late will be penalized by one letter grade, and penalized additionally for each week that they are not submitted).

Resources

Fonts

Fonts

Inspiration

Inspiration

Recommended Readings

Recommended Readings

Students

(Tuesday)

(Tuesday)
  1. ar-av
  2. je-ch
  3. ry-do
  4. ke-ha
  5. di-he
  6. la-hi
  7. sh-ho
  8. zh-ho
  9. em-kh
  10. yu-li
  11. na-lu
  12. sa-na
  13. sa-pa
  14. ar-pa
  15. ch-pu
  16. er-sh
  17. se-va
  18. ye-wa
  19. ma-yo

(Wednesday)

(Wednesday)
  1. di-ca
  2. ke-da
  3. ma-fr
  4. az-iz
  5. jo-jo
  6. ed-ma
  7. ke-mo
  8. pe-pa
  9. an-ra
  10. ka-ra
  11. ha-so
  12. el-su
  13. ma-ts
  14. em-ve
  15. co-ve
  16. ka-zh
  17. an-zh

(Web Design 2)

(Web Design 2)
  1. ya-ad
  2. er-aq
  3. ch-co
  4. na-da
  5. va-he
  6. ja-ju
  7. br-le
  8. ma-ma
  9. ir-ma
  10. ch-ng
  11. ya-ou

(Web Design 1)

(Web Design 1)
  1. ro-bo
  2. ja-co
  3. ay-du
  4. ja-gr
  5. fe-vo
  6. da-ma
  7. ed-na
  8. pe-pa
  9. ar-si
  10. ha-so
  11. ro-st
  12. ka-zh
  13. ro-zu

(Thursday)

(Thursday)
  1. aet
  2. ao
  3. bmc
  4. cln
  5. dma
  6. emr
  7. etw
  8. fja
  9. jkt
  10. jp
  11. lrz
  12. nady
  13. ng
  14. nin
  15. pjg
  16. poo
  17. ssk

(Wednesday)

(Wednesday)
  1. ob
  2. lic
  3. kdf
  4. mpm
  5. wm
  6. mpp
  7. bas
  8. rgs
  9. vt
  10. sw

(Wednesday)

(Wednesday)
  1. ac
  2. av
  3. dc
  4. el
  5. ep
  6. ff
  7. gl
  8. hl
  9. ja
  10. kd
  11. kj
  12. mk
  13. mm
  14. ms
  15. mx
  16. rc
  17. ss
  18. yj
  19. yl