Daily Tuition Watch on YouTube

Complete Portfolio Website with Bootstrap - HTML/CSS

3 min read 2 months ago

Published on Aug 20, 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 complete portfolio website using Bootstrap, HTML, and CSS. This guide is perfect for beginners looking to establish their personal or professional online presence. By the end of the tutorial, you'll have a fully functional portfolio website that showcases your work.

Step 1: Setting Up Your Project

Create a new folder on your computer to store all your project files.
Download Bootstrap from the official Bootstrap website or include it via CDN in your HTML file.
Set up your HTML file by creating an index.html file in your project folder.

Link Bootstrap and CSS in the <head> section of your HTML file:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">

Step 2: Building the Navigation Bar

Create a navigation bar using Bootstrap's navbar component.

Add the following code within the <body> section of your HTML file:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">My Portfolio</a>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
            <li class="nav-item"><a class="nav-link" href="#projects">Projects</a></li>
            <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
        </ul>
    </div>
</nav>

Step 3: Adding a Hero Section

Create a hero section to grab visitors' attention. Use a combination of Bootstrap classes to style it.

Insert the following code below the navigation bar:

<header class="jumbotron text-center">
    <h1 class="display-4">Welcome to My Portfolio</h1>
    <p class="lead">I am a [Your Profession]</p>
    <a class="btn btn-primary btn-lg" href="#projects">View My Work</a>
</header>

Step 4: Creating the About Section

Add an About section to introduce yourself.

Use the following code block:

<section id="about" class="container text-center">
    <h2>About Me</h2>
    <p>Brief description about yourself and your skills.</p>
</section>

Step 5: Showcasing Your Projects

Create a Projects section to display your work.

Structure it using Bootstrap's grid system:

<section id="projects" class="container">
    <h2>My Projects</h2>
    <div class="row">
        <div class="col-md-4">
            <div class="card">
                <img src="project1.jpg" class="card-img-top" alt="Project 1">
                <div class="card-body">
                    <h5 class="card-title">Project 1</h5>
                    <p class="card-text">Description of project 1.</p>
                    <a href="#" class="btn btn-primary">View Project</a>
                </div>
            </div>
        </div>
        <!-- Repeat for more projects -->
    </div>
</section>

Step 6: Adding a Contact Section

Include a Contact section where visitors can reach you.

Use a simple form:

<section id="contact" class="container">
    <h2>Contact Me</h2>
    <form>
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" required>
        </div>
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" required>
        </div>
        <div class="form-group">
            <label for="message">Message</label>
            <textarea class="form-control" id="message" rows="3" required></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Send</button>
    </form>
</section>

Step 7: Styling with CSS

Create a styles.css file in your project folder to customize the appearance.

Add styles to enhance the layout and presentation:

body {
    font-family: Arial, sans-serif;
}
h2 {
    margin-top: 30px;
}

Conclusion

You have now created a complete portfolio website using Bootstrap, HTML, and CSS. Remember to customize the content and styles to reflect your personal brand. For further enhancement, consider adding JavaScript for interactivity or integrating a backend for form submissions. Explore the source files provided in the video for additional resources and inspiration. Happy coding!

Table of Contents

Recent