I was in the same situation, unsure whether to utilize tools like Edge / GWD and risk being stuck in their eco-system, or take the plunge and just hand code everything to have full control. Long story short, I'm now wrapping up my second set of hand coded HTML5 banners, and I'm really happy I took on the challenge of dealing with the HTML / CSS / cross browser issues. It's comforting and confidence inspiring to be completely in control and I'd highly recommend taking on that small challenge up front as it will continue to pay off down the road.
So how did I start?
Watch a tutorial
First, I sat down and watched this great tutorial series from Lynda.com on HTML5 banner development with GSAP. For me, it really helped to watch someone else start with a blank canvas and turn it in to a fully animated banner to give me that 1000ft perspective on the steps I would later have to follow.
Use modern, helpful tools
Before I began coding, I decided I needed to take a look at my options for code editors and plugins—anything to make my life easier. I ended up selecting brackets as my editor of choice. Their live preview feature, which instantly shows updates to your banner in addition to highlighting the elements you're currently working on has made HTML/CSS development so much less tedious. Also, I've installed a few plugins for it that I'd highly recommend:
Image dimension extractor - Allows you to get dimensions of images in your CSS with just a right click.
Ternific - Code hinting (Because I'm not an HTML/CSS wizz, it helps a ton to see hints)
Insert Codehint With Tab - Makes it quicker to insert the above hints (I fell in love with this in XCode and can't go back)
colorHints - Show colors you've used in your CSS file before as code hints
Past and Indent - Properly indents code that you've pasted, one more minor annoyance squashed
Emmet - Opens up the doors to tons of shorthand ways of writing HTML
Rather than using the Lynda.com files to start with, I chose to use some sample files from Google that already implemented enabler.js, which allows for 'polite loading' and some more advanced tracking methods. I wasn't sure if I would need to actually use enabler.js for my banners, but I thought it'd be helpful to get familiar with it and have it baked into my banner before I got too far into development.
I must have spent 80-90% of my time just getting all of the elements positioned correctly. I couldn't tell you how happy I was when I finally got to start animating with GSAP—finally, something I'm familiar with!
Cross browser testing
The part of the process that I dreaded the most; cross browser debugging. As I mentioned earlier, I used brackets 'live preview' feature during development, which meant I was only checking in Chrome.
I use a mac for development, so I needed to setup Parallels to run Windows so I could properly test all browsers and OS's at the same time. I had the banner open on Windows in Firefox, Chrome, and IE8 (yes, some people at our company still use IE8). On the mac, I tested in Firefox, Chrome, and Safari. I also opened the banner in the iOS simulator to check mobile devices.
The results: not too bad! GSAP did a great job of translating the animations across all browsers. Some browsers seemed to handle the animation more smoothly than others, but that's to be expected.
The only headache was IE8 (surprise!). Simple things like gradients and opacity required stupidly complex css. Scaling, even with GSAP, didn't seem to work at all, and fading opacity of elements in or out resulted in hideous black outlines showing up. I also had to come up with workarounds for the lack of SVG support.
The very first banner took me a while. I'm certain it would have been much faster to use Edge or GWD for that one, but the subsequent banners have taken a fraction of the time now that I'm familiar with the workflow, and have a basic template to start from. I'd highly recommend taking the plunge and hand coding your banners.
I'm far from an expert, but if any of you have questions please don't hesitate to ask.