Every Beginner Makes This HTML Image Mistake!
📱 DAY 5 of learning to code completely FREE using the Mimo app — and today we're making our pages VISUAL!
Day 1: Foundations ✓
Day 2: Conditionals & Loops ✓
Day 3: Links & HTML Structure ✓
Day 4: HTML Basics 1 Complete ✓
Day 5: How to Code Images — LET'S GO ✓
Yesterday we finished the HTML basics 1. Today we're adding the most important visual element on the entire web: IMAGES. Every photo, logo, icon, banner, and meme you've ever seen online? It's an `img` tag. And you're about to learn how to build it.
⏱️ TIMESTAMPS:
00:00 - Day 5 Recap: From Text to Visuals
03:00 - Opening Mimo App & Using Today's 2 FREE Keys
06:30 - Lesson 9: The `img` Tag — Syntax & How It Works
14:00 - The `src` Attribute: Where Your Image Lives
20:00 - The `alt` Attribute: Why It Matters (Accessibility & SEO)
28:00 - Lesson 10: Image Sizing with `width` and `height`
36:00 - Live Build: Adding Multiple Images to Our Page
42:00 - Common Image Mistakes Beginners Make
47:00 - Day 6 Preview: Lists & Tables — Organizing Content
51:00 - 5-Day Streak Check-In + Your Image Challenge
💡 WHAT WE COVERED TODAY (Day 5):
✅ The `img` tag — why it's self-closing and different from other tags
✅ The `src` attribute: absolute URLs vs. relative file paths
✅ The `alt` attribute: accessibility, screen readers, and broken image fallback
✅ Controlling image size with `width` and `height` attributes
✅ Adding multiple images to a single web page
✅ Best practices: file formats, naming conventions, and folder structure
🖼️ WHY TODAY MATTERS:
Text-only websites died in 1996. Images tell stories. Images sell products. Images make people STOP scrolling. And YOU just learned how to code them into existence. From today, your pages aren't just structured — they're visual.
📱 DOWNLOAD MIMO APP:
• iOS: https://apps.apple.com/app/mimo-learn...
• Android: https://play.google.com/store/apps/de...
• My Referral Link: https://getmimo.com/invite/p5wnbs
📚 RESOURCES MENTIONED:
• Mimo App (Free Tier): https://getmimo.com
• Day 1 Tutorial: • I Learned to Code for FREE Using Mimo App ...
• Day 2 Tutorial: • Mimo App Coding Tutorial Day 2: How I Used...
• Day 3 Tutorial: • Day 3: How to Create Links & HTML Basics (...
• Day 4 Tutorial: • Day 4 Coding Streak 🔥 HTML Basics FINISHED...
• Unsplash (Free Images): https://unsplash.com
• Pexels (Free Images): https://pexels.com
• CodePen (Practice Online): https://codepen.io
💻 BUILD THIS TODAY:
Create a gallery page. Use everything we've learned:
!DOCTYPE html
html
head
titleMy Day 5 Gallery/title
/head
body
h1My First Image Gallery/h1
pBuilt on Day 5 of my Mimo journey./p
h2My Favorite Photo/h2
img src="https://images.unsplash.com/photo-123456" alt="Beautiful sunset" width="400"
h2My Logo/h2
img src="logo.png" alt="KR8 Digital Tribe logo" width="200"
p a href="day4.html"← Back to Day 4 Page/a /p
/body
/html
Save it. Open it. You just built a gallery.
🎯 5-DAY STREAK CHALLENGE:
If you've coded with me all 5 days, comment "5-DAY STREAK 🔥 IMAGES LOADED!" and tell me what image you added to YOUR page. I reply to every single one.
❓ STUCK ON `src` PATHS?
Absolute URL vs. relative path confusing you? Drop your code in the comments. I'll debug it with you.
🔔 SUBSCRIBE + HIT THE BELL for daily Mimo coding lessons. Day 6 is lists and tables — organizing content like a pro. See you tomorrow!
#MimoApp #HTMLImages #CodingDaily