HTML Project - </> CoderMantra

Now it’s time to put the HTML you have learned into one small website. We won’t use CSS or JavaScript here. This Html project uses only the HTML concepts we have covered, so you can understand every part of the code.

We will create a simple personal website with:

A heading and introduction
Navigation links
An image
About section
Skills list
A small table
A contact form
Audio and video
A separate About page
Hyperlinks
Semantic HTML elements

Step 1: Create Your Project Folder

Create a folder called:

my-personal-website

Inside it, create this structure:

my-personal-website/
│
├── index.html
├── about.html
├── images/
│   └── profile.jpg
├── audio/
│   └── music.mp3
└── video/
    └── video.mp4

You can use your own image, audio, and video files.

Step 2: Create `index.html`

Copy and paste this complete code:

<!DOCTYPE html>
<html>

<head>
    <title>My Personal Website</title>
</head>

<body>

    <!-- Header -->
    <header>
        <h1>Hi, I'm Rahul!</h1>
        <p>Welcome to my personal website.</p>
    </header>

    <!-- Navigation -->
    <nav>
        <a href="#about">About Me</a>
        <a href="#skills">My Skills</a>
        <a href="#contact">Contact</a>
        <a href="about.html">More About Me</a>
    </nav>

    <main>

        <!-- About Section -->
        <section id="about">

            <h2>About Me</h2>

            <img src="images/profile.jpg"
                 alt="My profile picture"
                 width="250">

            <p>
                Hello! My name is Rahul.
                I am learning HTML and I enjoy creating websites.
            </p>

        </section>

        <!-- Skills Section -->
        <section id="skills">

            <h2>My Skills</h2>

            <ul>
                <li>HTML</li>
                <li>Drawing</li>
                <li>Photography</li>
                <li>Gaming</li>
            </ul>

        </section>

        <!-- Favorite Things -->
        <section>

            <h2>My Favorite Things</h2>

            <table border="1">

                <tr>
                    <th>Thing</th>
                    <th>Favorite</th>
                </tr>

                <tr>
                    <td>Sport</td>
                    <td>Cricket</td>
                </tr>

                <tr>
                    <td>Food</td>
                    <td>Pizza</td>
                </tr>

                <tr>
                    <td>Color</td>
                    <td>Blue</td>
                </tr>

            </table>

        </section>

        <!-- Audio -->
        <section>

            <h2>My Favorite Music</h2>

            <audio controls>
                <source src="audio/music.mp3" type="audio/mpeg">
            </audio>

        </section>

        <!-- Video -->
        <section>

            <h2>My Video</h2>

            <video width="400" controls>
                <source src="video/video.mp4" type="video/mp4">
            </video>

        </section>

        <!-- Contact Form -->
        <section id="contact">

            <h2>Contact Me</h2>

            <form>

                <label>Name:</label>
                <input
                    type="text"
                    placeholder="Enter your name"
                    required>

                <br><br>

                <label>Email:</label>
                <input
                    type="email"
                    placeholder="Enter your email"
                    required>

                <br><br>

                <label>Age:</label>
                <input
                    type="number"
                    min="10"
                    max="100">

                <br><br>

                <label>Favorite Subject:</label>

                <select>
                    <option selected>Computer</option>
                    <option>Science</option>
                    <option>Maths</option>
                    <option>English</option>
                </select>

                <br><br>

                <label>Message:</label>
                <br>

                <textarea
                    rows="5"
                    cols="30"
                    placeholder="Write your message">
                </textarea>

                <br><br>

                <input type="submit" value="Send Message">

            </form>

        </section>

    </main>

    <!-- Footer -->
    <footer>

        <p>© 2026 Rahul's Website</p>

        <a href="#about">Back to About</a>

    </footer>

</body>

</html>

Step 3: Create `about.html`

Now create another file called about.html.

Paste this code:

<!DOCTYPE html>
<html>

<head>
    <title>About Me</title>
</head>

<body>

    <header>

        <h1>More About Me</h1>

        <p>This page tells you a little more about me.</p>

    </header>

    <nav>

        <a href="index.html">Home</a>

    </nav>

    <main>

        <section>

            <h2>My Story</h2>

            <p>
                I started learning HTML because I wanted
                to understand how websites are created.
            </p>

            <p>
                Now I can create my own webpages using HTML.
            </p>

        </section>

        <section>

            <h2>My Goals</h2>

            <ol>
                <li>Learn CSS</li>
                <li>Learn JavaScript</li>
                <li>Create my own website</li>
            </ol>

        </section>

    </main>

    <footer>

        <p>Thanks for visiting my website!</p>

        <a href="index.html">Go Back Home</a>

    </footer>

</body>

</html>

Step 4: Open Your Website

Now open:

index.html

in your browser.

You should see something similar to:

Hi, I'm Rahul!
Welcome to my personal website.

About Me | My Skills | Contact | More About Me


About Me

[Profile Image]

Hello! My name is Rahul.
I am learning HTML and I enjoy creating websites.


My Skills

• HTML
• Drawing
• Photography
• Gaming


My Favorite Things

-------------------------
| Thing  | Favorite     |
-------------------------
| Sport  | Cricket      |
| Food   | Pizza        |
| Color  | Blue         |
-------------------------


My Favorite Music

[ Audio Player ]


My Video

[ Video Player ]


Contact Me

Name:    [ Enter your name ]

Email:   [ Enter your email ]

Age:     [     ]

Favorite Subject: [ Computer ▼ ]

Message:
[                         ]
[                         ]

[ Send Message ]


© 2026 Rahul's Website

Back to About

The page will look plain. That’s completely normal. You haven’t learned CSS yet, so HTML is mainly giving your website its structure and content.

What Did You Use in This Project?

You have already learned these concepts, and now you have used them together.

Page Structure

<!DOCTYPE html>
<html>
<head>
<body>

These create the basic structure of the HTML document.

Text

<h1>
<h2>
<p>

These add headings and paragraphs.

Links

<a href="...">

These connect different pages or sections.

Images

<img src="..." alt="...">

This adds an image to the page.

Lists

<ul>
<ol>
<li>

These create lists.

Tables

<table>
<tr>
<th>
<td>

These create the favorite-things table.

Forms

<form>
<input>
<select>
<option>
<textarea>

These collect information from the visitor.

Audio and Video

<audio>
<video>
<source>

These add media to the webpage.

Semantic HTML

<header>
<nav>
<main>
<section>
<footer>

These help organize the different parts of the webpage.

Attributes

You have also used attributes throughout the project:

href
src
alt
width
type
placeholder
required
min
max
id
controls

You don’t need to memorize everything right now. The important thing is that you can look at the code and understand what each part is doing.

Your Turn: Make It Yours

Don’t just keep Rahul’s information. Change the website to make it your own.

Try changing:

<h1>Hi, I'm Rahul!</h1>

to your own name.

Change the paragraph.

Add your own hobbies.

Change the favorite food, sport, and color.

Replace profile.jpg with your own image.

Add your own audio and video files.

Change the form options.

The more you change and test, the more comfortable you will become with HTML.

Quick Recap

You can combine different HTML elements to build a complete webpage.
HTML gives your website its structure and content.
File paths connect your HTML pages and media files.
Links connect pages and different parts of a webpage.
Forms allow users to enter information.
Practice by changing the project and creating your own version.

Frequently Asked Questions (FAQs)

Q1. What is this HTML Project?

An HTML Project is a small website created using HTML concepts such as headings, links, images, lists, tables, forms, and semantic elements.

Q2. How can I create a personal website using HTML?

You can create a personal website using HTML by adding your introduction, image, skills, favorite things, contact form, links, and other content.

Q3. What HTML concepts are used in this project?

This HTML Project uses headings, paragraphs, hyperlinks, images, lists, tables, forms, audio, video, attributes, and semantic HTML elements.

Q4. Is this HTML Project suitable for beginners?

Yes, this HTML Project is designed for beginners and combines the basic HTML concepts learned throughout the tutorial.

Q5. Do I need CSS or JavaScript for this HTML Project?

No, this HTML Project uses only HTML, so you can understand the website structure before learning CSS and JavaScript.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Nidhi Srivastav