Code Editor Setup (Optional)

Installing and using VS Code for local editing - completely optional!

Important: This is Optional

You do NOT need to install a code editor to edit this website. You can do everything using GitHub's web editor in your browser.

See GitHub Web Editor Guide for browser-only editing.

This guide is for users who want a local development environment for faster feedback and advanced editing.

Do You Need a Code Editor?

You DON'T need a code editor if:

For most content editors, the web browser is enough!

You MIGHT want a code editor if:

Local setup is an optimization, not a requirement.

What is a Code Editor?

A code editor is a specialized text editor designed for working with code and markdown files. Think of it like Microsoft Word, but for code:

We recommend Visual Studio Code (VS Code) because it's:

Installation Guide

Step 1: Download VS Code

Visit: https://code.visualstudio.com/

Click the big download button for your operating system (Mac, Windows, or Linux).

Step 2: Install

Mac:

  1. Open the downloaded .dmg file
  2. Drag the VS Code icon to your Applications folder
  3. Launch VS Code from Applications

Windows:

  1. Run the downloaded .exe installer
  2. Follow the installation wizard
  3. Leave default options checked
  4. Launch VS Code from Start Menu

Linux: Follow the instructions for your distribution at: https://code.visualstudio.com/docs/setup/linux

Step 3: Open the Project

You need to have the repository cloned to your computer first. See Git for Beginners for cloning instructions.

Once cloned:

  1. Launch VS Code
  2. File → Open Folder (or File → Open on Mac)
  3. Navigate to your lowdo-dot-net folder
  4. Click "Open"

VS Code opens with your project in the sidebar.

Navigating VS Code

The Interface

VS Code has several key areas:

┌─────────────────────────────────────────┐
│  Menu Bar                               │
├────┬────────────────────────────────────┤
│    │  Editor                            │
│ S  │  (Your file content appears here)  │
│ i  │                                    │
│ d  │                                    │
│ e  │                                    │
│ b  │                                    │
│ a  │                                    │
│ r  ├────────────────────────────────────┤
│    │  Terminal (optional)               │
└────┴────────────────────────────────────┘

Sidebar Icons (Left Side)

  1. Explorer (📁) - Browse files and folders
  2. Search (🔍) - Find text across all files
  3. Source Control (🌿) - Git integration
  4. Extensions (🧩) - Install add-ons

File Explorer

Click the Explorer icon (📁) to see your files:

Opening Files Quickly

Instead of clicking through folders:

Example: Type "casa" to find casa-marianella.md

Recommended Extensions

Extensions add extra features to VS Code. Here are the most useful for this project:

Essential Extensions

  1. Markdown All in One

  2. YAML

Installing Extensions

  1. Click the Extensions icon (🧩) in the sidebar (or View → Extensions)
  2. Search for the extension name
  3. Click "Install"
  4. Reload VS Code if prompted

Optional but Helpful Extensions

Basic Editing

Opening and Editing Files

  1. Use the Explorer or Cmd+P/Ctrl+P to open a file
  2. Edit the content
  3. Save: Cmd+S (Mac) or Ctrl+S (Windows)
  4. Unsaved files show a dot (●) in the tab

Markdown Preview

To see how your markdown will look:

  1. Open a .md file
  2. Click the preview icon (📖) in the top right
  3. Or: Cmd+Shift+V (Mac) / Ctrl+Shift+V (Windows)

Split view shows editor and preview side-by-side.

Multiple Files

Open multiple files in tabs:

Using the Terminal

VS Code has a built-in terminal for running commands like npm start or git commit.

Opening the Terminal

The terminal opens at the bottom of the window.

Using the Terminal

You can run any command here:

npm start              # Start development server
git status             # Check git status
git add .              # Stage changes
git commit -m "..."    # Create commit

See Making Commits and Git for Beginners for command details.

Keyboard Shortcuts

Essential Shortcuts

ActionMacWindows
Save fileCmd+SCtrl+S
Open fileCmd+PCtrl+P
Find in fileCmd+FCtrl+F
Find in all filesCmd+Shift+FCtrl+Shift+F
Open terminalCtrl+`Ctrl+`
Markdown previewCmd+Shift+VCtrl+Shift+V
Command paletteCmd+Shift+PCtrl+Shift+P

Command Palette

The command palette gives access to all VS Code features:

Git Integration

VS Code has built-in git features. See the Source Control icon (🌿) in the sidebar.

Viewing Changes

  1. Click the Source Control icon
  2. See list of changed files
  3. Click a file to see what changed (diff view)

Staging and Committing

  1. Click the Source Control icon
  2. Hover over files and click "+" to stage them
  3. Type a commit message in the text box
  4. Click the checkmark ✓ to commit
  5. Click "..." → "Push" to upload to GitHub

See Making Commits for detailed workflow.

Tips and Tricks

Auto-Save

Enable auto-save so you don't have to manually save:

  1. File → Auto Save (Mac) or File → Auto Save (Windows)
  2. Check the menu item
  3. Files save automatically after a short delay

Zen Mode

Hide everything except the editor for distraction-free writing:

Split Editor

View two files side by side:

  1. Open a file
  2. Click the split editor icon (top right)
  3. Or: Cmd+\ (Mac) / Ctrl+\ (Windows)

Useful for comparing files or copying content.

Folding Sections

Collapse sections to focus on specific parts:

Working Locally vs. Online

Advantages of Local Editing (VS Code)

✅ Instant feedback - See changes immediately with local dev server ✅ Offline work - Edit without internet connection ✅ Batch operations - Edit multiple files quickly ✅ Advanced features - Autocomplete, syntax checking, extensions ✅ Faster - No page reloads between edits

Advantages of Online Editing (GitHub Web)

✅ No installation - Works in any browser ✅ Any device - Phone, tablet, or computer ✅ No setup - No git, no npm, no dependencies ✅ Always latest - No need to pull changes ✅ Simpler - Less to learn and maintain

Both methods are valid! Choose what works best for your workflow.

Troubleshooting

"VS Code won't open the folder"

Problem: You get an error when opening the folder.

Solutions:

"I don't see my files in the sidebar"

Problem: The Explorer is empty or shows wrong files.

Solutions:

"Extensions won't install"

Problem: Extensions fail to install.

Solutions:

"Terminal won't open"

Problem: Terminal doesn't appear when you try to open it.

Solutions:

Next Steps

If You Installed VS Code:

  1. Git for Beginners - Clone the repository
  2. Making Commits - Save and publish changes
  3. Viewing Changes Live - Test locally

If You're Sticking with Web Editing:

  1. GitHub Web Editor - Complete browser-based guide
  2. Making Commits - Web editor workflow (Method 1)
  3. Using AI Assistants - Get help without installation

Quick Reference

First Time Setup

  1. Download VS Code from https://code.visualstudio.com/
  2. Install it
  3. Open the project folder (File → Open Folder)
  4. Install extensions: Markdown All in One, YAML

Common Tasks

Remember

Installing VS Code is optional. You can edit the entire site in your web browser using GitHub's web editor!