Using CSS to create your website is the standard and proper way of constructing a web page. When you start any website design using css, the first step is to create the structure of the layout and the basic lists that will make up your navigation. If you are a CSS guru, then creating these CSS layouts and lists can be a fairly simple task. But, if you are a new or intermediate CSS developer, or, you create website templates and unique websites consistently, wouldn’t it be nice to have your initial layout and lists automatically created using proper CSS design? That way, you can move on to more fun aspects of constructing your website.
There are many resources available online to assist you in creating semantically correct CSS code, CSS layout and CSS lists. I have found these three sites, that offer automatically generated CSS code for these structures within your website. As a web design professional, and an expert in CSS (oh, yea, I’m super neat) I still find these websites PRICELESS, and use them often when beginning any web design.
The first is called, The List-O-Matic
The List-O-Matic automatically generates CSS code for any type of list or navigation element you’re trying to create. Just fill in the blanks within the list-o-matic CSS generators form, and the application will give you the HTML and CSS code for a list in the style that you propose. It offers CSS rollovers, CSS horizontal navigation, CSS vertical navigation and some highly creative color and graphic formats. Of course, you can alter the code to your liking once you’ve plugged it into your site…But, isn’t it nice to have the semantically correct CSS code automatically generated for you so you can begin to focus on the colors and graphical aspects?
The second automatic CSS creator is: Firdamatic
This website offers a complete CSS layout generator, focused on blogs and weblogs. It will take your current site, and construct it, using sematically correct CSS code, into a 2 column CSS layout or a 3 column CSS layout. The options are minimal, but the feature itself is amazing. I highly recommend this option for those who own a simple blog or weblog, and aren’t necessarily starting a highly unique and intricate website…
For you, there’s the: Layout-o-matic
This option leaves the CSS layout privy the availability to use the application to create small box models within box models, so that your site is constructed within your vision. It also offers CSS 2 column layouts, CSS 3 column layouts, CSS simple 3 columns, full page layouts, and the option to align the CSS layouts to the left or right. Check out all three of these resources…And, before you write them off as a waste because you are fully capable of creating the CSS code within your web site. I can say, as a web design professional and a CSS expert (ahem…there I go, tooting my horn again!) that they are useful, even if simply utilized as a time-saving technique. For the CSS newbies out there, this is absolutely the best way to watch your CSS design materialize into an actual example and to experiment with the way that different CSS lists and layouts are used.
I hope these tools are useful, as they 100% if used correctly. If you aren’t familiar with CSS code at all, these are also great resources to help you understand how the code works. It’s kind of like having a wysiwyg editor for CSS right at your finger tips!
Reference:
- Firdamatic
