December
31

My CSS Menu

My CSS Menu is one of the coolest websites I've been to in a while. If you are in need of a nice looking CSS menu but don't know where or how to get started, or maybe just don't want to start from scratch then you are in luck; My CSS Menu is your answer.

You can currently choose from 22 different already designed for you CSS menus (I'm sure there are more on the way). They have very basic menus and very advanced menus and everything in between to meet all your needs. While all of these options are great to have it is not by far the best part of the site though. Once you decide on a menu type you have the ability to customize it to meet your exact needs including size, colors, animation effects, and more. This customization turns 22 options into an almost endless amount of different menus.

The CSS editor (see screenshot above) is very fast and easy to use. The GUI is well designed and intuitive. You can preview your changes, save changes, and import saved menus. You can use a designer mode, CSS mode, and HTML mode which feel and look a lot like Adobe Dreamweaver for those of you that are familiar with the product.






October
27

The Free HTML Form Template Gallery offers 75+ HTML form templates to fit a wide array of needs. They have form templates for registration, mailing lists, surveys, order forms, and much more. These templates can be downloaded as a zip file or customized to fit a more specific need you may have (requires a free account). The zip files come complete with all CSS, HTML, images, and JavaScript needed to get the forms functioning.

The Free CSS Form Template Gallery offers 50+ CSS form themes freely available for you to use on your site.  All forms can be downloaded as a zip file they way they are or customized to your liking (requires a free account). The zip files come complete with all CSS, HTML, images, and JavaScript needed to get the forms functioning.

All HTML templates and CSS themes are  available under the Creative Commons Attribution license, which means you have the right to copy, distribute, and adapt them as long as you attribute the original work to Wufoo.com. There is a readme file included in each zip file that includes the license terms and conditions.






September
29

HTML Dog offers HTML and CSS tutorials for a beginner, intermediate, and advanced web designer/developer. The website is very well designed and easy to navigate. The information in the tutorials is clear, concise, informative, very useful, and overall well written. You can also get information from additional references including HTML tags and CSS properties. There are articles available that build on the tutorials providing a more detailed understanding of certain topics. If you would like to see what you have been reading about in the tutorials in action, you can view a large number of examples spread across seven different categories.

The tutorials, articles, and examples from HTML Dog are written with a strict adherence to the Web Standards created by the W3C. The information was created by Patrick Griffiths who has been a front-end web developer using HTML and CSS since 1999. He has contributed to well known and credible sites like A List Apart and the CSS Zen Garden.

If you find the information useful and would like to have a copy of it, you can purchase a copy of the HTML Dog book which includes information similar to the tutorials and articles. You can get your copy at Barnes & Noble, Borders, and Amazon.com.






September
26

Creating a theme is a multistep process. You have to pick the color scheme, decide how many graphics to include and what purpose they will serve, as well as decide on a layout. Sometimes it isn't easy to decide on a layout and it would be nice to have some examples and ideas to look at. That is what I'm focusing for this post. Here are 15 great resources to help you pick your layout and download the CSS to get you started.

Free-CSS offers over 250 different free CSS layouts for you to use. You can browse them and preview them as a thumbnail as well as click on each to see a demo in a GreyBox. Their terms of use are available in each zip file as well as on the website. The authors give this general explanation "All of the CSS layouts that are featured within Free CSS are distributed under some form of GNU/GPL License or under a Creative Commons License or are free" (free-css.com).

IronMyers offers three different layout collections. They are the 750px collection which includes 56 different layouts, the 950px collection which includes 56 layouts, and the 100% collection which also includes 56 layouts. You can view an image of the layout as a preview or you can view all the layouts in demo format.

Code-Sucks.com has created a number of different examples of CSS layouts. You can see simple images of them or view them as a demo layout. All 95 of their layouts validate against the Strict DOCTYPE.

Layout Gala offers 40 different layouts that are viewable as thumbnail image previews or demos of the actual layout. You can download each layout individually or download all 40 in a zip file if you want. All of the layouts are based on five sections; they each include a header, content, navigation, other stuff and footer section.

Max Design offers a number of CSS layouts covering the typical ones like two and three column layouts. The main advantage to this site is the addition of tutorials to each of the layouts. There is an explanation and help offered for each layout to help you learn a little more than just looking at samples, demos, and code. The code is available to copy and paste for your use.

Nice and Free CSS Templates offers a number of layouts including three columns, four columns, and box layouts. Each template is available as a thumbnail preview, a demo, and the CSS code is available to copy and paste for your use. All of the templates validate to W3C standards for XHTML 1.0 and CSS.

CSS Play offers 14 different CSS layouts including three column and fixed. You can view demos of the layouts and the CSS code is displayed to copy and paste for your use. The copyright and usage policy is listed on the bottom of the main page.

For those of you who already own Dreamweaver CS3, it has a number of CSS layouts built in. You can easily find them by simply creating a new HTML file and choosing one of the templates provided. They offer previews next to the choices as a selection is made.

About.com offers a huge wealth of information including a number of CSS layouts. There are more than 25 layouts available, each with a demo to look at as well as a detailed description about the layout. You can save the templates for use in your websites. They also have listed the terms of use on their website.

SSI Developer offers CSS layouts in three different categories. They have created two column, three column, and general templates. You are able to view an image preview, view a live demo with some generic content, and download the layouts as a zip file.

The Dynamic Drive CSS Library offers a number of great CSS layouts, among other great resources. They have created almost 50 different layouts in five categories. You can choose from two column, three column, fixed layout, flexible layout, and CSS frames. Once you decide on a layout, you can view an example and get a copy of the code.

Mitch Bryson has created eight basic CSS layouts. Each layout has a thumbnail image preview, a demo page, and a download link to the layout zip file. The layouts include one column, two column, three column, fixed, and fluid.

The Layout Reservoir offers two main CSS layouts. There is two column and the the three column layouts available. The two column layout has an example with a left hand menu and a right hand site menu. Each layout has the CSS code available to copy and paste for your use.

Glish has compiled six of the most common CSS layouts used on the web. They give examples and the CSS code for 3 columns, the holy grail, 2 columns, ALA style, 4 columns, all fluid, 3 columns, static width and centered, and nested float. The offer the code in a textbox at the bottom of the examples for you to copy and paste for your use.

WebDev offers two column and three column CSS layouts licensed under a Creative Commons License. Each layout has a demo available to check out. Along with the typical two and three column layouts, there are also some discussion board layouts, threaded and unthreaded, as well as some random template layouts. You can download all of the layouts in one zip file.






September
3

The HTML Playground offers XHTML and CSS references by example. The site is still in beta at version 0.4, but offers an easy to use interface that makes digesting all the information displayed simple. It is a fast loading application and I have just found it to be overall a great tool for learning the basics of HTML and CSS.

The concept is pretty easy and follows an intuitive design and interface. The initial information is loaded from the left top pane and allows you to make a selection. Once you have chosen what you want to learn about, it loads more information into the panel directly to the right. Additional information, if available, is loaded underneath the initial pane. The last pane to load contains the examples and a way for you to try it out yourself. The design follows the logical left to right, top to bottom reading layout so you don't miss a beat when you start using it. Although this seems like a no brainer, think of how many blogs out there, like mine, have the menu on the right, which took some time to get used to when it first started showing up. This simple design principle makes the app very easy to use.

The examples pane includes code highlighting to make reading and learning the code easier. The attributes pane in the bottom left contains a color picker of basic/common colors so you can start to learn the Hex codes for colors (for example: white = #FFFFFF). There are also basic choices for other attributes like align and border to help you learn what is available to customize those tags. The search function works well in allowing you to quickly search and find a specific tag to learn.

This is a free website and a good one to bookmark. I'm not sure how much recent activity there has been in development because the last blog entry was back in December of 2006. However, there has been some activity in the community section of the site as recently as July of 2008, so there may be some continued development taking place. Either way, the website is very useful in its current condition. I hope that there will be more features and information continually added, but for now, check out what's there.