Friday, October 22, 2010

15 Highly Useful HTML5 Tutorials For Web Designers

Highly useful HTML5 tutorials for Web Designers. I hope these tutorials will help Web Designers to create more beautiful web designs with HTML5. Enjoy!

http://stylishwebdesigner.com/15-highly-useful-html5-tutorials-for-web-designers/?awesm=fbshare.me_AVY1x

Create modern Web sites using HTML5 and CSS3

Since the World Wide Web emerged in the early 1990s, HTML has evolved to become a relatively powerful markup language, which, when backed up by its close partners JavaScript and CSS, can be used to create visually stunning and interactive Web sites and applications. This tutorial serves as a hands-on introduction to HTML5 and CSS3. It provides information about the functionality and syntax for many of the new elements and APIs that HTML5 has to offer, as well as the new selectors, effects, and features that CSS3 brings to the table. Finally, it will show you how to develop a sample Web page that harnesses many of these new features. By the time you have finished this tutorial, you will be ready to build Web sites or applications of your own that are powered by HTML5 and CSS3.

http://www.ibm.com/developerworks/web/tutorials/wa-html5/

Data-driven interactive applications with HTML5 and Ajax

As the number of mobile platforms increases, developing cross-platform standards-based applications becomes increasingly attractive. HTML5 offers the ability to write complete mobile-friendly applications that include offline use, just like their native-application counterparts. Discover how to create offline-capable web applications using only open source tools and techniques familiar to web developers.

http://www.ibm.com/developerworks/opensource/library/os-html5data/index.html?ca=drs

Friday, September 17, 2010

HTML5 Rocks slides - What's new in HTML5

The HTML5 Rocks slides are a great place to learn what's new in HTML5
http://slides.html5rocks.com

Monday, June 21, 2010

Web standards checklist

http://www.maxdesign.com.au/articles/checklist

Free CSS Layouts And Templates

http://www.smashingmagazine.com/2007/01/12/free-css-layouts-and-templates/

Javascript/Ajax Sliders, Scrollers and Scrollbars

http://www.noupe.com/javascript/30-javascriptajax-techniques-for-sliders-scrollers-and-scrollbars.html

CSS-Based Forms: Modern Solutions

http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

http://www.emblematiq.com/lab/niceforms/

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

http://www.1stwebdesigner.com/inspiration/77-inspiring-blog-comment-form-designs-good-examples/

http://www.noupe.com/css/47-excellent-ajax-css-forms.html

http://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/

http://css-tricks.com/tips-for-creating-great-web-forms/

http://socialcmsbuzz.com/40-css-web-form-style-tutorials-for-web-developers-14082008/

http://www.456bereastreet.com/archive/200701/styling_form_controls_with_css_revisited/

Create CSS3 menu absolutely FREE!

http://free-css-menu.com/css-search-box-and-button.html

How to make sexy buttons with CSS

http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Sliding Doors of CSS

http://www.alistapart.com/articles/slidingdoors/

Color shades schemes

http://www.december.com/html/spec/colorshades.html

http://colorschemedesigner.com/

http://www.colorcombos.com/combolibrary.html

http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines

http://www.december.com/html/spec/colorshades.html

Wednesday, April 7, 2010

Design Patterns Library

Open Source Design Pattern Library:
http://uidesignpatterns.org/designPatterns

Yahoo! Design Pattern Library:
http://developer.yahoo.com/ypatterns/

Tuesday, April 6, 2010

Free Online File Compare Utility

Use to compare one file to another. Will show you a visual representation of the file and highlight the differences.

Source: http://www.comparemyfiles.com/default.aspx

Monday, April 5, 2010

20 Email Design Best Practices and Resources for Beginners

http://net.tutsplus.com/tutorials/html-css-techniques/20-email-design-best-practices-and-resources-for-beginners/

Guide to CSS support in email clients

Designing an HTML email that renders consistently across the major email clients can be very time consuming. Support for even simple CSS varies considerably between clients, and even different versions of the same client.

Source: http://www.campaignmonitor.com/css/

Thursday, April 1, 2010

CSS3 Transforms & @font-face Experiment.

http://neography.com/journal/css-transforms-font-face-experiment/

HTML5 - The nsfw element

Among the new semantic elements for section, footer, header and the like, HTML5 also adds an element that can contain any other element and describes it as Not Safe For Work (commonly abbreviated to “nsfw”).

Browsers can be configured by parents, workplace sysadmins never to show content marked as , thereby shielding faint-hearted people from obscenity and protecting employers from employees downloading things they shouldn’t.

It’s not just a presentational element, although it does carry with it the inherent CSS nsfw {display:none;}. The user agent is forbidden from downloading any of the resources contained within the element, if the browser’s setting is “on”.

http://html5doctor.com/the-nsfw-element/

Advanced XML Accordion Menu

http://activeden.net/item/advanced-xml-accordion-menu/95736

Features include:
* XML driven content with over 10 different XML settings to change layout, positioning, colours, dimensions etc. without having to edit the FLA.
* Fully resizeable via XML
* You can have multiple main categories and sub categories.
* Auto open of default item can be toggled via XML
* You can add an external link to the image, or disable with no link.
* All copy is HTML Formatted with built in StyleSheet.
* Special / accent characters supported.
* Instructions manual PDF and comments in the code included.

CSS of the Future: How CSS3 can Optimize Design

http://ryannelsononline.com/css-of-the-future-how-css3-can-optimize-design/

Building a live news blogging system in php. Spiced with HTML5, CSS3 and jQuery [part I]

http://www.webia.info/articles/tutorials/building-a-live-news-blogging-system-in-php-spiced-with-html5-css3-and-jquery-part-i/

25 Flash Portfolio Sites for Your Design Inspiration

http://designm.ag/inspiration/flash-portfolio-sites/

HTML5 Resource: HTML5 Doctor at Advanced CSS Design Resources

http://www.last-child.com/html5-resource-html5-doctor/

What is HTML5?

http://www.dotcominfoway.com/blog/what-is-html5

Best Of Web And Design In March 2010

http://creativenerds.co.uk/news/best-of-web-and-design-in-march-2010/

Middle Box Links

http://css-tricks.com/middle-box-links/

Wednesday, March 31, 2010

How to Target IE6, IE7, and IE8 Uniquely with 4 Characters

body {
color: red; /* all browsers, of course */
color : green\9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

Extreme Form Field Validator

http://forums.cirtexhosting.com/website-development-scripting/7038-extreme-form-field-validator.html

PSD to HTML Part 5

http://www.html5samples.com/2010/03/psd-to-html-part-5/

HTML5 and Embedding

http://blog.castfire.com/2010/03/30/html5-and-embedding/

Use HTML5 in Your BlackBerry Web Content!

http://devblog.blackberry.com/2010/03/use-html5-in-your-blackberry-web-content/

Design Tutorial – HTML 5 Usage

http://addicted2webdesign.com/2010/03/design-tutorial-html-5-usage/

Projekkto: Free Open Source HTML 5 Video Player

http://crenk.com/projekkto-free-open-source-html-5-video-player/

Adobe Dreamweaver CS5 - Smart Paste prototype

http://chadritchie.wordpress.com/2010/03/30/adobe-dreamweaver-cs5-smart-paste-prototype/

CSS3 Generators Write All that Pesky Code for You

http://www.become-web-developer.com/TB/?P=3632

CSS3, please! - CSS3 generator

http://css3please.com/

CSS3 rounded corners for every browser? An alternative quick solution without headache

http://www.become-web-developer.com/TB/?P=390

Joomla Templates

http://siteeditor.net/a/joomla/

5 Handy SEO Hacks for Google Analytics

http://www.searchenginejournal.com/5-handy-seo-hacks-for-google-analytics/19462/

Importance of SEO Optimization In Today’s Era

http://www.articlecity.com/articles/web_design_and_development/article_1981.shtml

40 Excellent Web Design Tutorials for Busy Web Designers

http://www.tripwiremagazine.com/2010/03/40-excellent-web-design-tutorials-for-busy-web-designers.html

New CSS3 Styles: In Depth CSS Part 4

http://spyrestudios.com/css-in-depth-new-css3-styles/

28 Useful JQuery Sliders You Need To Download

http://www.designyourway.net/blog/resources/28-useful-jquery-sliders-you-need-to-download/

Estimating Projects

http://css-tricks.com/estimating-projects/

Resizable interaction in JQuery UI

http://www.c-sharpcorner.com/UploadFile/satisharveti/730/

Design Tutorials - A Little Bit Dirty: Brilliant Grunge Design Tutorials

http://psd.tutsplus.com/articles/web/a-little-bit-dirty-brilliant-grunge-design-tutorials/

CSS3 Border Properties, etc. :: CSS, JavaScript and XHTML Explained

http://www.evotech.net/blog/2010/03/css3-border-properties-etc/

HTML5 new dimensions of web designing

http://vkbhardwaj.blogspot.com/2010/03/html5-new-dimensions-of-web-designing.html

HTML 5: Less than it's cracked up to be

http://www.computerworld.com/s/article/9174323/Opinion_HTML_5_Less_than_it_s_cracked_up_to_be?source=rss_software

How to use HTML5 in your client work right now

http://html5doctor.com/how-to-use-html5-in-your-client-work-right-now/

Tuesday, March 30, 2010

Top 10 Open-Source Platforms to Build Your Own Social Network

http://www.dspotinc.com/index.php/2010/03/29/top-10-open-source-platforms-to-build-your-own-social-network-15/?utm_source=rss&utm_medium=rss&utm_campaign=top-10-open-source-platforms-to-build-your-own-social-network-15

eBook - PHP Solutions: Dynamic Web Design Made Easy

http://www.ebookinfo.net/2010/03/php-solutions-dynamic-web-design-made.html

SEO Doctor: New Firefox add-on

http://sphinn.com/story/146020/

http://www.prelovac.com/vladimir/browser-addons/seo-doctor

Why Updating Your Browser is Important

http://www.site-seeker.com/_blogs/updating-browser-important/

New CSS3 Styles - In Depth CSS Part 4

http://interactiveonline.com/web-design/in-depth-css-part-4-new-css3-styles

The power of CSS3

http://ebiinterfaces.wordpress.com/2010/03/29/the-power-of-css3/

CSS3 Gradient Background

http://www.naprej.com/css3_gradient_background

Website Security Testing Software Websecurify

http://www.ghacks.net/2010/03/29/website-security-testing-software-websecurify/

Do Your Visitors Understand What Your Website Is All About?

http://www.fresheventure.com/3375/what-is-your-website-about/

How to create your own single page portfolio design in photoshop

http://www.tuttoaster.com/create-your-own-single-page-portfolio-in-photoshop/

70 Must-Have CSS3 and HTML5 Tutorials and Resources

http://www.webappers.com/2009/08/10/70-must-have-css3-and-html5-tutorials-and-resources/

The Truth About CSS 3

http://speechsource.gulflike.com/the-truth-about-css-3/

Does HTML5 Mean the End of Flash?

http://www.hostway.com/web-resources/diy/online-video/does-html5-mean-the-end-of-flash/

101 Best HTML5 sites

http://101besthtml5sites.com/

HTML 5 Demos and Examples

http://html5demos.com/

html5 forms - interesting form types

http://www.shinstudio.com/blog/frontend-tech/html5-forms/

5 Best Free PHP Image Gallery Scripts

http://www.designfollow.com/resources/5-best-free-php-image-gallery-scripts/

Successful Web Designers

http://www.crearedesign.co.uk/blog/web-designers/successful-web-designers.html

500 Templates Online, try it

http://www.freewebsitetemplates.com/forum/f23/500-templates-online-try-13403/

25+ Most Popular Free Flash XML Photo Galleries

http://djdesignerlab.com/2010/03/16/25-most-popular-free-flash-xml-photo-galleries/

Improve Your Page Performance

http://www.htmlcenter.com/blog/improve-your-page-performance/

Remove All Stylesheets from a Page using jQuery

http://www.devcurry.com/2010/03/remove-all-stylesheets-from-page-using.html

How to Target IE6, IE7, and IE8 Uniquely with 4 Characters

http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

Monday, March 29, 2010

Photoshop Tutorials

http://www.photoshoplady.com/photoshop-tutorial

CSS2 Essential Training in CD - Lynda.com

http://www.mafiasoftware.com/11840/lynda-com-css2-essential-training.php

5 Excellent Footer Design Tutorials

http://skyje.com/2010/03/5-excellent-footer-design-tutorials/

10 Awesome Tools to Boost Your Productivity

http://www.1stwebdesigner.com/personal/awesome-tools-boost-productivity/

Links For SEO Explained – Which Ones Matter, and Why

http://www.passport2riches.ws/links-for-seo-explained-which-ones-matter-and-why/

Have You Heard These SEO Myths?

http://www.seoconsult.co.uk/SEOBlog/search-engine-optimization-advice/have-you-heard-these-seo-myths.html

How To - General tips for posting images/videos

http://a.parsons.edu/~zeravivm/s10/osd/how-to/

YUI3 and a quiet revolution.

http://andrewwooldridge.com/blog/2010/03/27/yui3-and-a-quiet-revolution/

HTML5 video player

http://urbanlistening.wordpress.com/2010/03/28/projekktor-zwei-html5-video-player/

HTML5 and the implications for SEO

http://www.manuallinkbuilding.co.uk/blog/seo/html5-and-the-implications-for-seo/

Single-Line vs Multi-Line CSS, plus TextMate tips

http://neutroncreations.com/blog/single-line-vs-multi-line-css-plus-textmate-tips/

One Extension. Multiple Applications. Magic Launch Does. Review and Giveaway!

http://www.macstories.net/reviews/magic-launch/

jQuery Simple WYSIWYG Editor

http://de77.com/javascript/jquery-simple-wysiwyg-editor

Internet Explorer 9

http://aneeshunikrishnan.wordpress.com/2010/03/28/internet-explorer-9/

Browser Wars

http://jdudesign.com/?p=522

FlexPaper: Open Source Document Viewer For Websites

http://www.artviper.net/wp/2010/03/open-source-document-viewer-for-websites-flexpaper/

Adobe Creative Suite CS5

http://www.lucascobb.com/adobe-creative-suite-cs5/

Customize Your Desktop With Rainmeter

http://windows7news.com/2010/03/28/customize-your-desktop-with-rainmeter/

15 jQuery Plugins to Enhance Your Web Forms

http://grindsmart.com/2010/03/15-jquery-plugins-to-enhance-your-web-forms/

Friday, March 26, 2010

FONTS - 30 Beautiful Handwritten Fonts

http://www.webdesignbooth.com/30-beautiful-handwritten-fonts/

SEO - 8 Link Building Strategies (from Matt Cutts)

http://www.maine-seo.com/expert-advice/8-link-building-strategies-from-matt-cutts

SEO 101 - Part 14: Everything You Need to Know About Link Anatomy

http://www.searchengineguide.com/stoney-degeyter/seo-101-part-14-everything-you-need-to-k.php

[Video] To SEO or not to SEO? ;-)

http://ivanasendecka.com/2010/03/25/on-seo2-0/

3 Free Online SEO Tools for Keyword Research

http://www.shoutmeloud.com/3-free-online-seo-tools-for-keyword-research.html

SEO has a funny side too!

http://www.emarketingtrends.co.za/2010/03/seo-has-a-funny-side-too/

12 Great jQuery Plugins to Fully Control Styling of Your HTML Form Elements

http://www.tripwiremagazine.com/2010/03/12-great-jquery-plugins-to-fully-control-styling-of-your-html-form-elements.html

19 css html calendars for your next web application

http://www.webdeveloperjuice.com/2010/03/25/19-css-html-calendars-for-your-next-web-application/

html5 and css3-part1

http://best2blogger.blogspot.com/2010/03/html5-and-css3-part-1.html

HTML5 and CSS3 check list

http://www.findmebyip.com/litmus/#target-selector

Top 10 Recommended Sites for Design Related Articles promotion

http://www.thedesignbuzz.net/top-10-recommended-sites-for-design-related-articles-promotion/

HTML5 and CSS3 Template

http://freehtml5templates.com/superfishle-html5-and-css3-template/

The Future of Web Design is…?

http://www.webdesignkc.co.uk/blog/web-design/future-of-web-design-is.php

Colorful Sliders With jQuery & CSS3

http://tutorialzine.com/2010/03/colorful-sliders-jquery-css3/

HTML5 or Flash?

http://www.livecitizen.com/2010/03/html5-flash/

Friday, February 12, 2010

iPhone based WEB development

Tutorial - Building a website for the iPhone:
http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/

DocType for the most accessbile / mobile / cross browser site:
http://www.talkphp.com/xhtml-html-css/3872-doctype-most-accessbile-mobile-cross-browser-site.html

iPhone 3G tester - online website test emulator with flip:
http://www.iphonetester.com/

iWebKit the Best free framework for creating iPhone, iPod Touch and iPad web applications with ease!:
http://iwebkit.net/

How do I design web pages for the iPhone?
http://www.boutell.com/newfaq/creating/iphone.html

Make Website and WebApp Compatible with iPhone and Blackberry:
http://www.mydigitallife.info/2007/07/12/make-website-and-webapp-compatible-with-iphone-and-blackberry/

How to Write Web Pages for the iPhone and Other Wireless Devices:
http://webdesign.about.com/od/mobile/a/write-web-pages-for-the-iphone.htm

Get to know the QueryPath PHP library:
http://www.ibm.com/developerworks/opensource/library/os-php-querypath/index.html?S_TACT=105AGX44&S_CMP=EDU

A jQuery plugin for mobile web development on the iPhone, iPod Touch, and other forward-thinking devices.
http://www.jqtouch.com/

Will keep adding on.. ENJOYEE!!

Wednesday, January 20, 2010

Create a Lightbox effect only with CSS – no javascript needed

You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect.

When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fades the pagein the background to show you new content in the foreground.

Courtesy: http://www.emanueleferonato.com/2007/08/22/create-a-lightbox-effect-only-with-css-no-javascript-needed/

You tube video / menu appears on top, everything else behind

Lightbox / Thickbox / Menu disappears behind flash you tube video [fixed]

* Straight after the Object tag of your video code, place the following snippet:
<param name="WMode" value="transparent"></param>
* Just before the type=”application/x-shockwave-flash” place the following code:
wmode="transparent"

Courtesy: http://www.voodish.co.uk/articles/lightbox-thickbox-menu-disappears-behind-flash-you-tube-video-fixed/

CSS Image Maps: A Beginner’s Guide

While they may not be used as often as they once were in the heyday of table based web design, image maps can still be quite useful in situations that call for it. Unfortunately, for beginners, achieving this with CSS alone, can be a difficult concept to grasp.

In this tutorial, we're not only going to get you up to speed on how to create a CSS image map, but, we're also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a "tooltip" like popup.

http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

Tuesday, January 5, 2010

5 Must Read Presentations about CSS Coding

If you are looking for documentation to improve your CSS skills I suggest you to take a look at the following 5 must read presentations about CSS coding. The following presentations help you learn how to write efficient and maintainable CSS code, understand secrets of CSS inheritance, line-height and CSS System approach (a practical way to write high-quality, reusable CSS code with a shared vocabulary for developers), learn Object Oriented CSS in order to develop high performance web applications and websites. Good reading!

http://woorkup.com/2009/10/31/5-must-read-presentations-about-css-coding/

ecsstender - Take control of your CSS

Say goodbye to the browser-specific properties and hacks cluttering your files and say hello to lean, mean CSS. With eCSStender, when you write the rules, browsers pay attention.

http://ecsstender.org/

Introduction to CSS3 – Part 1: What Is It?

This article marks the first of several, providing an introduction to the new CSS3 standard which is set to take over from CSS2. We will be starting from the very beginning – taking you from not having even heard of CSS3, to feeling ready to hit it running as various features start to become more widely adopted.

http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it

Take Your Design To The Next Level With CSS3

Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it’s clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can’t we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?

It’s time to introduce CSS3 features into our projects and not be afraid to gradually incorporate CSS3 properties and selectors in our style sheets. Making our clients aware of the advantages of CSS3 (and letting older deprecated browsers fade away) is in our power, and we should act on it, especially if it means making websites more flexible and reducing development and maintenance costs.

In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.

http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/

50 Fresh Useful Icon Sets For Your Next Design

Beautiful and free icon sets always come in handy. Used properly and moderately, icons can be helpful to provide users with memorable metaphors and illustrations that would provide a visual support for otherwise unspectacular text blocks. For instance, in web-applications memorable icons can be very helpful as they can make it easier for users to memorize how to perform some specific task or where to find some specific functions.

This large collection of recently released icon sets is supposed to help designers improve their designs on their web-sites and in web-applications. All icon sets are free. Please read the license agreements carefully before using the icons — the license can change from time to time. The icons provided below may turn out to be useful and helpful in corporate designs, portfolios, blogs, magazines and in Web-applications. Please feel free to suggest more icon sets in the comments to this post.

http://www.smashingmagazine.com/2009/06/07/50-fresh-useful-icon-sets-for-your-next-design/

Coding A HTML 5 Layout From Scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.

http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/