Welcome to Your Digital Workspace!
VSCodium is a free, open-source code editor that makes creating HTML tools easy. Think of it as Microsoft Word for building websites and tools. It's completely free, works on all computers, and doesn't require any coding experience to get started.
🎯 Learning Objectives
- Download and install VSCodium on your computer
- Understand the basic interface and panels
- Create your first project folder structure
- Learn essential keyboard shortcuts
- Save and preview your first HTML file
🤔 Why VSCodium? (Not Just Notepad)
Free & Open
100% free forever, no subscriptions or trials
Color Coding
Automatically highlights HTML, CSS, JavaScript
Smart Suggestions
Autocomplete saves time and prevents errors
Project Manager
Organize all your tools in one workspace
Find & Replace
Search across all files instantly
Privacy First
No telemetry or data collection
📥 Download VSCodium
Choose the version for your operating system:
🪟 Windows Installer 🍎 macOS Installer 🐧 Linux PackageClick the link, scroll down to "Assets", and download the installer for your system
🚀 Installation Walkthrough
Download the Installer
- Visit vscodium.com
- Click "Download" and select your operating system
- Wait for the download to complete (about 100MB)
Run the Installer
- Open your Downloads folder
- Double-click the VSCodium installer file
- Windows: Accept the license agreement
- Important: Check "Add to PATH" during installation
- Click "Next" through remaining prompts
- Click "Install" and wait 1-2 minutes
Launch VSCodium
- Click "Finish" to launch automatically
- Or find VSCodium in your Applications folder (Mac) or Start Menu (Windows)
- Pin it to your taskbar/dock for easy access!
🗺️ Understanding the VSCodium Interface
When you first open VSCodium, you'll see several panels. Here's what each one does:
📸 VSCodium Interface Tour
Left: Explorer | Center: Editor | Bottom: Terminal
Key Interface Elements:
- Activity Bar (Far Left): Icons for Explorer, Search, Extensions, etc.
- Explorer Panel (Left Side): Your project files and folders
- Editor Area (Center): Where you write and edit code
- Status Bar (Bottom): Shows file info, line numbers, errors
- Menu Bar (Top): File, Edit, View options
📁 Create Your First Workspace
Open a Folder
- Click "File" → "Open Folder" (or Ctrl+K Ctrl+O)
- Navigate to your Desktop
- Click "New Folder" button
- Name it
CoordinatorTools - Click "Select Folder"
Create Your Project Structure
- In the Explorer panel (left side), hover over your folder name
- Click the "New Folder" icon (📁+)
- Name it
dashboardand press Enter - Right-click on the
dashboardfolder - Select "New File"
- Name it
index.htmland press Enter
Write Your First HTML
Click in the editor area and type:
Save Your Work
- Press Ctrl+S (or Cmd+S on Mac)
- Notice the dot on the file tab disappears (means it's saved)
Preview in Browser
- Right-click on
index.htmlin Explorer - Select "Reveal in File Explorer" (Windows) or "Reveal in Finder" (Mac)
- Double-click
index.htmlto open in your browser - 🎉 You should see your page!
Your Folder Structure Should Look Like:
⌨️ Essential Keyboard Shortcuts
Memorize these to work faster:
- Ctrl+S - Save file
- Ctrl+Z - Undo
- Ctrl+F - Find text
- Ctrl+C / Ctrl+V - Copy/Paste
- Ctrl+/ - Comment/Uncomment line
- Alt+↑/↓ - Move line up/down
- Ctrl+D - Select next occurrence
Mac users: Replace Ctrl with Cmd
🛠️ Recommended Settings
Auto Save
- Click "File" → "Preferences" → "Settings"
- Search for "auto save"
- Change from "off" to "afterDelay"
- Now your files save automatically!
Word Wrap
- In Settings, search for "word wrap"
- Change to "on"
- Long lines will wrap instead of scrolling horizontally
- Forgetting to save before refreshing browser
- Opening individual files instead of the folder
- Not using the correct file extension (.html)
- Creating files outside your project folder
✅ Topic Completion Checklist
- ✓ VSCodium downloaded and installed
- ✓ Created CoordinatorTools workspace folder
- ✓ Made first HTML file and saved it
- ✓ Previewed HTML file in browser
- ✓ Learned basic keyboard shortcuts
- ✓ Configured auto-save and word wrap
🚀 What's Next?
Now that you have VSCodium set up, you're ready to build your first real tool: a Program Coordinator Portal with all your daily links and tools in one place!