design – Jer's Life

TO DO ———————————————

===============================================================================
Zen Coding for Aptana
http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/

RESPONSIVE WEB DESIGN (priceless roundup)
http://www.mayfielddigital.co.uk/blog/web-round-up/best-responsive-web-design-examples-and-resources/

Fluid Design Examples w/ Media Queries
http://zomigi.com/blog/examples-of-flexible-layouts-with-css3-media-queries/

Responsive Design
http://csstips.org/2012/02/27/getting-started-with-responsive-web-design-100-articles-and-tutorials/#.T2fSwrutz5A
http://www.wpmayor.com/articles/more-tutorials-and-resources-on-responsive-theme-design-for-wordpress/
Example: http://thisiscounterculture.com/team
Responsive Navigation Patterns
http://bradfrostweb.com/blog/web/responsive-nav-patterns/

TOOLS & Reference
==============================================================================
Benzier Curve Builder – Animation Ease-In / Ease-Out
http://www.roblaplaca.com/examples/bezierBuilder/

CSS / HTML Playground
http://dabblet.com/

HTML Outliner – Give URL or Upload File to get Outline of page
http://gsnedders.html5.org/outliner/

Fonts – Web Safe
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

css transition timing – REFERENCE *GREAT*
http://www.the-art-of-web.com/css/timing-function/

Chroma Color Picker & Saver
http://lucumalabs.com/chroma/#50964a

MOBILE
==============================================================================
45 Design Templates
http://www.1stwebdesigner.com/inspiration/mobile-web-designs-show-future-trends/

Website design for mobiles
http://blog.savvydog.com/?p=60

==============================================================================
HTML =========================================================================
==============================================================================
Structures: div, section, article
http://oli.jp/2009/html5-structure1/

Smartphone Screens Resolutions
http://cartoonized.net/cellphone-screen-resolution.php

HTML Dog’s Guides on HTML and CSS
http://www.htmldog.com/guides/

==============================================================================
CSS ==========================================================================
==============================================================================
SM – CSS3 Learning Guide
http://www.smashingmagazine.com/learning-css3-useful-reference-guide/
SM – Mastering CSS Principals
http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/
45 Powerful CSS / Javascript Techniques – TUTORIALS
http://coding.smashingmagazine.com/2010/01/12/45-powerful-css-javascript-techniques/
Designer Web Trends (parallax scrolling,
http://webdesignledger.com/tips/web-design-trends-in-2011
Fluid Layout (relative to default font)
http://www.alistapart.com/articles/fluidgrids/
LukeW – Multi-Device Layout Patterns
http://www.lukew.com/ff/entry.asp?1514

Media Queries in Basic Responsive Design Grid (must watch)
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/a-basic-responsive-grid-plus-handy-css3-media-query-reporter/

Responsive Design Examples
http://mediaqueri.es/

Progressively Enhancing HTML5 (setup Fallbacks)
http://css-tricks.com/progressively-enhancing-html5-forms/

CSS Menu – using Hover and Position
http://www.noobcube.com/tutorials/html-css/create-an-advanced-css-menu-using-the-hover-and-position-properties-/

Inline Blocks
http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
The Display Declaration
http://www.quirksmode.org/css/display.html

Horizontal Centering
http://haslayout.net/css-tuts/Horizontal-Centering
Vertical Centering Methods
http://www.vanseodesign.com/css/vertical-centering/
Inline Blocks and Why it Sucks
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

Positioning
http://www.barelyfitz.com/screencast/html-training/css/positioning/
http://www.brainjar.com/css/positioning/default.asp

Rounded Corners – REFERENCE – including using images
http://www.w3.org/TR/css3-background/#corner-shaping
http://www.css3.info/preview/rounded-border/

Lists – Stylized – REFERENCE
http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html
Selectors – Advanced (good for dynamic lists in forms – REFERENCE
http://sixrevisions.com/css/3-advanced-css3-techniques-you-should-learn/
Multi-Columns – CSS and Javascipt Alternative for IE – REFERENCE
http://www.csscripting.com/css-multi-column/

Speech Bubbles & Killer Buttons
http://webitect.net/design/designtutorials/6-smashingly-practical-css3-effects-you-can-use-right-now/

Animated pop out Button
http://designshack.net/articles/css/downloadbutton/

STYLE GUIDES
===============================================================================
http://paulrobertlloyd.com/about/styleguide/
http://oli.jp/2011/style-guide/

Color Guide w/ thumbnail preview of color story
http://www.cssdrive.com/index.php/main/category/C17/

STYLES – RESUME
===============================================================================
6 Professional Looking CV/Resume Web Templates
http://www.bitrepository.com/professional-looking-cv-resume-web-templates.html

40 Paid CVs (nice reference)
http://www.1stwebdesigner.com/freebies/resume-cv-templates/

Jason has a pretty example
http://www.brianjaystanley.com/LIS/resume

Another minimal one
http://courseweb.lis.illinois.edu/~stanley8/LIS590DPL/final-project/resume-example-1/resume.html#Qualifications

ANIMATION & FX (CSS)
=======================================================================
SIMPLE beginnings
http://www.webkit.org/blog/138/css-animation/

CSS Gallary – (color swatches) Dark of Black
http://www.cssdrive.com/index.php/main/category/C17/

Using CSS3 Transitions, Transforms and Animation – LEARN BABY
http://css3.bradshawenterprises.com/all/

Cast Shadow from cursor
http://www.zachstronaut.com/lab/text-shadow-box/text-shadow-box.html

CSS animation principals and tools
http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

jflow video tutorial
http://net.tutsplus.com/articles/news/using-the-wonderful-jflow-plugin-screencast/

3D Parallax Painting
http://www.romancortes.com/blog/3d-meninas-explained/

Thumbnail Navigation Gallery
http://tympanus.net/codrops/2010/07/29/thumbnails-navigation-gallery/

Sticky Header (top) – Content scrolls up under transparent header
http://youloveus.co.uk/blog/the-youloveus-scrolling-background-effect-explained/

Sticky Footer (bottom w/ jQuery)
http://www.hardcode.nl/archives_139/article_244-jquery-sticky-footer
Footer using CSS
http://www.alistapart.com/articles/footers/

W3 Schools (try me)
http://www.w3schools.com/css3/css3_transitions.asp

transitions without javascript – REFERENCE
http://www.w3schools.com/css3/css3_transitions.asp

Rebuild Conent w/ a Fade
http://css-tricks.com/dynamic-page-replacing-content/

Frame by Frame Animation
http://www.cssplay.co.uk/menu/css3-animation.html

SCROLLING / SLIDING
===============================================================================
Build a Conent Slider with jQuery
http://brenelz.com/blog/build-a-content-slider-with-jquery/

Anything Slider
http://css-tricks.com/examples/AnythingSlider/

5 Scrolling Content Examples
http://www.noupe.com/design/sliding-content.html

13 “Beautiful jQuery Conent Slider Scripts – COLLECTION
http://webdesignledger.com/tutorials/13-super-useful-jquery-content-slider-scripts-and-tutorials

jQuery – How to animate the scroll
http://designshack.net/articles/html/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll/

“Scrollable” jQuery Toolset
http://flowplayer.org/tools/scrollable/

8 ways to integrate ImageSwitch and jQuery
http://www.hieu.co.uk/blog/index.php/2009/03/21/8-guides-to-apply-jquery-and-imageswitch-in-web-design/

Sliding Content
http://www.queness.com/post/356/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery

jQuery.ScrollTo
http://demos.flesler.com/jquery/scrollTo/

Slideshow
http://www.agilecarousel.com/

SIDEWAYS – Badass Fullscreen Sliding Image Gallery
http://manos.malihu.gr/sideways-jquery-fullscreen-image-gallery

50 more Slideshows! – COLLECTION
http://www.tripwiremagazine.com/2012/01/jquery-carousel.html

jQuery Slide
http://api.jquery.com/category/effects/sliding/

Dynamic Scroll – like google reader’s autoloading content
http://webdeveloperplus.com/jquery/create-a-dynamic-scrolling-content-box-using-ajax/

Scroll Background – ball through trees w/ CSS & Javascript
http://www.storiesinflight.com/html5/backgrounds.html

==============================================================================
JAVASCRIPT ===================================================================
==============================================================================
Datepicker
http://jqueryui.com/demos/datepicker/

ANIMATION (Javascript)
=======================================================================
Rebuild Content via Menu Buttons – jQuery TUTORIAL
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

Rebuilt conent w/ Fade – jQuery TUTORIAL
http://perishablepress.com/slide-fade-content/

Pop-up Speech Bubbles using JQuery
http://demo.marcofolio.net/slick_jquery_css3_menu/default.html

Character Rigging by Anthony Calzadilla
http://www.optimum7.com/internet-marketing/web-development/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html

Excellent examples on fade examples
http://www.hesido.com/web.php?page=javascriptanimation

Tweening examples
http://jstween.blogspot.com/

Dynamics (chain and more)
http://processingjs.org/learning/topic/chain/

FORMS
========================================================================
Top 10
http://www.catswhocode.com/blog/top-10-css-3-forms-tutorials

Simple Purple Login
http://www.threestyles.com/tutorials/css3-login-form-tutorial/

Styling a dropdown
http://danielneumann.com/blog/how-to-style-dropdown-with-css-only/
from this thread: http://stackoverflow.com/questions/1895476/how-to-style-select-dropdown-with-css-only-without-javascript

Better Select Dropdown
http://v2.easy-designs.net/articles/replaceSelect/

24 Ways – Field day with forms
http://24ways.org/2009/have-a-field-day-with-html5-forms

Fun with HTML 5 Forms
http://thinkvitamin.com/code/fun-with-html5-forms/