Beginner Portfolio Website Tutorial

By Admin_CodeByHer

Beginner Portfolio Website Tutorial

Introduction
A portfolio website is an essential tool for any web developer, designer, or creative professional. It showcases your skills, projects, and experience in a professional online format. This beginner-friendly tutorial will guide you through building your first HTML and CSS portfolio website step by step.

1. Plan Your Portfolio Website

Before coding, plan your website’s structure:

Homepage: Introduction and personal tagline
About Me: Background, skills, and experience
Portfolio: Projects with descriptions and images
Contact: Contact form, email, or social links

Tip: Start with a single-page design for simplicity.

2. Set Up Your Project Folder

Create a folder structure like this:

portfolio/
├── index.html
├── style.css
├── images/
│   └── project1.png
└── scripts/
    └── main.js

index.html → Main page
style.css → All styling
images/ → Store project images
scripts/ → JavaScript for interactivity

3. Build the HTML Structure

Basic structure for index.html:

<!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>
    <header>
        <h1>John Doe</h1>
        <nav>
            <a href="#about">About</a>
            <a href="#portfolio">Portfolio</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>    <section id="about">
        <h2>About Me</h2>
        <p>I am a web developer passionate about building beautiful and functional websites.</p>
    </section>    <section id="portfolio">
        <h2>My Projects</h2>
        <div class="project-grid">
            <div class="project-card">
                <img src="images/project1.png" alt="Project 1">
                <h3>Project 1</h3>
                <p>Short description of the project.</p>
            </div>
            <div class="project-card">
                <img src="images/project2.png" alt="Project 2">
                <h3>Project 2</h3>
                <p>Short description of the project.</p>
            </div>
        </div>
    </section>    <section id="contact">
        <h2>Contact Me</h2>
        <form>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" placeholder="Your Name">
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" placeholder="Your Email">
            <button type="submit">Send</button>
        </form>
    </section>    <footer>
        <p>© 2026 John Doe</p>
    </footer>
</body>
</html>

4. Add CSS Styling

Basic style.css example:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
}header {
    background-color: #4caf50;
    color: white;
    text-align: center;
    padding: 20px 0;
}nav a {
    color: white;
    margin: 0 15px;
    text-decoration: none;
}section {
    padding: 40px 20px;
    text-align: center;
}.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}.project-card {
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 10px;
}.project-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}form input, form button {
    display: block;
    width: 80%;
    margin: 10px auto;
    padding: 10px;
    border-radius: 5px;
}form button {
    background-color: #4caf50;
    color: white;
    border: none;
    cursor: pointer;
}form button:hover {
    background-color: #45a049;
}footer {
    background-color: #333;
    color: white;
    padding: 15px 0;
    text-align: center;
}

What You Learn:

Page structure with header, sections, and footer
Grid layout for project cards
Styling forms and buttons

5. Make Your Portfolio Responsive

/* Mobile view */
@media (max-width: 768px) {
    nav {
        display: flex;
        flex-direction: column;
    }
}

Tips:

Use flexible widths and relative units
Ensure images resize with the screen
Test on multiple devices

6. Optional JavaScript Enhancements

Smooth scrolling for navigation:

document.querySelectorAll('nav a').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Form validation or pop-ups can be added later

7. Add Portfolio Projects

Include images, titles, and descriptions
Link to live projects or GitHub repositories
Use hover effects for visual engagement

.project-card:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

8. Launch Your Portfolio

Test thoroughly on different browsers and devices
Use GitHub Pages, Netlify, or Vercel to host for free
Buy a custom domain for a professional touch

9. Tips for Beginners

Start simple and gradually add sections
Keep CSS organized with classes and external files
Focus on responsive design from the beginning
Use consistent colors and fonts for branding
Continuously update portfolio with new projects

Conclusion

Creating a portfolio website is a must-do project for beginners. It not only helps you practice HTML, CSS, and basic JavaScript but also creates a platform to showcase your skills professionally. By following this tutorial, you’ll have a functional, responsive, and visually appealing portfolio that can be shared with potential employers or clients.

No Comments
March 17, 2026