42

What is the recommended workflow to learn HTML5? What tools should I install? What SDK? Where to start? How to test? How to debug? What do I read?

I understand that what is often labelled as "HTML5 development" is in fact a mixture of HTML, CSS, JS and more, however I don't believe that bigger projects are developed in Notepad. That is why I am asking you to reveal your tips and tricks about your workflow.

daniel.sedlacek
  • 902
  • 1
  • 10
  • 20
  • I would definitely suggest to look into diveintohtml5 But also check out html5rocks[htm5rocks](http://html5rocks.com) and this one might be unknown by many but Facebook is pushing a lot of HTML5 : Check their html5 page here [facebook.com/html5](http://developers.facebook.com/html5) – VJth Feb 10 '12 at 23:47
  • Do the agile thing. `Hi` gets you started because you don't need the DOCTYPE. Repeat. – Michael Durrant Mar 16 '14 at 20:56

8 Answers8

52

HTML5 is not a single integrated thing. It's a collection of extensions to HTML, some of which are widely-implemented and can be used safely, some of which no-one implements yet, and a whole lot in-between. If you try to treat HTML5 as a coherent single development platform and ‘learn it all’ you will have a really difficult time.

Instead what you need to learn is the web as a whole: basic HTML, CSS, JavaScript, the Core DOM, the HTML DOM, the basic Browser Object Model. Then you can add features of the New Web as and where you need them, and browser support allows: HTML5 extensions, CSS3 properties, canvas drawing, websockets, the other DOM and BOM extensions spun off from the HTML5 work...

The feature set of the web is constantly evolving and there is not one single point of reference. W3Schools (which is nothing to do with W3C incidentally) tries, but it's chock-full of errors. Don't trust what it says as gospel.

You may need to refer to the definitive HTML4, CSS2. DOM Core and DOM HTML specs to make sure. You will also probably want to look at MDC's DOM reference and MSDN's DOM reference for what Firefox and IE support. The HTML5 spec contains a lot of more up-to-date DOM stuff too, as well as the new HTML extensions, but it is a long and unwieldy document, quite hard to use even by the standards of standards documents. Although not nearly as bad as the impenetrable ECMAScript spec. (Thankfully you will probably be familiar with a lot of that already if you're used to working with ActionScript.)

You don't need an SDK or IDE to develop HTML/CSS/JS. You can use an IDE if you like, but I'm quite happy doing everything in my favourite text editor. There are no build/compile steps to worry about, you just save your file and hit reload, job done. Most modern web browsers have a debugger and other development tools either built in (eg IE8) or readily available as extensions (eg Firebug).

bobince
  • 1,020
  • 6
  • 5
  • 1
    I understand that what is often labelled as "HTML5 development" is in fact a mixture of HTML, CSS, JS and more ... however I don't believe that bigger projects can be/are developed in Notepad. That is why I am asking you to reveal your tips and tricks about your workflow. –  Nov 01 '10 at 14:59
  • 2
    +1 *"as we all know HTML5 will be finalized in 2022, three years after the events depicted in Blade Runner."* - http://tiny.cc/standards-bloat-and-html5 –  Nov 01 '10 at 15:01
  • 8
    No, bigger projects wouldn't be developed in Notepad. That'd be insane. Notepad is a horrible text editor. They'd be developed in Notepad++. :-) – bobince Nov 01 '10 at 15:14
  • Pls do not vote for this answer, no matter how right @bobince is it is not a helpful answer to my question. Same is true for @galambalazs, you may be right but the world outside there is already using it. I can not tell my employer to wait till 2022, nor will the competitors do. I will be thankful for any good practical tip. –  Nov 01 '10 at 18:10
  • 11
    @daniel: At least I think this is a *useful* answer, no matter if it's useful to you. He advices using a (good) text editor; I also like Notepad++, though I usually use Emacs (no editor war intended). He says to just stick to commonly supported features and build HTML 5/CSS 3 (& Co.) specific neologisms on top of your (at that point already working) web pages. HTML 5 isn't a whole new thing; if you can drive a car, you can drive a shiny new car with hybrid engine, air-conditioning and all new features it has; however, it's still a car and you can use it to drive your way. –  Nov 12 '10 at 00:25
  • 5
    @daniel: This answer is easily the most useful here, including for you since it contains the advice you need, and no telling me that it's not is going to stop me voting it up. –  Nov 13 '10 at 17:53
  • 1
    On why you shouldn't trust w3schools, there is one comprehensive list of inaccuracies over here: http://w3fools.com/ – Spoike Sep 28 '11 at 10:34
43

If I were to start a new HTML5 project from scratch right now I would probably do something like this:

Download and use the HTML5 Boilerplate. This will give you a fresh page with most of the important things initialized and ready for testing. Also includes some nice debugging features you should be using along with firebug

Look over Dive in to HTML5 to see the history and usage of the code.

On my mac I use Coda, and at work I use Dreamweaver in Code view. They aren't going to build the page for you, but code completion, hinting and color coding work well. I'm sure Aptana and the like offer great features, but I've always found simpler to be better when it comes to html.

Defintiely pick up the HTML5 and CSS3 books from "A Book Apart" (CSS3 comes out later this month)

And finally - to try and figure out this whole thing check out:

Opera Developer Network - http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Canvas Cheat Sheet - http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

How to draw with HTML5 Canvas http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/

Matt
  • 473
  • 3
  • 11
Gregg B
  • 548
  • 4
  • 9
  • I would also recommend you learn JavaScript and the book I would recommend for that is JavaScript: the definitive guide By David Flanagan, After that jQuery is awesome. As for a an editor, Aptana and DreamWeaver in my opinion are horrible. I would recommend using Emacs. –  Nov 15 '10 at 02:27
  • After the definitive guide, you should read _JavaScript: The Good Parts_, by Crockford. – kzh May 23 '11 at 17:40
  • The HTML5 book mentioned can be read for free, on its homepage: http://html5forwebdesigners.com/ – user16764 Feb 11 '12 at 05:55
9

I highly recommend WebStorm, from JetBrains (or any of their IntelliJ based products, like PHPStorm, RubyMine, PyCharm as they all support HTML). You get CSS, HTML auto completion and live (while you type) checking for correctness. Refactoring support for Javascript (something I haven't seen anywhere else), and even the ability to debug Javascript in the IDE (if Firebug or the Chrome Developer tools are lacking for you). It has project support as well as SVN, Git, Perforce and CVS support. And a ton of other features, highly recommended...

Kris Erickson
  • 381
  • 2
  • 4
  • +1, that sounds exciting. I think I will try their 45-day free trial. –  Nov 01 '10 at 16:03
  • I have used IntelliJ IDEA for Java development and nothing touches it in terms of the features it provides. Jetbrains also create the ReSharper plugin for Visual Studio. If I were looking for a pure web-based IDE I try out WebStorm for sure. The refactoring alone is worth it. –  Nov 15 '10 at 08:21
8

Several invaluable tools

  • FireBug - developer plugin for Firefox. Allows to debug JS, HTML, Styles.
  • IE Developer toolbar for older versions of IE (6,7). Not much HTML5 there though. New IE has F12 tool.
  • Chrome has it's developer tools

Those tools are mostly for Javascript debugging and to figure things out regarding elements positioning and applied CSS styles.

  • Thanks, if I get it right browser compatibility is always an issue. –  Nov 01 '10 at 14:28
  • Yes, it becomes better with modern browsers though. IE 6-7 and 8 to a part are pretty bad in this regard. –  Nov 01 '10 at 15:10
  • For testing various versions of Internet Explorer, either use IETester (http://www.my-debugbar.com/wiki/IETester/) or virtual machines provided by Microsoft (http://go.microsoft.com/fwlink/?LinkId=70868) –  Nov 15 '10 at 07:54
6

If you're looking for an IDE recommendation, Eclipse is pretty good. If you're looking for Javascript tools, Firebug is great for debugging.

However, you really don't need any "tools". I think the notion that "bigger projects can't be/aren't developed in Notepad" is, quite simply, false. I use Notepad++ to write all of my HTML/CSS/Javascript and I think this is a very common approach-- even for professional web designers. Notepad++ has syntax highlighting for HTML, CSS, and Javascript, as well as auto completion. If you want software that offers more than that, please be specific in which features are important to you. (BTW, if you're a mac user, try BBEdit).

Larger sites are often written with frameworks such as Django or Ruby on Rails, but that really has nothing to do with using or learning HTML5.

Jeff
  • 161
  • 2
  • interesting... what Eclipse plugin for JS development would you recommend? –  Nov 11 '10 at 09:51
  • Never used one, but this link may be useful. Aptana is also available as a standalone program, I believe (an alternative to Eclipse). A lot of people have recommended it, but I've never actually tried it. Might be something worth looking into. http://stackoverflow.com/questions/613988/what-is-the-best-javascript-plugin-for-eclipse – Jeff Nov 11 '10 at 14:28
  • Just bare in mind that Notepad is *very* different from Notepad++, I also wouldn't develop a website (*any* website) in Notepad. –  Nov 12 '10 at 15:44
  • Agreed, I took the comment to mean "text editor" not strictly "MS Notepad", but if that was the case, then you are completely right – Jeff Nov 12 '10 at 15:49
5

I believe Adobe (the creators of Flash) are actually in the process of releasing a Flash to HTML5 conversion tool, which may be worth your while looking into.

http://news.softpedia.com/news/Adobe-Showcases-Flash-to-HTML5-Converter-163709.shtml

Effectively then, Flash becomes a tool for developing HTML5.

And as of this week, Microsoft have announced that they're going in a similar direction with Silverlight, so it looks like everything is going HTML5 now.

The one question I have is how good the HTML5 code generated by these two tools will be? We won't know the answer to that until they're actually released, but I've never found generated code to be particularly good quality. Hopefully we won't end up with the modern equivalent of MS Front Page.

Spudley
  • 281
  • 1
  • 2
  • 7
    Honestly I don't believe in conversion tools, the code will be, to put it mildly, suboptimal. I know that Flash is a great tool if not abused and it will stay with us for long time. But I would rather write JS and CSS with appropriate tools :) –  Nov 01 '10 at 14:33
  • 1
    @daniel -agreed that conversion tools usually aren't that good, and I said as much. But it might be a good starting point for you if you want to convert your existing flash. Even if you then go and manually rework the resulting HTML code, at least you'll have something to work with. – Spudley Nov 01 '10 at 14:54
  • 4
    nitpick: Adobe has bought Flash (taken over Macromedia), and not created it. – Kornel Nov 12 '10 at 15:28
4

I would highly recommend setting up a build system for your Javascript code, and having it check against JSLint every build. I have found this picks up a lot of errors early on and promotes good coding (play with the options if it is too strict). Look at jQuery's build system on GitHub for a good example.

Other than that for editing I am a big fan of Notepad++ as I have yet to find an IDE that provides useful features without a whole load of bloat and GUI trickery.

You could look at the latest Dreamweaver though, the code editor isn't bad and they have a widget gallery with a number of HTML5 widgets you can just drop in.

Adam Heath
  • 141
  • 3
2

I don't believe that bigger projects can be/are developed in Notepad

You'd be wrong there. I'm a long-time Notepad user, and I think it's the best way to go. For debugging, I use IE's Developer Tools, Firefox's FireBug, and Chrome's Inspector.

As far as HTML5 goes, it's basically just regular HTML with a few extra toys. Besides, there's nothing stopping you from declaring an HTML5 document, then only using things that are in older versions of HTML.

One thing I would recommend avoiding at all costs are programs like Dreamweaver. They make things look easy with graphical designing tools, but when you want to do your own stuff it gets very hard. (I'm looking at the other students on the course I'm doing when I say this)

Santosh Kumar
  • 2,261
  • 4
  • 15
  • 21
  • Define big. Notepad doesn't even have syntax highlighting, and maintenance can be an issue with Notepad... I'd at least go for Notepad++... even VIM! :) –  Nov 15 '10 at 08:24
  • I use Notepad++ _now_, but for a long time I'd just used plain Notepad. And by "big" I mean "big enough to be earning enough money to pay for my living costs and have some to spare". –  Nov 15 '10 at 12:09