HTML articles

How to use the flexbox layout method (part 2)

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...

260 Shares

9 comments

Daniele says:
I'm not sure the involvement of the flexbox method... Will it substitutes the grid layout?

/ May 15, 2013

How to use the flexbox layout method (part 1)

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...

344 Shares

19 comments

Colin Horn says:
IE 10 shows support to flex boxes. But has it's own prefix of -ms-flex. IE9 downwards doesn't show support, so once 8-9 dies a death I'll be happy to use this. And with...

/ May 8, 2013

How to use local storage for JavaScript

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...

267 Shares

3 comments

Sara Vieira says:
Thank you so much , glad you liked the article

/ Apr 30, 2013

Defensive HTML and CSS

When it comes to rendering on somebody else's DOM, you can't naively write HTML and CSS like you might for your own self-contained web application. You've got to think carefully about how preexisting CSS and JavaScript code might affect your...

213 Shares

6 comments

Melanie Sumner says:
I like the idea of being proactive. Friends don't let friends use !important, though.

/ Apr 30, 2013

How to use HTML5 audio (part 2)

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...

270 Shares

2 comments

Sami Mansour says:
Firstly, I like to thank you on the lessons. I added previous button: $('.prev').on('click', function(){ $.each($('audio.playsong'),...

/ Apr 29, 2013

How to use HTML5 audio (part 1)

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...

291 Shares

5 comments

Duncan says:
Hi Sam, Thanks for the tutorial. One point - I can't get the second song to play without adding: nowPlaying = audioArray[i]; after the increment of i. Duncan

/ Apr 23, 2013

How to use the download attribute

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...

261 Shares

19 comments

Niklas N says:
yes i can see them :)

/ Apr 22, 2013

IM-Creator: Build awesome HTML5 sites for free

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...

244 Shares

7 comments

Kim says:
wow - great templates. look so modern in comparison to the outdated crap that's out there... builder is intuitive too - like a powerpoint sheet :)

/ Apr 18, 2013

How to create a color picker with HTML5 Canvas

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...

442 Shares

9 comments

Lucas says:
Very cool, Sara. Nice work. I would like to implement this on my site as well, however, I've run into a small problem. The getImageData function doesn't seem to work all...

/ Mar 21, 2013

How to make your contact forms mobile friendly

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...

512 Shares

6 comments

Gary Hicks says:
Encountering (mobile) forms that insist on Autocapitalisation and Autocomplete is a pet peeve of mine. Now I know how to turn them off, thanks!

/ Mar 19, 2013

How to use the Fullscreen API

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....

399 Shares

14 comments

Frivgazo says:
i like your post

/ Mar 13, 2013

How to create a resizing menu bar

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...

636 Shares

12 comments

Allan Stepps says:
Just be more efficient... No need the "large" class (just say it's the default one). And the effect in one line of jQuery: $(document).on("scroll",function(){ ...

/ Mar 12, 2013

How to build a threaded comment block with HTML5 and CSS3

Blogs and forums often have threaded comment replies built into their network. Popular social networks Reddit and Hacker News both support threaded comments, which allows users to directly reply inline with comments, voicing...

490 Shares

2 comments

Janemig says:
Very nice threaded comments design! I like how the vertical lines connect the commenters to each other, much like a wireframe is to a sitemap design.

/ Jan 18, 2013

The harsh truth about HTML5's structural semantics (part 3)

In the first part of this series we looked at the failings that lead to the structural elements new to HTML5; in the second part of the series we looked in detail at the consequences of those failings; in this final part we'll look for a way forward,...

300 Shares

7 comments

Umber says:
Hmm, I'm not opposed to forking the spec. One of the most astounding revelations I've had recently was when I read this interview with mr. Hickson:...

/ Jan 14, 2013

Prev123Next

	Young, modern, I like them.
	Not sure, I hope they'll grow on me.
	Ugly, looks like a tie-dye T-shirt.