📘 15 HTML Projects for Beginners
1. Personal Bio Page
Description: Create a simple webpage introducing yourself. Add a heading with your name, a
paragraph about you, line breaks, and a horizontal line.
Tags Covered: <h1>, <p>, <br>, <hr>
Result:
____________________________________________________________________________
2. Favorite Books/Movies List
Description: Make a page listing your favorite books (unordered list) and movies (ordered list).
Tags Covered: <ul>, <ol>, <li>
Result:
____________________________________________________________________________
3. Recipe Page
Description: Create a recipe page with a title, ingredients (unordered list), steps (ordered list),
and an image of the recipe.
Tags Covered: <h2>, <ul>, <ol>, <img>
Result
____________________________________________________________________________
4. Simple Portfolio Skeleton
Description: Build the structure of a portfolio using semantic HTML. Include a header,
navigation links, main content sections, and a footer.
Tags Covered: <header>, <nav>, <main>, <section>, <footer>
Result:
5. HTML Resume
Description: Create a resume page with your name, contact info, education (table), and skills
(list).
Tags Covered: <table>, <tr>, <th>, <td>, <strong>, <em>
Result:
6. Timetable Page
Description: Design a timetable for classes. Use table rows and columns, and experiment with
colspan and rowspan.
Tags Covered: <table>, <tr>, <th>, <td>, colspan, rowspan
Result:
7. Contact Form
Description: Create a Quick Assessment form
Tags Covered: <form>, <input>, <textarea>, <label>, <button>
Result:
8. Survey Form
Description: Build a survey form with radio buttons, checkboxes, and a dropdown menu. Group
them using fieldset and legend.
Tags Covered: <fieldset>, <legend>, <input type="radio">, <input
type="checkbox">, <select>, <option>
Result:
9. Blog Article Page
Description: Write a blog post with a title, paragraphs, a quote, a side note, and an image with
caption.
Tags Covered: <article>, <aside>, <blockquote>, <cite>, <figure>, <figcaption>
Result:
10. Music Playlist Page
Description: Create a playlist page where users can play songs using the <audio> tag.
Tags Covered: <audio>, <source>
Result:
11. Video Gallery Page
Description: Create a simple video gallery page with one or more videos using the <video>
tag and its attributes.
Tags Covered: <video>, <source>, controls, autoplay, loop, muted
Result:
12. Wikipedia Clone Page
Description: Create a simple Wikipedia-style page with headings, links, and a table of contents
with internal navigation.
Tags Covered: <a>, href, id, target="_blank", rel
Result:
13. HTML Newsletter Template
Description: Make a newsletter template using tables. Add a logo, headline, content, and a
call-to-action link.
Tags Covered: <table>, <tr>, <td>, <img>, <a>
Result:
14. Documentation Page
Description: Create a documentation/help page with code blocks, keyboard inputs, highlighted
text, and collapsible details.
Tags Covered: <pre>, <code>, <kbd>, <mark>, <details>, <summary>
Result:
15. Resume Webpage
Description:
Create a simple resume webpage for yourself with your details with sections like personal info,
education, skills, projects, and hobbies. This project helps to practice lists, text formatting, and
semantic structuring while making something practical.
Tags Covered:
<header>, <section>, <article>, <h1>–<h3>, <p>, <ul>, <ol>, <li>, <strong>, <em>
Result:
(A one-page resume with clearly divided sections for easy readability.)
