Here in this tutorial, you will learn how to create a Responsive personal portfolio using HTML and CSS step by step from start to end.
You can watch this video and easily able to create this type of responsive portfolio website even if you're a beginner.
I designed this with the very basics of HTML and CSS.
I hope you will enjoy it.
If this tutorial is helpful for you, please like this video and subscribe to my channel to watch more web development tutorials.
Complete source codes and images at the end 🠋🠋🠋
You may also like
Check the video tutorial
Recommended Videos
HTML CODES
<!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">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link rel="stylesheet" href="styles.css">
<title>Portfolio</title>
</head>
<body>
<div class="header-container">
<div class="header-details-container">
<div class="header-details">
<h1>JOHN SMITH</h1>
<h2>GRAPHIC DESIGNER</h2>
<p><span>I'm John Smith</span> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam omnis, deleniti ipsa facilis inventore libero, ex dignissimos odit ipsum eum, exercitationem ducimus? Autem hic facilis exercitationem praesentium
architecto nam tenetur.</p>
</div>
<div class="main-skill-container">
<div class="main-skill">
<div class="icon-box">
<i class="fas fa-crop-alt"></i>
</div>
<div class="main-skill-item">
<h4>PHOTOSHOP</h4>
<h5>65%</h5>
</div>
</div>
<div class="main-skill">
<div class="icon-box">
<i class="fas fa-laptop"></i>
</div>
<div class="main-skill-item">
<h4>ART DESIGN</h4>
<h5>35%</h5>
</div>
</div>
<div class="main-skill">
<div class="icon-box">
<i class="fas fa-camera-retro"></i>
</div>
<div class="main-skill-item">
<h4>PHOTOGRAPHY</h4>
<h5>45%</h5>
</div>
</div>
</div>
</div>
<div class="img-box">
<img src="pexels-chloe-1043473.jpg" alt="">
</div>
</div>
<div class="body-container">
<div class="side-section">
<div class="followme">
<h3 id="followme">FOLLOW ME</h3>
<hr>
<a href="#">
<div class="icon-box-small"><i class="fab fa-behance"></i></div>behance.net/username
</a>
<a href="#">
<div class="icon-box-small"><i class="fab fa-linkedin-in"></i></div>linkedin.com/username
</a>
</div>
<div class="contact">
<h3>CONTACT</h3>
<hr>
<a href="#">
<div class="icon-box-small"><i class="fas fa-phone-alt"></i></div>+94 77 0123456
</a>
<a href="#">
<div class="icon-box-small"><i class="fas fa-envelope"></i></div>robertsmith@gmail.com
</a>
<a href="#">
<div class="icon-box-small"><i class="fas fa-globe-asia"></i></div>www.websitename.com
</a>
<a href="#">
<div class="icon-box-small"><i class="fas fa-map-marker-alt"></i></div>Ur Street name 12/B, <br>ABC City, <br>United Kingdom
</a>
</div>
<div class="skills">
<h3>SKILLS</h3>
<hr>
<div class="skill">
<p>Communication</p>
<div class="skill-progress-cover">
<div id="communication"></div>
</div>
</div>
<div class="skill">
<p>Creativity</p>
<div class="skill-progress-cover">
<div id="creativity"></div>
</div>
</div>
<div class="skill">
<p>Teamwork</p>
<div class="skill-progress-cover">
<div id="teamwork"></div>
</div>
</div>
<div class="skill">
<p>Organization</p>
<div class="skill-progress-cover">
<div id="organization"></div>
</div>
</div>
</div>
<div class="hobbies">
<h3>HOBBIES</h3>
<hr>
<div class="hobby">
<p>Road Trips</p>
<div class="icon-box">
<i class="fas fa-motorcycle"></i>
</div>
</div>
<div class="hobby">
<p>Photography</p>
<div class="icon-box">
<i class="fas fa-camera-retro"></i>
</div>
</div>
<div class="hobby">
<p>Football</p>
<div class="icon-box">
<i class="fas fa-futbol"></i>
</div>
</div>
</div>
</div>
<div class="main-section">
<div class="educations">
<h3 id="education">EDUCATION</h3>
<hr>
<div class="education">
<div class="year">2020/2022</div>
<div class="education-content">
<p class="title">Master of Science</p>
<p>Faculty of Engineering & Design, University of Totonto</p>
</div>
</div>
<div class="education">
<div class="year">2016/2020</div>
<div class="education-content">
<p class="title">Bacheolor of Science</p>
<p>Faculty of Engineering & Design, University of Totonto</p>
</div>
</div>
</div>
<div class="experiences">
<h3>EXPERIENCES</h3>
<hr>
<div class="experience">
<h4>Senior Graphic Designer</h4>
<h5>Company | www.company.com</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut sit iusto placeat id nemo nobis sunt ipsam quia voluptatum nisi.</p>
<p class="date">01.2020 - present</p>
</div>
<div class="experience">
<h4>Junior Graphic Designer</h4>
<h5>Company | www.company.com</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut sit iusto placeat id nemo nobis sunt ipsam quia voluptatum nisi.</p>
<p class="date">01.2018 - 01.2020</p>
</div>
<div class="experience">
<h4>Trainee Graphic Designer</h4>
<h5>Company | www.company.com</h5>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut sit iusto placeat id nemo nobis sunt ipsam quia voluptatum nisi.</p>
<p class="date">01.2016 - 2018</p>
</div>
</div>
<div class="interests-languages">
<div class="interests">
<h3 id="interests">INTERESTS</h3>
<hr>
<div class="interest-container">
<div class="interest">
<div class="icon-box"><i class="fas fa-pencil-ruler"></i></div>
<p>Infographic <br>Design</p>
</div>
<div class="interest">
<div class="icon-box"><i class="fas fa-spa"></i></div>
<p>Ecology <br>Design</p>
</div>
<div class="interest">
<div class="icon-box"><i class="fas fa-plane"></i></div>
<p>Traveling</p>
</div>
</div>
</div>
<div class="languages">
<h3 id="languages">LANGUAGES</h3>
<hr>
<div class="language-container">
<div class="language">
<p>English</p>
<p class="icons">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
</p>
</div>
<div class="language">
<p>Spanish</p>
<p class="icons">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
</p>
</div>
<div class="language">
<p>French</p>
<p class="icons">
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
<i class="fas fa-circle"></i>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS Codes
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.header-container {
display: flex;
}
.header-details {
background-color: #ffca06;
padding: 100px;
}
h1 {
font-size: 90px;
color: #454042;
}
.header-details h2 {
background-color: #454042;
color: #ffca06;
width: fit-content;
padding: 10px;
letter-spacing: 3px;
}
.header-details p {
margin-top: 30px;
color: #454042;
}
.header-details p span {
font-weight: 900;
font-size: 18px;
}
.main-skill-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
background: #2a3f32;
padding: 20px 100px;
}
.main-skill {
display: flex;
align-items: center;
margin-right: 10px;
}
.main-skill .icon-box {
width: 40px;
height: 40px;
display: flex;
align-items: center;
color: #ffca06;
font-size: 25px;
}
h4 {
color: #ffca06;
white-space: nowrap;
}
h5 {
color: #fff;
font-size: 18px;
}
.img-box {
position: relative;
height: inherit;
width: 480px;
flex-shrink: 0;
}
img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* body container starts here */
#followme,
#education,
#interests,
#languages {
margin-top: 0;
}
.body-container {
display: grid;
grid-template-columns: 1fr 2fr;
background: #30343b;
padding: 100px 100px 50px 100px;
column-gap: 50px;
}
h3 {
color: #fff;
letter-spacing: 3px;
margin-top: 50px;
font-size: 30px;
}
.body-container hr {
margin: 20px 0;
border-color: #4d545f;
height: 5px;
}
.icon-box-small {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
}
.body-container a {
text-decoration: none;
color: #dbdbdb;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.contact .icon-box-small {
border-radius: 50%;
background: #ffca06;
color: #454042;
}
.contact a {
margin-bottom: 10px;
}
/* skills */
.skill {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
color: #cecece;
}
.skill-progress-cover {
position: relative;
width: 60%;
border: 2px solid #ffca06;
border-radius: 10px;
}
#communication,
#creativity,
#teamwork,
#organization {
position: absolute;
top: 0;
left: 0;
height: 100%;
background: #ffca06;
border-radius: 10px 0 0 10px;
}
#communication {
width: 65%;
}
#creativity {
width: 80%;
}
#teamwork {
width: 60%;
}
#organization {
width: 50%;
}
/* hobbies */
.hobby {
display: flex;
justify-content: space-between;
color: #cecece;
margin-bottom: 20px;
width: 80%;
}
.icon-box {
color: #ffca06;
}
.icon-box i {
font-size: 20px;
}
/* education */
.education {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 50px;
color: #cecece;
}
.title {
color: #ffca06;
}
/* experience */
.experience {
position: relative;
margin-bottom: 50px;
}
.experience h5 {
margin: 10px 0;
color: #cecece;
}
.experience p {
color: #979797;
}
.date {
position: absolute;
right: 0;
top: 0;
}
/* interests and languages */
.interests-languages {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 50px;
}
.interest-container,
.language-container {
display: flex;
justify-content: space-between;
text-align: center;
}
.interest p {
margin-top: 10px;
color: #cecece;
}
.language p {
margin-bottom: 10px;
color: #cecece;
}
.language .icons {
white-space: nowrap;
}
.language i {
color: #ffca06;
margin-right: 2px;
font-size: 10px;
}
/* responsive starts here */
@media(max-width:1230px) {
h1 {
font-size: 70px;
}
h2 {
font-size: 20px;
}
.img-box {
width: 380px;
}
}
@media(max-width:1100px) {
.header-details {
padding: 50px;
}
.main-skill-container {
padding: 20px 50px;
}
.body-container {
padding: 50px;
}
}
@media(max-width:980px) {
.main-skill-item h4,
.main-skill-item h5 {
font-size: 14px;
}
.img-box {
width: 280px;
}
}
@media(max-width:880px) {
h1 {
font-size: 50px;
}
.header-details p {
margin-top: 20px;
}
.main-skill-item h4,
.main-skill-item h5 {
font-size: 10px;
}
.body-container {
grid-template-columns: 1fr;
}
.side-section {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
#contact {
margin-top: 0;
}
#education {
margin-top: 30px;
}
h3 {
margin-top: 30px;
}
}
@media(max-width:740px) {
.side-section {
grid-template-columns: 1fr;
}
.header-container {
flex-direction: column;
}
.img-box {
height: 500px;
width: 100%;
}
}
@media(max-width:560px) {
.interests-languages {
grid-template-columns: 1fr;
}
.education {
flex-direction: column;
align-items: flex-start;
}
.header-details,
.body-container,
.main-skill-container {
padding: 20px;
}
#languages,
#contact {
margin-top: 30px;
}
.main-skill-container .icon-box {
width: 30px;
height: 30px;
font-size: 20px;
}
.side-section {
grid-gap: 0;
}
}
Don't forget to Subscribe to our Youtube Channel for more.
.jpg)
0 Comments