In this post, I’ll be featuring CSS cheat sheets for designers that will be helpful for you.

1. CSS 3 Cheat Sheet

2. CSS Cheat Sheet V2

3. liquidicity CSS Help Sheet

4. Blueprint CSS Cheat Sheet

5.CSS Cheat Sheet

6. Practical CSS Cheat Sheet

7. CSS Shorthand Cheat Sheet

8. CSS Properties And Values

9. idea3 Cheat Sheet

10. Liberty Boy: CSS Style Sheet Quick Reference

11. CSS Specificity- Cheat Sheet

12. CSS Shorthand Cheat Sheet

13. CSS Cheat Sheets

14. CSS3 Click Chart

15. Design 215 : CSS Quick Reference Guide

16. Cogeco : CSS Quick Reference Guide

17. Digilife : Cascading Style Sheets Level 1 properties Cheat Sheet

18. Dev Guru : CSS Quick Reference Guide

19. Dustin Diaz: CSS Shorthand Guide

20. DZone : Core CSS: Part I

21. HTML Primer : CSS Cheatsheet

22. Ian Graham : CSS Level 1 and CSS-P Quick Reference Charts

23. IFSkinZone: CSS Cheat Sheet (HTML)

24. Javascript Kit: CSS Reference Guide

25. KillerSites : HTML and CSS Codes

26. NHS Designs: CSS and Web Design Cheat Sheet

27. Tag Index : CSS and HTML Cheats and Codes

28. W3Schools CSS2 Reference

These things should be come in handy. Hope it will help you in your web designs.

I’ll be presenting free CSS/HTML templates that you want to consider in your next project but be sure to read terms.

1. Blue Jeans

Stand out from the crowd with this cool, free template for a portfolio website based on blue jeans texture.

( Demo | Download )

2. Portfolio

CSS Heaven Portfolio is yet another free HTML 5 and CSS based website template suitable for businesses. This template has a jQuery slide show in the home page header for displaying your latest work, featured contents or can also be used to tell your visitor what your web site is all about. All the fonts used for the template are included in a folder.

( Demo | Download )

3. High Five

The style elements are in the CSS including styles for Blog, Comment Templates etc.

( Demo | Download )

4. RS 18

This is designed mainly for business because of the blue color that looks professional.

( Demo| Download )

5. Dandoot

DangDoot is a WordPress e-commerce theme that it is suitable mostly for major/indie music recording companies, bands, musicians, music products affiliates, music event organizers or simply online music stores.

( Demo | Download )

6. Bamboo

Bamboo is a free CSS Template suitable for small business websites and blogs.

( Demo| Download )

7. Acallia

If your into art, photography or anything related to designs it will fit on you.

( Demo | Download )

8.Reinvent

One column layout that has ac lean and cool typography with minimal image design.

( Demo | Download )

9. Alexx C

Elegant and professional looking design that match with cool icons.

( Demo | Download )

10. RealOne

Real 1 is a free CSS Template suitable for Real Estate Templates.

( Demo | Download )

11.The Radio Station

It is really for radio station website.

( Demo | Download )

12. CSS Heaven 1

A contemporary look that is suited for design and style business.

( Demo | Download )

13. Turrion

Business looking template that will lead your visitor to a right track.

( Demo | Download )

14. Zen Design

It is a good template for article, blog or site that has a every now and then updates.

( Demo | Download )

15. Urban Gear

Great free html template for on-line shop dedicated to the urban fashion industry. Easily replace the slides or just remove the slider area and use this template as a start point for your on line business.

( Demo | Download )

16. ubly

Colorful, cheek style suited for blog sites.

( Demo | Download )

17. beSMART

Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

( Demo | Download )

18. CSS Heaven 2

Suitable for business site.

( Demo | Download )

19. Easy Slide

Easy Slide is a simple but cool css template based on the famous Coda Slider.

( Demo | Download )

20. StudioClick

Studio Click is a simple, well-structured portfolio theme that focuses on one thing: gorgeous photos, screenshots, and content.

( Demo | Download )

21. BizGroup

Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance especially for solution business.

( Demo | Download )

22. Photo Pro css

Photo Pro is a simple css template for portfolios and photo sites and it’s very easy to edit.

( Demo | Download )

23. Treasure Hunter

This treasure hunting template is suited for photo galleries and blogs.

( Demo | Download )

24. Shop Around

Great free html template for on-line shop. Use it as a start point for your on line business. The template can be easily implemented in many open source eCommerce platforms.

( Demo | Download )

25.  Free Nova Studio

Nova Studio is a multi-purpose portfolio theme featuring a rich home page with a slider, a “From the Blog” widget, and multiple ways to beautifully display your work. A intuitive, unique design will make your site stand out from the crowd and solid markup will make it easy to edit.

( Demo | Download )

26. Mondays

Simple corporate CSS/XHTML template ready to meet wide range of requirements for effective on line performance.

( Demo | Download )

27. OWMX 1

Stylish and cool in the eyes. Great for professional businesses.

( Demo | Download )

28. Simple Solution

Clean and stylish that suits for businesses.

( Demo | Download )

29. Classic Luxury

Classic Luxury is great for portfolios and personal photo sites, and can be converted easily to a CMS theme as needed (such as Drupal or WordPress).

( Demo | Download )

30. Outliers

Dark corporate CSS/XHTML template ready to showcase your ideas.

( Demo | Download )

31. Portfolio Template

This is a clean and professional looking template for small portfolios or business sites. Very easy to edit if you have a basic understanding of html and css.

( Demo | Download )

32. Market  Leader

Light corporate CSS/XHTML template ready suits to showcase ideas to your clients.

( Demo | Download )

33. Clean-White

This is a simple but beautiful css template with lots of whitespace and a professional look. Perfect as a frontpage for small businesses or photographers.

( Demo | Download )

34. Ninja Assasin

Impress visitors to your site with a high-quality one-page portfolio site inspired by the Japanese ninja culture. The template is ready to use and will showcase your work in a unique fashion.

( Demo | Download )

35. Kelontong

Kelontong WordPress e-commerce theme is on board to simplify your life for our own online store now.

( Demo | Download )

36.  Small Business

This is suitable for small scale business websites that don’t need a lot of pages.

( Demo | Download )

37. RS 19

Stylish template with the combination of white and colorful taste.  It uses box shadows and text shadows techniques.

( Demo | Download )

38. Fruit Mix

As what the title suggest, good for healthy lifestyle website.

( Demo | Download )

39. School Education Template

Great for your school website. Publish school activities and announcements.

( Demo | Download )

40. Law Attorney

If you have a law firm, this is well suited for you.

( Demo | Download )

41. Film Blog

For film lover, this is a great template that will let you post your videos.

( Demo | Download )

42. Electronics

Cool coffee color that match on your electronics or appliances website.

( Demo | Download )

Free CSS/ HTML are really good to work on especially when you are about to start your new website and need to find something that will suit your business. Just try to explore more and learn about the free templates so that you can maximize the use of it.

I’ll be featuring 61 great looking and really unusual navigation menus which are CSS-based design solutions, JavaScript-based menus and Flash-designs.

CSS – Based Navigation Menu

1. Loodo.com

Casino-like game or snakes and ladders with the touch of colorful menu.

2. Change.org

The calmness of the choice of color with the emboss feeling of the menu to reveal the submenus is a great choice for its advocacy change.

3. Acko.net

Steven Wittens gives us another perspective or view of this menu.

4. UXBooth.com

UX Booth uses stylish yet simple menu.

5. MacRabbit.com

MacRabbit uses a mac os or apple concept to its design.

6. Joyent.com

Joyent uses simple, business looking menu that offers their works.

7. Nopoko Graphics

Elegance and simplicity of this portfolio gives you.

8.  Icon Designer.com

Large images-based menu that will attract and will draw users attention. Not the usual menu that you see.

9. Designsensory.com

Drop down navigation that uses two colors that presents the active link to the passive one.

10. Smallstone.com

Small Stone recordings, a U.S. record label, uses a radio-like or  that so-called a the so-called Space Echo Roland SE-201 menu.

11. TNVacation

Feel of country or map-like that will let you travel to the whole website.

12. Clever Twist

Rounded, apple application-like menu that offers application for your iPhones.

13. Clear Left

Clearleft uses a calendar concept that makes a what-to-do stuff on a particular day feel.

14. Tulumarka

Pressed looking  to see the selected menu.

15. Ars Technica

Menu pressed reveals a submenu. Dark yet simple feel.

16. 45royale inc.

Nice hover effects  with this simple and clean menu.

17. CSS Beauty

The size of the letters are so cute and  not usual but that’s what will caught your attention.

18. Design Intellection

A good way to use a block navigation that shows an effective  hover effects.

19. Microformats

Leaf like plus the cool green color that suits into your eyes. From green to black that gives you on what menu you are.

20. ronnypries.de

One of the best concept is to use a floor plan to navigate your users to the entire website is what Ronny Pries did.

21. Jiri Tvrdek

Fruit bearing tree is one of the creative way to use a navigation menu.  It is like your harvesting a fruit and lead you to the taste or the content of the website.

22. Matt Dempsey

Brush strokes with the interchange of the colors over choosing a menu is what  Matt Dempsey did.

23. Cognigen

Presents a pressed and clear view of the navigation.

24. District Solutions

Vertical tab that looks like a folder that really works on this website.  Rarely use but really great to work with.

25. Jeff Sarmiento

Sloping Navigation that creates a creativity and a punk style looking menu that Jeff Sarmiento used.

26. Racket

It is like a hierarchy of menu up to its roots.  One of a kind navigation that added to the creativity of the website.

27. DFW

Icons gives emphasis on the interaction to the menu.

Flash based Navigation Menu

28. Iipvapi

Photo clipping navigation menu with touch of hover color effects used in a Photo Clipping path services.

29. Moodstream | Getty Image

It is designed to squeeze your creative juices by tweaking the mood sliders navigation.

.

30. Not Forgotten – The Movie

Devilish, freaky and rise to the dead theme of the navigations presented into  tarot-like cards.  The card will be put in fire if you clicked on it.

31.Waterlife

The fluid navigation menu that brings you to the motion of a lake.

32. Nick Jones

Nick Jones uses a simple yet dynamic navigation for his portfolio. It’s like pulling things up and down.

33. Marc Ecko

Marc Ecko presents an art gallery navigation that lets visitors to  tour for  art and philosophy.

34. HBO

HBO , a tv-movie network, creates an interactive selection of movies for its navigation.

35. Got Milk?

An interesting navigation in a ribbon with a simple hover effect. When an icon hovered, the content menu is presented.

36. AgencyNet

Stunning and amazing navigation design studio based in New York City, NY and Fort Lauderdale, FL.

37. 2Advanced Studios

Stylish neo ancient navigation design with a background mural that leads us to another world.

38. NickAD

Nick Ad uses a flexible but easy to use navigation. The stars that changes to a navigation when it clicks anywhere in the page.

39. Dave Werner

A creative person uses his own works to lead the users on his portfolio.

40. Section Seven Inc.

Section Seven has a colorful pamphlet like navigation with a sub menu written on it.

41. Cathy Beck

A navigation that open and close like a scroll when choosing a menu.

42. Beside

Beside uses a rainbow navigation that puts your colorful fantasies.

43. Christian Sparrow

A cardboard concept of its portfolio. The navigation hovers a pencil-like drawing.

44. Enila.fr

Small squares that put together that acts as the navigation and collaboration of works.

45. Havaianas

A colorful map that has the touch of the slipper texture that Havaianas proud about.

46. Square Circle

A table filled with stuffs that are related to the menu such as telephone for contact us, magazine for portfolio, newspaper for news and others. Real thing that use for navigation is a great thing.

47. TBWA\HAKUHODO

A great, artistic scenario use for navigation. Every element is a wonderful piece that gives life to the website. Rarely used but magnificent.

JavaScript – Based Navigation Menu

48. Agami Creative

Simple and eye pleasing of this navigation with the touch of  paint colors.

49. Dragon Interactive

It looks like the navigation is made up of Flash but it’s not.  Clean, cool and stylish navigation with a hover effects of colors that made this navigation really pretty.

50. The White House

White House really holds up a lot of information for the public. It is easily manage with this drop down menu to contain all the contents.

51. Eric Johansson

Eric Johansson uses a JavaScript sliding menu to travel on it’s website.

51. Helmy Bern

The navigation layout is in a grunge theme that also has a jQuery drop down effects.

52. Internet Dreams

The creative hover effect is not usual but it gives a distinguish look over what menu users choose in.

53. Panic -Coda

Familiar and popular icons were used to navigate users easily.

54. TapTapTap

Restaurant menu-like navigation is really great. I really love this navigation because of its simplicity yet creative design.

55. Kobe

This navigation uses a scroll to and scroll in plugin to create  an interesting transitions.

56. BlogHelpr

Floater design to use for navigation. It is the creative way to save the person in swimming into the website.

57. EyeDraw

EyeDraw uses an expanding images whenever you hover the mouse over the menu.

58. Andreas Hinkel

Andreas Hinkel uses Polaroid navigation for the animation effect.

59. Museu Gulbenkian

The drag dock  navigation in the bottom is a great way to reveal and hide the menu and submenus.

60. Sapphire Sound

The thumbnail used as a menu that has caption effect, custom scroll bar, and you also can see the fading, sliding animation.

61. Design Slicing

Transition effects is what  I really like on this navigation. The menu are set of questions that when hover are given answers.

These are few navigation menu design that you can work out on your website but be sure that you don’t want to get lost in the design and interactivity aspect of your navigation. Let your users be guided on the navigation you choose to deal with.

Getting Started

To start with, I am going to take a look at my own needs and see what it appears I need the most. I want to make sure then when creating my own custom HTML & CSS framework, that I include the things I use the most so it will be useful to me in the future. When starting your own I would make a simple list of the most used things you have found yourself doing over and over with each website project.

For this example I will cover the items I found myself needing the most – You can always add or remove items to better fit your own needs when making your own custom HTML and CSS framework:

1. Basic starting DOCTYPE and website head area
2. Link on the HTML document to my .CSS stylesheet
3. A good .CSS reset file
4. A starting point for my project already in place
5. A .PNG fix for older browser versions

A Basic Starting Point

For a basic starting point we will need to know the main items that will be in every website. First will be our DOCTYPE. Although this may change for some people, I know that I mostly use the same one. I got tired of trying to remember it, and it was getting old trying to copy it each time I created a website. This is a must have item within our framework.

Lets begin by creating a new file and naming it index.html – This will be the first start of our framework. Open this file and add your DOCTYPE at the beginning of the document. Since I use the XHTML strict, then I have added the following to my index.html file.

Index.html File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Now that we have a start of our index.html – We will continue on it by adding the HEAD section. This will be the area that we contain our meta information and link to your stylesheets in. Since I have used the same items for years, I want to make sure I include them. Adding them and leaving them blank will allow me to reuse the framework as many times as I want, and customize it each time I create a new project, but will prevent me from having to re-type it over and over every time I am creating a new website.

Now we will take a look at the other information we will be adding into our index.html file. This is the HEAD area:

Index.html

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

<title></title>

</head>

Let’s take a look at everything we have added in the above code:

First is our content type, which is a must for proper document retrieval. Next is our description, keywords, and author. After these are our links to our stylesheets we will be creating (Both reset.css and style.css) – Next will be our JavaScript used to fix older browsers with the .PNG file viewing, and then all followed by our Title tag.

Adding these to the framework, and leaving the description, keywords, author and title blank – Will make it very easy to edit each time we make a new website using it.

I am going to add the following to my index.html since it is still a basic start to my every website I create. This will finish up our index.html – This will also create our BODY section of the website framework, and close out our HTML in our document.

Index.html

<body>

		<div id="wrapper">

		</div> <!-- End #wrapper -->

	</body>
</html>

Notice that I have also added a DIV for starting. This has always been my first created DIV on each website I have created unless I really needed something more specific and custom. For most generic websites this one has been a must, so I am adding it into my framework.

Here is a look at the entire Index.html file completed:

Completed Index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" type="text/css" href="css/reset.css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->

<title></title>

</head>
	<body>

		<div id="wrapper">

		</div> <!-- End #wrapper -->

	</body>
</html>

Next we will take a look at our .CSS files that we will be adding. Since we have already linked to these in our index.html file, we can create them now to be added to our framework. Notice also that I am using a sub-folder called css. This folder will need to be created, and our .css files will need to be added to this folder. This will help us keep files organized in our framework.

First is going to be our main stylesheet which I have named style.css – Let’s take a look at the basic of what will be added to it for styling purposes:

Style.css

html, body, div, p{
  margin: 0;
  padding: 0;
  border: 0;
  }

/* Main Layout */

body{}

#wrapper{}

/* Extras */

.clear{clear:both;}

Now for the ever so popular Eric Meyer Reset. This will be in it’s own file named reset.css and will also be added to our css folder we have created.

Reset.css

/* CSS Reset created by Eric Meyer - http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

Now we will need to create our JavaScript that will fix older browsers and allow them to see .PNG files correctly. I like to use PNG files when possible mainly because of the quality, but I need to keep in mind that some people still use older versions of IE which cannot properly view .PNG files. To fix this, I will make another folder and call it “js” – This folder will hold all of my JavaScript files that I would need to use on any website I am creating, but for now it will hold my pngfix.js file. Create a new file called pngfix.js and we will add the followiing:

pngfix.js

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters))
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

This will make IE correctly display our .PNG files. We have already added the script code to our index.html file when we created it that will look for this file. Simple enough right?

Let’s move on! – Now we should have a basic setup of files that we have created that we can use as our framework. There are still a few other things that I have found that save time for me when I am creating a website so I have made sure to add them here. If you have seen my other tutorial on creating a PHP website from scratch, then you will know I frequently convert my HTML websites to PHP. To set up my framework to be readily modified to convert, I have set up my framework with the folders and files I would create when converting my HTML website. I will now add the vars folder, to place my PHP variables, and I will also add my includes folder that will have my PHP include files when and if I choose to convert the HTML to PHP.

Notice that I have also added another blank folder to my framework setup for images. This is the folder I always create and add my website images to for any project that I create. This helps organize my files when making new websites.

Here is a look at what my folder setup looks like with everything complete:

HTML CSS Framework
|
|-- index.html
|--- js
|     |-- pngfix.js
|--- images
|--- vars
|--- includes
|--- css
|     |-- style.css
|     |-- reset.css
|

A quick overview of the files we have created:

index.html – Our main html file for website creation

style.css – reset.css – Contained within our css folder, and used for styling the look of our website

pngfix.js – Our JavaScript file that fixes IE to properly view .PNG files

images folder – For adding our website images we will be using when creating the website using our framework

includes folder – For placing files we would create if converting the HTML website to PHP

vars folder – For adding variables to use with our PHP website if we converted it

PHP Notes for Conversion

For those of you that are like me and would be using this framework to make the website, then convert it to PHP – Here are some quick notes on including the PHP files, and also setting and using variables. This is just a quick reference that you can save and even keep as a txt file within your framework if you want for later use.

// Including the external PHP within XHTML
<?php include('path/filename.php') ?>

// Setting the variable itself
$variable="data details";

// Creating the output for the data
<?php
echo $variable
?>

Overall Focus

The overall focus of creating your own HTML & CSS framework is really to save time. It helps when having everything together and ready each time you want to start a new project for yourself or a client. Saving time and having some things already in place can also help with organization. Putting attention into these can sometimes help you be more creative and flexible since you would not have to waste time doing the same things over and over again. This can also help you place more attention on detail and prevent you from running your energy out on items not needed. All together this could mean the difference in yourself or a client being happy or not, and also meeting a deadline in time knowing that certain things are already done for you.

Download

If you would like to download the files that I have created within this tutorial to use for yourself in your own projects then feel free to. I have found making a simple framework is a priceless thing to have and has helped me numerous times. I do know that many of you may already have your own framework that you use but I wanted to share mine with you. Feel free to download the example tutorial files by clicking [HERE]

In Closing…

I hope everyone has enjoyed the article, and finds it useful in making your own HTML and CSS Framework. If you have any suggestions or questions then feel free to comment below and let me know. I hope that you also find it useful in your own projects and see the difference in time it takes to begin a new project. I hope it also helps everyone with creativity since you can now focus more energy into more important things such as design, and client specifics instead of starting a project from small snippets or trying to remember DOCTYPE’s – Happy coding! and thank you for reading!

Learning to develop websites could be approached just as logically. Languages for the computer could be compared to math classes. You need to learn simple addition before you can even think about calculus. Going into it with the thought of languages building off each other might help you learn the languages more effectively.

Language 1–HTML
The first language you should tackle is obviously HTML. Short for HyperText Markup Language, this was the first language used on the web and as such is the backbone and framework for many other languages. The syntax of HTML is relatively simple and straightforward and there are a number of books and online resources available to help you. Be aware of the dates of the resources, however, since some elements are no longer supported, especially since HTML5 is in the process of a release.

What I wish I had known: Make sure you close all your tags! I cannot count the times that a page displayed strangely because I forgot to close a div. In this, commenting may be your best option, especially if it’s only

</div> <!-- This closes the Header Tag --> 

It may save you a headache or two for HTML and will insure that you are in the habit of closing them for the stricter offshoots. A validation tool may become your best friend, so be sure to bookmark your favorite. I like W3C’s Markup Validator, but there are others out there, so check around.

Some good resources:

• Web Monkey’s “Make an HTML Document”
• University of Texas at Austin’s “Learning HTML”–This is more a list of other useful sites, but still good
• W3Schools HTML Tutorial–very basic, but good if you are just starting out

Offshoots: There are several other languages that branch off from HTML. This includes XHTML which tends to be more fussy about syntax—they don’t call it “strict” for nothing—but does have its uses.

Language 2–Cascading Style Sheets (CSS)
There’s a good reason I put CSS here. It builds directly off of HTML, but lets you stylize your website more efficiently than HTML by itself. Having a visually appealing website also is more encouraging to work on and more fun to show off.

CSS also brings to your attention the issue of cross-browser compatibility, the sometimes frustrating problem of web browsers handling the same code differently. Learning CSS will help you anticipate the different ways browsers handle the same code. Developing a mindset to deal with these hurtles also builds general troubleshooting capabilities, a necessary tool for real life, as well as web development.

Having ids and classes already built into your HTML from using CSS also makes it easier to incorporate JavaScript libraries, like jQuery, later on.

With CSS3, cascading style sheets now have more useful features than ever, including support for gradients and rounded corners. These can save you time and energy. The downside of this is that not all browsers support them.

What I wish I’d known: Internet Explorer is (arguably) the worst browser when it comes to cross-browser compatibility. Conditional comments work for IE5 and up, and make styling for IE a little easier. Here’s a fun way to use them in the head of an HTML document.

Only Internet Explorer will see the stylesheet contained within the conditional comments. Other browsers will only see a comment and ignore it. By putting the IE stylesheet second, you override any duplicate tags, so you only need to modify the elements that display incorrectly.

Some good resources:

• 35 Websites to Teach You How To Use CSS Effectively–on 1stwebdesigner
• 53 CSS Techniques You Couldn’t Live Without
• The Principles of Cross-Browser CSS Coding

Language 3–JavaScript (JS)
JavaScript is useful for creating websites with dynamic or animated content. This includes animated transitions, menu tabs and near-flash like effects. JS introduces you to the wonders of, among other things, if and elseif statements. These are actually very useful tools and appear in many forms of programming, including PHP.

The syntax for JS is less forgiving than HTML or CSS, but will give you a definite sign that you did something wrong. It won’t work! The frustrating bit is that it doesn’t necessarily tell you what is wrong, so you may spend hours searching for that missing semicolon.

What I wish I’d known: While there are proponents of first learning a JavaScript library—like MooTools or jQuery— I don’t think you are doing yourself a favor through this, having done this myself. This is because when it comes to certain things—like HTML5′s canvas function, for instance—you need to know how to make the whole thing work without the shortcuts that libraries provide, especially where calling variables are concerned.

Some good resources:

• W3 Schools Javascript
• Tizag Javascript Tutorial
• Improve Your Skills: 25 jQuery Beginner Tutorials Roundup
• jQuery if/else Statements

Offshoots:Depending on your need for dynamic content, AJAX (Asynchronous JavaScript and XML) may be something you want to learn as well. It isn’t its own language, but a way of combining the two languages for more dynamic functionality. Obviously, this requires a knowledge of both JavaScript and XML.

Language 4—PHP
PHP can be used to create dynamic websites, either on HTML pages or on sites run on a content management system (CMS) like WordPress. The conditional statements, like “if”, “elseif” and “else”,are similar to those used in Javascript.

Unlike the already mentioned web development languages, PHP runs server-side, which has its own set of benefits and challenges. One benefit is that, unlike JavaScript, the user does not have to have PHP installed on their system in order to correctly view the page. The downside of this is that your host server does have to support PHP, though this is becoming less of an issue. The other part of this is that you do need a local server to run PHP pages.

What I wish I’d known:Parse errors can be helpful. These point to the direct line number with the syntax error, which can save you time.

Some good resources:

• PHP.net Tutorial
• Learn PHP–About.com
• PHP: What You Need to Know to Play with the Web

Continuing your learning
These are the core languages that will get you the most mileage. While there are other languages used in web development, HTML, CSS, JavaScript and PHP can provide a foundation for you to bridge off of. The Internet itself offers many resources that can help you learn coding or refresh your knowledge.

Over the last few years we have seen the rise of some fantastic tools to allow us to get creative with the typefaces we use on our websites. There are really two mainstream approaches here; @font-face, and of course, Flash. All of the solutions available have their drawbacks; not all are free for instance, but one thing is for sure; They are all advancing web typography for everyone. Let’s get stuck in and see what options are available to us to use different fonts on the web.

1.Google Font API

Google recently entered the font replacement game with their free Font API and font directory. It is still a beta lab product, but is incredible easy to use, and loads the fonts on Google’s back, just like has become common for loading Jquery these days. The problem with Google Font API, is its font directory though. There are only 19 fonts currently available, and compared to other options that are only limited by the amount of free fonts that you can find, this is fairly lacking in choice.

However, like most of Google products, it is a fantastic piece of engineering, and is incredible easy to use. All you have to do is include a dynamic  file in the head of your document, and from there, you are free to use the font anywhere in your css. The syntax allows you to load multiple fonts, different font variants and so on in the same single line which is fantastic. The following line, for instance, would load Cantarell italic and Droid Serif bold.

<link rel="stylesheet" type="text/css"  href="http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold" />

To learn how to implement the Google font API, Jeffrey Way at Nettuts has made a fantastic quick video.

2. Typekit

Typekit is a premium web font replacement service, with a useful free plan on a limited selection of fonts. They work with foundries from all over the world to provide their users with the best selection of fonts possible, and this shows with the number of fonts they are able to provide compared to other services; nearly 500! Some of the most influential web designers on the internet use it, and that’s testament to its quality and delivery.

Typekit aims to make using custom fonts in your web design as easy as possible, and so offers two ways to implement your chosen fonts into your website. The first is via the kit editor. This Kit Editor is for those that are a little less web language savvy than some of us, and instead of having them hand code the fonts into their design, it asks you what selectors you want the font applied to (class’s, id’s, elements), and by clicking publish, Typekit will sort everything else out for you via the one line of code you insert into your html document.

The other option provided to you is not to use the Kit Editor, but hand code the fonts into your css yourself. Once you’ve included the one line of code in your document, the font name will be recognised and loaded!

If you are willing to pay premium for your web fonts then, this is the way to go. The range of premium and free fonts that you have access to, and the ease of implementation is incredible. A portfolio price plan weigh’s in at $49.99 a year, so it is all about weighing the pro’s and con’s of what you are getting with that, and whether the fonts you want to use are available under other font replacement techniques.

3. Google Font Loader

The Google Font Loader is a secondary part of the Google font API; a Javascript library that gives you more control over font loading than the Google Font API does. Co-developed by Google, and Typekit, it allows you to load fonts from multiple font providers, including Google, Typekit, and Ascender, as well as pretty much any custom site you want.

What the font loader does, that the Google Font API doesn’t is applies class’s to the page while the font’s are loaded, and after the font is loaded, allowing you specify a font to render in while the font loads. This is not supported in the Google Font API however, where for example, Chrome, IE and Safari will just not render the text until the font loads andFirefox will render the font in the browsers default font until the font loads causing a flash of unstyled text.  Although you may still get a flash with Google Font Loader, the change won’t be so drastic as you’ll be able to choose that default font.

To learn how to use the Google Font Loader, Google have written a great guide here.

4. FontSquirrel

FontSquirrel is more of a database of free font’s, but it comes with a fantastic integration for font-face, a css way of serving web fonts. Google and Typekit use font-face, although it is far more refined via server sided scripts, and javascript. FontSquirrel however, is pure CSS. Once you browse the incredible directory of free fonts (theres 610 of them at the time of writing this!), the site will tell you if the font license allows you to use it with font-face, and on most fonts, there is a pre-built tab where you can instantly download a font-face kit for that font, which will then take you only a few seconds to implement into your css.

For those font’s that aren’t provided with a font-face kit, but are still font-face compatible, or font’s that font-squirrel is yet to come across, there is also a free font-face kit generator available! Simply upload your font file, and the generator will pretty much do the rest, unless you are looking to customise your kit a bit. This is by far the easiest, and best free way to implement a fantastic set of fonts into your website in my opinion. The ease of use, and speed of implementation is incredible.

5. sIFR

sIFR stands for Scalable Inman Flash Replacement, but its basically a technology that replaces your text with a flash replacement, styled in your required font. It does require javascript and flash to be enabled; if not, then your css defined font will be used. sIFR does however seem fairly complex to set up; you have to create a flash file of your font, load javascript, and then choose what elements you want to font replace via javascript. The problem though, is that sIFR is heavy, so causes pages to load slower, and of course, doesn’t work on most mobile devices.

However, like font-squirrel, and it’s font-face kit generator, it doesn’t limit you to a select library of fonts like the Google Font API does, and so provides much more versatility. Unlike the font-face alternatives above though, sIFR should only be used for small pieces of text, like headings. Using it on your whole site will seriously damage your site’s download time, and usability.

To learn how to use sIFR, and see an example, this tutorial seems to cover it all!

6. Cufon

Before font-face came along and became mainstream, the main rival to sIFR was Cufon. Instead of using flash, cufon used javascript, and makes use of elements such as the canvas tag on most browser, and VML in Internet Explorer. This means its more lightweight than sIFR, but still, it’s only really suitable for headings. While the text is selectable, it’s fairly buggy in that aspect. Like sIFR, there is no preset font library so you’ll be making your own kits via the Cufon Generator.

You upload your font (with different variants if require), choose your characters, and then optimise your performance (quality), and file size for your site. Once this is done, you’ll need to include cufon javascript file, as well as your generated font file, and then choose what selectors you want to apply the font to. Definitely not as tidy as some of the font-face examples. It is however, compatible with most javascript libraries, so with their support, your selectors can become more dynamic.

If you want to use Cufon, Jeffrey Way from Nettuts has written an amazing article on how to, complete with video!

Further Thoughts

Cufon and sIFR are slowly dieing out due to the massive surge of interest, and popularity of the font-face solutions; Font Squirrel, Google Font API and Loader, and Typekit. However, with their rendering not top-notch in all current modern browsers, Cufon and sIFR are often the go to technology for beautifully rendered headings. I hope this article has given you an insight into the technologies available to you. They’re the best that I know of, but if you happen to have a further solution, or want to express your opinion, start the discussion rolling down in the comments!

In this collection, you’ll find 57 High Quality CSS3 Tutorials that help to stand out from the crowd, and make better designs using only CSS.

1. The Basics of CSS3

Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.

2. How To Create a Pure CSS Polaroid Photo Gallery

Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Let’s take a look at building a cool looking stack of Polaroid photos with pure CSS styling.

3. How To Create Depth And Nice 3D Ribbons Only Using CSS3

In this tutorial we’ll be learning how to create depth and nice 3D ribbons only using CSS3.

4. Image Bubbles using CSS3 transform and transitions

CSS3′s transform and transition properties make it possible to manipulate elements in a variety of ways using just CSS. CSS transform is used to scale, rotate, or even skew an element without disturbing the content around it, while transition is used to animate CSS properties into view. The two properties are supported in modern versions of Safari, Chrome, Mozilla 3.5+, and Opera 9.5+ in varying degrees.

5. The Multi-Column CSS3 Module

For over six years, CSS3 columns have been available to us; yet, strangely, they’re rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that – again – no support in Internet Explorer. But that’s okay! The world will not end if IE users see one longer paragraph. you’ll see how to use this helpful module in this video quick tip.

6. Using CSS3 Text Shadow for Active Link States

In this tutorial you’ll be walking through the process of using CSS3 text shadow for active link states.

7. CSS3 Gradient Buttons

Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc..

8. How To Create A Polaroid Photo Gallery With CSS And jQuery

Photo Galleries are becoming more and more popular these days. Today we are going to create a simple one using some of the new CSS3 features and jQuery. A prominent feature of the gallery is that You will be able to Drag the photos with single click in the gallery we are going to create. Hope you will enjoy this and understand it easily.

9. Wicked CSS3 3d bar chart

In this tutorial you’ll be learning how to create wicked CSS3 3d bar chart. no images were used to create this wicked effect. The only images that are used in this example, were taken from the Superpack icon pack and only show the Apple icons. Everything else you see in this demo, is created using pure CSS3.

10. Create a Letterpress Effect with CSS Text-Shadow

The letterpress effect is becoming hugely popular in web design, and with a couple of modern browsers now showing support for the text-shadow CSS3 property it’s now simple and easy to create the effect with pure CSS. No Photoshop trickery here!

11. Create a pixel perfect subscription box using CSS3

Today I will show how to create the above subscription box using simple HTML markup and a few advanced CSS3 properties. I believe CSS3 is the future and the sooner you can jump on the CSS3 band wagon the better. All the stylish shadows and gradients used are rendered using CSS properties which can be experimented with to produce some fantastic results.

12. Pretty Simple Content Slider with jQuery and CSS3

Today we will create an auto-playing content slider with jQuery and CSS3. The idea is to alter the background image and to slide in the heading and the description. By clicking on one of the menu items, the auto-play function is stopped and the respective content slides out.

13. Our Solar Sys­tem in CSS3

This is an attempt to recre ate our solar sys tem using CSS3 fea tures such as border-radius, trans forms and anim a tions. The res ult is sur pris ing and quite interesting.

14. Howto Create An Image Slider With Pure CSS3

Image slider is a popular effect and often used in portfolio sites and blogs. Most of these sliders are created by Javascript. But with CSS3′s strength, we can implement an image slider with only pure CSS3. This article will guide you to do that.

15. Build Kick-Ass Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in this video tutorial.

16. jQuery quickie: Colourful rating system with CSS3

Today, we’re going to do a relatively simple jQuery tutorial. Rating systems are used a lot on websites, for example to rate how good a certain product, article or comment is. I slightly wanted to improve this idea, by making it more visually attractive.

17. CSS3 Music Player Menu

This post is the sequel post from “Photoshop Effect vs CSS3 Properties“, as you know on previous post we have tried to maximize the CSS3 power to create Photoshop-like effect. So, as I promised earlier, this post will explain how to use CSS3 properties only to create CSS Music Player Menu.

18. Beautiful CSS3 Search Form

Did you know you can make a round circle with border-radius and create inner shadow effect with box-shadow inset? Check out this beautiful search form tutorial that I’ve created with CSS gradient, border-radius, and box-shadow. It displays perfect in CSS3 browsers and degrades gracefully in non-CSS3 browsers.

19. Design a Prettier Web Form with CSS 3

Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in this tutorial!

20. Pimp Your Tables with CSS3

Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup.

21. Create Accordion Menu Using CSS3 Transition – Deluxe Blog Tips

There are many ways to create an accordion menu, most of them use a javascript library like jQuery to make the effect runs cross browsers. In this tutorial, we’ll see how to make an accordion menu using CSS3 transition. It works on most modern browsers that support CSS3.

22. Cross-Browser Rounded Buttons with CSS3 and jQuery

This tutorial will show you how to create cross-browser rounded buttons with CSS3 and jQuery

23. How to use CSS3 Orientation Media Queries

For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied. In this article I will focus on the orientation media query and have a fun demonstration showing how to use it.

24. 3d animation using pure CSS3

In this tutorial you’ll learn how to create 3d animation using pure CSS3

25. Stylize Input Element Using CSS3

Stylizing input element is a common task for us as a web developer, we can make it look nicer by putting stylized input image (color gradient, smooth border, box shadow, etc) as an input background. Nice but the images also take some of our bandwidth, thankfully CSS3 adds some support for element styling, so we can replace them with only CSS.

26. Contextual Slideout Tips With jQuery & CSS3

Knowing the importance of HTML standards, we are making a set of contextual slideout tips with jQuery & CSS3, which are ideal for product pages and online tours. As a bonus, they are SEO friendly, so all the content is visible to search engines.

27. CSS3 Dropdown Menu

Learn this tutorial to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.

28. Create a Cool Messy List with CSS3 and nth-child

In this short tutorial I’m going to show you how to create a cool messy list.

29. Deal-breaker problems with CSS3 multi-columns

Firefox and Webkit support some of the CSS3 multi-column layout properties—but not very well. Unfortunately, the spec isn’t very clear about what’s correct. Until the spec is clearer and the browser problems are ironed out, multi-columns are useless to me.

30. CSS3 Glow Tabs

Visit the site in a Webkit-based browser (Chrome or Safari) or Opera 10.5, and you’ll see a nice “glowing” rollover effect along with a subtle inner shadow at the bottom of the inactive tabs. But that’s not all; they’ve also applied some rounded corners and gradients to complete a very nice effect. All with no images — just progressively enhanced with CSS3 so it degrades in non-supportive browsers. I immediately set out to recreate the effect, and I thought I’d write it up so you can see how CSS3 can create intuitive and beautiful interfaces with no images.

31. Create Windows 7 start menu using CSS3 only

I am fascinated with how much you can do with so little using CSS3. Many user interface elements that require images in order to have appropriate visual appearance now can be styled only with CSS3. In order to prove that I assigned myself a task to create Windows 7 start menu only with CSS3 (and some icons).

32. How to Dynamically Highlight Content Like Wikipedia Using CSS3

If you’ve ever clicked on a footnote link in a Wikipedia article, you’ve probably noticed that two things happen: (1) the link brings you to the footnote section at the bottom of the page; and (2) the selected footnote is highlighted with a different color. In a list of footnotes, this feature makes it easy for the reader to visually access the appropriate footnote.

33. Cross Browser Pure CSS3 Horizontal Accordion

Just few days ago, I shared pure CSS3 vertical accordion that works in all modern browsers, including Internet Explorer. Now it is time to share its twin – a pure CSS3 horizontal accordion. It uses same markup enabling you to switch from vertical to horizontal accordion and vice versa by simply changing the class name.

34. CSS3 Linear Gradients

With the advent of CSS3′s comes support for gradients, specifically, linear and radial gradients. CSS Gradients is supported in FF3.6+, Safari 2+ and Google Chrome. In FF3.6, gradients can currently only be applied to an element’s “background-image” or shorthand “background” properties.

35. Cross Browser Pure CSS3 Vertical Accordion

I was studying various CSS accordions and found that better ones are built using CSS3; as expected, they didn’t work in Internet Explorer. More noticeably, they didn’t even degrade properly. This was mainly due to use of CSS3 “:target” pseudo class to open accordion panels.

36. How to build a Cool Animated CSS3 Menu with no Javascript

This CSS3 tutorial was originally written in German by the Webstandard-Team, and they have kindly allowed us to translate it and publish it here. It certainly does deserve to be viewed by a wider audience.

37. Colorful Sliders With jQuery & CSS3

In this tutorial we are using jQuery and the new transformation features brought by CSS3 to create a three dimensional dynamic slider effect. The techniques presented here – for creating sliders, and CSS dynamic resizable bars, can be used together or in part for powering all sorts of jQuery goodness.

38. How to Create a Fancy Image Gallery with CSS3

Today, I have prepared a tutorial about how to use CSS3 to make an image gallery with animation. I recommend to use browsers that support CSS3 to see the animations; however, the gallery is going to be usable in browsers without support of the animation.

39. How to Create Inset Text with CSS3

Many exciting new functions and features are being thought up for CSS3. Today we are going to create inset test with CSS3. That property will support Firefox, Opera, Chrome and Safari. Inset text being text that has been pushed into the background, almost like a reverse embossed effect.

40. CSS3 loading spinners without images

While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of webapps and of course on the iPhone.

41. CSS3 Fundametals: CSS 3 Transitions

As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.

42. Pure CSS3 bokeh effect with some jQuery help

Today, I want to add another addition to the bokeh “hype”, by creating a pure CSS3 bokeh effect. With some help from jQuery, we can add some randomness in colour, size and position for the effect.

43. CSS3 Techniques You Should Know

Many of you have probably heard all the buzz around CSS3, but exactly which techniques can we use today? In this article I’ll show you some different CSS3 techniques that work great in some of the leading browsers (i.e. Firefox, Chrome, Safari, Opera ), and how they will degrade well in the non-supported browsers (i.e. Internet Explorer). Using browser specific extensions, many of the proposed CSS3 styles can be used today!

44. Beautiful Photoshop-like Buttons with CSS3

In this Tutorial we’ll show you how to recreate 3 different, slick buttons that we created beforehand in Photoshop without the usage of any image in CSS3. We’ll use a multitude of CSS3 properties, such as @font-face, text- and box-shadow, gradients and border-radius.

45. Pretty CSS3 buttons

I’ve come across quite a few sites that explain how to create flexible CSS3 buttons but i’ve never really spent the time to implement one until i found a great little write up courtesy of the guys over at the Zurb blog who have a fantastic post on creating CSS3 buttons. So i’ve taken their example and tweaked it to fit my needs. It’s worth noting that if your using Internet explorer you’re not going to see all these effects as IE still doesn’t support CSS3. Compatible CSS3 browsers are, Safari, Chrome and FireFox 3+.

46. Using Rounded Corners with CSS3

Through the use of proprietary CSS properties, certain browsers can already display rounded corners. For example, Firefox uses the -moz-border-radius property to control the corner radius of a page’s border. Safari can accomplish the same result with the -webkit-border-radius or -khtml-border-radius properties.

47. CSS3 Speech Bubble

In this tutorial, you’ll learn how to create CSS3 speech bubble.

48. Create a CSS3 Call to Action Button

I’m now going to share with you a method for making a slick call to action button using only CSS.

49. Create A Clean and Stylish CSS3 Contact Form

In this tutorial we’re going to look at a range of different CSS3 effects – in particular, we’ll be creating background gradients, adding shadows to elements, applying some rounded corners, and adding a couple of simple animation effects.

50. How to Create a “Stay-On-Top” Menu with CSS3 and jQuery

This video will show you what you’ll be making and how to do that. Unfortunately, since I had only 5 minutes for this, I focused only on the jQuery part. Everything else you need for this you will find in the tutorial. You can also hit the “Live Demo” button to see the final effect yourself.

51. Apple Navigation with CSS3

Apple is known for very clean design and if you have been to their website in the last few years you’ve seen their primary navigation. It’s a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques.

52. Grooveshark Search with CSS3

I am a huge fan of the Grooveshark interface. Every time I look at the site I start to dissect the UI and turn it into code in my head. I wanted to see if I could create the search box only using HTML and CSS. Sadly there is one image and it’s the search icon in the button. I recently read a tutorial that shows you how to create a custom font and use the font-face property for icons, but they didn’t have the search icon I needed.

53. Fancy Image Hover Using CSS3

So here we will try to create fancy image hover with css3 as you all know we can have cool image hover effect using jquery but now using transform and transition properties of css3 we can have the same cooler effect with css3 only.

54. CSS3 Rounded Image With jQuery

The other day I was trying to style CSS3 border-radius to image element and I realized that Firefox doesn’t display border-radius on images. Then I figured a way to work around it — wrap a span tag around with the original image as a background-image. Thanks to Darcy Clarke for the jQuery code which does the magic tag wrapping automatically.

55. How to Create a Cool Slide Out Panel with CSS3 only

Many sites have a really cool hidden panel which contains some relevant information and this panel is revealed to us, with a cool animation, when we click on a particular button or hover over it. This has usually been achieved using jQuery. But now as we advent towards the future and CSS3 is becoming a reality, here is a tutorial on how to build an animated slide out panel using only CSS3.

56. Creating Fancy Checkmark Icons with Pure CSS3

I had just seen Nicolas Gallagher’s awesome pure css social media icons, though, and I thought, “If he can do that, than I could certainly create a simple check icon with just css3?. I did figure it out with some experimenting and testing, and today I’m going to show you how to achieve the same effect.

57. Create a Vibrant Digital Poster Design with CSS3

CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.

Hide text with text indent

This is extremely useful for use for things such as your company logo. More often than not, it’s an image, but you’ll want to display it in h1 tags for SEO as well. Here’s the best way to do so. What we basically do is hide the text far away off the screen, and apply a background image instead.

h1 {
	text-indent:-9999px;
	margin:0 auto;
	width:400px;
	height:100px;
	background:transparent url("images/logo.jpg") no-repeat scroll;
}

Style links depending on file format

This snippet is aimed at user experience. Often on the internet we find ourself clicking on links knowing nothing about where we are heading. This snippet can be used and expanded to show small icons next to your links telling the user if it is an external link, an email, a pdf, an image, and so much more.

/* external links */
a[href^="http://"]{
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;
}

/* emails */
a[href^="mailto:"]{
	padding-right: 20px;
	background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
}

Remove textarea scrollbar in IE

Internet Explorer has an annoying habit of adding scrollbars to textarea’s even when the textarea’s content is not overflowing. You can rectify this flaw with this easy to use snippet.

textarea{
	overflow:auto;
}

Drop cap

Commonplace these days in blogs and news sites is the dropcap. You’d be surprised at how easy it is to implement, and how well it degrades for older browsers.

p:first-letter{
	display:block;
	margin:5px 0 0 5px;
	float:left;
	color:#FF3366;
	font-size:60px;
	font-family:Georgia;
}

Css Transparency

Transparency is something that isn’t done the same way across browsers which can be annoying. Here’s how you can target transparency in multiple browsers.

.transparent {
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
}

Css Reset by Eric Meyer

Eric Meyer’s css reset has become almost standard now days for use at the start of your stylesheet. Having been adopted by some of the most influential designers, you can be sure of its quality.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Image preloader

Sometimes it is useful to pre-load your images so that when a certain element is needed, they’ll already be loaded for you and there wont be any delay or flickering.

div.loader{
	background:url(images/hover.gif) no-repeat;
	background:url(images/hover2.gif) no-repeat;
	background:url(images/hover3.gif) no-repeat;
	margin-left:-10000px;
}

Basic css sprite button

Having a button or link with a background image is fairly normal, and nowadays, we require further effects to enhance the user experience. Once of this is an indicator to the user that they are hovering over a button. Using a sprite, we can create this effect by changing the position of the background image down a certain height to show the background to the button on hover. A simple yet effective technique.

a {
display: block;
background: url(sprite.png) no-repeat;
height: 30px;
width: 250px;
}

a:hover {
	background-position: 0 -30px;
}

Google Font API

Google recently released a fantastic resource for web designers allowing them to load new fonts from google for use in our web pages. We can even load different variants of fonts such as bold, italic and so on. While the library of fonts available from google is limited, there is still plenty to use. First include the dynamically written stylesheet by naming the fonts and variants you want, and then use the font names in your css as you normally would! For further info on Google Font API, read here.

<head>
	Inconsolata:italic|Droid+Sans">
</head>

body {
	font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px;
}

Browser specific hacks

Sometimes it’s useful to target specific browsers to fix their inconsistencies and conditional comments aren’t always the best way to do so. This list of css browser hacks by Chris Coyier is a top-notch list of ways to target browsers with simple css.

/* IE 6 */
* html .yourclass { }

/* IE 7 */
*+html .yourclass{ }

/* IE 7 and modern browsers */
html>body .yourclass { }

/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }

/* Opera 9.27 and below */
html:first-child .yourclass { }

/* Safari */
html[xmlns*=""] body:last-child .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass {  }

/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .yourclass  {  }
}

Fixed Footer

You would think creating a footer that sticks to the bottom of the screen would be rather hard, but surprisingly it isn’t if you want to start with a basic footer. There is an IE6 hack we have to use, but apart from that, it’s easy!

#footer {
	position:fixed;
	left:0px;
	bottom:0px;
	height:30px;
	width:100%;
	background:#999;
}

/* IE 6 */
* html #footer {
	position:absolute;
	top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Flip an image

Flipping an image rather than just loading a new image that is already reversed can be rather useful. Say you want to use only one image for an arrow, but have several on the page going in different directions. Here’s your problem solved.

img.flip {
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

Clearfix

A while back, someone decided it was time to clear floated elements without adding any extra markup to the document. They did this by creating a class that can be applied to the container of floated children to clear it. A fantastic way to do so, and something that is nowadays, widely used.

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

Rounded Corners

With the slow introduction of css3, rounded corners have been made easily possibly in modern browsers. Sadly we still don’t have css3 support for IE, but it will be available in IE9 whenever that is released.

.round{
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px; /* future proofing */
	-khtml-border-radius: 10px; /* for old Konqueror browsers */
}

Style Overriding

It still surprises me that some people don’t know about !important in css, because it is such a powerful and useful tool to have. Basically, any rule with !important at the end, will override any of the same rule that is applied to that element wherever it appears in the css file, or in-line html.

p{
	font-size:20px !important;
}

Font face

Font-face didn’t really break through until late last year, but has been around since the days of IE6 being a modern browser! It’s picked up in support a lot now though, and offers a great way to use non web safe fonts in your web projects. While this snippet works, you might as well save your time by using the Font Squirrel Font Face Generator.

@font-face {
	font-family: 'Graublau Web';
	src: url('GraublauWeb.eot');
	src: local('☺'),
		url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Center a website

A common design trend these days is for your website to center itself in the middle of browser’s viewport horizontally. This is an easily achievable thing to do.

.wrapper {
	width:960px;
	margin:0 auto;
}

Min-height in IE

This comes down to fixing a simple, yet annoying bug in IE’s capability of handling min-height. In essence, IE interprets height as min-height, so since IE wont implement the auto height, this snippet will fix all this for us.

.box {
	min-height:500px;
	height:auto !important;
	height:500px;
}

Image loading

This image loading effects mimics that of an ajax loader, where a loading circle is displayed while content loads. This works especially well for larger, slower loading images, and is css only!

img {
	background: url(loader.gif) no−repeat 50% 50%;
}

Vertical Center

This short snippet allows you to vertically center the contents of a container without any extra markup by simply displaying it as a table cell which then allows you to use the vertical-align attribute.

.container {
	min-height: 10em;
	display: table-cell;
	vertical-align: middle;
}

Create pullquotes

Firstly, what is a pullquote? Well in news and magazine style websites, you’ll often notice small quotes added within the article, not as full blockquotes, but as small quotes that sit within the article but to the side, sometimes adding things such as people’s opinions or quotes. They are extremely easy to create you’ll be glad to know, and when used properly, can add greatly to the user experience when reading an article.

.pullquote {
	width: 300px;
	float: right;
	margin: 5px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font: italic bold #ff0000 ;
}

Text Selection

Some people are unaware that it is possible to change the color when you highlight text in your browser. It is so easy to with two selectors; just be careful you don’t ruin your site with it.

::selection {
color: #000000;
background-color: #FF0000;
}
::-moz-selection {
color: #000000;
background: #FF0000;
}

Print page breaks

This add’s again to the user experience when printing. For example, when printing an article, it may be useful for a user to have the comments on a new page from the article itself. by adding this class to the comments area, a page break will appear when printing. It can be used anywhere else on your site as well!

.page-break{
	page-break-before:always;
}

Further thoughts and discussion

I know for sure I haven’t been able to cover every useful css snippet out there, but have provided those that I think will benefit the most. What do you think about these snippets, and what do you think about others that are out there? If you know of some mighty useful css snippets, then bring them to the table in the comments, so we can see and discuss them!

Below you will find a lot of tutorials each teaching you something different and appropriate. You will also find quite lot CSS3 tutorials, because CSS3 offered features are being used more and more and you should practise them too.

Menus

1. Bulletproof CSS Sliding Doors

In this tutorial author shows you solution how to preclude common problems with implementations.

2. CSS Sliding Door Using Only One Image

In this tutorial, author will show you how to code the navigation bar using only 1 image.

3. CSS Dropdown Menu Tutorial

Learn how to create simple horizontal CSS dropdown and popout menu.

4. Pure CSS Menu With Infinite Sub Menus Tutorial

Today we are going to cover how to build a pure CSS menu with infinite sub menus; an area of CSS that is seldom talked about, poorly written or misconceived. This pure CSS menu with infinite sub menus technique makes use of CSS2 selectors so it will not work in IE6 and below without help from JavaScript.

5. Pure CSS Vertical Menu

Following this tutorial you are going to build the second most common menu navigation, the vertical navigation menu. Here you are going to be using only pure CSS and un-ordered lists to create your vertical navigation menu with three levels of pop outs. This version of the vertical navigation menu will work in IE5, IE6, IE7 and IE8 as well as FF and Safari.

6. Horizontal Menus That Grow on You

In this quick tutorial, author is  going to discuss how to create a neat little menu effect. You’re going to create a horizontal row of boxes containing link text. When you move the mouse over one of these boxes, it’s going to get taller and the text larger and bold.

7. Advanced CSS Menu

This tutorial will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position  property.

8. Horizontal Subnav with CSS

Learn how to create simple submenu with CSS and a touch of jQuery for IE6.

9. Advanced CSS Menu Trick

This tutorial will teach you how to create powerful and solid navigation. What you want to do here, is instead of simply altering the state of the navigation item the user is currently rolling over, we want to alter the non navigation items as well.

10. How to Create a CSS Menu Using Image Sprites

Follow these steps to build your own modern navigation bar design, starting with the initial steps in Photoshop to flesh out the design, then moving on to constructing the HTML and styling with the CSS image sprite technique.

11. CSS Graphic Menu With Rollovers

3 part tutorial showing you how to make clean, nice vertical menu using Adobe Photoshop, then slice your web graphic and finally code website menu using unordered lists, and valid xHTML/CSS.

12. CSS Dock Menu

If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface  and some great looking icons. Here author will show you how to implement it to your web page.

13. Vertical CSS Menu With a ‘Behavior’ File

In this tutorial you will build a vertical CSS menu with rollover submenu’s. This menu will be written in CSS and HTML, and will use a so-called ‘behavior’ file.

14. CSS Vertical Navigation with Teaser

Learn how to code simple vertical menu a simple way to display some teaser information for your vertical navigation.

15. CSS Sprite Navigation Tutorial

This tutorial teaches how to build a css navigation using sprite images. With the mobile web becoming more important than ever before, load time and the size of a web site are some of the biggest factors to consider when developing a site for mobile users.

16. CSS3 Dropdown Menu

Learn how to create Mac-like multi-level dropdown menu that author’s created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome.

17. Create an Advanced CSS Menu Using the Hover and Position Properties

Starting with a photoshop file and finishing with semantic HTML and CSS, you’ll be creating an advanced CSS navigation menu using its :hover  and position properties.

18. Create Vimeo-like Top Navigation

Learn how to re-create Vimeo style dropdown menu. The menu drops down when you hover over the search box and it offers you different search options that you can choose and narrow your search. The base for this tutorial is simple CSS drop down menu based on unordered list

19. Sexy Drop Down Menu w/ jQuery & CSS

In this tutorial author would like to go over how to create a sexy drop down menu that can also degrade gracefully.

20. How to Create Dropdown CSS Menu

This CSS menu will have submenus and will use the web-techniques HTML, CSS and the “whatever:hover” behavior file to make things work in Firefox and IE6+.

21. CSS Overlapping Tabs Menu

In this tutorial you’re going to learn to create a simple, yet cool menu with overlapping tabs.

22. Rounded corner CSS navigation bar with jQuery

First, check out how to Turn your HTML list into a navigation bar with CSS. Then this tutorial will show you how to add some nice round corner effect to your anchor elements with jQuery. And yes, you will be doing this without using any image.

23. Simple CSS Vertical Menus

In this tutorial you will learn the basics of creating simple vertical menus for your website using only HTML and CSS.

24. CSS Navigation Rollovers With Drop-downs

First read Super Fantastic CSS Navigation Image Rollovers, then come back to this tutorial and learn how to code your images into working CSS menu.

25. Navigation Bar With Tabs Using CSS and Sliding Doors Effect

Read short explanation about how to use PHP URL variables to set a tab “active” when the relative page is loaded.

26. Simple CSS Vertical Menu Digg-like

This tutorial explains how to implement a simple vertical menu digg-like using CSS and javascript to show/hide sub-menu.

27. jQuery Style Menu With CSS3

In this tutorial you will learn how to create an animated sliding vertical menu using CSS3 without any JavaScript.

28. Apple’s Navigation Bar Using Only CSS

Following this article you are going to learn how to make the toolbar below, using nothing but HTML and CSS.

29. Create a Slick Menu using CSS3

In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript).

30. Create Windows 7 Start Menu Using CSS3 Only

Test CSS3 offered opportunities and create slick Windows 7 menu using only CSS3.

Buttons

1. Gradient Buttons with CSS3

A quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button showing people just how amazing CSS3 is.

2. Liquid & Color Adjustable CSS Buttons

Learn how to save time and adjust button color with CSS.

3. CSS3 Gradients: No Image Aqua Button

Create Mac OS X style aqua button with CSS3 using no images.

4. Sexy CSS Hover Button

Learn how to bring two Photoshop files into functional web buttons.

5. Creating buttons with CSS3

The following example demonstrates how to create nice looking, dynamic buttons that are fully scaleable using the new CSS3 properties border-radius, box-shadow and RGBa.

6. Roll Your Own Google Buttons

Create Google style buttons with CSS3 where no images are required.

7. How to make sexy buttons with CSS

This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS.

8. Better Button and Nav Interactions

Create iPhone style glowing button using CSS3.

9. Roll Over Button Tutorial

In this XHTML CSS tutorial you’ll learn how to create a button for a web page using Photoshop, XHTML and CSS. More specifically, you’ll learn how to create a button who’s hover state image is preloaded.

10. How to Build a Simple Button with CSS Image Sprites

Take a look at building a simple button using CSS image sprites, starting right at the beginning in Photoshop and finishing with the complete coded example. This one’s a good one for anyone getting started with CSS!

11. Fast Rollovers Without Preload

When using CSS image rollovers, two, three, or more images must be loaded (and often be preloaded for best results). We’ve got one image for each state (normal, hover, active, visited etc). Putting all states into one image makes dynamic changes faster and requires no preload.

12. Pretty CSS3 buttons

Learn to create a set of styles that are both cross browser compliant and degrade gracefully for non CSS3 compliant browsers.

13. How To Design A Sexy Button Using CSS

Learn how to create simple good-looking button getting it by almost only by CSS.

14. Radioactive Buttons

Create awesome looking and engaging buttons by using CSS animations to give them all that radioactive feel.

15. Beautiful CSS Buttons With Icon Set

This tutorial illustrates how to design nice clean buttons using some lines of HTML, CSS code and proxal icon set.

16. Building Beautiful Buttons With CSS Gradients

We’ll build a nice-looking embossed and beveled button using gradients and existing CSS properties, where you don’t have to regenerate images every time you change text, pages will load much faster because you don’t have to download separate images and it allows text to be easily localized.

17. CSS3 Gradient Buttons

In this tutorial author’s going to show you how to put the CSS gradient feature in a good practical use. Check out demo with a lot of buttons.

18. Build Kick-Ass Practical CSS3 Buttons

Learn to take advantage of modern CSS3 features and create pretty button just with code.

19. CSS Only Button

Another tutorial showing you that you can live with CSS only.

20. How to Make Nice CSS Buttons

Learn how to use pseudo-class and apply the same CSS styling for all your website’s buttons.

21. Cross-Browser Rounded Buttons with CSS3 and jQuery

Simple a solution for developers to create flexible buttons with easily changeable text.

22. Making CSS Rollover Buttons

In this tutorial, we’ll show you how to create easy, search-engine-friendly rollovers, using nothing but HTML, CSS and images. No JavaScript or IMG tags in sight!

23. Recreating CNN’s Beveled Navigation Buttons with Pure CSS

This brief tutorial shows beginners that creating images for CNN’s beveled style navigation isn’t necessary.

24. Creating a Glassy Non Div Navigation Bar

This tutorial will show you how to style and control lists in CSS, as well as showing you the valid ways of using lists and where to use them.

25. CSS Button Sprites Tutorial

In this post author will show you how to implement the image of a two-state button into your design.

In this collection, you’ll find 32 Very Detailed Tutorials on Converting High Quality PSD Designs to HTML and CSS. These tutorials would help you to improve your coding skills and techniques.

1. The Design Lab: PSD Conversion

In this tutorial you’ll be learning how to code design lab layout tutorial.

2. Coding Up a Web Design Concept into HTML & CSS

In this walkthrough you’ll go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.

3. Coding a Web Layout in XHTML and CSS

In this tutorial we’ll be learning how to code a web layout. Hopefully it’ll be good practice for anyone who doesn’t really know how to use XHTML and CSS. Moreover, this tutorial acts as a great introduction to CSS and XHTML.

4. How to Design a Blue Marketing Company Layout in Photoshop

In this web development tutorial, you will learn how to code a web page template from a Photoshop mock-up from a previous tutorial called “Create a Clean and Professional Web Design in Photoshop” using HTML/CSS.

5. Coding: Corporate WordPress Style Layout

In this tutorial you will learn how to code the Corporate WordPress Style Layout into xhtml and css.

6. Digital Curriculum Vitae: PSD Conversion

This tutorial you’ll be walking through the process of coding your “Digital Curriculum Vitae” into a working HTML/CSS Template.

7. Design & Code a Cool iPhone App Website in HTML5

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial you’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

8. Design and Code Your First Website in Easy to Understand Steps

In this tutorial, we’re going to design and code our first website in simple, easy steps. This tutorial was written for the beginner with the hope that it will give you the tools to write your own standards-compliant websites!

9. Coding a Band Website Created in Photoshop

In Part 1 of this tutorial, you learned step-by-step how to design an awesome band website in Photoshop. Now in Part 2, you’ll learn how to take that PSD and turn it into clean, working XHTML/CSS code.

10. Coding: Design Lab TV Styled Layout

In this tutorial you will learn how to code the Design Lab TV Styled layout into xhtml and css.

11. Personal VCard Pt.2

In this tutorial you’ll be converting the vCard into a 4 page template.

12. How to Code up a Web Design from PSD to HTML

The tutorial covered the process of designing our site concept from sketch to finished PSD design.

13. How to Design and Code a Flexible Website

In this tutorial, you’re going to be designing and coding a simple blog-style web-page. You’ll pay special attention to making your design flexible and accessible by using clean and simple XHTML and CSS. This tutorial is aimed at beginners, and anyone looking to improve the accessibility of their web designs.

14. Create an Animated “Call to Action” Button

In this web design and development tutorial, you’ll get a walkthrough for creating a “Call to Action” button sprite in Photoshop as well as how to use jQuery to animate it. This tutorial is broken up into three sections: Photoshop, HTML/CSS, and JavaScript.

15. Code a Corporate Website from a Photoshop Design: PSD to HTML Tutorial

In this tutorial you will walk through the process of coding Corporate Website design in HTML and CSS.

16. Hosting Layout #2: Sitebuild

Learn how to code a Hosting Layout using a free PSD file.

17. How to Create a Lifestream of Your Online Activities

A lifestream is a simple website that compiles your online activity in real time and displays it in chronological order. These days all the cool kids have personal lifestream sites, so let’s take a look at creating our own website that pulls in a range of RSS feeds through SimplePie and displays them together in a cool design.

18. Design and Code a Slick Website From Scratch

In this second part of the tutorial, you will code your design into a standards-compliant, cross-browser xHTML, CSS, and JavaScript/jQuery layout. Fire up Coda, or your editor of choice… it’s coding time!

19. Minimal and Modern Layout: PSD to XHTML/CSS Conversion

In this web design tutorial, you’ll see a process for converting a Photoshop mockup to working HTML/CSS template. This is Part 2 of a tutorial series that will show you how to create the design, and then convert it to an HTML/CSS template.

20. How to Code a Clean Portfolio Design

Coding a Clean Portfolio Design into HTML/CSS.

21. Web Design Layout #10: Sitebuild

Today you’ll be taking through the process of converting web design layout into a one page template.

22. How to Convert a Photoshop Mockup to XHTML/CSS

Follow this walkthrough of coding up a graphical website layout into valid, standards compliant XHTML and CSS. Starting with the initial process of exporting the individual images from the Photoshop document through to building the complete page.

23. How To Build Your Own Single Page Portfolio Website

Let’s take a look at producing a single page portfolio concept in Photoshop, constructing the page in XHTML/CSS and adding some fancy functionality with jQuery.

24. How to Code a Grunge Web Design from Scratch

In this step-by-step web development tutorial, you will learn how to convert a beautiful and eye-grabbing grunge theme web layout–created from Photoshop in a previous tutorial–into a working HTML and CSS template.

25. Dark Layout #2: Sitebuild

In this tutorial you’ll be showed how to slice and dice the dark layout #2 PSD into a working template.

26. From Photoshop to HTML

You will learn how to make a generic business template from the Photoshop file that is included with this tutorial.

27. Coding a Clean & Illustrative Web Design from Scratch

In this comprehensive and step-by-step web development tutorial, you will learn how to convert a Photoshop mockup of a professional web layout design that features an illustrative landscape header into a standards-compliant XHTML/CSS template.

28. My PROject Pt.2: PSD To HTML

Today you’ll be converting your PSD into a one page working CSS template through this tutorial.

29. Coding a Clean Web 2.0 Style Web Design from Photoshop

In this web development tutorial, you’ll learn how to build a web page template from a Photoshop mock-up from a previous tutorial called “How to Create a Clean Web 2.0 Style Web Design in Photoshop” using HTML/CSS and the jQuery library.

30. Web Design Layout #9 SiteBuild

In this tutorial you’ll learn how to code the web design layout #9 PSD.

31. Portfolio Layout #10: Learn To Code It

Coding tutorial of the portfolio #10 layout. In this tutorial you’ll read the steps to take in slicing and coding the layout. Before attempting this tutorial i highly suggest you create the layout before hand and have it ready

32. Building a Website (2 of 3): HTML/CSS Conversion

In part 2 of this series, you begin the HTML/CSS conversion of the Photoshop mockup you created in part one.