Introduction to HTML | An HTML5 Tutorial for Beginners

Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap

This introduction to HTML is an HTML5 tutorial for beginners. HTML5 is the latest version of HTML. You will learn about the basic HTML code in a web page as well as tools like VS Code and the W3C HTML validator.

🚩 Subscribe ➜ https://bit.ly/3nGHmNn

πŸš€ This lesson is part of an HTML for Beginners tutorial series playlist:

πŸ”— All Resources for this HTML Tutorial Series: https://github.com/gitdagray/html_course

πŸ“¬ Course Updates ➜ https://courses.davegray.codes/

Introduction to HTML | An HTML5 Tutorial for Beginners

(00:00) Intro
(00:05) Welcome and Who This Tutorial Series Is For
(00:48) What is HTML?
(01:30) Google Chrome Browser
(01:52) Dark New Tab Chrome Extension
(02:48) Visual Studio Code
(03:30) Create and open a new folder
(04:10) Creating a new file and best file name practices
(05:10) The HTML element and elements vs tags
(05:59) Two Major Areas of an HTML page: Head and Body
(06:47) Adding a title element
(07:09) Saving and auto-formatting your code
(08:32) Adding a heading and a paragraph
(09:57) Optional VS Code Extensions
(11:30) Live Server Extension
(12:02) Viewing Your Web Page
(12:34) Style element and optional dark mode changes
(13:52) Your Dev Environment vs The Web
(14:38) Starting & Stopping Live Server
(15:21) Validating your HTML code
(16:38) Adding a lang attribute
(17:37) Adding charset metadata
(18:32) Adding a doctype declaration
(19:23) Revalidating and viewing your web page

βš™ Web Dev Tools:
Chrome Browser: https://www.google.com/chrome/
Dark New Tab Chrome Extension: https://chrome.google.com/webstore/detail/dark-new-tab/kcphhkbdlfggickaoeiahdcfhagfbajl?hl=en
Visual Studio Code (VS Code): https://code.visualstudio.com/
Prettier VS Code Extension: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
vscode-icons VS Code Extension: https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Github Themes VS Code Extension: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
W3C HTML Validator: https://validator.w3.org/

πŸ“š References:
MDN HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
MDN HTML Elements Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element

βœ… Follow Me:
Github: https://github.com/gitdagray
Twitter: https://twitter.com/yesdavidgray
LinkedIn: https://www.linkedin.com/in/davidagray/
Blog: https://yesdavidgray.com
Reddit: https://www.reddit.com/user/DaveOnEleven

Was this tutorial about getting started with HTML helpful? If so, please share. Let me know your thoughts in the comments.

#html #html5 #beginners

You May Also Like