Hello Developers! Are you interested in creating a stunning personal portfolio website that showcases your skills and experience? If so, you’ve come to the right place. In this comprehensive tutorial, we will guide you step-by-step on how to build a fully responsive portfolio website using HTML and CSS. Whether you are a beginner or an experienced developer, we’ve got you covered. Let’s get started!
Step 1: Setting Up the Project
To begin, create a new folder to store your files. Inside the folder, create two new files: “index.html” and “style.css”. These files will contain the HTML structure and CSS styles for your portfolio website.
Step 2: HTML Structure
Open “index.html” in your text editor and start by adding the basic HTML structure. Include the `<html>`, `<head>`, and `<body>` tags. Within the `<head>` tag, link the Font Awesome library and the “style.css” file.
Step 3: Creating the Home Section
Now, let’s start building the sections of your portfolio website. Begin with the Home section, where you can introduce yourself, your name, and your profession. Add a brief description highlighting your skills and experience. Be creative with the layout and design using HTML and CSS.
Step 4: Adding Additional Sections
Repeat the process of Step 3 to create additional sections for Education, Experiences, Skills, Interests, Languages, Hobbies, Contact, and Follow Me. Each section should have a clear heading and content that showcases relevant information. Customize the design and layout based on your preferences.
Step 5: Making the Website Responsive
To ensure that your portfolio website looks great on different devices and screen sizes, use media queries in CSS. Media queries allow you to apply different styles based on the screen width. Adjust the layout, font sizes, and spacing to create a responsive and user-friendly website.
Step 6: Testing and Refining
Finally, Once you have completed building your portfolio website, it’s important to test it on various browsers and devices. Check for any inconsistencies or layout issues and make necessary adjustments. Aim for a seamless user experience across different platforms.
Conclusion:
Congratulations! You have successfully created a responsive personal portfolio website using HTML and CSS. This website will help you showcase your skills, experiences, and qualifications to potential employers or clients. Remember to keep updating your portfolio as you gain more skills and experiences in your field. By regularly maintaining and refining your website, you can create a powerful online presence. Best of luck with your portfolio journey!
Video Tutorial
Source Codes
index.html
<!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>
style.css
@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.
