Building My First Portfolio Website Using Only HTML
Today marks an important milestone in my #100DaysOfCode journey.
Instead of learning a new HTML concept, I decided to apply everything I've learned over the past 10 days by building my first complete Portfolio Website using only HTML.
Although the website isn't styled yet (CSS comes next!), this project helped me connect all the concepts I've learned into one practical application.
It was exciting to see individual HTML elements come together to form an actual website.
What I Built
I created a simple personal portfolio website that includes:
Home Section
About Me
Skills
Projects
Education
Contact Form
Footer
Even without CSS, the website has a proper structure and demonstrates how HTML organizes content.
Concepts I Used
While building this project, I applied almost every topic I learned during the HTML module.
HTML Document Structure
<!DOCTYPE html><html><head><body>
Semantic HTML
Instead of filling the page with <div> elements, I used semantic tags like:
<header><nav><main><section><article><footer>
This made the structure cleaner and easier to understand.
Headings & Paragraphs
I used heading tags to organize different sections of the portfolio and paragraphs to introduce myself and describe my projects.
Links & Images
I added:
Navigation links
Social media links
Profile picture
using the <a> and <img> tags.
Lists
I used lists to display:
Skills
Technologies
Hobbies
making the content easier to read.
Tables
I created a simple education table showing my academic details.
Forms
The portfolio includes a contact form where visitors can enter:
Name
Email
Message
This helped me practice different form elements like:
<input><textarea><button>
Accessibility
While building the website, I also followed accessibility best practices:
✔ Added meaningful alt text to images.
✔ Used semantic HTML.
✔ Associated labels with form fields.
✔ Maintained a proper heading hierarchy.
Challenges I Faced
Since this was my first complete webpage, I encountered a few challenges:
Deciding how to organize different sections.
Choosing appropriate semantic elements.
Structuring navigation properly.
Keeping the HTML clean and readable.
Solving these challenges taught me that writing HTML is not just about knowing tags—it's about organizing information effectively.
What I Learned
This project showed me that learning individual HTML tags is only the beginning.
The real learning happens when those tags are combined to create something meaningful.
Building even a simple portfolio website gave me a much better understanding of how HTML works in real-world projects.
What's Next?
With HTML fundamentals complete, the next step is CSS.
HTML gives websites their structure.
Now it's time to learn how to style them, create layouts, add colors, improve typography, and make them responsive.
I'm excited to begin that journey.
My Biggest Takeaway
The past 20 days have been about building a strong foundation.
I started by understanding what HTML is.
Today, I built an actual website using everything I'd learned.
It may not look beautiful yet, but every professional website starts with a well-structured HTML document.
This project reminded me that progress doesn't come from memorizing tags—it comes from building.