Skip to content

A Comprehensive CSS Development Guide For Beginners & Experts

January 18, 2010

I have been lately exploring CSS & JavaScript techniques which can add value to the frontend development, I have compiled a decent kick-start-list for the CSS techniques which are must know for frontend developers.

Before we begin, I would like to bring CSS Zen Garden to everyone’s notice, it is a very popular site for CSS developers, but, yet … only half of the people know that this site is a reference point of the capabilities CSS has, that is, here people go and upload their sample website built with CSS, which gives a ready reckoner for other to go and see a showcase of CSS capabilities and also quickly adopt a CSS closest to their requirement. Other than that, CssGlobe and scriptandstyle are great resource for latest news / tips & tricks article published in multiple of the places, and this place has some PSD to XHTML tutorial video’s. Codecake and noupe article talks about some advance topics such as classes, cross browser tags, image replacement, mobile style sheets, CSS Overflow, fluid grids etc, and this talks about some SEO Tips for CSS developers. Also check out WebDesignerDepot and Smashing Magazine, they both churn out some CSS tips occasionally.

Cutting short on all the jargon; here is the quickest list of tutorials, libraries I found on the net which can work as a one stop reference point for CSS developers;

To start with, here is a quick guide to do some most common things in CSS… and here is the quickest CSS code for most common layout types. CSS Sandbox is a good place if you are a beginner, it shows a comprehensive list of text styling properties and combination upfront to try it out and download. Also, if you prefer to code from scratch, this, this, this and this seems like good articles to clear your basics. Here are some very basic guidelines for writing a decent CSS code. I like this article for some expert advices on CSS Shorthand Techniques.

When it comes to stylizing forms, this seems like a good article. Also, check this as an alternative source and this article with JavaScript styles.

If you are working with lists, check this link, it looks like a good comprehensive list of lists CSS examples.

Check this nice ready to use classes for the Comment section of your blog or website, and a ready to use Message Box CSS.

Spiffy Corner gives you a wizard to quick build your corner box CSS.

For those who are looking for Facebook like image tagging, this is a nice elaborated article from ccplay.co.uk. Also check this alternative tutorial.

For animated progress bar via CSS, download ready to use code here.

CSS Menu Maker is a good place to kickstart your CSS Navigation Menu’s, also check this simplest example for pure CSS menus.

This article demonstrates 9 techniques for CSS image replacement, and gives a report card too for the browser support.

This small code snippet demonstrates how to do image rollover on mouse over without using JavaScript. And here is one advance post on the CSS technique used, i.e., CSS Sprites.

You may want to grab this code for showing file extension icons.

Font Tester is a must check for every CSS lover, it’s a simplistic tool for generating your font style CSS code without coding it. I loved the character map here, but would have loved it more if we could upload our fonts for it to generate image replacement codes for sIFR or EOT files for it. Never mind, you can use sIFR Generator to do the same. Also check out image caption class out here.

And if you are working with CSS Tabs, check this good reference point .

For Shadows, check this ready to use examples & codes.

This place gives whole list of cursors you can use with CSS.

Here is a place where you can learn how to create graphs using CSS.

If you are looking for CSS Bubble Tool Tip, grab it here, and here.

And I like this RSS Coloring Technique as well .. its kinda cool.

And, if you are thinking of customizing your wordpress theme, this seems like a good kick start guide.

Above all, don’t forget to Validate Your CSS. And if you are not using Dreamweaver, grab your copy of this free software which will help you code CSS in a better way.

And finally check out what others are doing at bestwebgallery.

Sigh, I need to breathe, enough of this-this-this kinda list … guess my this post was breathless, but hope it’s useful. :)

Advertisements
No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: