How I created my first portfolio website using only HTML5 & CSS?

In this blog, I will share how I created a simple responsive portfolio Website using only HTML5 and CSS without JS. I used Fontawesome icons. Check step by steps guide so that you can also create this type of Portfolio.

These are my file structures.

First you have to know how to setup CSS with your HTML file:

To do that add a link tag to your HTML source file that connect the CSS file.

<link rel="stylesheet" href="style.css">

Create a Nav Bar.

    <!--  nav bar section -->
    <nav>
        <ul class="nav-items">
            <li><a href="index.html">Home.</a></li>
            <li><a href="#projects-section">Projects.</a></li>
            <li><a href="#contact-section">Contact.</a></li>
        </ul>
    </nav>
    <hr />

.nav-items{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: 1.5rem;

}
li{
    margin-inline: 1rem;
    list-style: none;

}
a{
    color: #000;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;

}
.nav-items li a:hover{
    color:#0b66e6;
}

Create Banner Section.

<!-- Banner section -->
    <section id="banner">
        <div class="left-bg">
            <img src="/image/img.jpg" class="banner-img" alt="Banner Image" />
        </div>
        <div class="right-bg">
            <h2 class="name">Nilajeet Basak</h2>
            <p class="desc">
                Hi👋 there! It's Nilajeet Basak, a Third-year Computer                  
Science
                Engineering student & a Tech Enthusiast. I'm a Front-end Developer as well as Back-end Developer.I
                am always looking for ways to contribute to the open-source community
                and positively impact the tech industry.
            </p>
            <div class="btn">
                <a href="https://nbasak.hashnode.dev" target="_blank">Blogs</a>
            </div>
        </div>
    </section>

/* Banner Section */
#banner{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
    margin-inline: auto;
    margin-top: 6rem;
    gap: 5rem;
}
.banner-img{
    border: 0.1rem solid black;
    height: 23rem;
}
.name{
    font-size: 3rem;
    font-weight: 500;
    color:#000;
    margin-block: 1rem;
    text-transform: uppercase;
}
.desc{
    font-size: 1.3rem;
    font-weight: 300;
    color: $font-pri-color;
    margin-block: 1rem;
}
.btn a{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #000;
    height: 2.5rem;
    width: 7rem;
}
.btn a:hover{
    background-color: #2f3640;
}

Add Contact Details.

<!-- Contact Sections -->
    <section id="contact-section">
        <h2 class="name">Contact</h2>
        <ul>

            <li>
                <a href="https://www.linkedin.com/in/nilajeet-basak/" target="_blank">Send a message on LinkedIn.</a>
            </li>
            <li>
                <a href="https://github.com/NilaBeast" target="_blank">Check my GitHub Repositories.</a>
            </li>
            <li>
                <a href="nilajeetbasak@gmail.com"></a>Send work details on
                Email.
            </li>
        </ul>
    </section>

/* Contact Section */
#contact-section{
    flex-direction: column;
    width: 80vw;
    margin-inline: auto;
    margin-top: 6rem;
}
.name{
    font-size: 3rem;
    font-weight: 500;
    color: #000;
    margin-block: 1rem;
    text-transform: uppercase;
}
li a{
    font-size: 1rem;
    color: #000;

}
li a:hover{
    color: #2f3640;
}
ul{
    line-height: 3rem;
}

Add Footer.

<footer>Crafted by @Nilajeet</footer>

/* Footer */
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-block: 2rem;
}

Now, it is ok for desktop and laptop. But we have to make the site responsive for other devices.

/* Responsive Css */
@media screen and (max-width: 48em) {
  .nav-items li {

      font-size: 0.2rem;
      margin-block: 0.5rem;
    }


  #banner {
    flex-direction: column;
    align-items: center;
    gap: 2rem;
  }
    .name {
      font-size: 2rem;
    }
    .desc {
      font-size: 1rem;
    }
    .btn {
      height: 2rem;
      width: 5rem;
    }
  }

That's it for responsive mode.

Now you can check your website is ready. You can customize it according to your choice

If you want to use this source code then please Star this repository and fork it from GitHub