CodeWithDhanian

Posted on Sep 19

Mastering HTML in 30 Days Course: From Beginner to Professional

#webdev #html #programming #ai

Day 1: Introduction to HTML

What is HTML and its role in web development
Setting up your development environment
Structure of an HTML document (doctype, head, body)

Day 2: Headings and Paragraphs

Using headings (<h1> to <h6>)
Writing paragraphs (<p>)
Line breaks and horizontal rules

Day 3: Text Formatting Basics

Bold, italic, underline
Strong vs emphasis
Superscript, subscript, small text

Day 4: Quotes and Code Representation

Blockquote and inline quotes
Code snippets and preformatted text

Day 5: Hyperlinks

Creating links with <a>
Absolute vs relative links
Opening links in new tabs
Internal navigation with anchors

Day 6: Images

Adding images with <img>
Attributes: src, alt, width, height
Responsive images and accessibility

Day 7: Lists

Unordered lists (<ul>)
Ordered lists (<ol>)
Description lists (<dl>)
Nested lists

Day 8: Tables - Basics

Structure: <table>, <tr>, <td>, <th>
Table attributes: border, width
Simple data tables

Day 9: Tables - Advanced

Merging cells with colspan and rowspan
Semantic tables with captions
Accessibility considerations

Day 10: Forms - Introduction

Creating a form with <form>
Action and method attributes
Input fields: text, password, email

Day 11: Forms - User Inputs

Radio buttons, checkboxes, select dropdowns
Textarea for longer input
Buttons and submit controls

Day 12: Forms - HTML5 Features

Input types: date, number, color, range
Form validation with required and pattern
Placeholder and autofocus attributes

Day 13: Semantic HTML - Basics

Introduction to semantic elements
Header, footer, main, section, article
Why semantics matter for SEO and accessibility

Day 14: Semantic HTML - Advanced

Using <aside> and <nav>
Structuring a complete semantic page layout

Day 15: Multimedia - Audio

Embedding audio with <audio>
Attributes: controls, autoplay, loop
Supported file formats

Day 16: Multimedia - Video

Embedding video with <video>
Adding captions and subtitles
Responsive video techniques

Day 17: HTML5 Graphics - Canvas

Introduction to the <canvas> element
Drawing shapes with JavaScript
Simple applications

Day 18: HTML5 Graphics - SVG

Understanding SVG images
Creating basic shapes with SVG
Inline vs external SVG

Day 19: Embedding Content

Using iframes
Embedding maps, YouTube videos
Best practices and security considerations

Day 20: Metadata and Head Elements

Using <meta> for SEO and charset
Title, favicon, and viewport settings
Linking external resources

Day 21: Accessibility in HTML

Importance of accessible markup
Using alt text effectively
ARIA roles introduction

Day 22: Organizing HTML Projects

Folder structures for web projects
Linking stylesheets and scripts
Commenting and clean code practices

Day 23: HTML Validation

W3C validators
Common validation errors
Writing error-free HTML

Day 24: Building a Web Page Layout

Structuring with header, nav, main, aside, footer
Applying responsive principles with HTML structure

Day 25: Mini Project 1

Building a simple blog page using semantic HTML

Day 26: Mini Project 2

Creating a product listing page with images and descriptions

Day 27: Mini Project 3

Designing a feedback form with validation

Day 28: Advanced HTML5 Features

Introduction to local storage
Geolocation API basics
Offline capabilities overview

Day 29: Capstone Project - Portfolio Website

Structuring a multi-page website
Adding navigation, images, forms, and multimedia

Day 30: Final Review and Best Practices

Review of all major HTML concepts
Clean and semantic coding practices
Preparing for CSS integration and advanced web development

Day 1: Getting Started with HTML

What You’ll Learn Today

What HTML is and why it matters.
The basic structure of every HTML page.
How to create and run your very first HTML file.

Understanding HTML

If you strip every website down to its core, you’ll always find one thing: HTML.

HTML stands for HyperText Markup Language, and it’s the backbone of the web. Think of it as the skeleton of a webpage. It gives a website its structure—the headings, the paragraphs, the links, the images. Without HTML, a browser would have nothing to show you.

It’s not a programming language. Instead, it’s a markup language, which means it “marks up” text with tags that tell the browser how to display it. Later on, CSS will make it look beautiful, and JavaScript will make it interactive, but none of that can happen without a strong HTML foundation.

The Tools You Need

Starting with HTML is simple. You don’t need to install complicated software or servers. Just two things:

A text editor – where you’ll write your code. Popular options include:

Visual Studio Code (highly recommended).
Sublime Text.
Atom.
Even Notepad works for practice.

A web browser – where you’ll view the result of your code. Chrome, Firefox, Safari, or Edge will do the job.

That’s all you need to begin.

The Anatomy of an HTML Page

Every web page follows a standard structure. Here’s a basic example:

<!DOCTYPE html>
<html>
<head>
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is my very first HTML page.</p>
</body>
</html>

Let’s break it down:

<!DOCTYPE html> tells the browser, “This is an HTML5 document.”
<html> is the root tag—everything on the page lives inside it.
<head> contains background information about the page (like the title in the browser tab).
<title> sets the page’s title.
<body> is where the actual visible content goes. Headings, paragraphs, images, and more will live here.

Building Your First HTML File

Let’s make this real.

Open your text editor and create a new file.
Save it as index.html. (The .html ending is what makes the file recognizable as HTML.)
Copy the sample code above into your file.
Save it.
Open it in your browser by double-clicking on it.

Congratulations—you’ve just built your very first web page.

Try It Yourself

Let’s personalize your page.

Change the heading inside <h1> to your name.
Add another paragraph about yourself.

For example:

<h1>My name is Dhanian</h1>
<p>I am learning HTML to build my career as a web developer.</p>

Save the file and refresh your browser. You should now see your updated page.

Recap of Today

HTML is the building block of the web.
Every page follows a standard structure: doctype, html, head, and body.
You built your first HTML page and ran it in your browser.

That’s a solid first step. From here, things will only get more interesting.

Go Deeper with Notes

For those who want to study HTML in even greater detail, I’ve written a dedicated ebook:

Learn HTML the Right Way

This guide contains structured notes, clear explanations, and practical examples to help you build a rock-solid foundation in HTML. I recommend getting it and using it alongside this 30-day course—it will serve as your personal companion for mastering HTML.

Day 2: Headings and Paragraphs

What You’ll Learn Today

How to use headings in HTML.
How to write and structure paragraphs.
When to use line breaks and horizontal rules.

Headings in HTML

Headings are like the titles and subtitles of a web page. They help organize content, make it easier for readers to scan, and improve SEO (search engine optimization).

HTML provides six levels of headings:

<h1>This is a Heading 1</h1>
<h2>This is a Heading 2</h2>
<h3>This is a Heading 3</h3>
<h4>This is a Heading 4</h4>
<h5>This is a Heading 5</h5>
<h6>This is a Heading 6</h6>

Key Points:

<h1> is the most important heading, usually used once per page (like the main title).
<h2> to <h6> are used for subheadings.
Search engines use headings to understand the structure and importance of your content.

For example, in a blog post:

The blog title would be <h1>.
Each section heading might be <h2>.
Subtopics under a section could be <h3>.

Paragraphs in HTML

Paragraphs allow you to write blocks of text in a clean, structured way.

<p>This is my first paragraph in HTML.</p>
<p>This is my second paragraph. Paragraphs always start on a new line.</p>

Browsers automatically add spacing between paragraphs, making your text easier to read.

Line Breaks and Horizontal Rules

Sometimes, you don’t want a full paragraph break, just a quick new line. That’s where <br> comes in.

<p>This is line one.<br>This is line two.</p>

If you want to separate sections with a visual divider, you can use the <hr> tag (horizontal rule).

<p>Introduction section.</p>
<hr>
<p>Next section of the page.</p>

Try It Yourself

Let’s practice.

Create a heading with your name as <h1>.
Add a smaller subheading <h2> that says "About Me".
Write a short paragraph describing yourself.
Add another subheading <h2> for "Hobbies" and list a paragraph about what you enjoy doing.
Use <hr> to separate the sections.

Example Solution:

<h1>John Doe</h1>
<h2>About Me</h2>
<p>I am learning HTML to build professional websites. I enjoy exploring how the web works.</p>
<hr>
<h2>Hobbies</h2>
<p>In my free time, I like reading, coding, and playing football.</p>

Save your file, refresh the browser, and observe how the page is now organized and easier to follow.

Recap of Today

Headings (<h1> to <h6>) structure your content.
Paragraphs (<p>) make text readable and organized.
<br> adds a single line break, and <hr> adds a visual divider.

With just these tools, you can already start writing simple articles, blogs, or structured web pages.

Go Deeper with Notes

For a more detailed breakdown of HTML concepts with examples, exercises, and structured notes, I recommend my ebook:

Learn HTML the Right Way

It complements this course perfectly and provides additional explanations that reinforce what you’ve learned today.

Day 3: Text Formatting Basics

What You’ll Learn Today

How to emphasize text using HTML formatting tags.
The difference between visual styling and semantic meaning.
When to use inline formatting like bold, italic, and underline.

Why Text Formatting Matters

Not all text on a page is equal. Some words or phrases need to stand out to the reader. HTML provides a variety of tags that let you format text. But it’s not just about making text look different—it’s about giving meaning to that difference.

For example:

Bold text can highlight importance.
Italics can emphasize tone or style.
Small text can show disclaimers or fine print.

When done right, text formatting improves both readability and accessibility.

Bold and Strong Text

There are two main ways to make text bold:

<b>This text is bold.</b>
<strong>This text is important.</strong>

<b> is purely visual—it makes text bold without implying importance.
<strong> means the text is important. Screen readers emphasize it, which helps users with accessibility needs.

Best Practice: Use <strong> when the emphasis carries meaning, and <b> when it’s only about appearance.

Italic and Emphasis

Similar to bold, you can italicize text in two ways:

<i>This text is italic.</i>
<em>This text is emphasized.</em>

<i> is for stylistic offset (e.g., a book title).
<em> stands for emphasis—it changes tone and is read differently by screen readers.

Best Practice: Use <em> when the italics indicate importance in the sentence.

Underline and Small Text

You can also underline or reduce the size of text:

<u>This text is underlined.</u>
<small>This is smaller text, often used for disclaimers.</small>

Note: Underlines are often confused with links, so use them sparingly in modern web design.

Superscript and Subscript

For mathematical expressions, chemical formulas, or footnotes, HTML has two useful tags:

<p>Water is H<sub>2</sub>O.</p>
<p>The 2<sup>nd</sup> of May is my birthday.</p>

<sub> creates subscript text (below the line).
<sup> creates superscript text (above the line).

Try It Yourself

Create a short paragraph introducing yourself.
Make your name bold with <strong>.
Emphasize your passion for learning with <em>.
Add a small note about when you started coding using <small>.
Use <sup> or <sub> in a fun way (like writing H₂O or 10²).

Example Solution:

<p>My name is <strong>Anna</strong> and I am learning HTML. 
I <em>really enjoy</em> coding because it allows me to build creative things.</p>
<p><small>I started my coding journey in 2025.</small></p>
<p>Fun fact: Water is H<sub>2</sub>O and 10<sup>2</sup> equals 100.</p>

Recap of Today

Use <strong> and <em> when meaning matters.
Use <b> and <i> for visual styling without semantic value.
<u> underlines text, <small> reduces font size, and <sub>/<sup> help with scientific or mathematical notation.

With these formatting tools, you can now make your text richer and more expressive.

Go Deeper with Notes

If you’d like to explore HTML formatting in more detail, with additional examples and exercises, I recommend using my ebook:

Learn HTML the Right Way

It includes structured notes that go beyond these lessons and is an excellent companion to this 30-day course.

Day 4: Quotes and Code Representation

What You’ll Learn Today

How to add quotations in HTML.
The difference between inline and block quotes.
How to display code and preformatted text on a webpage.

Why Quotes and Code Matter

Websites are more than plain text. Sometimes you need to:

Display a quotation from an author, article, or source.
Show sample code without it being executed by the browser.
Maintain exact formatting for text such as poetry or command-line output.

HTML provides dedicated tags for these situations.

Inline Quotes with `<q>`

The <q> tag is used for short, inline quotations. Browsers usually add quotation marks automatically.

<p>Albert Einstein once said, <q>Imagination is more important than knowledge.</q></p>

This will display:
Albert Einstein once said, “Imagination is more important than knowledge.”

Block Quotes with `<blockquote>`

For longer quotes that need to stand apart from the rest of the text, use <blockquote>.

<blockquote>
  The only way to do great work is to love what you do.  
  – Steve Jobs
</blockquote>

By default, blockquotes are indented to visually separate them from the rest of the page.

Citations with `<cite>`

To reference the source of a quote, use the <cite> tag.

<p>Read more in <cite>The Art of War</cite> by Sun Tzu.</p>

This will render The Art of War in italics.

Representing Code with `<code>`

If you want to display programming code on your page, you can use the <code> tag.

<p>In HTML, the <code>&lt;p&gt;</code> tag is used to create paragraphs.</p>

Here, <code> tells the browser that the text is code, and special characters like < and > are written as < and > so the browser doesn’t confuse them with real HTML time

Preformatted Text with `<pre>`

If you want to keep line breaks, spacing, and indentation exactly as written, use <pre>.

<pre>
Name: John Doe
Age: 25
Occupation: Developer
</pre>

This is useful for things like poetry, ASCII art, or displaying structured data.

Combining `<pre>` and `<code>`

Often, you’ll see <pre> and <code> used together to show code snippets:

<pre><code>
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>
</code></pre>

This preserves formatting while making it clear that the content is code.

Try It Yourself

Add a short inline quote from a famous person using <q>.
Create a blockquote with a longer passage.
Use <cite> to reference the source of a quote.
Write a short piece of HTML code inside <code> so it doesn’t render but is displayed.
Use <pre> to display some formatted text, like a poem or structured data.

Example Solution:

<p>Mahatma Gandhi once said, <q>Be the change you wish to see in the world.</q></p>

<blockquote>
  Success is not final, failure is not fatal: It is the courage to continue that counts.
</blockquote>

<p><cite>Winston Churchill</cite></p>

<p>In HTML, the <code>&lt;h1&gt;</code> tag is used for the main heading.</p>

<pre>
Roses are red,
Violets are blue,
HTML is simple,
And fun to do.
</pre>

Recap of Today

Use <q> for short, inline quotes and <blockquote> for longer ones.
Add sources with <cite>.
Display code with <code> and preserve formatting with <pre>.
For coding examples, combine <pre> and <code>.

These tools allow you to present quotes, technical details, and formatted text in a clear and professional way.

Go Deeper with Notes

If you want structured notes, additional exercises, and deeper explanations of HTML, you can refer to my ebook:

Learn HTML the Right Way

It is designed as a companion to this course and will help you reinforce today’s lesson with extra examples and practice material.

Day 5: Hyperlinks

What You’ll Learn Today

How to create links using the <a> tag.
The difference between absolute and relative links.
How to create internal page navigation with anchors.
How to open links in new tabs.

Why Hyperlinks Matter

The “H” in HTML stands for Hypertext—text that links to other resources.
Without links, the web wouldn’t be the web. Hyperlinks connect pages together, making it possible to move from one page to another, whether within the same site or across the internet.

The HTML element for hyperlinks is <a>, which stands for anchor.

Creating a Basic Link

The simplest form of a link looks like this:

<a href="https://www.example.com">Visit Example</a>

<a> defines the link.
href is the attribute that specifies the destination (hypertext reference).
The text between the tags is what the user clicks on.

This will appear as:
Visit Example (clickable).

Absolute vs. Relative Links

Absolute Links These are full URLs that point to resources on the web.

<a href="https://www.wikipedia.org">Visit Wikipedia</a>

Relative Links These point to files in your own project.

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

If both index.html and about.html are in the same folder, this will work seamlessly.

Key Point:

Use absolute links when pointing to external websites.
Use relative links when linking within your own site.

Opening Links in a New Tab

Sometimes, you want a link to open in a new browser tab instead of replacing the current page. You can do this with the target="_blank" attribute.

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

Now, clicking this link will open Google in a new tab.

Internal Page Navigation with Anchors

You can also use links to jump to sections of the same page.

Give a section an id:

<h2 id="contact">Contact Me</h2>

Create a link pointing to that id:

<a href="#contact">Go to Contact Section</a>

Clicking the link will scroll directly to the section with that id.

Email and Phone Links

You can create links that open email or phone applications.

<a href="mailto:example@email.com">Send an Email</a>
<a href="tel:+1234567890">Call Me</a>

mailto: opens the user’s email app.
tel: opens the dialer on mobile devices.

Try It Yourself

Create a link to an external site (absolute link).
Create a link to another file in your project (relative link).
Make a link that opens in a new tab.
Add an anchor link that jumps to a section on the same page.
Create an email link.

Example Solution:

<a href="https://developer.mozilla.org" target="_blank">Learn Web Development</a>
<br>
<a href="about.html">About This Website</a>
<br>
<a href="#hobbies">Go to Hobbies</a>
<br>
<a href="mailto:john@example.com">Email Me</a>

<h2 id="hobbies">My Hobbies</h2>
<p>I enjoy reading, coding, and playing chess.</p>

Recap of Today

<a> is the anchor tag used for hyperlinks.
Use absolute links for external websites and relative links for files within your project.
target="_blank" opens links in a new tab.
Anchors (id + href="#id") allow internal page navigation.
You can create links for email and phone calls.

Hyperlinks turn static HTML into a connected, navigable experience—the very essence of the web.

Go Deeper with Notes

For more structured notes, examples, and additional exercises on links and navigation in HTML, refer to my ebook:

Learn HTML the Right Way

It provides deeper explanations and is an excellent companion to this 30-day course.

Day 6: Images

What You’ll Learn Today

How to add images to a web page using <img>.
The key attributes of images (src, alt, width, height).
Best practices for responsive and accessible images.
How to use images as links.

Why Images Matter

A website without images feels flat and lifeless. Images provide visual context, attract attention, and make content more engaging. But adding images is not just about making a page look good—it’s also about accessibility, performance, and user experience.

The `<img>` Tag

The HTML element for images is <img>. Unlike most tags, it doesn’t have a closing tag.

Basic Syntax:

<img src="image.jpg" alt="A description of the image">

src (source): The path to the image file.
alt (alternative text): Describes the image. Screen readers read this for visually impaired users, and browsers display it if the image can’t load.

Image Attributes

Width and Height You can specify the dimensions of an image:

<img src="cat.jpg" alt="A cute cat" width="300" height="200">

However, hardcoding sizes can distort images. It’s better to adjust size with CSS later for responsive design.

Alt Attribute The alt attribute is not optional. Always describe the image meaningfully.

Bad example:

<img src="logo.png" alt="image">

Better example:

<img src="logo.png" alt="Company logo">

This ensures accessibility and helps with SEO.

Absolute vs. Relative Paths for Images

Absolute Path: Points to an external image on the web.

<img src="https://example.com/picture.jpg" alt="Example Image">

Relative Path: Points to an image stored in your project folder.

<img src="images/photo.jpg" alt="My Photo">

Best Practice: Keep images inside an images/ folder in your project and use relative paths.

Images as Links

You can wrap an image inside an anchor <a> to make it clickable:

<a href="https://www.example.com">
  <img src="logo.png" alt="Example logo" width="150">
</a>

Clicking the logo will take the user to the website.

Responsive Images (Introduction)

Modern websites need to work across devices. To make an image scale properly, use the width="100%" or CSS.

<img src="landscape.jpg" alt="Beautiful landscape" style="max-width:100%; height:auto;">

This ensures the image adjusts to different screen sizes.

Try It Yourself

Add a local image to your project using a relative path.
Add an alt description for accessibility.
Create an image link that leads to another page.
Add a responsive image that adjusts to screen size.

Example Solution:

<h1>Welcome to My Portfolio</h1>
<img src="images/me.jpg" alt="Photo of John Doe" width="200">

<p>Check out my favorite website:</p>
<a href="https://developer.mozilla.org" target="_blank">
  <img src="images/logo.png" alt="MDN Logo" width="100">
</a>

<p>Here is a responsive photo:</p>
<img src="images/landscape.jpg" alt="Mountain view" style="max-width:100%; height:auto;">

Recap of Today

The <img> tag adds images using the src and alt attributes.
Always use descriptive alt text for accessibility and SEO.
Relative paths are best for project images; absolute paths link external images.
Images can also function as links.
Responsive images ensure your site looks good on all devices.

Images bring life to web pages, but how you use them can make the difference between a professional and an amateur site.

Go Deeper with Notes

For structured notes, examples, and more practice with images in HTML, refer to my ebook:

Learn HTML the Right Way

It includes detailed notes and exercises that complement today’s lesson.

Day 7: Lists

Concept

Lists are one of the most common ways to organize information on the web. They help break content into smaller, more readable chunks.
In HTML, there are three main types of lists:

Unordered lists (<ul>) – items are displayed with bullets.
Ordered lists (<ol>) – items are displayed with numbers or letters.
Description lists (<dl>) – items are displayed as terms with their definitions.

Syntax

Unordered List

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
</ul>

Ordered List

<ol>
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ol>

Description List

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
</dl>

Example

<h1>My Goals for Today</h1>

<h2>Tasks</h2>
<ul>
  <li>Finish homework</li>
  <li>Read a book</li>
  <li>Practice HTML</li>
</ul>

<h2>Steps to Practice Coding</h2>
<ol>
  <li>Open code editor</li>
  <li>Write some HTML</li>
  <li>Save and refresh browser</li>
</ol>

<h2>Important Terms</h2>
<dl>
  <dt>API</dt>
  <dd>A set of rules that allows software programs to communicate.</dd>
  <dt>Database</dt>
  <dd>An organized collection of data for easy access.</dd>
</dl>

Practice

Create a to-do list of at least five items using an unordered list.
Write down the steps for making tea using an ordered list.
Create a description list for three school subjects and explain what each one teaches.

Summary

<ul> creates an unordered list (bullets).
<ol> creates an ordered list (numbers or letters).
<dl> is a description list, with <dt> for the term and <dd> for the definition.
Lists improve readability and organization of content.

Additional Notes

To study lists in more detail, including advanced formatting and accessibility considerations, see my ebook:

Learn HTML the Right Way

It includes deeper explanations, notes, and practical exercises to strengthen your understanding.

Day 8: Tables – Basics

Concept

Tables allow you to present information in rows and columns, making data easier to read and compare. They’re especially useful for displaying schedules, statistics, price lists, or any structured data.

In HTML, tables are created using the <table> element, with rows defined by <tr> (table row), and cells defined by <td> (table data) or <th> (table header).

Syntax

Basic Table Structure

<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

<table>: Defines the table.
<tr>: Creates a row.
<th>: Creates a header cell (bold and centered by default).
<td>: Creates a standard data cell.

Example

<h1>Student Grades</h1>

<table border="1">
  <tr>
    <th>Name</th>
    <th>Subject</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>Math</td>
    <td>A</td>
  </tr>
  <tr>
    <td>James</td>
    <td>Science</td>
    <td>B+</td>
  </tr>
  <tr>
    <td>Maria</td>
    <td>English</td>
    <td>A-</td>
  </tr>
</table>

This creates a table with three rows of student data. The border="1" attribute is a simple way to add borders for visibility (though in modern practice, CSS is used for styling).

Practice

Create a table showing a weekly class timetable with at least 3 subjects and 3 days.
Create a price list table for three items in a shop, including item name, description, and price.
Experiment with adding <th> for the first row to make your table more readable.

Summary

<table> defines a table.
<tr> creates rows.
<th> defines header cells (important for labeling).
<td> defines standard data cells.
Tables are ideal for structured, tabular data but should be used meaningfully (not for page layout).

Additional Notes

For more practice and deeper coverage of HTML tables, including accessibility tips and advanced table structures, check out my ebook:

Learn HTML the Right Way

It contains extended examples and exercises to help you master HTML tables.

Day 9: Tables – Advanced

Concept

In the previous lesson, you learned how to create simple tables using rows (<tr>), headers (<th>), and data cells (<td>).

Today, we’ll push further by exploring:

How to merge cells with colspan and rowspan.
How to add a caption for context.
How to structure large tables for accessibility and clarity.
Best practices for when (and when not) to use tables.

By the end of this lesson, you’ll be able to design professional, structured tables suitable for real-world projects.

Merging Cells with Colspan and Rowspan

Colspan (Column Span) This allows a cell to stretch across multiple columns.

<table border="1">
  <tr>
    <th colspan="2">Monthly Expenses</th>
  </tr>
  <tr>
    <td>Rent</td>
    <td>$800</td>
  </tr>
  <tr>
    <td>Utilities</td>
    <td>$150</td>
  </tr>
</table>

Here, the header cell spans two columns.

Rowspan (Row Span) This allows a cell to stretch across multiple rows.

<table border="1">
  <tr>
    <th rowspan="2">Subject</th>
    <th>Student</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>A</td>
  </tr>
</table>

Here, the “Subject” header covers two rows.

Adding Captions

The <caption> tag gives a table a descriptive title. It always appears directly after the <table> tag.

<table border="1">
  <caption>Employee Information</caption>
  <tr>
    <th>Name</th>
    <th>Position</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Manager</td>
  </tr>
</table>

Captions are especially important for accessibility, as they help users understand the purpose of a table.

Structuring Tables for Accessibility

To make larger tables easier to read and more accessible, HTML provides semantic grouping elements:

<thead> – groups the header rows.
<tbody> – groups the main body rows.
<tfoot> – groups the footer rows (totals or summaries).

<table border="1">
  <caption>Sales Report</caption>
  <thead>
    <tr>
      <th>Product</th>
      <th>Q1</th>
      <th>Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptops</td>
      <td>120</td>
      <td>150</td>
    </tr>
    <tr>
      <td>Phones</td>
      <td>200</td>
      <td>250</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>320</td>
      <td>400</td>
    </tr>
  </tfoot>
</table>

This makes the table more structured, improves readability, and provides additional context for screen readers.

Best Practices for Tables

Use tables only for tabular data, not for page layout (CSS handles layout).
Always include headers (<th>) where applicable, so users can understand the data.
Provide an alt description or <caption> for accessibility.
Use scope="col" or scope="row" inside <th> to explicitly declare header relationships:

<th scope="col">Name</th>
<th scope="row">Math</th>

Practice

Create a table for a weekly class schedule, merging cells where subjects cover multiple periods (use colspan/rowspan).
Build a sales table with <thead>, <tbody>, and <tfoot>, including totals at the bottom.
Add a caption to each table to describe its purpose.

Summary

Colspan merges cells across columns, and rowspan merges cells across rows.
Captions describe the table’s purpose.
Thead, tbody, and tfoot make large tables structured and accessible.
Always design tables with accessibility in mind, ensuring screen readers and users can interpret them correctly.

With these advanced tools, your tables will go beyond basic grids and become well-structured, professional data presentations.

Additional Notes

For more advanced table designs, accessibility guidelines, and detailed examples, see my ebook:

Learn HTML the Right Way

It expands on today’s lesson with complex examples and practical exercises.

Day 10: Forms – Introduction

Concept

So far, you’ve learned how to display content on a web page. But websites are not just about showing information—they’re about interaction.

Forms are the backbone of interaction. They allow users to:

Sign up for an account.
Log in to a website.
Search for information.
Fill out surveys.
Place online orders.

Every form you’ve ever seen online—whether it’s a login box or a checkout page—is built on HTML forms.

Basic Structure of a Form

A form is created with the <form> element. Inside it, you place input fields, checkboxes, buttons, and more.

Example:

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <br><br>

  <input type="submit" value="Submit">
</form>

Key Attributes of Forms

action Defines where the form data should be sent when submitted.

<form action="/submit">

This could point to a server file, like process.php, or an external URL.

method Specifies how data is sent:

get: Appends data to the URL (useful for search forms).
post: Sends data securely in the background (used for logins, registrations, payments).

<form action="/submit" method="post">

Input Fields

The <input> element is the most common form element. It changes its behavior based on the type attribute.

Some common types:

text: Single-line text input.
email: Email address input.
password: Hides the text as you type.
submit: Creates a submit button.

Example:

<input type="text" placeholder="Enter your name">
<input type="password" placeholder="Enter your password">
<input type="submit" value="Login">

Labels

Labels improve usability and accessibility. Clicking on a label focuses the input it is linked to.

<label for="username">Username:</label>
<input type="text" id="username" name="username">

Here, the for attribute of <label> matches the id of the input.

Example in Practice

<h1>Contact Form</h1>

<form action="/submit" method="post">
  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname" placeholder="Your name">

  <br><br>

  <label for="email">Email Address:</label>
  <input type="email" id="email" name="email" placeholder="your@email.com">

  <br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <br><br>

  <input type="submit" value="Register">
</form>

Practice

Build a simple login form with two inputs: username and password, plus a submit button.
Create a search form with one input field and a submit button. Use method="get".
Add labels to all inputs to ensure accessibility.

Summary

Forms collect user input.
The <form> element requires an action and a method.
Input fields vary by type (text, email, password, submit).
Labels improve accessibility and user experience.

This is just the foundation. In the next lessons, we’ll add more types of inputs, checkboxes, radio buttons, dropdowns, and advanced features.

Additional Notes

For structured notes and extended examples of form creation in HTML, see my ebook:

Learn HTML the Right Way

It expands on today’s lesson and provides more practice exercises.

Day 11: Forms – User Inputs

Concept

Forms become powerful when they go beyond simple text fields. To collect different types of information, HTML provides a variety of input elements:

Radio buttons for single-choice answers.
Checkboxes for multiple-choice answers.
Dropdown menus for compact selections.
Textareas for longer, multi-line responses.
Buttons for form actions.

These tools allow you to build surveys, registration forms, feedback forms, and more.

Radio Buttons

Radio buttons let users select one option only from a group.

<p>Choose your gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

Key point: Radio buttons that share the same name attribute are grouped together, so only one can be selected.

Checkboxes

Checkboxes let users select multiple options at once.

<p>Select your hobbies:</p>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">Reading</label>

<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">Sports</label>

<input type="checkbox" id="coding" name="hobby" value="coding">
<label for="coding">Coding</label>

Here, a user could check one, two, or all three hobbies.

Dropdown Menus (Select and Option)

Dropdowns save space and let users choose from a list.

<label for="country">Select your country:</label>
<select id="country" name="country">
  <option value="kenya">Kenya</option>
  <option value="usa">United States</option>
  <option value="uk">United Kingdom</option>
</select>

The <select> element creates the dropdown, and <option> defines the choices.

Textareas

For longer input like feedback, comments, or messages, use <textarea>.

<label for="message">Your message:</label>
<br>
<textarea id="message" name="message" rows="4" cols="40">
Write your message here...
</textarea>

Unlike <input type="text">, textareas allow multiple lines of text.

Buttons

In addition to <input type="submit">, you can use <button>.

<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>

submit sends form data.
reset clears all fields.

Example in Practice

<h1>Registration Form</h1>

<form action="/submit" method="post">

  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname">
  <br><br>

  <p>Gender:</p>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label>
  <br><br>

  <p>Hobbies:</p>
  <input type="checkbox" id="music" name="hobby" value="music">
  <label for="music">Music</label>
  <input type="checkbox" id="sports" name="hobby" value="sports">
  <label for="sports">Sports</label>
  <br><br>

  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="kenya">Kenya</option>
    <option value="india">India</option>
    <option value="canada">Canada</option>
  </select>
  <br><br>

  <label for="bio">Short Bio:</label>
  <br>
  <textarea id="bio" name="bio" rows="5" cols="40"></textarea>
  <br><br>

  <button type="submit">Register</button>
  <button type="reset">Clear</button>
</form>

Practice

Create a form that asks a user for their favorite programming language using radio buttons.
Add a section where users can select multiple skills using checkboxes.
Create a dropdown menu for choosing a subscription plan (Free, Standard, Premium).
Add a textarea for feedback.

Summary

Use radio buttons for single-choice input.
Use checkboxes for multiple-choice input.
Use select/option for dropdown lists.
Use textarea for longer text.
Use button or input type="submit" for actions.

These elements make forms dynamic and interactive, letting you gather meaningful information from users.

Additional Notes

For deeper coverage of form inputs, accessibility tips, and structured practice exercises, check out my ebook:

Learn HTML the Right Way

It expands on today’s lesson with practical form-building examples.

Day 12: Forms – HTML5 Features

Concept

HTML5 introduced many new input types and attributes that improve how users interact with forms. These features help:

Collect data in specific formats (like email, number, date).
Provide built-in validation without extra JavaScript.
Enhance usability on mobile devices (like showing the right keyboard for input).

By using these input types correctly, you create forms that are more accessible, accurate, and efficient.

New Input Types in HTML5

Email Ensures the user enters a valid email format.

<label for="email">Email:</label>
<input type="email" id="email" name="email" required>

Typing an invalid email will trigger a browser error message.

Number Restricts input to numeric values.

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100">

The min and max attributes define acceptable ranges.

Date Provides a date picker in modern browsers.

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

This saves users from typing dates manually.

Color Opens a color picker tool.

<label for="favcolor">Favorite Color:</label>
<input type="color" id="favcolor" name="favcolor">

Range Lets users select a numeric value using a slider.

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

Useful Attributes

required Forces users to fill in the field before submitting.

<input type="text" name="username" required>

placeholder Shows sample text inside the field until the user types.

<input type="text" placeholder="Enter your name">

pattern Defines a custom format using regular expressions.

<input type="text" name="zipcode" pattern="[0-9]{5}" placeholder="12345">

This requires a 5-digit number.

autofocus Automatically places the cursor in a field when the page loads.

<input type="text" name="username" autofocus>

Example in Practice

<h1>Survey Form</h1>

<form action="/submit" method="post">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="you@example.com" required>
  <br><br>

  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="18" max="100" required>
  <br><br>

  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob">
  <br><br>

  <label for="favcolor">Favorite Color:</label>
  <input type="color" id="favcolor" name="favcolor">
  <br><br>

  <label for="volume">Set Volume:</label>
  <input type="range" id="volume" name="volume" min="0" max="10">
  <br><br>

  <input type="submit" value="Submit Survey">
</form>

Practice

Create a registration form that requires:

Email input with validation.
Age input (between 18 and 60).
Date of birth input.
1. Add a color picker for favorite theme color.
2. Add a slider (range) for selecting experience level (1–10).
3. Use required and placeholder to improve usability.

Summary

HTML5 provides new input types like email, number, date, color, and range.
Attributes like required, placeholder, pattern, and autofocus improve user experience.
These features reduce errors and make forms more intuitive—without extra coding.

Additional Notes

For a detailed explanation of all HTML5 input types and attributes, plus practice exercises, refer to my ebook:

Learn HTML the Right Way

It expands on this lesson with structured notes and real-world examples.

Day 13: Semantic HTML – Basics

Concept

HTML isn’t just about making things look right. It’s also about giving meaning to the content. That’s where semantic HTML comes in.

Semantic HTML uses tags that describe the role or meaning of the content inside them. For example:

<header> clearly identifies a page or section header.
<article> tells the browser (and search engines) that the content is a standalone piece, like a blog post.
<footer> signals the bottom section of a page.

This improves:

Accessibility (screen readers understand the structure better).
SEO (search engines prioritize well-structured content).
Maintainability (code is easier to read and organize).

Common Semantic Elements

<header> Represents introductory content or navigation for a page/section.

<header>
  <h1>My Website</h1>
  <nav>
    <a href="index.html">Home</a> |
    <a href="about.html">About</a> |
    <a href="contact.html">Contact</a>
  </nav>
</header>

<main> Represents the main content of the page (unique per page).

<main>
  <h2>Welcome to My Portfolio</h2>
  <p>This is where I showcase my projects and skills.</p>
</main>

<article> Represents an independent piece of content—like a blog post or news article.

<article>
  <h2>Learning HTML</h2>
  <p>HTML is the foundation of web development...</p>
</article>

<section> Groups related content under one theme.

<section>
  <h2>Services</h2>
  <p>We provide web development and design solutions.</p>
</section>

<footer> Represents the bottom area of a page/section, often with contact info or copyright.

<footer>
  <p>&copy; 2025 My Website. All rights reserved.</p>
</footer>

Example in Practice

<!DOCTYPE html>
<html>
<head>
  <title>My First Semantic Page</title>
</head>
<body>

<header>
  <h1>My Blog</h1>
  <nav>
    <a href="#">Home</a> |
    <a href="#">Articles</a> |
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <article>
    <h2>Why Learn HTML?</h2>
    <p>HTML is the backbone of the web. Understanding it is essential for any aspiring developer.</p>
  </article>

  <section>
    <h2>Resources</h2>
    <p>Check out tutorials, videos, and ebooks to strengthen your knowledge.</p>
  </section>
</main>

<footer>
  <p>Written by John Doe | &copy; 2025 All rights reserved.</p>
</footer>

</body>
</html>

Practice

Create a basic blog page layout with:

A header containing the site name.
A main section with one article.
A section listing at least two resources.
A footer with your name and copyright.

Compare the structure with non-semantic tags (<div> everywhere). Notice how much clearer the semantic version is.

Summary

Semantic HTML describes the meaning of content, not just its presentation.
Key elements: <header>, <main>, <article>, <section>, and <footer>.
Benefits include better accessibility, SEO, and more maintainable code.

Additional Notes

To study semantic HTML in greater depth—including best practices for SEO and accessibility—use my ebook:

Learn HTML the Right Way

It includes practical examples and exercises to reinforce today’s concepts.

Day 14: Semantic HTML – Advanced

Concept

In the previous lesson, we introduced semantic tags like <header>, <main>, <article>, <section>, and <footer>.

Today, we’ll expand that by looking at:

<nav> for navigation menus.
<aside> for side content.
How to structure a complete semantic page layout.

By the end of this lesson, you’ll be able to design professional, accessible, and SEO-friendly web layouts with semantic tags instead of using generic <div> everywhere.

The `<nav>` Element

<nav> is used for navigation links. It can contain menus, tables of contents, or any group of links that help users navigate a site.

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

Best Practice: Use <nav> for major navigation areas (header menus, sidebars), but not for every single set of links.

The `<aside>` Element

<aside> is used for content that is related to the main content but not essential to it. Examples:

A sidebar with ads.
Related blog posts.
Author info or quick facts.

<aside>
  <h3>Related Articles</h3>
  <ul>
    <li><a href="#">10 Tips for Learning HTML</a></li>
    <li><a href="#">Why Semantic HTML Matters</a></li>
  </ul>
</aside>

Structuring a Semantic Page Layout

Here’s how all the pieces fit together in a complete semantic structure:

<!DOCTYPE html>
<html>
<head>
  <title>Semantic Layout Example</title>
</head>
<body>

<header>
  <h1>My News Website</h1>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">World</a></li>
      <li><a href="#">Technology</a></li>
      <li><a href="#">Sports</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>Breaking News</h2>
    <p>HTML continues to be the foundation of the web. Developers worldwide use it to build websites and apps.</p>
  </article>

  <section>
    <h2>Latest Updates</h2>
    <p>Stay tuned for more updates on web technologies and development trends.</p>
  </section>
</main>

<aside>
  <h3>Sponsored</h3>
  <p>Learn web development with our premium courses.</p>
</aside>

<footer>
  <p>&copy; 2025 My News Website</p>
</footer>

</body>
</html>

This structure makes it easy for both humans and machines (like search engines) to understand your page.

Why Semantic Layouts Matter

Accessibility – Screen readers announce sections like “navigation” or “main content,” improving usability for visually impaired users.
SEO – Search engines give priority to structured, semantic content.
Maintainability – A developer reading your code will instantly know which part is the header, footer, or sidebar.

Practice

Build a semantic web page with:

A <header> that includes a <nav> with at least four links.
A <main> section with one <article> and one <section>.
An <aside> with related content.
A <footer> with your name and copyright.

Compare this with a page built only with <div>. Which one is easier to understand?

Summary

<nav> defines navigation areas.
<aside> holds related but non-essential content.
Combining <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> gives you a complete semantic layout.
Semantic HTML improves accessibility, SEO, and code readability.

Additional Notes

For extended guidance on semantic layouts and real-world examples, use my ebook:

Learn HTML the Right Way

It expands on today’s lesson with detailed notes and extra exercises.

Day 15: Multimedia – Audio

Concept

Web pages aren’t limited to text and images—they can also include multimedia content like audio and video.

HTML5 introduced the <audio> element, which allows you to:

Embed audio files directly into a webpage.
Provide controls for play, pause, and volume.
Autoplay or loop audio if needed (though autoplay is discouraged for user experience).

This makes it easy to add music, podcasts, sound effects, or voice notes to your site.

Basic Syntax

<audio src="song.mp3" controls></audio>

src points to the audio file.
controls adds play, pause, volume, and progress bar controls.

Supported Audio Formats

Different browsers support different audio formats. The most common are:

MP3 (.mp3) – widely supported.
Ogg (.ogg) – open-source, supported by most browsers.
WAV (.wav) – high quality, larger file size.

Providing Multiple Sources

To maximize compatibility, you can specify multiple sources:

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  <source src="song.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

The browser will pick the first format it supports.

Useful Attributes

controls – Displays audio player controls.
autoplay – Plays automatically when the page loads (not recommended for UX).
loop – Restarts automatically when finished.
muted – Starts the audio in muted mode.

Example:

<audio src="background.mp3" autoplay loop muted></audio>

Example in Practice

<h1>Podcast Episode</h1>

<p>Listen to our latest episode below:</p>

<audio controls>
  <source src="episode.mp3" type="audio/mpeg">
  <source src="episode.ogg" type="audio/ogg">
  Your browser does not support the audio element.
</audio>

Practice

Add an audio file to your webpage with play/pause controls.
Add another audio example that loops continuously.
Test the fallback message by deliberately writing a wrong src to see what the browser displays.

Summary

<audio> is used to embed audio into a webpage.
Always include the controls attribute so users can control playback.
Provide multiple sources for cross-browser compatibility.
Attributes like autoplay, loop, and muted enhance behavior but should be used thoughtfully.

Additional Notes

For structured notes and additional multimedia examples, check out my ebook:

Learn HTML the Right Way

It expands on audio and video handling in HTML with practical exercises.

Day 16: Multimedia – Video

Concept

Just like audio, HTML5 introduced a native way to embed videos directly into webpages using the <video> element.

Before HTML5, videos had to be embedded using plugins like Flash. Now, modern browsers support video playback without any extra software. This makes it easier to:

Add product demos.
Share tutorials.
Display promotional or educational videos.

Basic Syntax

<video src="movie.mp4" controls></video>

src specifies the video file.
controls adds playback controls (play, pause, volume, progress bar, full screen).

Supported Video Formats

Just like audio, different browsers prefer different formats. The most common are:

MP4 (.mp4) – widely supported across all browsers.
WebM (.webm) – open-source, supported by most modern browsers.
Ogg (.ogv) – open-source, supported by Firefox and Chrome.

Providing Multiple Sources

To ensure cross-browser compatibility, provide multiple sources inside the <video> tag:

<video controls width="600">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  <source src="movie.ogv" type="video/ogg">
  Your browser does not support the video element.
</video>

The browser will select the first format it supports.

Useful Attributes

controls – Displays default controls (recommended).
autoplay – Plays the video when the page loads (may require muted due to browser policies).
loop – Replays the video automatically.
muted – Starts playback without sound.
poster – Displays an image before the video starts.

Example:

<video width="500" controls poster="thumbnail.jpg">
  <source src="trailer.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

Example in Practice

<h1>Product Demo</h1>

<video width="640" height="360" controls>
  <source src="demo.mp4" type="video/mp4">
  <source src="demo.webm" type="video/webm">
  Your browser does not support HTML video.
</video>

Subtitles and Captions

Accessibility is critical. You can add captions with the <track> element:

<video controls>
  <source src="lecture.mp4" type="video/mp4">
  <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>

kind="subtitles" defines the track type.
.vtt is a WebVTT file containing subtitle text.

Practice

Embed a sample video in your page with controls.
Add a poster image that displays before the video is played.
Create a looping, muted background video.
Add a <track> element for captions if you can create a .vtt file.

Summary

<video> embeds video directly into a webpage.
Always provide multiple formats for browser compatibility.
Attributes like controls, poster, autoplay, loop, and muted enhance functionality.
Use <track> to add subtitles or captions for accessibility.

Additional Notes

For a deeper dive into working with video in HTML—including subtitles, accessibility, and performance tips—refer to my ebook:

Learn HTML the Right Way

It provides expanded notes and real-world examples to practice.

Day 17: HTML5 Graphics – Canvas

Concept

The <canvas> element in HTML5 is like a digital drawing board.
It allows you to:

Draw shapes.
Create graphs.
Build animations.
Even make small games.

However, <canvas> itself is just a container. To actually draw, you use JavaScript to control what appears on the canvas.

Basic Syntax

<canvas id="myCanvas" width="400" height="300" style="border:1px solid black;">
  Your browser does not support the canvas element.
</canvas>

id lets JavaScript access the canvas.
width and height set the drawing area size.
The text between <canvas>...</canvas> is fallback content for browsers that don’t support canvas.

Getting the Drawing Context

To draw, we need the context—the set of methods and properties that let us paint on the canvas.

<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
</script>

Here, "2d" means we’re working in 2D graphics mode (there’s also experimental "webgl" for 3D).

Drawing Shapes

Rectangle

<canvas id="rectCanvas" width="300" height="150" style="border:1px solid black;"></canvas>

<script>
  var c = document.getElementById("rectCanvas");
  var ctx = c.getContext("2d");

  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 150, 100);  // x, y, width, height
</script>

This draws a solid blue rectangle.

Line

<canvas id="lineCanvas" width="300" height="150" style="border:1px solid black;"></canvas>

<script>
  var c = document.getElementById("lineCanvas");
  var ctx = c.getContext("2d");

  ctx.moveTo(0, 0);      // Start point
  ctx.lineTo(200, 100);  // End point
  ctx.stroke();          // Draw the line
</script>

Circle (Arc)

<canvas id="circleCanvas" width="300" height="150" style="border:1px solid black;"></canvas>

<script>
  var c = document.getElementById("circleCanvas");
  var ctx = c.getContext("2d");

  ctx.beginPath();
  ctx.arc(100, 75, 50, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
  ctx.stroke();
</script>

Text on Canvas

<canvas id="textCanvas" width="300" height="150" style="border:1px solid black;"></canvas>

<script>
  var c = document.getElementById("textCanvas");
  var ctx = c.getContext("2d");

  ctx.font = "20px Arial";
  ctx.fillText("Hello Canvas", 50, 80);
</script>

fillText() draws filled text.
strokeText() draws outlined text.

Practice

Draw a rectangle in one color and a circle in another.
Create a canvas with a diagonal line.
Add text on a canvas saying “My First Canvas Drawing.”
Experiment with fillStyle to change colors.

Summary

<canvas> creates a drawing area in HTML.
JavaScript (with getContext("2d")) is required to draw.
You can create rectangles, lines, circles, and text.
Canvas is the foundation for animations, charts, and even games.

Additional Notes

For extended practice with canvas—such as creating charts, animations, and interactive graphics—refer to my ebook:

Learn HTML the Right Way

It includes step-by-step examples that go beyond today’s lesson.

Day 18: HTML5 Graphics – SVG

When you look at most images online—like .jpg or .png files—they’re made of pixels. These work fine for photos, but if you zoom in or resize them too much, they become blurry and pixelated.

SVG, short for Scalable Vector Graphics, is different. Instead of using pixels, it describes images with mathematical instructions—shapes, lines, curves, and colors. Because of this, SVG graphics always stay sharp and crisp, no matter how large or small the screen is.

Think of it this way:

A JPEG is like a painting—you can’t zoom in forever without losing detail.
An SVG is like a blueprint—you can scale it up to a building-sized poster, and it will still look perfect.

Why SVG is Useful

SVG is especially powerful for:

Logos and Icons – These need to look sharp on every device, from small phones to large monitors.
Charts and Diagrams – Perfect for displaying data that must remain clear.
Interactive Graphics – Because SVG elements are part of the webpage’s structure, you can style and animate them with CSS or JavaScript.

SVG vs Canvas

Although both <canvas> and SVG can display graphics, they work differently:

Canvas is like painting. Once you draw something, it becomes part of the picture. If you want to change it, you have to repaint it.
SVG is like arranging objects. Each shape remains independent, so you can move, style, or animate it without redrawing the whole scene.

If you’re building a game or something highly dynamic, Canvas is often better. If you’re building a diagram, a logo, or a responsive chart, SVG is usually the smarter choice.

How SVG Fits Into HTML

You can use SVG in two main ways:

Inline – You write the SVG code directly inside your HTML file.
External file – You link to an .svg file just like you would link to a .jpg or .png.

Both methods give you scalable, lightweight, and high-quality graphics.

Practice Ideas

Replace an image logo on your webpage with an SVG version. Notice how it stays sharp even when resized.
Try opening an .svg file in a text editor—you’ll see it’s made of XML code describing the shapes.
Use an SVG icon set in your project instead of PNG icons and compare how they look on different devices.

Takeaway

SVG graphics are resolution-independent, meaning they don’t blur when resized.
They’re ideal for logos, icons, charts, and illustrations.
Unlike Canvas, SVG graphics remain part of the DOM, so they’re easy to style, animate, and make interactive.

Additional Notes

If you’d like to go deeper into SVG—including how to style it with CSS, animate it, and use it for interactive projects—see my ebook:

Learn HTML the Right Way

It expands on today’s lesson with hands-on examples and projects.

Day 19: Embedding Content

Concept

Embedding allows you to bring in content from outside your webpage. Instead of recreating everything, you can pull in videos, maps, or even entire webpages. This is commonly done with the <iframe> element.

Use cases include:

Embedding YouTube or Vimeo videos.
Embedding Google Maps.
Embedding external tools or webpages.

The `<iframe>` Element

The inline frame (<iframe>) is the standard way to embed external content.

Basic syntax:

<iframe src="https://example.com" width="600" height="400"></iframe>

src specifies the URL of the embedded page.
width and height set the display area size.

Embedding a YouTube Video

Instead of hosting videos yourself, you can embed them from YouTube.

<h2>My Favorite Video</h2>

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

src uses YouTube’s embed link.
allowfullscreen lets users watch in full screen.

Embedding a Google Map

<h2>Find Us Here</h2>

<iframe 
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.8152865226767!2d36.82194631529529!3d-1.292065999059261!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x182f10d6b9b4d5af%3A0x6e3b35b3f63c9cb!2sNairobi%20City%2C%20Kenya!5e0!3m2!1sen!2ske!4v1633875153621!5m2!1sen!2ske" 
  width="600" 
  height="450" 
  style="border:0;" 
  allowfullscreen="" 
  loading="lazy">
</iframe>

This displays an interactive map of Nairobi, Kenya.

Embedding Another Webpage

<h2>Embedded Page</h2>

<iframe src="page.html" width="600" height="400"></iframe>

This displays another HTML file (page.html) inside the current page.

Best Practices

Always set width and height so content displays properly.
Use allowfullscreen for videos.
Be careful with too many iframes—they can slow down your website.
Check security—only embed trusted sources.

Practice for You

Embed a YouTube video of your choice.
Embed a Google Map of your hometown.
Create two simple HTML files and embed one inside the other using an iframe.

Takeaway

<iframe> is the main tool for embedding.
You can embed videos, maps, and even webpages.
Attributes like width, height, and allowfullscreen control appearance and functionality.

Additional Notes

For more advanced embedding techniques, including working with iframes, external services, and multimedia, refer to my ebook:

Learn HTML the Right Way

It expands on today’s lesson with detailed examples and projects.

Day 20: Metadata and Head Elements

The <head> section of an HTML document holds information that does not appear directly on the page but is critical for how the page is interpreted, displayed, and discovered. Getting these elements right ensures your web page is professional, responsive, and search-engine friendly.

1. Using `<meta>` for Charset and SEO

The <meta> tags supply metadata: character encoding, page descriptions, keywords, and other information that help browsers and search engines understand your page.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Character encoding -->
  <meta charset="UTF-8">

  <!-- Page description for search engines -->
  <meta name="description" content="Learn HTML metadata and head elements to improve SEO and usability.">

  <!-- Keywords for SEO -->
  <meta name="keywords" content="HTML, metadata, SEO, head elements, web development">

  <!-- Author of the document -->
  <meta name="author" content="Code With Dhanian">

  <!-- Viewport settings for mobile devices -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Metadata Example</title>
</head>
<body>
  <h1>Understanding Metadata in HTML</h1>
</body>
</html>

Key points in this example:

charset="UTF-8" ensures characters (such as special symbols and non-English text) display correctly.
description helps search engines show a summary of your page in results.
keywords provide thematic context (though their SEO power is limited today, still useful).
viewport is essential to make your page responsive on mobile devices.

2. Title, Favicon, and Viewport Settings

These elements contribute to the usability, branding, and mobile experience of your page.

Example:

<head>
  <title>My First Website</title>
  <link rel="icon" type="image/png" href="favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

The <title> tag sets what appears in the browser tab and search engine result titles.
<link rel="icon"> sets a small icon (favicon) for the browser tab.
Viewport meta ensures that the layout adapts to different screen sizes.

3. Linking External Resources

To apply styles and include fonts or scripts, you link external resources using <link> and <script>.

Example:

<head>
  <!-- External CSS -->
  <link rel="stylesheet" href="styles.css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

  <!-- External JavaScript (deferred) -->
  <script src="script.js" defer></script>
</head>

Best practices:

Include CSS links in the <head> so styles load early.
Use defer or place JavaScript before the closing </body> to avoid blocking rendering.

Practice Task

Create a file index.html that includes:

A <title> and a favicon.
Meta tags: description, author, charset, viewport.
An external CSS file that changes the background color of the page.

Open the page in different devices or resize your browser window to verify the viewport settings. Check that the favicon shows, title appears, and background style applies.

Additional Resource

To deepen your understanding of HTML-only topics, use the guide:

Learn HTML the Right Way

It provides comprehensive explanations, examples, and structured exercises specifically focused on HTML.

Day 21: Accessibility in HTML

Accessibility ensures that websites can be used by everyone, including people with disabilities. Writing accessible HTML not only improves usability but also aligns with web standards and often boosts SEO.

1. Importance of Accessible Markup

Semantic HTML is the foundation of accessibility. By using elements correctly (<header>, <nav>, <main>, <footer>), you help screen readers and assistive technologies understand the structure of your page.

For example:

<header>
  <h1>Welcome to My Website</h1>
  <nav>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
  </nav>
</header>
<main>
  <h2 id="about">About Us</h2>
  <p>We create accessible and user-friendly web applications.</p>
</main>
<footer>
  <p>Contact us at info@example.com</p>
</footer>

This structure makes navigation easier for assistive technologies.

2. Using Alt Text Effectively

The alt attribute on images provides a text alternative for users who cannot see the image.

<img src="team-photo.jpg" alt="Our team standing together in the office lobby">

Avoid vague descriptions like “image” or “photo.”
Be descriptive and convey the purpose of the image.
If the image is purely decorative, use alt="" to skip it.

3. Introduction to ARIA Roles

ARIA (Accessible Rich Internet Applications) roles provide additional meaning to elements when semantic HTML alone is not enough.

<div role="navigation">
  <a href="#home">Home</a>
  <a href="#services">Services</a>
  <a href="#contact">Contact</a>
</div>

While semantic HTML should always be the first choice, ARIA roles can fill in gaps when necessary.

Practice Task

Create a simple webpage with a header, navigation, main section, and footer using semantic HTML.
Add at least one image with meaningful alt text.
Experiment with adding an ARIA role to a <div> element to define its purpose.

Day 22: Organizing HTML Projects

As your projects grow, organizing files properly and maintaining clean code becomes essential. Good structure improves collaboration, scalability, and debugging.

1. Folder Structures for Web Projects

A common structure looks like this:

project-folder/
│── index.html
│── about.html
│── contact.html
│
├── css/
│   └── styles.css
│
├── js/
│   └── script.js
│
└── images/
    └── logo.png

Keep HTML files in the root directory.
Store CSS files in a css/ folder.
Store JavaScript files in a js/ folder.
Store images in an images/ folder.

2. Linking Stylesheets and Scripts

With organized folders, you must use relative paths correctly.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Organized Project</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <h1>Welcome to My Organized Project</h1>
  <script src="js/script.js"></script>
</body>
</html>

3. Commenting and Clean Code Practices

Comments help you and other developers understand code later.

<!-- Main header section -->
<header>
  <h1>My Portfolio</h1>
</header>

Best Practices:

Keep indentation consistent.
Use meaningful filenames.
Add comments to sections that may be unclear.
Avoid cluttering the <head> or <body> with unused code.

Practice Task

Set up a project with folders for CSS, JS, and images.
Link a stylesheet and a script file into your HTML.
Add comments explaining the purpose of each section of your HTML document.

Additional Resource

To continue mastering HTML in detail, get my ebook:

👉 Master HTML: The Complete Beginner to Advanced Guide

It provides structured explanations, real-world examples, and practice exercises designed to make you confident in writing professional HTML.

Day 23: HTML Validation

Validation is the process of ensuring that your HTML code follows web standards. Writing error-free HTML improves browser compatibility, accessibility, and SEO.

1. W3C Validators

The World Wide Web Consortium (W3C) provides free validators to check if your HTML is correct.

W3C Markup Validator: https://validator.w3.org
You can enter a URL, upload a file, or paste code to validate.

Example:
If your code is:

<!DOCTYPE html>
<html>
<head>
  <title>My Page</title>
</head>
<body>
  <h1>Welcome to my page
  <p>This is a paragraph.</p>
</body>
</html>

The validator will show an error because the <h1> tag is not properly closed.

2. Common Validation Errors

Unclosed tags: <h1>Title without </h1>
Improper nesting:

  <p><strong>Bold text</p></strong> <!-- Incorrect -->

Missing attributes: <img src="image.jpg"> without alt text.
Deprecated tags: <center>, <font>, etc.

3. Writing Error-Free HTML

Best Practices:

Always close your tags properly.
Nest elements in the correct order.
Use semantic HTML instead of deprecated tags.
Validate often during development, not just at the end.

Practice Task

Write a small HTML page with a heading, paragraph, and image.
Intentionally leave one tag unclosed.
Validate using W3C Validator.
Fix the errors until the code passes with no issues.

Day 24: Building a Web Page Layout

Now that you’ve learned about validation, let’s structure a proper page layout using semantic HTML elements.

1. Structuring with Header, Nav, Main, Aside, Footer

Modern web pages use semantic elements for clarity and accessibility.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Layout</title>
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>Welcome</h2>
      <p>This is the main content area.</p>
    </article>
    <aside>
      <h3>Related Links</h3>
      <ul>
        <li><a href="#">HTML Guide</a></li>
        <li><a href="#">CSS Basics</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
</body>
</html>

2. Applying Responsive Principles with HTML Structure

Even before adding CSS, HTML structure sets the foundation for responsiveness:

Use the <meta name="viewport"> tag for mobile scaling.
Organize content with semantic sections.
Avoid deeply nested non-semantic <div> elements.

Practice Task

Build a page with:

A header containing a logo and navigation.
A main section with an article and a sidebar (aside).
A footer with contact information.

Validate your HTML to ensure the structure is error-free.

Additional Resource

For deeper practice and structured explanations, get the ebook:

👉 Master HTML: The Complete Beginner to Advanced Guide

This guide covers validation, best practices, and how to structure real-world projects with professional HTML.

Day 25: Mini Project 1 — Building a Simple Blog Page Using Semantic HTML

By this stage, you have learned about semantic elements, metadata, and accessibility. Now let’s put it into practice by creating a basic blog page using only semantic HTML.

1. Structure of the Blog Page

We’ll include the following sections:

A header with the blog title and navigation.
A main section with blog posts (<article>).
An aside for extra information.
A footer with contact details.

2. Example Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Blog</title>
</head>
<body>
  <header>
    <h1>My Blog</h1>
    <nav>
      <a href="#home">Home</a>
      <a href="#about">About</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>First Blog Post</h2>
      <p>Published on <time datetime="2025-09-19">September 19, 2025</time></p>
      <p>This is the content of my very first blog post. Semantic HTML makes this content more meaningful and accessible.</p>
    </article>

    <article>
      <h2>Second Blog Post</h2>
      <p>Published on <time datetime="2025-09-18">September 18, 2025</time></p>
      <p>This is another blog post. Notice how we separate content using <code>&lt;article&gt;</code> tags.</p>
    </article>

    <aside>
      <h3>About the Author</h3>
      <p>I write about HTML, CSS, and building responsive websites.</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 My Blog | Contact: info@myblog.com</p>
  </footer>
</body>
</html>

3. Practice Task

Add a third blog post with a <time> element.
Include an <aside> with related links.
Validate your code with the W3C Validator.

Day 26: Mini Project 2 — Creating a Product Listing Page with Images and Descriptions

This project focuses on structuring content for an e-commerce or product showcase page.

1. Structure of the Product Listing Page

We’ll use:

A header with a title.
A main section with multiple products (<section> and <article>).
Each product will include an image, name, and description.
A footer with company information.

2. Example Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product Listing</title>
</head>
<body>
  <header>
    <h1>Our Products</h1>
  </header>

  <main>
    <section>
      <article>
        <img src="images/product1.jpg" alt="Red sports shoes">
        <h2>Red Sports Shoes</h2>
        <p>Comfortable and stylish shoes for running and casual wear.</p>
      </article>

      <article>
        <img src="images/product2.jpg" alt="Wireless headphones">
        <h2>Wireless Headphones</h2>
        <p>Noise-cancelling headphones with high-quality sound.</p>
      </article>

      <article>
        <img src="images/product3.jpg" alt="Smartwatch with black strap">
        <h2>Smartwatch</h2>
        <p>Track your fitness, monitor health, and stay connected.</p>
      </article>
    </section>
  </main>

  <footer>
    <p>&copy; 2025 My Store | Contact: support@mystore.com</p>
  </footer>
</body>
</html>

3. Practice Task

Add at least two more products with images and descriptions.
Ensure each image has a descriptive alt text.
Create a footer with links to “Privacy Policy” and “Terms of Service.”

Additional Resource

To continue building professional HTML projects with best practices, refer to my ebook:

👉 Master HTML: The Complete Beginner to Advanced Guide

It covers semantic structures, accessibility, and project-based learning to help you master HTML confidently.

Day 27: Mini Project 3 — Designing a Feedback Form with Validation

Forms are the backbone of interactivity on the web. In this mini project, you will design a feedback form using semantic HTML and add basic validation to ensure proper input.

1. Structure of the Feedback Form

The form will include:

Text inputs for name and email.
A textarea for feedback.
Radio buttons for satisfaction level.
A submit button.

2. Example Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Feedback Form</title>
</head>
<body>
  <h1>Feedback Form</h1>
  <form action="submit-feedback.php" method="post">

    <!-- Name -->
    <label for="name">Full Name:</label><br>
    <input type="text" id="name" name="name" required><br><br>

    <!-- Email -->
    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br><br>

    <!-- Feedback -->
    <label for="feedback">Your Feedback:</label><br>
    <textarea id="feedback" name="feedback" rows="5" required></textarea><br><br>

    <!-- Satisfaction -->
    <p>How satisfied are you?</p>
    <input type="radio" id="satisfied" name="satisfaction" value="satisfied" required>
    <label for="satisfied">Satisfied</label><br>

    <input type="radio" id="neutral" name="satisfaction" value="neutral">
    <label for="neutral">Neutral</label><br>

    <input type="radio" id="unsatisfied" name="satisfaction" value="unsatisfied">
    <label for="unsatisfied">Unsatisfied</label><br><br>

    <!-- Submit -->
    <button type="submit">Submit Feedback</button>
  </form>
</body>
</html>

Notes on validation:

required ensures fields cannot be left empty.
type="email" enforces proper email formatting.
Radio buttons enforce a single choice.

3. Practice Task

Add a dropdown (<select>) asking users how they heard about your website.
Add a checkbox for newsletter subscription.
Validate your form in the browser by submitting with empty fields.

Day 28: Advanced HTML5 Features

HTML5 introduced powerful APIs that go beyond structure, allowing web pages to interact with devices, store data locally, and even work offline.

1. Introduction to Local Storage

Local Storage allows you to store data in the browser persistently, even after refreshing.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Local Storage Example</title>
</head>
<body>
  <h1>Save Your Name</h1>
  <input type="text" id="username" placeholder="Enter your name">
  <button onclick="saveName()">Save</button>
  <p id="greeting"></p>

  <script>
    function saveName() {
      const name = document.getElementById('username').value;
      localStorage.setItem('user', name);
      document.getElementById('greeting').textContent = "Hello, " + name;
    }

    // Load saved name if available
    const storedName = localStorage.getItem('user');
    if (storedName) {
      document.getElementById('greeting').textContent = "Welcome back, " + storedName;
    }
  </script>
</body>
</html>

2. Geolocation API Basics

The Geolocation API lets you access the user’s location (with their permission).

<button onclick="getLocation()">Get My Location</button>
<p id="location"></p>

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(showPosition);
    } else {
      document.getElementById("location").textContent = "Geolocation not supported.";
    }
  }

  function showPosition(position) {
    document.getElementById("location").textContent =
      "Latitude: " + position.coords.latitude + 
      ", Longitude: " + position.coords.longitude;
  }
</script>

3. Offline Capabilities Overview

HTML5 introduced tools like Application Cache (deprecated) and Service Workers (modern approach) to enable offline browsing.

Local Storage saves user data.
Service Workers cache files so your site loads without internet.
Commonly used in Progressive Web Apps (PWAs).

Practice Task

Extend the local storage example to save and retrieve a favorite color.
Add a button to display user’s geolocation.
Research how Service Workers can cache assets for offline use.

Additional Resource

To dive deeper into HTML concepts, forms, and modern features, study my ebook:

👉 Master HTML: The Complete Beginner to Advanced Guide

It contains step-by-step tutorials, exercises, and project-based learning tailored to mastering HTML.

Day 29: Capstone Project — Portfolio Website

This is the final hands-on project in your HTML learning journey. You will build a personal portfolio website showcasing your skills, projects, and contact information. This project combines everything you’ve learned: semantic HTML, forms, images, multimedia, and navigation.

1. Project Overview

Your portfolio will include:

Home Page: An introduction with your name, headline, and photo.
About Page: A short bio and description of your skills.
Projects Page: A showcase of your work with project screenshots and links.
Contact Page: A feedback form with validation.

2. Structuring a Multi-Page Website

File Structure

portfolio/
│── index.html
│── about.html
│── projects.html
│── contact.html
│── images/
│   └── profile.jpg

This structure keeps your website clean and organized.

3. Navigation

Each page should include a navigation bar so users can move between pages easily.

<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="projects.html">Projects</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</nav>

4. Home Page (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Portfolio</title>
</head>
<body>
  <header>
    <h1>Hi, I’m Jane Doe</h1>
    <p>Aspiring Web Developer | HTML Learner</p>
  </header>

  <!-- Navigation -->
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>
  </nav>

  <!-- Hero Section -->
  <section>
    <img src="images/profile.jpg" alt="Profile Photo" width="200">
    <p>Welcome to my portfolio! Explore my work and get in touch.</p>
  </section>
</body>
</html>

5. About Page (about.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>About Me</title>
</head>
<body>
  <h1>About Me</h1>
  <p>Hello! My name is Jane Doe. I’m passionate about learning HTML and building beautiful websites.</p>
  <p>I specialize in semantic markup, accessibility, and clean coding practices.</p>
</body>
</html>

6. Projects Page (projects.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Projects</title>
</head>
<body>
  <h1>Projects</h1>
  <section>
    <article>
      <h2>Blog Page</h2>
      <img src="images/blog.png" alt="Blog Screenshot" width="300">
      <p>A simple blog layout built with semantic HTML.</p>
    </article>
    <article>
      <h2>Product Listing</h2>
      <img src="images/products.png" alt="Product Listing Screenshot" width="300">
      <p>A product page with images and descriptions.</p>
    </article>
  </section>
</body>
</html>

7. Contact Page (contact.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Me</title>
</head>
<body>
  <h1>Contact Me</h1>
  <form action="submit-form.php" method="post">
    <label for="name">Your Name:</label><br>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">Your Email:</label><br>
    <input type="email" id="email" name="email" required><br><br>

    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="5" required></textarea><br><br>

    <button type="submit">Send</button>
  </form>
</body>
</html>

8. Practice Extensions

Add a resume download link in the About page.
Embed a YouTube video introducing yourself.
Add a Google Maps embed to your Contact page.

Day 30: Final Review and Best Practices

This is the final day of your 30-day HTML journey. Here, we’ll recap everything, highlight best practices, and prepare for the next phase: CSS styling and beyond.

1. Review of Major HTML Concepts

Document Structure: <!DOCTYPE html>, <html>, <head>, <body>
Headings & Text: <h1>–<h6>, <p>, <span>, <strong>, <em>
Links & Navigation: <a>, <nav>, relative vs absolute paths
Lists: <ul>, <ol>, <li>
Images & Media: <img>, <audio>, <video>, <iframe>
Forms: <form>, <input>, <textarea>, <select>, validation attributes
Tables: <table>, <tr>, <td>, <th>, <caption>
Semantic Tags: <header>, <footer>, <article>, <section>, <aside>, <main>
HTML5 Features: Local Storage, Geolocation, Offline basics

2. Clean and Semantic Coding Practices

Always use semantic elements for meaning.
Add alt attributes to images for accessibility.
Use labels for form inputs to improve usability.
Keep your code indented and structured for readability.
Use relative paths for internal links and organize files into folders.
Validate your HTML using the W3C Validator.

3. Preparing for CSS Integration

HTML defines structure. CSS adds style. Before moving into CSS, ensure your HTML:

Is semantically correct.
Uses IDs and classes where styling hooks are needed.
Has a consistent layout with clear sectioning.

Example — adding a class for styling:

<section class="hero">
  <h1>Welcome to My Portfolio</h1>
  <p>This section will later have a styled background with CSS.</p>
</section>

4. Final Practice Task

Validate your portfolio website with the W3C Validator.
Add classes and IDs where you expect to apply CSS.
Plan a CSS theme (colors, typography, layout).

Next Step: Learn CSS

You’ve completed 30 days of HTML mastery. The natural next step is CSS, where you’ll transform your plain HTML into beautiful, styled, and responsive websites.

For deeper practice and structured learning, check out my ebook:

👉 Master HTML: The Complete Beginner to Advanced Guide

It includes step-by-step tutorials, projects, and exercises to reinforce your understanding.

Day 1: Introduction to HTML

Day 2: Headings and Paragraphs

Day 3: Text Formatting Basics

Day 4: Quotes and Code Representation

Day 5: Hyperlinks

Day 6: Images

Day 7: Lists

Day 8: Tables - Basics

Day 9: Tables - Advanced

Day 10: Forms - Introduction

Day 11: Forms - User Inputs

Day 12: Forms - HTML5 Features

Day 13: Semantic HTML - Basics

Day 14: Semantic HTML - Advanced

Day 15: Multimedia - Audio

Day 16: Multimedia - Video

Day 17: HTML5 Graphics - Canvas

Day 18: HTML5 Graphics - SVG

Day 19: Embedding Content

Day 20: Metadata and Head Elements

Day 21: Accessibility in HTML

Day 22: Organizing HTML Projects

Day 23: HTML Validation

Day 24: Building a Web Page Layout

Day 25: Mini Project 1

Day 26: Mini Project 2

Day 27: Mini Project 3

Day 28: Advanced HTML5 Features

Day 29: Capstone Project - Portfolio Website

Day 30: Final Review and Best Practices

Day 1: Getting Started with HTML

What You’ll Learn Today

Understanding HTML

The Tools You Need

The Anatomy of an HTML Page

Building Your First HTML File

Try It Yourself

Recap of Today

Go Deeper with Notes

Day 2: Headings and Paragraphs

What You’ll Learn Today

Headings in HTML

Paragraphs in HTML

Line Breaks and Horizontal Rules

Try It Yourself

Recap of Today

Go Deeper with Notes

Day 3: Text Formatting Basics

What You’ll Learn Today

Why Text Formatting Matters

Bold and Strong Text

Italic and Emphasis

Underline and Small Text

Superscript and Subscript

Try It Yourself

Recap of Today

Go Deeper with Notes

Day 4: Quotes and Code Representation

What You’ll Learn Today

Why Quotes and Code Matter

Inline Quotes with <q>

Block Quotes with <blockquote>

Citations with <cite>

Representing Code with <code>

Preformatted Text with <pre>

Combining <pre> and <code>

Try It Yourself

Recap of Today

Go Deeper with Notes

Day 5: Hyperlinks

What You’ll Learn Today

Why Hyperlinks Matter

Creating a Basic Link

Absolute vs. Relative Links

Opening Links in a New Tab

Internal Page Navigation with Anchors

Email and Phone Links

Try It Yourself

Recap of Today

Go Deeper with Notes

Inline Quotes with `<q>`

Block Quotes with `<blockquote>`

Citations with `<cite>`

Representing Code with `<code>`

Preformatted Text with `<pre>`

Combining `<pre>` and `<code>`

The `<img>` Tag