Simple Portfolio Website Design using HTML

08 Aug, 2021
Being a web developer and having a portfolio helps a lot while applying for opportunities and acts as a showcase of our talent, so in this article, we will learn how to make a simple one-page portfolio by just using HTML. This portfolio might contain some very important information of yours like:
about us section
your projects
your achievements
your contact details
You can even add other details too in your portfolio and can make it more beautiful. But this article focuses on beginners who are wanting to learn to build their portfolio using simple HTML.
Prerequisite: Basic concepts of HTML like tags, attributes ,forms, tables, rows, columns, hyperlink etc.
Code Implementation: 
HTML
<!DOCTYPE html><html lang="en"> <head>    <meta charset="UTF-8">    <meta name="viewport" content=        "width=device-width, initial-scale=1.0">    <title>HTML Project</title></head> <body>    <!--Header(start)-->    <table id="header" border="0" width="100%"        cellpadding="0" cellspacing="0" bgcolor="#4CAF50">        <tr>            <td>                <table border="0" cellpadding="15"                    cellspacing="0" width="90%" align="center">                    <tr>                        <td>                                                       </td>                         <td>                            <font face="Comic sans MS" size="6">                                <b>GeeksForGeeks</b>                            </font>                        </td>                         <td width="15%">                                                      </td>                         <td>                            <a href="#home" style="text-decoration:none">                                <font face="Verdana" size="5" color=black>                                    Home                                </font>                            </a>                        </td>                         <td>                            |                        </td>                         <td>                            <a href="#about" style="text-decoration:none">                                <font face="Verdana" size="5" color=black>                                    About                                </font>                            </a>                        </td>                         <td>                            |                        </td>                         <td>                            <a href="#projects" style="text-decoration:none">                                <font face="Verdana" size="5" color=black>                                    Projects                                </font>                            </a>                        </td>                         <td>                            |                        </td>                         <td>                            <a href="#achievements" style="text-decoration:none">                                <font face="Verdana" size="5" color=black>                                    Achievements                                </font>                            </a>                        </td>                         <td>                            |                        </td>                         <td>                            <a href="#contact" style="text-decoration:none">                                <font face="Verdana" size="5" color=black>                                    Contact                                </font>                            </a>                        </td>                    </tr>                </table>            </td>        </tr>    </table>    <!--Header(end)-->     <!--Home(start)-->    <table id="home" border="1" width="100%"        cellpadding="20" cellspacing="0" bgcolor="black">        <tr>            <td>                <table border="0" cellpadding="15"                    cellspacing="0" width="90%" align="center">                    <tr>                        <td align="center" valign="middle">                            <h3>                                <font face="Times New Roman"                                    size="6" color="#ffffff">                                    Hi Geeks!                                </font>                            </h3>                             <h2>                                <font face="Verdana" size="6"                                    color="#4CAF50">                                    <!-- Freelance Programmer -->                                </font>                            </h2>                        </td>                    </tr>                </table>            </td>        </tr>    </table>    <!--Home(end)-->      <!--About(start)-->    <table id="about" border="0" width="100%"        cellpadding="0" cellspacing="0" bgcolor="black">        <tr>            <td>                <table border="0" cellpadding="15"                    cellspacing="0" width="80%" align="center">                    <tr>                        <td height="180" align="center"                            valign="middle" colspan="2">                            <font face="Verdana" size="7"                                color="#4CAF50">                                About Me                            </font>                            <hr color="#4CAF50" width="90">                        </td>                    </tr>                     <tr>                        <td width="40%">                            <img src="img.png">                        </td>                         <td width="60%">                            <font face="Verdana" size="4"                                color="white">                                Thanks for your interest, here                                is a quick story of me and this                                website.                                <hr color="black">                                Sandeep Jain An IIT Roorkee alumnus                                and founder of GeeksforGeeks. He                                loves to solve programming problems                                in most efficient ways. Apart from                                GeeksforGeeks, he has worked with                                DE Shaw and Co. as a software                                developer and JIIT Noida as an                                assistant professor.                                <hr color="black">                                 I do my work mainly in C-Language,                                C++ and JAVA. C++ and Data Structure                                & Algorithm are my stronger section.                                Besides these I know Web Development,                                LINUX and database as well.                                <hr color="black">                                 This website is basically one of my                                Web Development project which is                                built using HTML only.                                Here one can also find ideas for                                projects in different languages.                                 Thanks again for reading this,                                because of people like you, it                                exists and prospers!                                <hr color="black">                                Cheers,                                <br>                                <b>GeeksForGeeks.</b>                            </font>                        </td>                    </tr>                </table>                <hr color="black">                <hr color="black">                <hr color="black">            </td>        </tr>    </table>    <!--About(end)-->      <!--Projects(start)-->    <table id="projects" border="0" width="100%"        cellpadding="0" cellspacing="0" bgcolor="#c2c0c3">        <tr>            <td>                <table border="0" cellpadding="15"                    cellspacing="0" width="80%" align="center">                    <tr>                        <td height="180" align="center"                            valign="middle" colspan="2">                            <font face="Verdana" size="7"                                color="black">                                Projects                            </font>                            <hr color="black" width="90">                        </td>                    </tr>                     <tr>                        <td height="10">                            <font face="Times New Roman"                                size="5" color="black">                                <ul>                                    <li>                                        BMI Calculator                                        <a href="#" style="text-decoration:none">                                              ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Calculator                                        <a href="#" style="text-decoration:none"                                            color="#c2c0c3">                                              ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Calendar                                        <a href="#" style="text-decoration:none">                                              ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        ChatBot                                        <a href="#" style="text-decoration:none">                                              ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Contact Saver                                        <a href="#" style="text-decoration:none">                                              ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Daily Quiz                                        <a href="#" style="text-decoration:none">                                              ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Emplyoyee Record System                                        <a href="#" style="text-decoration:none">                                              ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Guess the Number-Game                                        <a href="#" style="text-decoration:none">                                              ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Random Password Generator                                        <a href="#" style="text-decoration:none">                                             ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Stone Paper Scissor                                        <a href="#" style="text-decoration:none">                                             ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Tic Tac Toe                                        <a href="#" style="text-decoration:none">                                             ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Tic Tac Toe(GUI)                                        <a href="#" style="text-decoration:none">                                             ➲                                        </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        ToDo App                                        <a href="#" style="text-decoration:none">                                             ➲ </a>                                    </li>                                     <li>                                        <hr color="#c2c0c3">                                        Travel Management System                                        <a href="#" style=                                            "text-decoration:none">  ➲                                        </a>                                    </li>                                </ul>                                <hr color="#c2c0c3">                                <hr color="#c2c0c3">                                <hr color="#c2c0c3">                                <hr color="#c2c0c3">                            </font>                        </td>                         <td width="45%">                            <img src="img.png" alt="Project" width="75%">                        </td>                    </tr>                </table>            </td>        </tr>    </table>    <!--Projects(end)-->     <!--Achievement(start)-->    <table id="achievements" border="0" width="100%"        cellpadding="0" cellspacing="0" bgcolor="black">        <tr>            <td>                <table border="0" cellpadding="15"                    cellspacing="0" width="80%" align="center">                    <tr>                        <td height="180" align="center" valign="middle">                            <font face="Verdana" size="7" color="#4CAF50">                                Achievements                                <hr color="#4CAF50" width="100">                            </font>                        </td>                    </tr>                     <tr>                        <td>                            <font face="Verdana" size="4" color="white">                                <ul>                                    <li>                                        <b>Intern at GeeksforGeeks.</b>                                        <ul>                                            <li>                                                December,2020 - Present.                                            </li>                                            <li>                                                Write technical articles                                                on programming related topics.                                            </li>                                        </ul>                                    </li>                                     <li>                                        <hr color="black">                                        <hr color="black">                                        <hr color="black">                                        <b>Microsoft Learn Student Ambassador.</b>                                        <ul>                                            <li>                                                August,2020 - Present.                                            </li>                                            <li>                                                Conducted events and workshops on                                                different technologies.                                            </li>                                        </ul>                                    </li>                                     <li>                                        <hr color="black">                                        <hr color="black">                                        <hr color="black">                                        <b>Mentored HackTX.</b>                                        <ul>                                            <li>                                                October,2020.                                            </li>                                            <li>                                                Selected from Microsoft as Student                                                ambassador where I mentored students                                                in their projects.                                            </li>                                            <hr color="black">                                            <hr color="black">                                            <hr color="black">                                            <hr color="black">                                            <hr color="black">                                        </ul>                                    </li>                                 </ul>                             </font>                        </td>                    </tr>                </table>            </td>        </tr>    </table>    <!--Achievement(end)-->      <!--Contact(start)-->    <table id="contact" border="0" width="100%"        cellpadding="0" cellspacing="0" bgcolor="#c2c0c3">        <tr>            <td>                <table border="0" cellpadding="15"                    cellspacing="0" width="80%" align="center">                    <tr>                        <td height="180" align="center"                            valign="middle" colspan="2">                            <font face="Verdana" size="7"                                color="black">                                Contact                            </font>                            <hr color="black" width="90">                        </td>                    </tr>                     <tr>                        <td align="center" valign="top">                            <table border="0" width="50%" cellpadding="15"                                cellspacing="0" align="center" bgcolor="black">                                <tr>                                    <td width="30%">                                        <hr color="black">                                        <font face="Verdana" size="4"                                            color="#ffffff">                                            Name                                        </font>                                    </td>                                    <td width="70%">                                        <font face="Verdana" size="4"                                            color="#ffffff">                                            <input type="text" size="40">                                        </font>                                    </td>                                </tr>                                <tr>                                    <td width="30%">                                        <font face="Verdana" size="4"                                            color="#ffffff">                                            Email                                        </font>                                    </td>                                    <td width="70%">                                        <font face="Verdana" size="4"                                            color="#ffffff">                                            <input type="email" size="40">                                        </font>                                    </td>                                </tr>                                <tr>                                    <td width="30%">                                        <font face="Verdana" size="4"                                            color="#ffffff">                                            Number                                        </font>                                    </td>                                    <td width="70%">                                        <font face="Verdana" size="4"                                            color="#ffffff">                                            <input type="number" size="12">                                        </font>                                    </td>                                </tr>                                <tr>                                    <td width="30%">                                        <font face="Verdana" size="4"                                            color="#ffffff">                                            Message                                        </font>                                    </td>                                    <td width="70%">                                        <font face="Verdana" size="4"                                            color="#ffffff">                                            <textarea rows="5"                                                cols="37">                                            </textarea>                                        </font>                                    </td>                                </tr>                                <tr>                                    <td width="30%">                                                                              </td>                                    <td width="70%">                                        <button type="Submit">                                            <font face="Verdana"                                                size="4" color="black">                                                <b>Submit</b>                                            </font>                                        </button>                                        <hr color="black">                                        <hr color="black">                                    </td>                                </tr>                            </table>                        </td>                     </tr>                    <tr>                        <td colspan="2">                                                                                    </td>                    </tr>                </table>            </td>        </tr>    </table>    <!--Contact(end)-->      <!--Footer1(start)-->    <table id="footer" border="0" width="100%"        cellpadding="0" cellspacing="0" bgcolor="#4CAF50">        <tr>            <td>                <table border="0" cellpadding="15"                    cellspacing="0" width="90%" align="center">                    <tr>                        <td width="13%" valign="top">                            <b>LinkedIn</b>                            <a href="#" style="text-decoration:none">                                ➲                            </a>                        </td>                         <td>                            |                        </td>                         <td width="13%" valign="top">                            <b>GitHub</b>                            <a href="#" style="text-decoration:none">                                ➲                            </a>                        </td>                         <td>                            |                        </td>                         <td width="13%" valign="top">                            <b>HackerRank</b>                            <a href="#" style="text-decoration:none">                                ➲                            </a>                        </td>                         <td>                            |                        </td>                         <td width="13%" valign="top">                            <b>GeeksforGeeks</b>                            <a href="#" style="text-decoration:none">                                ➲                            </a>                        </td>                         <td>                            |                        </td>                         <td width="13%" valign="top">                            <b>Twitter</b>                            <a href="#" style="text-decoration:none">                                ➲                            </a>                        </td>                         <td>                            |                        </td>                         <td width="13%" valign="top">                            <b>Instagram</b>                            <a href="#" style="text-decoration:none">                                ➲                            </a>                        </td>                         <td>                            |                        </td>                         <td width="13%" valign="top">                            <b>Email</b>                            <a href="#" style="text-decoration:none">                                ➲                            </a>                        </td>                         <td>                            |                        </td>                         <td width="13%" valign="top">                            <b>Website</b>                            <a href="#" style="text-decoration:none">                                ➲                            </a>                        </td>                    </tr>                </table>            </td>        </tr>    </table>    <!--Footer1(end)-->      <!--Footer2(start)-->    <table id="footer" border="0" width="100%"        cellpadding="0" cellspacing="0" bgcolor="black">        <tr>            <td>                <table border="0" cellpadding="15"                    cellspacing="0" width="90%" align="center">                    <tr>                        <td width="80%" valign="top">                            <font face="Verdana"                                color="#4CAF50" size="5">                                ©Copyright 2050 by nobody.                                All rights reserved.                            </font>                        </td>                         <td width="10%">                            <font face="arial" color="black" size="5">                                <a href="#header" style="text-decoration:none">                                    <font face="Verdana" color="#4CAF50" size="6">                                        <b>TOP </b>                                    </font>                                </a>                            </font>                        </td>                    </tr>                </table>            </td>        </tr>    </table>    <!--Footer2(end)--> </body> </html>
Note: We have used two photographs as well. One in the about table and other in the project section.
Outputs:
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Opera
Safari
anikaseth98
ysachin2314
HTML-Questions
Technical Scripter 2020
HTML
Technical Scripter
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
REST API (Introduction)
CSS to put icon inside an input element in a form
Design a Tribute Page using HTML & CSS
Types of CSS (Cascading Style Sheet)
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array