Open, Edit and Preview Local Files
Updated · Tech checked
One project folder, named files, relative links; edit in any editor and preview by opening the page in the browser.
The direct answer
Local work needs one folder, three named files, and the browser. No terminal, no account, no framework. Open index.html in the browser to preview; read the console when something breaks.
Step by step
- Create one folder, e.g. quote-app, with index.html, styles.css, app.js.
- Link relatively: href="styles.css" and src="app.js", no absolute paths.
- Edit in any text editor, save, reload the browser tab.
- When it breaks, open the console: file name plus line number first.
- Keep the working trio backed up before experiments.
Worked example
Lab A07 opens the same trio: change the heading, the color and the button behavior, then reload and confirm each change separately. Lab A08 fixes a wrong CSS path and a missing image link with before and after proof.
Errors to avoid
- Absolute paths from your machine. They break everywhere else.
- Editing without saving. The browser shows the saved file, not the typed one.
- Panic at red console text. Read the file and line first.
Frequently asked questions
Which editor should I install? Any plain text editor works. Installation is optional; the browser labs run without any.
Do I need the terminal for this? No. Everything in M03 works with open, save and reload.
Sources
- Course lessons M03 and labs A07-A09 (this site).