The Big Picture
Your static website is just code: HTML (structure), CSS (styling), and JavaScript (interactions). You own all of it. No database, no plugins, no vendor lock-in.
To make changes:
- Edit the code in a text editor (easy for content, copy, images)
- Test locally to make sure nothing broke
- Upload the changes to the server
- Your live site updates instantly
For simple changes (text, images, copy), this takes 15 minutes. For styling or complex changes, you might need a developer—but the code is yours to share with anyone.
Skill Levels
This guide covers edits from beginner (change text) to advanced (modify CSS). Find your level:
- Beginner Change text, update images, modify links
- Intermediate Add sections, modify HTML structure, edit forms
- Advanced Update CSS styling, modify JavaScript, complex refactoring
Getting Started: Tools You'll Need
Beginner Text Editor
To edit HTML and CSS files, you need a text editor. These are free:
VS Code (Recommended)
Free, powerful, runs on Mac/Windows/Linux. Highlights code, shows errors, includes Git integration.
Download: code.visualstudio.com
Free
Sublime Text
Lightweight, fast, clean interface. Free to try, $80 license (optional).
Download: sublimetext.com
Free / $80
Notepad++ (Windows) / TextEdit (Mac)
Built-in options that work for basic editing. Not ideal for larger projects, but functional.
Free
Intermediate Git & GitHub
Your site code lives on GitHub (version control). To push changes live:
- Edit files locally in your text editor
- Use Git to commit changes ("save with a message")
- Push to GitHub (your code syncs online)
- Vercel automatically deploys (your live site updates)
GitHub Desktop makes this easier than command line. Download: desktop.github.com
Intermediate Local Server (Optional)
To test changes before uploading, run a local server. This simulates the live environment:
# Using Python (Mac/Linux/Windows)
python -m http.server 8000
# Then visit: http://localhost:8000 in your browserOr use the Live Server extension in VS Code (one-click local preview).
Common Edits & How-To
Beginner Change Text on the Homepage
Task: Update your tagline or a section heading.
- Open
index.htmlin your text editor (VS Code, Sublime, etc.) - Find the text you want to change (use Ctrl+F to search)
- Edit the text between the HTML tags
- Save the file (Ctrl+S)
- Commit the change to Git and push to GitHub
- Vercel deploys automatically within 1–2 minutes
Example:
<!-- Before -->
<h1>Build something that sells.</h1>
<!-- After -->
<h1>Build your digital brand.</h1>Beginner Update an Image
Task: Replace a team photo or logo.
- Prepare your new image (optimize it, preferably WebP format)
- Upload it to the
images/folder in your project - Open the HTML file that contains the old image
- Find the old image filename and replace it with the new one
- Save, commit, push to GitHub
Example:
<!-- Before -->
<img src="images/old-photo.webp" alt="Team photo">
<!-- After -->
<img src="images/new-photo.webp" alt="Team photo">Intermediate Update a Contact Link or CTA
Task: Change your email, phone, or WhatsApp number.
Find all instances of your old number/email and replace with the new one. Use Ctrl+H (Find & Replace) to do this across the entire project:
<!-- Before -->
<a href="https://wa.me/66801202074">WhatsApp</a>
<a href="mailto:[email protected]">Email</a>
<!-- After -->
<a href="https://wa.me/66801234567">WhatsApp</a>
<a href="mailto:[email protected]">Email</a>Intermediate Add a New Blog Post or Page
Task: Publish a new article or service page.
- Create a new `.html` file in the appropriate folder (e.g.,
blog/new-post.html) - Copy the structure from an existing page (use it as a template)
- Update the content, title, meta description, etc.
- Link to it from the navigation or index page
- Update the sitemap to include the new URL
- Save, commit, push
Why this matters: You own the structure. No CMS, no dashboards, no limitations.
Advanced Change Colors or Styling (CSS)
Task: Update your brand colors or change a button style.
Edit the CSS in your stylesheet (usually in a `