DIY Genius

Why You Should Learn HTML5 Now Before It Explodes In Popularity

HTML5 is the most sought after skill in the digital economy. Now is the perfect time to start learning HTML5.

HTML5 is a web markup language that allows developers to build rich web-based apps that can run on any device via a regular web browser. Imagine the power of HTML4 that currently powers most of the web combined with interactive rich-media multimedia capabilities of Adobe Flash and you have HTML5.

At the moment, native apps specifically written for Apple’s iOS and Google’s Android mobile operating systems dominate the mobile development field but HTML5 offers many advantages over native apps. Firstly, HTML5 is an open, web-based standard that will run on any device’s web browser. This means that developers aren’t at the mercy of Apple and Google and their closed native app ecosystem and you can freely promote your HTML5 application on the open web.

Secondly, the open web standards of HTML5 allows businesses and developers to control the distribution, monetization and functionality of their mobile applications. While native apps have the advantage of integrated direct payment systems that allows for painless one-click transactions, developers are forced to pay the gatekeepers a large cut of the purchase — both Apple’s App Store and Google’s Play marketplaces take a 30% cut.

Currently, native apps allow for a lot more functionality than HTML5 apps. Additionally, HTML5 is an evolving standard that is managed by an open committee-based consortium, the World Wide Web Consortium (WSC), which is the main global standards organization for the web. This means that progress is slow. New HTML5 standards and functionality must be agreed upon and then incorporated into web browsers, something that is difficult today when many users still use Internet Explorer 6 and 7 that offers no HTML5 support.

So, why should you learn HTML5?

HTML5 Top Skill in 2013
“HTML5″ is currently the #1 job trend based on the fastest growing keywords found in online job postings (Source: Indeed.com)

If there was one programming language I’d recommend to learn for the long-term, it is HTML5. While native apps currently have a significant edge in form and functionality, HTML5 has all of the hallmarks of a disruptive technology. It is cheaper to develop with and allows for cross-platform compatibility on all devices. Over time, HTML5 will get better and better and take bigger chunk of the mobile application market.

It will not happen in next year, but in the next 3-5 years HTML5 will become the standard programming language for the web. HTML5 will make content on the web much more interactive. With the power of HTML5, a website will be able to have the same functionality and features as a native app on iOS or Android. It will also allow new forms of monetization that have not been possible before and it will likely revive the online content publishing industry by making it easier for publishers to make it money.

If you want to learn HTML5 it will be a lot easier if you already have basic HTML and CSS skills, which can also be easily learned online. If you can add HTML5 development to your skills as well, you will be on the cutting edge of web development. Below I’ve compiled some excellent resources for learning HTML5 development online.

Free HTML5 Courses:

1. HTML5 & CSS3 Fundamentals: Development for Absolute Beginners (Channel9)

This excellent free resource covers the fundamentals of HTML5 and CSS3 styling. Each concept is conviently broken down into it’s own video and the instructor is easy to understand and follow.

2. Developing in HTML5 with JavaScript and CSS3 Jump Start (Microsoft Virtual Academy)

This free course from taught by two expert technical evangelists at Microsoft provides an accelerated introduction to HTML5, CSS3, and JavaScrip. It focuses on web development basics like how to use programming logic, define and use variables, perform looping and branching, develop user interfaces, capture and validate user input, store data, and create well-structured applications. The only catch is it taught using Microsoft’s Visual Studio 2012 running on Windows 8 but it includes an exam and certification.

3. HTML5 Game Development (Udacity)

In this online course you will learn the fundamentals of HTML5 by building a web-based game. It requires knowledge of HTML and Javascript but if you aren’t familiar with them, a crash course is provided for you to get up-to-speed. The course is taught by two instructors from Google who are working on the Chrome development team.

4. Startup Engineering (Coursera)

This MOOC (Massively Open Online Course) from Stanford University focuses on giving you the development skills you need to launch a web/mobile startup. Part of the course involves building an HTML5 mobile app. If you want to learn more than simply HTML5 devleopment, this course is highly recommended. The most recent session started on June 17th but you can still join and do the course work.

5 Computer Science E-76: Building Mobile Applications (Harvard)

An excellent course on mobile development that covers iOS development, Android Development and 5 lectures on HTML5 mobile development. Includes slides, source code and the original video lectures from the Harvard class.

6. HTML5 Introduction (The New Boston)

I’m a huge fan of educational tutorials from The New Boston. They are easy to follow and professionally done. They have 53 videos and over 6 hours of content dedicated to helping you learn HTML5.

7. HTML5 Video Course (AdEducation)

This course is available on YouTube. It features 18 videos and 2.5 hours of content covering the fundamentals of HTML5 Development.

8. HTML5 Intro ( P2PU)

This course from Mozilla School of Webcraft covers the basics of HTML5 development on the free P2PU platform.

Paid HTML5 Courses:

1. HTML5 Beginners Crash Course (Udemy)

If you have no previous knowledge of HTML or HTML5, this is a good place to start learning the principles of both languages to create highly dynamic websites. $99

2. Learn HTML5 At Your Own Pace (Udemy)

This course designed for beginners covers the fundamentals of learning HTML5 web development, techniques and standards. $99

3. HTML5 Mobile Game Development for Beginners (Udemy)

This video course guides you through the creation of HTML5 cross-platform games using the open source LimeJS game development framework. $79

4. Create a HTML5 Game from Scratch (Udemy)

Making games is a lot easier than you think. In this course, you can leanr how to make HTML5 games that run in any browser… in only 2.5 hours. $59

HTML5 Tutorials:

  1. HTML5 And You from Tuts+
  2. HTML5 Tutorial from W3School
  3. The HTML5 Tutorials
  4. Beginner’s Guide To: Building HTML5/CSS3 Webpages from Hong Kiat
  5. HTML5: A Tutorial For Beginners
  6. HTML5 Tutorial: How to Build a Single Product Page
  7. Design & Code a Cool iPhone App Website in HTML5
  8. Road Map To Coding With HTML5: Tutorials and Guidelines

HTML5 Ebooks:

  1. Dive Into HTML5 (Mark Pilgrim) A free online version of this popular HTML5 development book.
  2. HTML & HTML5 Crash Course: Learn HTML5 in 20 Easy Lessons (Robin Nixon) – If you buy the Kindle edition of this book for $10, you will get access to Robin Nixon’s HTML5 Crash Course on Udemy for free.

HTML5 Development Frameworks:

Development frameworks for HTML5 that can dramatically cut down on the time you spend developing your HTML5 apps.

  1. Sencha – HTML5 Javascript frameworks that enable you to build HTML5 apps for any browser.
  2. Trigger.io – Build native apps using HTML5 and Javascript.

HTML5 Apps for Non-Developers:

If you’re not technically-minded you can take advantage of these HTML5 app building tools.

  1. Tiggzi – Build an HTML5 app in your browser using Tiggzi’s drag-and-drop interface that will work on iOS, Android and the mobile web. There are also advanced options for expert coders that want full customization. The first app you build is free, for additional apps you pay a small monthly fee.
  2. Titanium by Appcelerator – If you know HTML5 and Javascript Appcelerator’s Titanium framework allows you to create native iOS, Android and HTML5 mobile web apps. You can play around with it for free.

HTML5 Resources:

  1. HTML5 Rocks - The most comprehensive HTML5 website that I’ve ound online. Their HTML5 intro slidedeck is a good place to start.
  2. HTML5 Web Developers Guide – A wiki-like guide from the Mozilla Developers Network, the creators of popular open-source browser Firefox.
  3. The Wilderness Downtown - An interactive film created in HTML5 around The Arcade Fire’s song “We Used To Wait” by Google’s Chris Milk.
  4. Apple’s HTML5 Demo – Curious about what you can do with HTML5 and CSS3? This HTML5 demo page will show its power.
  5. HTML5 Editor – A free HTML5 editor that lets you produce templates and animated layouts.
  6. HTML5Please – Easily look up HTML5 and CSS3 markup code.

 
If there is anything essential for learning HTML5 that I missed, you’re welcome to send it me.

Opt In Image
HyperLearning Productivity Guides
The ultimate resource for online learning.

Get our free HyperLearning guides delivered to your email inbox each month with the best new online courses, documentaries and productivity tools curated for you.

The following two tabs change content below.
Avatar of Kyle Pearce

Kyle Pearce

I created DIY Genius to help people develop digital skills and the entrepreneurial mindset to navigate the turbulence and opportunity of the 21st century. I also teach courses in mindfulness training that give people the tools they need to develop their focus, creativity and self-motivation.
July 7, 2013

1 Responses on Why You Should Learn HTML5 Now Before It Explodes In Popularity"

  1. Jack Calvert says:

    Fantastic article, Kyle! Thanks for taking the trouble to put together all of these great links and resources in one place. Am just starting to learn HTML5, and this is a big help.

Add Comment Register



Leave a Message

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

© 2014 DIY Genius.