How to build a portfolio website from scratch

Welcome to the first-ever article in our web development category. In the following article, we will learn how to create a Portfolio website from scratch. Please note that this article is composed to help you get started with basic web designing. So, we will create a very basic and simple web page. We want you to understand the following things to keep in mind before we start creating things:

**What is a web portfolio?**

A web portfolio is a website that showcases your education, skills, and previously provided services regarding your work. While creating a portfolio, we fundamentally focus on attracting new customers to buy our skill or service.

**Why do you need a web portfolio?**

Let’s take a look at common examples. Most car companies display their cars in a place called a showroom. The Portfolio does the same thing. If you want to become a web developer or a graphics designer in the future, a portfolio could be handy. To showcase your skills and previous records of services done, a portfolio could be served as a key to increase your clients and target specified clients related to your field of work.

**Brainstorming to build a simple portfolio website:**

When Designing your portfolio website, you should first design a prototype and then implement your website design accordingly. Without creating a prototype, you may waste a lot of time and end up with failure. That's why prototyping your website design is highly recommended. Here is the one for our portfolio website.

As clear from our prototype, the structure of our website involves following

Navigation bar
Detail’s section/box
A cover photo of your portfolio
Social media links (Twitter, Facebook, Instagram, LinkedIn)

Don’t worry! We will do each and everything step by step.

What is responsiveness in a website?

A website design that adjusts itself on different screen sizes or devices would be referred to as a Responsive website design. In this article, we are creating our responsive design without bootstrap and CSS media queries.

Tools required need to build a portfolio website

Visual Studio Code or Any other text editor.
Browser to see the results of your code.

HTML Markup to build a portfolio website

1. Setup Your Page:

Create a file in visual studio code named index.html.
Create another file named style.css.
Add a <head> tag to your HTML.
Link the stylesheet file into HTML file by using <link:css> as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css"> <!—-link css to html file>
    <title>Portfolio - </title>
</head>

Use the HTML <title> tag in the head to give the title of the site page “Portfolio -” as:

  <title>Portfolio - </title>

Why we use class attribute and how it is different from ID in HTML

Html class attribute is used to group the same type of elements. Classes are used to identify multiple or groups of elements having the same styling. We use the "." selector to select the class attribute of an element. On the other hand, the ID attribute is useful when we want to identify an element uniquely. We use IDs when an element has unique and particular styling applied. We use the "#" selector to select the ID attribute of the element.

2. Creating Social media links:

Add a <body> tag to your HTML file.
To add social media links, add a <div> tag and give it a class “social”.
All the links have "#" in their src because this webpage is just for demo.
Inside “social” div, add 3 <a> anchor tags.
Give a class “fb” to the first <a> tag.
Give a class “twitter” to the second <a> tag.
Give a class “linkedin” with the third <a> tag.

<div class="social">
<a href="#" class="fb"></a>
<a href="#" class="twitter"></a>
<a href="#" class="linkedin"></a>
</div>

3. Creating navigation bar:

We are adding three links in the navbar; home, about & portfolio we will style them with CSS later.

We will add a <div> with class “portfolio” in which we will be putting the nav-bar, its contents and main details of a portfolio in a separate section.
In the portfolio div, we will use the nav tag to create our navigation.
Inside a <nav> we will be adding its items such as Home, About, Portfolio, etc.

<div class="portfolio">
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Portfolio</a>
    </nav>
    </div>

We have now added items in the nav-bar.

4. Main Body:

Add <main> tag inside portfolio div.
Now add another div class named ”details ”.
Now mention details of your portfolio followed by using heading <h> tag depending on your size of heading (ranges from 1 to 6) to make a solid bold heading to the site.
Showcase your skills list using the list <li> tag but make it unordered. Here’s how It’s done:

 <main>
   <div class="details">
     <h4>I'm,</h4>
     <h2>John Smith</h2>
     <strong>
------- The founder of Programmopedia
     </strong>
     <ul>
       <li>UI/UX</li>
       <li>Web Developer</li>
       <li>Product Designer</li>
        <li>Entrepreneur</li>
      </ul>
</main>

5. Button:

Inside <main> tag add an <a> tag which serves as a button. Name the button as “Contact me”.
Define a class=”ctc-button” inside the same <a> tag as follows:

	<a href="#" class="ctc-btn">Contact me</a>

6. Image area:

Time to add a big image to the site.
Add a div and give it a class "image-area".
Use the image <img> tag to add any image of your choice inside the image area.

<div class="image-area">
   <img src="business-man.png" alt="">   
</div>

CSS styling to build a portfolio website

Its time to style the contents of our portfolio by using CSS. Go to style.css

1. Setting up our Container:

We’ll adjust our height and width of our container as follows:

.portfolio{
    width: 100%;
    height: 100vh;
}

What is display flex or flexbox

The Flexbox layout model is used to allow the child elements of the container to manage alignment and distribute space. We can use this model to build flexible and responsive web designs without any framework or media queries. It can be created by setting the display property to flex.

2. Now let's style Social media links

In this part, we will style our social media links.
We will style by styling <a> tags inside <div class=”social”>.
We will use common properties of CSS like flex many other alignment properties.

.social a{
    display: flex;
    justify-content: center;
}

We will then set up the alignment of the social media section with the help of height, width, etc as shown below.

.social{
    height: 100vh;
    width: 10%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;    
}

By using absolute position, we mean to have the independent position.
We want to display our social media links as a column. So, we will use the flex-direction property.
Now we will add colors to our social media links

linkedin,.fb,.twitter{
    fill: rgb(37, 125, 226);
    margin-bottom: 50px;
    width:17px;
}

3. Its time to style Navigation-Bar:

We will style by styling <a> tags inside <nav> tag.

nav a{
    text-decoration: none;
    color: black;
}

Now we will apply the rest of the properties on the navigation items.

nav{
    width: 80%;
    margin:auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 10vh;
}

4. Styling Main Section:

We will style our contents inside <main> tag.

main{
  display: flex;
  flex-wrap: wrap;
  width: 80%;
  height: 90vh;
  margin:auto;
  color: white;
	    
}

First, we will style our box container which is a <div> called details.

.details{
    position: relative;
    flex-grow:1;
    padding:10% 10%;
    background: rgb(11, 115, 235);
}

Then, we will set up the font properties by adjusting its size. i.e:

.details h4{
    font-size: 3vw;
}
.details h2{
    font-size: 5vw;
}
.details strong{
    font-size: 1.5vw;
}

We will style our list in which we have mentioned our skillset etc.

ul{
    list-style: none;
    padding: 40px 0;
    line-height: 25px;
}
ul li {
    opacity: 0.7;
}

5. Button.

In this section, we will style our “Contact me” button through class “ctc-btn”
We will style our <a> tag which serves as a button.

.ctc-btn{
    text-decoration: none;
    border: 1.5px solid white;
    color: white;
    padding:10px 20px;
    border-radius: 3px;
    transition: 0.3s ease-in-out;
    font-size: 0.9rem;
}

We will use the hover property to apply a hover effect on our button.

.details>a:hover{
background-color: white;
color: black;

6. Image adjustment:

Now we will style the container in which our image is placed. Our Image is placed in the container “.image-area”.

.image-area{
    flex-grow: 1;
    overflow: hidden;
    background: rgb(0, 10, 20);
}

Next, we will adjust our image properties by its width and transformation.
The transform translateX() function is used to horizontally reposition or move an element on a two-dimensional plane. Since we have given -50 as a parameter, the element will move 50 px in the negative X-axis.

.image-area img{
    width: 100%;
    transform: translateX(-50px);
}

Finally, we have built our portfolio website. I hope you find it informative and useful. I tried my best to explain the confusing topics related to creating a portfolio website from scratch. Obviously, it is not possible to cover all HTML tags and CSS properties in a single article. If you still have any confusion related to CSS properties, you can visit W3shools. You can also post questions in the comments section below.

Download complete code: Github.

10 Comments

Syed Hamza Habib12 May 2021 at 22:34
Learned alot, thanks for the article
Moby Sial12 May 2021 at 22:39
The article was really helpful. Thank You!
Ahmad Hayat12 May 2021 at 22:41
Great work thou! Impressed by your level of understanding
Best of luck
Unknown12 May 2021 at 23:19
Amazing bro
Owais Tariq12 May 2021 at 23:24
Mashallah
Entertainment With Dani12 May 2021 at 23:24
Astonished to see such a wonderful blog! Came across many new informations which adds into our existing knowledge. Indeed! A very deep insight of the language.
Naoman Imtiaz12 May 2021 at 23:26
Really helpful....nice work
Entertainment With Dani12 May 2021 at 23:36
Astonished to see such a wonderful blog! Came across many new informations which adds into our existing knowledge. Indeed! A very deep insight of the language.
Itachi uchiha12 May 2021 at 23:38
Yeh to very nice work hn
Aman Abbasi16 May 2021 at 12:19
Good job