3 ms·

Related question: how do "pros" write web pages. Do they do it by hand or do they use some type of wysiwyg editor? I know the basics of HTML/CSS too (I suppose

Related question: how do "pros" write web pages. Do they do it by hand or do they use some type of wysiwyg editor? 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?

eropple 12y ago
YMMV, but everybody I know uses a text editor of some flavor. Some use specialized text editors like Espresso or Coda, but the most common I see is Sublime Text.
grimgrin 12y ago
I use vim with a few plugins to support newer CSS3/HTML5 related syntax. https://github.com/othree/html5.vim https://github.com/othree/html5.vim https://github.com/hail2u/vim-css3-syntax https://github.com/hail2u/vim-css3-syntax Chrome Developer Tools are invaluable in my workflow. https://developer.chrome.com/devtools 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?
McRask 12y ago
Quality text editor (Sublime often) + Emmet goes a long, long way
Raphmedia 12y ago
Raw html? I use Sublime + Emmet. I can do something like "table>(tr>(td>p{$}) * 3) * 4" and then press tab, which would generate for me: <table> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> </table> Edit: Except that there would be indentation too, which HN removes.
dylanvalade 12y ago
For sites created by an agency, making a web page is still a combination of designer and programmer tasks. Some people do both task types but it's usually a division of labor. 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 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.

eropple 12y ago

YMMV, but everybody I know uses a text editor of some flavor. Some use specialized text editors like Espresso or Coda, but the most common I see is Sublime Text.

grimgrin 12y ago

I use vim with a few plugins to support newer CSS3/HTML5 related syntax. https://github.com/othree/html5.vim https://github.com/othree/html5.vim https://github.com/hail2u/vim-css3-syntax https://github.com/hail2u/vim-css3-syntax Chrome Developer Tools are invaluable in my workflow. https://developer.chrome.com/devtools 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?

McRask 12y ago

Quality text editor (Sublime often) + Emmet goes a long, long way

Raphmedia 12y ago

Raw html? I use Sublime + Emmet. I can do something like "table>(tr>(td>p{$}) * 3) * 4" and then press tab, which would generate for me: <table> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> <tr> <td> 1 </td> <td> 2 </td> <td> 3 </td> </tr> </table> Edit: Except that there would be indentation too, which HN removes.

dylanvalade 12y ago

For sites created by an agency, making a web page is still a combination of designer and programmer tasks. Some people do both task types but it's usually a division of labor. 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 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.