HTML Course 2. Setting up the working environment

HTML Course 2: Setting Up the Working Environment

Before writing any HTML, it is essential to prepare a proper working environment. This section covers:

• Choosing a code editor
• Creating a folder structure
• Installing extensions and tools
• Using version control (Git)
• Running a local server and live reloading
• Creating your first HTML file
• Previewing and debugging in the browser

1. Choosing a Code Editor

Your code editor is where you’ll write HTML. Popular choices:

• VS Code – Highly extensible, integrated terminal, live server plugin.
• Sublime Text – Fast, lightweight, supports snippets and packages.
• Atom – Git integration, hackable, community packages.
• Brackets – Live preview built-in, focused on front-end.

Key features to look for:

• Syntax highlighting for HTML, CSS, JavaScript
• Code completion / Emmet support
• Built-in or extensible live preview
• Integrated Git tools

2. Creating a Folder Structure

Organizing your files helps maintain clarity as projects grow. A typical layout:

Example folder tree:

project-root/
├── index.html
├── css/
│   └── style.css
├── js/
│   └── app.js
└── images/
    └── logo.png
  

3. Installing Extensions and Tools

If you use VS Code, consider:

• Live Server – Launches a local server with live reload.
• Prettier – Automatic code formatting.
• HTML Snippets – Emmet-like shortcuts for fast HTML.
• GitLens – Visualize Git history in the editor.

To install an extension in VS Code:

1. Open the Extensions panel (⇧⌘X or Ctrl+Shift+X).
2. Search for the extension name.
3. Click Install.

4. Version Control with Git

Tracking changes and collaborating is easier with Git:

1. Install Git from git-scm.com.
2. In your project folder, run:

   git init
         

3. Create a .gitignore file to skip files you don’t want to track:

   node_modules/
   dist/
   *.log
         

4. Stage and commit:

   git add .
   git commit -m 'Initial commit'
         

5. Running a Local Server and Live Reload

Opening HTML files by double-click works, but you lose server features (fetch, routing). A local server solves this:

• VS Code + Live Server extension
• npm package http-server:

npm install --global http-server
# then in project-folder/
http-server
  

Live reload ensures your browser refreshes automatically when code changes.

6. Creating Your First HTML File

Inside index.html, start with a minimal skeleton. Your editor’s Emmet abbreviation ! often expands to this:

  
    
    
    
    
    
  
  
    
    
Welcome to My Page
    
This is my first HTML file in the new environment.

    
    
  

  

7. Previewing and Debugging in the Browser

After running your server, open http://localhost:8080 (or the port shown). Use your browser’s developer tools to inspect:

• Elements panel – view and modify the DOM structure
• Console – check for JavaScript errors
• Network – monitor resource loading
• Sources – set breakpoints in JS

Summary

With your editor configured, folder structure in place, Git initialized, and a live server running, you’re ready to dive into writing HTML. This solid foundation will streamline your development workflow and minimize friction as you build web pages.