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
