How to Web Dev Watch on YouTube

Build a Complete Responsive Personal Portfolio Website using HTML CSS Javascript

3 min read 2 hours ago
Published on Oct 24, 2024 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 responsive personal portfolio website using HTML, CSS, and JavaScript. This project will not only enhance your web development skills but also provide you with a professional platform to showcase your work.

Step 1: Set Up Your Project

  • Create a new folder for your project.
  • Inside this folder, create the following files:
    • index.html for your HTML structure.
    • styles.css for your CSS styles.
    • script.js for your JavaScript functionality.
  • Link your CSS and JavaScript files in the index.html file:
<!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 Portfolio</title>
</head>
<body>
    <script src="script.js"></script>
</body>
</html>

Step 2: Create the HTML Structure

  • Use semantic HTML to build the main sections of your portfolio:
    • Header (your name and navigation links)
    • About section (brief bio)
    • Projects section (list of your projects)
    • Contact section (contact form)

Example structure:

<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">
    <h2>About Me</h2>
    <p>Your bio goes here.</p>
</section>
<section id="projects">
    <h2>My Projects</h2>
    <div class="project-list">
        <!-- Project items will go here -->
    </div>
</section>
<section id="contact">
    <h2>Contact Me</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>

Step 3: Style Your Portfolio with CSS

  • Use CSS to enhance the visual layout:
    • Set a responsive layout using flexbox or grid.
    • Define colors, fonts, and spacing to match your personal style.

Example CSS:

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
header {
    background: #333;
    color: white;
    padding: 20px;
}
nav ul {
    list-style-type: none;
}
nav ul li {
    display: inline;
    margin-right: 20px;
}

Step 4: Add Interactivity with JavaScript

  • Use JavaScript to enhance user experience:
    • Implement smooth scrolling for navigation links.

Example JavaScript:

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

Step 5: Optimize for Responsiveness

  • Use media queries in your CSS to ensure the website looks good on all devices.
  • Test your website on different screen sizes to ensure a seamless experience.

Example media query:

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
    }
}

Step 6: Deploy Your Portfolio

  • Choose a hosting service (like GitHub Pages, Netlify, or Vercel) to publish your portfolio.
  • Follow the hosting service's instructions to upload your project files.

Conclusion

You have now created a complete responsive personal portfolio website using HTML, CSS, and JavaScript. This project not only showcases your skills but also serves as a foundation for future web development projects. Consider enhancing your portfolio with additional features, such as animations or a blog section, to further showcase your expertise. Happy coding!

Table of Contents

Recent