Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
This HTML Full Course for Beginners is an all-in-one beginner tutorial and complete course full of just over 4 hours of HTML code and instruction to help you learn web development skills. This course teaches HTML5. Think of this HTML full course tutorial as a HTML5 video textbook with 10 clearly defined chapters.
⭐ Become a full-stack web dev with Zero To Mastery Courses:
– The Complete Web Developer: https://bit.ly/WebDevMaster
– The Complete Web Designer: https://bit.ly/CompWebDesign
– Junior to Senior Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
❗ During the tutorial I mention several resources to be provided “in the description below” including links to source code for the various chapters. I have put all of these resource links in one GitHub repository.
🔗 All Resources for this HTML Tutorial Series: https://github.com/gitdagray/html_course
📬 Course Updates ➜ https://courses.davegray.codes/
HTML Full Course for Beginners:
(0:00:00) Intro
(0:00:41) Chapter 1: Start Here
(0:19:58) Chapter 2: Head Element
(0:28:48) Chapter 3: Text Basics
(0:49:31) Chapter 4: List Types
(0:59:40) Chapter 5: Add Links
(1:30:24) Chapter 6: Add Images
(2:00:43) Chapter 7: Semantic Tags
(2:24:39) Chapter 8: Create Tables
(2:40:27) Chapter 9: Forms & Inputs
(3:25:01) Chapter 10: HTML Project
⚙ 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/
Live Server Extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
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
☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray
Was this HTML full course with 4 hours of instruction helpful? If so, please share. Let me know your thoughts in the comments.
#html #full #course
source
A 60 second intro followed by just over 4 hours of code and instruction for HTML to help you begin your web development journey. I bookmarked all 10 chapters in the description. If you complete one lesson per day, you'll complete the full course in 10 days. Post questions in the comments below. ⬇⬇⬇
After this course, you'll want to follow my CSS for Beginners playlist here: https://www.youtube.com/playlist?list=PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
Thank you for your time to create a this video for is❤❤
Thank you so much sir , this is the perfect HTML course
and now i am going to take CSS tutorial by you 🙂
Dave you are the best of the best sir! you are like a God of web development. love you my man..
Awesome tutorial sir. Thank you for putting in the time and effort and for sharing your knowledge. God Bless!! Moving onto CSS now🙌🙌
Hey Dave I've taken a course from you before and it was awesome and hit thanks but that was a while ago. I want to take your css course but I understand html and what everything means when I read it. I'm a decent coder but want to learn react and need css and Javascript as well. I took Java back when it was invented, literally. This is a hobby.
I took html back when we used notepad for htmp amd active server pages haha. Mid 90s haha
Would you like to please share the coding coded in this whole video☺☺☺
I have one question. Can I use <div> in <details> element?
which extension to install for the closing tag to change on auto?
OK, I'm starting from today and invest 5 hour's a day. My target is to get a job as a front end developer. Let's see what I can do.
Thanx man, now I should be able to do that school project
can someone please tell me how to add the orange logo? ive played around with line 9 for weeks and still cant get that logo/image to pop up
Hello Dave, @3:04:40 when you toggle the code, and copy paste, how come the copy paste has different inputs? where that came from? Also, when you select a word and delete it, it deletes all the related words within the code line, but i am not able to do it. Same goes with copy paste. I have to right click to copy and paste, otherwise VS code freezes, and i have to press random keys really hard to activate it.
Thank you for this amazing tutorial boss Dave!
All the way from Nigeria 🇳🇬
sir, name atrributes in checkbox is same. How this works at the backend if we tick all the options, then which value will be stored in name variable .
for eg in above, which value name=pets will store if we check all ?
it would be better if we used the inbuilt browser for vs code! it gives me much more space compared to an external browser
I'm already on chapter 9, and man, I love you! I'd tried to learn HTML many times before but I felt that I couldn't and it was too late for me, but now I'm finally getting it. Thank you very much for these lessons, it has been so practical and well explained. I really aprecciate it!
Thanks Dave for making my VSCode pretty 🙂
Dave, thank you so much for this HTML course! I started knowing so little, but now I truly feel more confident in my skills. Thank you for your patience, the way you teach makes it very easy to understand. My big thanks for you, professor! I aspire to be just like you.
Hello @DaveGrayTeachesCode. Thank you very much for this HTML, Tutorial. I have watched so many tutorials on html that I was not learning something new they are all basically the same and I am too lazy to read articles, so I was looking for a tutorial that is a bit different from others. And at last, I found this video. In this you mentioned about w3 code validator I never knew something like that, and you focused on semantic tags this is also something new for me and the download attribute on anchor tags this also new for me. there were so many things that I learned from this video. so, thank you very much for this course.
Great work! where do I go to download the resources folder. Thanks
I like how you explain things Dave. Even a 5 year old can grasp your lessons. May God keep blessing you 🙏
thank you for the tutorial, helped me recap a lot. One question I have, why we put "/" in the contact.html and hours.html when navigating with links but didn't put in index.html? What is the use of "/" there? Thanks again!
You were obviously born to make Tutorials. Thanks Dave!
"If you're good at something, never do it for free"
But Dave, you're the prodigy in Web development and you're sharing your knowledge for free.
You're really great!
Hi dave Can you tell me why all the tags that don't have a closing tag have a space in them, like <br />? I use the prettier extension, and when I save it, it autoformats. That's when this happens.
hey dava brother love from india and thank you so much for making this beautful video on html
This is the way to go! I just subscribed and I’ll complete my web dev. journey with you on my side.
chapter 10 project: i wrote it as
—-<a href="index.html/#menu" target="_parent">Our Menu</a> ——and it is wrong but i tried your method it showed the whole project files about img folder, css file and 3 html files instead of redirecting back to home/menuHow can i fix this since w3 didn't show any error i'm stuck
Hi Dave.
I want to say tank you for that free video It's awesome❤❤❤.
And I want to know how I found video for advance level
Sir will you please define the elements during practical
Man your voice is so calmm and soothing to listen to. I have justed started you full web dev playlist and I am pretty sure i will finish it in two weeks. If It was some other tutorial I am pretty sure I wouldnt follow. Thank you so much. Love from Banglore India
its a better tutorial i admit….the only thing is you are making same code editing putting lots of attributes which make the html looks so long and confusing have to stop and play again and again to fully understand …would have much better uf for every heading of html you have coded diffferently so that the code looks precise and simple…rest its an advance and amazing
cheers
Excellent job with this course Dave. I'm most excited about the tutorials on the form, I struggled a lot with that.
If CSS had not removed the need to use the table element(s), I would have enjoyed creating tables.
It's funny how I'm seeing the 'description list' tag for the first time, this revelation came in handy.
The overall course is well done. I understand you could not cover everything to be taught, but you have done quite a lot for free. Very appreciated!
3:06:31