Testing Your HTML Template Locally

Testing Before Uploading to Web

Best practice: Test locally first, then upload.

What You Need

• Your extracted template files
• Any web browser (Chrome, Firefox, Safari, Edge)
• Text editor to view/edit code (VS Code, Sublime Text)

Method 1: Open in Browser (Simplest)

1. Navigate to your template folder
2. Find index.html
3. Right-click it
4. Select Open with → Your Browser
5. Site opens in browser
6. You can click around and test

Important limitation: Links to other pages won't work with this method.

Method 2: Use Local Server

For full functionality including page links:

Using Python (If installed)

1. Open terminal/command prompt
2. Navigate to template folder: cd /path/to/template
3. Run: python -m http.server (Python 3) or python -m SimpleHTTPServer (Python 2)
4. Output shows: Serving HTTP on port 8000
5. Open browser to: http://localhost:8000
6. Full site now works locally

Using Node.js (If installed)

1. Install http-server: npm install -g http-server
2. Navigate to template folder: cd /path/to/template
3. Run: http-server
4. Shows local URL (usually http://localhost:8080)
5. Open that URL in browser
6. Full site works locally

Using VS Code Live Server

1. Open template folder in VS Code
2. Install Live Server extension
3. Right-click index.html
4. Select Open with Live Server
5. Site opens with auto-refresh
6. Changes reflected immediately

Testing Checklist

When testing locally:

• [ ] All pages load - Click all page links
• [ ] Images appear - Verify images display
• [ ] Styles applied - Colors, fonts, layouts show correctly
• [ ] Forms work - Fill out and submit forms
• [ ] Interactive elements work - Buttons, dropdowns, animations
• [ ] Mobile responsive - Test at mobile width (use browser DevTools)
• [ ] Links correct - All internal links work
• [ ] External links work - External links open in new tab
• [ ] No console errors - Open DevTools (F12) and check console

Browser DevTools (Debugging)

When something doesn't work:

1. Right-click on page
2. Select Inspect or Inspect Element
3. Elements tab - Shows HTML structure
4. Console tab - Shows JavaScript errors
5. Network tab - Shows failed file loads
6. Responsive Design Mode - Test mobile sizes

Fixing Common Local Testing Issues

Images don't load:
- Check image paths are correct
- File names match exactly (case-sensitive)
- Images in correct folder
- Use relative paths (images/photo.jpg not /images/photo.jpg)

Links broken:
- Check HTML file names match
- Ensure all HTML files in root folder
- Use correct page names (about.html not about)
- Verify page exists

CSS not applied:
- Check CSS path correct
- Verify style.css in css/ folder
- Check permissions if uploaded
- Hard refresh browser (Ctrl+Shift+R or Cmd+Shift+R)

JavaScript errors in console:
- Script path might be wrong
- JavaScript file might not exist
- Syntax error in script
- Check script file permissions

Testing on Different Browsers

Test on multiple browsers locally:
- Chrome - Most common, good DevTools
- Firefox - Good for debugging
- Safari - Verify Apple compatibility
- Edge - Windows compatibility

Different browsers may render slightly differently.

Testing on Mobile Devices

After local testing:

1. Upload to hosting
2. Get your domain URL
3. Open on your phone
4. Test full functionality
5. Check mobile layout
6. Test touch interactions