Open In App

Simple Portfolio Website Design using HTML

Last Updated : 26 Apr, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Creating a portfolio website is a great way to showcase your work, skills, and personal brand to companies/recruiters. this article, we create a simple portfolio using only HTML.

What You Will Expect to Create in this Project

We’ll develop a simple portfolio website that presents your professional highlights, projects, and achievements. We’ll utilize HTML tables to organize content, and the layout will be clean with text alignments and a navigational header.

You are not required to style the website, you are only required to create the structure of the website using HTML.

Project Preview:

profilo project preview

Portfolio Website – HTML Code Structure

HTML 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio of John Doe</title>
</head>
<body>
    <header>
        <h1 style="text-align:center;">John Doe</h1>
        <p style="text-align:center;">Home | Projects | Blogs | Contact</p>
    </header>
    <h2 style="text-align:center;">Web Developer and Designer</h2>
    <table border="1" width="100%">
        <tr>
            <td>
                <h3>Portfolio Highlights</h3>
                <ul>
                    <li>Responsive HTML Layout</li>
                    <li>E-commerce Storefront</li>
                    <li>Interactive Form Design</li>
                    <li>Event Countdown Widget</li>
                    <li>Prototype Landing Pages</li>
                </ul>
            </td>
            <td>
                <h3>Career Achievements</h3>
                <p>Frontend Developer [Intern] at XYZ<br>Headed major product redesigns resulting in a 40% increase in user engagement.<br><a href="#">View My LinkedIn Profile</a></p>
                <h3>Community Involvement</h3>
                <p>Active participant in local and online developer forums. Regularly contribute to web development blogs and GitHub projects.<br><a href="#">Visit My GitHub</a></p>
            </td>
            <td>
                <h3>Academic Qualifications</h3>
                <p>B.Tech (Computer Science) from ABC University</p>
                <p>Specializations:</p>
                <ul>
                    <li>Systems Analysis</li>
                    <li>Advanced JavaScript Techniques</li>
                    <li>Web Accessibility Standards</li>
                    <li>Performance Optimization in Web Applications</li>
                    <li>Cloud Computing Infrastructure</li>
                    <li>Security in Web Applications</li>
                    <li>Advanced Algorithms</li>
                </ul>
            </td>
        </tr>
    </table>
    <h3>Peer Reviews</h3>
    <table border="1" width="100%">
        <tr>
            <td>John Doe consistently delivers high-quality, innovative solutions that exceed project expectations. - Steven, Project Lead</td>
            <td>John Doe is known for his precise attention to detail and his ability to mentor younger developers. - David, UI Designer</td>
            <td>John's approach to problem-solving has been instrumental in our success. - Sarah, Frontend Developer</td>
        </tr>
    </table>
    <footer style="text-align:center;">
        © [2025] All rights reserved by John Doe
    </footer>
</body>
</html>


Code Explanation: Lets Understand this HTML sectionally lets start with Doc Structure.

Document Structure

  • <!DOCTYPE html>: This declaration tells the browser that this is an HTML5 document, which is the latest standard version of HTML.
  • <html>: The root element that encompasses all the content of the webpage.

Head Section

  • <head>: Contains meta-information about the document, which isn’t displayed directly on the webpage but is crucial for browser handling and SEO.
    • <meta charset="UTF-8">: Sets the character encoding to UTF-8, which includes most characters from all known languages, ensuring the text appears correctly.
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">: Optimizes the viewport for responsive design, making the site accessible and visually coherent on various devices.
    • <title>: Specifies the title of the webpage, which appears in the browser tab and is used by search engines.

Body Section

  • <body>: Contains all the contents of the web page that are visible to the viewer.
  • <header>: Serves as the top section of the website.
    • <h1> and <p>: Display the name ‘John Doe’ and a simple navigation menu (Home | Projects | Blogs | Contact). These elements are centrally aligned using inline CSS (style="text-align: center;").

Main Content

  • <h2>: A subtitle that describes John Doe’s professional role as “Web Developer and Designer”, also centered.
  • <table>: Organizes the main content into three columns, each housed in <td> tags:
    • Portfolio Highlights: Lists key projects or skills like responsive design and e-commerce storefronts.
    • Career Achievements and Community Involvement: Outlines professional experiences and contributions to community forums and development projects, including hyperlinks to LinkedIn and GitHub.
    • Academic Qualifications: Details educational background and specialized areas of knowledge.

Peer Reviews

  • Another <table> providing testimonials from colleagues, emphasizing John’s skills and impact in his field. This is a strategic addition to build credibility and showcase real-world validation of his abilities.
  • <footer>: Closes the webpage with copyright information, symbolizing ownership and rights over the content. This is also centrally aligned for consistency with the rest of the page’s styling.

Note: This portfolio website is a simple starting point using only HTML. To enhance its appearance and functionality, consider adding CSS for styling and JavaScript for interactivity. Keep updating your portfolio as you gain more experience and projects to showcase!

Also Check,

To make your Portfolio more attractive and user friendly, you can try following methods to it.

  • You can add visual Effects to Images using CSS.(Learn more)
  • You can create a sticky navigation bar for smoother browsing. (Learn more)
  • You can Add a dark/light mode toggle for user-friendly viewing.(Learn more)
  • You can Make the responsive Web Design for all screen sizes.(Learn more)
  • You can create smooth scrolling effects for easy navigation.(Learn more)
  • You can provide a button to download your resume as a PDF.(Learn more)
  • You need to add a functional contact form to receive messages. (Learn more)
  • You can use Meta tags for SEO.(Learn more)


Next Article
How to create a Portfolio Gallery using HTML and CSS ?
author
imsushant12
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox