Take me back!! I want my CSS!! Click me to get back :)

Close X

Skillcrush FREE 10-Day Bootcamp

Become a digital know-it-all in just 5 minutes a day!

What you ACTUALLY need to know about HTML5 to get hired

HTML5 is the fastest growing keyword in job listings. Can you believe this graph from Indeed?

jobgraph

What that means for YOU is that if you know HTML5 there are a whole lotta people who are dying to hire you.

(Not surprisingly, the other 9 fastest growing job keywords are ALSO in tech.)

Of course, if it were just THAT easy wouldn’t everyone be an HTML5 all-star by now?

I know, I know, nothing is ever as easy as it seems. But it’s also not AS complicated.

If you have read our tech term all about HTML5 or downloaded our HTML5 cheatsheet, then you have seen some of the new fancy tags that make up HTML5. Those <article> and <section> and <aside> tags are awesome, and you should be using them.

To a large extent, the goal of HTML5 was to improve upon the HTML4 specification and to update HTML to reflect how people were actually using it. So instead of making everyone use <div> tags for their footers, articles, headers, sidebars, etc. you now have a more semantically correct HTML5 tag to use.

But when an employer adds HTML5 to the their job listing, this is only a small part of what they are hoping you know about HTML5.

What they are really talking about are the advanced HTML5 features, which, when used with JavaScript, allow you to do all manner of neat programmatic things, that previously you had to use a backend programming language to accomplish.

In other words, HTML5 is like a secret keyword that actually means you have to know HTML5 AND JavaScript, because all of the really cool HTML5 stuff has to be unlocked using JavaScript.

But good news, JavaScript is easy to learn also and the stuff you can do with it is MIND BLOWING.

The four awesome features of HTML5 you have to know about (and real code examples of how to use them):

Geolocation

Where in the world are you?

Look, I am not for NSA spying, but it’s true that sometimes it would be really great to know where a user is so that you can feed them some targeted, location specific information.

For example, how cool would it be if the government had a website where it told you who your congressional representative was? Or what if when you went to Yelp it automatically sent you the restaurants closest to where you are RIGHT NOW, without you needing to search for anything? Or maybe your local pharmacy website could tell you the nearest location that’s open 24 hours!

Well, with HTML5’s Geolocation feature you can do that.

In order to unlock the Geolocation feature, you have to use some JavaScript (but not that much!). And since no one on the web is for spying, users have to agree to share their location.

Code adapted from the W3Schools.

 

Local Storage & Offline Web Applications

This is really TWO different HTML5 features, but they are somewhat related so I wanted to talk about them together.

If you are an alumni of the Skillcrush 10-Day Bootcamp then you are no doubt aware of servers and databases. You will remember that in order to save information (like a blog post) you have to have a programming language that can pick up your blog post and go save it in a database stored on a web server somewhere.

Lies!

Well not lies, but incomplete truths.

The new HTML5 local storage feature actually allows you to store a little bit of data right on the user’s computer. Now, this data won’t be available to anyone else, but it will be saved for future use by that user.

So, imagine that you wanted to tell a user that they have been to your website 10 times in the past month. Every time they visited your site you could save a note in their local storage saying “Oh hey! You visited us 5 times this month already.”

If this sounds a little bit like cookies, that’s because it is! Except waaaay better.

Code courtesy of the W3Schools.

The offline cache manifest feature of HTML5 is similar in that it allows you to download your website to the user’s computer by using something called the “cache manifest.” This is particularly useful for mobile optimized websites where users may not always be connected to the Internet but may still need to access your content.

Like if you are a New Yorker and want to be able to read your NY Times article on the subway. The NY Times website could download the article to your computer using the cache manifest, and even if you have to refresh the page while you are offline, you will still be able to read it.

If that sounds like what the NY Times mobile app already does it’s because it is! Except that instead of having to hire a fancy iOS developer to build an expensive mobile app, you can just make a normal mobile-optimized HTML website and give your reader all the perks of a mobile app for a fraction of the price.

HTML5 and the cache manifest, the savvy web developer’s secret weapon! Learn more here.

<video>

Much ado has been made about the HTML5 vs. Flash blood feud. Steve Jobs even came out early AND HARD against Flash and refused to make iPhones Flash compatible.

Job’s biggest gripe with Flash was just that it was memory intensive and therefore DRAINED the heck out of phone batteries.

My problem with Flash is that it’s a closed medium. What this means is that Flash videos come in this little closed box and there is no doing fun things to interact with them. Nothing (no JavaScript, no other programming languages) can penetrate their flashy little bubble. They are the epitome of non-dynamic, which makes Flash the animated equivalent of hand-coding HTML websites.

MHuW96t-1

How I used to feel when I had to work on Flash projects. Thank god that doesn’t happen anymore.

Cue the <video> HTML5 element.

Want to build a future focused Scandal viewing website where real-time tweets are displayed in the video player AS THEY GET TWEETED. Without you needing to hand select the tweets to show?

Yeah, with a little bit of JS you can do that.

Want to make your own MTV pop-up video throwback machine?

YOU CAN DO THAT!

For more amazing examples of really really cool things you can do with the new <video> HTML element in conjunction with JavaScript, check out Popcorn.js.

<canvas>

Sometimes techies crack me up with the way they name things. So what is it that you do with a canvas? Paint on it, right?

So what does one do with a <canvas> HTML5 element? Paint on it with your JavaScript paintbrush, OF COURSE.

giphy-1

Um, what?

Canvas is another example of how HTML5, when used with JavaScript, can do some of the fancy things that previously we could only do with Flash.

Using canvas and JavaScript you can make simple animations (like a preloader) or super complex ones (like a this particle one).

But the important thing to note here is that NO images are used in either one of these animations. It’s all JavaScript baby.

Once again, what’s great about canvas is that you can make the animations dynamic and interactive (just try moving your mouse around on that particle one).

Canvas code courtesy of HTML5 Demos.

Tweet This

  • annettegeek

    Wow. Skillcrush you are SOOO wrong about Flash that I am moved to write and correct you. Let me count the ways.

    1. Jobs and Adobe were in a boys p-ssing match over Flash. Third party tests showed Flash was no more memory intensive than hundreds of the apps in the app store. (Really, I have one that sucks my battery getting weather information.) And Apple refused with work the Adobe on a player for ios Safari. Like many things in the corporate world, this was a power play by the big boys.

    2. Apple relented on Flash and video. Flash video (with .mp4) works on iOS Safari.

    3. Flash requires a browser plugin. It is not a closed medium. It can import text files, as well as communicate with javascript, php, etc. It is beyond fabulous for dynamic content and superlight graphics.

    4. One of the beauties of Flash v. html canvas, is that you can make your Flash object scale dynamically without loss of image quality.

    5. Flash content looks the same IN EVERY BROWSER. No messin’ around with css for different browsers and browser versions. Then scrambling to test everytime a new version is released.

    6. Flash supports a strongly typed object-oriented language, unlike weak typing in javascript. It also outputs a single file — so sweet compared to the html/js/css alternative!!!

    7. Flash can and does exist on ios devices. There are Flash compatible browsers in the app store.

    8. Flash remains a key tool for game development. In test after test,
    javascript performance is lousy. Game developers are looking for something javascript comparable to Flash… but it’s not soup yet.

    http://www.wastedpotential.com/why-i-still-make-games-in-flashas3-for-now/

    9. For simple rotating banners or other simple content, go ahead and use javascript. Jquery libraries are awesome.

    10. If you need to create a user experience with rich interactivity,
    consider you audience. I continue to use Flash for elearning development projects (primarly desktop users).

  • nardolaflare

    This is cool.