Garrettmedia | Mission Main | Mark's Schedule | ART34 | GDES 45 | GDES 46 | GDES 70 | GDES 73 | GDES 74 | GDES 75 | GDES 81 | Links

GDS 45 Web Design at Mission College

Projects and Homework Spring 2020 - Section 30941

Go to the new home page for the online version of the class

Skip to the Current Week

Jan. 27 - Day 1- Week 1

Subject

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

To Do

Jan. 29 - Day 2 - Week 1

Subject

    Lab
  • Work on First Page
  • Can start gathering information for Assignment 1, probably in a word file

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

Feb. 3 - Week 2 - Day 3

Subject

    Lecture
  • Finish history and structure of the internet and terms
  • Watch some of User Experience Fundamentals for Web Design from Lynda.com
  • Finish discussion of web conventions
  • Discussion forum about favorite and least favorite sites.
  • HTML5 Semantic Elements
  • Short review of Ch. 1 of Learning Web Design if time
  • 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

Feb. 5 - Week 2 - Day 4

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

Feb. 10 - Week 3 - Day 5

Subject

    Lab
  • Work on Assignment 1
  • Work on Exercises 4-1 through 4-3 and 5-1 and 5-2 from the Book
  • Start reading Ch. 6 in Learning Web Design

To Do

Feb. 12 - Week 3 - Day 6

Subject

Check out these example bad websites for things not to do.

To Do

Feb. 17(Monday) - Week 4 - Holiday - No Class

Feb. 19 - Week 4 - Day 7

Subject

    Lecture
  • More User Experience Fundamentals for Web Design from Linked in Learning
    • Navigation
  • Do's and Don'ts from Learning Web Design(See below for examples of poor design choices).
  • Web usability tips pdf
  • CSS Color code
  • Color schemes
  • Color exercise: Build a color scheme
  • Make basic layout template page
    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/March 2

Feb. 24 - Week 5 - Day 8

Subject

    Lab
  • Color exercise: Build a color scheme
  • Work on Assignment 2
  • Do Exercises 6-1 through 6-8 in Learning Web Design

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/March 2

Feb. 26 - Week 5 - Day 9

Subject

    Lecture
  • Finish links
  • Images
  • Image file formats for the web.
  • Image tag and attributes.
    src, height, width, alt
  • Intro centering nav and right left text for resume assignment
    Lab
  • Do Exercises 6-1 through 6-8 in Learning Web Design
  • Do exercise 7-1 in Learning Web Design
  • Work on Assignment 2

To Do

March 2 - Week 6 - Day 10

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

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 (March 23)

March 4 - Week 6 - Day 11

Subject

To Do

March 9 - Week 7 - Day 12

Subject

    Lab
  • Scan and clean up an image practice
  • Finish Scanning and preparing images
  • Review Chapters 7 and 22. Do exercises 7-1 and 7-2 and Exercises 22-1 and 22-2 in Learning Web Design
  • Work on Assignment 3 thumbnails
  • Look at thumbnail sketches

To Do

  • Please bring in an image to scan
  • Read Ch. 7 in Learning Web Design
  • Read Ch. 22 in Learning Web Design
  • Work on Assignment 3
    • Due Day 16 (March 23)
  • Work in progress check on thumbnails/sketches for Assignment 3

March 11 - Week 7 - Day 13

Subject

    Lab
  • Put your own image on the exercise from Monday
  • Look at Thumbnails
  • Move styles from head to external in Assignment 2
  • Optional: Exercises 11-1 and 11-2 in Learning Web Design, and modify with your own image.
  • Sign up for a figma account
  • Play with Wireframing in figma
  • 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 (March 23)

Go to the new home page for the online version of the class

March 16 - Week 8 - Day 14

Subject

    Lab
  • Look at Thumbnails
  • Move styles from head to external in Assignment 2
  • Sign up for a figma account
  • Play with Wireframing in figma
  • Make a wireframe for the Assignment 3 main/index page
  • Work on Assignment 3
    • Due Day 16 (March 23)

To Do

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

March 18 - Week 8 - Day 15

Subject

    Lab
  • Work on Assignment 3
    • Due Day 16 (March 23)
  • Do Chapter 12 exercises

To Do

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

March 23 - Week 9 - Day 16

Subject

    Lecture
  • CSS references from above
  • Critique Assignment 3
    • Written Critique
  • Overflow Property
  • Details on floats from Ch. 15 of Learning Web Design
  • Background image positioning
  • Review for Quiz
  • Start Ch. 12 Review
  • Text Properties
    • Practice text styling
  • Do together
    • Mark css exercises 1-8
    • Child Selector Exercise
    • Exercise 12-1 and 12-2 in Learning Web Design
  • Selectutorial
  • Cascade and inheritance
  • Descendants, Parents, Children, etc.
  • Selectors
  • normalize.css
  • Brief on Image Maps
  • Tables if time
    Lab
  • Do Chapter 12 exercises

To Do

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

March 25 - Week 9 - Day 17

Subject

    Lab
  • Written Critique of Assignment 3
  • Work on Animation Practice

To Do

  • Do Animation Exercise. Check here for requirements.
    Due Day 20 (Nov. 4)
  • 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

March 30 and April 1 - Spring Break! - No Class

April 6 - Week 10 - Day 18

Subject

    Lecture
  • Do Animation Exercise
  • Animation Exercise
    • Build a Mission College ad
  • Print styles
  • CSS Opacity
  • If time
    • CSS Box model Exercise
    • More User Experience Fundamentals for Web Design from Lynda.com
      • Understanding Fitts' Law
      • Elements every webpage should have
  • Selectutorial
  • Cascade and inheritance
    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

April 8 - Week 10 - Day 19

Subject

    Lab
  • Do exercises 14-1, 14-2 and 14-3 from Learning Web Design
  • Work on Animation Assignment

To Do

April 13 - Week 11 - Day 20

Subject

    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. 18)
    • Prototype in invision Due
      Day 24 (Nov. 20)
    • Project Due for Testing
      Day 27 (Dec. 2      )
    • Final Version Due
      Day 28 (Dec. 4)
    • See samples here

April 15 - Week 11 - Day 21

Subject

    Lecture
  • Look at animations
  • Web Fonts
  • Pseudo elements
  • Meta tags
  • Box Shadows
  • Rounded Images
  • CSS Gradients
  • Review Float tips and info from Ch. 15 of Learning Web Design
  • Layout demo with clearfix
  • More CSS Floats review
    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. 18)
    • Prototype in invision Due
      Day 24 (Nov. 20)
    • Project Due for Testing
      Day 27 (Dec. 2      )
    • Final Version Due
      Day 28 (Dec. 4)
    • 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

April 20 - Week 12 - Day 22

Subject

    Lab
  • Do exercises 14-1, 14-2 and 14-3 from Learning Web Design
  • 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. 18)
    • Prototype in invision Due
      Day 24 (Nov. 20)
    • Project Due for Testing
      Day 27 (Dec. 2      )
    • Final Version Due
      Day 28 (Dec. 4)
    • See samples here

April 22 - Week 12 - Day 23

Subject

    Lab
  • Go over prototypes, wireframes and/or comps
  • Do exercises 14-1, 14-2 and 14-3 from Learning Web Design
  • Ch. 15 exercises
    • Ch. 15 Exercises 1-5
  • Work on Final Project

To Do

  • Comps, Creative Briefs or Wireframes due
  • Read Ch. 4 on typography in The Prinicipals of Beautiful Web Design.
  • Read Ch. 16 pages 419 - 447 on Flexbox
  • Work on wireframes or comps for prototype for Final Project
  • Do exercises 14-1, 14-2 and 14-3 from Learning Web Design
  • Do Ch. 15 Exercises 1-5
  • Work on Final Project
      Due dates:
    • Comps, Creative Briefs or Wireframes due
      Day 23 (Nov. 18)
    • Prototype in invision Due
      Day 24 (Nov. 20)
    • Project Due for Testing
      Day 27 (Dec. 2      )
    • Final Version Due
      Day 28 (Dec. 4)
    • See samples here

April 27 - Week 13 - Day 24

Subject

  • Lab
  • Look at work in progress for Final Project
  • Work on Prototype of Final Project
  • Work on Chapter 16 Exercises on layout
  • Work on Final Project

To Do

  • Do Chapter 16 Exercises on layout
  • Work on Final Project
      Due dates:
    • Comps, Creative Briefs or Wireframes due
      Day 23 (Nov. 18)
    • Prototype in invision Due
      Day 24 (Nov. 20)
    • Project Due for Testing
      Day 27 (Dec. 2      )
    • Final Version Due
      Day 28 (Dec. 4)
    • See samples here

April 29 - Week 13 - Day 25

Subject

  • Lab
  • Work on Final Project

To Do

  • Read Chapter 9 of Learning Web Design on Forms
  • Do Chapter 16 Exercises
  • Work on Final Project
      Due dates:
    • Comps, Creative Briefs or Wireframes due
      Day 23 (Nov. 18)
    • Prototype in invision Due
      Day 24 (Nov. 20)
    • New due dates follow
    • Project Due for Testing
      Day 27 (Dec. 4      )
    • Final Version Due
      Day 28 (Dec. 8) Turn in through Canvas dropbox
    • See samples here

May 4 - Week 14 - Day 26

Subject

    Lab
  • Do Chapter 9 Exercises in Learning Web Design on forms
  • Work on final project

To Do

  • Read Chapter 9 of Learning Web Design
  • Do Chapter 9 Exercises in Learning Web Design on forms
  • Work on Final Project
      Due dates:
    • Comps, Creative Briefs or Wireframes due
      Day 23 (Nov. 18)
    • Prototype in invision Due
      Day 24 (Nov. 20)
    • New due dates follow
    • Project Due for Testing
      Day 27 (Dec. 4      )
    • Final Version Due
      Day 28 (Dec. 8) Turn in through Canvas dropbox
    • See samples here

May 6 - Week 14 - Day 27

Subject

To Do

  • Work on Final Project
      Due dates:
    • Comps, Creative Briefs or Wireframes due
      Day 23 (Nov. 18)
    • Prototype in invision Due
      Day 24 (Nov. 20)
    • Project Due for Testing
      Day 27 (Dec. 4      )
    • Final Version Due
      Day 28 (Dec. 8)
    • See samples here

  • Extra Credit Assignment: Create a page with a video that has you in it.

May 11 - Week 15 - Day 28

Subject

EDIT THIS User Testing tools for Web Designers and Developers

    Lab
  • Final Version and 2 Beta Test Forms Due Dec. 8 in Canvas
  • Work on Extra Credit
    • Due Dec. 8 in Canvas

To Do

May 13 - Week 15 - Day 29

Subject

 

    Lab
  • Final Version and 2 Beta Test Forms Due Dec. 8 in Canvas
  • Work on Extra Credit
    • Due Dec. 8 in Canvas

To Do

May 18 (Monday) - Week 16 - No Class

May 20 - Day 30 - Week 16 - Last Day

Subject

    Lecture
  • Critique Final Projects
  • Final Exam 12:40 - 2:40PM
    Lab
  • Final Exam 12:40 - 2:40PM

To Do

  • Final Exam 12:40 - 2:40PM
  • Make sure to bring your 2 beta tests if you haven't already.

Dec. 11 - Week 16 - Day 29 - Last Day

Subject

    Lab
  • Final Version 2 Beta Test Forms Due Dec. 12
  • Work on Extra Credit
    • Due May 22
    • Submit your assignment by posting in the canvas discussion forum called "Extra Credit Video Page" with the URL of the page with your video.

To Do

  • Check out Ch. 18 of Learning Web Design in CSS Techniques
  • Finish beta tests
  • Work on Extra Credit
    • Due May 22
    • Submit your assignment by posting in the canvas discussion forum called "Extra Credit Video Page" with the URL of the page with your video.

May 20 (Monday) - Week 16 - No Class

May 22 - Day 30 - Week 16 - Last Day

Subject

    Lecture
  • Final Exam 3:40 - 5:40PM
    Lab
  • Final Exam 3:40 - 5:40PM

To Do

  • Final Exam 3:40 - 5:40PM
  • Make sure to bring your 2 beta tests if you haven't already.
-->
Garrettmedia | Mission Main | Mark's Schedule | ART34 | GDES 45 | GDES 46 | GDES 70 | GDES 73 | GDES 74 | GDES 75 | GDES 81 | Links