📌 Objective: Learn how to plan, wireframe, and prototype a website before building it with Bootstrap.

---

🔹 1. Introduction to Website Planning

Before coding a website, it’s important to plan the structure, layout, and features.

💡 Why Plan & Wireframe First?
✔️ Saves time – Avoid unnecessary revisions.
✔️ Improves user experience – Ensures a clear navigation structure.
✔️ Enhances collaboration – Helps designers and developers stay aligned.

---

🔹 2. Steps to Plan a Bootstrap Website

1️⃣ Define Website Goals

Before designing, ask:

• What is the purpose of the website? (e.g., business, blog, e-commerce)
• Who is the target audience?
• What features are needed? (e.g., contact form, testimonials, navbar)

✅ Example: Goals for a Portfolio Website

• Showcase projects and skills.
• Provide contact information.
• Have a simple, mobile-friendly design.

---

2️⃣ Create a Sitemap

A sitemap is a visual representation of the website’s pages.

✅ Example: Sitemap for a Portfolio Website

🔹 What happens?

• The sitemap helps plan which pages to include.

---

3️⃣ Choose a Bootstrap Layout

Bootstrap offers predefined grid layouts:

✅ Common Bootstrap Layout Choices:

• Single-page layout (for portfolios & landing pages)
• Multi-page layout (for blogs & businesses)
• Dashboard layout (for admin panels)

---

🔹 3. Wireframing a Bootstrap Website

A wireframe is a basic sketch of a website’s layout.

✅ Best Wireframing Tools:

• Pen & Paper – Quick & simple.
• Figma – Free, web-based design tool.
• Balsamiq – Easy low-fidelity wireframing.
• Adobe XD – Professional UI/UX design tool.

---

1️⃣ Example Wireframe for a Portfolio Website

🔹 What happens?

• The wireframe helps visualize where elements should go.

---

🔹 4. Converting a Wireframe into Bootstrap Code

1️⃣ Building a Navbar

✅ Example: Bootstrap Navbar

🔹 What happens?

• A responsive navigation menu is created.

---

2️⃣ Building a Hero Section

✅ Example: Bootstrap Hero Section

🔹 What happens?

• A hero banner with a button is created.

---

3️⃣ Creating a Responsive Grid for Projects

✅ Example: Bootstrap Project Grid

🔹 What happens?

• The grid layout adapts to different screen sizes.

---

4️⃣ Adding a Contact Form

✅ Example: Bootstrap Contact Form

🔹 What happens?

• A simple contact form is added.

---

🔹 5. Testing the Wireframe with Bootstrap

✅ Testing the Layout on Different Devices

• Use Chrome DevTools (F12) to test responsiveness.
• Adjust columns (col-md-4, col-lg-6) for better layouts.

✅ Example: Adjusting Columns for Mobile

🔹 What happens?

• The layout stacks on small screens and displays in a grid on larger screens.

---

📝 Lesson Recap Quiz

🎯 Test your knowledge of planning and wireframing.

📌 Multiple-Choice Questions (MCQs)

1️⃣ What is the first step in website planning?
a) Start coding immediately
b) Define website goals
c) Download Bootstrap
d) Design a logo

✅ Correct Answer: b) Define website goals

---

2️⃣ What tool can be used for wireframing?
a) Photoshop
b) Figma
c) Microsoft Word
d) Bootstrap

✅ Correct Answer: b) Figma

---

📌 True or False

3️⃣ A wireframe should include detailed colors and images.
✅ Answer: False

4️⃣ A sitemap helps define the website’s structure.
✅ Answer: True

---

🎯 Practical Challenge

✅ Create a wireframe for a personal portfolio website.
✅ Build a Bootstrap layout based on your wireframe.
✅ Adjust columns and sections to be fully responsive.
✅ Post your solution in the discussion forum for feedback!

---

🎓 Lesson Summary

✅ Website planning includes defining goals, creating a sitemap, and wireframing.
✅ Wireframing tools like Figma or Balsamiq help visualize layouts.
✅ Bootstrap’s grid system makes layouts responsive.
✅ Testing wireframes in Bootstrap ensures a functional design.