Turn Your Sketches into CSS Based Websites
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.
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.
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
Google Developer Expert, Google Cloud Champion
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.