Hi everyone! In this blog, we will learn how to create personal portfolio website using HTML and CSS.
Personal portfolio websites are where it’s at! Whether you’re an artist, a tech guru, a writer, or just doing your own thing, a personal portfolio website is like your online calling card. It’s all about showcasing your skills, talents, and what makes you, well, you.
Okay, first things first, what’s a personal portfolio website? It’s basically your spot on the internet where you can flex your skills, show off your best work, and tell your story. Imagine it’s like your digital scrapbook, but way cooler.
Personal portfolio websites are basically your secret weapon for making a splash, no matter what you’re into, whether it’s art, coding, writing, or just doing your thing. They’re not just some boring website, they’re packed with epic benefits. So, let’s dive into why having a personal portfolio website is a total game changer.
Video Tutorial of Portfolio Website
You can watch the video tutorial on this blog, “Create A Personal Portfolio Website Using HTML and CSS Only – Step By Step Website Tutorial” in the video below.
First Impressions are Everything
Your personal portfolio website is like your online calling card. It’s often the first thing people see when they search for you. Having a slick site screams “professional” and gives you an edge, whether you’re looking for gigs, clients, or just some street cred.
Show Off You’re a Game
The main deal here is showcasing your best work. It’s like a digital trophy case for your accomplishments. Whether it’s art, projects, or whatever makes you shine, your portfolio lets you flaunt your talents and pick what you want people to see.
Your Unique Style, Your Rules
With a personal portfolio website, you’re the boss. You get to call the shots and decide how your site looks and feels. It’s like having your own personal corner of the internet where you can totally be yourself.
Reach a Worldwide Audience
The internet doesn’t have boundaries, and neither does your personal portfolio website. It’s like having a global stage where anyone, anywhere can check out your work. You never know who might discover you and dig what you do.
Keep It Tidy and Organized
Compared to messy social media profiles, your personal portfolio website is like the Marie Kondo of the internet. You can neatly arrange your work, add juicy descriptions, and make sure visitors have a smooth and easy experience.
Network Like a Pro
Your website isn’t just a display case, it’s a networking powerhouse. It can attract like minded peeps, potential clients, or future collaborators who are all about your vibe. It’s like having a backstage pass to connect with awesome people.
Share Your Knowledge
If you’re all about dropping wisdom or insights, your website can be a treasure trove. You can write articles, share tutorials, and position yourself as a legit expert in your field.
You Might Also Like This:
- 3D Portfolio Website
- Complete Responsive Personal Portfolio Website using HTML CSS
- Responsive Personal Website using HTML CSS
Source Files – Personal Website.
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create a Personal Portfolio Website using HTML and CSS | Codehal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h2 class="logo"><span>J</span>oe.</h2>
<nav class="navigation">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Blog</a>
<a href="#">Contact</a>
</nav>
<a href="#" class="btn-talk">Let's Talk</a>
</header>
<section class="home">
<div class="content">
<h2>Hi, I'm <span>Joe Greyson</span></h2>
<h4>Frontend Developer</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A esse totam provident voluptas similique.
Impedit incidunt atque recusandae rem quam.</p>
<div class="btn-group">
<a href="#">Hire Me</a>
<a href="#">See Projects</a>
</div>
<div class="social-icons">
<a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
</section>
</body>
</html>CSS Code:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 30px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo {
font-size: 2em;
color: #555;
cursor: default;
}
.logo span {
color: #7d2ae8;
}
.navigation {
margin-left: -300px;
}
.navigation a {
font-size: 1.1em;
color: #555;
text-decoration: none;
margin-right: 40px;
font-weight: 500;
transition: .3s;
}
.navigation a:hover {
color: #7d2ae8;
}
.btn-talk {
color: #fff;
text-decoration: none;
padding: 8px 35px;
background: #7d2ae8;
border-radius: 10px;
border: 2px solid #7d2ae8;
font-weight: 500;
transition: .3s;
}
.btn-talk:hover {
color: #7d2ae8;
background: transparent;
}
.home {
position: relative;
width: 100%;
height: 100vh;
background: url('background.jpg');
background-size: cover;
background-position: center;
display: flex;
align-items: center;
padding: 30px 100px;
}
.content {
max-width: 500px;
color: #555;
}
.content h2 {
font-size: 3em;
}
.content h2 span {
color: #7d2ae8;
}
.content h4 {
font-size: 2em;
}
.content p {
padding: 10px 0 40px 0;
}
.btn-group a {
color: #fff;
text-decoration: none;
padding: 10px 40px;
background: #7d2ae8;
border-radius: 10px;
border: 2px solid #7d2ae8;
font-weight: 500;
transition: .3s;
}
.btn-group a:hover:nth-child(1) {
color: #7d2ae8;
background: transparent;
}
.btn-group a:nth-child(2) {
color: #7d2ae8;
background: transparent;
margin-left: 30px;
padding: 10px 30px;
}
.btn-group a:hover:nth-child(2) {
color: #fff;
background: #7d2ae8;
}
.social-icons {
position: absolute;
bottom: 50px;
}
.social-icons a {
display: inline-block;
width: 35px;
height: 35px;
background: #7d2ae8;
border-radius: 50%;
margin-right: 22px;
text-align: center;
line-height: 35px;
border: 1px solid #fff;
outline: 2px solid #7d2ae8;
transition: .3s;
}
.social-icons a:hover {
transform: translateY(-5px);
}
.social-icons a i {
color: #fff;
}Conclusion
Personal portfolio website is like your digital playground, your spot to shine, and your platform to connect. Whether you’re chasing job opportunities, showcasing your skills, or just sharing your passion, a personal portfolio website is the way to go. So, if you haven’t jumped on the bandwagon yet, it’s time to create your own personal portfolio website and start reaping the awesome benefits it brings to your professional or creative journey. Happy Coding!