Creating a Portfolio with HTML5

You can create a completely customizable portfolio with the help of HTML5 and optionally using JQuery. First of all, we would need to write a markup for the HTML5 document, after which we would proceed on to the JQuery code. The markup HTML5 code is as follows:

You would see certain new HTML5 elements in the above code which were not part of the previous versions. The main heading would be included in the holder element while unsorted detail of all the required lists would be inserted in the section element. Additionally, we would need a content filter which would be styled as a green bar under thenevelement. All the portfolio items would be included in the #stage list which is unordered for the time being.

The items would further be explained in a piece of code given below where each of them would have an HTML5 data attribute defining a series of comma separated tags. Recording of tags and creation of categories would be done latter with the use of JQuery. So the items along with their tags are:

Now comes the work of JQuery which is to loop through the portfolio items in the #stage list and at the same time, create an unordered list for every tag that it comes across. A new menu option would also be created with JQuery:

Tags are added in the form of an array to the itemsByTags object. So basically itemsByTags would be holding the array of the items having Web Design among their tags. What now remains is styling the page which can further be done with the help of CSS.

Looking for a quality hosting service? here are a few I suggest.
BlueHost | HostGator | Media Temple
Ali has been an entrepreneur in web, video and related technologies. Having worked with many business across the globe, Ali stands truly a great pillar in the business working with him.