Unleash the eventuality of your professional presence by creating a responsive portfolio website using HTML and CSS. This comprehensive companion will, indeed, walk you through the way to make a visually charming and stoner-friendly website that showcases your chops and systems effectively. Whether you’re a inventor, developer, or creative professional, this tutorial will, thus, help you produce am website that stands out. also, learn how to optimize your website for all bias, icing a flawless experience for your visitors.However, check out our eCommerce website tutorial to enhance your online presence further, If you’re interested in further. Start erecting your responsive website moment and, latterly, elevate your online portfolio to the coming position!
Watch the tutorial below to learn how to produce your own responsive portfolio website. 👇
Step by Step Guide to Create a Portfolio Website
To truly master the creation of a responsive portfolio website, you should read our detailed step- by- step companion. This comprehensive tutorial will, thus, help you understand each phase, from setting up the HTML structure to, latterly, integrating CSS for a visually stunning result. By following these way precisely, you will, indeed, insure that you make a professional and witching website that stands out.
Related Posts:
- Bus Booking Website
- Amelia Portfolio
- Admin Dashboard
- Simple Website
- Gaming Website
- Professional Portfolio
- Coffee Website
Step 1: Basic HTML Structure
Start by defining the introductory HTML structure for your website. This includes the DOCTYPE, html, and head rudiments to set up the document.
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Portfolio Website</title>
</head>
<body>
Step 2: Let’s Code Header Section First
Now, Produce the title section that includes the totem and navigation links. This section will help callers navigate through different corridor of your website.
<header>
<a href="#" class="logo">Alex</a>
<nav>
<a href="#" class="active">Home</a>
<a href="#">Services</a>
<a href="#">Skills</a>
<a href="#">Education</a>
<a href="#">Experience</a>
<a href="#">Contact</a>
</nav>
</header>
Step 3: Move to Home Section of the Website
Add the home section where you introduce yourself. This section includes an image, introductory textbook, social media icons, and a call- to- action button.
<section class="home">
<div class="home-img">
<img src="main.jpg" alt="">
</div>
<div class="home-content">
<h1>Hi, It's <span>Alex</span></h1>
<h3 class="typing-text">I'm a <span></span></h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus labore dolores esse. Odit similique doloribus tenetur doloremque, sunt commodi in ipsa repudiandae debitis deleniti blanditiis quibusdam quaerat neque asperiores ea.</p>
<div class="social-icons">
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
</div>
<a href="#" class="btn">Hire me</a>
</div>
</section>
Step 4: Final HTML Code of the Website
So, eventually then’s the final website HTML code below
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Portfolio Website</title>
</head>
<body>
<header>
<a href="#" class="logo">Alex</a>
<nav>
<a href="#" class="active"> Home</a>
<a href="#" >Services</a>
<a href="#" >Skills</a>
<a href="#" >Education</a>
<a href="#" >Experience</a>
<a href="#" >Contact</a>
</nav>
</header>
<section class="home">
<div class="home-img">
<img src="main.jpg" alt="">
</div>
<div class="home-content">
<h1>Hi, It's <span>Alex</span></h1>
<h3 class="typing-text">I'm a <span></span></h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minus labore dolores esse. Odit similique doloribus tenetur doloremque, sunt commodi in ipsa repudiandae debitis deleniti blanditiis quibusdam quaerat neque asperiores ea.</p>
<div class="social-icons">
<a href="#"><i class="fa-brands fa-linkedin"></i></a>
<a href="#"><i class="fa-brands fa-github"></i></a>
<a href="#"><i class="fa-brands fa-x-twitter"></i></a>
<a href="#"><i class="fa-brands fa-instagram"></i></a>
</div>
<a href="#" class="btn">Hire me</a>
</div>
</section>
</body>
</html>
Now that we’ve added the HTML law to our website, it’s time to term it. Without proper styling, the website won’t be visually appealing. So, let’s begin enhancing our website with CSS for a stunning and professional look.
Adding Style to the Portfolio Website
Stay ahead with the rearmost tips and free source law delivered straight to your inbox. Subscribe now to noway miss an update from our blog and enhance your coding chops! To bring your website to life, it’s essential to use CSS for styling. Place the following law in a separate style.css train to insure your website looks professional and visually appealing. This will help in making your website stand out and give a better stoner experience.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
border: none;
outline: none;
font-family: 'Poppins', sans-serif;
}
html{
font-size: 62.5%;
}
body{
width: 100%;
height: 100vh;
overflow-x: hidden;
background-color: black;
color: white;
}
header{
margin-top: 20px;
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 1rem 9%;
background-color: transparent;
filter: drop-shadow(10px);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 100;
}
.logo{
font-size: 3rem;
color: #b74b4b;
font-weight: 800;
cursor: pointer;
transition: 0.5s ease;
}
.logo:hover{
transform: scale(1.1);
}
nav a{
font-size: 1.8rem;
color: white;
margin-left: 4rem;
font-weight: 500;
transition: 0.3s ease;
border-bottom: 3px solid transparent;
}
nav a:hover,
nav a.active{
color: #b74b4b;
border-bottom: 3px solid #b74b4b;
}
@media(max-width:995px){
nav{
position: absolute;
display: none;
top: 0;
right: 0;
width: 40%;
border-left: 3px solid #b74b4b;
border-bottom: 3px solid #b74b4b;
border-bottom-left-radius: 2rem;
padding: 1rem solid;
background-color: #161616;
border-top: 0.1rem solid rgba(0,0,0,0.1);
}
nav.active{
display: block;
}
nav a{
display: block;
font-size: 2rem;
margin: 3rem 0;
}
nav a:hover,
nav a.active{
padding: 1rem;
border-radius: 0.5rem;
border-bottom: 0.5rem solid #b74b4b;
}
}
section{
min-height: 100vh;
padding: 5rem 9% 5rem;
}
.home{
display: flex;
justify-content: center;
align-items: center;
gap: 8rem;
background-color: black;
}
.home .home-content h1{
font-size: 6rem;
font-weight: 700;
line-height: 1.3;
}
span{
color: #b74b4b;
}
.home-content h3{
font-size: 4rem;
margin-bottom: 1rem;
font-weight: 700;
}
.home-content p{
font-size: 1.6rem;
}
.home-img{
border-radius: 50%;
}
.home-img img{
position: relative;
width: 32vw;
border-radius: 50%;
box-shadow: 0 0 25px solid #b74b4b;
cursor: pointer;
transition: 0.2s linear;
}
.home-img img:hover{
font-size: 1.8rem;
font-weight: 500;
}
.social-icons a{
display: inline-flex;
justify-content: center;
align-items: center;
width: 4rem;
height: 4rem;
background-color: transparent;
border: 0.2rem solid #b74b4b;
font-size: 2rem;
border-radius: 50%;
margin: 3rem 1.5rem 3rem 0;
transition: 0.3s ease;
color: #b74b4b;
}
.social-icons a:hover{
color: black;
transform: scale(1.3) translateY(-5px);
background-color: #b74b4b;
box-shadow: 0 0 25px #b74b4b;
}
.btn{
display: inline-block;
padding: 1rem 2.8rem;
background-color: black;
border-radius: 4rem;
font-size: 1.6rem;
color: #b74b4b;
letter-spacing: 0.3rem;
font-weight: 600;
border: 2px solid #b74b4b;
transition: 0.3s ease;
cursor: pointer;
}
.btn:hover{
transform: scale3d(1.03);
background-color: #b74b4b;
color: black;
box-shadow: 0 0 25px #b74b4b;
}
.typing-text{
font-size: 34px;
font-weight: 600;
min-width: 280px;
}
.typing-text span{
position: relative;
}
.typing-text span::before{
content: "software Developer";
color: #b74b4b;
animation: words 20s infinite;
}
.typing-text span::after{
content: "";
background-color: black;
position: absolute;
width: calc(100% + 8px);
height: 100%;
border-left: 3px solid black;
right: -8;
animation: cursor 0.6s infinite;
}
@keyframes cursor{
to{
border-left: 3px solid #b74b4b;
}
}
@keyframes words{
0%, 20%{
content: "Web Developer";
}
21%, 40%{
content: "Developer";
}
41%, 60%{
content: "Web Designer";
}
61%, 80%{
content: "Youtuber";
}
81%, 100%{
content: "Script Writer";
}
}
@media (max-width: 1000px){
.home{
gap: 4rem;
}
}
@media(max-width:995px){
.home{
flex-direction: column;
margin: 5rem 4rem;
}
.home .home-content h3{
font-size: 2.5rem;
}
.home-content h1{
font-size: 5rem;
}
.home-img img{
width: 70vw;
margin-top: 4rem;
}
}
Download Source Code
Click below on download button and get the source files with images
Don’t refresh the page or switch tabs until the download completes.
If the Google Drive link does not appear, click here
Conclusion
In conclusion, erecting a responsive portfolio website using HTML and CSS is an essential step in showcasing your professional chops and systems effectively. This companion has walked you through each phase, from setting up the original HTML structure to baptizing it with CSS, icing a visually charming and stoner-friendly design. By following these way, you can produce a ultramodern portfolio website that stands out, thereby enhancing your online presence. also, optimizing your portfolio website for all bias ensures a flawless experience for your callers. thus, take the time to apply these ways and elevate your portfolio website to the coming position.
I like you bro keep it up
Thanks for the amazing portfolio website code keep it up
can you provide the image