Tools for easy CSS + HTML development

experiMental

I'm currently getting extremely tight deadlines for a website project.

Question: Are there any tools that speed up the creation of CSS and HTML layouts? I mean layout creation tools that are better and faster than Dreamweaver. I gotta make the site work across all platforms and browsers too.

Also, are any of you coding CSS and HTML in notepad? When I was searching google for easy layout creation tools, that's what I've got. I'm not the fastest at doing HTML and CSS in notepad, so maybe there are a few general rules/hacks around that could be handy?

Thanks for your help!

Giblet

I use Notepad++ for the syntax highlighting, or Visual Studio 2010 which has syntax highlighting and intellisense.

What? Oh Rly!

Use something like Dreamweaver, it's auto completion of tags, syntax highlighting, code snippets etc are very handy. Also checkout some CSS frameworks such as http://blueprintcss.org/, http://960.gs/ etc.

I myself have a library I have maintained over the years and you should definitely look into creating one yourself.

Creamy Goodness

sublime text 2 and chrome. these are all you need.

p

Yes, but it sounds like you don't have time to lose them.

Dreamweaver is helpful for coding & syncing with your server and providing an all in one tool, but it just helps workflow, not actual CSS coding. Don't even dream of using Notepad, that's an amateur's tool. If you're hand-coding use Dreamweaver codeview if you're already familiar with Dreamweaver.

CSS Grid systems like the one below, can speed up layout, but require time to learn.
http://cssgrid.net/

Zen-Coding plugins speed up writing HTML, but you need to install it and get into the habit of using it:
http://coding.smashingmagazine.com/2009/11/21/zen-coding-a-new-way-to-write-html-code/


In short, there's probably no shortcuts for you, just put the head down and get it done, and investigate these tools for next time. Good luck!

Giblet

p wrote: »

Don't even dream of using Notepad, that's an amateur's tool.

I would say the same about Dreamweaver...

What? Oh Rly!

Giblet wrote: »

I would say the same about Dreamweaver...

How so? I am developing for the past 7+ years and have used Dreamweaver for about 5 and although it's not the best, it's pretty decent. I assume you mean design view?

Placebo

How is Notepad an amateurs tool.
Clearly by definition Dreamweaver is an amateurs tool, it started of as a WYSIWYG editor, granted some now claim to use it for its autocompletion and syntax highlighting, but Notepad++ does that. Unless the preview panel allows for a secondary monitor split, its as useful as ALT+TABing into your browser for previews.

I personal use CODA on mac, it has some nice features like CODE CLIPS, Syntax highlighting, it has a CSS editor but i dont use it. I use the preview on it, but i cant have it on my secondary monitor so im switching panels most of the time anyway, all in all its just a Notepad with extra colours.

What? Oh Rly!

Placebo wrote: »

How is Notepad an amateurs tool.
Clearly by definition Dreamweaver is an amateurs tool, it started of as a WYSIWYG editor, granted some now claim to use it for its autocompletion and syntax highlighting, but Notepad++ does that. Unless the preview panel allows for a secondary monitor split, its as useful as ALT+TABing into your browser for previews.

I use it also for site management. Can NP++ handle multiple sites? Never really used it

Placebo

You can,

http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=Project_Management

I do like the project management in CODA and i can see why some would consider it vital but for the scope of 'normal' websites but i wouldnt hand out amateur titles ETC.

Deliverance XXV

What could be faster than Dreamweaver? You select an option and you have your structure code generated. Almost instantaneous.

I agree with the idea of having a set-up where you have pre-built structures in place ready for copy/paste. I have similar where during every project I copy the basic structure into a file for future use if needed. Just the divs, main code, css and basic styles like menubar hovers etc.

I use Notepad++ as I like having complete control over the code but there's no doubt that it is slower than the likes of DW.

desaparecidos

Giblet wrote: »

I would say the same about Dreamweaver...

Well clearly you know nothing about Dreamweaver if that's the case, other than your misconception that it's only a visual tool for "designers" and that somehow using a simplistic text editor like notepad makes you "hard core".

Nothing beats Dreamweaver Code view (auto-complete, code hints, related files, code hints for your own functions and libraries like jQuery, auto code formatting etc) coupled with it's site management features.

Once you've got your structure set up in code, if you happen to be creating a static page, using Design view to populate that page is very handy too. Pasting content from word / other sources can be controlled to generate good clean mark-up, properties bar to quickly change attributes of an element etc.

Giblet

desaparecidos wrote: »

Well clearly you know nothing about Dreamweaver if that's the case, other than your misconception that it's only a visual tool for "designers" and that somehow using a simplistic text editor like notepad makes you "hard core".

Nothing beats Dreamweaver Code view (auto-complete, code hints, related files, code hints for your own functions and libraries like jQuery, auto code formatting etc) coupled with it's site management features.

Once you've got your structure set up in code, if you happen to be creating a static page, using Design view to populate that page is very handy too. Pasting content from word / other sources can be controlled to generate good clean mark-up, properties bar to quickly change attributes of an element etc.

Clearly? I don't see how it's "clear" at all. In fact I know so much about it without misconceptions, I can safely stand by any comments I make.

I use my own workflow, and it's nothing to do with being hardcore, but to do with power. You can get highlighting, intellisense, code completion, refactoring tools and static analysis in Visual Studio 2010, and I assure you, it beats the hell out of DreamWeaver. If you don't need that, then something like Notepad++ is a very lightweight editor which can do most of the things you describe. Pasting content from Word? Generating Markup? Please...

desaparecidos

Giblet wrote: »

Clearly? I don't see how it's "clear" at all. In fact I know so much about it without misconceptions, I can safely stand by any comments I make.

I use my own workflow, and it's nothing to do with being hardcore, but to do with power. You can get highlighting, intellisense, code completion, refactoring tools and static analysis in Visual Studio 2010, and I assure you, it beats the hell out of DreamWeaver. If you don't need that, then something like Notepad++ is a very lightweight editor which can do most of the things you describe. Pasting content from Word? Generating Markup? Please...

You quoted a post saying that notepad was an amateurs tool, and responded saying "I would say the same about Dreamweaver...". So where does VS2010 come into it? VS2010 and Dreamweaver would be close equal in my mind, for general development.

But to suggest that Notepad++, Notepad2 or whatever is better than Dreamweaver is ridiculous.

And yes, if you've ever had to populate the content of a page (or multiples of pages), where people send you the copy in word, pdf, whatever format, the Design view and pasting features of Dreamweaver come in real handy to generate tidy code (paragraphs, headers, lists, bold/italic etc) extremely quickly compared to doing it by hand.

Goodshape

VIM.

Fanny Cradock

I started off with DW4. I must admit that I really enjoyed it as a one-stop web development package early on in my education. It was a program that I came to rely on, which can be seen as both good and bad. Eventually, and not without a little reluctance, I moved to Notepad++. I must now admit that looking back this feels like a progression. A lot of the stuff in DW that I had originally liked I gradually came to see as inferior to stand alone programmes. For example, the inbuilt FTP function is horrible compared to Filezilla.

I occasionally go back to DW4 if I am doing a fairly complicated newsletter purely for the ability of the design view to render tabular layouts. But I must say that coding/ troubleshooting in DW4 is something I now find to be a horrid and laborious experience. Perhaps DW5 has become a more polished product (and please note that I'm not entirely knocking DW4) but I now find coding with a lightweight program like Notepad++ to be a much quicker and much more enjoyable process.

@experiMental
As you can tell my own preference lies with an editor like Notepad++ (not to be confused with Notepad that comes bundled with Windows). When the background and text colours have been customised to something a little easier on the eyes, add-ons like auto tag complete installed on it, Firebug installed on Firefox (the Chrome version is just not as nice.), w3 validator bookedmarked and a FTP solution like WinSCP or Filezilla at then ready then you are good to go.

Total cost = Zero.

cormee

Placebo wrote: »

Clearly by definition Dreamweaver is an amateurs tool, it started of as a WYSIWYG editor

What a ridiculous statement. It has a WYSIWIG editing window, so it's automatically an amateur tool? I suppose Visual Studio is too?

*facepalm.jpg*

You may not be able to see beyond that one window, however there is a very large community of professional developers and designers who have none such hangups, and find it an excellent tool.

These threads would be so much more beneficial if people stuck to commenting on the software they do use, instead of the software they don't use.

Placebo

Cheers for taking that out of context, i only termed it in that fashion because of the previous poster calling NOTEPAD an amateurs tool ? In comparison, technically someone coding without any visual aid is an amateur?

anyway regardless, getting to the point of WYSIWG editors, i stopped using Dreamweaver mainly because of the silly and ridiculous tags it would add when using a visual editor, looking back now, even TINYMCE editors look much cleaner. Im sure its come a long way since, but so has NOTEPAD and other editors like CODA

Mr. Loverman

p wrote: »

Don't even dream of using Notepad, that's an amateur's tool.

The guys I know who use notepad (or VI) have far stronger skills than those who use Dreamweaver. That's why they use notepad, they don't need the bells and whistles.

But regardless, it goes without saying you should use whatever tool you are most comfortable with.

adm

I use the aptana plugin for eclipse. it comes standalone also. the code completion helpers are a godsend. you'd be mad too use notepad imho - lots more mundane typing and copy/pasting

Trojan

Firefox+Web Dev Toolbar+Firebug can really help speed up the snag-list type stuff after primary coding is done (it might also help with primary coding but I rarely do that myself these days so don't know if it does)

Goodshape wrote: »

VIM.

VIM is clearly not up to the task. What you need is GVIM.

someuser905

i went on a very expensive training course which included a microsoft office frontpage expert licence. i have found this to be the best for making websites for my clients.

desaparecidos

someuser905 wrote: »

i went on a very expensive training course which included a microsoft office frontpage expert licence. i have found this to be the best for making websites for my clients.

Expression Web might be decent, but Frontpage? LOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOLLOLOLOLOLOLOOLOLOLOLOLOLOLOLOLOLOL

S.M.B.

I use:

Coda when working on my personal sites.
Eclipse with Aptana when working with our Cold Fusion Sites
Visual Studio with Resharper when working on our .NET sites
Dreamweaver when coding an Email Newsletter from scratch.
Notepad++ for very basic 3/4 page brochure sites.

What? Oh Rly!

someuser905 wrote: »

i went on a very expensive training course which included a microsoft office frontpage expert licence. i have found this to be the best for making websites for my clients.

lol :rolleyes:

Goodshape

Trojan wrote: »

VIM is clearly not up to the task. What you need is GVIM.

Seriously though, I do use Vim for the vast majority of HTML, CSS, JS and PHP work. Someone above seemed to compare it to Notepad (the basic Windows version).. which isn't true at all. If you know what you want to get done, there's a plugin or a script out there to help you do it.

With a bit of setup, Vim is everything you need and none of the bloat that you don't. And once you get used to it (and yeah, it takes a week or two), the command-driven interface is a massive time and screen-space saver. Hands on the keyboard at all times, productivity++.

krd

Is there any WYSIWYG page making editors, that let you work with CSS, etc, without creating a huge amount of bloat code?

I haven't made a web page in a long time - and I'm trying to get back into it. My experience with things like Dreamweaver - and one or two WYSIWYGs I tried was it was quicker to write HTML in notepad.

I'm trying to figure out what I should do, and what is more practical to work with.

cormee

krd wrote: »

Is there any WYSIWYG page making editors, that let you work with CSS, etc, without creating a huge amount of bloat code?

I haven't made a web page in a long time - and I'm trying to get back into it. My experience with things like Dreamweaver - and one or two WYSIWYGs I tried was it was quicker to write HTML in notepad.

I'm trying to figure out what I should do, and what is more practical to work with.

I don't think bloated code is the issue with CSS layouts & WYSIWYG. The amount of code in a CSS layout is minimal to begin with, and I can't see how it would be possible to bloat those few tags to the point where it becomes problematic (your CSS can also be minified later).

The problem for me with using a WYSIWYG editor to lay out a CSS design is it's not a suitable interface for these types of designs.

Dragging, dropping, resizing your divs etc can be a problem, depending on how the editor decides to position your elements, elements may be positioned absolutely, relatively, or not at all, divs may be set to a % width, fixed or relative width. These properties, and dozens of others I haven't mentioned, react differently with each other, which makes it difficult to predict with any certainty how your design will look on different browsers and screen sizes.

There are just too many styling and layout properties that can come into play in any design, for any WYSIWYG interfaces (that I know of) to be a suitable tool for doing the job.

You're much better off getting a firm grasp of CSS and working in code view and using the WYSIWYG preview window as a visual reference only.

Goodshape

Oh, also, no one's mentioned Sublime Text 2 yet?

http://www.sublimetext.com/2

Surely the best editor that isn't Vim, ever.