I'm interested in hearing about how people engage with the coding process. This isn't necessarily about CoffeeCup's great software itself, it's about how you generally edit code and finding the best way to do it.

Currently I use Brackets as my main text editor, but what I usually do is to open up Google Chrome and do all my HTML/CSS experimentation using the Developer Tools in there. Then, if I'm satisfied with the changes, I will make them in Brackets. This way works fine for me, but I'd like to know if anyone does things differently — or indeed the same as me.

What I find with Brackets preview feature is that it is not live. You have to save the changes you make and refresh the page to see your changes. The problem with this approach is you could make a load of changes, save and then realise you've made a mistake so you have to modify the code again. I know Coffee Cup's Web Editor has a live preview option, but again, if you change code that you regret, you have to change it back. For one single change, you would press CMD + Z/Ctrl + Z to undo. But if you make several changes that you need to change back, it can be confusing sometimes.

That's why I believe that my approach works quite well. It's all about making a change or two (or addition) in Chrome, being satisfied with it and then implementing it in the Brackets code. If I were to make wholesale changes in Chrome, copying them over individually may be difficult, because I would have to remember where each one was, or copy the whole code from Chrome into Brackets (which I never like doing).

No matter what editor/browser I use, I start with the actual page, get the simple stuff in place and then copy that page to create a 'test' version to continue working on. When a section/script is added and all works as it should, I copy/paste it into the original page.

If something 'blows up' my layout on the test page, I can either re-work it or just start fresh with another copy from the original.
This is good if you have finished pages/sections that you need to add something to or shift things around. You don't have to worry about having a live page that's wonky while you work out the new positioning/breakpoints, etc. Do it on the test page then swop them.

If your test page is live, you can just refresh the browser to see your changes. Xampp, Wamp, etc. provide a private virtual server, or you could set up a Git or Bitbucket account for testing and version control.

I usally think through the coarse layout and create the necessary css for it. Then I start one the html page itself, and it is pretty easy typing if you have the ID or class names already. For tricky things I do as Paintbrush, make a copy to work on, before I put the code into the 'real' files.

I do the same as Inger and Paintbrush. Create a copy and do all my alterations on that. Once satisfied I change it's name to the actual page.