Looking to learn HTML formatting

Something likehttp://jsbeautifier.org/?

Also why Notepad++ on windows? Sublime Text works on everything.

ActiveState's Komodo IDE has options to reformat code. I imagine one could paste in a blob of text and it would accurately reformat the HTML and any Javascript to expected standards.

Komodo IDE: Professional IDE for Python, PHP, Ruby, Perl, HTML, CSS, JavaScript

If your going to venture into more Javascript later,Webstormis a very nice IDE. Sublime Text is the best text editor for sure. That being said, web development on a Windows machine still feels wrong to me.

Warrik_sl said:

That being said, web development on a Windows machine still feels wrong to me.

Click to expand...

What "feels right"? Just curious, because I'm beginning to delve into ASP.NET (Web Forms) since that's what my company's product uses.

Sublime Text is able to use lots of plugins, one of which is called Tidy. It will format documents for you automagically. I believe you can install it straight from Sublime Text, but I did it in OS X and not Windows.

SublimeHtmlTidy GitHub

The absolute best source formatting that I've ever used is in Dreamweaver, though. In fact, I keep the program installed JUST for the source format button.

Lenas_sl said:

Sublime Text is able to use lots of plugins, one of which is called Tidy. It will format documents for you automagically. I believe you can install it straight from Sublime Text, but I did it in OS X and not Windows.

SublimeHtmlTidy GitHub

The absolute best source formatting that I've ever used is in Dreamweaver, though. In fact, I keep the program installed JUST for the source format button.

Click to expand...

You can do it on windows as well. It's called package control.

Installation - Package Control

I highly recommend installing the emmet plugin (which you can do from package control and) as well. Shit will help set up html pages in a few seconds among other things. With emmet you type something like "html:5" (sans quotation marks) in the text document and then hit 'ctrl + e' and you get a yourself a basic html 5 scaffolding.

And there ain't nothing wrong developing on windows, but if you are doing stuff for linux based servers it is a bit of pain but you can deal with it.

By the way, Microsoft Expression Web is now a free product. It's comparable to Adobe's Dreamweaver. It has some nice formatting abilities, as well being a pretty nice HTML and CSS editor. Unfortunately development on the product has ceased so it's Intellisense feature doesn't recognize some of the newer HTML5 and CSS elements and properties. Kinda of a shame since I really liked the Expression series.

Microsoft Expression Web 4

ShakyJake_sl said:

What "feels right"? Just curious, because I'm beginning to delve into ASP.NET (Web Forms) since that's what my company's product uses.

Click to expand...

Any *nix based system. I've used both Ubuntu and OSX, with my current choice being a Mac, and it just seems for web development, a nix based system is far more conducive than Windows. Using tools like CodeKit, or an IDE like Coda, or a diff manage like Kaleidescope or FTP like Transmit, i just couldn't ever go back to coding for the web on a Windows machine. The ability to leverage a package manager and have my dot files fine tune my environment, with built in Apache just makes it hard for me to think of booting up Windows and achieving the same efficiency.

It feels dirty and clunky. That being said, if ASP.NET is what your company uses, it sounds like your path is clear.

I would strongly caution you against using Microsoft Expression or Dreamweaver. Your best bet would to be use something like Sublime Text or Notepad++. If you use Sublime Text, be sure to install the package manager as it vastly improves the capabilities.

Warrik_sl said:

I would strongly caution you against using Microsoft Expression or Dreamweaver. Your best bet would to be use something like Sublime Text or Notepad++. If you use Sublime Text, be sure to install the package manager as it vastly improves the capabilities.

Click to expand...

Up until this point I mostly wrote various Windows based tools for our support guys. They were written in C# and WPF. WPF, if you don't know, is Microsoft's system for rendering the Windows GUI (as opposed to the old WinForms crap). It's based on XAML which is HTML-like markup. Anyway, I use Microsoft Blend (which I love) as a WYSIWYG tool to get a basic layout for an application's front-end then drop-down to the markup and tweak the XAML code to make precise adjustments and wire up data bindings.

The point is, I have no desire to design a graphical front-end entirely with a designer. But maybe it's different for web development? I mean, I see some really beautiful HTML5/CSS3 sites out there and can't imagine someone doing it entirely with a text editor. I just assume the standard approach is to use something like Dreamweaver then drop down to code level for the fine tuning.

ShakyJake_sl said:

The point is, I have no desire to design a graphical front-end entirely with a designer. But maybe it's different for web development? I mean, I see some really beautiful HTML5/CSS3 sites out there and can't imagine someone doing it entirely with a text editor. I just assume the standard approach is to use something like Dreamweaver then drop down to code level for the fine tuning.

Click to expand...

Most websites are mocked up or designed in a bitmap editing software (Photoshop/Fireworks being the two most popular). From these mock ups, graphical assets that are to be used on the site are exported (mostly png's these days). Everything is then assembled via HTML and whatever server side scripting language you decide to go forth with. In addition to this, most sites these days utilize some sort of responsive CSS/Javascript framework to help along with the development. This shortens deployment time, ensures cross browser compatibility. The two big frameworks are Twitter's own Bootstrap and another put out by Zurb called Foundation.

Anyways there is a lot you can do with CSS these days. I recommend that you familiarize yourself with CSS3 in particular. I don't know any design/development firms that use a wysiwyg editor these days. Devs either use a text editor (like Sublime Text) or an IDE.

Mixtilplix_sl said:

Anyways there is a lot you can do with CSS these days. I recommend that you familiarize yourself with CSS3 in particular. I don't know any design/development firms that use a wysiwyg editor these days. Devs either use a text editor (like Sublime Text) or an IDE.

Click to expand...

Thanks for the information. Yeah, I'm currently reading through OReilly'sCSS3 The Missing Manual. I also have their Javascript JQuery book as well, which is next in line.

ShakyJake_sl said:

I see some really beautiful HTML5/CSS3 sites out there and can't imagine someone doing it entirely with a text editor. I just assume the standard approach is to use something like Dreamweaver then drop down to code level for the fine tuning.

Click to expand...

Most, if not all, professional developers will in fact code it entirely in a text editor like Sublime Text, or use an IDE like WebStorm. To be honest, if any of the companies I worked at was screening a Web Developer that said they used a WSYWIG, it would be interview over. Using a WSYWIG is not a good idea and will end up with markup that is not as maintainable, clean or semantic than someone who dives straight into the code. Designers are typically the types that will lean on WYSWIG's to avoid having to do any coding or to throw together quick protoypes. Anything that need to be production ready, is pretty much hand coded.

There are a lot of frameworks out there that people will use as a foundation. Check out HTML5 Boilerplate, Modernizr, CSS Normalize, Skeleton, and as Mixtilplix mentioned, Boostrap (which was originally developed at Twitter, but is now open source). Best advice I could give you, regardless of platform, IDE or editor choice, would be to avoid WSYWIG's and learn to hand craft your content. The future dividends of your work will be infinitely better.

If you come from more of a pure programming background, there is a trap many fall into. HTML and CSS is deceptively simple on the surface, but building beautiful sites that can scale, or be responsive and performant while being sematic is an art.

If you are really interested in Front End Development, I'd highly recommend any of the following books:


Designing with Web Standards (3rd Edition): Jeffrey Zeldman, Ethan Marcotte- If you build for the web, you pretty much have to read this. Zeldman started the standards revolution and has helped shape the web of today.
A Book Apart, HTML5 For Web Designers
A Book Apart, CSS3 for Web Designers
A Book Apart, Responsive Web Design
JavaScript: The Good Parts: Douglas Crockford- An absolute MUST read for anyone doing Javascript. Crockford is the Godfather of JS.
DOM Scripting: Web Design with JavaScript and the Document Object Model: Jeremy Keith, Jeffrey Sambells- A more elegant way to bringing interactivity to the web.
High Performance Web Sites: Essential Knowledge for Front-End Engineers: Steve Souders- Another extremely important book that will shape how you structure your code

Read these blogs:
A List Apart: For People Who Make Websites
AddyOsmani.com | Articles for developers
Lea Verou | Life at the bleeding edge (of web standards)
Paul Irish

Lastly, read this:

How Browsers Work: Behind the scenes of modern web browsers - HTML5 Rocks- Don't let the title fool you, thats some serious shit right there that everyone who makes content for the web should know.

Thanks, Warrik! Fantastic compilation you've provided. I'm mentally giving you +nets right now.

Coda 2is for manly men~
thus, I am a manly man.

100% agree on avoiding WYSIWYG garbage like the plague.

Needless_sl said:

Coda 2is for manly men~
thus, I am a manly man.

100% agree on avoiding WYSIWYG garbage like the plague.

Click to expand...

> Hates on WYSIWYG
> Recommends a WYSIWYG

...

Needless_sl said:

100% agree on avoiding WYSIWYG garbage like the plague.

Click to expand...

Here's the thing, I'm not interested in drawing boxes and buttons on the screen like Photoshop. What I would like is an output window that will render the HTML as I type the code. It's annoying to constantly flip back and fourth between the editor and browser hitting refresh.

Microsoft's Expression Web does a decent job of this as you can do a split view. But since development has ceased it doesn't recognize some of the newer CSS3 styles.

There are extensions you can get for both Chrome and Firefox that will auto refresh on a file update, so you can use any editor you want and have a browser side by side to see changes automatically in a real environment.