MediaGeneous

Posted on Jun 7

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:

Netlify (Drag & Drop)
Vercel (Git Integration)
GitHub Pages (Free for static sites)

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!

Real challenges. Real solutions. Real talk.

From technical discussions to philosophical debates, AWS and AWS Partners examine the impact and evolution of gen AI.

Learn more

Top comments (0)

🐯 🚀 Timescale is now TigerData: Building the Modern PostgreSQL for the Analytical and Agentic Era

We’ve quietly evolved from a time-series database into the modern PostgreSQL for today’s and tomorrow’s computing, built for performance, scale, and the agentic future.

So we’re changing our name: from Timescale to TigerData. Not to change who we are, but to reflect who we’ve become. TigerData is bold, fast, and built to power the next era of software.