Create an impressive portfolio website with this step-by-step tutorial using CSS, JavaScript, and jQuery. Perfect for front-end developers and designers!
Table of Contents
Before we dive into the technical details, let's first define what a portfolio website is and why it's important. A portfolio website is a collection of your work that showcases your skills and expertise to potential clients or employers. It serves as a platform to highlight your achievements and provide evidence of your abilities. Creating a well-designed and functional portfolio website can help you stand out in a competitive job market.
The first step in creating a portfolio website is planning. Before you start coding, you need to define the purpose of your website, identify your target audience, and create a sitemap. This will help you organize your content and structure your website in a way that is easy for visitors to navigate. Additionally, choosing a color scheme and typography that aligns with your branding will help create a cohesive and professional look.
When you are looking for a job or trying to find work, it is important to have a portfolio website that showcases your work. While standard WordPress themes might be enough for some, creating a free HTML portfolio template is ideal for those who want something more professional. In this article, you will learn how to create an HTML portfolio template with CSS, JavaScript & jQuery.
Let's start making an amazing portfolio template using HTML, CSS, and JavaScript step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, JavaScript, and jQuery. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we'll include the header and footer sections, as well as the main body content for our portfolio template.
The <!DOCTYPE html> line at the beginning of the code indicates that this document is an HTML5 document.
The <html> element is the root element of the document, and its lang attribute is set to "en" to specify the language of the document.
The next section is the HTML document's head, which includes metadata and links to external stylesheets. It sets the page title to "Portfolio Template" and declares the character encoding as UTF-8. It also sets the viewport width and imports three stylesheets using the link tag.
The first stylesheet is Twitter Bootstrap 4.0, a popular CSS framework that provides pre-defined styles for common web components. The second is Font Awesome 4.7, a library of icons that can be used on the page. The third is Google Fonts, which is used to import the Montserrat font family. The styles.css file is also linked in the <head> element, which contains the custom styles for the website.
The <body> element contains the visible content of the document, including the menu bar, header, "about me" section, skills section, and portfolio section. The content is organized using a combination of <div> and semantic HTML elements such as <nav>, <header>, and <section>.
The menu bar and header include links that use the scroll class to smoothly scroll to the corresponding section of the page when clicked. The header also includes an arrow that can be clicked to scroll to the "about me" section.
The "about me" section includes a brief introduction and a photo of the user, as well as information about their skills and interests.
The skills section includes progress bars indicating the user's proficiency in HTML/CSS, JavaScript, and Photoshop.
The portfolio section is a placeholder for showcasing the user's work.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our portfolio template using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Next, we will create our CSS file. In this file, we'll add some style to our container and div. We'll use CSS to style our container and div, and we'll also add some padding and margin to make them look nice.
This will give our portfolio template an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
font-family: "Montserrat"; }
.bold {
font-weight: 700; }
hr {
width: 5.625rem;
height: 0.1875rem;
background-color: #00ff6c; }
.btn {
padding: .5rem 1.5rem;
border: 1px solid #00ff6c;
border-radius: 0;
color: #00ff6c;
text-transform: uppercase;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
.btn:hover {
background-color: #00ff6c;
color: #232323; }
h2 {
text-transform: uppercase;
font-weight: 700; }
.menu-responsive {
background-color: #00ff6c;
padding: 2rem 0; }
.menu-responsive ul {
margin: 0;
padding: 0;
list-style: none; }
.menu-responsive ul li {
width: 100%;
padding: 1.5rem 0;
text-align: center; }
.menu-responsive ul li a {
font-size: 1.125rem;
color: #232323;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
.menu-responsive ul li a:hover, .menu-responsive ul li a:active {
color: #fff;
text-decoration: none; }
.header__top--responsive ul {
float: right; }
.header__top--responsive ul li .menu-bars {
font-size: 2.4rem;
color: #fff;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s; }
.header__top--responsive ul li .menu-bars:hover, .header__top--responsive ul li .menu-bars:active {
color: #00ff6c; }
header {
height: 100vh;
background-image: url("http://res.cloudinary.com/cyrilg/image/upload/v1500226721/header-bg_pyddzq.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: top; }
.header__top {
padding-top: 2.5rem;
margin-bottom: 6rem;
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start; }
.header__top-brand {
color: #00ff6c; }
.header__top-brand .bold {
text-transform: uppercase; }
.header__top-brand h1 {
font-size: 1.9rem;
font-weight: 300;
margin-bottom: 0.4rem; }
.header__top-brand hr {
margin: 0; }
.header__top-nav ul {
float: right;
margin: 0;
padding: 0;
list-style: none; }
.header__top-nav ul li {
display: inline-block;
margin-right: 2rem; }
.header__top-nav ul li:last-child {
margin-right: 0; }
.header__top-nav ul li a {
font-size: 1.25rem;
color: #fff;
line-height: 2.5rem;
font-weight: 300;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
.header__top-nav ul li a:hover, .header__top-nav ul li a:active {
color: #cccccc;
text-decoration: none; }
.header__content {
width: 80%;
margin: 0 auto;
color: #fff;
font-size: 1.8rem;
text-align: center; }
.header__content p {
line-height: 2.25rem; }
.header__content p:first-child {
line-height: 3.3rem; }
.header__content .btn {
margin-top: 3rem; }
.header__arrow {
margin-top: 4.85rem;
text-align: center; }
.header__arrow a {
color: #fff;
font-size: 1.5rem; }
.header__arrow a i {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite; }
@-webkit-keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0); }
40%, 43% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
75% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px); } }
@keyframes bounce {
0%, 20%, 60%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0); }
40%, 43% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px); }
75% {
-webkit-transform: translateY(-20px);
transform: translateY(-20px); } }
@media (min-width: 47.9em) {
.header__top--responsive {
margin-top: -.75rem; }
.header__top {
padding-top: 3.5rem;
margin-bottom: 10rem; }
.header__content {
font-size: 2rem; }
.header__content .btn {
padding: .6rem 1.7rem; }
.header__arrow {
margin-top: 12.85rem; } }
@media (min-width: 61.9em) {
.header__top {
margin-bottom: 16rem; }
.header__content {
font-size: 2.5rem; }
.header__content p {
line-height: 2.45rem; }
.header__arrow {
margin-top: 16rem; } }
@media (min-width: 74.9em) {
.header__top {
margin-bottom: 9.5rem; }
.header__content {
font-size: 3rem; }
.header__content p {
line-height: 2.95rem; }
.header__content .btn {
margin-top: 4rem;
font-size: 1.2rem; }
.header__arrow {
margin-top: 12rem; } }
#about {
padding: 5rem 0;
text-align: center; }
#about img {
border: 2px solid #232323;
border-radius: 100%;
padding: .2rem;
margin-top: 3rem;
margin-bottom: 2rem; }
#about .lead {
font-size: 1.5rem;
color: #00ff6c;
font-weight: 700;
margin-bottom: 1.5rem; }
#about p {
font-size: 1.25rem;
color: #232323; }
#about p a {
color: #232323;
text-decoration: underline;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
#about p a:hover {
color: #00ff6c; }
#about p + p {
margin-bottom: 2rem; }
@media (min-width: 47.9em) {
#about {
width: 85%;
margin: 0 auto; }
#about h2 {
font-size: 2.2rem; }
#about .lead {
font-size: 1.7rem;
margin-bottom: 1.5rem; }
#about p {
font-size: 1.45rem; } }
@media (min-width: 61.9em) {
#about {
width: 80%; }
#about h2 {
font-size: 2.4rem; }
#about .lead {
font-size: 1.9rem;
margin-bottom: 1.5rem; }
#about p {
font-size: 1.65rem; } }
@media (min-width: 74.9em) {
#about {
width: 60%; }
#about h2 {
font-size: 2.6rem; }
#about .lead {
font-size: 2.1rem;
margin-bottom: 1.5rem; }
#about p {
font-size: 1.85rem; }
#about p + p {
margin-bottom: 2.2rem; } }
#skills {
background-color: #232323;
padding: 5rem 0; }
#skills h2 {
color: #00ff6c;
text-align: center; }
#skills hr {
margin-bottom: 3rem; }
#skills .skill {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
#skills .skill .skills__percent {
margin-right: 1.75rem;
font-size: 4.5rem;
font-weight: 700;
color: #ccc; }
#skills .skill .progress-container {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
font-size: 1.125rem;
color: #f3f3f3; }
#skills .skill .progress-container .progress {
border-radius: 0;
margin-top: .35rem;
background-color: #373737; }
#skills .skill .progress-container .progress .progress-bar {
height: 1.125rem;
background-color: #00ff6c; }
#portfolio {
padding: 5rem 0;
text-align: center; }
#portfolio hr {
margin-bottom: 3rem; }
#portfolio figure {
position: relative; }
#portfolio figure img {
width: 100%; }
#portfolio figure figcaption {
position: absolute;
top: .75rem;
right: .75rem;
bottom: .75rem;
left: .75rem;
background-color: #00ff6c;
padding-top: 4rem;
opacity: 0;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
color: #232323; }
#portfolio figure figcaption:hover {
background-color: rgba(0, 255, 108, 0.6);
opacity: 1; }
#portfolio figure figcaption h3 {
text-transform: uppercase; }
#portfolio figure figcaption p {
margin-bottom: 3rem; }
#portfolio figure figcaption a {
font-size: 2rem;
color: #f3f3f3;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s; }
#portfolio figure figcaption a:hover {
color: #232323; }
#contact {
padding: 5rem 0;
background-color: #00ff6c;
text-align: center; }
#contact .lead {
margin-bottom: -.25rem;
font-size: 1.85rem;
font-weight: 700; }
#contact p {
font-size: 1.65rem;
font-weight: 300; }
#contact .text-animate {
font-weight: 700; }
#contact .btn {
margin-top: 2.5rem;
border: 2px solid #232323;
color: #232323; }
#contact .btn:hover {
background-color: #232323;
color: #00ff6c; }
#contact .contact__social {
margin-top: 3rem;
font-size: 2rem; }
#contact .contact__social a {
color: #232323;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s; }
#contact .contact__social a:hover {
color: #fff; }
#footer {
padding: .5rem 0;
background-color: #232323;
text-align: center;
color: #fff; }
#footer p {
font-size: .85rem; }
#footer p a {
color: #fff;
text-decoration: underline;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s; }
#footer p a:hover {
color: #00ff6c; }
#footer p .fa-heart {
color: red; }
@media (min-width: 47.9em) {
#contact .lead {
font-size: 2.05rem; }
#contact p {
font-size: 1.85rem; } }
@media (min-width: 61.9em) {
#contact .lead {
font-size: 2.25rem; }
#contact p {
font-size: 2.05rem; } }
@media (min-width: 74.9em) {
#contact .lead {
font-size: 2.45rem; }
#contact p {
font-size: 2.25rem; } } Step 3 (JavaScript Code):
Next, we'll add some basic JavaScript to our page. This will help us to interact with the DOM (Document Object Model) and control the appearance of our page.
Finally, we'll add some jQuery to our page. This will help us to animate elements on our page and make them responsive. By the end of this tutorial, you should have a basic HTML portfolio template that you can use in your own projects!
Design by: CYRIL
$(function() {
// Menu Responsive
$(".menu-responsive").toggle();
$(".menu-bars").on("click", function() {
$(".menu-responsive").toggle("slow");
});
// Scroll click on menu
$(".scroll").on("click", function() {
$(this).each(function() {
const sectionTop = $(this.hash).offset().top;
$("html, body").animate({
scrollTop: sectionTop
}, 1500);
});
});
// Progress Bar Animate
window.sr = ScrollReveal();
sr.reveal(".progress-bar", {
origin: "left",
duration: 2000,
distance: "100%"
});
// Contact Text Animate
const sentences = ["web designer ?", "web developer ?"];
let i = 0;
setInterval(function() {
$(".text-animate").fadeOut(function() {
$(this).text(sentences[i = (i + 1) % sentences.length]).fadeIn();
});
}, 2500);
});Final Output:
Conclusion:
In conclusion, creating a portfolio website is a great way to showcase your work and impress potential clients or employers. By using CSS, JavaScript, and jQuery, you can create a custom portfolio template that is visually appealing and interactive. To get started, plan out your website by determining your content and creating a layout. Then, design your template and add CSS styling to make it visually appealing. Finally, add interactivity using JavaScript and jQuery to create a seamless user experience. With these steps, you can create a professional portfolio website that will help you stand out in your industry. We hope this tutorial has been helpful and inspires you to create your own portfolio website. Good luck!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
