Index of Video Tutorials - MAT 165 Lecture and Demo Review

• Index of Video Tutorials

Index of Student Work - MAT 165 Student Work

• Index of Student Work

FTP Instructions and Information for the MAT Server

• Publishing Instructions and FTP Info for the MAT Server

Frequently Asked Questions about the Class

• FAQs (Questions and Answers about the Class)

Questions, Answers, Discussions, and Critiques

• Canvas

These and other great books are free from Safari Books Online using your Miracosta Surf ID and Password:

• Adobe Dreamweaver CC Classroom in a Book (2019 release) by Jim Maivald
  
  
• Learning Web Design (5th Edition) by Jennifer Robins

Web Design Magazines/Resources

• Smashing Magazine
• A List Apart
• Mix Online
• Six Revisions
• CSS Tricks
• Elements of Design

 

Firefox Extensions for Web Desingers

• Web Developer Toolbar
• Firebug

 

Creative/Communication Brief

• Communication Brief - Class/Project Guidelines
• Creative Brief Worksheet - gotomedia (rtf)
• How to write a website creative brief
• Writing a creative brief

 

Information Architecture

• Information Architecture - Class/Project Guidelines
• Information Architecture: Creating Order Out of Chaos
• IA Survey
• IA and interaction design - A visual vocabulary
• Defining Information Architecture Deliverables
• Boxes and Arrows

 

IA Process, Sitemaps, Wireframes, and Additional Resources and Examples

• A process for website sucesss (The process at Free Range Studios with sitemaps, wireframes, content inventories)
• Redesigning the Expression Engine Site (article on design process from wireframes through final design)
• 35 Wireframing Resources
• Wireframes (blog/magazine)
• Sample Site Maps and Flow Charts
• Wireframe Examples

 

Usability

• Usability experts are from Mars, graphic designers are from Venus
• The Myth of Usability Testing
• Usability Review of Charity Websites
• 30 Usability Issues To Be Aware Of

 

Content Stategy

• The Discipline of Content Strategy
• A complete beginner's guide to content strategy
• Content Templates to the Rescue

 

SEO

• Google Webmaster Guidelines
• Google Search Engine Optimization Starter Guide (pdf)
• The beginners guide to SEO
• http://searchenghinewatch.com
• http://sempo.org
• http://www.highrankings.com

 

Design Principles

• Design Principles and Tips

 

Design Showcases

• CSS Beauty
• css Zen Garden: The Beauty in CSS Design
• The Best Designs - The Best Flash and CSS Web Design Gallery
• The FWA
• Communication Arts - 2010 Interactive Annual
• AIGA Design Archives
• ColourMod Galleria
• light on dark | archive
• CSS Elite
• Best Web Gallery - Flash + CSS Gallery
• Styleboost
• Design Shack Gallery
• DOPE Awards // Flash Website Awards

 

Fonts and Web Font Hosting Services

• Google Web Fonts (free web fonts and font hosting)
• The League of Moveable Type (open source web fonts)
• Typekit (huge library of great fonts, varying pricing options for commercial fonts)
• Font Squirrel (free fonts for commercial use)
• Fonts.com
• Fonts Live
• Font Spring
• Web Ink
• Font Deck
• Dafont.com

 

Compare Fonts, Learn About Typography

• TypeTester.org
• Web Fonts Gallery
• The Web Font Awards
• Typekit Blog
• Typographica
• Thinking With Type
• CSS Font Sampler and Survey
• Font Matrix

 

Articles about Typography on the Web

• 10 Common Typography Mistakes (article)
• Typographic Contrast and Flow (aticle)
• Is “Good Web Typography” No Longer an Oxymoron? ( article)
• Web Typography: Educational Resources, Tools and Techniques (article)

 

Color Resources

• Kuler
• Color Scheme Designer

 

Image/Stock Resources

• Comp Fight (Flickr Search)
• iStockPhoto (cheap, high quality stock)
• Stock XChng (free stock photos)
• Blue Vertigo (stock photos, fonts, and other resources)

 

Grids

• Grids_Are_Good (PDF)
• Five simple steps to designing grid systems — Mark Boulton
• Designing With Grid-Based Approach - Smashing Magazine
• 960 GS
• Fluid 960 Grid System | 16-column Grid
• The Grid System
• Grid Designer 2
• Gridding the 960 ~ Authentic Boredom
• Design By Grid | Home
• Grid System Generator

 

Size

• The 8(71) Most Common Screen Resolutions of 2010 (PDF)
• Units of Measure - Points, Pixels, Ems, and %

 

CSS Positioning Video Tutorials

• CSS for Positioning - Introduction
• Block and Inline Boxes
• The CSS Box Model
• Understanding Document Flow - Static, Relative, Absolute, and Fixed Positioning Techniques
• Working with AP Divs

 

CSS Demos

• Image Replacement Technique
• CSS Rollover Menu Using Lists (simple)
• CSS Menus Using Lists and Layout Techniques (advanced/experimental)
• CSS Rollovers - Background Position Shift/Sprite Technique
• Forcing a Scroll Bar
• Vertical and Horizontal Centering
• CSS Image Investigations - Width, Overflow, Background

 

CSS - Getting Started

• Mastering CSS Coding: Getting Started Article
• W3 School Tutorials (HTML & CSS)
• HTML Dog: HTML and CSS
• CSS Property List (W3)
• CSS Properties (HTML Dog)

 

CSS Background Images

• Background Image Specifications at the W3
• Large Backgrounds
• Full Page Backgrounds
• Stacking Order of Multiple Backgrounds

 

CSS Layout and PSD to CSS Resources

• PS to CSS - Sample Layout - PSD, HTML, CSS
• From Photoshop to XHTML/CSS - 13 Tutorials
• 30 + PSD to CSS/HTML Conversions
• CSS Layout Samples - Code Sucks
• CSS Layout Samples - Layout Gala
• CSS Layout Samples - Intensivstation
• CSS Layout Samples -CSS Layout Generator

 

CSS3

• CSS3 Please
• CSS3 Mastery (Net Tuts)
• CSS3 Tutorials
• CSS3 Info
• CSS Properties Index
• Can I Use? (Overview of browser support of HTML 5 and CSS3)
• Using CSS3: Older Browsers And Common Considerations (article)
• Push Your Web Design Into The Future With CSS3 (article)

 

Web Accessibility

• WebAim - Web Accessbility in Mind
• Wave - Web Accessibility Evaluation Tool
• Section 508 Standards

 

Cross-Browser Review/Compatibility Resources

• Browser Lab from Adobe
• Browser Shots
• Multiple IE
• IE CSS Bugs You'll Get Every Time
• CSS Differences in IE 6, 7, and 8
• How to Create an IE only stylesheet
• IE6 upgrade warning
• Modernizr (CSS3 and HTML5 feature detection)
• HTML5 Shiv (compatibility for IE6-8)

 

jQuery

• jQuery Homepage
• jQuery Tutorials
• JQuery LocalScroll Sample File

• NivoSlider
• JScroll Pane
• Thickbox
• FancyBox
• Coda-Slider
• Another 'Coda' Slider

 

HTML5

• New HTML5 structural tags (class notes)

• HTML5 Specification
• HTML 5 tag reference
• Dive Into HTML5
• HTML5 Rocks
• HTML5 Demos
• HTML5 Doctor

• HTML5 Facts and Myths (article)
• HTML5 and the Future of the Web (article)
• HTML5 Cheatsheet (pdf)

• HTML5 Boilerplate (HTML/CSS/JS template)
• Modernizr (CSS3 and HTML5 feature detection)
• HTML5 Shiv (compatibility for IE6-8)

 

Media Queries and the Mobile Web

• Sample Layout using Media Queries
• Media Queries Notes

• Mobile First Presentation by Luke Wroblewski (pdf)
• How To Build A Mobile Website (article)
• How To Use Media Queries for a Mobile Version of your Website (article)
• Responsive Web Design (article)
• Mobile Web Design Tips and Best Practices (article)
• HTML 5/CSS3 Media Queries in Dreamweaver (article)
• Resolution Specific Stylesheets (article)
• Hicks Design (fluid design example)
• W3C Media Queries (documentation)
• css3-mediaqueries-js/ (@media cross browser compatibility)
• jquery.mediaqueries.js (link media= cross browser compatibility)
• jQuery Mobile

 

Forms

• Sample Form
• CGI Resource Index
• Matt's Formmail

 

Content Maagement Systems (CMSs)

• WordPress
• Drupal
• Joomla
• Expression Engine
• Moveable Type
• Adobe Business Catalyst (In-Context Editing)
• Contribute
• DotNetNuke
• Perch
• CushyCMS
• PageLime
• Konductor
• Concrete5
• + many more