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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<html> <head> <meta charset="utf-8" /> <title>Making an HTML5 Portfolio - eTechy101.com Demo</title> <link rel="stylesheet" href="assets/css/styles.css" /> </head> <body> <header> <h1>My Portfolio</h1> </header> <nav id="filter"> </nav> <section id="container"> <ul id="stage"> </ul> </section> <footer> </footer> |
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:
|
1 2 3 4 5 6 7 8 9 |
<li data-tags="Print Design"> <img src="assets/img/shots/1.jpg" /> </li> <li data-tags="Logo Design,Print Design"> <img src="assets/img/shots/2.jpg" /> </li> <li data-tags="Web Design,Logo Design"> <img src="assets/img/shots/3.jpg" /> </li> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
$(document).ready(function(){ var items = $('#stage li'), itemsByTags = {}; items.each(function(i){ var elem = $(this), tags = elem.data('tags').split(','); elem.attr('data-id',i); $.each(tags,function(key,value){ value = $.trim(value); if(!(value in itemsByTags)){ itemsByTags[value] = []; } itemsByTags[value].push(elem); }); }); |
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.
BlueHost | HostGator | Media Temple
