https://github.com/othree/html5.vim
https://github.com/hail2u/vim-css3-syntax
Chrome Developer Tools are invaluable in my workflow.
https://developer.chrome.com/devtools
I can't speak to what the majority of designers use. I would guess that Dreamweaver is less popular today than it was before. I might be wrong, though?
Generally, each page type (template) is drawn at a desktop and mobile resolution to dial in the responsive experience and visual elements on the page. Designers have personal app preferences but it's always something from the Creative Suite - Photoshop, Illustrator, InDesign or Fireworks. Some people tinker with wireframing or prototype apps but I've found them distracting.
We sketch wireframes on a paper and go right to coding for something small or internal. When client approval is needed there is always a polished design presented in PDF or PNG with notes explaining the intended functionality.
I like editing in Coda (paid) and Brackets (free). Classic WYSIWYG programs like Dreamweaver are being replaced with interactive apps like Adobe Muse or hybrid custom-hosted templates like Squarespace.
There are so many good CSS frameworks available that you can learn one and make an excellent page in a day. We use Bootstrap for the full blown responsive CSS/HTML/JS framework and Susy for a CSS-only Sass system.
Our new interns start by learning these paid HTML Foundations and Bootstrap courses. https://www.codeschool.com/paths/html-css
Grunt, Bower and Yeoman are the command line tools we use. Grunt helps you automate tasks like minifying your code to save file size or update your browser live while writing HTML, CSS and JS. Brackets has Grunt built in so local page refreshing already works. Bower lets you install lots of well tested CSS and JS (with version dependencies). Yeoman lets you create the shell of that "pro" web page or app from the command line, leveraging Grunt and Bower.
I can do something like "table>(tr>(td>p{$}) * 3) * 4" and then press tab, which would generate for me:
<table> <tr> <td> <p>1</p> </td> <td> <p>2</p> </td> <td> <p>3</p> </td> </tr> <tr> <td> <p>1</p> </td> <td> <p>2</p> </td> <td> <p>3</p> </td> </tr> <tr> <td> <p>1</p> </td> <td> <p>2</p> </td> <td> <p>3</p> </td> </tr> <tr> <td> <p>1</p> </td> <td> <p>2</p> </td> <td> <p>3</p> </td> </tr> </table>
Edit: Except that there would be indentation too, which HN removes.
I know the basics of HTML/CSS too (I suppose all programmers do), but still I don't feel qualified to make a web page. It seems to me that it's more a designer than a programmer task, am I wrong?