HTML 5 posts

In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.

Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.

We’ll...

With every new revision of CSS, a plethora of new, exciting attributes come to light;  one of which being the understated display: flex approach.

The flexbox layout model has been floating around the web for a little while now, each time with its own variation on the approach (some outdated, such as the display: box or display: flexbox method).

In...

Creating an to-do app is usually the first application you learn how to build in JavaScript but the problem with all those apps is that when you reload the page all those to-do’s are gone.

There is a simple solution though, and that’s to use local storage. The good thing about local storage is that you can save those bits of data to the user’s computer so that when they reload...

This is part two of the HTML5 audio introduction video; if you haven’t watched it already, I recommend checking out part one to get up to speed!

Today, we’ll be working on our HTML5 audio player and adding some exciting functionality to really bring our HTML5 player to life. We’ll be using a method involving data attributes, which allow for easy access to custom values for each audio element, and that’s where our titles, artists and album art come in.

By the end of this tutorial, you’ll understand the following: “Tagging”...

The introduction of the HTML5 spec introduced new tags for presenting media on a webpage; the <audio> and <video> tags, rendering the <object> tag no longer fit for video and audio streaming.

These new tags have made it considerably easier to add rich media content to your design, and in today’s video tutorial, I’ll be talking through the following features which make HTML5′s media tags so flexible:

Using HTML5 audio tags to play an audio track on load; wrangling HTML5′s more complex parameters, such as...

HTML5 came with all new APIs, new input types and attributes for forms. As is often the case, those major additions often obscure the minor upgrades and I think that this is particularly true of the download attribute.

As you know, there are some files that the browser doesn’t automatically download; images, other web pages and depending on the settings in your browser, sometimes even PDFs. The download attribute gives the browser a native...

A few years ago, it was tough to create a professional-looking website without designing and coding something from scratch. There were free templates and website builders, sure, but the results from most were less than professional. Not exactly how you want to represent yourself or your work to the world.

That’s all changed in more recent years. Now, if...

Creating canvas apps is the new thing, we can even create games with it, it’s supported in all major browsers both desktop and mobile, and that makes it a more viable solution than using Flash.

In this tutorial we are going to use the canvas element to create...

Given the rise in mobile web usage year on year, there is now an increased focus on making websites more responsive, adaptive and user-friendly for visitors on small screens. One key area that is often overlooked and that could easily lead to a heap of frustration is the contact form. Whether a user is logging into a website, part way through a sign-up process or in the final stages of completing an online order, good usability and a high-quality...

Bundled with HTML5 came a large number of API goodness and one of the best was the Fullscreen API that provides a native way for the browser to do what was only possible in flash for a long time: display the webpage in fullscreen mode for the user.

This comes in handy if you are displaying video, or images, or if you are developing a game. In fact, any...

Lately some websites, like This is the Brigade and All You, have started featuring a dynamic and animated menu that resizes on scroll down. Minimizing the main navigation to allow more space for the content. In this tutorial, I’ll explain how you can create this menu yourself with HTML5, CSS3 and just a bit of jQuery. 

This kind of menu is great if you want to give special focus on your content throughout the whole website, and it also enables you to create a bigger and more impactful navigation on a user’s first visit to a website. You can better show your website brand or logo, great for the above the fold view; and after engaging the user in a visit, a smaller and minimized version hides away subtly to let the user focus mainly on your content.

There are several ways of doing this. In this tutorial, I’ll explain how to create a full width fixed menu bar, that resizes in height...