Мне понравился редактор Brackets для верстки. В реальном времени выдает то что вы сверстали, правда пока поддерживает только Google Chrome. К нему поставьте дополнение Emmet, оно в разы ускоряет и упрощает написание кода.

К примеру, чтобы написать этот код:

<div id="header">
    <div class="menu">
        <ul>
            <li class="btn1"><a href=""></a></li>
            <li class="btn2"><a href=""></a></li>
            <li class="btn3"><a href=""></a></li>
            <li class="btn4"><a href=""></a></li>
            <li class="btn5"><a href=""></a></li>
            <li class="btn6"><a href=""></a></li>
            <li class="btn7"><a href=""></a></li>
            <li class="btn8"><a href=""></a></li>
        </ul>
    </div>
    <div class="box">
        <div class="b1"></div>
        <div class="b2"></div>
        <div class="b3"></div>
    </div>
    <div class="s1"></div>
    <div class="s2"></div>
    <div class="s3"></div>
    <div class="s4"></div>
    <div class="s5"></div>
</div>

С помощью Emmet достаточно написать одну строчку:

#header>(.menu>ul>li.btn$*8>a)+.box>.b$*3^.s$*5