Jer's Life

Personal Brain Dump

Show menu Hide menu

Taglearn

How I Learned HTML & CSS

2013/04/04 / / 0 Comments

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/

Form Validation
http://www.tizag.com/javascriptT/javascriptform.php

Dropdown conent tutorial
http://www.dhtmlgoodies.com/index.html?whichScript=show_hide_content_slide

dropdown login menu
http://web-kreation.com/all/nice-clean-sliding-login-panel-built-with-jquery/

Beautiful Forms
http://www.noupe.com/php/beautiful-forms.html

UI Wireframes
http://www.smashingmagazine.com/2010/02/05/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files/

Learning Web Development

2012/02/08 / / 0 Comments

JavaScript: The Definitive Guide Dive Into Python - FREE downloadPython Programming for the Absolute Beginner HTML, XHTML, and CSS (Visual Quickstart Guide)

I have made a few web pages in my life, but most are pretty darn simple with minimal code snippets. I’ve built a skeleton database using MySQL and PHP. I have set up phpBB, Drupal and WordPress sites, hacking them in order to get them functioning the way I need. However, I haven’t had the chance to really “build a website”, at least not by my own definitions. Well, this has got to change now, as I’m a little tired of hacking templates to get them to do what I need. As much as I would like to focus strictly on my graphics work, the world won’t let me… for now.

So begins the geek streak.

I’ve started reading this HTML, XHTML & CSS Visual Quickstart Guide that I picked up at the local thrift store. It was published in 2007 so I’m sure that some of the information is outdated, but most is still valid. I’m about half way through it and it’s helped solidify my pretty loose knowledge of CSS. Once in awhile, I put the book and my highlighter down in order to verify some stuff on the computer. HTML5 is something I keep referring to, in order to compare to XHTML. Trying to get a feel for what the future holds.

Boilerplate appears to be a good template of standards to start with. There’s some HTML5 code examples out there and even a test site that gives your browser a ranking based on the number of HTML5 features available.

I think that once I finish with the boilerplate demo video below, I will walk through this code demonstration of common HTML5 techniques.

Nature By Numbers – The Magic Spiral.

2010/06/23 / / 0 Comments

Some are familiar with the Fibonacci sequence, but if you’re not, I can’t think of a better example of it’s existence in nature.

Venom’s Lab – Blender Training DVD Teaser

2009/11/07 / / 3 Comments

Did my bi-yearly check on Blender to see if a simplified customizable interface has been implemented yet. Looks like another open source movie is also in the works.  This one’s called Durian…   like the funky/stinky pod fruit**?  No associate intended, I hope.

Blender has some training DVDs coming that look presented, assuming as much work was put into the DVDs as was put into this trailer.  Venom’s Lab – Training DVD Teaser from Pablo Vazquez on Vimeo.

** I’ve had the durian fruit a few times.  It STINKS…  but tastes amazing.

Daily Digest – 2009-01-26

2009/01/26 / / 1 Comment
  • Video Jug – Life Explained On Film: Lots of great educational videos here, from explanations on meditation to how to share a bed. –  # 

Learn Sign Language w/ Vid-ucate

2008/07/20 / / 0 Comments

I find this funny… yet insightful… but mostly funny. A benefit of working with animators, who couldn’t help but find this amusing, and thus shared it with me immediately.

© 2024 Jer's Life

Theme by Anders Noren — Up ↑