Resources

__Resources__
If you have resource you think others may find interesting or useful post it here and be sure to write a little anecdote as to why you think its helpful. Be specific and let others know which sections you are referring to. Even point out certain parts that are relevant to the class activities.toc

__ HTML __

 * Introduction to HTML 5** - a fantastic pdf intro created by Andrew Hladkyj that covers some of the basics and use of familiar tags. Covered in class but here as a reference as needed.


 * HTML Code Validator**: W3C Markup Validation Service is the best know validator for making sure your markup meets current standards. This is important if you want your web designs viewable on multiple platforms and different web browsers. It is a quick and easy quality check to ensure it will work with future HTMl versions.


 * HTML Tutorial**: HTML Dog is a excellent reference for all things HTML, CSS from beginner to advanced.


 * Image Tag Tutorial** at w3schools.com provides an overview if the image tags to correctly display images in an HTML document.


 * HTML5:** HTML 5 Rocks lets you learn from slideshows or step by step tutorials to help understand the HTML features. Also links to many examples so you can see HTML5 in action.

The Elements of Typographic Style :: Applied to the Web


 * Designer Toolbox:** HTML Character Codes


 * Firebug:** Firebug is a web development tool to view live html and css coding within a Firefox browser.

as well and look at modern design trends.
 * Best Web Page Design Gallery: [|Cool Home Pages]** Let's you browse through many different Web page galleries and those in which you can purchase

[|Google Web Fonts] is a good site to download a variety of different fonts for the web.

__** CSS **__
[]
 * Raw CSS Examples** has a lot of good tutorials and FAQ's about CSS. It's a good resource for both beginners and intermediate CSS users! Also links to many examples of CSS in action.


 * CSS Layouts: [| is here at Fixed CSS Layout Pages] ** This page is very useful when you want to create a CSS page. The pages already have your alternative header, footer, etc to work with. It is very easy!


 * CSS3 Animations:** [|Using CSS3 Transitions, Transforms and Animation:] For those interested in css3 animation, this is the perfect website for you! This website shows you how to code html and css for 'flash-like' animation effects such as 3d flip, cross-fading transition, and scaling animation.


 * Listing of CSS Properties** is here at [|HTML Dog] . It is quite comprehensive and gives a complete listing from type to backgrounds to positioning and everything else in between.

CSS3 Animation featuring best awesome functions. CSS3 is full of amazing features, some of which are less explored. One of its most amazing feature is CSS3 Animation, which is fun and frolic. [|Slodive website]
 * 24 Css3 Animation Tutorials **

**CSS3 Image hover and rollover**. Great resources that I used for my assignment... Big help. You can download the code on these sites and see exactly how it work: Link 1 Link 2

You're going to have all kinds of fun with the CSS multiple backgrounds feature. You’ll learn how to use multiple backgrounds in a simple way and how to go much further by combining the technique with hover actions and CSS transitions to create some really cool effects. **[|Design Shack]**
 * Hover Effects Using CSS Multiple Backgrounds.**

This website provides 40 different tutorials that teach you step by step how to create professional and easy CSS Effects. The great thing about this is that you can easily download their HTML and CSS file to see just how they created it. The selection of effects varies from the enlargement of images to creating shadows for you text! [|40 CSS Effects]
 * CSS Effects Tutorials**

A really useful website that includes nifty HTML and CSS scripts to enhance website interactions. Rollovers, scrollers, slideshows, and menu configurations are just a few of the resources on this handy website! [|Dynamic Drive]
 * Dynamic Drive DHTML**


 * CSS3 Generator:** Web Design and Such has a very useful collection of 25 CSS3 generator websites.


 * CSS3 Horizontal Hybrid Scrolling:** Similar to regular scrolling, when you click on a menu item it will scroll to the next page. Turorial Via[| DevOpera.]


 * CSS Tricks:** Here is a cool website to keep you updated with some CSS during the summer! Click [|here]


 * Team Treehouse:** Here is a great site for learning web design! your welcome! :) Click [|here]


 * 3D Image Effects:** Really cool 3D image effects using CSS. Click here


 * Page Transitions:** Tutorial on cool page transitions for one page websites. Click here

__** Processing **__

 * [|Learning Processing]** has several interactive tutorials and other useful information.


 * [|Processing.org]** is the official website for Processing 1.1, and has very valuable information to help with your projects.


 * [|OpenProcessing]** is a great community with many active members, supplying sketches and tutorials to view and download.


 * Learning Processing** :: While Loop | While Loop with Interactivity

** [|Joseph Boston] ** is a Youtube channel with many processing tutorials.


 * [|Processing 101]** is a Youtube playlist with many processing tutorials from different channels.


 * [|Learning Processing Book]** Free access. It teaches you processing step by step. Very helpful for beginners.


 * Video Tutorials** by Jose Sanchez, on a **Processing wiki** that has many helpful resources along with other tutorials.

Embedding Processing / 2 A walkthrough of how to get your process sketch onto your website.

__ Applications __
**TextWrangleri**s a free basic HTML editor easily writing and saving your own markup. This software is on all the machines in our studios.

**[|CSSEdit]** is a really good editor for building your CSS styles. It is not free but is available in all the studios.

Are you a hipster and need some text to fill up your textbox? Look no further, **[|Hipster Ipsum]** is here!

__ Images for the Web __

 * Web Style Guid**e has very good information about **Web Graphics** from a technical and visual communication perspective. Excellent resource that expands on the ideas covered in class.


 * WebStyle Guide** :: Page Design


 * WebStyle Guide** :: Typography


 * How to make GIFS** :: [[file:HOWTOMAKEAGIF.pdf]]

__**Interaction/Site Design**__
The Elements of User Experience | CH2

Web Style Guide :: Site Structure

Web Style Guide :: Presenting Information Architecture

What Are Wireframes

What are Moodboards [example 1 | 2 ]