GDS 45 Web Design at Mission College

Projects and Homework Fall 2018 - Section 75216

Skip to the Current Week

Day 1 - Aug. 27 - Week 1

Subject

  • Lecture
  • Introductions
  • Syllabus
  • Look at work
  • Opening Day Canvas Survey

Day 2 - Aug. 29 - Week 1

Subject

To Do

  • Read Ch. 2 in Learning Web Design.
  • Review the terms file

Assignment 1:
Begin 1 basic web page with 6 different facts, opinions, or bits of information from reading Ch 1-3 in Learning Web Design. Try to take 2 items from each chapter. Use the tags we go over today and next week(html, head, body, h1, p, br, etc.) You can start typing out the content from the book now, with no code. Next week we will talk about more formatting. Check out Ch. 4 and 5 in Learning Web Design for help. Make sure and use the following required tags and attributes in Assignment 1.

  • a heading, h1 for example
  • blockquote
  • strong
  • background-color
  • a list

See Assignment 1 Examples


Assign 1 Due Day 6 - Sept. 17

No Class - Sept. 3 - Week 2 - Holiday

Day 3 - Sept. 5 - Week 2

Subject

    Lecture
  • Discussion about forum topics.
  • Finish history and structure of the internet and terms.
  • Short review of Ch. 1 of Learning Web Design
  • Watch some of User Experience Fundamentals for Web Design from Lynda.com
  • HTML5 Semantic Elements
  • More Tags:h1, em, b, i, strong, u, small, blockquote, pre, hr ,div, etc.
    Lab
  • Work on Assignment 1
  • Also work on Exercises 4-1 through 4-3 from the Learning Web Design Book.

To Do

Day 4 - Sept. 10 - Week 3

Subject

    Lab
  • Work on Assignment 1
  • If finished with Assign. 1, you can continue work on Exercises 4-1 through 4-3 from the Learning Web Design Book.

To Do

Day 5 - Sept. 12 - Week 3

To Do

Day 6 - Sept. 17 - Week 4

Subject

To Do

Day 7 - Sept. 19 - Week 4

Subject

    Lecture
  • More User Experience Fundamentals for Web Design from Lynda.com
    • Navigation
  • Look at html5 semantic elements
  • Make basic layout template page
  • Start Links
    Lab
  • Color exercises: Build 2 color schemes
  • Do Exercises 5-1 through 5-3 in Learning Web Design
  • Work on Assignment 2

To Do

  • Read Ch. 1 and 2 in The Principals of Beautiful Web Design
  • Read Ch. 5 in Learning Web Design
  • Do Exercises 5-1 through 5-3 in Learning Web Design
  • Work on Assignment 2
    Due Day 10/Oct. 1

Day 8 - Sept. 24 - Week 5

To Do

  • Read/Review Ch. 6 in Learning Web Design
  • Go through exercises 6-1 through 6-8 in Learning Web Design
  • Work on Assignment 2
    Due Day 10/Oct. 1

Day 9 - Sept. 26 - Week 5

Subject

    Lab
  • Do exercise 7-1 in Learning Web Design
  • Work on Assignment 2

To Do

Day 10 - Oct. 1 - Week 6

Subject

To Do

  • Assignment 2 Due
    • Make sure to validate before turning in
    • To turn in, bring in the actual files(like on a flash drive)to turn in.
  • Make sure to bring in your Learning Web Design book.

Assignment 3:
Create a 2 page web site about an item in the news, or a topic you feel strongly about.

See examples here(some better than others).

Requirements: Create and use at least 1 "hero" image for the site. See this article for more info on "hero" images. Try to create a design that is both attractive visually and easy to use. For a layout, you can start with the basic templates we have done in class, or create one from scratch on your own. If you want to try to use more advanced CSS to layout the page, you can look ahead to Chapter 14-16 in Learning Web Design. However, we will not completely cover CSS layout together until later. This assignment will be graded both on the requirements above and on design.

Assignment Requirements:

  • 2 linked web pages are required.
  • Create and use at least 1 "hero" image.
    • It can be in the header or the top of the body or article.
    • It can be either an inline image or a background image.
    • It can be from a stock photography site.
    • Do not use an image as you found it. Resize and optimize the image as needed.
  • Use at least one other inline image in the content area.
  • Use at least 1 background image.
  • Use CSS to lay out the pages.
  • Use some styles from an external style sheet, and use external styles for most of your styles.

Again, before you turn in your files, make sure you validate your document at: http://validator.w3.org/ and http://jigsaw.w3.org/css-validator/
It can help you spot coding errors.

To turn in, bring files to class.
Due Day 16 (Oct. 22)

Day 11 - Oct. 3 - Week 6

Subject

    Lecture
  • More discussion of Ch. 1 of The Principals of Beautiful Web Design
  • Saving and optimizing Images
    • Save out GDES logo exercise
    • gifs, halos, mattes
    • png-8, png-24, jpg
  • Scanning and Preparing image
  • Thumbnails/sketches

To Do

Day 12 - Oct. 8 - Week 7

Subject

    Lab
  • Finish Scanning and preparing images
  • Do exercises 7-1 and 7-2 in Learning Web Design
  • Work on Assignment 3 thumbnails
  • Look at thumbnail sketches

To Do

  • Read Ch. 7 in Learning Web Design
  • Work on Assignment 3
    • Due Day 16 (Oct. 22)
  • Work in progress check on thumbnails/sketches for Assignment 3

Day 13 - Oct. 10 - Week 7

Subject

    Lab
  • Finish Looking at Thumbnails
  • Move styles from head to external in Assignment 2
  • Play with Wireframing in balsamic
  • Work on Assignment 3

To Do

  • Read Ch. 11 in Learning Web Design
  • Finish work in progress check on thumbnails/sketches for Assignment 3
  • Work on Assignment 3
    • Due Day 16 (Oct. 22)

Day 14 - Oct. 15 - Week 8

Subject

    Lab
  • Make a wireframe for the Assignment 3 main/index page
  • Work on Assignment 3
    • Due Day 16 (Oct. 22)

To Do

  • Read Ch. 12 in Learning Web Design
  • Work on Assignment 3
    • Due Day 16 (Oct. 22)

Day 15 - Oct. 17 - Week 8

Subject

    Lecture
  • More User Experience Fundamentals for Web Design from Lynda.com
    • Understanding Fitts' Law
    • Elements every webpage should have
  • More detail on floats
  • Simple layout template with 2 columns
  • Basic layout demos
  • Review Ch. 16 layouts
  • Start review of Learning Web Design Ch. 12
  • Do together
    • Mark css exercises 1-8
  • Selectutorial
  • Inheritance
  • Descendants, Parents, Children, etc.
  • Text Properties
    • Practice text styling
  • Selectors
    • html
    • class
    • id
    • descendant
    Lab
  • Work on Assignment 3
    • Due Day 16 (Oct. 22)
  • Do Chapter 12 exercises

To Do

  • Work on Assignment 3
    • Due Day 16 (Oct. 22)
  • Do Chapter 12 exercises
  • Read Ch. 13 in Learning Web Design for next week

Day 16 - Oct. 22 - Week 9

Subject

    Lecture
  • Review Ch. 12
  • More User Experience Fundamentals for Web Design from Lynda.com
    • Understanding Fitts' Law
    • Elements every webpage should have
  • Critique Assignment 3
    • Written Critique
  • Review for Quiz
  • Do together
    • Mark css exercises 1-8
    • Child Selector Exercise
    • Exercise 12-1 and 12-2 in Learning Web Design
  • Selectutorial
  • Cascade and inheritance
  • Tables
  • Descendants, Parents, Children, etc.
  • Selectors
    Lab
  • Do Chapter 12 exercises

To Do

  • Assignment 3 Due
  • Be familiar with Ch. 13 in Learning Web Design, especially the new selectors

Day 17 - Oct. 24 - Week 9

To Do

  • Do Animation Exercise. Check here for requirements.
    Due Day 20 (Nov. 5)
  • Read Ch. 3 of The Principals of Beautiful Web Design
  • Be familiar with Ch. 13 in Learning Web Design, especially the new selectors
  • Take a look at Ch. 14 in Learning Web Design for next week

Day 18 - Oct. 29 - Week 10

Subject

    Lab
  • Work on Practice Animations
  • Do storyboard for animation assignment
  • Do Exercises 14-1 to 14-3 in Learning Web Design
  • Work on Animation Assignment

To Do

Day 19 - Oct. 31 - Week 10

Subject

    Lab
  • Do exercises 14-1, 14-2 and 14-3 from Learning Web Design

To Do

Day 20 - Nov. 5 - Week 11

Subject

    Lecture
  • Look at some animations
  • Intro Final Project
  • Sign up for invision
  • Tables
  • Review Ch. 3 of the Principles of Beautiful Web Design
  • CSS Box Shadows
  • More selectors
    • Attribute Selectors
  • CSS Floats review
  • Review of Ch. 13
    • More pseudo-classes intro like nth child from Ch. 13
    • @import for external style sheets
  • Lab
  • Do exercises 14-1, 14-2 and 14-3 from Learning Web Design
  • Work on thumbnails for Final Project. Bring next week.
  • Ch. 15 exercises
    • Start on Ch. 15 Exercises 1-3

To Do

  • Animation Due
  • Read Ch. 3 of The Principles of Beautiful Web Design
  • Read Ch. 4 on typography in The Priniciples of Beautiful Web Design.
  • Work on Final Project
      Due dates:
    • Comps, Creative Briefs or Wireframes due
      Day 23 (Nov. 19)
    • Prototype in invision Due
      Day 24 (Nov. 21)
    • Project Due for Testing
      Day 27 (Dec. 3)
    • Final Version Due
      Day 28 (Dec. 5)
    • See samples here

Day 21 - Nov. 7 - Week 11

Subject

    Lecture
  • Finish looking at animations
  • CSS Positioning
  • CSS Rotation
  • CSS Floats
  • Review Ch. 3 of the Principles of Beautiful Web Design
  • Finish review of Ch. 13
    • @import for external style sheets
  • Review of Ch. 14
    • margin collapse
  • Ch. 15 Exercises
    Lab
  • Work on thumbnails for Final Project
  • Do exercises 14-1, 14-2 and 14-3 from Learning Web Design
  • Ch. 15 exercises
    • Start on Ch. 15 Exercises 1-3

To Do

  • Read Ch. 3 of The Principals of Beautiful Web Design
  • Read Ch. 4 on typography in The Prinicipals of Beautiful Web Design.
  • Work on Final Project
      Due dates:
    • Comps, Creative Briefs or Wireframes due
      Day 23 (Nov. 19)
    • Prototype in invision Due
      Day 24 (Nov. 21)
    • Project Due for Testing
      Day 27 (Dec. 3)
    • Final Version Due
      Day 28 (Dec. 5)
    • See samples here
  • Work on Wireframes for Final Project. Bring wireframes next week for work in progress check.
  • Youtube video on using mybalsamiq for wireframes

No Class - Nov. 12 - Week 12 - Holiday

Day 22 - Nov. 14 - Week 12

Subject

    Lab
  • Look at thumbnails in class
  • Ch. 15 exercises
    • Ch. 15 Exercises 1-5
  • Ch. 16 exercises
    • Do Exercise 16-1
  • Work on wireframes/comps/creative brief for Final Project

To Do

  • Read Ch. 4 on typography in The Prinicipals of Beautiful Web Design.
  • Read Ch. 16 pages 419 - 447 on Flexbox
  • Work on wireframes for Final Project
  • Work on Final Project
      Due dates:
    • Comps, Creative Briefs or Wireframes due
      Day 23 (Nov. 19)
    • Prototype in invision Due
      Day 24 (Nov. 21)
    • Project Due for Testing
      Day 27 (Dec. 3)
    • Final Version Due
      Day 28 (Dec. 5)
    • See samples here

Day 23 - Nov. 19 - Week 13

To Do

  • Do Chapter 15 Exercises
  • Work on Final Project
      Due dates:
    • Comps, Creative Briefs or Wireframes due
      Day 23 (Nov. 19)
    • Prototype in invision Due
      Day 24 (Nov. 26)
      • We will do prototypes in class. Make sure to bring wireframes Monday, Nov. 26
    • Project Due for Testing
      Day 27 (Dec. 3)
    • Final Version Due
      Day 28 (Dec. 5)
    • See samples here

Day 24 - Nov. 21 - Week 13

To Do

  • Do Chapter 16 Exercises on layout
  • Work on Final Project
      Due dates:
    • Comps, Creative Briefs or Wireframes due
      Day 23 (Nov. 19)
    • Prototype in invision Due
      Day 24 (Nov. 26)
      • We will do prototypes in class. Make sure to bring wireframes Monday, Nov. 26
    • Project Due for Testing
      Day 27 (Dec. 3)
    • Final Version Due
      Day 28 (Dec. 5)
    • See samples here