Codehal Watch on YouTube

Responsive Personal Portfolio Website using HTML CSS & Javascript

3 min read 4 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 create a responsive personal portfolio website using HTML, CSS, and JavaScript. A personal portfolio website showcases your skills, projects, and experiences, making it an essential tool for job seekers and freelancers. This guide will take you through the steps to build a visually appealing and functional site.

Step 1: Setting Up the Project

  • Create a New Folder: Start by creating a new folder on your computer for your project files.
  • Create Basic Files: Inside the folder, create three files:
    • index.html (for the HTML structure)
    • style.css (for styling)
    • script.js (for JavaScript functionality)

Step 2: Building 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="style.css">
    <title>Your Name - 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">
        <!-- About content -->
    </section>
    <section id="projects">
        <!-- Projects content -->
    </section>
    <section id="contact">
        <!-- Contact content -->
    </section>
    <script src="script.js"></script>
</body>
</html>
  • Tip: Use semantic HTML tags for better accessibility and SEO.

Step 3: Styling with CSS

  • Open style.css and start adding styles to make your portfolio visually appealing. Here are some basic styles to get you started:
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 1rem;
    text-align: center;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

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

nav ul li a {
    color: white;
    text-decoration: none;
}
  • Practical Advice: Use media queries to ensure your design is responsive on different screen sizes.

Step 4: Adding Content to Sections

  • About Section: Add a brief introduction about yourself.
  • Projects Section: Showcase your projects with descriptions and links.
  • Contact Section: Include your contact information or a contact form.

Example for the Projects section:

<section id="projects">
    <h2>Projects</h2>
    <div class="project">
        <h3>Project Title</h3>
        <p>Brief description of the project.</p>
        <a href="link-to-project">View Project</a>
    </div>
</section>

Step 5: Adding Interactivity with JavaScript

  • Open script.js and add interactivity as needed. For example, you can create a simple function to toggle between light and dark modes.

Example code for dark/light mode toggle:

const toggleButton = document.getElementById('toggle');

toggleButton.addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
});
  • Tip: Make sure to define styles for .dark-mode in your CSS for a smooth transition.

Step 6: Testing the Website

  • Open the HTML File: Use your browser to open the index.html file and review the website.
  • Check Responsiveness: Resize your browser window or test on various devices to ensure the site looks good on all screen sizes.

Conclusion

You have now created a responsive personal portfolio website using HTML, CSS, and JavaScript. Remember to continually update your portfolio with new projects and skills as you grow in your career. You can further enhance your site by exploring advanced CSS techniques, animations, and even backend integration if desired. Happy coding!

Table of Contents

Recent