GreatStack Watch on YouTube

How To Make A Portfolio Website Using HTML CSS JS | Complete Responsive Website Design

3 min read 1 month ago
Published on Jul 03, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial guides you through creating a responsive portfolio website using HTML, CSS, and JavaScript. By following these steps, you'll build a personal site that showcases your skills, work experience, and contact information, making it perfect for an online resume or CV.

Step 1: Set Up Your Project Files

  • Create a new folder for your project.
  • Inside this folder, create three files:
    • index.html (for your HTML structure)
    • styles.css (for your CSS styles)
    • script.js (for your JavaScript functionality)

Step 2: Create the HTML Structure

  • Open index.html and add the following basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Your Name's Portfolio</title>
</head>
<body>
    <header>
        <h1>Your Name</h1>
        <p>Your Designation</p>
    </header>
    <section id="about"></section>
    <section id="services"></section>
    <section id="portfolio"></section>
    <section id="contact"></section>
    <script src="script.js"></script>
</body>
</html>
  • Fill in the header section with your name and designation.

Step 3: Design the Header Section

  • In styles.css, add styles for the header:
header {
    text-align: center;
    padding: 20px;
    background-color: #f4f4f4;
}
  • Consider using a larger font size for your name and a different color for emphasis.

Step 4: Create the About Section

  • Add content to the about section in index.html:
<section id="about">
    <h2>About Me</h2>
    <p>Write a brief introduction about yourself.</p>
</section>
  • Style it in styles.css for visual appeal.

Step 5: Create the Services Section

  • Add the services you offer in the services section:
<section id="services">
    <h2>Services</h2>
    <ul>
        <li>Service 1</li>
        <li>Service 2</li>
        <li>Service 3</li>
    </ul>
</section>
  • Style the list to make it visually engaging.

Step 6: Create the Portfolio Section

  • Display your work in the portfolio section:
<section id="portfolio">
    <h2>My Work</h2>
    <div class="portfolio-item">Project 1</div>
    <div class="portfolio-item">Project 2</div>
</section>
  • Use CSS to create a grid layout for your portfolio items.

Step 7: Create the Contact Section

  • Set up a contact form in the contact section:
<section id="contact">
    <h2>Contact Me</h2>
    <form id="contact-form">
        <input type="text" placeholder="Your Name" required>
        <input type="email" placeholder="Your Email" required>
        <textarea placeholder="Your Message" required></textarea>
        <button type="submit">Send</button>
    </form>
</section>

Step 8: Make the Website Responsive

  • Use CSS media queries to ensure your website looks good on all devices:
@media (max-width: 600px) {
    header, section {
        padding: 10px;
        font-size: 14px;
    }
}

Step 9: Enable Smooth Scrolling

  • Add smooth scrolling functionality in script.js:
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Step 10: Send Form Data to Google Sheets

  • Use the Form to Google Sheets GitHub repository to set up data collection. Include the necessary script in your contact form submission handling.

Conclusion

You've successfully created a responsive portfolio website using HTML, CSS, and JavaScript. By following these steps, you can showcase your work and connect with potential clients or employers. Consider hosting your site online to make it accessible. For further enhancements, explore adding animations or integrating other web technologies. Happy coding!

Table of Contents

Recent