{"id":3692,"date":"2013-04-04T16:54:48","date_gmt":"2013-04-04T20:54:48","guid":{"rendered":"http:\/\/www.jerslife.com\/word\/?p=3692"},"modified":"2013-04-04T16:56:48","modified_gmt":"2013-04-04T20:56:48","slug":"how-i-learned-html-css","status":"publish","type":"post","link":"http:\/\/www.jerslife.com\/word\/how-i-learned-html-css","title":{"rendered":"How I Learned HTML & CSS"},"content":{"rendered":"

TO DO ———————————————<\/p>\n

===============================================================================
\nZen Coding for Aptana
\nhttp:\/\/coding.smashingmagazine.com\/2009\/11\/21\/zen-coding-a-new-way-to-write-html-code\/<\/a><\/p>\n

RESPONSIVE WEB DESIGN (priceless roundup)
\nhttp:\/\/www.mayfielddigital.co.uk\/blog\/web-round-up\/best-responsive-web-design-examples-and-resources\/<\/a><\/p>\n

Fluid Design Examples w\/ Media Queries
\nhttp:\/\/zomigi.com\/blog\/examples-of-flexible-layouts-with-css3-media-queries\/<\/a><\/p>\n

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

TOOLS & Reference
\n==============================================================================
\nBenzier Curve Builder – Animation Ease-In \/ Ease-Out
\nhttp:\/\/www.roblaplaca.com\/examples\/bezierBuilder\/<\/a><\/p>\n

CSS \/ HTML Playground
\nhttp:\/\/dabblet.com\/<\/a><\/p>\n

HTML Outliner – Give URL or Upload File to get Outline of page
\nhttp:\/\/gsnedders.html5.org\/outliner\/<\/a><\/p>\n

Fonts – Web Safe
\nhttp:\/\/www.ampsoft.net\/webdesign-l\/WindowsMacFonts.html<\/a><\/p>\n

css transition timing – REFERENCE *GREAT*
\nhttp:\/\/www.the-art-of-web.com\/css\/timing-function\/<\/a><\/p>\n

Chroma Color Picker & Saver
\nhttp:\/\/lucumalabs.com\/chroma\/#50964a<\/a><\/p>\n

MOBILE
\n==============================================================================
\n45 Design Templates
\nhttp:\/\/www.1stwebdesigner.com\/inspiration\/mobile-web-designs-show-future-trends\/<\/a><\/p>\n

Website design for mobiles
\nhttp:\/\/blog.savvydog.com\/?p=60<\/a><\/p>\n

==============================================================================
\nHTML =========================================================================
\n==============================================================================
\nStructures: div, section, article
\nhttp:\/\/oli.jp\/2009\/html5-structure1\/<\/a><\/p>\n

Smartphone Screens Resolutions
\nhttp:\/\/cartoonized.net\/cellphone-screen-resolution.php<\/a><\/p>\n

HTML Dog’s Guides on HTML and CSS
\nhttp:\/\/www.htmldog.com\/guides\/<\/a><\/p>\n

==============================================================================
\nCSS ==========================================================================
\n==============================================================================
\nSM – CSS3 Learning Guide
\nhttp:\/\/www.smashingmagazine.com\/learning-css3-useful-reference-guide\/<\/a>
\nSM – Mastering CSS Principals
\nhttp:\/\/www.smashingmagazine.com\/mastering-css-principles-comprehensive-reference-guide\/<\/a>
\n45 Powerful CSS \/ Javascript Techniques – TUTORIALS
\nhttp:\/\/coding.smashingmagazine.com\/2010\/01\/12\/45-powerful-css-javascript-techniques\/<\/a>
\nDesigner Web Trends\u00a0 (parallax scrolling,
\nhttp:\/\/webdesignledger.com\/tips\/web-design-trends-in-2011<\/a>
\nFluid Layout (relative to default font)
\nhttp:\/\/www.alistapart.com\/articles\/fluidgrids\/<\/a>
\nLukeW – Multi-Device Layout Patterns
\nhttp:\/\/www.lukew.com\/ff\/entry.asp?1514<\/a><\/p>\n

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

Responsive Design Examples
\nhttp:\/\/mediaqueri.es\/<\/a><\/p>\n

Progressively Enhancing HTML5 (setup Fallbacks)
\nhttp:\/\/css-tricks.com\/progressively-enhancing-html5-forms\/<\/a><\/p>\n

CSS Menu – using Hover and Position
\nhttp:\/\/www.noobcube.com\/tutorials\/html-css\/create-an-advanced-css-menu-using-the-hover-and-position-properties-\/<\/a><\/p>\n

Inline Blocks
\nhttp:\/\/www.search-this.com\/2008\/08\/28\/lets-all-get-inline-in-a-block-in-a-block\/<\/a>
\nThe Display Declaration
\nhttp:\/\/www.quirksmode.org\/css\/display.html<\/a><\/p>\n

Horizontal Centering
\nhttp:\/\/haslayout.net\/css-tuts\/Horizontal-Centering<\/a>
\nVertical Centering Methods
\nhttp:\/\/www.vanseodesign.com\/css\/vertical-centering\/<\/a>
\nInline Blocks and Why it Sucks
\nhttp:\/\/robertnyman.com\/2010\/02\/24\/css-display-inline-block-why-it-rocks-and-why-it-sucks\/<\/a><\/p>\n

Positioning
\nhttp:\/\/www.barelyfitz.com\/screencast\/html-training\/css\/positioning\/<\/a>
\nhttp:\/\/www.brainjar.com\/css\/positioning\/default.asp<\/a><\/p>\n

Rounded Corners – REFERENCE – including using images
\nhttp:\/\/www.w3.org\/TR\/css3-background\/#corner-shaping<\/a>
\nhttp:\/\/www.css3.info\/preview\/rounded-border\/<\/a><\/p>\n

Lists – Stylized – REFERENCE
\nhttp:\/\/www.marcofolio.net\/css\/8_different_ways_to_beautifully_style_your_lists.html<\/a>
\nSelectors – Advanced (good for dynamic lists in forms – REFERENCE
\nhttp:\/\/sixrevisions.com\/css\/3-advanced-css3-techniques-you-should-learn\/<\/a>
\nMulti-Columns – CSS and Javascipt Alternative for IE – REFERENCE
\nhttp:\/\/www.csscripting.com\/css-multi-column\/<\/a><\/p>\n

Speech Bubbles & Killer Buttons
\nhttp:\/\/webitect.net\/design\/designtutorials\/6-smashingly-practical-css3-effects-you-can-use-right-now\/<\/a><\/p>\n

Animated pop out Button
\nhttp:\/\/designshack.net\/articles\/css\/downloadbutton\/<\/a><\/p>\n

STYLE GUIDES
\n===============================================================================
\nhttp:\/\/paulrobertlloyd.com\/about\/styleguide\/<\/a>
\nhttp:\/\/oli.jp\/2011\/style-guide\/<\/a><\/p>\n

Color Guide w\/ thumbnail preview of color story
\nhttp:\/\/www.cssdrive.com\/index.php\/main\/category\/C17\/<\/a><\/p>\n

STYLES – RESUME
\n===============================================================================
\n6 Professional Looking CV\/Resume Web Templates
\nhttp:\/\/www.bitrepository.com\/professional-looking-cv-resume-web-templates.html<\/a><\/p>\n

40 Paid CVs (nice reference)
\nhttp:\/\/www.1stwebdesigner.com\/freebies\/resume-cv-templates\/<\/a><\/p>\n

Jason has a pretty example
\nhttp:\/\/www.brianjaystanley.com\/LIS\/resume<\/a><\/p>\n

Another minimal one
\nhttp:\/\/courseweb.lis.illinois.edu\/~stanley8\/LIS590DPL\/final-project\/resume-example-1\/resume.html#Qualifications<\/a><\/p>\n

ANIMATION & FX (CSS)
\n=======================================================================
\nSIMPLE beginnings
\nhttp:\/\/www.webkit.org\/blog\/138\/css-animation\/<\/a><\/p>\n

CSS Gallary – (color swatches) Dark of Black
\nhttp:\/\/www.cssdrive.com\/index.php\/main\/category\/C17\/<\/a><\/p>\n

Using CSS3 Transitions, Transforms and Animation – LEARN BABY
\nhttp:\/\/css3.bradshawenterprises.com\/all\/<\/a><\/p>\n

Cast Shadow from cursor
\nhttp:\/\/www.zachstronaut.com\/lab\/text-shadow-box\/text-shadow-box.html<\/a><\/p>\n

CSS animation principals and tools
\nhttp:\/\/coding.smashingmagazine.com\/2011\/09\/14\/the-guide-to-css-animation-principles-and-examples\/<\/a><\/p>\n

jflow video tutorial
\nhttp:\/\/net.tutsplus.com\/articles\/news\/using-the-wonderful-jflow-plugin-screencast\/<\/a><\/p>\n

3D Parallax Painting
\nhttp:\/\/www.romancortes.com\/blog\/3d-meninas-explained\/<\/a><\/p>\n

Thumbnail Navigation Gallery
\nhttp:\/\/tympanus.net\/codrops\/2010\/07\/29\/thumbnails-navigation-gallery\/<\/a><\/p>\n

Sticky Header (top) – Content scrolls up under transparent header
\nhttp:\/\/youloveus.co.uk\/blog\/the-youloveus-scrolling-background-effect-explained\/<\/a><\/p>\n

Sticky Footer (bottom w\/ jQuery)
\nhttp:\/\/www.hardcode.nl\/archives_139\/article_244-jquery-sticky-footer<\/a>
\nFooter using CSS
\nhttp:\/\/www.alistapart.com\/articles\/footers\/<\/a><\/p>\n

W3 Schools (try me)
\nhttp:\/\/www.w3schools.com\/css3\/css3_transitions.asp<\/a><\/p>\n

transitions without javascript – REFERENCE
\nhttp:\/\/www.w3schools.com\/css3\/css3_transitions.asp<\/a><\/p>\n

Rebuild Conent w\/ a Fade
\nhttp:\/\/css-tricks.com\/dynamic-page-replacing-content\/<\/a><\/p>\n

Frame by Frame Animation
\nhttp:\/\/www.cssplay.co.uk\/menu\/css3-animation.html<\/a><\/p>\n

SCROLLING \/ SLIDING
\n===============================================================================
\nBuild a Conent Slider with jQuery
\nhttp:\/\/brenelz.com\/blog\/build-a-content-slider-with-jquery\/<\/a><\/p>\n

Anything Slider
\nhttp:\/\/css-tricks.com\/examples\/AnythingSlider\/<\/a><\/p>\n

5 Scrolling Content Examples
\nhttp:\/\/www.noupe.com\/design\/sliding-content.html<\/a><\/p>\n

13 “Beautiful jQuery Conent Slider Scripts – COLLECTION
\nhttp:\/\/webdesignledger.com\/tutorials\/13-super-useful-jquery-content-slider-scripts-and-tutorials<\/a><\/p>\n

jQuery – How to animate the scroll
\nhttp:\/\/designshack.net\/articles\/html\/how-to-link-to-specific-points-in-a-page-and-animate-the-scroll\/<\/a><\/p>\n

“Scrollable” jQuery Toolset
\nhttp:\/\/flowplayer.org\/tools\/scrollable\/<\/a><\/p>\n

8 ways to integrate ImageSwitch and jQuery
\nhttp:\/\/www.hieu.co.uk\/blog\/index.php\/2009\/03\/21\/8-guides-to-apply-jquery-and-imageswitch-in-web-design\/<\/a><\/p>\n

Sliding Content
\nhttp:\/\/www.queness.com\/post\/356\/create-a-vertical-horizontal-and-diagonal-sliding-content-website-with-jquery<\/a><\/p>\n

jQuery.ScrollTo
\nhttp:\/\/demos.flesler.com\/jquery\/scrollTo\/<\/a><\/p>\n

Slideshow
\nhttp:\/\/www.agilecarousel.com\/<\/a><\/p>\n

SIDEWAYS – Badass Fullscreen Sliding Image Gallery
\nhttp:\/\/manos.malihu.gr\/sideways-jquery-fullscreen-image-gallery<\/a><\/p>\n

50 more Slideshows!\u00a0 – COLLECTION
\nhttp:\/\/www.tripwiremagazine.com\/2012\/01\/jquery-carousel.html<\/a><\/p>\n

jQuery Slide
\nhttp:\/\/api.jquery.com\/category\/effects\/sliding\/<\/a><\/p>\n

Dynamic Scroll – like google reader’s autoloading content
\nhttp:\/\/webdeveloperplus.com\/jquery\/create-a-dynamic-scrolling-content-box-using-ajax\/<\/a><\/p>\n

Scroll Background – ball through trees w\/ CSS & Javascript
\nhttp:\/\/www.storiesinflight.com\/html5\/backgrounds.html<\/a><\/p>\n

==============================================================================
\nJAVASCRIPT ===================================================================
\n==============================================================================
\nDatepicker
\nhttp:\/\/jqueryui.com\/demos\/datepicker\/<\/a><\/p>\n

ANIMATION (Javascript)
\n=======================================================================
\nRebuild Content via Menu Buttons – jQuery TUTORIAL
\nhttp:\/\/net.tutsplus.com\/tutorials\/javascript-ajax\/how-to-load-in-and-animate-content-with-jquery\/<\/a><\/p>\n

Rebuilt conent w\/ Fade – jQuery TUTORIAL
\nhttp:\/\/perishablepress.com\/slide-fade-content\/<\/a><\/p>\n

Pop-up Speech Bubbles using JQuery
\nhttp:\/\/demo.marcofolio.net\/slick_jquery_css3_menu\/default.html<\/a><\/p>\n

Character Rigging by Anthony Calzadilla
\nhttp:\/\/www.optimum7.com\/internet-marketing\/web-development\/pure-css3-spiderman-ipad-cartoon-jquery-html5-no-flash.html<\/a><\/p>\n

Excellent examples on fade examples
\nhttp:\/\/www.hesido.com\/web.php?page=javascriptanimation<\/a><\/p>\n

Tweening examples
\nhttp:\/\/jstween.blogspot.com\/<\/a><\/p>\n

Dynamics (chain and more)
\nhttp:\/\/processingjs.org\/learning\/topic\/chain\/<\/a><\/p>\n

FORMS
\n========================================================================
\nTop 10
\nhttp:\/\/www.catswhocode.com\/blog\/top-10-css-3-forms-tutorials<\/a><\/p>\n

Simple Purple Login
\nhttp:\/\/www.threestyles.com\/tutorials\/css3-login-form-tutorial\/<\/a><\/p>\n

Styling a dropdown
\nhttp:\/\/danielneumann.com\/blog\/how-to-style-dropdown-with-css-only\/<\/a>
\nfrom this thread: http:\/\/stackoverflow.com\/questions\/1895476\/how-to-style-select-dropdown-with-css-only-without-javascript<\/a><\/p>\n

Better Select Dropdown
\nhttp:\/\/v2.easy-designs.net\/articles\/replaceSelect\/<\/a><\/p>\n

24 Ways – Field day with forms
\nhttp:\/\/24ways.org\/2009\/have-a-field-day-with-html5-forms<\/a><\/p>\n

Fun with HTML 5 Forms
\nhttp:\/\/thinkvitamin.com\/code\/fun-with-html5-forms\/<\/a><\/p>\n

Form Validation
\nhttp:\/\/www.tizag.com\/javascriptT\/javascriptform.php<\/a><\/p>\n

Dropdown conent tutorial
\nhttp:\/\/www.dhtmlgoodies.com\/index.html?whichScript=show_hide_content_slide<\/a><\/p>\n

dropdown login menu
\nhttp:\/\/web-kreation.com\/all\/nice-clean-sliding-login-panel-built-with-jquery\/<\/a><\/p>\n

Beautiful Forms
\nhttp:\/\/www.noupe.com\/php\/beautiful-forms.html<\/a><\/p>\n

UI Wireframes
\nhttp:\/\/www.smashingmagazine.com\/2010\/02\/05\/50-free-ui-and-web-design-wireframing-kits-resources-and-source-files\/<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[43,79,439],"class_list":["post-3692","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-design","tag-learn","tag-website"],"_links":{"self":[{"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/posts\/3692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/comments?post=3692"}],"version-history":[{"count":5,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/posts\/3692\/revisions"}],"predecessor-version":[{"id":3697,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/posts\/3692\/revisions\/3697"}],"wp:attachment":[{"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/media?parent=3692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/categories?post=3692"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.jerslife.com\/word\/wp-json\/wp\/v2\/tags?post=3692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}