Hands-On Introduction to Web Development with HTML

Name: Hands-On Introduction to Web Development with HTML
Rating: 4.3 (7 reviews)

Learn the foundations of HTML step by step — no slides, no theory overload, just hands-on practice

Created byLukasz Kallas

Last updated 5/2026

English

What you'll learn

What HTML is and how it works in the browser
How to structure a complete HTML document
How to use headings, paragraphs, links, images, and lists
The difference between block and inline elements
How to write semantic HTML using modern elements
How to create forms with inputs, labels, and buttons
How to work with tables, audio, video, and iframes

Course content

3 sections • 24 lectures • 1h 59m total length

Welcome!2:38
Begin with the basics of HTML, write real code in a code editor, and see how the browser renders headings, paragraphs, links, images, lists, and forms.
Join Our Community0:04
What is HTML & How it Works3:07
Setup6:30

First HTML7:22
Basic Structure5:45
Headings & Paragraphs5:25
Learn how HTML headings from h1 to h6 establish page structure and semantics, with one h1 per page and paragraphs in p tags.
Text Formatting6:41
Explore HTML text formatting with semantic elements such as strong and em, compare with i and b, and learn about br and hr as self-closing tags.
Lists5:12
Links6:28
Images5:31
Embed images on a web page using the img element with src and alt attributes for accessibility and SEO. Demonstrate loading from remote links and local files in simple HTML.
Div & Span8:08
Compare div and span as block and inline elements, where div is a generic container and span is a non-semantic inline wrapper; use them only when no semantic element fits.
Semantic Containers5:29
Explore semantic HTML containers like header, nav, main, section, article, and footer to add meaning and accessibility without changing visuals, improving readability and maintainability of web pages.
Forms2:06
Input4:44
Build your first HTML form by adding input fields inside a form container, using action and method, placeholders, and meaningful name attributes for submitted data, including text input basics.
Input Types5:59
Labels, Select, Textarea7:23
Add labels linked to inputs with id and for attributes to improve accessibility, then include a select with options and values and a textarea for multi-line input.
Button & Submit4:03
Explore how to add a button to an HTML form and understand submission basics using action and method attributes, including GET and POST, with no backend yet.
Tables5:02
Explore how to display tabular data in HTML by building tables with the table element, rows (tr), and cells (td), and add meaningful header cells (th) to describe each column.
Audio & Video9:00
Add audio and video content to a web page using HTML's built-in audio and video elements with src and controls attributes, including local files and mp3/mp4 formats.
iframe4:48
Embed content on a web page using the iframe element with a src attribute to display another page or video, noting guardrails and security and uses like YouTube embeds.

Requirements

No prior programming experience required
A code or text editor (VS Code is used in the course)

Description

This course is a hands-on, beginner-friendly introduction to HTML, designed for anyone who wants to understand how the web works from the ground up.

HTML is the foundation of every website. Before you move on to CSS, JavaScript, or modern frameworks like React or Next.js, it’s essential to understand how web pages are structured and how browsers interpret markup.

In this course, we focus on learning by doing.
There are no slides — everything is done directly in the code editor. From the very first lessons, you’ll be writing real HTML, opening it in the browser, and seeing the results immediately.

We start with the absolute basics, explaining what HTML is and how the browser works with HTML files. Then, step by step, we cover all the core building blocks of modern HTML, including text elements, links, images, lists, semantic elements, forms, tables, and media.

By the end of the course, you’ll be able to create clean, readable, and well-structured HTML pages and feel confident moving forward to CSS for styling your page, JavaScript for interactivity, and many of the frontend frameworks.

This course is part of my Hands-On Introduction series and follows the same practical, beginner-focused approach as my other courses.

Who this course is for:

Complete beginners starting web development
Students preparing to learn CSS and JavaScript
Aspiring frontend developers
Anyone who wants to understand how websites are built
Developers who want to strengthen their HTML fundamentals

Hands-On Introduction to Web Development with HTML

What you'll learn

Explore related topics

Course content

Welcome & Setup4 lectures • 12min

HTML Basics17 lectures • 1hr 39min

Ending3 lectures • 8min

Requirements

Description

Who this course is for: