CG213 Graphic Design for WWW
Class time and location:
Tuesday and Thursday; 10 - 11:50 a.m.
Instructor: Scot Connor | Chrono Ho
Monday and Wednesday; 5 - 6:50 p.m.
Instructor: Chrono Ho
This course explores design concepts for the World Wide Web (WWW) while developing expertise in web-based typography, image file formats and sizes, hexadecimal color, frames, cascading style sheets, tables, and site interactivity. Emphasis is placed on the understanding of browser constraints, hypertext markup language (HTML), site planning, and site structure.
Prerequisites: GD110 Digital Design or both GD141 Digital Illustration and GD142 Digital Imaging. PT207 Digital Photography may be substituted for GD142 Digital Imaging.
Open Lab Hours
Click HERE for the open lab schedule.
Instruction for class projects
Online articles for class:
- http://www.addedbytes.com/articles/for-beginners/html-for-beginners - HTML tutorial
- http://webaim.org/intro Introduction to Web Assessibility
- http://johnpolacek.github.com/scrolldeck.js/decks/responsive What is Responsive Web Design
- http://www.slideshare.net/vitalyfriedman/responsive-web-design-clever-tips-and-techniques#btnNext Tips about Responsive Web Design
- http://www.addedbytes.com/cheat-sheets/css-cheat-sheet CSS Cheat Sheet
- http://www.addedbytes.com/cheat-sheets/html-cheat-sheet HTML Cheat Sheet
- http://webstyleguide.com/wsg3/3-information-architecture/index.html Information Architecture
- http://webstyleguide.com/wsg3/4-interface-design/index.html Interface-design
- http://www.webdesignerdepot.com/2011/03/7-basics-to-create-a-good-design-brief Writing a design brief
- www.w3schools.com/html/default.asp - Basic of HTML, Description and examples of usages of HTML tags.
- www.lipsum.com - Loren Ipsum Generator. Use it when you text filler on your initial design stage.
- ColorSchemeDesigner.com - Useful resource for experimenting hormonious color schemes.
- Web Developer for Firefox A browser addon that provides many useful tools to use for web development.
- www.cssnewbie.com/super-simple-horizontal-navigation-bar Make use of CSS "float" and pseudo-class propertie to create a horizontal navigation.
- studentweb.mvcc.edu/resources/rollover_using_single_image Rollover : Create navigation menu using single image with CSS
- studentweb.mvcc.edu/resources/rollover_using_individual_images Rollover: Create buttons using an image with CSS
- www.barelyfitz.com/screencast/html-training/css/positioning CSS Position: Static, fixed, relative, absolute
- buildinternet.com/2008/11/how-to-center-a-website-with-css tutorial on how to center your page
- CSS Lightbox Tutorial on how to a image gallery (lightbox) style using CSS
- studentweb.mvcc.edu/resources/sample/div_display.html Masking Content with DIV (Alternative approach to iframe)
- http://www.designerledger.com/parallax-scrolling-tutorials Parallax Effect (JQuery and CSS)
- http://tympanus.net/codrops/2011/12/26/css3-lightbox CSS3 LightBox
- http://www.webdesignerdepot.com/2011/03/7-basics-to-create-a-good-design-brief/ Creating a good design brief
- http://justcreative.com/2008/09/26/how-to-write-an-effective-design-brief/ How to write an effective design brief
If you have any questions, please contact me at firstname.lastname@example.org.