 |
| Simple Portfolio project using HTML and CSS |
We given the simple portfolio project using HTML & CSS with source code. Now, Creating Simple Portfolio using HTML & CSS becomes very simple with the given source code which provides a simple design to create your own portfolio project. So, let's go and read the information carefully.
Steps to create simple portfolio project using html and css
Here are the Steps to create the simple portfolio project as given below :-
1) Creating File on VS CODE :
Open VS Code, Create a folder to add the HTML and CSS files.
2) Adding HTML code in File :
Add the .html file in the project folder and give it the name as - index.html.
3) Copy and Paste HTML code :
copy the following code and Paste it in index.html file.
<!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="style.css">
</head>
<body>
<header>
<div class="container">
<h1>John Doe</h1>
<p>Web Developer</p>
</div>
</header>
<section class="about">
<div class="container">
<img src="webdeveloper.jpg" alt="" class="img">
<h2>About Me</h2>
<p>I am a passionate web developer with experience in
creating responsive websites using HTML, CSS, and JavaScript.</p>
</div>
</section>
<section class="projects">
<div class="container">
<h2>Projects</h2>
<div class="project-item">
<h3>Project 1</h3>
<p>Description of Project 1.</p>
<p><a href="#">Project link</a></p>
</div>
<div class="project-item">
<h3>Project 2</h3>
<p>Description of Project 2.</p>
<p><a href="#">Project link</a></p>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© 2024 John Doe. All rights reserved.</p>
</div>
</footer>
</body>
</html>
4) Adding CSS code in File :
Add the .css file in the project folder and give it the name as - style.css.
5) Copy and Paste CSS code :
copy the following code and paste it in style.css file.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
}
.container {
max-width: 960px;
margin: auto;
padding: 0 20px;
}
header {
background: #333;
color: #fff;
border-bottom: #f4f4f4 3px solid;
}
.about {
padding-top: 20px;
overflow: hidden;
}
.projects {
padding-top: 20px;
overflow: hidden;
}
.project-item {
margin-bottom: 20px;
padding: 10px;
background: #f4f4f4;
}
.img{
height:200px;
width: 200px;
border-radius: 300px;
}
footer {
text-align: center;
padding: 10px;
margin-top: 20px;
color: #fff;
background-color: #333;
}
6) Check the Output :
After Adding HTML & CSS, check the output of the project.
7) Edit the code :
In this project code, you've to add your information as your requirement to design the portfolio perfectly. you can also add extra information as you want by customizing the simple HTML& CSS code.
Hope this tutorial helps you to create Simple basic portfolio project using HTML & CSS. if you have any confusion then you can contact with us on our coding community.
Tags:
projects