Lesson 12 of 55 · HTML
Setting Up Your Development Environment
Duration: 10 min
Setting Up the Environment
You only need a text editor and a browser, but modern tools dramatically speed up development.
Recommended editors
- VS Code – Extensions like Live Server, Prettier, HTMLHint boost productivity.
- Sublime Text, Atom, WebStorm, Notepad++ – Any editor that saves plain .html files works.
Live preview
Install the Live Server extension (VS Code) and open index.html. It serves the file on http://127.0.0.1:5500 and reloads on every save. This mimics a tiny web server and gives instant feedback.
Folder structure
project/
├─ index.html
├─ about.html
├─ assets/
│ ├─ images/
│ └─ css/
└─ README.md
Keeping assets in dedicated folders simplifies paths and aids version control.
Version control
Initialize a Git repository (git init) and commit often. Push to GitHub or GitLab for backup and collaboration.
Debugging tools
- Browser DevTools – inspect DOM, CSS, network requests.
- Lighthouse – audit performance, accessibility, SEO.
- W3C validator – Validate markup against the specification.
Tip: Use Spaces (2 or 4) for indentation and set the file encoding to UTF-8 to avoid character issues.
Optional extras
- ESLint or HTMLHint for linting.
- Prettier for consistent code formatting.
- Git hooks (e.g.,
pre‑commit) to run linters automatically.
Quick checklist for development setup
- Install a code editor.
- Add Live Server (or similar) for auto‑reload.
- Create a clean folder hierarchy.
- Initialise Git and make the first commit.
- Open the page in DevTools and run a basic accessibility audit.
Enjoy the setup – you’re now ready to write clean, testable HTML!