Drawter: Create HTML and CSS Codes Online without any Coding Knowledge
By on February 8th, 2010

If you are a blogger and always feared to change your blog’s design because you don’t know how to code, here is a reason to rejoice. Drawter is an amazing web based tool which can be used to generate blocks of HTML and CSS codes. You have to draw the shapes and input the CSS attributes of HTML blocks. Drawter will then generate the corresponding CSS and HTML code which you can use in your blog template.

How to Draw HTML and CSS code with Drawter

1.  Visit Drawter and select the “Draw” mode from the navigation. Draw a rectangle (node) with your chosen dimension.

drawter-draw-Css-code

2. Select the elements from the sidebar and choose the basic parameters of the page you are going to create. Give your page a meaningful title, select the document type and the page language.

set-web-page-details-drawter

3. To add content in a node, select the “Edit” mode from the navigation and click the node you want to edit. You will see a content box for adding text in the page.

add-content-webpage

If you want to insert hyperlinks, select the “a” module from the dropdown. Similarly, to add H1 heading, select “H1″ from the tag name dropdown.

4. To style the HTML block, set the font-size, font-color, background color from the next section of the toolbox. You can also use a background image for the block by adding the URL of the image in the “background image ” text box.

set-styles

5. Add all the style parameters you want for the chosen HTML block from the “Other box styles” section. Most of the known properties are included so that you can try your creative skills at ease.

set-style-attributes

When you are done adding all the style attributes, hit the “Generate code” button from the navigation. Drawter will generate the complete HTML and CSS code for the block you just designed.

html-css-codes-drawter

Once you have the codes, you can use them in your blog by pasting the CSS before the </head> section and the HTML after the <body> section of your blog template. Do you know any other tool which does a similar job or better? Share your ideas in the comments section.

Techie Buzz Verdict

Drawter is free and there are no signups required to use the service. I like the simplicity of the tool but one thing it lacks – you can’t code multiple pages at the same time. Yes, you can open Drawter in two separate browser tabs and design the pages. But it would be better if you can design two separate pages in the same browser tab, simultaneously.

Techie Buzz rating: 5/5 (perfect).

Tags: ,
Author: Amit Banerjee Google Profile for Amit Banerjee
Amit has been writing for Techie Buzz since early 2009 and keeps a close eye on web apps, Google and all things Tech. He also writes at his own tech blog, Ampercent. Follow him on Twitter @ amit_banerjee

Amit Banerjee has written and can be contacted at amit@techie-buzz.com.

Leave a Reply

Name (required)

Website (optional)

 
    Warning: call_user_func() expects parameter 1 to be a valid callback, function 'advanced_comment' not found or invalid function name in /home/keith/techie-buzz.com/htdocs/wp-includes/comment-template.php on line 1694
 
Copyright 2006-2012 Techie Buzz. All Rights Reserved. Our content may not be reproduced on other websites. Content Delivery by MaxCDN