Learn HTML From Scratch - Interactive Simulator

⭐ Score: 0 / 0

👁️ Live Preview

🧠 Quick Quiz

Q1: Where does the visible content of a webpage go?

a) <head>

b) <body>

c) <html>

d) <title>

Q2: What does <!DOCTYPE html> do?

a) Tells the browser this is an HTML5 document

b) Creates a heading

c) Adds a paragraph

d) Makes text bold

` }, // LESSON 4: Headings & Paragraphs { id: 4, title: "Headings & Paragraphs", content: `

Lesson 4 of 15

Headings & Paragraphs

Master the most commonly used HTML elements for text content.

📰 HTML Headings (h1 to h6)

HTML has 6 levels of headings. <h1> is the most important (largest), and <h6> is the least important (smallest).

headings.html
<h1>Heading Level 1 - Main Title</h1>
<h2>Heading Level 2 - Section Title</h2>
<h3>Heading Level 3 - Sub Section</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6 - Smallest</h6>

💡 Best Practice: Use only ONE <h1> per page (for SEO). Use headings in order — don't skip from h1 to h4!

📝 Paragraphs & Line Breaks

The <p> tag creates paragraphs. Browsers add space before and after each paragraph automatically.

paragraphs.html
<p>This is the first paragraph. It can contain
lots of text on multiple lines, but the browser
will display it as one continuous block.</p>

<p>This is the second paragraph.</p>

<p>Line one.<br>Line two (forced line break).</p>

<hr>  <!-- Horizontal line separator -->

<p>Content after the line.</p>

⚠️ Note: Extra spaces and line breaks in your HTML code are ignored by the browser. Use <br> for line breaks and <p> for new paragraphs.

✍️ Practice Time!

Create a mini article with:

An h1 main title
An h2 subtitle
Two paragraphs
A horizontal rule (<hr>) between them

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Which heading is the smallest?

a) <h6>

b) <h1>

c) <h3>

d) <small>

Q2: What does <hr> do?

a) Creates a heading

b) Makes text bold

c) Creates a line break

d) Creates a horizontal line

` }, // LESSON 5: Text Formatting { id: 5, title: "Text Formatting", content: `

Lesson 5 of 15

Text Formatting

Learn how to make text bold, italic, underlined, and more!

✨ Formatting Tags

Tag	Effect	Use When
`<b>`	Bold	Visual bold
`<strong>`	Strong (Bold)	Important text (better for SEO)
`<i>`	Italic	Visual italic
`<em>`	Emphasized (Italic)	Stressed text (better for SEO)
`<u>`	Underline	Underlined text
`<s>`	~~Strikethrough~~	Deleted/incorrect text
`<mark>`	Highlighted	Highlighted text
`<small>`	Small text	Fine print
`<sub>`	H₂O	Subscript
`<sup>`	x²	Superscript

📝 Code Examples

formatting.html
<p>This is <b>bold</b> text.</p>
<p>This is <strong>important</strong> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>
<p>This is <mark>highlighted</mark> text.</p>
<p>Water: H<sub>2</sub>O | Power: x<sup>2</sup></p>

💡 strong vs b: Both look the same, but <strong> tells search engines "this is important", while <b> is just visual styling.

✍️ Practice Formatting!

Create text with at least 3 different formatting tags (bold, italic, and one more of your choice).

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Which tag is better for SEO to show important text?

a) <b>

b) <strong>

c) <i>

d) <u>

Q2: To write H₂O, which tag wraps the "2"?

a) <sup>

b) <small>

c) <sub>

d) <low>

` }, // LESSON 6: Links { id: 6, title: "Links (Anchor Tag)", content: `

Lesson 6 of 15

Links (Anchor Tag)

Links connect web pages together — they are the backbone of the web!

🔗 The Anchor Tag <a>

The <a> tag creates hyperlinks. The href attribute specifies where the link goes.

< aTag hrefAttribute = "https://google.com"Value (URL) > Click HereLink Text </a>

links.html
<!-- Basic Link -->
<a href="https://www.google.com">Visit Google</a>

<!-- Open in new tab -->
<a href="https://www.google.com" target="_blank">Open in New Tab</a>

<!-- Link to another page -->
<a href="about.html">About Us</a>

<!-- Link to email -->
<a href="mailto:hello@example.com">Email Us</a>

Attribute	Purpose	Example
`href`	URL destination	`href="https://..."`
`target="_blank"`	Opens in new tab	`target="_blank"`
`title`	Tooltip on hover	`title="Go to Google"`

✍️ Create Links!

Create two links: one to any website, and one that opens in a new tab.

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Which attribute specifies the URL in a link?

a) src

b) link

c) href

d) url

Q2: How do you open a link in a new tab?

a) target="_new"

b) target="_blank"

c) new="true"

d) open="new"

` }, // LESSON 7: Images { id: 7, title: "Images", content: `

Lesson 7 of 15

Images

Learn how to add images to your web pages!

🖼️ The Image Tag <img>

The <img> tag embeds images. It is a self-closing tag (no closing tag needed).

< imgTag srcSource = "photo.jpg"Image Path altAlt Text = "A photo"Description >

images.html
<!-- Basic image -->
<img src="photo.jpg" alt="A beautiful photo">

<!-- Image from the internet -->
<img src="https://picsum.photos/300/200" alt="Random image">

<!-- Image with width and height -->
<img src="photo.jpg" alt="Photo" width="300" height="200">

Attribute	Required?	Purpose
`src`	✅ Yes	Path/URL to the image
`alt`	✅ Yes	Text if image can't load + accessibility
`width`	Optional	Width in pixels
`height`	Optional	Height in pixels

⚠️ Always add alt text! It helps visually impaired users and shows text when images don't load.

✍️ Add an Image!

Add an image using a URL. Include the src and alt attributes.

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Which attribute specifies the image source?

a) src

b) href

c) link

d) source

Q2: Does the <img> tag need a closing tag?

a) Yes, always

b) Yes, but only sometimes

c) Only in HTML5

d) No, it's self-closing

` }, // LESSON 8: Lists { id: 8, title: "Lists (Ordered & Unordered)", content: `

Lesson 8 of 15

Lists (Ordered & Unordered)

Organize information using ordered and unordered lists!

📋 Two Types of Lists

Type	Tag	Marker	Use When
Unordered List	`<ul>`	• Bullets	Order doesn't matter
Ordered List	`<ol>`	1. Numbers	Order matters (steps)
List Item	`<li>`	—	Each item in a list

lists.html
<!-- Unordered List (bullets) -->
<h3>Shopping List:</h3>
<ul>
  <li>Milk</li>
  <li>Bread</li>
  <li>Eggs</li>
</ul>

<!-- Ordered List (numbers) -->
<h3>Recipe Steps:</h3>
<ol>
  <li>Preheat oven</li>
  <li>Mix ingredients</li>
  <li>Bake for 30 minutes</li>
</ol>

✍️ Create Both Types of Lists!

Create an unordered list (ul) AND an ordered list (ol), each with at least 3 items.

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Which tag creates a bullet-point list?

a) <ul>

b) <ol>

c) <list>

d) <bl>

` }, // LESSON 9: HTML Attributes { id: 9, title: "HTML Attributes", content: `

Lesson 9 of 15

HTML Attributes

Attributes provide extra information about HTML elements.

⚙️ What are Attributes?

Attributes are extra information added to HTML tags. They always go in the opening tag and come in name="value" pairs.

< tagElement attributeName = "value"Value >

attributes.html
<!-- id: unique identifier -->
<h1 id="main-title">Welcome</h1>

<!-- class: group similar elements -->
<p class="intro">Hello World</p>

<!-- style: inline CSS styling -->
<p style="color: red; font-size: 20px;">Red Text</p>

<!-- title: tooltip on hover -->
<p title="I am a tooltip">Hover over me!</p>

<!-- Multiple attributes -->
<a href="https://google.com" target="_blank" title="Go to Google">Google</a>

Attribute	Purpose	Used With
`id`	Unique identifier (used once per page)	Any tag
`class`	Group identifier (reusable)	Any tag
`style`	Inline CSS styles	Any tag
`title`	Tooltip text on hover	Any tag
`href`	Link destination	<a>
`src`	Source file path	<img>, <video>
`alt`	Alternative text	<img>

✍️ Use Attributes!

Create elements using style, id, and title attributes.

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Where do attributes go?

a) In the opening tag

b) In the closing tag

c) Between the tags

d) Outside the tags

` }, // LESSON 10: Tables { id: 10, title: "Tables", content: `

Lesson 10 of 15

HTML Tables

Display data in organized rows and columns.

📊 Table Tags

Tag	Purpose
`<table>`	Creates the table
`<tr>`	Table Row
`<th>`	Table Header cell (bold, centered)
`<td>`	Table Data cell (normal)

table.html
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>25</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>30</td>
    <td>London</td>
  </tr>
</table>

✍️ Build a Table!

Create a table with headers and at least 2 data rows.

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Which tag creates a table row?

a) <td>

b) <tr>

c) <th>

d) <row>

` }, // LESSON 11: Forms (Part 1) { id: 11, title: "Forms - Input Fields", content: `

Lesson 11 of 15

Forms - Input Fields

Forms allow users to enter data — login forms, search bars, and more!

📝 Form Basics

form.html
<form>
  <!-- Text input -->
  <label>Name:</label>
  <input type="text" placeholder="Enter your name">
  <br><br>

  <!-- Email input -->
  <label>Email:</label>
  <input type="email" placeholder="Enter email">
  <br><br>

  <!-- Password input -->
  <label>Password:</label>
  <input type="password">
  <br><br>

  <!-- Number input -->
  <label>Age:</label>
  <input type="number" min="1" max="120">
  <br><br>

  <!-- Submit button -->
  <input type="submit" value="Sign Up">
</form>

Input Type	Purpose
`text`	Single-line text
`email`	Email (validates format)
`password`	Hidden text (dots)
`number`	Numbers only
`date`	Date picker
`checkbox`	Checkboxes
`radio`	Radio buttons
`submit`	Submit button

✍️ Build a Form!

Create a registration form with name, email, password fields and a submit button.

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Which input type hides the characters typed?

a) type="hidden"

b) type="secret"

c) type="password"

d) type="private"

` }, // LESSON 12: Forms (Part 2) { id: 12, title: "Forms - Advanced Controls", content: `

Lesson 12 of 15

Forms - Advanced Controls

Checkboxes, radio buttons, dropdowns, and text areas!

🎛️ More Form Elements

advanced-form.html
<form>
  <!-- Radio Buttons (pick ONE) -->
  <p>Gender:</p>
  <input type="radio" name="gender"> Male
  <input type="radio" name="gender"> Female

  <!-- Checkboxes (pick MANY) -->
  <p>Hobbies:</p>
  <input type="checkbox"> Reading
  <input type="checkbox"> Coding
  <input type="checkbox"> Sports

  <!-- Dropdown -->
  <p>Country:</p>
  <select>
    <option>USA</option>
    <option>UK</option>
    <option>India</option>
  </select>

  <!-- Text Area -->
  <p>Message:</p>
  <textarea rows="4" cols="30"></textarea>

  <br><br>
  <button>Submit</button>
</form>

💡 Radio vs Checkbox: Radio buttons with the same name attribute allow only ONE selection. Checkboxes allow MULTIPLE selections.

✍️ Build a Survey Form!

Create a form with radio buttons, checkboxes, a dropdown, and a textarea.

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Which allows multiple selections?

a) Radio buttons

b) Checkboxes

c) Dropdown

d) Text input

` }, // LESSON 13: Div & Span { id: 13, title: "Div & Span (Containers)", content: `

Lesson 13 of 15

Div & Span (Containers)

Learn the two most important container elements in HTML!

📦 Div vs Span

Element	Type	Purpose	Behavior
`<div>`	Block	Group large sections	Takes full width, new line
`<span>`	Inline	Style small text parts	Stays in the same line

containers.html
<!-- DIV: Groups blocks of content -->
<div style="background: lightblue; padding: 20px;">
  <h2>Section Title</h2>
  <p>This is inside a div container.</p>
</div>

<!-- SPAN: Styles inline text -->
<p>My favorite color is <span style="color: red;">red</span>!</p>

✍️ Use Div & Span!

Create a styled div container and use span to color a word differently.

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Which element is a block-level container?

a) <div>

b) <span>

c) <a>

d) <b>

` }, // LESSON 14: Semantic HTML { id: 14, title: "Semantic HTML", content: `

Lesson 14 of 15

Semantic HTML

Use meaningful tags that describe their content!

🏛️ What is Semantic HTML?

Semantic means "relating to meaning." Semantic HTML uses tags that clearly describe their purpose.

Semantic Tag	Purpose	Replaces
`<nav>`	Navigation links	<div class="nav">
`<main>`	Main content	<div class="main">
`<section>`	A section of content	<div class="section">
`<article>`	Independent content	<div class="article">
`<aside>`	Side content	<div class="sidebar">
`<figure>`	Image with caption	<div class="image">
`<figcaption>`	Caption for figure	<p class="caption">

semantic.html
<nav>
  <a href="#">Home</a> | 
  <a href="#">About</a> | 
  <a href="#">Contact</a>
</nav>

<main>
  <article>
    <h2>My Blog Post</h2>
    <p>This is the article content...</p>
  </article>
  
  <aside>
    <h3>Related Links</h3>
    <p>Sidebar content here...</p>
  </aside>
</main>

💡 Why use semantic tags? Better SEO, better accessibility for screen readers, and cleaner/more readable code!

✍️ Use Semantic Tags!

Build a page structure using nav, main, article, and section tags.

📝 Code Editor

👁️ Live Preview

🧠 Quick Quiz

Q1: Which tag is used for navigation links?

a) <menu>

b) <links>

c) <nav>

d) <navigate>

` }, // LESSON 15: Final Project { id: 15, title: "🎓 Final Project", content: `

Lesson 15 of 15 — FINAL PROJECT

🎓 Build Your Own Webpage!

Put everything together! Build a complete webpage using everything you've learned.

🎯 Your Mission

Create a personal profile page that includes:

✅ Proper HTML structure (DOCTYPE, html, head, body)
✅ A page title
✅ Headings (h1, h2)
✅ Paragraphs with formatted text (bold, italic)
✅ An image
✅ A list (ordered or unordered)
✅ At least one link
✅ A simple form (contact form)
✅ Use of div containers
✅ Some inline styling

🚀 Your Final Project Editor

Build your masterpiece below! Use everything you've learned. The starter code gives you a template — customize it to make it your own!

📝 Final Project Editor

<!DOCTYPE html>
<html>
<head>
    <title>My Profile Page</title>
</head>
<body>
    <nav style="background: #333; padding: 10px;">
        <a href="#about" style="color: white;">About</a> | 
        <a href="#skills" style="color: white;">Skills</a> | 
        <a href="#contact" style="color: white;">Contact</a>
    </nav>

<main>
        <div style="text-align: center; padding: 30px;">
            <img src="https://picsum.photos/150/150" alt="My Photo" style="border-radius: 50%;" loading="lazy" decoding="async" >
            <h1>Your Name Here</h1>
            <p><em>Web Developer in Training</em></p>
        </div>

<section id="about" style="padding: 20px;">
            <h2>About Me</h2>
            <p>Hello! I am learning <strong>HTML</strong> and I love building websites!</p>
            <p>I started coding <mark>today</mark> and I'm already building pages.</p>
        </section>

<section id="skills" style="padding: 20px;">
            <h2>My Skills</h2>
            <ul>
                <li>HTML</li>
                <li>Learning CSS (next!)</li>
                <li>Problem Solving</li>
            </ul>

<h3>Learning Progress</h3>
            <table border="1" style="width: 100%;">
                <tr>
                    <th>Topic</th>
                    <th>Status</th>
                </tr>
                <tr>
                    <td>HTML Basics</td>
                    <td>✅ Complete</td>
                </tr>
                <tr>
                    <td>CSS</td>
                    <td>⏳ Next</td>
                </tr>
            </table>
        </section>

<section id="contact" style="padding: 20px;">
            <h2>Contact Me</h2>
            <form>
                <label>Name:</label><br>
                <input type="text" placeholder="Your name"><br><br>
                <label>Email:</label><br>
                <input type="email" placeholder="Your email"><br><br>
                <label>Message:</label><br>
                <textarea rows="4" cols="40">

Built with ❤️ while learning HTML

👁️ Live Preview

` } ]; // ===== STATE MANAGEMENT ===== let currentLesson = 0; let score = 0; let totalPossibleScore = 0; let completedLessons = new Set(); let answeredQuestions = new Set(); let completedExercises = new Set(); const defaultEditorValues = {}; // ===== INITIALIZE ===== function init() { // Count total possible score lessons.forEach(lesson => { const tempDiv = document.createElement('div'); tempDiv.innerHTML = lesson.content; totalPossibleScore += tempDiv.querySelectorAll('.quiz-question').length * 10; totalPossibleScore += tempDiv.querySelectorAll('.exercise-section').length * 15; }); document.getElementById('totalScore').textContent = totalPossibleScore; buildSidebar(); loadLesson(0); } function buildSidebar() { const list = document.getElementById('lessonList'); list.innerHTML = ''; lessons.forEach((lesson, index) => { const li = document.createElement('li'); li.className = 'lesson-item' + (index === currentLesson ? ' active' : '') + (completedLessons.has(index) ? ' completed' : ''); li.innerHTML = ` ${completedLessons.has(index) ? '✓' : index + 1} ${lesson.title} `; li.onclick = () => loadLesson(index); list.appendChild(li); }); } function loadLesson(index) { currentLesson = index; const container = document.getElementById('lessonContainer'); const lesson = lessons[index]; // Build nav buttons const navHTML = `

`; container.innerHTML = `

${lesson.content}${navHTML}

`; // Store default editor values container.querySelectorAll('.editor-textarea').forEach(editor => { defaultEditorValues[editor.id] = editor.value; }); // Setup quiz handlers setupQuizHandlers(); buildSidebar(); window.scrollTo(0, 0); } // ===== QUIZ SYSTEM ===== function setupQuizHandlers() { document.querySelectorAll('.quiz-question').forEach(question => { const correct = question.dataset.correct; const feedback = question.querySelector('.quiz-feedback'); const options = question.querySelectorAll('.quiz-option'); const qId = question.closest('.quiz-section').parentElement.querySelector('.lesson-number')?.textContent + '_' + question.querySelector('p').textContent; options.forEach(option => { option.addEventListener('click', () => { if (question.classList.contains('answered')) return; question.classList.add('answered'); const selected = option.dataset.value; options.forEach(opt => { opt.style.pointerEvents = 'none'; if (opt.dataset.value === correct) { opt.classList.add('correct'); } }); if (selected === correct) { option.classList.add('correct'); feedback.className = 'quiz-feedback show correct'; feedback.textContent = '✅ Correct! Well done!'; if (!answeredQuestions.has(qId)) { score += 10; answeredQuestions.add(qId); updateScore(); } } else { option.classList.add('wrong'); feedback.className = 'quiz-feedback show wrong'; feedback.textContent = '❌ Not quite. The correct answer is highlighted in green.'; answeredQuestions.add(qId); } }); }); }); } // ===== EDITOR SYSTEM ===== function runCode(editorId, previewId) { const code = document.getElementById(editorId).value; const preview = document.getElementById(previewId); preview.innerHTML = code; } function resetEditor(editorId) { const editor = document.getElementById(editorId); if (defaultEditorValues[editorId]) { editor.value = defaultEditorValues[editorId]; } } // ===== EXERCISE CHECKS ===== function showResult(id, success, message) { const result = document.getElementById(id); result.className = 'exercise-result show ' + (success ? 'success' : 'fail'); result.textContent = message; } function awardExercisePoints(exerciseId) { if (!completedExercises.has(exerciseId)) { score += 15; completedExercises.add(exerciseId); updateScore(); } } function checkExercise2() { const code = document.getElementById('editor2').value.toLowerCase(); if (code.includes('

') && code.includes('

')) { showResult('result2', true, '🎉 Excellent! You used h1 and p tags correctly!'); awardExercisePoints('ex2'); runCode('editor2', 'preview2'); } else { showResult('result2', false, '❌ Make sure you have both

...

and

...

tags.'); } } function checkExercise3() { const code = document.getElementById('editor3').value.toLowerCase(); if (code.includes('') && code.includes('') && code.includes('') && code.includes('') && code.includes('<body>') && code.includes('<h1>')) { showResult('result3', true, '🎉 Perfect HTML structure! You nailed it!'); awardExercisePoints('ex3'); runCode('editor3', 'preview3'); } else { showResult('result3', false, '❌ Make sure you have DOCTYPE, html, head, title, body, and h1 tags.'); } } function checkExercise4() { const code = document.getElementById('editor4').value.toLowerCase(); if (code.includes('<h1>') && code.includes('<h2>') && code.includes('<p>') && code.includes('<hr')) { showResult('result4', true, '🎉 Great article structure!'); awardExercisePoints('ex4'); runCode('editor4', 'preview4'); } else { showResult('result4', false, '❌ Include h1, h2, two p tags, and an hr tag.'); } } function checkExercise5() { const code = document.getElementById('editor5').value.toLowerCase(); let count = 0; const tags = ['<b>', '<strong>', '<i>', '<em>', '<u>', '<s>', '<mark>', '<sub>', '<sup>', '<small>']; tags.forEach(t => { if (code.includes(t)) count++; }); if (count >= 3) { showResult('result5', true, '🎉 Awesome! You used ' + count + ' formatting tags!'); awardExercisePoints('ex5'); runCode('editor5', 'preview5'); } else { showResult('result5', false, '❌ Use at least 3 different formatting tags.'); } } function checkExercise6() { const code = document.getElementById('editor6').value.toLowerCase(); if (code.includes('<a') && code.includes('href=') && code.includes('target="_blank"')) { showResult('result6', true, '🎉 Links created successfully!'); awardExercisePoints('ex6'); runCode('editor6', 'preview6'); } else { showResult('result6', false, '❌ Include at least one link with href and one with target="_blank".'); } } function checkExercise7() { const code = document.getElementById('editor7').value.toLowerCase(); if (code.includes('<img') && code.includes('src=') && code.includes('alt=')) { showResult('result7', true, '🎉 Image added with src and alt attributes!'); awardExercisePoints('ex7'); runCode('editor7', 'preview7'); } else { showResult('result7', false, '❌ Make sure your img tag has both src and alt attributes.'); } } function checkExercise8() { const code = document.getElementById('editor8').value.toLowerCase(); if (code.includes('<ul>') && code.includes('<ol>') && code.includes('<li>')) { showResult('result8', true, '🎉 Both list types created!'); awardExercisePoints('ex8'); runCode('editor8', 'preview8'); } else { showResult('result8', false, '❌ Include both <ul> and <ol> with <li> items.'); } } function checkExercise9() { const code = document.getElementById('editor9').value.toLowerCase(); if (code.includes('style=') && (code.includes('id=') || code.includes('class='))) { showResult('result9', true, '🎉 Attributes used correctly!'); awardExercisePoints('ex9'); runCode('editor9', 'preview9'); } else { showResult('result9', false, '❌ Use style and id/class attributes.'); } } function checkExercise10() { const code = document.getElementById('editor10').value.toLowerCase(); if (code.includes('<table') && code.includes('<tr>') && code.includes('<th>') && code.includes('<td>')) { showResult('result10', true, '🎉 Table created with headers and data!'); awardExercisePoints('ex10'); runCode('editor10', 'preview10'); } else { showResult('result10', false, '❌ Include table, tr, th, and td tags.'); } } function checkExercise11() { const code = document.getElementById('editor11').value.toLowerCase(); if (code.includes('<form') && code.includes('type="text"') && code.includes('type="email"') && code.includes('type="password"')) { showResult('result11', true, '🎉 Registration form built successfully!'); awardExercisePoints('ex11'); runCode('editor11', 'preview11'); } else { showResult('result11', false, '❌ Include a form with text, email, and password inputs.'); } } function checkExercise12() { const code = document.getElementById('editor12').value.toLowerCase(); if (code.includes('type="radio"') && code.includes('type="checkbox"') && code.includes('<select>') && code.includes('<textarea')) { showResult('result12', true, '🎉 Advanced form controls mastered!'); awardExercisePoints('ex12'); runCode('editor12', 'preview12'); } else { showResult('result12', false, '❌ Include radio, checkbox, select, and textarea elements.'); } } function checkExercise13() { const code = document.getElementById('editor13').value.toLowerCase(); if (code.includes('<div') && code.includes('<span')) { showResult('result13', true, '🎉 Div and Span used correctly!'); awardExercisePoints('ex13'); runCode('editor13', 'preview13'); } else { showResult('result13', false, '❌ Use both <div> and <span> elements.'); } } function checkExercise14() { const code = document.getElementById('editor14').value.toLowerCase(); if (code.includes('<nav>') && code.includes('<main>') && (code.includes('<section>') || code.includes('<article>'))) { showResult('result14', true, '🎉 Semantic HTML mastered!'); awardExercisePoints('ex14'); runCode('editor14', 'preview14'); } else { showResult('result14', false, '❌ Use nav, main, and section/article tags.'); } } function checkFinalProject() { const code = document.getElementById('editor15').value.toLowerCase(); let checklist = 0; const checks = ['<!doctype html>', '<html>', '<head>', '<title>', '<body>', '<h1>', '<p>', '<img', '<a ', '<ul>', '<form', '<div', 'style=']; checks.forEach(c => { if (code.includes(c)) checklist++; }); if (checklist >= 10) { showResult('result15', true, `🏆 AMAZING! Your final project passes ${checklist}/${checks.length} checks! You've completed the HTML course!`); awardExercisePoints('ex15'); completedLessons.add(currentLesson); runCode('editor15', 'preview15'); updateProgress(); // Show congrats modal setTimeout(() => { document.getElementById('finalScore').textContent = score + ' / ' + totalPossibleScore; document.getElementById('congratsModal').classList.add('show'); }, 1000); } else { showResult('result15', false, `❌ Your project passes ${checklist}/${checks.length} checks. Try to include more elements!`); runCode('editor15', 'preview15'); } } function closeModal() { document.getElementById('congratsModal').classList.remove('show'); } // ===== SCORE & PROGRESS ===== function updateScore() { document.getElementById('scoreValue').textContent = score; // Mark current lesson as completed if all quizzes answered completedLessons.add(currentLesson); updateProgress(); buildSidebar(); } function updateProgress() { const percent = Math.round((completedLessons.size / lessons.length) * 100); document.getElementById('progressFill').style.width = percent + '%'; document.getElementById('progressText').textContent = percent + '% Complete (' + completedLessons.size + '/' + lessons.length + ')'; } // Initialize on load init(); </script> <script type="text/javascript">var index, gemExcludeLazyElements = document.querySelectorAll('.portfolio.portfolio-style-metro picture,.portfolio.portfolio-style-metro img,.portfolio.portfolio-style-masonry picture,.portfolio.portfolio-style-masonry img,.product-gallery .owl-carousel img,.portfolio-slider picture,.portfolio-slider img,.gem-gallery img,.gem-gallery-grid.gallery-style-metro picture,.gem-gallery-grid.gallery-style-metro img,.gem-gallery-grid.gallery-style-masonry picture,.gem-gallery-grid.gallery-style-masonry img,.preloader + .gallery-preloader-wrapper picture,.preloader + .gallery-preloader-wrapper img,.blog.blog-style-masonry picture,.blog.blog-style-masonry img,.preloader + .portfolio-preloader-wrapper picture,.preloader + .portfolio-preloader-wrapper img');for (index = 0; index < gemExcludeLazyElements.length; index++) { gemExcludeLazyElements[index].removeAttribute('loading'); }</script></body> </html> </div> </div> </div> </div> </div> <div class="container"> </div> </div> <div class="container"> </div> </article> </div> </div> </div> </div> </div> <div id="lazy-loading-point"></div> </div> <script type='text/javascript'> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <script type='text/javascript'> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <link rel='stylesheet' id='wc-blocks-style-css' href='https://upskeeling.com/wp-content/plugins/woocommerce/assets/client/blocks/wc-blocks.css?ver=wc-9.5.4' type='text/css' media='all' /> <script type="text/javascript" src="https://upskeeling.com/wp-content/themes/thegem-elementor/js/thegem-form-elements.js?ver=5.10.0" id="thegem-form-elements-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-content/themes/thegem-elementor/js/jquery.easing.js?ver=5.10.0" id="jquery-easing-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-content/themes/thegem-elementor/js/thegem-custom-header.js?ver=5.10.0" id="thegem-custom-header-js"></script> <script type="text/javascript" id="thegem-scripts-js-extra"> /* <![CDATA[ */ var thegem_scripts_data = {"ajax_url":"https:\/\/upskeeling.com\/wp-admin\/admin-ajax.php","ajax_nonce":"2dc2e6e97e"}; /* ]]> */ </script> <script type="text/javascript" src="https://upskeeling.com/wp-content/themes/thegem-elementor/js/functions.js?ver=5.10.0" id="thegem-scripts-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-content/themes/thegem-elementor/js/fancyBox/jquery.mousewheel.pack.js?ver=5.10.0" id="jquery-mousewheel-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-content/themes/thegem-elementor/js/fancyBox/jquery.fancybox.min.js?ver=5.10.0" id="jquery-fancybox-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-content/themes/thegem-elementor/js/fancyBox/jquery.fancybox-init.js?ver=5.10.0" id="fancybox-init-script-js"></script> <script type="text/javascript" id="woocommerce-js-extra"> /* <![CDATA[ */ var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%"}; /* ]]> */ </script> <script type="text/javascript" src="https://upskeeling.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=9.5.4" id="woocommerce-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="googlesitekit-events-provider-woocommerce-js-before"> /* <![CDATA[ */ window._googlesitekit.wcdata = window._googlesitekit.wcdata || {}; window._googlesitekit.wcdata.products = []; window._googlesitekit.wcdata.add_to_cart = null; window._googlesitekit.wcdata.currency = "USD"; window._googlesitekit.wcdata.eventsToTrack = ["add_to_cart","purchase"]; /* ]]> */ </script> <script type="text/javascript" src="https://upskeeling.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-events-provider-woocommerce-a5f72561d6cdf416147d.js" id="googlesitekit-events-provider-woocommerce-js" defer></script> <script type="text/javascript" src="https://upskeeling.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.26.2" id="elementor-pro-webpack-runtime-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.25.10" id="elementor-webpack-runtime-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.25.10" id="elementor-frontend-modules-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="text/javascript" id="wp-i18n-js-after"> /* <![CDATA[ */ wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); /* ]]> */ </script> <script type="text/javascript" id="elementor-pro-frontend-js-before"> /* <![CDATA[ */ var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/upskeeling.com\/wp-admin\/admin-ajax.php","nonce":"d8200f6d50","urls":{"assets":"https:\/\/upskeeling.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/upskeeling.com\/wp-json\/"},"settings":{"lazy_load_background_images":true},"popup":{"hasPopUps":false},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"woocommerce":{"menu_cart":{"cart_page_url":"https:\/\/upskeeling.com","checkout_page_url":"https:\/\/upskeeling.com","fragments_nonce":"a1da7fde19"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/upskeeling.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; /* ]]> */ </script> <script type="text/javascript" src="https://upskeeling.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.26.2" id="elementor-pro-frontend-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js"></script> <script type="text/javascript" id="elementor-frontend-js-before"> /* <![CDATA[ */ var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselWrapperAriaLabel":"Carousel | Horizontal scrolling: Arrow Left & Right","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":false},"version":"3.25.10","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"container":true,"e_swiper_latest":true,"e_nested_atomic_repeaters":true,"e_onboarding":true,"e_css_smooth_scroll":true,"theme_builder_v2":true,"home_screen":true,"nested-elements":true,"editor_v2":true,"e_element_cache":true,"link-in-bio":true,"floating-buttons":true,"launchpad-checklist":true},"urls":{"assets":"https:\/\/upskeeling.com\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/upskeeling.com\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/upskeeling.com\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"e6614f0b75"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","woocommerce_notices_elements":[]},"post":{"id":34792,"title":"html%20%E2%80%93%20upskeeling","excerpt":"","featuredImage":false}}; /* ]]> */ </script> <script type="text/javascript" src="https://upskeeling.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.25.10" id="elementor-frontend-js"></script> <script type="text/javascript" src="https://upskeeling.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.26.2" id="pro-elements-handlers-js"></script> <script type="text/javascript"> var thegem_woo_buttons = document.querySelectorAll('.button'); for (index = 0; index < thegem_woo_buttons.length; index++) { if(thegem_woo_buttons[index].tagName.toLowerCase() !== 'p' && thegem_woo_buttons[index].tagName.toLowerCase() !== 'div' && !thegem_woo_buttons[index].closest('.portfolio-item') && !thegem_woo_buttons[index].closest('.thegem-te-loop-product-add-to-cart') && !thegem_woo_buttons[index].closest('.products') && !(thegem_woo_buttons[index].closest('.thegem-popup-notification')) && !(thegem_woo_buttons[index].closest('.woocommerce-MyAccount-content .woocommerce-info'))) { thegem_woo_buttons[index].classList.add('gem-button'); thegem_woo_buttons[index].classList.add('gem-wc-button'); } } </script> <script type="text/javascript">var index, gemExcludeLazyElements = document.querySelectorAll('.portfolio.portfolio-style-metro picture,.portfolio.portfolio-style-metro img,.portfolio.portfolio-style-masonry picture,.portfolio.portfolio-style-masonry img,.product-gallery .owl-carousel img,.portfolio-slider picture,.portfolio-slider img,.gem-gallery img,.gem-gallery-grid.gallery-style-metro picture,.gem-gallery-grid.gallery-style-metro img,.gem-gallery-grid.gallery-style-masonry picture,.gem-gallery-grid.gallery-style-masonry img,.preloader + .gallery-preloader-wrapper picture,.preloader + .gallery-preloader-wrapper img,.blog.blog-style-masonry picture,.blog.blog-style-masonry img,.preloader + .portfolio-preloader-wrapper picture,.preloader + .portfolio-preloader-wrapper img');for (index = 0; index < gemExcludeLazyElements.length; index++) { gemExcludeLazyElements[index].removeAttribute('loading'); }</script></body> </html>

html

Congratulations!

🧠 Quick Quiz

Headings & Paragraphs

📰 HTML Headings (h1 to h6)

📝 Paragraphs & Line Breaks

✍️ Practice Time!

🧠 Quick Quiz

Text Formatting

✨ Formatting Tags

📝 Code Examples

✍️ Practice Formatting!

🧠 Quick Quiz

Links (Anchor Tag)

🔗 The Anchor Tag <a>

✍️ Create Links!

🧠 Quick Quiz

Images

🖼️ The Image Tag <img>

✍️ Add an Image!

🧠 Quick Quiz

Lists (Ordered & Unordered)

📋 Two Types of Lists

✍️ Create Both Types of Lists!

🧠 Quick Quiz

HTML Attributes

⚙️ What are Attributes?

✍️ Use Attributes!

🧠 Quick Quiz

HTML Tables

📊 Table Tags

✍️ Build a Table!

🧠 Quick Quiz

Forms - Input Fields

📝 Form Basics

✍️ Build a Form!

🧠 Quick Quiz

Forms - Advanced Controls

🎛️ More Form Elements

✍️ Build a Survey Form!

🧠 Quick Quiz

Div & Span (Containers)

📦 Div vs Span

✍️ Use Div & Span!

🧠 Quick Quiz

Semantic HTML

🏛️ What is Semantic HTML?

✍️ Use Semantic Tags!

🧠 Quick Quiz

🎓 Build Your Own Webpage!

🎯 Your Mission

🚀 Your Final Project Editor

') && code.includes('

...