Archive | HTML5 Tutorials

RSS feed for this section

HTML5 Game that Teaches You HTML

HTML5 game called Super Markup Man

If we could learn everything we need to know about life by playing games, living would be a breeze. I would create the “How to Wipe Your Rear End” game. I’m somewhat of an expert on the subject although I haven’t started a blog…or should I say “log”. The game would go on to be a big hit because everybody needs to know how to wipe and I would make so much money that I could finally afford to get that Steve Ballmer’s autograph I’ve always wanted.

Markup Man Game Character

Super Markup Man is an HTML5 game where players can learn about the rules and organization of HTML markup without writing any actual code. The main character of Super Markup Man is Markup Man…shocking! Markup Man looks like what would happen if Prince William and an 8-bit Zelda made a “royal” baby. The goal of each level is to move HTML tags around using Markup Man to make the website example a reality. There are 30 levels which get more challenging as you play. The game is timed and progress is auto-saved if you leave early. It’s a very simple game that is fun to play even if you already know HTML tags. How fast can you get through all 30 levels? Feel free to post your times in the comment section.

HTML5 Game Engine Tutorial

You can also learn more about HTML5 game programming thanks to this game. The game designer has made a series of tutorials to explain how Super Markup Man was built. So far he has published Part 1: The Basic Engine and Part 2: Jumping, Falling, and Stopping. The tutorials are written in an easy to understand way and include example files. Continue Reading →

Learn HTML5 with Videos and Books

Treehouse Logo

I moved to a rural part of Japan six years ago with no prospects. There was no job waiting for me and I didn’t have a college degree to help me become employed. My Japanese speaking skills were nonexistent unless you want to give me credit for mistakenly asking people if I could “have” their toilet. I knew I needed to figure out a way to earn a living.

I tried several ideas that all failed. The most notable of the failures was the month I tried to sell Japanese Transformers on eBay. I probably would have done better if I made an eBook “How to Make Money Selling Japanese Transformers”. You really can make money but not much…just enough to purchase expired sushi and paper towels. The towels are important because they will be used to clean up any sushi that is “returned to sender”. Ewwww!…but true.

How did I escape financial ruin? How did I go from being dirt poor to just poor? The answer is online tutorial and training videos. I had computer skills but needed to improve them so I signed up for the free trial at Lynda.com and watched as many videos as I could. I was also learning from YouTube, forums, and by dissecting source code. The way I went about acquiring skills wasn’t ideal. I think the learning online thing would have worked better for me if everything I needed to know was in one place. This is why I was very happy when Faye, the community manager at Treehouse contacted me.

Treehouse is taking a new angle at the traditional online teaching video. Their videos tend to run as a course with quizzes and interactive Code Challenges mixed in. As you complete the courses you will earn badges that are an indicator of what skills you currently possess. These badges are then viewable by anyone including recruiters from big companies. This means that everything you need to know will finally be in one place! Continue Reading →

The Best HTML5 Poster

Best HTML5 Poster

If I had a C++ poster on my wall growing up, I might have had more success with the programming language later in life. Having a firm grasp of the basics in anything you wish to master is crucial for your success. This is why I think the HTML5 Poster Kickstarter project is a fantastic idea. It is raising funds for the printing and distribution of a poster that educates beginners on the basics of HTML5. The object of the project is to get the HTML5 posters in as many public spaces as possible. You can even make a donation that will secure a full color poster for yourself.

There are other HTML5 posters floating around the web but this is the best. It places snippets of code side-by-side with the output they produce so that casual onlookers can understand the cause and effect nature of programming through simple HTML tags. The HTML5 poster makes it easy for newbies to digest and is also easy on the eyes. Continue Reading →