Turning Learners into Developers
- HTML Basic Structure Program
If you’re starting web development, the first thing you need is to create and run your first HTML program in Visual Studio Code (VS Code).
- Step 1: Create an HTML File
- Open VS Code
- Click on New File Or Shortcut: Ctrl + N
- Save the file as index.html Or Shortcut: Ctrl + S
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first HTML program in VS Code.</p>
</body>
</html>
- Understanding the Section
The <head> section contains information about the webpage, not visible directly on the page.
1. <!DOCTYPE html>
- Defines the document type
- Tells the browser: this is an HTML5 document
2. <html lang="en">
- Root element of the webpage
- lang="en" specifies the language as English
- Helps search engines and accessibility tools
3. <head>
- Contains meta information (data about the page)
- Not displayed on the webpage
4. <meta charset="UTF-8">
- Defines character encoding
- Supports all characters (letters, symbols, emojis)
- Prevents text display issues
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
- Makes your website responsive
- Ensures proper display on mobile devices
- Adjusts layout based on screen size
- Step 3: Run HTML Program
After writing your HTML code, the next step is to run and view it in a web browser.
🔹 Method 1: Using Live Server (Recommended)
This is the best and most professional way to run HTML files in VS Code.
Steps:
- Open VS Code
- Go to Extensions (Left Sidebar) Or Shortcut: Ctrl + Shift + X
- Search for Live Server
- Click Install (by Ritwick Dey)
▶️ Run Your File:
- Right-click on your index.html file
- Click Open with Live Server
💡 What Happens?
- Your HTML file opens in your default browser
- A local server URL is created like: http://127.0.0.1:5500/index.html
- The page automatically reloads when you save changes
Advantages of Live Server:
- Auto-refresh (no need to reload manually)
- Faster development
- Works like a real web server
- Better testing for responsive design
🔹 Method 2: Open Directly in Browser
This is the simplest method, good for beginners.
Steps:
- Go to your saved file (index.html)
- Double-click the file Or
- Right-click → Open with → Choose browser (Chrome, Edge, etc.)
💡 What Happens?
- File opens in browser with path like: file:///C:/Users/YourName/index.html
- You will see your webpage output
- In browser method → Press F5 to refresh
Quick Comparison
Feature | Live Server | Direct Browser |
|---|---|---|
Auto Refresh | Yes | No |
Speed | Fast | Normal |
Beginner Friendly | Yes | Yes |
Professional Use | Yes | No |
- Essential VS Code Shortcuts
File & Setup
Shortcut Key | Action |
|---|---|
Ctrl + N | New File |
Ctrl + S | Save File |
Ctrl + O | Open File |
Writing HTML Faster
Shortcut Key | Action |
|---|---|
! + Enter | Generate full HTML structure |
Ctrl + Space | Show suggestions |
Editing & Formatting
Shortcut Key | Action |
|---|---|
Ctrl + / | Comment / Uncomment |
Shift + Alt + F | Format Code |
Alt + ↑ / ↓ | Move line up/down |
Pro Tips
- Use ! + Enter → instantly creates full HTML boilerplate
- Use Ctrl + / → quickly test code by commenting
- Use formatting shortcut → keeps code clean and readable
