Build an "About Taj Mahal" Webpage Using HTML & CSS | Beginner-Friendly Project



Introduction

When we begin our journey in web development, one of the best ways to learn is by building small, meaningful projects. Instead of only learning theory, we should apply our knowledge practically. In this article, we will build a complete "About Taj Mahal" webpage using HTML and CSS, which is perfect for beginners.

This project will help us understand how real-world webpages are structured and styled. By the end of this tutorial, we will have a clean, simple, and responsive webpage that showcases information about the Taj Mahal. 


Why We Should Build This Project

Before jumping into the code, let’s understand why this project is useful for us.

  • It helps us practice basic HTML structure
  • We learn how to apply CSS styling
  • We understand how to display images, text, lists, and tables
  • It improves our confidence by building a real-world mini project

If we are just starting with HTML and CSS, this project is a perfect hands-on exercise.


What We Will Learn

In this tutorial, we will learn:

  • How to structure a webpage using HTML elements
  • How to style content using CSS properties
  • How to add and align images properly
  • How to create lists and tables
  • How to design a clean and readable layout


Project Overview

In this project, we will create a simple webpage that includes:

  • A main heading (Title of the page)
  • An image of the Taj Mahal
  • A detailed introduction section
  • Key points about the Taj Mahal
  • A table with basic information
  • Clean and minimal styling using CSS

This structure will help us understand how most informational websites are built.


Complete Source Code

Let’s now move step-by-step and write the complete code.

HTML Code

We will first create the structure of our webpage using HTML.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Taj Mahal</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="container">
      <div class="subContainer">
        <div class="tajImage"><img src="./photo.jpeg" /></div>
        <h1>Taj Mahal</h1>
        <div>
          <h2>Introduction</h2>
          <p>
            The <b>Taj Mahal</b> is one of the most famous monuments in the
            world and a symbol of love. It is located in
            <b> Agra, Uttar Pradesh, India,</b> on the banks of the Yamuna
            River. This magnificent white marble monument was built by the
            Mughal emperor Shah Jahan in memory of his beloved wife Mumtaz
            Mahal.
          </p>
          <p>
            Construction of the Taj Mahal began in <b>1632 AD</b> and was
            completed in <b>1653 AD.</b> It took nearly 22 years and the efforts
            of around 20,000 artisans and craftsmen from India, Persia, and
            other regions. The monument was built as a <i>mausoleum</i> to house
            the tomb of Mumtaz Mahal, who died during childbirth.
          </p>
          <p>
            The Taj Mahal is often called the
            <b>“Monument of Eternal Love.” </b>Shah Jahan’s deep love for Mumtaz
            Mahal is reflected in the beauty and symmetry of the structure. Even
            today, it represents devotion, romance, and emotional bonding,
            attracting millions of visitors from across the world.
          </p>
        </div>
        <div>
          <h2>Key Points about the Taj Mahal</h2>
          <ul>
            <li>Located in <b>Agra, Uttar Pradesh</b></li>
            <li>Built by <b>Shah Jahan</b></li>
            <li>Dedicated to <b>Mumtaz Mahal</b></li>
            <li>Construction period: <b>1632 – 1653</b></li>
            <li>Made of <b>white marble</b></li>
          </ul>
        </div>
        <div>
          <h2>Basic Information about the Taj Mahal</h2>
          <table border="1" cellspacing="0" cellpadding="10" width="500px">
            <thead>
              <tr>
                <th>Feature</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>Monument Name</td>
                <td>Taj Mahal</td>
              </tr>
              <tr>
                <td>Location</td>
                <td>Agra, Uttar Pradesh, India</td>
              </tr>
              <tr>
                <td>Built By</td>
                <td>Shah Jahan</td>
              </tr>
              <tr>
                <td>Built For</td>
                <td>Mumtaz Mahal</td>
              </tr>
              <tr>
                <td>Construction Period</td>
                <td>1632 – 1653</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </body>
</html>

CSS Code

Now, we will style our webpage using CSS to make it visually appealing.

body {
  background-color: rgb(188, 246, 188);
}
.container {
  width: 60%;
  margin: auto;
}
.subContainer {
  background-color: #ffffff;
  border: 1px solid #d6cfc4;
  padding: 20px;
}
.tajImage {
  text-align: center;
}
.tajImage img {
  width: 250px;
  height: 250px;
}
p,
li,
td {
  color: #333333;
}
h1,
h3 {
  color: #4e342e;
}


Understanding the Code

Let’s quickly understand what we have done:

  • We used HTML to create the structure of the webpage
  • We used <div> elements to organize content into sections
  • We added an image using the <img> tag
  • We used <ul> and <li> for listing key points
  • We created a table using <table>, <tr>, <td>, and <th>
  • We applied CSS styling to improve layout, colors, and spacing

This is exactly how basic websites are designed in real-world scenarios.


Final Output

After combining the HTML and CSS code, we will get a clean and simple webpage that displays:

  • A centered image
  • Well-structured content
  • Styled headings and text
  • Organized list and table

This gives us a strong foundation in webpage design.





Try It Yourself

To improve our skills further, we can experiment with this project:

  • Change the background colors
  • Add more sections like History or Tourism
  • Use different fonts and styles
  • Make the page responsive using media queries

Practicing these changes will help us learn faster.


Conclusion

In this tutorial, we built a complete "About Taj Mahal" webpage using HTML and CSS. This project is simple, beginner-friendly, and very useful for practicing core web development concepts.

By working on small projects like this, we can gradually improve our skills and gain confidence. The more we practice, the better we become at designing and building real-world websites.


📚 Explore Full Series

Continue learning step by step from our complete roadmap click the link below:
👉 HTML & CSS Learning Series


What’s Coming Up Next?

In the next part of this series, we will build a Visiting Card Design using HTML and CSS. This project will help us understand layout design, alignment, and styling in more depth.

Stay tuned and keep practicing 🚀


Follow for More

If you’re interested in learning HTML, CSS, React, and MERN Stack,

stay connected for more beginner-friendly tutorials and real-world projects.
















Comments

Post a Comment

Popular posts from this blog

Complete HTML Layout Tutorial for Beginners (With Examples & Explanation)

Image
Introduction to HTML Layout If you are starting your web development journey, understanding the HTML layout structure is the first and most important step. Every website you see on the internet is built using HTML as its foundation, and learning how the layout works will help you build structured and professional web pages. HTML layout defines how content is arranged on a webpage. It helps developers organize text, images, links, and other elements in a meaningful way so that users can easily navigate and understand the content. In this tutorial, we will learn: What HTML is Basic HTML structure Explanation of each element Important meta tags What is HTML? HTML (Hyper Text Markup Language) is the standard language used to create web pages. It provides the basic structure of a website, which is then styled using CSS and made interactive using JavaScript. 🔹 HyperText HyperText refers to text that contains links. These links allow users to move from one webpage to another or nav...
Read more

HTML Tags and Attributes Explained (Beginner Guide with Form Examples)

Image
Introduction to HTML Tags and Attributes If you are starting your journey in web development, understanding HTML tags and attributes is the first and most important step. These are the core building blocks of every webpage, especially when creating forms like registration forms, login forms, and signup forms. Every website you see on the internet is made using HTML elements, and tags are used to define those elements. Attributes enhance those elements by providing additional functionality and information. Without understanding tags and attributes, it becomes difficult to build structured and interactive web pages. In this tutorial, we will learn: What HTML tags are What HTML attributes are Types of HTML tags Essential HTML tags used in forms What Is an HTML Tag? An HTML tag is a keyword enclosed in angle brackets ( < > ) used to define the structure and content of a webpage. Tags tell the browser how to display content such as headings, paragraphs, images, links, and mo...
Read more

Most Commonly Used HTML Tags (Beginner-Friendly Guide)

Image
HTML (HyperText Markup Language) is the foundation of every website we see on the internet. Whether we are building a simple webpage or a complex web application, HTML is the starting point that helps us structure content effectively. In this article, we will explore the most commonly used HTML tags, understand how they work, and learn the difference between block-level elements and inline elements. This guide is designed especially for beginners who want to build a strong foundation in web development. By learning these essential concepts, we can improve our coding skills, write cleaner and more organized code, and create well-structured, professional-looking web pages. It also helps us understand how browsers render content and how different elements behave in real-world projects. Why Should We Learn HTML Tags? Before diving into the types of elements, let’s understand why learning HTML tags is important. When we understand HTML properly: We can create well-structured web pages ...
Read more