How To Make a FREE Personal Portfolio Website ~Step By Step~ 2026

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

Quick Summary

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

In this tutorial, You'll learn How to Unlock Your Dream Job with This Portfolio Website using WordPress & Elementor Free Version. This Elementor Masterclass is for Complete Beginners.

(Exclusive: Click above link & use "JFD10" coupon code to get upto 78% DISCOUNT!)

If you want to stand out from the crowd, you should have a really modern and unique-looking portfolio website. In this tutorial, I will show you how to create this amazing Bento-Grid portfolio website using all free resources.

And, having a portfolio site like this is not optional nowadays for a real professional. Let me share my personal experience with you – so far, I have done nearly 1200+ freelance projects. And, over 90% of clients came through my portfolio site. Even we have done 100+ jobs on a freelancing marketplace, and 80% of clients asked me this question first – “Do you have a portfolio website?”

So many of you guys always ask me how I land so many freelance jobs while others are struggling to get their first job. Then, my number one suggestion would be: make your portfolio website before anything else. Now, in this tutorial, I will show you how to create a portfolio website that will help you attract more clients. To create this website, we will be using a free CMS, a free theme, a free page builder, and all free resources.

Tools and Links Used

Hostinger Fast, beginner friendly WordPress hosting.

Get Hosting

Elementor The free page builder this tutorial is built with.

Get Elementor

Elementor Pro The Pro upgrade used throughout this tutorial.

Get Elementor Pro

Project Files Download the resources used in this tutorial.

Download Files

Kitpapa Ready made Elementor template kits.

Get Templates

Kitninja eCommerce Elementor template kits.

Get Templates

Prompt Used in This Tutorial

Default Entire Page Style CSS

<style>
p {
    margin: 0;
}
a{
    text-decoration: none!important;
}

.icon .elementor-icon-wrapper {
    display:flex;
}

span.elementor-icon-list-icon svg {
    margin: 0 !important;
}

li.elementor-icon-list-item .elementor-icon-list-text {
    padding: 0 !IMPORTANT;
}
.elementor-icon{
line-height: 0;
}
.elementor-widget-image a {
    display: inline;
}


</style>

Button Style CSS

.btn .elementor-button-icon{
    background: white;
    padding: 8px;
    border-radius: 100%;
}

.btn .elementor-button-icon svg path{
    stroke: var(--e-global-color-primary);
}

.btn .elementor-button-content-wrapper{
    align-items: center;
}

.btn .elementor-button-icon{
    transition: all 0.9s ease;
}

.btn:hover .elementor-button-icon{
   transform: rotate(360deg);
}

Button Style CSS Class

btn

Icon Box Style CSS

.icon-box-1{
  background: radial-gradient(30.00% 30.00% at 50% 50%,rgba(255, 160, 26, 0.25),rgba(255, 255, 255, 0) 100%), #FFFFFF;
}

.icon-box-1 .elementor-icon{
    border: 1px solid rgba(255, 169, 119, 1);
    background: linear-gradient(180.00deg, rgba(255, 213.01666259765625, 26, 1),rgba(255, 159.5833282470703, 26, 1) 100%);
    box-shadow: inset 0px 4px 4.199999809265137px 0px rgba(255, 255, 255, 0.25);
}
.icon-box-2{
    background: radial-gradient(30.00% 30.00% at 50% 50%,rgba(255, 81, 0, 0.25),rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 1);
}

.icon-box-2 .elementor-icon{
   border: 1px solid rgba(240, 76, 0, 1);
    box-shadow: inset 0px 4px 4.199999809265137px 0px rgba(255, 255, 255, 0.25);
    background: linear-gradient(180.00deg, rgba(255, 138.6656036376953, 84.50993347167969, 1),rgba(255, 81, 0, 1) 100%);
}

.icon-box-3{
    background: radial-gradient(30.00% 30.00% at 50% 50%,rgba(0, 196, 43, 0.25),rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 1);
}

.icon-box-3 .elementor-icon{
   border: 1px solid rgba(0, 196, 43, 1);
    box-shadow: inset 0px 4px 4.199999809265137px 0px rgba(255, 255, 255, 0.25);
    background: linear-gradient(180.00deg, rgba(0, 170.4086456298828, 36.92186737060547, 1),rgba(0, 228.40716552734375, 49.48820877075195, 1) 100%);
}

.icon-box-4{
  background: radial-gradient(30.00% 30.00% at 50% 50%,rgba(205, 25, 103, 0.25),rgba(255, 255, 255, 0) 100%), #FFFFFF;
}

.icon-box-4 .elementor-icon{
    border: 1px solid rgba(205, 25, 103, 1);
    border-radius: 46px;
    box-shadow: inset 0px 4px 4.199999809265137px 0px rgba(255, 255, 255, 0.25);
    background: linear-gradient(180.00deg, rgba(255, 65.59851837158203, 147.67250061035156, 1),rgba(236.3232421875, 0, 102.16595458984375, 1) 100%);
}

.icon-box-5{
  background: radial-gradient(30.00% 30.00% at 50% 50%,rgba(26, 95, 255, 0.25),rgba(255, 255, 255, 0) 100%), #FFFFFF;
}

.icon-box-5 .elementor-icon{
   border: 1px solid rgba(0, 69, 230, 1);
    border-radius: 46px;
    box-shadow: inset 0px 4px 4.199999809265137px 0px rgba(255, 255, 255, 0.25);
    background: linear-gradient(180.00deg, rgba(65.39738464355469, 122.52655792236328, 255, 1),rgba(26, 95, 255, 1) 100%);
}


.icon-box-6{
  background: radial-gradient(30.00% 30.00% at 50% 50%,rgba(255, 160, 26, 0.25),rgba(255, 255, 255, 0) 100%), #FFFFFF;
}

.icon-box-6 .elementor-icon{
   border: 1px solid rgba(255, 169, 119, 1);
    border-radius: 46px;
    box-shadow: inset 0px 4px 4.199999809265137px 0px rgba(255, 255, 255, 0.25);
    background: linear-gradient(180.00deg, rgba(255, 213.01666259765625, 26, 1),rgba(255, 159.5833282470703, 26, 1) 100%);
}

Icon Box Style CSS Classes

icon-box-1
icon-box-2
icon-box-3
icon-box-4
icon-box-5
icon-box-6

Service Box Shadow Style CSS

.service-box{
    box-shadow: 40px 40px 44px rgba(20, 20, 20, 0.1), inset 16px 12px 16px rgba(255, 255, 255, 0.25);
}

Service Box Shadow Style CSS Class

service-box

Icon List Style CSS

.red-icon .elementor-icon{
    background: linear-gradient(180deg, #FF8B55 0%, #FF5100 100%);
    border: 1px solid #F04C00;
    box-shadow: inset 0px 4px 4.2px rgba(255, 255, 255, 0.25);
}

.green-icon .elementor-icon{
    background: linear-gradient(180deg, #00AA25 0%, #00E431 100%);
    border: 1px solid #00C42B;
    box-shadow: inset 0px 4px 4.2px rgba(255, 255, 255, 0.25);
}
.blue-icon .elementor-icon{
   background: linear-gradient(180deg, #417BFF 0%, #1A5FFF 100%);
    border: 1px solid #0045E6;
    box-shadow: inset 0px 4px 4.2px rgba(255, 255, 255, 0.25);
}

Icon List Style CSS Classes

red-icon
green-icon
blue-icon

Skill Section Style CSS

.skill-content .wpr-flip-box-front{
    box-shadow: 40px 40px 44px 0px rgba(20, 20, 20, 0.1);
}

.skill-content .wpr-flip-box-title{
    width: 56px;
    min-height: 56px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-radius: 46px;
    box-shadow: inset 0px 4px 4.199999809265137px 0px rgba(255, 255, 255, 0.25);
   
}

.skill-content.skill-01 .wpr-flip-box-title{
    border: 1px solid rgba(240, 76, 0, 1);
    background: linear-gradient(180.00deg, rgba(255, 138.6656036376953, 84.50993347167969, 1),rgba(255, 81, 0, 1) 100%);
}

.skill-content.skill-02 .wpr-flip-box-title{
    border: 1px solid rgba(0, 69, 230, 1);
    background: linear-gradient(180.00deg, rgba(65.39738464355469, 122.52655792236328, 255, 1),rgba(26, 95, 255, 1) 100%);
}

.skill-content.skill-03 .wpr-flip-box-title{
    border: 1px solid rgba(205, 25, 103, 1);
    background: linear-gradient(180.00deg, rgba(255, 0, 110.24018859863281, 1),rgba(255, 65.59851837158203, 147.67250061035156, 1) 100%);
}

.skill-content.skill-03 .wpr-flip-box-title{
    border: 1px solid rgba(205, 25, 103, 1);
    background: linear-gradient(180.00deg, rgba(255, 0, 110.24018859863281, 1),rgba(255, 65.59851837158203, 147.67250061035156, 1) 100%);
}
.skill-content.skill-04 .wpr-flip-box-title{
   border: 1px solid rgba(255, 169, 119, 1);
    background: linear-gradient(180.00deg, rgba(255, 213.01666259765625, 26, 1),rgba(255, 159.5833282470703, 26, 1) 100%);
}
.skill-content.skill-05 .wpr-flip-box-title{
   border: 1px solid rgba(0, 196, 43, 1);
    background: linear-gradient(180.00deg, rgba(0, 170.4086456298828, 36.92186737060547, 1),rgba(0, 228.40716552734375, 49.48820877075195, 1) 100%);
}
.skill-content.skill-06 .wpr-flip-box-title{
   border: 1px solid rgba(255, 169, 119, 1);
    background: linear-gradient(180.00deg, rgba(255, 213.01666259765625, 26, 1),rgba(255, 159.5833282470703, 26, 1) 100%);
}

Skill Section Style CSS Classes

skill-content
skill-01
skill-02
skill-03
skill-04
skill-05
skill-06

Contact Page Style CSS

.contact-icon-01 .elementor-icon{
    border: 1px solid rgba(240, 76, 0, 1);
box-shadow: inset 0px 4px 4.199999809265137px 0px rgba(255, 255, 255, 0.25);
background: linear-gradient(180.00deg, rgba(255, 138.6656036376953, 84.50993347167969, 1),rgba(255, 81, 0, 1) 100%);
}    
    
.contact-icon-02 .elementor-icon{
    border: 1px solid rgba(0, 69, 230, 1);
box-shadow: inset 0px 4px 4.199999809265137px 0px rgba(255, 255, 255, 0.25);
background: linear-gradient(180.00deg, rgba(65.39738464355469, 122.52655792236328, 255, 1),rgba(26, 95, 255, 1) 100%);
}    
    
.contact-icon-03 .elementor-icon{
  border: 1px solid rgba(0, 196, 43, 1);
box-shadow: inset 0px 4px 4.199999809265137px 0px rgba(255, 255, 255, 0.25);
background: linear-gradient(180.00deg, rgba(0, 170.4086456298828, 36.92186737060547, 1),rgba(0, 228.40716552734375, 49.48820877075195, 1) 100%);
}

Contact Page Style CSS Classes

contact-icon-01
contact-icon-02
contact-icon-03

Contact Form Style CSS

<style>
.submit-btn .metform-btn svg{
    background: white;
    width: 32px !important;
    height: 32px !important;
    padding: 8px !important;
    border-radius: 100%;
    transition: all 0.3s ease;
}

.submit-btn:hover .metform-btn svg{
   transform: rotate(45deg)!important;
}

.submit-btn svg path{
    stroke: var(--e-global-color-primary);
}

.submit-btn .metform-btn{
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
</style>

Contact Form Style CSS Class

submit-btn

Blog And Single Blog Post Style CSS

.entry-hero-layout-contained{
    padding: 0!important;
}

.post-archive-title{
    padding: 0;;
    padding-top: 62px;
}

.blog .post-thumbnail-inner img{
    height: 250px;
    object-fit: cover;
}

.blog .kadence-posts-list{
    gap: 20px!important;
}
.wp-site-blocks .post-thumbnail.kadence-thumbnail-ratio-3-2{
	 padding-bottom: 66.5%!important;
}


@media (max-width: 1024px){
    .post-archive-title .page-title {
    font-size: 180px!important;
}

}

@media (max-width: 767px){
.entry-hero-layout-contained,.site-container{
    max-width: 480px!important; 
    }
    
    .post-archive-title{
    padding: 0;;
    padding-top: 20px;
}
    .post-archive-title .page-title {
    font-size: 80px!important;
    }
}


.single-post .article-post-thumbnail .post-thumbnail-inner img{
    height: 500px;
    object-fit: cover;
    border-radius: 16px;
    margin: auto!important;
}

@media (max-width: 767px){
    .single-post .article-post-thumbnail .post-thumbnail-inner img{
        height: 360px;
    }
    
}


.single-post .content-area .alignwide
 {
    width: 100%!important;
     margin: auto!important;
     margin-bottom: -4.3em!important;
 }
 
 .single-post .single-entry{
     max-width: calc(100% - 40px);
     margin: auto!important;
 }

html, body{
    overflow-x: hidden;
}

.single-post img{
    border-radius: 16px;
}


.single-post .entry.loop-entry {
    
    box-shadow: 0px 0px 0px 0px rgba(20, 20, 20, 0.1)!important;
    
}


.comment-form textarea:placeholder-shown:focus+label,  .comment-form input:placeholder-shown:focus+label{
    opacity: 0;
    
}
.comment-form textarea, .comment-form input{
    border-radius: 8px!important;
}

.single-post .form-submit input[type="submit"]{
   padding-right: 28px!important;
	border-radius: 100px!important;
}

Get Your FREE Freelancing Roadmap

Stop hopping between tutorials. Grab the Freelancing Mastery Handbook to learn how to choose a skill, build your foundation, find clients, and confidently start your freelancing journey.

Free eBook Download

How To Make a FREE Personal Portfolio Website ~Step By Step~ 2026

Quick Summary

Tools and Links Used

Prompt Used in This Tutorial

Get Your FREE Freelancing Roadmap

Related Tutorials

Vibe Code a REAL Animated WordPress Website with Claude + Elementor

Vibe Coding Full Course for Beginners – Build & Launch a Real SaaS

Edit Videos with ChatGPT Codex — Raw Clips to Finished Reel