HTML For Absolute Beginners: Build a Multi-Page Site in VS Code and Publish to GitHub

Learn HTML from scratch while setting up a clean VS Code workflow, using Live Server and Prettier, and pushing your first multi-page site to GitHub. In this beginner-friendly walkthrough you’ll build proper page structure with html, head, body, semantic tags like header, nav, main, section, footer, add links and images with accessible alt text, include must-have meta tags like charset and viewport for mobile, and make images responsive with a tiny bit of CSS. You’ll also practice real-world Git and GitHub basics: staging, committing, and syncing to go live. What you’ll learn How to open, organize, and format HTML projects in VS Code with Explorer, settings, and Prettier The difference between tags and elements, container vs self-closing tags, and semantic structure Essential head items: doctype, lang, meta charset, title, and mobile viewport Building navigation with ul, li, and a, creating multiple pages, and keeping menus consistent Adding images responsibly with src and descriptive alt text Responsive images with a simple CSS rule Git and GitHub workflow: staging, committing, syncing, and viewing your HTTPS site online Chapters 00:00:03,86 — Intro, opening the project in VS Code and repo context 00:01:06,90— What dot gitignore and the dot vscode folder do 00:02:03,400 — Ignoring VS Code settings with a gitignore rule 00:02:19,900 — Starting and using Live Server correctly 00:03:00,833 — HTML, tags, and what markup means 00:03:48,100 — Angle brackets, opening and closing tags, elements 00:04:10,433 — Declaring doctype to tell the browser it’s HTML 00:04:30,600 — The html tag and closing tags explained 00:05:07,100 — Container vs void or self-closing tags 00:06:31,166 — Adding head and body, parent and child relationships 00:07:19,200 — Turn on Prettier format on save 00:07:39,366 — First paragraph with the p tag 00:08:47,100 — Headings: h1 and hierarchy 00:09:47,933 — What’s required in a complete HTML page 00:10:09,166 — Meta charset UTF-8 00:10:43,433 — Title tag and why it matters 00:11:29,833 — Setting the lang attribute on html 00:12:03,500 — Save and commit: source control in VS Code 00:12:27,800 — Syncing changes to GitHub 00:13:17,366 — Viewing the public site online 00:14:51,300 — Semantic structure: header and nav 00:15:37,433 — Creating links with a and href 00:16:20,666 — New page flow: page two html 00:17:31,566 — Emmet shortcut: bang to scaffold a page 00:17:49,333 — Mobile meta viewport explained 00:18:50,300 — Reusing viewport meta on index 00:19:29,800 — Building a simple menu and Home link 00:20:02,033 — Reusing list items for a menu 00:20:31,366 — Adding a Portfolio link and page 00:21:11,566 — Copy structure and set page-specific titles 00:22:01,500 — Keep navigation consistent across pages 00:22:21,166 — Add main for primary content and footer 00:23:04,700 — Footer copy and the HTML entity for copyright 00:24:02,866 — Wrapping content into section for meaning 00:24:38,733 — Full page anatomy recap 00:25:06,400 — Apply main on the Portfolio page 00:25:16,800 — Images matter: intro to img 00:26:20,933 — Project file structure and an img folder 00:26:40,633 — Adding img with src and alt for accessibility 00:28:01,766 — Image too big? Let’s fix that with CSS 00:28:20,866 — Style tag and responsive img rule width 100 percent, height auto 00:29:39,000 — Commit and push everything live 00:30:37,066 — Verify the live site and pages 00:30:54,233 — What’s next: CSS overview Artist Portfolio Website Video Series 1- Setup Domain and Hosting with GitHub Student Developer Pack and Namecheap -    • Free Domain and Web Hosting with GitHub St...   2 - Enforce HTTPS with GitHub Pages and Namecheap -    • Enforce HTTPS in GitHub Pages with Nameche...   3 - Setup Visual Studio Code with GitHub Integration -    • Visual Studio Code with GitHub Integration...   4 - Basic HTML Crash Course and Page Structure -    • HTML For Absolute Beginners: Build a Multi...   5 - Basic CSS Crash Course -    • Complete CSS: Styling Your HTML Page with ...   6 - CSS Flexbox -    • Flexbox in 15 Minutes - Crash Course   7 - CSS Grid -    • Flexbox vs Grid   8 - Sample Portfolio layouts in HTML and CSS (in production) 9 - Example Portfolio Site from Start to Finish (in production) Looking for What Make Art merch? https://teespring.com/stores/what-mak... Other links for your browsing. What Make Art? on Twitter:   / whatmakeart   What Make Art? on Instagram:   / whatmakeart   #html #webdesign #codingforbeginners You can support this channel on Patreon! Thanks to contributions from viewers like you, What Make Art? can continue making useful art tutorials for all. If you’d like to join the supporters who help make this content possible, you can find out how at the link below. Thank you for your consideration of support!   / whatmakeart