How to create a decent Portfolio website with HTML and CSS

Posted on by

How to create a decent Portfolio website with HTML and CSS

A portfolio can make a business-person, professional, institution or organization sell or not sell their name and/or services in a certain way. In short terms, a portfolio represents you and it goes without saying that a decent Portfolio will build upon your reputation, which is why it is important to know how to build it. As long as you have a domain/sub-domain that you own or one that you have leased, you do not need a Website Developer to build a portfolio. This article gives you all the code, HTML as well as CSS, that you need to come up with your portfolio. All you need to do is copy-paste the code to the necessary directories and customize the Avatar as well as the Professional/Services Details.

For this task, there are three files of interest “index.html“, “style.css” and “Avatar.png” (a custom avatar image). The HTML file consists of the specified information including;

1. Name, 
2. Occupation, 
3. Avatar link, 
4. Bio, & 
5. Contact form.

Copy the Avatar image file (Avatar.png) at the root of the directory that you will create the index.html file for it to be visible. The site is fully static, with the only attached link being a “style.css” file, which is also attached, but needs to be created inside a directory named “css“.

The location of the files will thus be;

/index.html
/css/style.css
/Avatar.png

Attached screenshots below are a preview of the result of the current website;

portfolio-1-thetqweb

portfolio-2-thetqweb

1. index.html

<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="Portfolio" content="">

<title>Portfolio</title>

<!--Stylesheet-->
<link rel="stylesheet" href="css/style.css">

</head>

<body class="">

<div class="intro">
<h1 align="center"> Prof. Anonymous </h1>
<h2 align="center"> Occupation: <br> Security Researcher </h2>
</div>

<br><br><br>
<hr>
<br><br><br>

<div class="about">

<div class="avatar">
<img src="Avatar.png" alt="Avatar">
</div>

<div class="spacing"> </div>

<div class="info" align="center">

<br><br>

<div class="info1">
I am a professional <i>Programmer</i> who lives in code. I am proficient in Object Oriented Programming Languages including; <i>Java, C++, C </i>, and Web design technologies including; <i>HTML, CSS, JavaScript and Ajax</i>.
</div>

<br><br>

<div class="info2">
My specialties and abilities however go beyond code. I possess great Communication skills as well as Time Management skills. These, among other abilities, allows me to create effective interpersonal relationships which result in high performance in the workplace.
</div>

<div class="spacing"> </div>

</div>

</div>

<br><br><br>
<hr>

<form action="" method="post" target="_self">
<div id="ContactForm" align="center">
<h4>Contact Us:</h4>

<label class="name" for="name">Name:</label> <br>
<input type="text" size="30" name="name"/> <br><br>

<label for="email">Email: </label><br>
<input type="text" size="50" name="email"/> <br><br>
<label for="email">Confirm Email: </label><br>
<input type="text" name="email" size="50"/> <br><br>
<button type="submit"> Send </button>
</div>
</form>
</html>

2. style.css

html
{
box-sizing: border-box;
font-size: 16px;
}

.intro
{
color: red;
}

body
{
background-color: #333;
font-family: sans-serif;
color: silver;
}

.about
{
display: flex;
width: 100%;
}

.avatar
{
box-sizing: border-box;
padding: 10px;
width: 30%;
}

.spacing
{
width: 10%;
}

.info
{
box-sizing: border-box;
padding: 10px;
width: 50%;
height: auto;
font-weight: bold;
font-family: monospace;
font-size: 20px;
align-items: center;
}

3. Avatar.png

Avatar-thetqweb

 

How to create a decent Portfolio website with HTML and CSS
Website | thetqweb