🎯 Build Your Program Coordinator Portal

Session 2, Topic 2 | All Your Tools in One Dashboard

← Back to Course Dashboard / Session 2 / Topic 2
⏱️ 60 minutes

Create Your Command Center

Stop juggling browser tabs! Build a personal dashboard that brings together all your daily tools - AI assistants, email, student systems, and more - in one beautiful, organized place.

🎯 Learning Objectives

  • Use AI to generate a complete dashboard HTML file
  • Create quick-launch cards for all your daily tools
  • Add a task checklist that saves in your browser
  • Build a notes section that persists across sessions
  • Customize colors, tools, and layout

🏗️ What We're Building

Your Dashboard Will Include:

  • ✨ Quick-launch cards for ChatGPT, Claude, Gemini, Gamma, Pictory
  • 📧 Direct links to email, calendar, and student systems
  • ✅ Interactive task checklist (saves automatically)
  • 📝 Quick notes area (persists in browser storage)
  • 📅 Important dates reminder section
  • 🔍 Search/filter functionality
  • 🌙 Dark mode toggle
  • 📱 Mobile-responsive design

📸 Your Dashboard Preview

Grid of colorful tool cards • Task list • Notes section

🚀 Step-by-Step Build Process

Prepare Your AI Prompt

Copy this entire prompt - it's designed to get you a complete, working dashboard:

Create a Program Coordinator Dashboard HTML page with these specifications: HEADER SECTION: - Title: "Program Coordinator Command Center" - Display current date and time (live updating) - Welcome message with user's name (editable) QUICK TOOLS SECTION: Create a grid of cards for these tools (each card should have icon, name, short description): - ChatGPT (chat.openai.com) - Claude (claude.ai) - Google Gemini (gemini.google.com) - Gamma Presentations (gamma.app) - Pictory Video (pictory.ai) - Outlook Email (outlook.office.com) - Google Calendar (calendar.google.com) - VSCodium (mention it's a local app) - Google Sheets (sheets.google.com) - [Placeholder for Student System - make it customizable] PRODUCTIVITY SECTIONS: 1. Today's Tasks - Interactive checklist - Add new tasks - Check off completed - Delete tasks - Save to localStorage 2. Quick Notes - Text area - Auto-saves as you type - Uses localStorage 3. Important Dates - Display list - Upcoming deadlines - Events - Customizable FEATURES REQUIRED: - Search/filter box to find tools quickly - Dark mode toggle button (switch between light/dark themes) - Responsive grid layout (works on phone, tablet, desktop) - Professional teal/blue color scheme - All links open in new tabs - localStorage for persistence STYLING: - Modern card-based design with shadows - Hover effects on cards - Clean, professional typography - Proper spacing and padding - Icons/emojis for visual appeal Please provide complete, ready-to-use HTML with embedded CSS and JavaScript.

Generate with AI

  • Open your preferred AI tool (ChatGPT, Claude, or Gemini)
  • Paste the prompt above
  • Wait 30-60 seconds for generation
  • Review the code - it should be a complete HTML file

Copy Code to VSCodium

  1. In AI's response, click the "Copy code" button (or select all text)
  2. Open VSCodium
  3. Navigate to your dashboard folder
  4. Click on index.html (or create it if needed)
  5. Select all existing content (Ctrl+A)
  6. Paste the new code (Ctrl+V)
  7. Save (Ctrl+S)

Preview Your Dashboard

  1. Right-click index.html in VSCodium Explorer
  2. Select "Reveal in File Explorer"
  3. Double-click the file to open in your browser
  4. 🎉 Your dashboard should now be live!

Test All Features

  • Click each tool card - links should open in new tabs
  • Add a task to the checklist and check it off
  • Type a note and refresh page - note should persist
  • Try the dark mode toggle
  • Test search/filter functionality
  • Resize browser to test mobile responsiveness

Bookmark for Daily Use

  1. With dashboard open in browser, press Ctrl+D
  2. Name it "My Dashboard"
  3. Consider setting it as your browser homepage!

🎨 Customization Ideas

Add More Tools

Prompt: "Add these tool cards to my dashboard: [Tool Name] at [URL], [Another Tool] at [URL]"

Change Colors

Prompt: "Change the color scheme to purple and orange instead of teal and blue"

Add New Sections

Prompt: "Add a 'Frequently Used Documents' section with links to Google Docs"

Customize Layout

Prompt: "Make the tool cards display in 4 columns instead of 3"

Add Weather Widget

Prompt: "Add a weather widget that shows current conditions for [City]"

Student System Link

Replace the placeholder with your actual student information system URL

💡 Pro Tips for Your Dashboard

  • Set as Homepage: Make this your browser's start page
  • Pin Important Tools: Reorder cards to put most-used tools first
  • Use Tasks Daily: Start each morning by reviewing your checklist
  • Backup Your File: Copy index.html to cloud storage periodically
  • Share with Team: Send the file to colleagues who might benefit
  • Mobile Bookmark: Add to phone home screen for mobile access

🔧 Quick Edits Without AI

Update a Tool URL:

  1. Press Ctrl+F in VSCodium
  2. Search for the tool name (e.g., "ChatGPT")
  3. Find the URL in the code
  4. Replace with new URL
  5. Save and refresh browser

Change Dashboard Title:

  1. Find the <h1> tag near the top
  2. Change text between tags
  3. Save and refresh

Add Your Name:

  1. Search for "Welcome" or similar greeting
  2. Edit the text
  3. Save and refresh
⚠️ Troubleshooting Common Issues:
  • Links don't work: Check URLs have https:// prefix
  • Tasks don't save: Ensure localStorage isn't blocked in browser
  • Layout looks broken: Make sure you copied ALL the code
  • Dark mode doesn't work: Check JavaScript console for errors

✅ Topic Completion Checklist

🚀 Challenge: Advanced Customizations

Ready to level up? Try these advanced modifications:

Ask AI: "Add a [feature] to my dashboard" and paste your current code.

🎓 What You've Learned

You now have a powerful, personalized productivity tool that saves you time every day!

Next Topic: Build a Weekly Report Generator →