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.
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.
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.
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.
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.
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.
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).