Hello, developers! Are you looking to create a stunning personal portfolio website to showcase your skills and achievements? You’re in the right place. In this tutorial, we’ll walk you through the process of building a responsive portfolio website using HTML and CSS. By the end of this guide, you’ll have a professional-looking portfolio to impress your audience.
STEP 1: PROJECT STRUCTURE
Before we dive into the code, let’s set up the project structure:
- Create a folder for your project, e.g., “portfolio-website.”
- Inside the project folder, create the following files:
index.htmlstyles.cssprofile.png(Your profile picture)port1.jpg,port2.jpg, …,port6.jpg(Your project images)star.png(Star rating image placeholders)test1.png,test2.png,test3.png(Testimonial images)
STEP 2: HTML STRUCTURE
Now, let’s start building the HTML structure for your portfolio website. Open the index.html file and add the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Portfolio</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<!-- Navigation -->
<nav class="nav">
<div class="container">
<div class="nav--container">
<h3>James Smith</h3>
<a href="tel:+123456789" class="btn">Contact Me</a>
</div>
</div>
</nav>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="img--cover">
<img src="profile.png" alt="" />
</div>
<h1 class="hero--title">
Hello, I'm James Smith <br />a Software Engineer
</h1>
<p class="hero--desc">
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on meaningful
content. Lorem ipsum may be used as a placeholder before final copy is
available.
</p>
<div class="btn">Contact Me</div>
</div>
</section>
<!-- Hero Section -->
<section class="about">
<div class="container">
<h4 class="section--head">About Me</h4>
<h2 class="section--title">Designing Solutions, Not Just Visuals</h2>
<p class="section--desc">
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on meaningful
content. Lorem ipsum may be used as a placeholder before final copy is
available.
</p>
<div class="grid--cards">
<div class="card">
<h3>100+ Complete Projects</h3>
<p>
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on
meaningful content.
</p>
</div>
<div class="card">
<h3>8+ Years of Experience</h3>
<p>
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on
meaningful content.
</p>
</div>
<div class="card">
<h3>50+ Happy Clients</h3>
<p>
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on
meaningful content.
</p>
</div>
</div>
</div>
</section>
<!-- Experience Section -->
<section class="experience">
<div class="container">
<h4 class="section--head">Work and Experience</h4>
<h2 class="section--title">Worked With Multiple Top Tech Companies</h2>
<p class="section--desc">
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on meaningful
content. Lorem ipsum may be used as a placeholder before final copy is
available.
</p>
<div class="grid--cards">
<div class="card">
<h3>Sr. Software Engineer</h3>
<i>Full time | Hybrid</i>
<p>2020 - 2023</p>
<div class="divider"></div>
<div class="chip">Virtusa</div>
<p>
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on
meaningful content.
</p>
</div>
<div class="card">
<h3>Jr. Software Engineer</h3>
<i>Full time | On-site</i>
<p>2018 - 2020</p>
<div class="divider"></div>
<div class="chip">Cisco Labs</div>
<p>
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on
meaningful content.
</p>
</div>
<div class="card">
<h3>UI/UX Designer</h3>
<i>Full time | Hybrid</i>
<p>2016 - 2018</p>
<div class="divider"></div>
<div class="chip">Upview Tech</div>
<p>
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on
meaningful content.
</p>
</div>
</div>
</div>
</section>
!-- Skills Section -->
<section class="skills">
<div class="container">
<h4 class="section--head">Skills</h4>
<h2 class="section--title">Education, Skills and Awards</h2>
<p class="section--desc">
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on meaningful
content. Lorem ipsum may be used as a placeholder before final copy is
available.
</p>
<div class="grid--cards">
<div class="col--flex">
<div class="chip">Education</div>
<div class="card">
<p>2021 - 2020</p>
<p><b>Ph.D in Cyber Security</b> - University of London</p>
</div>
<div class="card">
<p>2017 - 2020</p>
<p><b> MSc. in Software Artecture </b>- Queen Mary University</p>
</div>
<div class="card">
<p>2015 - 2016</p>
<p><b>BSc in Cloud Computing</b> - King's College London</p>
</div>
</div>
<div class="col--flex">
<div class="chip">Skills</div>
<div class="card skill--card">
<div class="skill--container">
<p>HTML</p>
<p>90%</p>
</div>
<div class="progress--cover">
<div class="html--progress"></div>
</div>
</div>
<div class="card skill--card">
<div class="skill--container">
<p>CSS</p>
<p>70%</p>
</div>
<div class="progress--cover">
<div class="css--progress"></div>
</div>
</div>
<div class="card skill--card">
<div class="skill--container">
<p>React JS</p>
<p>80%</p>
</div>
<div class="progress--cover">
<div class="react--progress"></div>
</div>
</div>
<div class="card skill--card">
<div class="skill--container">
<p>Next JS</p>
<p>70%</p>
</div>
<div class="progress--cover">
<div class="next--progress"></div>
</div>
</div>
</div>
<div class="col--flex">
<div class="chip">Awards</div>
<div class="card">
<p>2022</p>
<p><b>Front-End Master</b> - University of London</p>
</div>
<div class="card">
<p>2018</p>
<p><b>Best Coder of 2018</b> - Queen Mary University</p>
</div>
<div class="card">
<p>2016</p>
<p><b>Best All-Rounder Programmer</b> - King's College London</p>
</div>
</div>
</div>
</div>
</section>
<!-- Portfolio Section -->
<section class="portfolio">
<div class="container">
<h4 class="section--head">Portfolio</h4>
<h2 class="section--title">Digital Product Showcases</h2>
<p class="section--desc">
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on meaningful
content. Lorem ipsum may be used as a placeholder before final copy is
available.
</p>
<div class="grid--cards">
<div class="card">
<div class="portfolio--img--cover">
<img src="port1.jpg" alt="" />
</div>
</div>
<div class="card">
<div class="portfolio--img--cover">
<img src="port2.jpg" alt="" />
</div>
</div>
<div class="card">
<div class="portfolio--img--cover">
<img src="port3.jpg" alt="" />
</div>
</div>
<div class="card">
<div class="portfolio--img--cover">
<img src="port4.jpg" alt="" />
</div>
</div>
<div class="card">
<div class="portfolio--img--cover">
<img src="port5.jpg" alt="" />
</div>
</div>
<div class="card">
<div class="portfolio--img--cover">
<img src="port6.jpg" alt="" />
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section class="testimonial">
<div class="container">
<h4 class="section--head">Testimonials</h4>
<h2 class="section--title">What People Say About Me</h2>
<p class="section--desc">
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on meaningful
content. Lorem ipsum may be used as a placeholder before final copy is
available.
</p>
<div class="grid--cards">
<div class="card">
<div class="stars">
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
</div>
<p>
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on
meaningful content. Lorem ipsum may be used as a placeholder
before final copy is available.
</p>
<div class="test--profile">
<div class="test--img--cover">
<img src="test1.png" alt="" />
</div>
<div>
<h4>John Wike</h4>
<p>CEO - Cola Como</p>
</div>
</div>
</div>
<div class="card">
<div class="stars">
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
</div>
<p>
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on
meaningful content. Lorem ipsum may be used as a placeholder
before final copy is available.
</p>
<div class="test--profile">
<div class="test--img--cover">
<img src="test2.png" alt="" />
</div>
<div>
<h4>Mark Wood</h4>
<p>CEO - Talk Ball</p>
</div>
</div>
</div>
<div class="card">
<div class="stars">
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
<img src="star.png" alt="" class="star" />
</div>
<p>
Lorem ipsum is a placeholder text commonly used to demonstrate the
visual form of a document or a typeface without relying on
meaningful content. Lorem ipsum may be used as a placeholder
before final copy is available.
</p>
<div class="test--profile">
<div class="test--img--cover">
<img src="test3.png" alt="" />
</div>
<div>
<h4>Philip Mat</h4>
<p>CEO - Ruado</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<footer>
<div class="container">
<div class="footer--container">
<p>© Copyright 2016 - 2023 | All rights reserved</p>
<a href="mailto:abc@gmail.com" class="btn">Email Me</a>
</div>
</div>
</footer>
</body>
</html>
This code sets up the basic structure of your portfolio website, including the navigation, hero section, and other sections.
STEP 3: STYLING WITH CSS
Now, let’s style your portfolio website using CSS. Open the styles.css file and add the following code:
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=swap");
/* common styles */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik", sans-serif;
}
.container {
max-width: 1100px;
margin: auto;
padding: 0 1rem;
}
section {
padding: 5rem 0;
}
.section--head {
text-align: center;
}
.section--title,
.section--desc {
margin: 1rem auto;
text-align: center;
}
.section--desc {
max-width: 800px;
}
.btn {
padding: 0.8rem 2rem;
background-color: crimson;
border-radius: 0.5rem;
font-weight: 600;
width: fit-content;
color: #fff;
cursor: pointer;
text-decoration: none;
}
.btn:hover {
box-shadow: 0 4px 8px #222;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.grid--cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
margin-top: 2rem;
}
.card {
padding: 1.5rem;
background-color: #fff;
border-radius: 0.5rem;
border-bottom: 4px solid crimson;
box-shadow: 0 4px 12px #aaaaaacc;
}
i {
font-size: 0.9rem;
}
p {
color: #555;
}
.chip {
padding: 5px 12px;
background-color: crimson;
width: fit-content;
border-radius: 0.2rem;
color: #fff;
margin-bottom: 0.5rem;
}
/* nav */
.nav {
padding: 0.5rem 0;
background-color: #222;
position: sticky;
top: 0;
z-index: 100;
}
.nav--container {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav--container h3 {
color: #fff;
}
/* hero */
.hero {
background-color: #f1f2f4;
}
.hero .img--cover {
height: 150px;
width: 150px;
position: relative;
border-radius: 50%;
overflow: hidden;
margin: auto;
}
.hero--title {
text-align: center;
margin-top: 1rem;
font-size: 3rem;
}
.hero--desc {
text-align: center;
max-width: 700px;
margin: auto;
margin-top: 1rem;
}
.hero .btn {
margin: auto;
margin-top: 1.2rem;
}
/* about */
.about .card p {
margin-top: 0.5rem;
}
/* experience */
.experience {
background-color: #f1f2f4;
}
.divider {
border-bottom: 1px solid #ccc;
width: 100%;
margin-block: 1rem;
}
/* skills */
.col--flex {
display: flex;
flex-direction: column;
gap: 1rem;
}
.col--flex .chip {
margin-bottom: 0;
}
.skill--card {
border-bottom: 0;
}
.skill--container {
display: flex;
justify-content: space-between;
align-items: center;
}
.progress--cover {
height: 0.3rem;
width: 100%;
background-color: #f1f2f4;
margin-top: 1rem;
}
.html--progress {
background-color: crimson;
width: 90%;
height: 100%;
}
.css--progress {
background-color: crimson;
width: 70%;
height: 100%;
}
.react--progress {
background-color: crimson;
width: 80%;
height: 100%;
}
.next--progress {
background-color: crimson;
width: 70%;
height: 100%;
}
/* portfolio */
.portfolio {
background-color: #f1f2f4;
}
.portfolio--img--cover {
position: relative;
height: 180px;
}
/* testimonial */
.stars {
display: flex;
gap: 1rem;
margin-bottom: 0.5rem;
}
.star {
position: relative;
height: 1.2rem;
width: 1.2rem;
}
.test--profile {
display: flex;
align-items: center;
gap: 1rem;
}
.test--img--cover {
position: relative;
height: 50px;
width: 50px;
border-radius: 50%;
overflow: hidden;
margin-top: 0.5rem;
}
/* footer */
footer {
background-color: #222;
}
.footer--container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
}
footer p {
color: #fff;
}
STEP 4: STYLING RESPONSIVELY
For responsive design, consider using media queries to adjust the layout for different screen sizes. Be sure to test your website on various devices to ensure it looks great on both desktop and mobile.
Here’s an example of adding responsive styles for smaller screens in your CSS:
/* responsive */
@media (max-width: 720px) {
.hero--title {
font-size: 2rem;
}
.grid--cards {
grid-template-columns: 1fr;
}
.portfolio .grid--cards {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 560px) {
.portfolio .grid--cards {
grid-template-columns: 1fr;
}
.footer--container {
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.footer--container .btn {
margin-bottom: 1rem;
}
}
STEP 5: TESTING
Finally, open your index.html file in a web browser to see your portfolio website in action. Make sure everything looks and functions as expected. Test it on different devices to ensure responsiveness.
Congratulations! You’ve now created a complete responsive personal portfolio website using HTML and CSS. Customize the content and styles to make it your own, and don’t forget to replace the placeholder images and text with your own projects and information. Good luck with your portfolio!
Video Tutorial
Don’t forget to Subscribe to our YouTube Channel for more
