Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Design a Portfolio Webpage using HTML and CSS
A portfolio website serves as a platform to display your work and demonstrate your skills. It has the same purpose as a CV (Curriculum vitae). Most of the CVs are hand-written, whereas the portfolio website will showcase them with engaging visual images and often more detailed than a hand-written CV.
It is an effective way to attract companies, hiring managers, and recruiters so that they can notice you. In addition to that, it is one of the best and most modern ways to show and give others an understanding that who you are as a professional.
Why Create a Portfolio Website
There are several reasons for creating a portfolio website. Including the following −
Firstly, It allows you to showcase your best work and emphasize your abilities in front of potential employers, clients, and collaborators. You can utilize the website to highlight your skills, creativity, and problem-solving capabilities.
In addition to that, a portfolio website assists in building your personal brand and establishing yourself as an expert in your field.
Creating a portfolio website facilitates networking with other professionals in your industry. By sharing this website with others they can explore your work and reach out to you if they are interested in collaborating or hiring you.
Basic Layout of a Portfolio Website
In creating a portfolio website layout that grabs the attention of clients, or collaborators; certain sections should be included as follows −
Homepage − The homepage acts as the initial point of contact for visitors. Thus making a good first impression is important here. Include an introduction about yourself alongside showcasing your skills and past work engagements as highlights.
About Me − To provide visitors with further interest in your profile; include detailed information regarding your educational background as well as prior experiences. Furthermore, sharing personal stories will show your dedication and commitment to your chosen work.
Projects − Include all the projects you have done with screenshots and videos. Additionally, provide sufficient information on each project so that visitors can comprehend the nature of your work and further appreciate its importance.
Contact Me − Add your professional contact details such as Email, GitHub profile, LinkedIn, YouTube, etc. Do not include your personal contacts.
How to Create a Portfolio Website
Following are the steps to create a portfolio website −
Step-1 − First, create an HTML skeleton code, which is the starting point of your website.
Step-2 − Add a navigation bar in the header section with different options such as (Home, About, Projects, Services, Contact Me, etc.) that helps the user to navigate through the content of the portfolio.
Step-3 − Add a short and crisp summary about yourself inside the body section. Additionally, you can add your picture to make it more visually appealing.
HTML
Following is the HTML part of the portfolio webpage −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<link rel="stylesheet" href="style.css">
<title>Personal portfolio</title>
</head>
<body>
<!-- Header section -->
<div class="header">
<nav>
<a href="#"><img src="logo.jpg" alt="logo" class="logo" height="120px" width="150px"></a>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT ME</a></li>
<li><button type="button"class="button-gfc">Get Free Consultant</button></li>
<li><button type="button" class="button-cv">DOWNLOAD CV</button></li>
</ul>
</nav>
<!-- Body section -->
<div class="body">
<p class="demo1">GET EVERY SINGLE SOLUTIONS.</p>
<h1>Hello <br> I'm Abhimanyu <span>Mathur.</span></h1>
<p class="demo2">From concept to deployment, I bring ideas<br> to life as a versatile full stack developer...</p>
<button type="button" class="button-lrn">LEARN MORE</button>
<button type="button" class="button-hire">HIRE ME</button>
</div>
<!-- Image section -->
<div class="image">
<img src="man2.jpg">
</div>
</div>
</body>
</html>
CSS
Following is the CSS part of the portfolio webpage −
/* Reset default browser styles */
* {
margin: 0;
padding: 0;
font-family:sans-serif;
}
/* Styles for header section */
.header {
width: 100%;
height: 100vh;
background-color: lightblue;
}
/* Styles for navigation bar */
nav {
display: flex;
margin: auto;
width: 90%;
padding: 20px;
align-items: center;
justify-content: space-between;
}
nav ul li {
display: inline-block;
list-style: none;
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: black;
font-weight: bolder;
}
nav ul li a:hover {
background-color: seagreen;
border-radius: 2px;
color: white;
}
.button-cv, .button-gfc{
display: inline-block;
margin-left: 0%;
border-radius: 5px;
transition: background-color 0.5s;
background: black;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: white;
border: none;
cursor: pointer;
}
.button-cv:hover {
background-color: white;
color: black;
}
.button-gfc{
background: lightsalmon;
}
.button-gfc:hover {
background-color: white;
color: black;
}
/* Styles for body section */
.body {
margin-left: 100px;
margin-top: 100px;
}
.body h1 {
font-size: 30px;
color: black;
margin-bottom: 20px;
}
.demo1 {
color: orange;
margin-bottom: 30px;
}
.demo2 {
color: black;
line-height: 20px;
}
.button-lrn, .button-hire{
background: lightsalmon;
padding: 10px 12px;
text-decoration: none;
font-weight: bold;
color: whitesmoke;
display: inline-block;
margin: 30px 8px;
border-radius: 5px;
transition: background-color 0.3s;
border: none;
letter-spacing: 1px;
cursor: pointer;
}
.button-lrn:hover {
background-color: whitesmoke;
color: black;
}
.button-hire {
background: black;
}
.button-hire:hover {
background-color: seagreen;
}
span {
color: seagreen;
}
/* Styles for image section */
.image {
width: 45%;
height: 100%;
position: absolute;
bottom: 0;
right: 100px;
}
.image img {
height: 100%;
position:absolute;
left: 50%;
bottom: 10%;
transform: translate(-60%);
}
Example
Following is the complete code for designing a portfolio website −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<link rel="stylesheet" href="style.css">
<title>Personal portfolio</title>
<style>
/* Reset default browser styles */
* {
margin: 0;
padding: 0;
font-family:sans-serif;
}
/* Styles for header section */
.header {
width: 100%;
height: 100vh;
background-color: lightblue;
}
/* Styles for navigation bar */
nav {
display: flex;
margin: auto;
width: 90%;
padding: 20px;
align-items: center;
justify-content: space-between;
}
nav ul li {
display: inline-block;
list-style: none;
margin: 10px;
}
nav ul li a {
text-decoration: none;
color: black;
font-weight: bolder;
}
nav ul li a:hover {
background-color: seagreen;
border-radius: 2px;
color: white;
}
.button-cv, .button-gfc{
display: inline-block;
margin-left: 0%;
border-radius: 5px;
transition: background-color 0.5s;
background: black;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: white;
border: none;
cursor: pointer;
}
.button-cv:hover {
background-color: white;
color: black;
}
.button-gfc{
background: lightsalmon;
}
.button-gfc:hover {
background-color: white;
color: black;
}
/* Styles for body section */
.body {
margin-left: 100px;
margin-top: 100px;
}
.body h1 {
font-size: 30px;
color: black;
margin-bottom: 20px;
}
.demo1 {
color: orange;
margin-bottom: 30px;
}
.demo2 {
color: black;
line-height: 20px;
}
.button-lrn, .button-hire{
background: lightsalmon;
padding: 10px 12px;
text-decoration: none;
font-weight: bold;
color: whitesmoke;
display: inline-block;
margin: 30px 8px;
border-radius: 5px;
transition: background-color 0.3s;
border: none;
letter-spacing: 1px;
cursor: pointer;
}
.button-lrn:hover {
background-color: whitesmoke;
color: black;
}
.button-hire {
background: black;
}
.button-hire:hover {
background-color: seagreen;
}
span {
color: seagreen;
}
/* Styles for image section */
.image {
width: 45%;
height: 100%;
position: absolute;
bottom: 0;
right: 100px;
}
.image img {
height: 70%;
position:absolute;
left: 50%;
bottom: 10%;
transform: translate(-60%);
}
</style>
</head>
<body>
<!-- Header section -->
<div class="header">
<nav>
<a href="#"><img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="logo" class="logo"></a>
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">PROJECTS</a></li>
<li><a href="#">SERVICES</a></li>
<li><a href="#">CONTACT ME</a></li>
<li><button type="button"class="button-gfc">Get Free Consultant</button></li>
<li><button type="button" class="button-cv">DOWNLOAD CV</button></li>
</ul>
</nav>
<!-- Body section -->
<div class="body">
<p class="demo1">GET EVERY SINGLE SOLUTIONS.</p>
<h1>Hello <br> I'm Abhimanyu <span>Mathur.</span></h1>
<p class="demo2">From concept to deployment, I bring ideas<br> to life as a versatile full stack developer...</p>
<button type="button" class="button-lrn">LEARN MORE</button>
<button type="button" class="button-hire">HIRE ME</button>
</div>
<!-- Image section -->
<div class="image">
<img src="https://www.tutorialspoint.com/assets/profiles/519798/profile/200_1221559-1663324574.jpg">
</div>
</div>
</body>
</html>
6K+ Views
