How to Build a Responsive Portfolio Website Using HTML, CSS, and JavaScript

Creating a responsive portfolio website is a great way to showcase your skills and projects. In this guide, we’ll walk through building a simple, yet elegant, portfolio website from scratch using HTML, CSS, and JavaScript. We’ll break down each step, provide sample code, and explain how everything fits together.

Step 1: Set Up Your Project

1.1 Create Project Structure

First, set up your project directory. It should look something like this:

portfolio-website/
│
├── index.html
├── styles/
│   └── style.css
├── scripts/
│   └── script.js
└── images/
    └── (your images here)

1.2 Create the HTML File

Create a file named index.html in the root of your project folder. This will be the main structure of your website.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Website</title>
    <link rel="stylesheet" href="styles/style.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section id="home">
        <h1>Welcome to My Portfolio</h1>
        <p>I'm [Your Name], a web developer.</p>
    </section>

    <section id="about">
        <h2>About Me</h2>
        <p>Brief introduction about yourself.</p>
    </section>

    <section id="portfolio">
        <h2>My Work</h2>
        <div class="portfolio-item">
            <img src="images/project1.jpg" alt="Project 1">
            <h3>Project 1</h3>
            <p>Description of project 1.</p>
        </div>
        <!-- Add more projects here -->
    </section>

    <section id="contact">
        <h2>Contact Me</h2>
        <form id="contact-form">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>

            <label for="message">Message:</label>
            <textarea id="message" name="message" required></textarea>

            <button type="submit">Send</button>
        </form>
    </section>

    <footer>
        <p>&copy; 2024 [Your Name]. All rights reserved.</p>
    </footer>

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

Step 2: Style Your Website with CSS

Create a file named style.css in the styles folder. This will handle the styling of your website.

2.1 Basic Styling

Add the following CSS to style.css:

/* Reset some default styling */
body, h1, h2, h3, p, ul, li, form, input, textarea {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Basic Styling */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
}

nav ul li {
    display: inline;
    margin: 0 10px;
}

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

section {
    padding: 20px;
}

section#home {
    background: #f4f4f4;
    text-align: center;
}

.portfolio-item {
    margin: 20px 0;
}

.portfolio-item img {
    max-width: 100%;
    height: auto;
}

footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 10px 0;
}

form {
    display: flex;
    flex-direction: column;
}

form label {
    margin: 10px 0 5px;
}

form input, form textarea {
    padding: 10px;
    margin-bottom: 10px;
}

form button {
    padding: 10px;
    background: #333;
    color: #fff;
    border: none;
    cursor: pointer;
}

form button:hover {
    background: #555;
}

/* Responsive Design */
@media (max-width: 768px) {
    nav ul {
        text-align: center;
    }

    nav ul li {
        display: block;
        margin: 10px 0;
    }
}

2.2 Adding Responsive Design

We added some basic responsive design in the CSS above. You can expand on this by adding more media queries to adjust the layout for different screen sizes.

Step 3: Add Interactivity with JavaScript

Create a file named script.js in the scripts folder. This file will contain the JavaScript to handle form submission and any other interactivity.

3.1 Handle Form Submission

Add the following JavaScript to script.js:

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('contact-form');

    form.addEventListener('submit', (event) => {
        event.preventDefault(); // Prevent the default form submission

        const name = document.getElementById('name').value;
        const email = document.getElementById('email').value;
        const message = document.getElementById('message').value;

        // For now, just log the form data to the console
        console.log('Form Submitted:', { name, email, message });

        // Clear the form fields
        form.reset();
    });
});

Step 4: Test and Deploy

4.1 Test Your Website

Open index.html in your browser and check the appearance of your website. Ensure that it looks good on both desktop and mobile devices.

4.2 Deploy Your Website

To make your portfolio live, you can use various hosting services such as GitHub Pages, Netlify, or Vercel. Simply follow their documentation to deploy your site.

Congratulations! You’ve built a basic, responsive portfolio website using HTML, CSS, and JavaScript. This guide covered creating the project structure, styling with CSS, adding interactivity with JavaScript, and testing your site. Feel free to expand and customize it further to better showcase your unique style and work.

Share on Facebook

Post on X

Save

How to Build a Responsive Portfolio Website Using HTML, CSS, and JavaScript