Activity 14: Bootstrap Progress Bars - Discovery Challenge

Create a learning progress dashboard with Bootstrap cards and progress indicators.

🎯 Learning Objectives

By completing this activity, you will:

• ✅ Build Bootstrap card components with images
• ✅ Create progress bars with different styles and colors
• ✅ Use semantic color variants (success, info, warning, danger, primary)
• ✅ Implement striped and animated progress bars
• ✅ Build stacked progress bars for multi-part metrics

Time: 20-25 minutes | Difficulty: Medium

🚀 Getting Started (See Results in 30 Seconds!)

Open index.html in your browser to see:

• Profile card with image and call-to-action button
• 3 working progress bars showing different skills (HTML/CSS, JavaScript, React)
• Color variations: Green (success), Blue (info), Orange (warning)
• Style variations: Basic, Striped, Animated
• Stacked progress bar showing overall course progress

Try this now:

1. Open index.html in your browser
2. Scroll through the learning dashboard
3. Notice how each progress bar has different colors and styles
4. See the animated progress bar (React section) - stripes are moving!
5. Check the stacked progress bar showing multiple segments

🎯 What's Already Working (65%)

✅ Bootstrap Setup: All CSS and JS dependencies loaded ✅ Page Layout: Responsive container with centered content ✅ Profile Card: Complete card with image, title, description, and button ✅ Progress Bar 1 (HTML/CSS): Green solid bar at 75% ✅ Progress Bar 2 (JavaScript): Blue striped bar at 45% ✅ Progress Bar 3 (React): Orange animated striped bar at 30% ✅ Each Progress Bar Has: Heading, badge, progress visualization, description ✅ Stacked Progress Bar: Multi-segment bar showing course breakdown (3 colors) ✅ Legend: Explains what each color segment represents ✅ Info Section: Tips and documentation for progress bar usage

📋 Your Tasks (35%)

TODO 1: Add Three More Progress Bars (Medium)

Location: After the React progress bar, before the <hr> divider

Success Criteria:

• Add 3 more skill progress bars (e.g., Bootstrap, Git, Node.js, Databases, SQL, Python)
• Use different colors: bg-primary (blue), bg-danger (red), bg-secondary (gray)
• Vary the widths between 10%-90%
• Include heading, badge, progress bar, and description for each
• Try different style combinations (basic, striped, animated, or both!)

Hints:

• Copy the structure of one of the existing progress bars
• Change the skill name, percentage width, and color class
• Bootstrap color classes: bg-primary, bg-secondary, bg-success, bg-danger, bg-warning, bg-info
• For striped effect: Add progress-bar-striped
• For animated stripes: Add both progress-bar-striped and progress-bar-animated

Example Structure:

<div class="mb-4">
  <div class="d-flex justify-content-between align-items-center mb-2">
    <h5 class="mb-0">Your Skill Name</h5>
    <span class="badge badge-primary">XX%</span>
  </div>
  <div class="progress" style="height: 25px;">
    <div class="progress-bar bg-primary" role="progressbar" style="width: XX%">
      XX% Complete
    </div>
  </div>
  <small class="text-muted">Description here</small>
</div>

TODO 2: Create Your Own Stacked Progress Bar (Medium)

Location: After the existing stacked progress bar's legend

Success Criteria:

• Create a second stacked progress bar for a different metric
• Use at least 2 segments (can use up to 4-5)
• Each segment must have different color (bg-success, bg-warning, bg-danger, etc.)
• Widths must add up to 100%
• Include a heading and legend explaining what each segment represents

Hints:

• Copy the structure of "Overall Course Progress"
• Choose a different context: "Project Completion", "Weekly Goals", "Assignment Status"
• Each segment is a <div class="progress-bar bg-COLOR"> inside one <div class="progress">
• Segments should be side-by-side (stacked horizontally)
• Create badges for the legend matching your segment colors

Example Context Ideas:

• Project Completion: Finished (50%) | In Progress (30%) | Not Started (20%)
• Weekly Goals: Achieved (60%) | Partially Done (25%) | Pending (15%)
• Assignment Status: Submitted (70%) | Late (10%) | Missing (20%)

Expected Result: You should see a new multi-colored progress bar below the course progress, with a clear legend explaining each segment.

🔍 How Bootstrap Progress Bars Work

Basic Structure:

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 50%">50%</div>
</div>

Color Classes (Semantic):

• bg-primary - Blue (default Bootstrap color)
• bg-success - Green (positive/completed)
• bg-info - Light blue (informational)
• bg-warning - Orange (caution/in-progress)
• bg-danger - Red (error/critical)
• bg-secondary - Gray (neutral/inactive)

Style Variations:

• Basic: Just progress-bar bg-COLOR
• Striped: Add progress-bar-striped for diagonal lines
• Animated: Add progress-bar-animated to make stripes move (requires striped)
• Custom Height: Add style="height: 25px;" to .progress container

Stacked Bars: Place multiple progress-bar divs inside one progress container:

<div class="progress">
  <div class="progress-bar bg-success" style="width: 40%">40%</div>
  <div class="progress-bar bg-warning" style="width: 30%">30%</div>
  <div class="progress-bar bg-danger" style="width: 30%">30%</div>
</div>

Accessibility Attributes:

• role="progressbar" - ARIA role for screen readers
• aria-valuenow="75" - Current value
• aria-valuemin="0" - Minimum value
• aria-valuemax="100" - Maximum value

🚀 Extension Challenges

Once you've completed the required tasks, try these:

1. Extra Large Bars: Create progress bars with style="height: 40px;" for dramatic effect
2. Labels Outside: Move percentage labels above the progress bar instead of inside
3. Gradient Bars: Use custom CSS to add gradient backgrounds to progress bars
4. Vertical Progress: Research and implement vertical progress bars (hint: transform CSS)
5. Dynamic Progress: Add JavaScript to animate progress on page load (0% -> target%)
6. More Cards: Add 2-3 more profile cards showcasing different students or projects

📚 Bootstrap Resources

• Bootstrap 4.6 Progress Docs
• Bootstrap 4.6 Card Docs
• Color utilities: bg-primary, bg-success, bg-info, bg-warning, bg-danger
• Spacing utilities: mb-4 (margin-bottom), mt-5 (margin-top)

✅ Testing Checklist

Before submitting, verify:

• At least 6 total progress bars are visible (3 original + 3 new)
• All progress bars have different colors
• At least one progress bar is striped
• At least one progress bar is animated
• All progress bars have labels showing percentage
• Second stacked progress bar displays correctly
• Legend for second stacked bar is clear and matches colors
• No console errors in browser DevTools
• Page is responsive (resize browser to test)

Activity 14 | W1 Front-end Design & User Experience | 20-25 min