Responsive Portfolio Website Using HTML & CSS -Full Tutorial

3 min read 6 days ago
Published on Sep 27, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial will guide you through creating a stunning portfolio website using only HTML and CSS. Perfect for beginners, this step-by-step guide will help you build a responsive, professional-looking site to showcase your projects. No JavaScript is required, making it an accessible starting point for anyone interested in web development.

Step 1: Set Up Your Project Structure

Begin by creating a new folder for your project. Inside this folder, create the following files:

  • index.html – This will be your main HTML file.
  • style.css – This file will contain all your CSS styles.

Practical Tip

Organize your project directory to keep assets like images or additional stylesheets in separate folders. This will help maintain clarity as your project grows.

Step 2: Create the HTML Structure

Open index.html and start building the basic structure of your webpage. Use the following code as a template:

<!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>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>
    <main>
        <section id="about">
            <h2>About Me</h2>
            <p>A brief introduction about yourself.</p>
        </section>
        <section id="projects">
            <h2>My Projects</h2>
            <!-- Project entries will go here -->
        </section>
        <section id="contact">
            <h2>Contact Me</h2>
            <p>Your contact information.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 Your Name</p>
    </footer>
</body>
</html>

Common Pitfall

Ensure you have the correct file paths for your CSS and any other assets to prevent styling issues.

Step 3: Add CSS Styles

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;
    line-height: 1.6;
}

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: #fff;
    text-decoration: none;
}

section {
    padding: 20px;
    margin: 20px;
}

footer {
    text-align: center;
    padding: 10px 0;
    background: #333;
    color: #fff;
}

Practical Tip

Experiment with different colors, fonts, and layouts to find a style that represents you best. Use tools like Google Fonts for more font choices.

Step 4: Make It Responsive

To ensure your portfolio looks good on all devices, add responsive styles. Use media queries to adjust layouts for smaller screens. Here’s an example:

@media (max-width: 600px) {
    nav ul {
        display: block;
    }

    nav ul li {
        margin: 10px 0;
    }
}

Real-World Application

Responsive design is crucial in today’s web environment, as many users access sites via mobile devices.

Step 5: Populate Your Portfolio

Return to index.html and fill in the "My Projects" section with your work. Use the following structure for each project:

<div class="project">
    <h3>Project Title</h3>
    <p>Description of the project.</p>
    <a href="link-to-project" target="_blank">View Project</a>
</div>

Common Pitfall

Make sure to include links to live projects or code repositories to showcase your work effectively.

Conclusion

Congratulations! You’ve successfully created a responsive portfolio website using HTML and CSS. Remember to customize your content and styles to truly reflect your personality and work. As next steps, consider enhancing your site with JavaScript or exploring frameworks like Bootstrap for more advanced layouts. Happy coding!