Learn HTML from scratch in this 24-minute tutorial for beginners. Build a two-page website with HTML, preview it in VS Code, and publish it with GitHub Pages—no coding experience needed.
We’ll add headings, paragraphs, links, lists, images, a table, and a contact form with browser validation. I’ll explain what each element does as we build, so you understand the code instead of just copying it.
You’ll also learn how to generate HTML with Emmet, preview changes with Live Server, organize your page with semantic elements, connect a second page, and publish the finished site online.
This lesson focuses on HTML structure. The contact form demonstrates inputs and validation; receiving messages requires a backend or form service.
PROJECT & RESOURCES
Complete VS Code tutorial: https://www.youtube.com/watch?v=6tQ6MS8cHMk
50 HTML, CSS & JavaScript projects playlist: https://www.youtube.com/playlist?list=PLzbJ3MPhHqX4-hDdhCrIGYRqG1yLYj_Mq
Source code: https://github.com/sahandghavidel/my-html-website
Live website: https://sahandghavidel.github.io/my-html-website/
Visual Studio Code: https://code.visualstudio.com/
Live Server extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Prettier extension: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
MDN HTML guide: https://developer.mozilla.org/en-US/docs/Web/HTML
GitHub: https://github.com/
What are you going to build with HTML? Share your idea in the comments, and subscribe to JavaScript King for more practical web development tutorials.
#HTML #HTMLTutorial #WebDevelopment
CHAPTERS
00:00 HTML Website Project: What You’ll Build
00:41 HTML Basics: How Web Pages Work
01:30 VS Code Setup and Your First HTML File
02:32 HTML Document Structure with Emmet
03:51 Install Live Server in VS Code
04:56 HTML Headings and Paragraphs
05:39 HTML Text Formatting and Semantic Elements
08:06 HTML Line Breaks and Page Structure
10:03 Format HTML Code with Prettier
10:44 HTML Navigation, Links, and File Paths
12:14 HTML Lists: Ordered and Unordered
13:37 Create and Link a Second HTML Page
14:50 HTML Images and Alt Text
15:18 HTML Tables: Rows, Columns, and Headings
16:50 HTML Forms and Browser Validation
19:46 HTML Metadata and Accessibility Checks
21:28 GitHub Pages Deployment: Publish Your Website
23:25 Practice HTML with Website Projects