Session 2: Building Your Digital Workspace

Create Professional HTML Tools with VSCodium

✅ Before We Start

Install VSCodium: Free, open-source code editor

Why VSCodium? It's like Microsoft Word but for code - you can see your work clearly, organize files, and make quick edits.

1

Getting Comfortable with VSCodium

30 minutes

🚀 Quick Start Guide

Step 1: Open VSCodium and Create Your Workspace
  1. Open VSCodium
  2. Click "File" → "Open Folder"
  3. Create a new folder on Desktop called "CoordinatorTools"
  4. Select it and click "Open"
Step 2: Create Your First Project Structure
  1. Right-click in the Explorer panel (left side)
  2. Select "New Folder" → name it "dashboard"
  3. Right-click on "dashboard" folder
  4. Select "New File" → name it "index.html"
📁 CoordinatorTools/
📁 dashboard/
📄 index.html
Pro tip: Use keyboard shortcut Ctrl+S (or Cmd+S on Mac) to save your work frequently!
2

Build Your Program Coordinator Portal

60 minutes

Project: All-in-One Dashboard with Quick Links Easy

What we'll build: A personal dashboard with all your daily tools in one place - AI assistants, email, Gamma, Pictory, and any other tools you use regularly.

Step 1: Generate the Dashboard Code with AI

Copy this prompt and paste it into your preferred AI tool:

Create a Program Coordinator Dashboard HTML page with these sections: 1. Header: "Program Coordinator Command Center" with current date/time 2. Quick Links Section with cards for: - ChatGPT (chat.openai.com) - Claude (claude.ai) - Gemini (gemini.google.com) - VSCodium (local app) - Outlook Email (outlook.com) - Gamma (gamma.app) - Pictory (pictory.ai) - Google Sheets - Canvas/Blackboard (customizable) 3. Today's Tasks section (editable checklist stored in browser) 4. Quick Notes section (text area that saves automatically) 5. Important Dates reminder section 6. Student Resources section with common links Requirements: - Modern card-based design - Each tool card should have an icon/emoji, name, and description - Links open in new tabs - Dark mode toggle button - Mobile responsive - Use localStorage to save tasks and notes - Professional blue/teal color scheme - Include a search box to filter tools
Step 2: Copy Code to VSCodium
  1. Copy ALL the code from AI's response
  2. Go to VSCodium
  3. Click in the index.html file you created
  4. Paste the code (Ctrl+V)
  5. Save the file (Ctrl+S)
Step 3: View Your Dashboard
  1. In VSCodium, right-click on index.html
  2. Select "Reveal in File Explorer" (Windows) or "Reveal in Finder" (Mac)
  3. Double-click the index.html file to open in browser
  4. Bookmark this page for daily use!

What You Should See

  • A grid of colorful cards for each tool
  • Working links to all your daily applications
  • A tasks list you can check off
  • A notes area that saves what you type
  • Everything works offline once created!

Customizing Your Dashboard Easy

Add Your Own Tools:

Want to add more tools? Ask AI to help:

I have this dashboard HTML code: [paste your current code] Please add these additional tool cards: - [Tool Name] with URL [website] - [Another Tool] with URL [website] Keep the same styling and make them fit nicely in the grid.
Quick Edit in VSCodium: Use Ctrl+F to find specific text you want to change, like updating a URL or changing a tool name.
3

Automated Weekly Report Generator

45 minutes

Project: Smart Report Template Medium

What we'll build: An HTML form that generates formatted weekly reports you can copy into emails.

Step 1: Create New File in VSCodium
  1. In VSCodium, create a new folder called "reports"
  2. Inside "reports", create file "weekly-generator.html"
📁 CoordinatorTools/
📁 dashboard/
📄 index.html
📁 reports/
📄 weekly-generator.html
Step 2: Generate the Report Tool
Create an HTML Weekly Report Generator with these features: Form inputs for: - Week dates (start and end) - Number of student meetings held - Number of faculty consultations - Events organized this week - Key achievements (text area) - Challenges faced (text area) - Next week priorities (text area) - Special announcements (optional) When submitted, generate a professional report that: - Formats everything into a clean email template - Includes all the entered data - Has a professional greeting and closing - Can be copied with one button click - Shows preview before copying - Saves the data for next week's reference Style: Professional, clean, easy to use Include: Copy button, Clear form button, Save as PDF option
Step 3: Test Your Report Generator
  1. Open weekly-generator.html in browser
  2. Fill in sample data
  3. Click "Generate Report"
  4. Copy the formatted report
  5. Paste into your email client
Remember: This tool stays on your computer - no data is sent anywhere. Perfect for maintaining privacy while creating professional reports!
4

Create a Student Resource Hub

45 minutes

Project: Interactive Student Portal Medium

What we'll build: A searchable, organized resource page for students with FAQs, links, and important dates.

File Setup in VSCodium:
  1. Create folder "student-resources"
  2. Create file "resources.html" inside it
Build a Student Resource Hub HTML page with: 1. Search bar that filters all content 2. Categorized resource sections: - Academic Support (tutoring, writing center, library) - Registration & Enrollment (how-to guides, deadlines) - Financial Aid (links, FAQ, contact info) - Student Life (clubs, events, wellness) - Career Services (resume help, job board) 3. Expandable FAQ section with 10 common questions 4. Important dates calendar/timeline 5. Emergency contacts sidebar 6. "Quick Actions" buttons: - Schedule advising appointment - View degree requirements - Calculate GPA - Find study spaces Make it: - Mobile-friendly - Easy to navigate with smooth scrolling - Printable version available - Accessible with good contrast - Include "last updated" date
VSCodium Tip: Use the "Split Editor" feature (icon in top right) to view your AI prompt and code side-by-side while working!
5

Connecting Everything Together

30 minutes

Create Your Master Navigation

Let's link all your projects together:

Add Navigation to Your Dashboard:

Ask AI to modify your dashboard code:

Add a navigation menu to my dashboard HTML that links to: - Weekly Report Generator (../reports/weekly-generator.html) - Student Resources (../student-resources/resources.html) - Back to Dashboard (index.html) Make it a sticky header that stays at top when scrolling. Style it to match the existing design.

Final Checklist - Your Digital Workspace:

  • Dashboard with all your daily tools
  • Weekly report generator
  • Student resource hub
  • All files organized in VSCodium
  • Everything works offline
  • Bookmarks saved for quick access

Bonus Enhancements

Choose one enhancement to try:

📊 Add Charts
🎨 Custom Colors
📱 Mobile App Icon
🔔 Notifications
📈 Analytics
🌙 Dark Mode
Add [chosen enhancement] to my HTML page: [Paste your current code] For example: "Add a simple bar chart showing student enrollment by program using Chart.js"

🎉 Session 2 Complete!

You've accomplished:

✓ Set up VSCodium as your development environment
✓ Created a personalized coordinator dashboard
✓ Built a weekly report generator
✓ Developed a student resource hub
✓ Learned to modify and customize HTML with AI help

Your New Workflow:

  1. Open your dashboard bookmark each morning
  2. Access all tools from one central location
  3. Generate weekly reports in 2 minutes
  4. Share the student resource link with students
  5. Update and improve with AI assistance anytime

📚 Take-Home Resources

VSCodium Shortcuts to Remember:

AI Prompts for Future Projects:

Next Session Preview: We'll deploy everything online and create advanced automations!