Перейти к содержимому

HTML Tutorial for Beginners: From Basic Tags to a Portfolio

Mizan Builds

0:00 / 0:00

HTML Tutorial for Beginners: From Basic Tags to a Portfolio

4 просмотра · 6 дн. назад
Mizan Builds
4 подписчика
4 просмотра · 6 дн. назад
Welcome back to my coding journey! In this video, we're continuing to learn web development step by step with practical HTML practice. I'm documenting what I learn as a beginner to build a solid foundation, improve my technical skills, and get better at explaining code in English. ⏱️ Timestamps / Chapters: 00:00 - Introduction & Project Overview 05:15 - Setting Up the Project & Code Editor 15:30 - HTML Document Structure & Headings 30:45 - Building the Navigation & Header 48:20 - Creating the About Me Section 01:05:10 - Adding the Projects Section 01:22:00 - Contact Info & Footer Setup 01:32:45 - Final Review & What’s Next 💻 Resources & Links: GitHub Repository / Code: [Insert your GitHub link here] Code Editor: VS Code (Visual Studio Code) Useful Documentation: MDN Web Docs (developer.mozilla.org) 💬 Question for you: Are you also learning to code, or have you already built your first website? Let me know in the comments! If you enjoyed the video, make sure to like and subscribe to follow along with the build journey. We start with a quick revision of core basics like the HTML boilerplate, headings, paragraphs, and how web servers work. If you missed those foundational concepts or want the full explanation, make sure to check out my previous video first:    • HTML for Beginners: Your First Web Page   From there, we dive into new topics including HTML case sensitivity, naming conventions, text formatting, line breaks, and HTML comments. We also work through hands-on practice exercises covering lists, hyperlinks, and horizontal rules, as well as HTML character references for special symbols. Finally, we put everything together by building a simple HTML portfolio website. We look at a reference layout, rebuild the page from scratch, preview it in the browser, and discuss simple improvements and practice tasks you can try on your own. This project isn't a complex, production-ready website—it's an honest beginner exercise to help reinforce core tags and structure. The best way to learn web development is by coding alongside the video, so open up your text editor and give these exercises a try! ----- What's covered in this video: Quick recap: HTML boilerplate, headings, paragraphs, and web servers HTML case sensitivity and file naming conventions Text formatting tags, line breaks, and comments Hands-on practice: headings, paragraphs, hyperlinks, lists, and horizontal rules HTML character entities and special characters Step-by-step beginner portfolio website build Browser preview, code walkthrough, and practice ideas ----- Resources & Code: Project code and resources: https://github.com/mizan-builds/Pract... Previous HTML lesson:    • HTML for Beginners: Your First Web Page   ----- If you're also learning HTML, web development, or practicing explaining technical concepts in English, feel free to share your thoughts or questions in the comments. Let's learn together! If this video helped you, please like and subscribe to follow along with the journey. #HTML #WebDevelopment #CodingForBeginners #LearnToCode