Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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.

share|improve this question
    
I would definitely suggest to look into diveintohtml5 But also check out html5rockshtm5rocks and this one might be unknown by many but Facebook is pushing a lot of HTML5 : Check their html5 page here facebook.com/html5 –  VJth Feb 10 '12 at 23:47
    
Do the agile thing. <html>Hi</html> gets you started because you don't need the DOCTYPE. Repeat. –  Michael Durrant Mar 16 at 20:56
add comment

closed as not constructive by Yannis Rizos Jun 12 '12 at 13:22

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.If this question can be reworded to fit the rules in the help center, please edit the question.

8 Answers

up vote 42 down vote accepted

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/

share|improve this answer
    
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. –  Tom Nov 15 '10 at 2:27
    
+1 for Dive in to HTML5. –  OnesimusUnbound Jan 6 '11 at 4:14
    
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: html5forwebdesigners.com –  user16764 Feb 11 '12 at 5:55
add comment

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).

share|improve this answer
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. –  daniel.sedlacek Nov 1 '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." - tiny.cc/standards-bloat-and-html5 –  galambalazs Nov 1 '10 at 15:01
7  
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 1 '10 at 15:14
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. –  Marcel Korpel Nov 12 '10 at 0: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. –  Tim Down Nov 13 '10 at 17:53
show 2 more comments

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...

share|improve this answer
    
+1, that sounds exciting. I think I will try their 45-day free trial. –  daniel.sedlacek Nov 1 '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. –  jamiebarrow Nov 15 '10 at 8:21
add comment

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.

share|improve this answer
    
Thanks, if I get it right browser compatibility is always an issue. –  daniel.sedlacek Nov 1 '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. –  Romario Nov 1 '10 at 15:10
    
For testing various versions of Internet Explorer, either use IETester (my-debugbar.com/wiki/IETester) or virtual machines provided by Microsoft (go.microsoft.com/fwlink/?LinkId=70868) –  Peter Nov 15 '10 at 7:54
add comment

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.

share|improve this answer
    
interesting... what Eclipse plugin for JS development would you recommend? –  daniel.sedlacek Nov 11 '10 at 9: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. stackoverflow.com/questions/613988/… –  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. –  Marcel Korpel 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
add comment

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.

share|improve this answer
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 :) –  daniel.sedlacek Nov 1 '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 1 '10 at 14:54
4  
nitpick: Adobe has bought Flash (taken over Macromedia), and not created it. –  porneL Nov 12 '10 at 15:28
add comment

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.

share|improve this answer
add comment

"I don't believe that bigger projects can be/are developed in Notepad"
You'd be wrong there :p 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 Inpector.

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 is 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 very fast (I'm looking at the other students on the course I'm doing when I say this)

share|improve this answer
    
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! :) –  jamiebarrow Nov 15 '10 at 8: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". –  Kolink Nov 15 '10 at 12:09
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.