Impressive Portfolio Introduction :
One of the most important things in today’s world is having your own portfolio website. Whether you’re a student, developer, or designer, a portfolio showcases your work, skills, and areas of interest. It also builds credibility and helps you land jobs or freelance clients.
In this article, you’ll learn how to create a portfolio website a with step-by-step guide using HTML , CSS and JS without using any frameworks.
Tools You’ll Need for your Impressive Portfolio:
A code editor (VS Code recommended)
A browser (Chrome/Firefox)
Basic knowledge of HTML, CSS, JS
Step 1: Set Up Your Project Folder
Create a folder named portfolio. Inside, add:
portfolio/
│
├── index.html
├── style.css
└── script.js
Link CSS and JS in your index.html:
html
Copy
Edit
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
<title>My Portfolio</title>
<link rel=”stylesheet” href=”style.css” />
</head>
<body>
<script src=”script.js”></script>
</body>
</html>
Step 2: Create the Layout (HTML)
Add these sections:
1) Header
2) About Me
3) Projects
4) Contact
Here’s a basic structure:
<body>
<header>
<h1>Your Name</h1>
<nav>
<a href=”#about”>About</a>
<a href=”#projects”>Projects</a>
<a href=”#contact”>Contact</a>
</nav>
</header>
<section id=”about”>
<h2>About Me</h2>
<p>I’m a web developer passionate about building clean and responsive websites.</p>
</section>
<section id=”projects”>
<h2>Projects</h2>
<div class=”project”>
<h3>Project 1</h3>
<p>Description of your project.</p>
</div>
<!– More projects –>
</section>
<section id=”contact”>
<h2>Contact</h2>
<form>
<input type=”text” placeholder=”Your Name” required />
<input type=”email” placeholder=”Email” required />
<textarea placeholder=”Your Message”></textarea>
<button type=”submit”>Send</button>
</form>
</section>
</body>
Step 3: Style It (CSS)
Create a clean and modern look:
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background: #f9f9f9;
color: #333;
}
header {
background: #333;
color: white;
padding: 1rem;
text-align: center;
}
nav a {
color: white;
margin: 0 10px;
text-decoration: none;
}
section {
padding: 2rem;
}
form {
display: flex;
flex-direction: column;
gap: 10px;
}
Step 4: Add Interactivity (JavaScript)
Add a simple form validation or scroll to top button in script.js:
// Scroll to top button
const scrollBtn = document.createElement(‘button’);
scrollBtn.textContent = ‘⬆’;
scrollBtn.style.position = ‘fixed’;
scrollBtn.style.bottom = ’20px’;
scrollBtn.style.right = ’20px’;
scrollBtn.style.display = ‘none’;
document.body.appendChild(scrollBtn);
window.onscroll = function () {
scrollBtn.style.display = window.scrollY > 200 ? ‘block’ : ‘none’;
};
scrollBtn.onclick = () => window.scrollTo({ top: 0, behavior: ‘smooth’ });
Step 5: Make It Responsive
Use media queries in your style.css to improve mobile view:
@media (max-width: 768px) {
nav {
display: flex;
flex-direction: column;
}
form {
width: 100%;
}
}
Step 6: Deploy Your Portfolio (Free)
You can host it for free using:
GitHub Pages
Netlify
Vercel
Example: Deploy on GitHub Pages
1) Push your code to a GitHub repo
2) Go to repo → Settings → Pages
3) Choose branch: main, folder: /root
4) Your site is live at https://your-username.github.io/portfolio
Final Thoughts
A portfolio doesn’t need to be fancy. Start simple, then iterate:
Add animations
Use localStorage for theme toggle
Add more projects dynamically
Bonus Ideas
1) Add dark mode toggle
This small feature makes your portfolio modern and user-friendly:
Simple, effective, and visually pleasing.
2) Add testimonials:
Insert this below the Projects section and before the Contact section:
<section id=”testimonials”>
<h2>Testimonials</h2>
<div class=”testimonial”>
<p>”Working with [Your Name] was a great experience. Very professional and delivered everything on time!”</p>
<h4>- Jane Doe, Project Manager</h4>
</div>
<div class=”testimonial”>
<p>”Their attention to detail and clean code made our project a success. Highly recommend!”</p>
<h4>- John Smith, Client</h4>
</div>
</section>
3) Connect a contact form with Formspree or EmailJS :
A) Connect Contact Form with Formspree:
Step 1: Update Your Contact Form
//html
<form action=”https://formspree.io/f/yourFormID” method=”POST”>
<input type=”text” name=”name” placeholder=”Your Name” required />
<input type=”email” name=”email” placeholder=”Your Email” required />
<textarea name=”message” placeholder=”Your Message” required></textarea>
<button type=”submit”>Send</button>
</form>
Step 2: Get Your Form ID
Go to https://formspree.io
Sign up/log in
Create a form → You’ll get a unique endpoint like https://formspree.io/f/xrgovxyz
Replace the action URL in the form above
B) Connect Contact Form with EmailJS:
Step 1: Install EmailJS SDK
Add this in your index.html before the closing </body> tag:
// html
<script src =”https://cdn.emailjs.com/dist/email.min.js”></script> <script> (function () { emailjs.init(“YOUR_USER_ID”);}) (); </script/>
Step 2: Update Your Form HTML
<form id=”contactForm”>
<input type=”text” name=”from_name” placeholder=”Your Name” required />
<input type=”email” name=”reply_to” placeholder=”Your Email” required />
<textarea name=”message” placeholder=”Your Message” required></textarea>
<button type=”submit”>Send</button>
</form>
Step 3: Add Form Submission Script (JS)
In your script.js
document.getElementById(“contactForm”).addEventListener(“submit”, function (e) {
e.preventDefault();
emailjs.sendForm(“YOUR_SERVICE_ID”, “YOUR_TEMPLATE_ID”, this)
.then(() => {
alert(“Message sent successfully!”);
}, (error) => {
console.error(“FAILED…”, error);
alert(“Failed to send message. Please try again.”);
});
this.reset();
});
Step 4: Set Up in EmailJS
1) Go to https://emailjs.com
2) Sign up → Add Email Service (like Gmail)
3) Create Email Template
4) Copy Service ID, Template ID , and User ID and paste them in the code
You may also like : TypeScript: 10 Essential Things I Wish Knew Before Starting
