Creating a personal portfolio website is a great way to showcase your skills, projects, and experience to potential employers or clients. In this tutorial, I will guide you through building a personal portfolio website from scratch using HTML, CSS, and JavaScript.
Step 1: Set Up Your Project
Before we start coding, let’s set up our project folder. Create a new folder on your computer where you will store all your files for this project. Inside this folder, create three new files: index.html, style.css, and script.js.
Step 2: Design Your Portfolio Layout
In the index.html file, we will start by creating the basic structure of our portfolio website. Here is a simple template to get you started:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
</header>
<main>
<section id="about">
<h2>About Me</h2>
<p>This is where you can introduce yourself to visitors of your portfolio website.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<div class="project">
<h3>Project Title</h3>
<p>Description of the project goes here.</p>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>Step 3: Style Your Portfolio
Now let’s move on to styling our portfolio website. In the style.css file, you can add custom styles to make your portfolio look unique and visually appealing. Here is an example of some basic styling you can start with:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 1rem 0;
}
main {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
h2 {
margin-bottom: 1rem;
}
.project {
margin-bottom: 1.5rem;
}
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1rem 0;
}
@media (max-width: 768px) {
main {
padding: 1rem;
}
}Step 4: Add Interactive Features with JavaScript
Finally, let’s add some interactive features to our portfolio website using JavaScript. In the script.js file, you can add functionality such as smooth scrolling, filtering projects, or creating a lightbox for images.
Here is an example of adding smooth scrolling to anchor links in our website:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});Step 5: Deploy Your Portfolio
Once you have completed your portfolio website, you can deploy it to a web hosting service or share it through a code hosting platform like GitHub. Make sure to update the necessary files and configurations to ensure your portfolio is live and accessible to others.
Congratulations! You have successfully created a personal portfolio website using HTML, CSS, and JavaScript from scratch. Feel free to customize and expand your portfolio with more projects, sections, or features to showcase your skills and experience. Good luck with your portfolio!🚀
As pointed out by many in the comments, the website is not responsive. Who wants a part 2 of the video with added features and responsiveness?
If you are looking for the best Offer for buying hosting, check out this offer from Hostinger : https://hostinger.in/codewithharry
Use Coupon Code : CODEWITHHARRY (extra flat 10% OFF)
I am facing issues in the popping carrying part ?? If possible, please help me
Start making videos on app development
40:19
Best YouTuber and a programmer teacher
Truly deserve a award❤r🎉
Love from pakistan
Harry bhaiya JavaScript kha gyi ha us ka to use hi ni hua
You are absolutely brilliant bro,,Thank you so much ❤
Hello I want a code I try my level best but I haven't written the complete task😢
I learn a lot from you thank you so much😊
Source code?
What about contact, project, etc?
kiya hostinger mai python file ko bhi live kiya ja sakta hai
(note :- i have created some python projects by using pyhon and tkinter library and many more library such as cv2 ,mysql etc
to mera questions hai ki kiya mai these projects ko live kar sakta hu kiya
and bad mai agar mai django and flask and mern use karke projects banata hu to kiya ye sare projects ko live kar sakta hu kiya
u deleted the ul code but stil is working how ?
thanku so mmmmmmcccccchhh yaraaaaaaaaa you are a great man
15:30
Kids watch jerry legennds watch carry ultr legends watch harrry 🤩
God Bless uhh 🌸❤Bro
Js use nhi isme aapne
where is JS ?
–32:53