Full Stack Web Development – Lecture 03 Practical: Building Your First Webpages

Full Stack Web Development – Lecture 03 Practical: Building Your First Webpages
Video Link:
🎓 Course: Web Full Stack Development
👨‍🏫 Instructor: Dr. Abbas Malik
🏛 University: Prince Sultan University – College of Computer & Information Sciences
💡 Perfect for beginners starting their journey in mobile development with Flutter!
🔹 Course GitHub Repository:
📂 All course materials, code examples, and projects: https://github.com/mgmalik/fullstackwebdev
📚 Playlist: IS311 Web Development – Full Course https://youtu.be/CFEauurtrLE?si=umH3wQTY6GlHIkwB
🔔 Subscribe & turn on notifications to stay updated with weekly lectures!
http://www.youtube.com/@brainxl
In this hands-on HTML tutorial, I build two complete webpages from scratch as part of the IS311 Web Development course at Prince Sultan University. Follow along step-by-step as we create a professional "About Me" page and a headings demonstration page using pure HTML.
📌 What You'll See Built in This Video:
1. About Me Page (index.html):
• Professional header with styled h1, h2, and h3 tags
• Inline CSS styling for colors, backgrounds, and alignment
• Working hyperlinks with the a tag (internal & external)
• Paragraph formatting with p, i, and b tags
• Image embedding with img tag (Google Scholar profile photo)
• File download links (PDF lectures, DOCX lab files)
• University logo with external link
• Use of target="_blank" for external links
2. Headings Demo Page (headings.html):
• Complete demonstration of HTML heading hierarchy (h1 through h6)
• Internal navigation between pages with anchor tags
• Clean, minimal HTML structure
🛠️ HTML Concepts Covered:
• Basic HTML5 document structure (!DOCTYPE html, html, head, body)
• Semantic HTML headings
• Paragraphs and text formatting (italics, bold)
• Hyperlinks (relative vs. absolute paths)
• Images as links
• Inline CSS styling
• Horizontal rule hr element
• File linking (PDF, DOCX)
• Page navigation between multiple HTML files
🔗 Resources & Code Files:
• Download the complete code from GitHub: [Link in pinned comment]
• Course materials: Week 02 Lecture Slides & Lab File (linked in the video)
• W3Schools HTML Reference: https://www.w3schools.com/tags/
🎯 Perfect For:
• IS311 students at Prince Sultan University
• Absolute beginners learning HTML
• Anyone wanting to see real HTML pages built from scratch
• Students preparing for web development projects
💡 Pro Tips Shown in the Video:
• How to organize project files (images folder, files folder)
• When to use relative vs. absolute URLs
• Basic CSS inline styling for quick visual enhancements
• Creating a simple multi-page website structure
________________________________________
✅ Follow along and code with me! Pause the video and build these pages yourself – the best way to learn HTML is by doing.
________________________________________
Tags:
#HTMLTutorial #WebDevelopment #HandsOnCoding #HTML5 #LearnToCode #PSU #PrinceSultanUniversity #ProgrammingForBeginners #AboutMePage #HTMLProjects #CodingTutorial #DrAbbasMalik #IS311 #FrontendDevelopment #PracticalProgramming

Видео Full Stack Web Development – Lecture 03 Practical: Building Your First Webpages канала Brain XL