Course Content
Lesson 1
This class is your first step into web development. We’ll introduce the core building blocks of every webpage: HTML tags and how they structure content. You’ll learn how to format text with headings and paragraphs, create lists and tables for organization, and add images for visual impact. We’ll also touch on forms, which allow interaction, and highlight the role of HTML5 in modern web design. As we move forward, you’ll see how HTML connects with CSS and JavaScript to bring websites to life, including features like the HTML5 canvas. By the end of this lesson, you’ll have a solid foundation to continue through the full web development course.
0/2
Lesson 1
41:21
Quiz 1
00:10:00
Lesson 2
In this class we’ll explore a set of HTML elements that make web pages interactive and dynamic. You’ll learn how to build forms that let users enter and send data, along with textareas for larger blocks of input. We’ll also look at the quirky but historic marquee tag and why it’s rarely used in modern web development. From there we’ll cover how to add functionality with the script tag, and why the noscript tag is important for visitors whose browsers block or don’t support JavaScript. Finally, we’ll revisit the title element in the <head>—a small but essential detail for every page. These concepts bridge the gap between static HTML and the interactive world of JavaScript, HTML5 canvas, and modern web development practices.
0/2
Lesson 2
35:16
Quiz 2
00:15:00
Lesson 3
In this lesson we expand our toolkit with a variety of HTML and HTML5 tags that give meaning, structure, and media power to web pages. You’ll see how <dfn> highlights a definition, and why <strong> is preferred over <b> for important text. We’ll practice layout basics with <div>, and learn how <samp>, <code>, and <pre> help display code and sample output clearly. We then move into linking and multimedia: <a href="..."> for navigation, <link> for external resources, and the <audio> and <video> elements for embedding rich media. Finally, we introduce semantic HTML5 structure with <article> and <aside>, which give pages clearer meaning for both browsers and search engines. By the end of this session, you’ll understand how these tags improve readability, accessibility, and user experience—stepping closer to building modern, well-structured websites.
0/2
Lesson 3
35:44
Quiz 3
00:20:00
Lesson 4
In this lesson we focus on additional HTML5 tags that make forms, layouts, and structured content more powerful and user-friendly. You’ll see how <input type="file"> lets users upload files, and how <progress> and <meter> show visual indicators like task completion or measurable values. We’ll also work with <datalist>, which provides users with suggested options as they type in a form. For document structure, we’ll learn the semantic elements <section>, <header>, and <footer> — essential for organizing content into meaningful blocks. We’ll also explore <figure> and <figcaption>, perfect for pairing images or diagrams with descriptive captions. Finally, we’ll practice using <time> for marking dates and times in machine-readable format, and the interactive <details> and <summary> tags, which allow users to expand and collapse content. By the end of this class, you’ll know how to combine these tags to create richer, more semantic, and more interactive HTML5 web pages.
0/2
Lesson 4
30:49
Quiz 4
00:20:00
Lesson 5
In this lesson you’ll learn how to draw and animate graphics using <canvas> and JavaScript. We’ll set up a canvas in the DOM, grab its 2D rendering context, and render shapes, text, and images. You’ll practice paths (moveTo, lineTo, arc), fills and strokes, colors and gradients, line joins, and text drawing. We’ll cover drawing images/sprites, handling device pixel ratio for crisp rendering, and clearing/redrawing each frame with requestAnimationFrame for smooth animation. You’ll also see basic interactivity with mouse/touch events and learn to save/export drawings via toDataURL. By the end, you’ll know the core canvas workflow: initialize, draw, update, and animate.
0/2
Lesson 5
34:10
Quiz 5
00:15:00
Lesson 6
SVG (Scalable Vector Graphics). SVG is XML-based vector graphics you place with <svg> in the page. It scales crisply at any size, is accessible/semantic, and individual shapes (like <rect>, <circle>, <path>, <text>) are DOM elements you can style with CSS and manipulate with JS. Key attributes include viewBox, width, height, fill, stroke, stroke-width. SVG is great for icons, charts, logos, and interactive diagrams. Entities (displaying reserved characters). To show characters that HTML normally interprets, use entities: < → < , > → > , & → & , " → " , ' → ' ,   → non-breaking space. Named entities and numeric ones (like ©) both work. <center> (deprecated). <center> is obsolete. Center using CSS: text with text-align: center;, blocks with margin: 0 auto;, or modern layout (Flex/Grid). HTML5 Drag and Drop. Enable by setting draggable="true" on an element and listening for dragstart. Allow drops by preventing default in dragover. Use the DataTransfer API inside events to setData during dragstart and getData in drop. Typical events: dragstart, dragover, drop, plus dragenter, dragleave, dragend.
0/2
Lesson 6
37:12
Quiz 6
00:25:00
Lesson 7
Key–value storage (strings only) scoped to the page’s origin and persists across reloads and restarts. Core methods: setItem(key, value), getItem(key), removeItem(key), clear(), key(index), and the length property. Store objects with JSON.stringify / JSON.parse. Quotas are typically a few MB per origin. It’s synchronous (blocks the main thread), same-origin protected, and changes fire a storage event in other tabs of the same origin (not the tab that made the change). Use sessionStorage for per-tab lifetime. Avoid storing secrets; data is readable by any script on the same origin and may sync in some browsers. Private browsing may lower quotas or clear data on exit.
0/2
Lesson 7
11:20
Quiz 7
00:25:00
Full HTML Course – Zero to Hero

In this lesson we explore localStorage and <iframe> in HTML5.

localStorage lets you store data directly in the browser using a key–value system. Unlike cookies, it doesn’t expire automatically and is not sent to the server. Common methods are:

  • localStorage.setItem(key, value) to store data

  • localStorage.getItem(key) to read data

  • localStorage.removeItem(key) to delete one key

  • localStorage.clear() to wipe everything

It’s useful for remembering things like usernames, preferences, or page settings across visits. Values persist even after reloading or closing the browser, until they’re removed.

The <iframe> tag lets you embed another webpage inside your page. Attributes like src, title, width, height, and loading="lazy" help control behavior and accessibility. Some sites block embedding for security reasons, so not all URLs will work inside an iframe.

Together, these features give developers tools to store client-side data and to embed outside content.

Previous
Next