What We’ll Be Creating
We will create a basic portfolio website that features your professional accomplishments, projects, and achievements. We’ll use HTML tables to structure the content, ensuring a tidy layout with aligned text and a navigation header.
There’s no need to style the website; your main task is to establish its framework using HTML.
Mockup Image:
Simple Portfolio Website
Portfolio Website – HTML Code:
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>
Understanding the Code: Document Structure
This declaration informs the browser that the document is in HTML5, the most current standard of HTML.
Root Element: This element encompasses all the content on the webpage.
Head Section: This section includes meta-information about the document, which isn’t visible on the webpage but is essential for browser functionality and search engine optimization (SEO).
Character Encoding: It sets the character encoding to UTF-8, accommodating a wide range of characters from all known languages to ensure the text displays correctly.
Viewport Optimization: This feature adjusts the viewport for responsive design, ensuring that the site is accessible and visually appealing across different devices.
Title Element: It defines the webpage’s title within the meta-data.
Body Element: The body element of an HTML document is essential for structuring the visible content of a webpage. Enclosed within the “ tags, this section contains all the elements that users interact with, including text, images, videos, links, and other multimedia.
It serves as the canvas for web designers and developers to showcase their creativity, ensuring that information is presented clearly and engagingly. By utilizing a variety of HTML tags, such as headings, paragraphs, lists, and tables, the body element allows for a well-organized presentation of content.
