HTML5 Tutorials

  • Canvas & SVG CSS CSS Animations Guest Blogger HTML5 JavaScript Markup

    Making Sprite-based Games with Canvas

    One advantage to working for Mozilla is the amount of talent that surrounds me;  James Long is one of those people.  James seems to know more about software engineering than anyone probably should.  I asked James to write a canvas-centric tutorial to show you all how to create a simple canvas game; he far exceded expectation, so much so that I couldn't dare repost it here.  Below is a summary of his epic post; please jump over to his site for the complete post!

    Read Post
  • CSS HTML5 Markup

    CSS Scoped Styles

    There are plenty of awesome new attributes we've gotten during the HTML5 revolution:  placeholder, download, hidden, and more.  Each of these attributes provides us a different level of control over an element on the page, but there's a new element attribute that allows control over several elements:  scoped.  The style element's scoped attribute allows developers to apply styles to only the host element and descendant elements — a new level of control that CSS hasn't seen in several years.

    Read Post View Demo
  • Features Firefox OS HTML5 JavaScript Mobile

    Vibration API

    Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user.  One of those simple APIs the Vibration API.  The Vibration API allows developers to direct the device, using JavaScript, to vibrate in a pattern for a given duration.

    Read Post View Demo
  • HTML5 Datalist

  • Canvas & SVG Features HTML5

    5 More HTML5 APIs You Didn’t Know Existed

    The HTML5 revolution has provided us some awesome JavaScript and HTML APIs.  Some are APIs we knew we've needed for years, others are cutting edge mobile and desktop helpers.  Regardless of API strength or purpose, anything to help us better do our job is a step in the right direction.  I recently shared with you 5 HTML5 APIs You Didn’t Know Existed in the hope that some of them would inspire you to improve your own web apps.  I'd like to share with you 5 more lessor known HTML5 APIs — hopefully you find some of them useful!

    Read Post View Demo
  • Canvas & SVG Features HTML5 JavaScript

    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API, providing developers access to the user's camera.  Let me show you how to get simple camera access from within your browser!

    Read Post View Demo
  • CSS Guest Blogger HTML5

    Making the Firefox Logo from HTML

    My Firefox t-shirt is probably the best t-shirt ever made. It's brilliant: a series of HTML/JS/CSS code wrapped and colored like the Firefox logo! Surely this design was created by aliens! Nope, it was created coworker Greg Koberger. Here Greg explains how to create a colored logo from page code!

    Read Post View Demo
  • Guest Blogger HTML5 JavaScript

    Game Configuration with JSON

    Edna Piranha is a mystery wrapped in a enigma. I never know what she's gonna say, and when she does say it, I don't know what to think of it. What I do know, however, is that she's an excellent web developer. She's created NoodleTalk.org and more recently NoodleApp.net, a Node-based web interface for App.Net. Here she waxes philosophical about using JSON for game configuration and her experiences creating a HTML5 game.

    Read Post
  • Features HTML5 JavaScript

    5 HTML5 APIs You Didn’t Know Existed

    When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It."  Can you blame us though?  We watched the fundamental APIs stagnate for so long that a basic feature addition like placeholder made us "take a minute."  Despite many HTML5 features being implemented in modern browsers, many developers are unaware of some of the smaller, useful APIs available to us.  This post exposes those APIs and was written to encourage you to explore the lessor known HTML5 APIs!

    Read Post
  • HTML5 hidden Attribute