DEV Community

Cover image for Building a Personal Portfolio Website Using Only HTML and CSS
Chukwunonso Joseph Ofodile
Chukwunonso Joseph Ofodile

Posted on

Building a Personal Portfolio Website Using Only HTML and CSS

#webdev #css #portfolio #html

When I built my first personal portfolio, I didn’t know JavaScript or fancy frameworks.
I just used HTML and CSS and that simple site helped me land my first freelance web project.

If you’ve been learning from my tutorials on LearnWithJossy.com
, you already know how powerful the basics can be.
In this guide, we’ll build a clean, modern personal portfolio website using only HTML and CSS no libraries, no frameworks, just pure code.

Step 1: The Structure (HTML)

Every website starts with a strong foundation.
Here’s the basic structure of our portfolio page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio | LearnWithJossy</title>
    <meta name="description" content="Learn how to build a personal portfolio website using only HTML and CSS. Step-by-step guide by LearnWithJossy.com">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>Hi, I’m Jossy 👋</h1>
      <p>Front-End Developer & Author of <a href="https://learnwithjossy.com">LearnWithJossy.com</a></p>
    </header>

    <section class="about">
      <h2>About Me</h2>
      <p>I’m passionate about teaching web development. I wrote the ebook <a href="https://learnwithjossy.com/learn-html">Learn HTML in 7 Days</a> to help beginners master the web’s foundation quickly.</p>
    </section>

    <section class="projects">
      <h2>Projects</h2>
      <div class="project">
        <h3>Portfolio Website</h3>
        <p>A simple responsive site built with HTML and CSS.</p>
      </div>
      <div class="project">
        <h3>LearnWithJossy.com</h3>
        <p>A platform where I teach HTML, CSS, and web development fundamentals for free.</p>
      </div>
    </section>

    <section class="contact">
      <h2>Contact Me</h2>
      <p>Want to collaborate or learn more? Reach out via <a href="mailto:hello@learnwithjossy.com">hello@learnwithjossy.com</a>.</p>
    </section>

    <footer>
      <p>&copy; 2025 LearnWithJossy — Built with 💻 HTML & CSS</p>
    </footer>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

That’s the full HTML skeleton.

You can see how we’ve already included SEO meta tags, your site’s link, and references to your ebook just like I recommend in my course Learn HTML in 7 Days.

Step 2: Styling It (CSS)

Now let’s make it look clean and modern with CSS.
Create a style.css file and add this:

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: #f9f9f9;
  color: #333;
}

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

a {
  color: #ff4b4b;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

section {
  padding: 2rem 1rem;
  max-width: 800px;
  margin: auto;
}

.projects {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.project {
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

footer {
  text-align: center;
  padding: 1rem;
  background: #222;
  color: white;
}
Enter fullscreen mode Exit fullscreen mode

Simple and clean that’s all it takes to make your page stand out.

You can even check out more tutorials learnwithjossy.com for more beginner-friendly CSS tutorials like this one.

Step 3: Make It Your Own

Now that you have a basic layout, here’s how to personalize it:

Change the colors to match your style.

Add your real projects, GitHub links, or client work.

Use a professional headshot or simple avatar.

Link to your social media or developer profiles.

If you’re following my book Learn HTML in 7 Days, you can practice adding new sections like:

  • Testimonials
  • A blog area
  • A “Download Resume” button

These are great exercises from Day 5 and Day 6 of the book!

Step 4: Add a Favicon and Meta Tags

Favicons make your site look more professional in browser tabs.

<link rel="icon" href="favicon.ico" type="image/x-icon">
Enter fullscreen mode Exit fullscreen mode

And don’t forget Open Graph meta tags for social sharing — you’ll find examples of this on LearnWithJossy.com blog
.

Step 5: Show It to the World

Once your portfolio looks good, it’s time to publish it!
You can host your site for free on:

  • GitHub Pages
  • Netlify
  • Vercel

I’ve written a full tutorial on “How to Deploy a Website for Free” on LearnWithJossy.com
.

Top comments (0)