Turn Your Sketches into CSS Based Websites

Published in: CSS - Web Design

Most online WYSIWYG editors offer a Microsoft Word style interface where you can add text, tables, images, etc. and the editor will then generate the corresponding HTML code without you having to learn any of the programming languages.

Create CSS Based Web Templates Online


WYSIWYG editors will generally write the code using HTML tables but if you are looking to create a pure CSS based layout, where the presentation styles are separate from the actual content, you should check out Drawter.

Think of Drawter as a white canvas where you can actually “draw a web page” using your mouse. For instance, if you want your website to have a fixed-size header, a left sidebar and maybe a footer, you can simply drag-n-draw these areas on the canvas using the <div> tag and generate the code.

CSS based WYSIWYG editor Yahoo! Grids

Each tag in Drawter is presented as a separate layer and you can draw one layer over the another. For instance, you can put the <p> layer over <div> which can also contain the <img> layer to hold images or <h1> for headlines. Obviously, you need to have some understanding of HTML and CSS in order to use these tools.

Grids Builder is another nice tool that you may use to quickly create CSS based layouts though it supports only basic designs — - your template can have a header, multiple columns for content, sidebar and a footer. Here’re some sample templates created using the Grids tool.

Related: List of Free Website Building Tools

Published in: CSS - Web Design

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
Amit Agarwal

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch