Find solution
How to create submenu HTML?

Is it a good idea to create visual HTML/CSS editor?

  • This is my first question on Quora, I'm CS student, I often work on web-based applications. So I came to the idea to create visual HTML/CSS editor because I write many CSS and HTML and want to reduce markup creation and visualization time. So if I had simple tool just for creating layouts would be great. Maybe someone say that I must understand layouting and I have to learn semantics of web and so on, I know that part is important and also its better to write code during learning process, but when you have to design HTML structure for many different websites and than you have to write many CSS rules. Wouldn't be great to have simple tool which will have drag and drop capabilities? Maybe I'm wrong, maybe not but so far I can't find any good Open Source visual  editor, I can't even find good paid ones. I want to know your opinion, would it be useful to work on this idea, create open source project or something? If yes please include what you think are advantages of such tool. If no please explain why it is a bad idea. Thanks :)

  • Answer:

    If you're serious about producing quality websites, then forget about using a visual editor. The visual editor that can produce professional standard HTML and CSS code does not exist and possibly never will. Great HTML and CSS is a serious skill. The kind of judgements and decisions a professional web developer has to frequently make are beyond any visual editor I've come across, and the quality of code visual web page editors produce is generally poor and results in compatibility, maintainability and accessibility problems. What you can do to speed up your development is to use a 'boilerplate' to start off your projects – in other words, a load of files and code that are useful across a wide range of different web projects. The best boilerplate to use will depend on the types of project you are embarking on, but possibly the most popular is HTML5 Boilerplate: http://html5boilerplate.com/ Of you could always produce your own. You also might like to keep a library of commonly used code snippets. If you're mainly working with web-based apps rather than web sites, you might find it really useful to check out javascript frameworks geared towards rapid prototyping. There are many out there, but one popular open source option is Twitter Bootstrap: http://twitter.github.io/bootstrap/ Although a visual editor is not really a professional level option, it's well worth looking at editors that provide a real time visual preview of your work, so that you can see the difference your changes make to the web page appearance instantly, as you type. Two of the most popular such editors for Mac are Code and Espresso (I don't know what equivalents there are for PC). http://panic.com/coda/ http://macrabbit.com/espresso/ Working with a live preview makes a huge difference to me, especially for CSS editing. I hope this helps.

David Cole at Quora Visit the source

Was this solution helpful to you?

Other answers

Many of the sites have evolved way beyond HTML and CSS. We're talking a backend that serves up that HTML, we're talking single page apps written in Javascript. We're talking CSS pre-processors or even languages that compile into HTML like Jade. HTML and CSS is just the beginning and if you're doing a website that goes beyond 4-5 pages, you're bound to use some sort of templating. If you want to store some data in a database, you're bound to use a server-side language. My point is, HTML and CSS is what the browser sees. But what you as a coder should see is something else. Something that's easier to manage than CSS. Something that compiles into HTML. HTML and CSS is just the foundation, so to speak. There should be so much else going on behind the scenes. In the end, you're creating a tool that just builds a foundation that you then have to modify anyway to hook up a backend, to connect to a database, etc. If you own a Mac, take a look at Rapidweaver for example. It should give you what you're looking for maybe. But again, if you plan on getting serious about this, forget about drag and drop, get your hands dirty with code and get to know your code editor as best as possible. You'll find that the shortcuts it provides and the workflow you get accustomed to is even faster than drag and drop. :)

Bogdan Lazar

I think that Dreamweaver already does an alright job of a GUI (graphical user interface) for users that are new to basic HTML/CSS. It has a good WYSIWIG (What you see is what you get) format so you can see what your code looks like. I am not convinced it's a great idea since people that want an easier way to get a website up will usually rely on a variety of templates on the web that do it for them with easy content management (CMS). Sites like Homestead in the 90s essentially did what you are talking about, and they are long extinct. However, I am a big fan of user projects as a proof of concept, or as a learning tool. Perhaps you can make it just for yourself and put it in extra functionality that you would like to see. It would be a great piece for your portfolio.

Ash Hathaway

Related Q & A:

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.