Syntax Studio Watch on YouTube

Build a Complete Responsive Personal Portfolio Website using HTML CSS JavaScript

3 min read 7 hours ago
Published on Jan 30, 2025 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you will learn how to build a complete and responsive personal portfolio website using HTML, CSS, and JavaScript. This guide is suitable for both beginners and experienced developers. By the end of this tutorial, you'll have a professional-looking website to showcase your work.

Step 1: Set Up Your Project

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

Step 2: Build the HTML Structure

  • Open index.html and set up the basic HTML 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>My Portfolio</title>
</head>
<body>
    <header>
        <h1>Your Name</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#projects">Projects</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section id="about"></section>
    <section id="projects"></section>
    <section id="contact"></section>
    <script src="script.js"></script>
</body>
</html>
  • This code includes a header with navigation and three sections for content.

Step 3: Style Your Portfolio with CSS

  • Open styles.css and add basic styles:
    body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}
header {
    background: #333;
    color: #fff;
    padding: 10px 0;
    text-align: center;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin: 0 15px;
}
nav ul li a {
    color: white;
    text-decoration: none;
}
section {
    padding: 20px;
    margin: 10px;
    background: white;
}
  • Ensure the styles make your website visually appealing and responsive.

Step 4: Add Content to Your Sections

  • Populate the about, projects, and contact sections with relevant content:
    • About Section
      <h2>About Me</h2>
<p>Brief introduction about yourself.</p>
    • Projects Section
      <h2>My Projects</h2>
<ul>
    <li>Project 1</li>
    <li>Project 2</li>
    <li>Project 3</li>
</ul>
    • Contact Section
      <h2>Contact Me</h2>
<p>Email: example@example.com</p>

Step 5: Add Interactivity with JavaScript

  • Open script.js and add any interactivity you want, such as smooth scrolling:
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function(e) {
        e.preventDefault();
        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Step 6: Make It Responsive

  • Use media queries in styles.css to ensure your website looks good on all devices:
    @media (max-width: 600px) {
    nav ul li {
        display: block;
        margin: 5px 0;
    }
}

Step 7: Deploy Your Portfolio

  • Choose a platform to host your website. Some popular options include:
    • GitHub Pages
    • Netlify
    • Vercel
  • Follow the specific instructions for deploying your site on the chosen platform.

Conclusion

Congratulations on building your responsive personal portfolio website! You have learned how to set up the project structure, create HTML content, style it with CSS, add interactivity with JavaScript, and deploy your site. Now you can showcase your skills and projects to the world. Don't forget to keep your portfolio updated with your latest work!

Table of Contents

Recent