Web Development Resources
HTML & CSS Resources
- MDN Web Docs
- W3Schools
- CSS-Tricks
JavaScript Resources
- JavaScript.info
- FreeCodeCamp
- Eloquent JavaScript
Learning Progress
Time Commitment
I study web development for every day.
Next milestone:
Lesson 19: Other HTML Elements
Explore HTML details, progress bars, meters, iframes, time elements, and more
Start LearningDetails and Summary Elements
The <details> and <summary> elements create interactive widgets that users can expand or collapse.
Key Insight: These elements are perfect for FAQs, additional information, or collapsible sections without JavaScript.
Basic Usage
<details>
<summary>What is HTML?</summary>
<div>
<p>HTML (HyperText Markup Language) is the standard markup language for creating web pages.</p>
<p>It describes the structure of a web page and consists of a series of elements.</p>
</div>
</details>
<details open>
<summary>Why learn HTML?</summary>
<p>HTML is the foundation of all web development.</p>
<p>Understanding HTML is essential for frontend development.</p>
</details>
Result:
What is HTML?
HTML (HyperText Markup Language) is the standard markup language for creating web pages.
It describes the structure of a web page and consists of a series of elements.
Why learn HTML?
HTML is the foundation of all web development.
Understanding HTML is essential for frontend development.
Progress and Meter Elements
HTML provides specialized elements for displaying progress and measurement data.
Progress Bar
The <progress> element displays the completion progress of a task.
<label for="file-upload">File upload progress:</label> <progress id="file-upload" value="32" max="100">32%</progress> <div class="demo-controls"> <button id="progress-10">10%</button> <button id="progress-50">50%</button> <button id="progress-75">75%</button> <button id="progress-100">100%</button> </div>
Result:
Meter Element
The <meter> element represents a scalar measurement within a known range.
<label for="disk-usage">Disk usage:</label> <meter id="disk-usage" min="0" max="100" low="30" high="80" optimum="50" value="65"> 65% (high usage) </meter> <label for="battery-level">Battery level:</label> <meter id="battery-level" min="0" max="100" low="20" high="90" optimum="100" value="25"> 25% (low battery) </meter>
Result:
Iframe Element
The <iframe> element embeds another HTML page within the current document.
Common Uses: Embedding videos, maps, documents, or external applications.
Embedding Content with Iframe
<div class="iframe-controls">
<button data-src="https://example.com">Example.com</button>
<button data-src="https://wikipedia.org">Wikipedia</button>
<button data-src="https://openstreetmap.org">OpenStreetMap</button>
</div>
<div class="iframe-container">
<iframe id="demo-iframe" src="https://example.com">
Your browser does not support iframes.
</iframe>
</div>
Result:
Security Note: Always be cautious when embedding content from external sources. Use the sandbox attribute to restrict capabilities.
Time and Data Elements
HTML provides semantic elements for marking up dates, times, and other data values.
Time Element
The <time> element represents a specific period in time.
<p>The conference starts at <time datetime="2023-10-15T09:00:00">9 AM on October 15, 2023</time>.</p> <p>Our anniversary is on <time datetime="06-15">June 15</time>.</p> <p>The duration of the movie is <time datetime="PT2H22M">2h 22m</time>.</p>
Result:
The conference starts at .
Our anniversary is on .
The duration of the movie is .
Data Element
The <data> element links content with a machine-readable translation.
<ul> <li><data value="001">HTML Tutorial</data></li> <li><data value="002">CSS Tutorial</data></li> <li><data value="003">JavaScript Tutorial</data></li> </ul> <p>The price is <data value="19.99">$19.99</data>.</p>
Result:
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
The price is $19.99.
Code and Preformatted Text
HTML provides elements for displaying code snippets and preformatted text.
Code and Pre Elements
<p>To create a paragraph in HTML, use the <code><p></code> element.</p>
<pre>
<code>
function greeting() {
console.log("Hello, World!");
}
greeting();
</code>
</pre>
Result:
To create a paragraph in HTML, use the <p> element.
function greeting() {
console.log("Hello, World!");
}
greeting();Text-Level Semantic Elements
HTML includes several elements for adding semantic meaning to text content.
<p>The <mark>highlighted text</mark> indicates important information.</p> <p><small>This is fine print for disclaimers.</small></p> <p>The chemical formula for water is H<sub>2</sub>O.</p> <p>E = mc<sup>2</sup> is Einstein's famous equation.</p> <p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text.</p> <p>The variable <var>x</var> represents the unknown.</p> <p>The output of the program is <samp>Hello, World!</samp></p>
Result:
The highlighted text indicates important information.
This is fine print for disclaimers.
The chemical formula for water is H2O.
E = mc2 is Einstein's famous equation.
Press Ctrl + C to copy text.
The variable x represents the unknown.
The output of the program is Hello, World!
Practical Exercise: Create a Resource Page
Create a comprehensive resource page using the elements covered in this lesson.