DEV Community

Cover image for How to Build a Portfolio Website with HTML, CSS, and JavaScript
MediaGeneous
MediaGeneous

Posted on

How to Build a Portfolio Website with HTML, CSS, and JavaScript

#webdev #programming #javascript #beginners

How to Build a Portfolio Website with HTML, CSS, and JavaScript

A portfolio website is essential for showcasing your skills, projects, and professional journey. Whether you're a developer, designer, or writer, a well-crafted portfolio can help you stand out. In this guide, we’ll walk through building a responsive portfolio website using HTML, CSS, and JavaScript—no frameworks required.

By the end, you’ll have a fully functional website that highlights your work. And if you're looking to grow your YouTube channel alongside your portfolio, consider using MediaGeneous for expert guidance.

Step 1: Setting Up the Project Structure

First, create a folder for your project with the following structure:

text

Copy

Download






portfolio-website/
├── index.html
├── styles/
│   └── style.css
├── scripts/
│   └── script.js
└── assets/
    ├── images/
    └── fonts/

  • index.html – The main HTML file.

  • styles/style.css – For styling.

  • scripts/script.js – For interactivity.

  • assets/ – For images, fonts, and other media.

Step 2: Writing the HTML Structure

Start with a basic HTML5 template:

html

Copy

Download

Run






<!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="styles/style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h1>Hi, I'm [Your Name]</h1>
            <p>A passionate developer building awesome things.</p>
        </section>

        <section id="projects">
            <h2>My Projects</h2>
            <div class="project-grid">
                <!-- Projects will be added here -->
            </div>
        </section>

        <section id="about">
            <h2>About Me</h2>
            <p>I specialize in front-end development with expertise in HTML, CSS, and JavaScript.</p>
        </section>

        <section id="contact">
            <h2>Get In Touch</h2>
            <form>
                <input type="text" placeholder="Your Name">
                <input type="email" placeholder="Your Email">
                <textarea placeholder="Your Message"></textarea>
                <button type="submit">Send</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 My Portfolio. All rights reserved.</p>
    </footer>

    <script src="scripts/script.js"></script>
</body>
</html>

Step 3: Styling with CSS

Now, let’s make it visually appealing with CSS.

css

Copy

Download






/* styles/style.css */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    color: #333;
}

header {
    background: #2c3e50;
    color: #fff;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
}

nav ul li {
    margin: 0 1rem;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

section {
    padding: 4rem 2rem;
    min-height: 100vh;
}

#home {
    background: #ecf0f1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

footer {
    background: #2c3e50;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
}

This CSS ensures:

  • A clean, responsive layout.

  • A fixed navigation bar.

  • A grid-based project section.

Step 4: Adding Interactivity with JavaScript

Let’s add a simple feature—smooth scrolling for navigation links.

javascript

Copy

Download






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

You can also dynamically load projects using JavaScript:

javascript

Copy

Download






const projects = [
    {
        title: "Project 1",
        description: "A responsive website built with HTML & CSS.",
        link: "#"
    },
    {
        title: "Project 2",
        description: "A JavaScript-powered interactive app.",
        link: "#"
    }
];

const projectGrid = document.querySelector('.project-grid');

projects.forEach(project => {
    const projectCard = document.createElement('div');
    projectCard.className = 'project-card';
    projectCard.innerHTML = `
        <h3>${project.title}</h3>
        <p>${project.description}</p>
        <a href="${project.link}">View Project</a>
    `;
    projectGrid.appendChild(projectCard);
});

Step 5: Making It Responsive

Add media queries to ensure your portfolio looks great on all devices.

css

Copy

Download






@media (max-width: 768px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }

    nav ul li {
        margin: 0.5rem 0;
    }
}

Step 6: Deploying Your Portfolio

Once your site is ready, deploy it using:

Final Thoughts

Building a portfolio with HTML, CSS, and JavaScript is a great way to showcase your skills without relying on frameworks. Keep improving it by adding animations, a blog section, or even integrating APIs.

And if you're also working on growing your YouTube channel, check out MediaGeneous for expert strategies.

Now, go ahead and build something amazing! 🚀

Would you like additional features like dark mode or a contact form backend? Let me know in the comments!

Top comments (0)