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.

---

🧠 What You’ll Learn

• How to structure a webpage using Bootstrap’s grid system
• How to use Bootstrap utility classes to control spacing, alignment, and responsiveness
• How to combine Bootstrap with a few custom styles
• How to prompt AI tools like ChatGPT or Copilot to help you improve layout, debug issues, or style your code

---

🚀 How to Preview Your Code in Codespaces

We’ve set up a starter page (index.html) to help you easily open the right file in Live Server.

1. In the file list, find and right-click index.html
2. Choose "Preview with Live Server"
3. You’ll see two links:
   • 🖼️ Tile by Nehir Starter: for your Bootstrap layout activity
   • 🌀 Parallax Level-Up: LEVEL UP for an optional scroll effect challenge

You do not need to open the other index-nehir.html or index-parallax.html files directly.

---

💡 We renamed those files to keep things organized and help Live Server route things cleanly.

---

🔧 During the LiveLab

Your starter includes:

• A styled heading using Playfair Display and a background color
• Four stacked tile images, each with spacing (mb-3)
• Custom CSS already applied

But it’s not responsive… yet.

In the LiveLab, your instructor will guide you through:

• Adding the Bootstrap CDN link to activate Bootstrap classes
• Using the Bootstrap grid system (container, row, col-*) to create a responsive layout
• Applying utility classes like img-fluid, g-4, or text-center
• Prompting AI tools like ChatGPT or Copilot to debug layout or explore enhancements

👀 You’ll see how one line of Bootstrap can dramatically change the layout.

📌 You can follow along live and add the code step-by-step
OR wait until after the demo and try it on your own with your team.

---

👩‍💻 In Teams: What You’ll Do

Once in breakout rooms:

1. Use the provided starter code to build your tile layout
2. Apply Bootstrap grid classes to make it responsive
3. Use utility classes to add spacing, padding, and image styling
4. Use at least one AI prompt from the Resource Doc to improve layout or solve a styling issue
5. Optionally: Add hover effects, background color, or wrap each image in a card

---

✅ Core Goals

• Your layout should work well on mobile and desktop
• Use Bootstrap’s container, row, and column classes like col-12, col-sm-6, or col-md-4 to build your layout.
• At least 1 layout or style enhancement should come from an AI suggestion
• Be ready to share what you built and what AI helped you with!

---

💬 Questions to Discuss as a Team

• What Bootstrap classes helped make your layout responsive?
• What did AI suggest that you kept, changed, or ignored?
• What was the biggest challenge you had to debug or figure out?

---

---

🔼 Optional: Level Up Challenge (Pick One if you finish early!)

Already nailed your layout? Try one of these bonus activities:

📐 Option 1: Match the Gallery Wireframe

Use the optional wireframe image to recreate a responsive layout. Try prompting AI with:

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

📸 View the Wireframe

✨ Option 2: Add a Parallax Scroll Effect

Explore how to make a section scroll with depth using background images.

🌀 View the Parallax Starter Code

Happy building!