⏱️ 30 minutes
Bring It All Together
You've built three powerful tools. Now let's connect them with smart navigation so everything works as a unified system!
🎯 Learning Objectives
- Add navigation links between all tools
- Update dashboard to include all projects
- Create consistent headers/footers
- Set up your workspace for daily use
- Learn basic project organization
📁 Your Complete Project Structure
Here's what you've built:
📁 CoordinatorTools/
📁 dashboard/
📄 index.html (Your command center)
📁 reports/
📄 weekly-generator.html (Report tool)
📁 student-resources/
📄 resources.html (Student hub)
🔗 Linking Everything Together
Step 1: Update Your Dashboard
Add cards for your new tools:
- Open
dashboard/index.htmlin VSCodium - Find the tools section (look for existing tool cards)
- Ask AI: "Add two new tool cards:
- Weekly Report Generator linking to ../reports/weekly-generator.html
- Student Resources Hub linking to ../student-resources/resources.html
- Paste updated code and save
Step 2: Add Navigation to Report Generator
Open reports/weekly-generator.html:
- Find the header or top section
- Ask AI: "Add a navigation bar at the top with links to:
- Dashboard (../dashboard/index.html)
- Student Resources (../student-resources/resources.html)
- Save changes
Step 3: Add Navigation to Student Hub
Same process for student-resources/resources.html
💡 Understanding Relative Paths
../ means "go up one folder"
- From dashboard to reports:
../reports/weekly-generator.html - From reports to dashboard:
../dashboard/index.html - From student-resources to dashboard:
../dashboard/index.html
🚀 Setting Up for Daily Use
1. Set Dashboard as Browser Homepage
- Open your dashboard in browser
- Copy the file path from address bar
- Go to browser settings
- Set as homepage or startup page
2. Pin VSCodium Workspace
- In VSCodium: File → Save Workspace As...
- Save to Desktop as "CoordinatorWorkspace"
- Double-click this file to open entire project
3. Create Desktop Shortcuts
- Right-click
index.html→ Create shortcut - Rename to "My Dashboard"
- Drag to desktop
4. Backup Your Work
- Copy entire CoordinatorTools folder to cloud storage (OneDrive/Google Drive)
- Set up automatic sync
- Access from any computer
🎨 Optional: Add Consistent Branding
Ask AI to help you:
- Use same color scheme across all tools
- Add your institution logo to headers
- Create matching footer with your contact info
- Standardize fonts and styling
Prompt: "Update the header of [file] to match this styling: [paste example from dashboard]"
✅ Session 2 Completion Checklist
- ✓ Dashboard includes links to all tools
- ✓ Navigation between tools works correctly
- ✓ All relative paths functional
- ✓ Workspace saved in VSCodium
- ✓ Dashboard set as browser homepage
- ✓ Project backed up to cloud storage
- ✓ Tested all tools and navigation
🎉 Congratulations!
You've completed Session 2: Building Your Digital Workspace!
You now have a complete suite of productivity tools:
- ✅ Personal dashboard
- ✅ Weekly report generator
- ✅ Student resource hub
- ✅ Professional development skills with VSCodium
🚀 What's Next in Session 3?
Power Tools - PowerShell & Claude Code
- Introduction to PowerShell automation
- Install Node.js for advanced tools
- Set up Claude Code CLI
- Build custom projects with AI assistance
- Transition to developer-level workflows
Time Commitment: 3-4 hours
Prerequisites: Comfort with VSCodium, basic HTML understanding
💡 Before Session 3
- Use your tools daily this week to build familiarity
- Make at least one customization to each tool
- Note any features you wish existed (we'll build them!)
- Share your dashboard with a colleague
- Backup everything to cloud storage
🎓 What You've Mastered
- VSCodium workspace management
- HTML project structure and organization
- Using AI to generate complete applications
- localStorage for data persistence
- Form handling and user input
- Responsive design principles
- Relative file paths and navigation
- Creating professional productivity tools