My Journey Learning HTML: From Zero to Building My First Portfolio
A few days ago, I started learning HTML with the goal of building my own portfolio website. At first, web development looked overwhelming, but after practicing consistently, I realized that every website is built from simple building blocks.
What is HTML?
HTML (HyperText Markup Language) is the foundation of every website. It provides the structure of a webpage using elements such as headings, paragraphs, images, links, forms, and buttons.
Think of HTML as the skeleton of a website.
Topics I Learned
- Basic HTML Structure
One of the first things I learned was the basic structure of an HTML document.
<html><head><title><body>
These tags form the foundation of every webpage.
2. Headings and Paragraphs
I learned how to display content using:
<h1>to<h6>for headings<p>for paragraphs
These tags help organize information clearly.
3. Links and Navigation
I learned to create clickable links using:
<a href="https://example.com">Visit Website</a>
I also learned how to open links in a new tab using:
target="_blank"
4. Images
Displaying images was another exciting step.
<img src="image.jpg" alt="Image">
I learned how to adjust image sizes and use images in my portfolio.
5. Forms
Forms allow users to enter information.
I practiced:
Text inputs
Labels
Placeholders
Submit buttons
This helped me understand how websites collect user information.
6. IDs and Classes
I learned the difference between IDs and classes.
IDs are unique.
Classes can be used for multiple elements.
Example:
<p id="title">Hello</p>
<p class="text">Welcome</p>
7. CSS Styling
After learning HTML, I started styling pages using CSS.
I explored:
Colors
Borders
Padding
Margins
Backgrounds
This transformed plain webpages into attractive designs.
8. Background Images
One of the most interesting things I learned was adding background images.
background-image: url("image.jpg");
background-size: cover;
background-position: center;
I also learned the purpose of:
background-repeatbackground-attachmentbackground-sizebackground-position
9. Navigation Bar
I started creating a navigation bar for my portfolio with sections such as:
About
Skills
Projects
Certifications
Education
Contact
This helped me understand how real websites are organized.
10. Pseudo Classes
I learned CSS pseudo-classes such as:
:hover:visited:active:nth-child()
These allow elements to react to user interactions.
11. Positioning and Layouts
I explored:
floatpositionrelativeabsolutefixedsticky
These concepts helped me control where elements appear on the page.
12. Challenges I Faced
The most valuable part of my learning journey was applying everything to a personal portfolio website.
While building it, I faced many challenges:
Elements not aligning correctly
CSS properties not working as expected
Layout issues
But solving these problems taught me much more than simply watching tutorials.
What I Learned Beyond HTML
The biggest lesson was that learning web development is not about memorizing tags. It is about building projects, making mistakes, debugging, and improving step by step.
Every error taught me something new.
What's Next?
My next goals are:
Improve my CSS skills
Learn Flexbox
Learn JavaScript
Make my portfolio responsive
Build more projects
My First Portfolio Website
One of the most exciting parts of my learning journey was building and deploying my first portfolio website.
This portfolio is the first version of my work. I know it is far from perfect and may not look as professional as experienced developers' portfolios. However, I am proud of it because it represents my first step into web development and showcases the concepts I have learned so far.
Building this portfolio taught me valuable lessons about HTML structure, CSS styling, layouts, navigation, debugging, and deployment. More importantly, it showed me that learning happens through creating, experimenting, and improving.
I plan to continue refining the design, improving responsiveness, learning modern CSS techniques such as Flexbox and Grid, and adding more projects as I grow as a developer.
Connect With Me
🌐 Portfolio: https://annet-own-portfolio.netlify.app/
💻 GitHub: https://github.com/annet2005
🔗 LinkedIn:https://www.linkedin.com/in/annetraj/
Final Thoughts
Starting web development can feel challenging at first, but every small step contributes to growth. Just a few days ago, I had very little understanding of how websites were built. Today, I have created and deployed my own portfolio website and gained a strong foundation in HTML and CSS.
This is only the beginning of my journey. I am excited to continue learning, building projects, improving my skills, and sharing my progress along the way.
Thank you for reading my first blog. I hope it encourages other beginners to start building and learning one step at a time.
