HTML5 Website Project for Beginners | First HTML Project Tutorial

In this HTML5 website project for beginners you will be challenged to build an beginner HTML project applying all you have learned about HTML from the previous tutorials. A how-to HTML tutorial follows the challenge.

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

🚀 This lesson is part of an HTML for Beginners tutorial series playlist:

🔗 Starter Source Code:

📬 Course Updates ➜ https://bit.ly/3q2FKjt

HTML5 Website Project for Beginners | First HTML Project Tutorial

(00:00) Intro
(00:15) Welcome
(00:35) HTML Project Tour
(07:31) Solution Tutorial Start
(10:47) Nav menu
(13:24) Adding an image
(14:39) Completing the page structure
(15:30) Using a page as a template
(21:43) About section
(27:21) Menu section
(32:27) Homepage complete
(32:50) Store hours
(34:39) Contact Us
(41:19) Completing the project

Validate Your HTML code: https://validator.w3.org/

🔗 All Resources for this HTML Tutorial Series: https://github.com/gitdagray/html_course

⚙ 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/
HTML5 Outliner: https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo

📚 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
HTML Entities Character Chart: https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references

🚀 Semantic HTML References:
MDN Web Glossary for Semantics: https://developer.mozilla.org/en-US/docs/Glossary/Semantics
w3Schools Semantic HTML: https://www.w3schools.com/html/html5_semantic_elements.asp
MDN Document and website structure: https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure

🚀 HTML Table References:
MDN Table Basics: https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics
MDN Advanced Tables and Accessibility: https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Advanced

🚀 HTML Forms References:
MDN Web Forms: https://developer.mozilla.org/en-US/docs/Learn/Forms
MDN Form Element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

✅ 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 first HTML Project for Beginners tutorial helpful? If so, please share. Let me know your thoughts in the comments.

#html #html5 #project