Do you think IIT Guwahati certified course can help you in your career?
Introduction
A portfolio website is a great way to showcase your skills, projects, and achievements. Using HTML and CSS, you can create a visually appealing and well-structured portfolio. HTML provides the structure, while CSS enhances the design and layout. A portfolio typically includes sections like an introduction, projects, contact details, and social links.
In this article, you will learn how to create a portfolio using HTML and CSS step by step.
Preview Image
Before we begin, here is an example of the final portfolio design:
(Add a preview image of the portfolio website here)
This will help you visualize what we will build.
What is a Portfolio?
A portfolio is a personal website where you display your skills, projects, and work experience. It acts as an online resume that helps recruiters or clients understand your abilities.
A good portfolio includes:
Your introduction (name, profession, and a brief bio)
A list of projects with descriptions
Skills and technologies you are familiar with
Contact information
Why Create a Portfolio?
Creating a portfolio has many advantages:
Showcases your skills: A portfolio helps employers see what you can do.
Builds an online presence: It acts as a digital resume that can be shared easily.
Improves chances of getting hired: Recruiters prefer candidates with a portfolio.
Demonstrates practical knowledge: Instead of just listing skills, you can show real projects.
Who is a Portfolio For?
A portfolio is useful for:
Students: To display academic projects and personal work.
Job seekers: To stand out during job applications.
Freelancers: To attract potential clients.
Developers: To maintain an updated list of projects.
Approach to Building a Portfolio
We will build a simple portfolio with the following sections:
Header: Contains your name and a navigation menu.
About Me: A short bio about yourself.
Projects: Showcases your past work with descriptions and links.
Skills: Lists the technologies you know.
Contact: Provides ways for people to reach you.
Step 1: Creating the HTML Structure
First, we create the basic structure using HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<ul>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#skills">Skills</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<section id="about">
<h2>About Me</h2>
<p>Hello! I'm a web developer passionate about building user-friendly websites.</p>
</section>
<section id="projects">
<h2>Projects</h2>
<p>Here are some of my projects:</p>
<ul>
<li>Project 1: Portfolio Website</li>
<li>Project 2: To-Do List App</li>
</ul>
</section>
<section id="skills">
<h2>Skills</h2>
<p>HTML, CSS, JavaScript, React</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>Email: example@email.com</p>
</section>
</body>
</html>
Output
Step 2: Adding CSS for Styling
Now, let's style our portfolio using CSS.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
text-align: center;
}
header {
background-color: #333;
color: white;
padding: 20px;
}
nav ul {
list-style: none;
padding: 0;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
}
section {
margin: 50px;
}
Output
Step 3: Running the Code
Save the HTML code as index.html and the CSS code as styles.css. Then open index.html in your browser to see your portfolio in action!
What are the most important sections in a portfolio
When creating a portfolio, it’s important to include sections that highlight your skills & accomplishments effectively. These sections ensure your portfolio is both professional & engaging. Let’s discuss what this section should consists of:
1. Homepage or Introduction Section
This is the first thing visitors see when they land on your portfolio. It should include your name, a catchy tagline, & a brief description of who you are. For example, you can mention that you’re a coding student specializing in web development or app design.
Let’s see how you can create this section usingHTML and CSS:
The `intro-section` uses CSS to center-align the content & add a visually appealing background color.
The `<h1>` tag displays your name, while the `<p>` tag provides a short description.
2. About Me Section
This section gives visitors a deeper understanding of who you are, your goals, & your journey as a coding student. You can talk about your interests, the technologies you’re learning, & why you chose this field.
For example:
<section class="about-section">
<div class="container">
<h2>About Me</h2>
<p>I am a college student passionate about coding & web development. I enjoy building projects that solve real-world problems & constantly strive to improve my skills in HTML, CSS, JavaScript, & more.</p>
</div>
</section>
<style>
.about-section {
padding: 50px 20px;
background-color: ffffff;
text-align: center;
}
.about-section h2 {
font-size: 28px;
margin-bottom: 20px;
}
.about-section p {
font-size: 16px;
line-height: 1.6;
}
</style>
Explanation:
The `about-section` includes a heading (`<h2>`) & a paragraph (`<p>`) to describe yourself.
The CSS ensures the section looks clean with proper spacing & alignment.
3. Projects Section
This is where you showcase your best work. Include screenshots, descriptions, & links to your projects. Each project should have its own card or block for better organization.
Let’s see how to create a simple project layout:
The `contact-section` provides essential contact details with links to your social profiles.
The CSS ensures the section stands out with a contrasting background color.
Frequently Asked Questions
Do I need to know JavaScript to build a portfolio?
No, you can create a basic portfolio using just HTML and CSS. JavaScript can be added later for interactivity.
How can I publish my portfolio online?
You can use GitHub Pages, Netlify, or Vercel to host your portfolio for free.
Can I add images and animations to my portfolio?
Yes! You can use CSS animations and add images to make your portfolio more attractive.
Conclusion
In this article, we learned how to create a portfolio using HTML and CSS. We covered the structure, styling, and functionality needed to build a simple yet effective portfolio. We can also personalize it by adding more sections, animations, or JavaScript features.
518+ registered 
