Pro Coder Watch on YouTube

Create A Responsive Portfolio Website Using HTML CSS and JS - STEP BY STEP TUTORIAL

3 min read 16 days ago

Published on Sep 15, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

In this tutorial, you'll learn how to create a responsive portfolio website using HTML, CSS, and JavaScript. This step-by-step guide will help you build a professional online presence to showcase your skills and projects effectively. By the end of this tutorial, you’ll have a polished website that looks great on all devices.

Step 1: Set Up Your HTML Structure

Start by creating the basic structure of your portfolio website.

Create an index.html file.
Add the following HTML skeleton:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
</head>
<body>
    <!-- Your content will go here -->
</body>
</html>

Practical Tip

Use comments within your HTML code to keep track of different sections (e.g., header, about, projects, contact).

Step 2: Create the CSS File

Next, style your website by creating a style.css file.

Use the following code to import Google Fonts and set basic styles:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');

body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
}

Add styles for your header, sections, and footer. For example:

header {
    background-color: #333;
    color: #fff;
    padding: 20px;
}

Common Pitfall

Avoid using too many different fonts and colors; stick to a consistent theme for a professional appearance.

Step 3: Build the Header Section

In your index.html, create a header to navigate through the site.

Add a navigation bar:

<header>
    <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>

Style the navigation in your CSS:

nav ul {
    list-style: none;
    display: flex;
}
nav ul li {
    margin-right: 20px;
}
nav ul li a {
    color: white;
    text-decoration: none;
}

Step 4: Create About Section

Add an "About" section to introduce yourself.

In your index.html, include:

<section id="about">
    <h1>About Me</h1>
    <p>Brief introduction about yourself and your skills.</p>
</section>

Style the section in your CSS:

#about {
    padding: 20px;
    background-color: #f4f4f4;
}

Step 5: Showcase Your Projects

Display your projects in a dedicated section.

Add the following in your index.html:

<section id="projects">
    <h1>My Projects</h1>
    <div class="project">
        <h2>Project Title</h2>
        <p>Project description goes here.</p>
    </div>
    <!-- Add more projects as needed -->
</section>

Style the projects in your CSS:

.project {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ccc;
}

Step 6: Add a Contact Section

Create a section for visitors to contact you.

In your index.html, add:

<section id="contact">
    <h1>Contact Me</h1>
    <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 Message</button>
    </form>
</section>

Style the contact form in your CSS:

form {
    display: flex;
    flex-direction: column;
}
form input, form textarea {
    margin-bottom: 10px;
}

Step 7: Enhance with JavaScript

Make your website interactive by adding JavaScript.

Create a script.js file and link it in your index.html:

<script src="script.js"></script>

Add interactivity, such as a smooth scroll effect:

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

Conclusion

Congratulations! You've built a responsive portfolio website using HTML, CSS, and JavaScript. You can further enhance your site by adding more projects, improving styles, or integrating additional features like animations. Consider deploying your site using platforms like GitHub Pages or Netlify to share it with others.

Table of Contents

Recent