Welcome to My Page
This is a quick preview layout using HTML and CSS.
```
You can play around with the layout if you want to improve my bleak effort of creating a webpage, tweak the styling, etc.
The point is, we can now edit this file while viewing it in a browser. but first install the extension.
## Viewing HTML with Live Server
HTML doesn’t “run” in the way a script or application does. You view it, and the browser interprets it.
The easiest and fastest way to preview your HTML file in real time is to use the **Live Server** (my personal favorite)
or you can also use **Live Preview** extension by Microsoft, they both do the same thing.
If you haven’t already installed it, open the Extensions panel (or hit `Ctrl + Shift + X`), search for **Live Server**, and install it.
Once that’s done:
1. Right-click on your HTML file.
2. Click **"Open with Live Server."**
Your default browser will instantly load the page.
Now, here's the cool part: every time you make changes in your HTML and hit save, the browser refreshes automatically. No need to reload manually.
💡
Live Server spins up a local development server on your machine, usually something like `http://127.0.0.1:5500`. That means it works on your local network too. So if you grab your phone or tablet and enter your computer’s local IP (like `192.168.1.x:5500`), you can view the same live HTML page there. Super useful for testing responsiveness on real devices.
## Quick Fix: If "Open with Live Server" doesn’t show up
Sometimes the right-click option doesn’t appear right away. Just restart VS Code or reload the window (`Ctrl + Shift + P`, then type and select **Reload Window**). That usually solves it.
## Pro tips to enhance HTML workflow in VS Code
VS Code is more than just a text editor, it’s packed with tools that make writing HTML faster, cleaner, and easier.
Here’s a short list of features I keep coming back to:
**Emmet Abbreviations:** Type shortcuts like `ul>li*5` and hit `Tab, `Emmet expands it into five list items inside a `ul`. It’s magical once you get the hang of it.
**IntelliSense:** As you type, VS Code auto-completes HTML tags and attributes. It even suggests attribute values.
**Format Document:** Messy code? Hit `Ctrl + Shift + I` and your HTML will be formatted cleanly. This helps you stay readable, especially on larger projects.
**Color Picker:** When working with inline CSS or style attributes, the color picker pops up to help you visually pick hex or RGB values. No need to Google color codes.
## Wrapping Up
If you're already spending a lot of time inside VS Code writing HTML, getting the Live Server extension running is a no-brainer.
It's simple, snappy, and just makes the feedback loop faster. And that’s what modern web development is all about, tight, instant iterations.
Personally, I rely on it not just to view my pages, but also to quickly test mobile layouts or animations on other devices. It’s made designing responsive sites a lot smoother.
Once you’re comfortable here, you can start layering in CSS, JS, and frameworks like [Tailwind](https://tailwindcss.com/?ref=itsfoss.com) or Bootstrap right inside the same setup. VS Code can handle it all.