Hi
I’m new to html, css and web design. I’m trying to avoid Themed Web-site templates if I can and write all of the code myself where practical.
I’ve just downloaded CoffeeCup, currently $69 for a licence, where its possible to preview a browser window as you are writing the html or css. I’ve also noticed that CoffeeCup offer a 20 percent discount, if you pay in the first 21 days. Before I decide to part with my hard-earned cash, can anyone recommend any other html editors which enable you preview a browser at the same time as editting the code - I think that checking the preview screen at the same time will help me to learn quicker as I go along.
Has anyone any more recommendations on which software tool to start write html and css with please.
Kind Regards
Matt
Hi Matt. It is a very personal thing what editor to use. I prefer to use notepad++ where you can preview in most modern browsers . Others prefer programs like Dreamweaver
You can preview your work in browsers no matter what editor you use. For example, if you are working on a .html page, have it open in your text editor and all your browsers at the same time. Make a few changes to the code, save, then refresh each browser to see the changes. Works for me.
There are many good and popular free code editors available, and some really nice commercial ones, too. Sublime Text 2 is pretty popular these days.
Hi
But don’t you find it annoying that you have to keep going to the browser and clicking Refresh everytime you change one litte bit of code?
On average, per website, you could be doing, say 2000 or more tests or 2000 needless mouse movements and clicks!!! Combine that will closing the browser window then you could be looking at say 3000+ needless mouse clicks and mouse movements. Wouldn’t it be more time-efficent for the browser to give you a preview in real-time? Have you never considered using CoffeeCup? or something similar?
On average, per website, you could be doing, say 2000 or more tests or 2000 needless mouse movements and clicks!!!
It’s good exercise for my finger.
Combine that will closing the browser window then you could be looking at say 3000+ needless mouse clicks
There’s no need to close the browser. I just keep it open.
Wouldn’t it be more time-efficent for the browser to give you a preview in real-time?
Possibly, but it’s not a biggie for me. Although you can do this with your browser anyway. Using Chrome dev tools, for example, you can add styles and HTML in real time, and then save this to your files when you are done. (Soon this will be automatic—but for now I think you can only do it with JS.)
Have you never considered using CoffeeCup? or something similar?
I’ve considered it, and tried a few things like that, but didn’t like them. I also don’t trust the “live view” in programs like this. Dreamweaver’s Design View, for example, is very unreliable. The only real testing ground is the browser itself.
Adobe is working on a code editor that does this, called Brackets, but it’s at an early stage right now.
Hehe, there are lots of threads around here starting with something like—“I built my site using Dreamweaver Design View, and it looked perfect, but now I find it is totally broken in real browsers. Help!”
I’ve just thought of a new gadget for Developers that could make millions of dollars!!! What if there was a pedal (similar to a guitar pedal) you could press which loaded a Browser window and then closed the Browser again when you let go.
That would give the Developer more exercise and be quicker than finding the mouse every time!! lol
The flaw in your argument is that you’ve forgotten what a stingy bunch web devs are, who seem to want everything to be free. Millions of downloads, maybe, but dollars … no.
I suppose refreshing the browser (never need to close it, as it has been mentioned) takes as much time as it does for the program to lag and update what I’m doing as I’m doing it. Are you able to preview your site in Firefox, Chrome and (shudder) IE in Coffeecup to see how it’s displaying in each?
I always just use Notepad, kept smaller than the browser behind it. But my choice is, perhaps, just because I crave independence and stubbornly want to fight the man, not being bound by corporate software! /says the person using windows 7
Hi Lume
I’ve not played about with CoffeCup much as yet but the Preview is IE9 by default but can be altered to auto preview a different browser. You can of course press a function key to load a host of browsers at choice.
What I also like also is that you can click anywhere within the Preview window and it will automatically take you to the html code relevant. I think it should also take me to the correct css part as well although I’ve not played about with that part yet.
The preview screen only take a few seconds to refresh so thats pretty good. At least I don’t have keep loading a browser up, refresh it and close it down again every 5 seconds.
CoffeeCup is useful for me as I’m not a full-time or even a part-time pro web-developer. What I don’t like so far is that the IntelliSense is not as good as what you get with Microsoft Visual Studio Express but maybe there still developing it. For example, it doesn’t automatically give a description of what each attribute does and it does not kick in when it should do. The CoffeeCup IntelliSense is not even as good as Microsoft Web Matrix(WM) which is completely free for developing websites. Saying that, MS WM does not offer a preview screen as yet - I heard that Google Chrome has a Live Developer mode but not sure how to get that going as yet.
For me to buy a CoffeeCup Licence though, they will need to give me at least 50% discount (reduced to $30 or less - I’d only consider for $20 to be honest) to make me take their offer seriously
I say Dreamweaver all the way, and yes you preview in a real browser, but maybe you want to see what youre doing, especially when creating a template. I use DW with a dual monitor setup, so on one monitor there is the live preview. And im doing the thing with refreshing the browser window thousands of times when dealing with cross-browser compatibility issues.
In good browsers like Chrome, you can right click on any part of the page and choose Inspect Element to see the HTML for the element you clicked on and the CSS that applies to it. So again, the browser itself makes it easy to examine what’s going on.
The preview screen only take a few seconds to refresh so thats pretty good. At least I don’t have keep loading a browser up, refresh it and close it down again every 5 seconds.
Hehe, you are still fixed on the idea of having to close the browser after every test. O well.
Thank you Ralph
I almost feel spoilt for choice now!!! and the Amaya website looks like it software comes from http://www.w3.org - which looks like its all official
I’m going to watch a couple of Youtube tutorials on Amaya and Aptana to see if I like the look of them first though
I’m currently using Microsoft WebMatrix and trying out CoffeeCup so far. The CoffeeCup IntelliSense is not as clean and friendly compared to WebMatrix because it used the same IntelliSense from MS Visual Studio which takes some beating!!
Don’t get a Browser Preview window with WebMatix though
but good when I start learning more about ASP.net Web Pages.
Amaya would be a very good choice in my opinion. Give it a try!
hmm… I have a question! Why do you want to learn more about ASP.net? Is it a personal choice?
Why ASP.net. My story is that I’m trying to stay in touch and being left behind technology-wise.
Also I need a well-known way to save data from my web-site entered by the user. From what I’ve seen so far, ASP makes it easy-ish to read and write the data.
I’ve bought a Wrox book call MS Beginner ASP.NET for Web Pages which means that I can include c#.net (or vb.net) within html pages or .cshtml pages.
So that’s my story. Why would you recommend something else or do you think that ASP is a bad idea perhaps?
A massive plus, as well, was that I find the ASP.NET forum a really friendly lot (a lot like the members at sitepoint). The forum also has free video tutorials on how to get started which makes a nice change from reading books all the time
Hi everyone
I’m learning html and css, and would like to use a free HTML CSS editor with Live Preview (to render the code in a browser in real-time).
This way I don’t have to save, then open close a browser each time. I only have time to learn css when I’m not at work, which is why I have to get a efficient as possible. I’ve not this week off work so it an ideal opportunity for me to learn it better.
I’ve tried CoffeCup HTML Editor but not impressed because I find the editor too fiddly but still want to stick to learning the coding side as much as I can.
Much appreciated to anyone who has any helpful advice.
Cheers
Matt
Millions of downloads, maybe, but dollars … no.