HTML5 Tutorial: Create a Beautiful Portfolio in HTML5

This is an elegant HTML5 tutorial that will make you learn how to create a portfolio in HTML5 which is useful to present your work. The portfolio created in HTML5 will be empowered by Quicksand plugin and jQuery.

Almost we all are fully acquainted with HTML5. Not only upto its name but the power of HTML5, its achievements and features too. Earlier, in previous post we have discussed about this including some amazing examples and experiment too. However, apart of this today, I am presenting this HTML5 tutorial in account of which you can create a beautiful and impressive HTML5 portfolio that will be empowered with Quicksand plugin and jQuery.


First of all you are required to write down the markup language for a new HTML5 document. The stylesheet for the page will be included in the head section as well as the jQuery library, our script.js and the Quicksand plugin will sit in right just before the closing body tag.


Here, the body has incorporated various novice elements of HTML5. The header comprises H1 heading which is also styled as the logo, the section element retains the unordered list including portfolio items (where you can add more list by jQuery, as we discuss later), and the nav element which acts as a filter for content and styles as a green bar.

Our portfolios items are retained by the #stage unordered list. How these items seems to be appear can be viewed below. Each of them incorporate a HTML5 data attribute, which very significantly defines comma-separated tags series. Further, when you will attempt to employ jQuery in order to loop through this list, the tags will be recorded and categories which can be designated from green bar.

Now, you are free to put anything you want in li items and further customize the portfolio. However, the animated transitions of the list will be look after by the Quicksand plugin. So, just go ahead to make an experiment.

The jQuery

Here, the Quicksand plugin discriminate two unordered lists of items and perform the matching li comprised inside them and then make them animate to their respective new positions. The jQuery script written in this section will carry loop through the items of portfolios in the #stage list and designate the every tag to create a new unordered list which is hidden too. Also, it will attempt to create a new menu option which tends the quicksand transition among two lists.

Therefore, first of all you will be required to listen for ‘ready’ event (which is referred as the loading of page at the earliest point where you can access the DOM), as well as all li items can be looped in account of pointing out the concerned tags.

script.js Part 1

Here, every tag is supposed to be included in the itemsByTags object as an array. Which states that the itemsByTags would retain an array incorporating all items which is accompanied by Web Design act as one of their tags. Thus, we will attempt to employ this object towards creating a hidden unordered list for Quicksand on the page.
Therefore, in order to take care of this on behalf of us, it is recommended to create a helper function:

script.js part 2

This function calls a group name and an array along with the items of li as parameters. Then, it used to clone these specific li items into a new UL as well as include a link in the green bar. Next, you are required to loop through all groups as well as call the function we discussed above. Also, go to listen
for clicks on the items of menu.

script.js Part 3

Now, we have got everything at appropriate place, thus you can move ahead on styling the page.


The styling of page is not seems to be much interesting (for this see CSS in assets/css/styles.css) but the more interesting is the green bar also called as ‘#filter bar’, which employ the before/:afterpseudo elements towards incorporating the attractive corners on the sides of bar. As, these are appropriately positioned, they also used to grow parallel with the bar.


Before/After elements

Finally your beautiful portfolio of HTML is accomplished now.

However, hopefully this post will be highly useful and worthy for all developers to present their work. The one upside of this HTML tutorial is that it is very easy and simple to customize. Only you are required to alter the contents of initial LI items of #stage list and assign new tags, rest will be look after by the script itself.

Christiana McGee

Christiana McGee loves development and possesses specialization in converting Sketch to HTML. Associated with CSSChopper - Sketch to HTML Company, she constantly strives to serve the best, fastest and innovative solutions in a stre