🖼️ Tile by Nehir – Bootstrap Layout Starter

Welcome to your Bootstrap layout activity! This project is part of LiveLab 5 in the Global Career Accelerator.

You’ll be building a responsive image layout inspired by a fictional design studio called Tile by Nehir, using Bootstrap and AI tools like GitHub Copilot.

---

🚀 Quick Start in Codespaces

Use the starter launcher (index.html in the root) to preview your activity files in Live Server.

✅ To launch your activity:

1. In Codespaces, right-click index.html in the root folder
2. 2. Choose the option that says either:
   • Preview with Live Server
   • or Show Preview
     (the wording might be slightly different — either one works!)
3. A new browser tab or side panel will open with two links:
   • 🖼️ Tile by Nehir Starter → opens tile-activity/tile.html
   • 🌀 Parallax Level-Up → opens level-up-parallax/parallax.html

---

📁 What Files to Edit

✅ You should only edit:

• tile-activity/tile.html and tile-style.css — main layout activity
• level-up-parallax/parallax.html and parallax-style.css — bonus challenge (optional)

🚫 Do not edit:

• index.html in the root — it’s just a launcher
• Stylesheets outside your assigned activity folder

---

🧰 Tools You Already Have in Codespaces

You’re already set up with everything you need:

• ✅ GitHub Copilot is ready to use — try asking it to suggest layout improvements or fix spacing
• ✅ Live Preview is built-in — just right-click your HTML file and choose Preview with Live Server or Show Preview
  (Either one works — the option name might vary a little)
• ✅ No extra setup needed — just start building!

---

🧠 What You’ll Learn

• How to use Bootstrap’s grid system (container, row, col-*)
• How to apply utility classes for spacing, alignment, and image resizing
• How to combine Bootstrap with custom styling
• How to use AI tools like GitHub Copilot or ChatGPT to improve layout, debug issues, or style your code

---

🧪 What You’ll Do

During the lab:

1. Add the Bootstrap CDN to your HTML file (if not already added)
2. Wrap the images in a Bootstrap grid (container, row, col-*)
3. Apply utility classes like:
   • img-fluid (responsive images)
   • mb-3, g-4, text-center, p-3 (spacing/alignment)
4. Use AI prompts from Copilot or the Resource Doc
5. Optionally: try hover effects, add cards, or complete the Parallax challenge

---

✅ Your Core Goals

• Build a responsive layout that works on mobile and desktop
• Use Bootstrap layout classes and utility styles
• Use at least one AI prompt during the activity
• Share one improvement you made with help from AI

---

💬 Team Prompts & Reflections

• What Bootstrap class fixed a layout issue?
• What did Copilot suggest?
• What worked and what didn’t from AI-generated code?
• What’s one layout tweak you’re proud of?

---

🔼 Bonus Challenge: Level Up Options

Already nailed your tile layout? Try one of these:

📐 Gallery Layout

Use the wireframe example and prompt AI to match it:

“Make this layout: 1 column on mobile, 2 on tablet, 4 on desktop.”

🖼️ View the Wireframe

---

✨ Parallax Scroll Effect

Try a layout where the background scrolls at a different speed than the text.

🌀 Start the Parallax Challenge

---

Happy building!