This tutorial will allow you to create portfolio sites just like mine www.vineetdhanawat.com from the scratch.

Requirements: 1 free CSS template (Recommended Site: http://www.freecsstemplates.org/ )
Skills: Basic HTML / PHP knowledge
Softwares: Notepad++, WAMP

Let us take one of the basic template ‘Stylized’ (http://www.freecsstemplates.org/preview/stylized). We will transform the website as shown below.

Before editing, let me make it clear. Majority of these site offer free CSS templates. One is free to modify and use them commercially. But they are licensed under a Creative Commons Attribution 2.5 License. That means, you need to credit author by providing a link back.

Please install WAMP in your system. And place the unzipped stylized folder under www folder. Before proceeding ahead, make sure http://localhost/stylized/ is accessible and working. Now go inside the folder. You will find 4 things.

1. ‘images’ folder – It contains all the background images
2. index.html – This is what you see on the mainpage
3. license.txt – CCA 2.5 license, you can safely delete it, if you provide a link back to the author
4. screen.css – Cascading style sheet. It tells the browser how the webpage (text / links etc) is displayed.

** I like PHP, so we will rename all existing / new webpages as .php extension. **

Step 1 : Personalizing the Page

Open the file index.php in notepad++. First change the TITLE of the page. It is the text displayed on the top of the browser.

Stylized by NodeThirtyThree + Free CSS Templates

To

Vineet Dhanawat  - Home Page

We will talk about <meta>Tags in some other post, related to Search Engine Optimization. As we can see our style sheet property file has been included. It can be renamed and can even be placed anywhere in the web directory. All you need is to include the file using relative path and also change the paths of images included inside the CSS file. If you are still unsure about this, please don’t change the default path

Next edit the H1 and H2 tags. One can remove H2 tag or write anything he wants

<div id="logo">
<h1><a href="#">Vineet Dhanawat</a></h1>
<h2>Tech Enthusiast</h2>

Next is the links. We will come back to them later in this post. Scroll down below. As you can see on the webpage there are 2 sections as “welcome to our website” abd “fusce ultri… “ . We will rename them as “About Me “, “Work” and include the personalized text.

<div id="about" class="post">
<h1 class="title">About Me</h1>
<div class="entry"><img class="alignleft" src="images/personal.jpg" alt="" width="135" height="150" />
I am a senior undergraduate student pursuing B.E.(Hons.) Computer Science from <a href="http://www.bits-goa.ac.in/" target="_blank">Birla Institute of Technology and Science, Pilani</a>.
</div>
</div>

We have included a personalized image under about me section. The image has been placed on the left and so we need to change screen.css file a bit. Include these lines anywhere in the screen.css file.

.alignleft {
float: left;
}
img.alignleft {
margin-right: 20px;
}

Now comes the sidebar, It is normally used to provide links / references. Modify the links as follows:

<div id="sidebar">
<div id="useful-links" class="box">
<h2 class="title">links</h2>
<div class="content">
<ul>
	<li><a href="http://www.bits-goa.ac.in/" target="_blank"><strong>BITS Pilani - Goa Campus</strong></a>

target=_blank property in HTML is used so that the links open in new window.

Next we want to include our social network pages. For the purpose, I have included 4 images of LinkedIn, Twitter, Facebook and Orkut. They have been placed under folder named ‘follow’ inside images directory. You just need to change code for the links

<div id="sponsors" class="box">
<h2 class="title">Follow Me</h2>
<div class="content">
<ul>
	<li><a href="http://www.linkedin.com/in/vineetdhanawat" target="_blank"><img title="LinkedIn Profile" src="images/follow/linkedin.png" border="0" alt="" /></a>

You can include as many social profiles as many you want. Just keep including small thumbnail images at the proper path.

Last but not the least comes the footer. Look for footer tag. Don’t forget to include backlink to author for the design and a link back to us as appreciation for the tutorial.

<div id="footer"><hr />
Best viewed on 1280x800 resolution with <a href="http://www.mozilla.com/firefox/">Mozilla Firefox 3.6</a> or above / <a href="http://www.google.com/chrome"> Google Chrome 5</a> or above
Designed by <a href="http://www.nodethirtythree.com/">NodeThirtyThree</a> for <a href="http://www.freecsstemplates.org/">FreeCSSTemplates</a>
|| Hosting Provided by <a href="http://www.singlewrap.com/">SingleWrap</a> - Your Web Host Appetite
</div>

We have completed customizing the mainpage.

Step 2 : Adding more Pages

Let us start adding few more pages to it. Its pretty simple actually. Simply copy paste index.php and rename it to education.php . First you need to change links on your homepage. Go back to the part in the code which has the menu items.

<div id="menu">
<ul>
	<li class="active"><a accesskey="1" href="#">Homepage</a></li>
	<li><a accesskey="2" href="#">Products</a></li>

Edit them as follows

<div id="menu">
<ul>
	<li class="active"><a accesskey="1" href="index.php">Homepage</a></li>
	<li><a accesskey="2" href="education.php">Education</a></li>

Now open education.php page in notepad++. I think now you know what to do. Change TITLE / Basic Content / links etc.

Did you notice something as class=”active” above?  Similarly in education.php set those properties for education link.

<div id="menu">
<ul>
	<li><a accesskey="1" href="index.php">Homepage</a></li>
	<li class="active"><a accesskey="2" href="education.php">Education</a></li>

As you can see the education.php page contains 2 section. You can rename them as Secondary Education and Undergraduate Education. Let’s say you need one more section. Look carefully in the code, to find <div id=”about”> …. </div> This comprises of a section. Simply copy this part and paste it below the previous two. Rename this to ‘Courses Completed’.

Similarly create few more pages like ‘skills.php’ / ‘experience.php’ / ‘contact.php’ .

Congratulations ! You have done it. Download the final Customized Template .

P.S: Did you notice that on my homepage when you click on a page , the URL changes to #something and the page contents change instantly. That is javascript and it makes pages even smaller / faster w.r.t load time. I’ll cover that in some other tutorial.

P.P.S: If you wish to host your own website / blog etc , Please visit SingleWrap.