LEARN HOW TO CREATE A PORTFOLIO WEBSITE USING HTML ONLY
How to Create A Portfolio Website using HTML only.
- Use Table tags to create the sections of the website.
- Header Section: which contains a navigation bar.
- Main Section: Provides name and Experience.
- Services Section: This section lays out the specific services Sparkify offers.
- Skills Section: This section showcases Sparkify’s key skills and competencies.
- Team Section: This section introduces the individuals who make up the Sparkify Solutions team.
- Contact Section: This section provides a form for potential clients to reach out to Sparkify team.
What is a Portfolio website?
A portfolio website is an excellent way to showcase your work and introduce yourself to potential clients. It is one of the best ways to communicate your personality, experience, and qualifications.
On this page we are about to teach you how to create a portfolio website we will also provide you with the source code portfolio website.
The source code for this project is available for download by clicking ‘Download Now’ or cloning the GitHub repository.
Source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Learn How to Create A simple Portfolio Website
</title>
</head>
<body>
<!--Start Of Header Section-->
<table width="100%" bgcolor="#007aff" cellpadding="7px">
<tr>
<td align="center">
<font face="lato" size="6" color="white"><b>Sparkify Solutions</b></font>
</td>
<td width="20%">
</td>
<td>
<a href="#Home">
<font color="wheat" size="5">
Home
</font>
</a>
</td>
<td>
<a href="#Services">
<font color="wheat" size="5">
Services
</font>
</a>
</td>
<td>
<a href="#Skills">
<font color="wheat" size="5">
Skills
</font>
</a>
</td>
<td>
<a href="#Team">
<font color="wheat" size="5">
Team
</font>
</a>
</td>
<td>
<a href="#Contact">
<font color="wheat" size="5">
Contact Us
</font>
</a>
</td>
</tr>
</table>
<!--End Of Header Section-->
<!--Start Of Home Section-->
<table id="Home" width="85%" align="center" cellpadding="20px">
<td width="50%" height="500px">
<h1>Hi</h1>
<h2>My name is Usama</h2>
<p>
<font size="3">
<b>I am an IT Trainer, Full-Stact Developer By Profession.I have been educating Web Development since 6 Oct 2023.</b>
</font>
</p>
<hr>
<h2 align="center">
<button align="center">
<font size="4">
<b>Hire Me</b>
</font>
</button>
</h2>
</td>
<td align="right">
<img src="image/profile.jpg" alt="profile picture" width="65%">
</td>
</table>
<!--End Of Home Section-->
<!--Start Of Services Section-->
<table id="Services" width="85%" align="center" cellpadding="10px">
<tr align="center">
<td colspan="3">
<h2>Services</h2>
<hr width="10%">
</td>
</tr>
<tr align="center">
<td colspan="3">
<font>
<b>We are providing many services..</b>
</font>
</td>
</tr>
<tr>
<td width="33%">
<img src="image/Web-Development.jpg" alt="picture for Web-Development" width="100%" height="235px">
<h2>Web-Development</h2>
<font size="3">
<b>Web-Development is a process or act that is used to develop a Website.</b>
</font>
</td>
<td width="33%">
<img src="image/Mobile App Development.jpg" alt="picture for app development" width="100%">
<h2>Mobile App Development</h2>
<font size="3">
<b>Mobile App Development is a process or act that is used to develop a Mobile Application.</b>
</font>
</td>
<td width="33%">
<img src="image/SEO.jpg" alt="picture for SEO" width="100%" height="235">
<h2>SEO</h2>
<font size="3">
<b>SEO is a process or act that is used to rank a Web Page or a Website.</b>
</font>
</td>
</tr>
</table>
<br><br>
<!--End Of Services Section-->
<!--Start Of Skills Section-->
<table id="Skills" width="85%" align="center" cellpadding="15px" bgcolor="#abb8c3">
<tr align="center">
<td colspan="2">
<h2>Skills</h2>
<hr width="8%">
</td>
</tr>
<tr>
<td>
<label><b>HTML5</b></label>
<br>
<progress value="95" max="100">95%</progress>
</td>
<td>
<label><b>CSS</b></label>
<br>
<progress value="90" max="100">90%</progress>
</td>
</tr>
<tr>
<td>
<label><b>JavaScript</b></label>
<br>
<progress value="80" max="100">80%</progress>
</td>
<td>
<label><b>PHP</b></label>
<br>
<progress value="85" max="100">85%</progress>
</td>
</tr>
</table>
<br>
<!--End Of Skills Section-->
<!--Start Of Team Section-->
<table id="Team" width="85%" align="center" cellpadding="10px">
<tr align="center">
<td colspan="3">
<h2>Our Team</h2>
<hr width="8%">
</td>
</tr>
<tr>
<td width="33%">
<img src="image/Web Developer.jpg" alt="picture for our Web-Developer" width="100%" height="235">
<h2>Usman Malik</h2>
<font size="3">
<b>Web Developer</b>
</font>
</td>
<td width="33%">
<img src="image/App Developer.jpg" alt="picture for our Web-Developer" width="100%" height="235">
<h2>Ehtisham-ul-Haq</h2>
<font size="3">
<b>Mobile App Developer</b>
</font>
</td>
<td width="33%">
<img src="image/Digital Marketing Manager.jpg" alt="picture for our Web-Developer" width="100%" height="235">
<h2>Nasir Ali</h2>
<font size="3">
<b>Digital Marketing Manager</b>
</font>
</td>
</tr>
</table>
<br><br>
<!--End Of Team Section-->
<!--Start Of Contact Section-->
<form >
<table id="Contact" width="85%" align="center" bgcolor="#007aff">
<tr>
<td>
<table width="35%" align="center" cellpadding="10px" >
<tr align="center">
<td colspan="2">
<h2>Contact Us</h2>
<hr width="10%">
</td>
</tr>
<tr >
<td>
<font size="5">Name</font>
</td>
<td>
<input type="text" size="30">
</td>
</tr>
<tr >
<td>
<font size="5">Email</font>
</td>
<td>
<input type="email" size="30">
</td>
</tr>
<tr >
<td>
<font size="5">Message</font>
</td>
<td>
<textarea cols="30" rows="6"></textarea>
</td>
</tr>
<tr align="left">
<td colspan="2">
<button>
<font size="4"><b>Send</b></font>
</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<!--End Of contact Section-->
</body>
</html>
Learn How To Create a portfolio website using HTML only.
HTML, Head, Title, Body, and Table are Tags used in HTML that have distinct functions in creating a web page.
We have created a separate for Different types of tags Click Here to learn about these Tags.
COMMENT TAG IN HTML.
A comment tag is used to add comments in the source code.
It is not displayed on the Browser.
The Programmer adds it to help the coder and reader to understand the code easily.
HEADER SECTION
The header section contains a table Tag with Three properties and two <td> Tags.
Properties used in Table Tag.
Width: It is used to set the table’s width to 100% of the screen.
bgcolor: Stands for background color is used to set the background color of the table to #007aff.
#007aff: It is a hexadecimal code for blue color.
Cellpadding: It is used to produce a space of 7px around all sides of the text in a cell.
Two <td> are used in the header section.
The first <td> tag contains the LOGO of our website.
The second <td> tag contains the Navigation bar.
MAIN SECTION
The main section also contains a table tag with Three properties but the value of these properties is different than the properties in the previous table tag. It also contains two td tags.
Properties used in Table Tag.
Width: 85% width of the screen is used for the table.
Align: This will align the table to the center of the screen.
Cellpadding: 20px of space is produced on all sides around the text in a cell.
Two <td> Tags are used in the Main section.
The first <td> tag contains personal information like name in the h2 tag and profession in the p tag.
The second <td> tag contains the profile image.
SERVICES SECTION
The services section starts with Table Tag.
Table Tag contains Three properties as discussed before.
Table Tag contains Three tr tags.
The first two tr tags have one td tag while the third tr tag contains three td tags therefore colspan property is used in td tag that is in the first two tr tags.
colspan is used in the td tag to combine two or more columns.
The first tr tag contains the heading of Services.
The second tr Tag contains a description of services.
The third tr tag contains Three td tags. Each td tag represents a single service.
The first td tag represents Web Development as a service.
The second td tag represents Mobile App Development as a service.
The Third td tag represents SEO as a service.
SKILLS SECTION
Same as above.
TEAM SECTION
Same as above.
CONTACT SECTION
Here the concept of the nested table is used.
The table inside the table is called a nested table.
This section starts with the form tag that is used to create a login page, signup page, or contact us page.
The outer table has one tr tag and one td tag.
While The Inner Table has Five tr Tags.
The first tr tag in the inner table contains the heading Contact us.
The second tr tag contains a label name and an input field.
The third tr tag contains a label Email and an input field.
While the fourth tr tag contains a label Message and a Textarea.
The fifth tr tag is used to create a button.