Open In App
Related Articles

Simple Portfolio Website Design using HTML

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

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
  • Contact us Page

You can enhance your portfolio by adding more details and making it visually appealing. However, this article is specifically designed for beginners who want to create a simple HTML portfolio.

Follow the given link to Build and Host your own portfolio website.

Why do we create a Portfolio?

  • Showcase Skills: Exhibit your skills and projects visually in a portfolio.
  • Career Opportunities: Boost job and freelance prospects with a professional portfolio.
  • Connections: Make lasting connections using your portfolio for job or service opportunities.

Who is a portfolio for?

  • Graphic Designers
  • Web Developers
  • Photographers
  • UX/UI Designers
  • Artists
  • Content Creators
  • Software Engineers
  • Videographers
  • Fashion Designers


Example: In this example, we will see the implementation of the above approach with an example.

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
                                and 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:



Last Updated : 14 Feb, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads