How to build a portfolio website from scratch


If you are new to web development or just learned HTML and CSS and looking to build something from scratch this post will teach you how to build a  full-fledged web page from scratch. In this tutorial, I am going to build a portfolio website from scratch using a w3.css framework.

If you are curious about what we are going to build just have a look at the preview.

portfolio website-project preview

Step 1 : Draw your Designs

Before you are going to develop your website It’s a good idea to draw your designs using Photoshop or Illustrator even paper and pen also fine. It will speed up your work and avoid interruptions while coding.
I use simply paper and pen. you should try your own.

portfolio website - designs

Step 2 : Choose your Tools

Before you start coding it’s a better idea to decide which tools to use. In my case, I used HTML, CSS and W3.CSS framework. W3.CSS is a modern CSS framework. It’s very fast and easy to learn than other frameworks.
If you are not familiar with CSS framework. It’s just nothing but a collection of CSS classes.

Step 3 : Create a folder for your project ( portfolio website ).

Create a folder on your computer and name it as portfolio website ( you can name it whatever you want).

Step 4 : Open project folder  in your favourite text editor

portfolio website - editor preview

I am using Atom text editor for my project. you can use whatever you like. sublime, visual studio code, brackets are also best text editors. They provide a neat syntax highlighting for various programming languages.
In your project folder create a folder and name it as img   to store images.

Step 5 : Creating files and adding CDN links.

In your project folder create two files .
1)  index.html
2)  style.css

I am not going to split this project into multiple pages. I will put everything in a single page because I would like to keep things as simple as possible.
In index.html put the below code

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>portfolio website</title>
  </head>
  <body>
    
  </body>
</html>

This is the basic structure of the HTML page and this is the only one page we have to code in this project.

Add W3.CSS CDN link

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

CDN stands for Content Delivery Network. The above link loads the w3.css framework into your index.html page. You can also download the framework and can add it from your computer. But In my opinion CDN is the better option and It’s is easy to set up.

Add Font Awesome CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Font Awesome is a font and icon toolkit. It provides a collection of icons. In our project, we are going to use several icons to make our website cleaner and more meaningful.

And finally, add the style.css file which you created earlier.

<link rel="stylesheet" href="./style.css">

All your custom styles which you write will leave in this file.

At the end of this step, your index.html page should look like this.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./style.css">
    <title>portfolio website</title>
  </head>
  <body>
    
  </body>
</html>

Step 6 : Open index.html with a web broswer

A web browser is a place where you can see the output of HTML pages. Go to your project folder and right-click on the index.html and open with a web browser. I am using google chrome. You can use whatever you like.

At now you didn’t see anything on the browser because we didn’t write anything on the body tag.

Now let’s start code.

Add Container to wrap the hole page into a single part.

<div class=”w3-container-fluid”> </div>

Now divide the container into two parts. Without using CSS frameworks we need to write a lot of CSS to divide the sections and putting them side by side. Unfortunately, W3.CSS makes our work easier. It provides the grid system to divide the HTML body.
Take a look at on below code.

<div class=”w3-row”>

  <div class=”w3-col s5 m5 left-component”> </div>
  <div class=”w3-col s7 m7 right-component”> </div>

</div>

The above code will take the whole container div as a row using w3-row class and divide 5 columns as a left component and 7 columns as a right component. w3.css supports 12 columns responsive fluid grid.
Adding a border to the whole body

body{
  border:1px solid #eee;
}

Give height to the left and right components.

.left-component, .right-component{
  height: - webkit – fill- available;
}

Note: WebKit-fill-available is for Google Chrome you need to give different value if you are using another browser.
add the border to the right side of the left component.

.left-component{
    border:1px solid #eee;
}

adding container for user cover

<div class=”user-cover-container”> </div>

adding styles to user cover

.user-cover-container{
  height: 200px;
  background: #2b2b52;
  background-image: url('./img/cover.jpg');
  background-size: cover;
}

add a container to display the user bio.

<div class="user-bio">
    <!-- user profile photo -->
    <img src="./img/user.jpg" alt=""  />

    <!-- user name and job -->
    <div class="user-info">
       <h5><b>Jhon Doe</b></h5>
       <span>Web Developer & Writer </span>
    </div>

    <!-- user socila profile links  -->
    <div class="user-social-links">
      <span><i class="fa fa-facebook-square" aria-hidden="true"></i></span>
      <span><i class="fa fa-twitter" aria-hidden="true"></i></span>
      <span><i class="fa fa-google-plus-square" aria-hidden="true"></i></span>
      <span><i class="fa fa-linkedin-square" aria-hidden="true"></i></span>
      <span><i class="fa fa-github-square" aria-hidden="true"></i></span>
    </div>

 </div>

The above code will display user profile photo, user name, job and social links

.user-bio{
  position: relative;
  top:-50px;
  margin-bottom: -50px;
}
.user-bio img{
  height: 100px;
  width: 100px;
  border-radius: 100%;
  border: 5px solid white;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.user-info{
  text-align: center;
}
.user-social-links{
  font-size: 25px;
  text-align: center;
}

container for displaying few lines about user.

<!-- about user -->
<div class="user-about">
    <h5><b>About Me</b> </h5>
      <div class="user-about-text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
        nisi ut aliquip ex ea commodo consequat.
      </div>
</div>
.user-about{
  padding: 10px;
}

Add a container to display user skills

<!-- user skills -->
<div class="user-skills">
   <h5><b>Skills</b></h5>
   <div class="skills">
     <span class="w3-tag w3-blue">HTML5</span>
     <span class="w3-tag w3-blue">CSS</span>
     <span class="w3-tag w3-blue">Javascript</span>
     <span class="w3-tag w3-blue">MySql</span>
     <span class="w3-tag w3-blue">PHP</span>
     <span class="w3-tag w3-blue">Nodejs</span>
     <span class="w3-tag w3-blue">Express.js</span>
     <span class="w3-tag w3-blue">MongoDb</span>
   </div>
</div>
.user-skills{
  padding: 10px;
}
.skills span{
  margin: 5px;
  border-radius: 5px;
}

Ok Now we have completed our left-component at the end of this section your portfolio website page should look like this.

portfolio website - half-completed preview

In the right-component, we are going to use dynamic tabs to display portfolio, services, blog and contact me sections.

let’s add a tabbar

<div class=”w3-bar w3-white” > </div>

Add tab links to the bar

<div class="w3-row w3-border-bottom">
   <div class="w3-col s3 m3">
      <button class="w3-bar-item w3-button tablink w3-blue" 	onclick="openTab(event,'Portfolio')" style="width:100%;">let’s add a tab bar
       <i class="fa fa-briefcase"></i>
        PortFolio
      </button>
   </div>
   <div class="w3-col s3 m3">
     <button class="w3-bar-item w3-button tablink" 	onclick="openTab(event,'Services')" style="width:100%;">
      <i class="fa fa-cogs"></i>
       Services
     </button>
   </div>
   <div class="w3-col s3 m3">
      <button class="w3-bar-item w3-button tablink" 	onclick="openTab(event,'Blog')" style="width:100%;">
       <i class="fa fa-rss"></i>
        Blog
      </button>
   </div>
   <div class="w3-col s3 m3">
      <button class="w3-bar-item w3-button tablink" 	onclick="openTab(event,'Contact')" style="width:100%;">
       <i class="fa fa-phone"></i>
         Contact Me
       </button>
   </div>
 </div>

create containers for tablinks

<div id="Portfolio" class="w3-container tab" > </div>
<div id="Services" class="w3-container tab" style=”display:none”> </div>
<div id="Blog" class="w3-container tab" style=”display:none”> </div>
<div id="Contact" class="w3-container tab" style=”display:none”> </div>

In this step, you also need to write few lines javascript to full fill the functionality of tabs.
At the bottom of the web page and above the tab paste the below code.
If you are not familiar with javascript it may be confusing you. No problem I will explain briefly in a few lines what it does in the comments.

<script type="text/javascript">
   function openTab(evt, tabName) {
  //defining 3 variables.
      var i, x, tablinks;
  //collecting elements and store them in an array which has a class name of tab	
      x = document.getElementsByClassName("tab");
  
  //loop over the x array and give style.display=”none” property to every element
      for (i = 0; i < x.length; i++) {
         x[i].style.display = "none";
      }
  
  //collecting elements and store them in an array which has a class name of tablink
      tablinks = document.getElementsByClassName("tablink");
  
  //loop over tablinks array and replace the “w3-blue” class with none.
      for (i = 0; i < x.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" w3-blue", "");
      }
  
  //find the element with a id of tabName and set display equal to block
      document.getElementById(tabName).style.display = "block";

  
  //give the classname “w3-blue” to currentTarget
      evt.currentTarget.className += " w3-blue";
   }
</script>

Still confusing No problem Just leave it and focus on designing. But don’t forget to paste the code.
Ok now the tabs are working but the tab containers are empty.
Now fill the containers with code.
#Portfolio

<div class="user-latest-projects" >
   <h3><b>Latest Projects</b></h3>
   <div class="w3-row-padding">

      <div class="w3-col s4 m4">
         <div class="project">
         	<img src="./img/hosting and management.jpg” 						style="width:100%;height:150px;">
         	<div class="w3-container w3-padding">
            	<span> <b> Project Name </b></span> <br>
            	<span>Category</span>
         	</div>
          </div>
   	</div>

      <div class="w3-col s4 m4">
         <div class="project">
           <img src="./img/app development.jpg" style="width:100%;height:150px;">
           <div class="w3-container w3-padding">
               <span> <b> Project Name </b></span> <br>
               <span>Category</span>
           </div>
         </div>
      </div>

      <div class="w3-col s4 m4">
         <div class="project">
           <img src="./img/website development.jpg" style="width:100%;height:150px;">
           <div class="w3-container w3-padding">
           		<span> <b> Project Name </b></span><br>
           		<span>Category</span>
           </div>
         </div>
      </div>

</div>

<div class="w3-row-padding w3-margin-top">

   <div class="w3-col s4 m4">
     <div class="project">
       <img src="./img/app development.jpg" style="width:100%;height:150px;">
       <div class="w3-container w3-padding">
         <span> <b> Project Name </b></span><br>
         <span>Category</span>
       </div>
     </div>
   </div>

   <div class="w3-col s4 m4">
     <div class="project">
      <img src="./img/hosting and management.jpg" style="width:100%;height:150px;">
       <div class="w3-container w3-padding">
        <span> <b> Project Name </b></span><br>
        <span>Category</span>
       </div>
      </div>
   </div>

  <div class="w3-col s4 m4">
    <div class="project">
    	<img src="./img/design.jpg" style="width:100%;height:150px;">
    	<div class="w3-container w3-padding">
      	<span> <b> Project Name </b></span><br>
            <span>Category</span>
       </div>
    </div>
  </div>

  </div>
</div>
.user-latest-projects{
  padding: 10px;
}

.user-latest-projects h3{
  text-align: center;
}

#Services

<h3 style="text-align:center;"> <b> Services </b></h3>

       <div class="w3-row w3-margin-top">
          <div class="w3-col s2 m2">
         	<img src="./img/website development.jpg" alt="" style="height:100%; 		width:100%;padding:10px;">
          </div>
          <div class="w3-col s10 m10">
            <h5>Website Design & Development</h5>
            <span>description</span>
          </div>
        </div>

        <div class="w3-row w3-margin-top">
           <div class="w3-col s2 m2">
             <img src="./img/design.jpg" alt="" style="height:100%; 		  	width:100%;padding:10px;">
           </div>
           <div class="w3-col s10 m10">
             <h5>Graphic Design</h5>
             <span>description</span>
           </div>
        </div>

        <div class="w3-row w3-margin-top">
           <div class="w3-col s2 m2">
              <img src="./img/hosting and management.jpg" alt=""  style="height:100%; width:100%;padding:10px;">
           </div>
           <div class="w3-col s10 m10">
             <h5>Website Hosting & Management</h5>
             <span>description</span>
           </div>
        </div>

        <div class="w3-row w3-margin-top">
           <div class="w3-col s2 m2">
             <img src="./img/app development.jpg" alt="" style="height:100%; width:100%;padding:10px;">
           </div>
           <div class="w3-col s10 m10">
             <h5>Mobile Development</h5>
             <span>description</span>
           </div>
        </div>

#Blog

<h3 style="text-align:center;"><b>Blog</b></h3>
     <div class="w3-row">
       <div class="w3-col s4 m4 w3-padding">
         <img src="./img/design.jpg" alt="" style="height:150px; width:100%;">
       </div>
       <div class="w3-col s8 m8">
         <h5><b>New Ecommerce website Deployed</b></h5>
         <span>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 			eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 		ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 	portfolio website	aliquip ex ea commodo consequat. Duis aute irure dolor in 				reprehenderit in voluptate  .
          <a href="javascript:void(0);" class="w3-text-blue">read more</a>
         </span>
        </div>
      </div>

     <div class="w3-row">
     <div class="w3-col s4 m4 w3-padding">
       <img src="./img/app development.jpg" alt="" style="height:150px; width:100%;">
     </div>
     <div class="w3-col s8 m8">
        <h5><b>New Android app Launched</b></h5>
         <span>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 		eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 		ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 	portfolio website	aliquip ex ea commodo consequat. Duis aute irure dolor in 				reprehenderit in voluptate  .
          <a href="javascript:void(0);" class="w3-text-blue">read more</a>
         </span>
     </div>
   </div>

   <div class="w3-row">
     <div class="w3-col s4 m4 w3-padding">
       <img src="./img/hosting and management.jpg" alt="" style="height:150px; width:100%;">
     </div>
     <div class="w3-col s8 m8">
        <h5><b>Working on new framework for further projects</b></h5>
        <span>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim portfolio website		ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in			reprehenderit in voluptate  .
          <a href="javascript:void(0);" class="w3-text-blue">read more</a>
        </span>
     </div>
  </div>

#Contact

<h3 style="text-align:center;"><b>Contact Me </b></h3>
     <div class="user-contact">
        <form action="" class="w3-container w3-text-blue w3-margin">

          <div class="w3-row w3-section">
             <div class="w3-col" style="width:50px">
      <i class="w3-xxlarge fa fa-user"></i>
     </div>
             <div class="w3-rest">
                 <input class="w3-input w3-border" name="first" type="text" placeholder="Type Your FullName">
             </div>
          </div>

          <div class="w3-row w3-section">
             <div class="w3-col" style="width:50px">
      <i class="w3-xxlarge fa fa-envelope-o"></i>
     </div>
             <div class="w3-rest">
              <input class="w3-input w3-border" name="email" type="text" placeholder="Email">
              </div>
           </div>

           <div class="w3-row w3-section">
              <div class="w3-col" style="width:50px">
      <i class="w3-xxlarge fa fa-phone"></i>
      </div>
              <div class="w3-rest">
                 <input class="w3-input w3-border" name="phone" type="text" placeholder="Phone">
               </div>
            </div>

           <div class="w3-row w3-section">
               <div class="w3-col" style="width:50px">
      <i class="w3-xxlarge fa fa-pencil"></i>
       </div>
               <div class="w3-rest">
                 <textarea class="w3-input w3-border" rows="8" cols="80" style="resize:none;"></textarea>
               </div>
           </div>

           <div class="w3-row" style="text-align:right;">
               <button class="w3-button  w3-blue  w3-padding" 	style="width:200px;">Send</button>
           </div>

       </form>
 </div>

Ok That’s it. Now our project portfolio website was completed if you follow all the steps properly your web page should look like as a preview which is given at the beginning of the tutorial.

Also you may like
How to Create a Basic Crud Application using angularjs


Leave a Reply

Your email address will not be published. Required fields are marked *