Day 1 of my HTML Learning Series

When I started learning HTML, I initially practiced individual tags and small examples. But after learning different concepts, I wanted to understand one important thing:

Can I bring everything I learned together into one complete website?

So I created an HTML-only multi-page website.

No CSS.
No JavaScript.
Just HTML. 💻

This project helped me understand how HTML works when building something closer to a real website.

🏗️ Project Structure

My website contains different pages for different sections:

• Home
• Introduction
• About Me
• Education
• Skills
• Projects
• Media
• HTML Concepts
• Contact

I connected all these pages using HTML links.

For example:

<nav aria-label="Main navigation">
    <a href="index.html">Home</a>
    <a href="intro.html">Introduction</a>
    <a href="about.html">About Me</a>
    <a href="education.html">Education</a>
    <a href="skills.html">Skills</a>
    <a href="projects.html">Projects</a>
    <a href="media.html">Media</a>
    <a href="contact.html">Contact</a>
</nav>

This taught me that a website doesn't have to be a single HTML file. Multiple pages can be connected through hyperlinks.

🧱 Using Semantic HTML

One of the important things I practiced was semantic HTML.

Instead of putting everything inside <div> elements, I used elements that describe the meaning of the content:

<header>
    <h1>Welcome to My HTML Website</h1>

    <nav>
        ...
    </nav>
</header>

<main>
    <section>
        <h2>Hello!</h2>
        <p>My content goes here.</p>
    </section>

    <section>
        <h2>My Projects</h2>
        ...
    </section>
</main>

<footer>
    ...
</footer>

Some semantic elements I used are:

• <header>
• <nav>
• <main>
• <section>
• <article>
• <footer>
• <figure>
• <figcaption>
• <address>

These elements make the structure of a webpage easier to understand.

📝 <section> vs <article>

I also practiced the difference between <section> and <article>.

For example, on my projects page:

<article>
    <h2>Expense Tracker</h2>
    <p>A project idea for recording expenses and spending totals.</p>
</article>

<article>
    <h2>Library Management</h2>
    <p>A project focused on managing books and library records.</p>
</article>

Each project is treated as an individual piece of content, so <article> makes sense here.

🖼️ Images with Alternative Text

I added images using the <img> element:

<img src="assets/img.jpeg"
     alt="Durga Devi"
     width="220">

The alt attribute is important because it provides alternative text when an image cannot be displayed and also helps accessibility.

I also practiced <figure> and <figcaption>:

<figure>
    <img src="assets/img.jpeg"
         alt="Durga Devi"
         width="220">

    <figcaption>My learning journey with HTML</figcaption>
</figure>

🔗 Different Types of Links

My project also contains different kinds of links.

External link

<a href="https://www.google.com/" target="_blank">
    Google
</a>

Email link

<a href="mailto:abc@gmail.com">
    Email me
</a>

Internal page link

<a href="about.html">
    About Me
</a>

This helped me understand the difference between navigating inside a website and linking to another website.

📱 Basic Mobile-Friendly Setup

I included the viewport meta tag in my pages:

<meta name="viewport"
      content="width=device-width, initial-scale=1.0">

This is important for making the page's layout behave properly on different screen sizes.

🔍 Description Meta Tag

On my home page, I also used:

<meta name="description"
      content="Durga Devi's HTML-only personal website and HTML learning portfolio.">

This was my introduction to the idea that HTML isn't only about visible content. The <head> section also contains important information about a webpage.

🧠 What I Learned

Building this project helped me understand HTML more practically.

I learned:

• How multiple HTML pages work together
• How internal navigation works
• Why semantic elements are useful
• How images and links are added
• How to structure a webpage using meaningful elements
• The purpose of metadata
• The importance of alt text
• How HTML can create a complete website even without CSS or JavaScript

🚀 What's Next?

This project gave me a strong HTML foundation.

But the website currently looks very basic because I intentionally built it using HTML only.

My next step is to learn CSS and use it to improve:

• Layout
• Colors
• Typography
• Spacing
• Flexbox
• Grid
• Responsive design

This project was not just about writing HTML tags.

It was about understanding how those tags work together to create a website.

Day 1 complete. ✅

HTML #WebDevelopment #FrontendDevelopment #LearningInPublic #HTML5 #100DaysOfCode